Владимир Дронов - HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

Вот решена и четвертая задача… Уф-ф-ф!

Сохраним все исправленные файлы и проверим готовую Web-страницу index.htm в действии. Откроем Web-обозреватель, наберем в поле ввода интернет-адрес http://localhost, пощелкаем на пунктах полосы навигации и гиперссылках раздела "См. также" и посмотрим на сменяющие друг друга Web-страницы и скрывающиеся и открывающиеся вложенные списки. Красота!

Здесь мы реализовали раздел "См. также" в виде абзаца с гиперссылками. Также его можно выполнить в виде списка или таблицы. Можно даже сделать раздел скрывающимся и раскрывающимся в ответ на щелчок мышью. Так, кстати, часто и поступают. Вы тоже можете так сделать; пусть это будет вашим домашним заданием.

Что дальше?

В этой главе мы познакомились с принципом семантической разметки данных и применили ее к нашей базе данных средствами JavaScript. В результате мы смогли создать на Web-страницах нашего Web-сайта раздел "См. также", содержащий гиперссылки на Web-страницы со связанными данными.

Помнится, мы планировали реализовать на Web-сайте еще и поиск материалов по введенному посетителем слову или фрагменту слова. Далее мы им займемся. И начнем с элементов управления, с помощью которых реализуется ввод данных посетителем.

ЧАСТЬ 5. Последние штрихи

ГЛАВА 20. Web-формы и элементы управления

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

Но многое еще предстоит выполнить. В частности, реализовать поиск по Web-сайту. Идея была такой: посетитель вводит искомое слово — название тега или атрибута стиля или часть его названия, особый Web-сценарий ищет это слово в базе данных и выводит на Web-страницу гиперссылки на найденные Web-страницы.

Чтобы реализовать поиск, нам понадобятся:

— какие-либо средства, которые примут у посетителя искомое слово;

— Web-сценарий, который будет, собственно, выполнять поиск и формировать его результаты;

— элемент Web-страницы, куда будут выводиться результаты поиска.

С последним пунктом все просто. Мы создадим либо абзац, либо список, либо контейнер, где будет формироваться набор гиперссылок на искомые Web-страницы. С Web-сценарием, который будет выполнять поиск, тоже не должно возникнуть сложностей — достаточно просмотреть массивы, формирующие базу данных, и отобрать из них те элементы, что описывают подходящие Web-страницы.

Но как нам принять от посетителя искомое слово? Ясно, что для этого понадобится создать на Web-странице набор элементов управления как в Windows- приложениях: полей ввода, списков, флажков, переключателей и кнопок. Но как это сделать?

Web-формы и элементы управления HTML

Очень просто. Язык HTML предоставляет набор тегов для создания разнообразных элементов управления. Эти элементы управления уже "умеют" откликаться на действия посетителя: поля ввода — принимать введенные символы, флажки — устанавливаться и сбрасываться, переключатели — переключаться, списки — прокручиваться, выделять пункты, разворачиваться и сворачиваться, а кнопки — нажиматься. Всем этим будет заниматься Web-обозреватель; нам самим ничего делать не придется.

Набор элементов управления, поддерживаемый HTML, невелик. Он включает поля ввода различного назначения, область редактирования, обычный и раскрывающийся список, флажок, переключатель, обычную и графическую кнопку. Более сложные элементы управления (таблицы, "блокноты" с вкладками, панели инструментов и пр.) так просто создать не получится. Хотя, как правило, для создания простых Web-приложений перечисленного ограниченного набора вполне достаточно.

НА ЗАМЕТКУ

Существуют JavaScript-библиотеки для создания сложных элементов управления: индикаторов прогресса, регуляторов, "блокнотов", таблиц, панелей инструментов, меню и даже "лент" в стиле Microsoft Office 2007 и "окон". К таким библиотекам можно отнести, в частности, Ext, основанную на знакомой нам Ext Core.

Стандарт HTML требует, чтобы все элементы управления находились внутри Web-формы. Web-форма — это особый элемент Web-страницы, служащий "вместилищем" для элементов управления. На Web-странице она никак не отображается (если, конечно, мы не зададим для нее какого-либо представления); в этом Web-форма схожа с блочным контейнером. Для создания Web-формы HTML предусматривает особый тег.

Стандарт HTML требует, чтобы каждый элемент управления имел уникальное в пределах Web-формы имя. Это нужно для успешного формирования пар данных перед отправкой их серверному приложению.

Назначение Web-форм и элементов управления. Серверные приложения

Стандарт HTML поддерживал Web-формы и элементы управления еще до появления Web-сценариев и языка JavaScript. Но зачем?

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

Функциональность таких Web-сайтов реализуется с помощью особых программ, которые работают на серверном компьютере совместно с Web-сервером, — серверных приложений. Именно они обрабатывают полученные от посетителя Web-сайта данные и выдают результат в виде обычной Web-страницы. Именно для них в HTML предусмотрена возможность создания Web-форм и элементов управления — чтобы посетитель мог ввести данные, которые потом обработает серверное приложение.

Вот основная схема работы серверного приложения.

— Посетитель вводит в элементы управления, расположенные в Web-форме на Web-странице, нужные данные.

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

— Web-форма кодирует введенные в нее данные и отправляет их серверному приложению, расположенному по указанному интернет-адресу.

— Web-сервер перехватывает отправленные данные, запускает серверное приложение и передает данные ему.

— Серверное приложение обрабатывает полученные данные.

— Серверное приложение формирует Web-страницу с результатами обработки данных посетителя и передает ее Web-серверу.

— Web-сервер получает сформированную серверным приложением Web-страницу и отправляет ее посетителю.

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

— Интернет-адрес серверного приложения. Это обычный интернет-адрес, указывающий на файл серверного приложения, вида http://www.somesite.ru/apps/app.exe.

— Метод отправки данных, указывающий вид, в котором данные будут отправлены. Таких методов HTML поддерживает два.

Метод GET формирует из введенных посетителем данных набор пар вида

<имя элемента управления>=<введенные в него данные>. (Ранее уже говорилось, что каждый элемент управления обязательно должен иметь уникальное в пределах Web-формы имя.) Эти пары добавляются справа к интернет- адресу серверного приложения, отделяясь от него символом? (вопросительный знак); сами пары разделяются символами & (амперсанд). Полученный таким образом интернет-адрес отправляется Web-серверу, который извлекает из него интернет-адрес серверного приложения и сами данные.

Метод POST также формирует из введенных данных пары вида <имя элемента управления>=<введенные в него данные>. Но отправляет он их не в составе интернет-адреса, а вслед за ним, в качестве дополнительных данных.

— Метод кодирования данных. Он актуален только при отправке данных методом POST; для метода GET его можно не указывать.

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

ВНИМАНИЕ!

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