ОГЛАВЛЕНИЕ
1 Использование технологии "клиент-сервер" при разработке Web-страниц
2 Создание формы в HTML
2.1 Параметры тэга <FORM>
2.2 Параметры тэга <INPUT>
2.3 Параметры тэга <TEXTAREA>
2.4 Параметры тэга <SELECT>
3 Интерфейс CGI
Пример 1
1 Использование технологии "клиент-сервер" при разработке Web-страниц
Технология "клиент-сервер" предусматривает разделение прикладной программы на две части - клиентскую, которая выполняется на стороне клиента, и серверную, которая, соответственно, выполняется на стороне сервера.
До сих пор при изучении HTML рассматривались вопросы разработки Web-страниц и их интерпретации с помощью браузера на стороне клиента. Поэтому с точки зрения технологии "клиент-сервер" созданные Web-страницы являются клиентскими приложениями. Все изменения на этих страницах происходят только при загрузке новых Web-страниц, поэтому они называются пассивными (статическими).
Чтобы сделать Web-страницу активной (динамической), необходимо разработать программу, которая выполняется на стороне сервера, с помощью которой происходит обработка и изменение содержимого Web-страницы.
Одним из средств, которые позволяют осуществить взаимодействие между клиенской и серверной частями приложения, является интерфейс CGI (Common Gateway Interface - стандартный шлюзовый интерфейс). Серверная часть приложения, использующая CGI-интерфейс, называется CGI-приложением.
При использовании CGI-приложений необходимая информация на Web-странице предствляется в виде форм.
2 Создание формы в HTML
2.1 Параметры тэга <FORM>
Для создания формы на Web-странице в HTML-документе используется тэг-контейнер <FORM> . . . </FORM>. Его содержимым являются тэги <INPUT>, <TEXTAREA> и <SELECT>, которые предназначены для создания различных органов управления формы (полей ввода данных, кнопок, переключателей и др.).
Тэг <FORM>содержит следующие параметры:
- ACTION - указывает URL-адрес программы (CGI-приложения) для выполнения действий над формой;
- METHOD - указывает один из двух основных способов передачи данных от формы на сервер:
- GET - CGI-приложение получает данные из формы на Web-странице через переменную среды с именем QUERY_STRING;
- POST - CGI-приложение получает данные из формы на Web-странице через стандартный поток ввод
- ENCTYPE - указывает MIME-тип передаваемых данных.
2.2 Параметры тэга <INPUT>
Тэг <INPUT> содержит такие параметры:
- TYPE - указывает тип органа управления, его значениями являются:
- text - однострочное поле для ввода текстовой информации; размер поля и число вводимых символов определяется значениями параметров SIZE и MAXLENGTH тэга <INPUT>
- textarea - многострочное поле для ввода текстовой информации; размер поля и число вводимых символов определяется значениями параметров SIZE и MAXLENGTH тэга <INPUT> (для ввода многострочных данных предподчтительнее использовать тэг <TEXTAREA>);
- password - для ввода пароля, аналогичен параметру text , но текст, введенный пользователем не отображается на экране;
- checkbox - независимый переключатель;
- radio - переключатель, зависящий от состояния других переключателей, используется для выбора одного значения из нескольких;
- file - для выбора и передачи файла;
- button - кнопка с заданной подписью;
- submit - кнопка, предначначенная для посылки данных из заполненной формы Web-серверу;
- image - имеет такое же начначение, что и параметр submit , но в виде изображения;
- hidden - скрытое поле, не отображается на экране, но может быть передано серверу.
- NAME - указывает имя органа управления, посылается программе обработки формы;
- VALUE - указывает значение или состояние органа управления;
- CHECKED - используется для установки начального состояния переключателей;
- SIZE - указывает ширину поля ввода для текстовой информации, по умолчанию принимается равным 20;
- MAXLENGTH - указывает максимальное количество символов, которое может быть введено в данном поле, по умолчанию не имеет ограничений;
- ALIGN - указывает выравнивание текста возле формы;
- SRC - URL-адрес графического изображения, если оно используется в органе управления.
В примере № 1 показано задание полей формы на Web-странице с помощью тэга <INPUT>.
2.3 Параметры тэга <TEXTAREA>
Для ввода многострочного текста лучше воспользоваться тэгом-контейнером <TEXTAREA> . . . </TEXTAREA>, для которого можно задать следующие три параметра:
- NAME - указывает имя многострочного поля, посылается программе обработки формы;
- ROWS - указывает размер поля по вертикали (в строках);
- COLS - указывает размер поля по горизонтали (в символах).
В примере № 1 показано задание полей формы на Web-странице с помощью тэга <TEXTAREA> .
2.4 Параметры тэга <SELECT>
С помощью тэга-контейнера <SELECT> . . . </SELECT> можно указать в форме на Web-странице заранее проинициализированный список произвольных текстовых строк. Выбранная строка или выбранные строки передаются Web-серверу наряду с содержимым других полей формы. Для тэга <SELECT> определены следующие параметры:
- NAME - указывает имя списка, которое вместе с выбранной строкой передается серверу;
- SIZE - указывает число строк списка, отображаемых на экране, остальные свернуты и для появления на экране требуют прокрутки списка;
- MULTIPLE - указывает на то, что могут быть отмечены и переданы на сервер не одна строка, а все отмеченные.
Каждая строка списка внутри контейнера <SELECT> . . . </SELECT> задается с помощью тэга <OPTION>, который содержит следующие параметры:
- SELECTED - отмечает первоначально выбранную строку;
- VALUE - задает значение выбранной строки.
Ниже приводится пример использования тэга <SELECT>, в котором задается набор из черырех строк. На экране отображаются две строки: "Example1_2" и "Example1_3", первая из них ("Example1_2") отмечается как выбраная. Для доступа к двум другим строкам необходимо выполнить прокрутку. Отметить можно любое число строк из заданного набора.
Каждая отмеченная строка передается на сервер в виде пары "имя=значение". В качестве имени берется имя набора, т.е. "number". В качестве значения берется значение параметра VALUE, а если он не задан - текст после тэга <OPTION>. Например, для второй строки на Web-сервер передается пара "number=second", а для третьей строки, если она будет выбрана, - "number=Example1_3".
<SELECT NAME="number" SIZE=2 MULTIPLE>
<OPTION VALUE="first"> Example_1
<OPTION SELECTED VALUE="second"> Example1_2
<OPTION> Example1_3
<OPTION VALUE="fourth"> Example1_4
</SELECT>
В примере № 1 показано использование и тэга <SELECT>на Web-странице.
3 Интерфейс CGI
Как уже отмечалось выше, интерфейс CGI предназначен для обработки данных, заданных на стороне клиента в виде формы на Web-странице, с помощью программы (CGI-приложения), расположенной на сервере. Данные и имена полей передаются на сервер в таком формате:
Имя1 = Значение1&Имя2=Значение2& . . .
При этом используется так называемая URL-кодировка. В этой кодировке все символы пробелов заменяются символом "+". Кроме того, для представления кодов управляющих клавиш и некоторых других (в их число попали символы кириллицы) используется последовательность символов вида %xx, где символы xx представляют собой 16-ричный код в виде двух ASCII-символов.
Порядок обработки формы при использовании CGI-интерфейса:
- Пользователь заполняет форму на Web-странице и нажимает кнопку с типом submit (в примере № 1 она имеет имя "ПЕРЕДАЧА").
- Браузер анализирует URL-адрес CGI-приложения, заданный в параметре ACTION формы и устанавливает соединение с соответствующим Web-сервером (в качестве Web-сервера может быть использован, например сервер Apache).
- Web-сервер преобразует URL-адрес в путь к файлу на компьютере и определяет, что URL-адрес указывает на CGI-приложение, а не на статический файл.
- Web-сервер подготавливает переменные окружения и запускает CGI-приложение на выполнение.
- Эта программа в соответствии с заданным методом передачи данных на сервер (GET или POST) определяет переменные окружения и считывает данные в виде пар "имя=значение", осуществляя, если необходимо, их перекодировку.
- Программа выводит в стандартный выходной поток HTTP-заголовок и результаты обработки данных формы в виде динамически созданного HTML-документа.
- Web-сервер передает браузеру полученный документ и закрывает с ним соединение.
- Браузер отображает полученные данные на экране в виде Web-страницы.
В примере №1 приведен HTML-документ, реализующий на экране разные виды органов управления формы, заданной на Web-странице.
Щелкнув по кнопке "Пример №1", можно увидеть на экране форму с полями ввода однострочной и многострочной текстовой информации, с полем ввода пароля, с зависимыми и независимыми переключателями, с полем выбора элементов списка, с кнопками "СБРОС" и "ПЕРЕДАЧА". В качестве значения параметра ACTION указан URL-адрес "http://172.17.72.25/cgi-bin/form_cgi.exe". Это адрес программы "form_cgi.exe", которая находится на сервере с IP-адресом 172.17.72.25, является CGI-приложением и предназначена для обработки полей формы. Если эта программа не разработана, а также в случае, когда сервер недоступен или не настроен, для проверки работы кнопки "ПЕРЕДАЧА" в качестве значения параметра ACTION можно указать адрес одного из файлов с HTML-документом, например, prim2-1.htm:
<FORM METHOD=get ACTION= "prim2-1.htm">
Пример 1
<HTML>
<HEAD>
<TITLE> Формы в HTML на Web-странице </TITLE>
<LINK REL=stylesheet HREF="my_d.css"> <STYLE>
.form{background:#a0ffff;color:#004000;font-size:6mm}
.kn{background:#e0e0ff; border:outset 4 blue; font-size:4.5mm}
</STYLE>
</HEAD>
<BODY>
<FORM METHOD=get ACTION= "http://172.17.72.25/cgi-bin/form_cgi.exe">
<TABLE ALIGN=center STYLE="color:#000080; font-size:6mm">
<TR> <TD VALIGN=top> Поле ввода однострочной текстовой информации <BR> (text);
<TD><INPUT TYPE=text NAME="txt1" VALUE="Строка текста" SIZE=15 CLASS="form">
<TR> <TD VALIGN=top> Поле ввода пароля <BR> (password)
<TD><INPUT TYPE=password NAME="pass"
VALUE="www" SIZE=15 MAXLENGTH=3 CLASS= "form">
<TR> <TD VALIGN=top> Поле ввода многострочной текстовой информации <BR> (textarea)
<TD><TEXTAREA NAME="txt2" ROWS=3 CLASS= "form">
Многострочная информация</TEXTAREA>
<TR> <TD VALIGN=top> Независимые переключатели <BR> (checkbox)
<TD><INPUT TYPE=checkbox NAME="ch1" VALUE="on" CHECKED>1 <BR>
<INPUT TYPE=checkbox NAME="ch2" VALUE="on" >2<BR>
<INPUT TYPE=checkbox NAME="ch3" VALUE="on" CHECKED>3<BR>
<TR> <TD VALIGN=top> Зависимые переключатели <BR> (radio)
<TD><INPUT TYPE=radio NAME="rad" VALUE= "on1" CHECKED> Первый <BR>
<INPUT TYPE=radio NAME="rad" VALUE= "on2"> Второй <BR>
<INPUT TYPE=radio NAME="rad" VALUE= "on3"> Третий <BR>
<TR><TD VALIGN=top> Выбор из списка <BR> (select)
<TD><SELECT NAME="sel" SIZE=1 MULTIPLE CLASS="form">
<OPTION VALUE="first"> Пример №1
<OPTION SELECTED VALUE="second"> Пример №2
<OPTION VALUE="third"> Пример №3
<OPTION VALUE="fourth"> Пример №4
</SELECT>
</TABLE>
<P ALIGN=center><INPUT TYPE=reset VALUE= "СБРОС" CLASS="kn">
<INPUT TYPE=submit VALUE="ПЕРЕДАЧА" CLASS="kn">
</FORM>
</BODY>
</HTML>
Перед тем как "нажать" кнопку "ПЕРЕДАЧА", осуществив передачу данных из формы на CGI-приложение и его запуск для обработки данных, необходимо выполнить следующее:
1. Все файлы, содержащие HTML-документы с использованием CGI-интерфейса, должны находится в подкаталоге "C:\Temp\Apache". Это ограничение связано с настройками Web-сервера Apache и тем, кто не имеет достаточного практического опыта работы с этим сервером, лучше не заниматься изменением его параметров. Поэтому файл "prim5-1.htm", содержащий, приведенный в примере №1 HTML-документ, а также все созданные файлы, содержащие документы с использованием CGI-интерфейса, должны быть скопированы в папку "C:\Temp\Apache".
2. Необходимо разработать CGI-приложение, обрабатывающее данные из формы, в виде испольнительного файла с именем, указанным в параметре ACTION формы (в примере №1 - это файл "form_cgi.exe"). Этот файл должен быть помещен в подкаталог "C:\Temp\Apache\cgi-bin". Это условие также связано с настройками Web-сервера. Отметим, что в параметре ACTION необходимо указывать полный адрес файла, включая IP-адрес сервера, как показано в примере №1 для компьютера №5 (для компьютера №4 IP-адрес будет 172.17.72.24 и т.д.).
Вопросы создания CGI-приложения рассмотрены в CGI-приложениях.
