Главная > AJAX, ExtJS Framework, Open Source, PHP > Начало начал или пошаговое создание простой формы на ExtJS — серверная часть

Начало начал или пошаговое создание простой формы на ExtJS — серверная часть

2 декабря 2007

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

full_form.png


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

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

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

form_field_good.gif

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

Заголовки запроса на передачу данных от формы на сервер

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

form_post.gif

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

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

vardump_request.gif

Как обрабатывать эти данные, думаю, вы и так знаете, это обычный РНР код. Ну а мы рассмотрим более сложную ситуацию - если при обработке у нас возникла ошибка, к примеру - такое имя пользователя уже зарегистрировано. Нам нужно сообщить об этом назад форме. Для этого необходимо вернуть в ответ на запрос строку с 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:

ext_failure_1.jpg

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

ext_failure_2.jpg

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

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

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

  1. Pavel Konovalov
    3 декабря 2007 в 06:59 | #1

    >А такой ответ сообщит форме, что все в порядке:
    >{ «success»: false
    >}
    —-
    «success»: true

  2. 3 декабря 2007 в 09:14 | #2

    спасибо, недосмотрел, уже исправлено.

  3. 7 декабря 2007 в 01:00 | #3

    очень ждем статьи для 2.0 и если не трудно, очень интересует как встраивать редактируемые таблицы, подключенные к MySql, в окна на десктопе.
    Очень актуально..
    И что такое AIR и как его заюзать?

  4. Сэма
    5 февраля 2008 в 14:42 | #4

    success: (true|false) Это конечно хорошо.
    А как и где перехватить ситуацию, когда с сервера пришел сам_не_понял_что_сказал_ответ?
    Форма в этот момент зависает и, видимо, на долго.

  5. 5 февраля 2008 в 14:53 | #5

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

  6. zeleniy
    1 июля 2008 в 16:49 | #6

    Скажите, пожалуйста, а то сам не нашёл… если пользователь передал мне логин и пароль (аутентификация) и в итоге оказалось, что он не зарегестрирован, можно ли, так сказать, штатными средствами ExtJS отобразить это в форме (т.е. ошибка не относится не к полю логин, не к полю пароль, а как бы ко всей форме) ?

  7. 1 июля 2008 в 16:54 | #7

    zeleniy — ваш вопрос весьма актуален. К сожалению, я не нашел как это сделать, без расширения стандартной формы и модификации обработки ответа. Как вариант — можно помечать все же одно главное поле (например — логин) и там писать причину. Или же сделать обходной путь — сделать специальное поле, отобразив его в виде некоего статус-бара, и там выводить события, относящиеся ко всей форме. По моему, в 2.х ветке что-то в этом направлении сделано, нужно посмотреть точнее.

  8. zeleniy
    7 июля 2008 в 16:38 | #8

    В принципе я нашёл решение, которое предлагают нам разработчики —
    http://extjs.com/deploy/dev/examples/statusbar/statusbar-advanced.html

  9. 8 июля 2008 в 08:39 | #9

    zeleniy — да, такое расширение стандартной формы и панели появилось оно, правда, только сейчас, в ветке 2.1

  10. Dimon
    7 августа 2009 в 14:29 | #10

    А будет описание создания формы для версии 3.0?

    • 7 августа 2009 в 14:40 | #11

      нет. Оно мало чем отличается от описанного, остальное есть в документации и примерах.

Комментирование отключено.