Alpha-Beta-Release Blog

Приветствую наших читателей. Мы продолжаем цикл статей о библиотеке ExtJS, предназначенной для построения современных веб-интерфейсов. В первой части статьи мы рассмотрели процесс создания простой формы регистрации пользователей, сегодня мы займёмся серверной частью, а также увидим, что же собственно происходит между клиентом (приложением на ExtJS) и сервером, в нашем случае серверная платформа основана на РНР.
Напомним ещё раз, как же выглядит наша форма:

На стороне клиента, то есть в самой форме, у нас уже встроена основная проверка на корректность заполнения данных, но так как мы не имеем связи с сервером, то эта проверка основывается только на формальных правилах, к примеру, на минимальную и максимальную длину текста, корректность e-mail адреса, но более сложная проверка происходит на сервере, который в случае неправильности данных вернёт специальный код, который форма использует, чтобы подсветить неправильно заполненное поле и вывести описание ошибки.

Для начала необходимо узнать, что же все такие форма передаёт на сервер. Метод и URL задаются при описании формы, в нашем случае это POST, а скрипт обработки данных расположен в той же директории на сервере. Дополнительно мы передаём ещё идентификатор сессии. Используя браузер Firefox 2 и плагин для отладки Firebug мы исследуем, что же передаётся на сервер.

Так выглядит верно заполненная форма, которая прошла валидацию встроенными средствами самой формы:

А вот заголовки и данные, которые форма передаёт на сервер при выполнении метода form.submit().

А так выглядят сами данные запроса:

Кстати, идентификатор передаётся в поле Cookie, а не через сам запрос, но на сервере это будет распознано правильно стандартным механизмом сессий в РНР.

На сервере, если мы просмотрим глобальный массив $_REQUEST, мы увидим все наши переменные.

Как обрабатывать эти данные, думаю, вы и так знаете, это обычный РНР код. Ну а мы рассмотрим более сложную ситуацию - если при обработке у нас возникла ошибка, к примеру - такое имя пользователя уже зарегистрировано. Нам нужно сообщить об этом назад форме. Для этого необходимо вернуть в ответ на запрос строку с JSON данными. В форме по умолчанию встроен обработчик JSON данных, а если вы используете XML, вам необходимо переопределить параметр errorReader при создании формы (об этом мы рассказывали в первой части статьи).

Ответ должен быть такого вида:

• success - True если форма обработана нормально, и false в случае, если возникла какая-либо ошибка. В случае корректного завершения обработки достаточно просто вернуть один параметр success со значением true.
• errors - массив ошибок, в котором описываем коды полей, которые неверно заполнены и сообщение об ошибке, которое высвечивается при наведении на значок ошибки возле поля. Массив состоит из следующих полей:
  • id - идентификатор поля, id элемента формы, которые некорректный.
  • msg - строка с описанием ошибки

Пример ответа с описанием ошибки:

{    "success": false,

"errors":[

{

"id": "user_login",

"msg": "Invalid user login. User already register."

}

]

}

А такой ответ сообщит форме, что все в порядке:

{    "success": true
}

Как описать несколько ошибок сразу, думаю, вы сами сможете разобраться на основе этого примера. Если мы через функцию echo в РНР скрипте вернёте строку с такими данными (в примере она отформатирована для лучшей читабельности, в реальности это одна строка), форма автоматически разберёт такой ответ и сгенерирует сначала событие actionfailed, а потом отметит необходимое после красным подчёркиванием, выведет подсказку об ошибке, а также сбросит флаги валидности - то есть, теперь нельзя снова отправить форму, пока не исправить данные.

Сначала форма выведет alert сообщение, так как оно определено в обработчике actionfailed:

а так выглядит некорректно заполненное поле:

Вот, пожалуй и все - мы создали простую форму, добавили к ней проверку данных на стороне клиента, которая позволит заранее отсечь неверно заполненные данные, разобрались с передачей параметров на сервер, где производится более полная проверка на верность данных, а также научились сообщать форме о ошибках и выводить сообщения пользователю.

В версии ExtJS 2.0 работа с формами немного изменилась, поэтому нам придётся посвятить одну из следующих статей разбору построения форма на этой версии библиотеки. Ждите продолжения и отличных вам форм!

P.S. Вы можете проголосовать на портале DevLinks.com.ua за эти материалы, или оставить свои комментарии. Также там вы найдёте очень много полезных и интересных ссылок на различные материалы в сети и сможете добавить свои.

• Проголосовать за первую часть статьи.
• Проголосовать за вторую часть статьи (эту).