Карты - изображения. Формы. CGI

Цель работы

Научиться разрабатывать Web-ресурс, содержащий карты изображения и формы.

Порядок выполнения работы

1) Создать новый Web-документ, который будет картой вашего раннее созданного Web-ресурса. На данном документе разместить какой-либо графический файл, который будет основой для создания будущей карты-изображения.

2) Разбить условное изображение на несколько зон, каждая из которых будет в дальнейшем играть роль гиперссылки.

3) Описать каждую зону карты-изображения через тэги, используя различные формы области изображений.

4) Описать 1-2 области изображения, таким образом, чтобы оставшаяся часть изображения не реагировала на действия пользователя.

5) Создать страницу с элементами формы. При этом использовать по возможности все описанные в методическом указании, элементы управления.

6) Провести исследование элементов управления формы.

К сдаче лабораторной предоставляются: работающая страница на сервере с комментариями каждого тэга и его свойств (атрибутов) в исходнике.

Методические указания

Карты – изображения

В последнее время многие Web – страницы для организации ссылок используют так называемые карты изображения. Реализация этой возможности предусмотрена языком НТМL и позволяет привязать гипертекстовые ссылки к различным областям изображения. Такой подход нагляднее, чем применение обыкновенных текстовых связей, поскольку пользователь может не читать словесное описание связи, а сразу понять её смысл по графическому образу.

Карта- изображение фактически представляет собой обычное встроенное графическое изображение на Web – странице. Эти изображения могут иметь

любой допустимый формат (GIF или JPG). При этом в формате GIF может использовать прозрачный цвет, а также режим чередования строк. Для того чтобы изображение могло использоваться в качестве опорного для карты – изображения, формально не накладывается никаких дополнительных ограничений.

Концепция карты-изображения на Web-страницах может быть реализована в двух различных вариантах — серверный вариант (server-side imagemap) и клиентский вариант (client-side imagemap). Последнее название часто используют в виде аббревиатуры CSIM. Исторически первым появился и получил распространение серверный вариант карт-изображений, который впервые был реализован в браузере Mosaic. Серверный вариант позволяли использовать первые версии всех трех ведущих браузеров. Серверный вариант может быть реализован в двух различных форматах, которые получили свое наименование по названиям организаций-разработчиков — NCSA и CERN.

В последнее время все большее развитие получает клиентский вариант, который впервые был реализован в браузере Microsoft Internet Explorer. Начиная с версии 2.0, этот вариант также поддерживает браузер Netscape. Данный вариант имеет свои неоспоримые преимущества и становится все более популярным /5/.

Чтобы включить поддержку карты для изображения, необходимо ввести дополнительный параметр в тэг IMG:

< IMG SRC=" url" USEMAP=" url#map_name" >

Параметр USEMAP указывает, в каком месте находится карта описываемого изображения. Карта изображения определяет, какому участку изображения какой URL соответствует. Карта изображения может находиться в том же документе, что и изображение, или в другом документе. Помещение карты в другой документ позволяет собрать все карты изображений в одном документе (если, их несколько в различных документах), но добавляет еще одну итерацию в сети, когда за первую итерацию выясняется местонахождение карты, а за вторую - выполнение действия, предписанного URL для данного участка изображения. Параметр map_name указывает имя карты для изображения, а предшествующий ему URL определяет местонахождение карты. Если данный URL отсутствует, то карта с указанным именем ищется в текущем документе.

Рассмотрим синтаксис определения карты изображения:

< MAP NAME=" map_name" >

< AREA [SHAPE=" shape " ] COORDS=" x, y,..." [HREF=" reference " ] [NOHREF]>

< /MAP>

где

< MAP NAME=" map_name" > - данный тэг определяет начало описания карты с именем map_name.

< AREA...> - описывает участок изображения и ставит ему в соответствие URL. Параметры:

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

default - по умолчанию (обычно прямоугольник); rect – прямоугольник;

circle – круг;

poly - многоугольник произвольной формы.

COORDS - координаты в пикселях описываемой области. Для прямоугольника это четыре координаты левого верхнего и правого нижнего углов, для круга - три координаты (две - центр круга, третья - радиус). Для многоугольника это описание каждого угла в двух координатах - соответственно число координат равно удвоенному количеству углов.

Координаты считаются с нуля, поэтому для описания области 100 на 100 используется описание:

< AREA COORDS=" 0, 0, 99, 99" ...>

HREF=" url" - описание ссылки, действия по которой будут выполняться при щелчке мыши в заданной области.

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

Если две описанных области накладываются друг на друга, то используется ссылка, принадлежащая первой из описанных областей.

< /MAP> - данный тэг завершает описание карты изображения.

Формы

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

Некоторые WWW-browser-ы позволяют пользователю, заполнив специальную форму, возвращающую полученное значение, выполнять некоторые действия на вашем WWW-сервере. Когда форма интерпретируется Web-браузером, создается специальные экранные элементы, такие, как поля ввода, checkboxes, radiobuttons, выпадающие меню, скроллируемые списки, кнопки. Когда пользователь заполняет форму и нажимает кнопку " Подтверждение" (SUBMIT - специальный тип кнопки, который задается при описании документа), информация, введена пользователем в форму, посылается HTTP-серверу для обработки и передаче другим программам, работающим под сервером, в соответствии с CGI (Common Gateway Interface) интерфейсом.

Формы передают информацию программам-обработчикам в виде пар [имя переменной]=[значение переменной]. Имена переменных следует задавать латинскими буквами.

Значения переменных воспринимаются обработчиками как строки, даже если они содержат только цифры.

Форма открывается тэгом < FORM> и заканчивается меткой < /FORM>. HTML-документ может содержать в себе несколько форм, однако формы не должны находиться одна внутри другой.

Тэг < FORM> может содержать три атрибута, один из которых является обязательным:

ACTION: Обязательный атрибут.Определяет, где находитсяобработчик формы.

METHOD: Определяет, каким образом(иначе говоря, с помощьюкакого метода протокола передачи гипертекстов) данные из формы будут переданы обработчику. Допустимые значения: METHOD=POST и METHOD=GET. Если значение атрибута не установлено, по умолчанию предполагается METHOD=GET.

GET: методом" get" HTTPбраузер берёт значениеaction, добавляет“? ”к нему, затем присоединяет набор данных формы, кодированный с использованием типа содержимого " application/x-www-form-urlencoded".

Затем перенаправляет всё по гиперссылке на этот URL. В этом сценарии данные формы ограничены кодами ASCII (нельзя использовать спецсимволы) и имеют весьма жесткие ограничения на объем вводимой информации.

POST: методом" post" HTTPбраузер проводит транзакциюHTTP " post" (в теле HTTP-запроса), используя значение атрибута action и сообщение, созданное в соответствии с типом содержимого, определённым атрибутом enctype.

ENCTYPE: Определяет, каким образом данные из формы будутзакодированы для передачи обработчику. Если значение атрибута не установлено, по умолчанию предполагается ENCTYPE=application/x-www-form-urlencoded. " Кнопка", чтобы запустить процесс передачи данных из формы на сервер, создается с помощью тэга.

< INPUT TYPE=submit>

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

Надпись на кнопке можно задать любую путем введения атрибута

VALUE=" [Надпись]".

Пример:

< INPUT TYPE=submit VALUE=" Отправить! " >

Надпись, нанесенную на кнопку, можно при необходимости передать обработчику путем введения в определение кнопки атрибута NAME=[имя].

Пример:

< INPUT TYPE=submit NAME=button VALUE=" Отправить! " >

При нажатии на такую кнопку обработчик вместе со всеми остальными данными получит и переменную button со значением Отправить! (т.е. button=Отправить!, это можно видеть в адресной строке).

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

Существуют и другие типы элементов < INPUT>. Каждый элемент < INPUT> должен включать атрибут NAME=[имя], определяющий имя переменной, которая будет передана обработчику. Имя должно задаваться только латинскими буквами. Большинство элементов < INPUT> должны включать атрибут VALUE=" [значение]", определяющий значение, которое будет передано обработчику под этим именем.

Основные типы элементов < INPUT>: TYPE=text

Определяет окно для ввода строки текста. Может содержать дополнительные атрибуты SIZE=[число ] (ширина поля для ввода, в символах) и MAXLENGTH=[число] (максимально допустимая длина вводимой строки в символах).

Пример:

< INPUT TYPE=text SIZE=30 NAME=student VALUE=" Вася" >

Определяет ширину поля в 30 символов, для ввода текста. По умолчанию в окне находится текст, который пользователь может редактировать. Отредактированный ( или неотредактированный) текст передается обработчику в переменной student (student=содержимое_поля). Необходимо попробовать отредактировать поле.

TYPE=password. Определяет окно для ввода пароля.Абсолютноаналогичен типу text, только вместо символов вводимого текста показывает на экране звездочки (*), чтобы посторонний не мог прочесть.

Пример:

< INPUT TYPE=password NAME=pswd SIZE=20 MAXLENGTH=10>

Определяет окно шириной 20 символов для ввода пароля. Максимально допустимая длина пароля — 10 символов. Введенный пароль передается обработчику в переменной pswd (pswd=содержимое_поля). Необходимо попытаться ввести информацию в поле.

TYPE=radio. Определяет радиокнопку.Может содержатьдополнительный атрибут checked (показывает, что кнопка помечена). В группе радиокнопок с одинаковыми именами может быть только одна помеченная радиокнопка.

Пример:

< INPUT TYPE=radio NAME=modem VALUE=" 9600" checked> 9600

Бит/с

< INPUT TYPE=radio NAME=modem VALUE=" 14400" > 14400 бит/с < INPUT TYPE=radio NAME=modem VALUE=" 28800" > 28800 бит/с

Определяет группу из трех радиокнопок, подписанных 9600 бит/с, 14400 бит/с и 28800 бит/с. Первоначально помечена первая из кнопок. Если пользователь не отметит другую кнопку, обработчику будет передана переменная modem со значением 9600 (modem=9600). Если пользователь отметит вторую кнопку, обработчику будет передана переменная modem со значением 14400 (modem=14400).

TYPE=checkbox

Определяет квадрат, в котором можно сделать пометку. Может содержать дополнительный атрибут checked (показывает, что квадрат помечен). В отличие от радиокнопок, в группе квадратов с одинаковыми именами может быть несколько помеченных квадратов.

Пример:

< INPUT TYPE=checkbox NAME=comp VALUE=" PC" >

Персональные компьютеры

< INPUT TYPE=checkbox NAME=comp VALUE=" WS" checked>

Рабочие станции

< INPUT TYPE=checkbox NAME=comp VALUE=" LAN" > Серверы локальных сетей

< INPUT TYPE=checkbox NAME=comp VALUE=" IS" checked>

Серверы Интернет

Определяет группу из четырех квадратов. Первоначально помечены второй и четвертый квадраты. Если пользователь не произведет изменений, обработчику будут передана одна переменная comp с двумя значениями

(comp=WS и comp=IS).

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

Пример:

< INPUT TYPE=hidden NAME=id VALUE=" 1" >

Определяет скрытую переменную индексную id, которая передается обработчику со значением 1.

TYPE=reset - определяет кнопку, при нажатии на которую формавозвращается в исходное состояние (обнуляется). Поскольку при использовании этой кнопки данные обработчику не передаются, кнопка типа reset может и не иметь атрибута name.

Пример:

< INPUT TYPE=reset VALUE=" Очистить поля формы" >

Определяет кнопку " Очистить поля" формы, при нажатии на которую форма возвращается в исходное состояние.

Элемент < SELECT>:

Меню < SELECT> из n элементов выглядит примерно так:

< SELECT NAME=" [имя]" >

< OPTION VALUE=" [значение 1]" > [текст 1]

< OPTION VALUE=" [значение 2]" > [текст 2]...

< OPTION VALUE=" [значение n]" > [текст n] < /SELECT>

Метка < SELECT> содержит обязательный атрибут NAME, определяющий имя переменной.

Метка < SELECT> может также содержать атрибут MULTIPLE, присутствие которого показывает, что из меню можно выбрать несколько элементов. Большинство браузеров показывают меню < SELECT MULTIPLE> в виде окна, в котором находятся элементы меню (высоту окна в строках можно задать атрибутом SIZE=[число]). Для выбора нескольких значений одновременно удерживают кнопку " SHIFT" и выбирают значения мышкой.

Пример:

< SELECT MULTIPLE SIZE=3 NAME=" [имя]" > < OPTION VALUE=" [значение 1]" > [текст 1] < OPTION VALUE=" [значение 2]" > [текст 2] < OPTION VALUE="..." > [...]

< OPTION VALUE=" [значение n]" > [текст n] < /SELECT>

Метка < OPTION> определяет элемент меню. Обязательный атрибут VALUE устанавливает значение, которое будет передано обработчику, если выбран этот элемент меню. Метка < OPTION> может включать атрибут selected, показывающий, что данный элемент отмечен по умолчанию.

Пример:

< SELECT NAME=" selection" > < OPTION VALUE=" option1" > Вариант 1

< OPTION VALUE=" option2" selected> Вариант 2 < OPTION VALUE=" option3" > Вариант 3 < /SELECT>

Такой фрагмент определяет меню из трех элементов: Вариант 1, Вариант 2 и Вариант 3. По умолчанию выбран элемент Вариант 2. Обработчику будет передана переменная selection (selection=...) значение которой может быть option1 (по умолчанию), option2 или option3.

Элемент < TEXTAREA>:

Пример:

< TEXTAREA NAME=address ROWS=5 COLS=50>

Поле для ввода большого текста, разбитого на абзацы. < /TEXTAREA>

Все атрибуты обязательны. Атрибут NAME определяет имя, под которым содержимое окна будет передано обработчику ( в примере — address). Атрибут ROWS устанавливает высоту окна в строках (в примере — 5). Атрибут COLS устанавливает ширину окна в символах (в примере — 50). Текст, размещенный между метками < TEXTAREA> и < /TEXTAREA>, представляет собой содержимое окна по умолчанию. Пользователь может его отредактировать или просто стереть.

CGI

CGI - Common Gateway Interface является стандартом интерфейса (связи) внешней прикладной программы с информационным сервером типа HTTP, Web сервер/5/.

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

Программа-шлюз запускается WWW сервером в реальном масштабе времени. WWW сервер обеспечивает передачу запроса пользователя шлюзу, а она, в свою очередь, используя средства прикладной системы, возвращает результат обработки запроса на экран пользователя. Программа-шлюз может быть закодирована на языках C/C++, Fortran, Perl, TCL, Unix Schell, Visual Basic, Apple Script. Как выполнимый модуль, она записывается в поддиректорий с именем cgi-bin WWW сервера. Работа:

1) Передача данных шлюзам. Для передачи данных об информационном запросе от сервера к шлюзу, сервер использует командную строку и переменные окружения. Эти переменные окружения устанавливаются в тот момент, когда сервер выполняет программу шлюза.

2) Запросы для различных методов. Информация шлюзам передается в следующей форме:

имя=значение& имя1=значение1&..,

где имя- имя переменной (из оператора FORM, например), и значение - ее реальное значение. В зависимости от метода, который используется для запроса, эта строка появляется или как часть URL (в случае метода GET), или как содержимое HTTP запроса (метод POST). В последнем случае, эта информация будет послана шлюзу в стандартный поток ввода. На файловый дескриптор стандартного потока ввода посылается CONTENT_LENGTH байт. Так же сервер передает шлюзу CONTENT_TYPE ( тип передаваемых данных). Сервер не обязан посылать символ конца файла после отсылки CONTENT_LENGTH байт данных и после того, как шлюз их прочитает.

Пример: Возьмем результат работы формы с методом POST (METHOD=" POST" ) в качестве примера. Пусть получено 7 байт, закодированных примерно так: a=b& b=c.

В этом случае, сервер установит значение CONTENT_LENGTH равным 7

и CONTENT_TYPE в application/x-www-form-urlencoded. Первым символом в стандартном потоке ввода для шлюза будет " a", за которым будет следовать остаток закодированной строки.

3) Аргументы командной строки. Шлюз в командной строке от сервера получает:

- остаток URL после имени шлюза в качестве первого параметра (первый параметр будет пуст, если присутствовало только имя шлюза), и - список ключевых слов в качестве остатка командной строки для скрипта поиска, или

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

Ключевые слова, имена полей формы и значения передаются раскодированными (из HTTP URL формата кодирования) и перекодированными в соответствии с правилами кодирования Bourne shell, так что шлюз в командной строке получит информацию в том виде, как она есть, без необходимости осуществлять дополнительные преобразования.

Запросы оператора FORM. Запросы оператораFORMобрабатываютсятаким образом, что каждый параметр, отвечающий за имя поля, оканчивается знаком равенства, а остаток представляет собой значение этого параметра. Если присутствует что-либо после имени скрипта (шлюза), то эта информация передается в качестве первого параметра. Иначе первый параметр будет пуст.

Примеры: /htbin/foo/x/y/z? name1=value1& name2=value2

вызывается как:

/.../foo /x/y/z name1= value1 name2= value2

/htbin/foo? name1=value1& name2=value2

вызывается как:

/.../foo '' name1= value1 name2= value2

4) CGI переменные окружения. Следующие переменные окружения не являются специфичными по типу запросов и устанавливаются для всех запросов.

SERVER_SOFTWARE - Название и версия информационного сервера, который отвечает на запрос (и запускает шлюз). Формат: имя/версия.

SERVER_NAME - Имя хоста, на котором запущен сервер, DNS имя, или IP адрес в том виде, в котором он представлен в URL.

GATEWAY_INTERFACE - Версия CGI спецификации на тот момент, когда компилировался сервер. Формат: CGI/версия.

Следующие переменные окружения являются специфичными для разных запросов, и заполняются перед вызовом шлюза:

SERVER_PROTOCOL - Имя и версия информационного протокола, в котором пришел запрос. Формат: протокол/версия.

SERVER_PORT - Номер порта, на который был послан запрос. REQUEST_METHOD - Метод, который был использован для запроса.

Для HTTP, это " GET", " HEAD", " POST".

PATH_INFO - Дополнительная информация о пути, которую передал клиент. Другими словами, доступ к шлюзу может быть осуществлен по виртуальному пути, за которым следует некоторая дополнительная информация. Эта информация передается в PATH_INFO.

PATH_TRANSLATED - Сервер передает преобразованную версию PATH_INFO, которая включает в себя путь, преобразованный из виртуального в физический.

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

QUERY_STRING - Информация, следующая за? в URL, к которому относится данный шлюз. Это информация представляет собой строку запроса. Она не должна быть декодирована никоим образом. Вне зависимости от командной строки эта переменная всегда должна быть установлена при наличии такой информации.

REMOTE_HOST - Имя хоста, производящего запрос. Если сервер не имеет такой информации, он должен установить REMOTE_ADDR, а это поле оставить не установленным.

REMOTE_ADDR - IP адрес хоста, производящего запрос.

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

REMOTE_USER - Используется в ситуациях, аналогичных предыдущему случаю, для хранения имени пользователя.

REMOTE_IDENT - Если HTTP сервер поддерживает идентификацию пользователя согласно RFC 931, то эта переменная будет содержать имя пользователя, полученное от сервера.

CONTENT_TYPE - Для запросов, которые содержат дополнительную добавочную информацию, такие как HTTP POST и PUT, здесь содержится тип данных этой информации.

CONTENT_LENGTH - Длина данных, которую передает клиент.

В дополнение к этим, если запрос содержит дополнительные поля заголовка запроса, они помещаются в переменные окружения с префиксом HTTP_, за которым следует имя заголовка. Любые символы '-' в заголовке меняются на символы подчеркивания '_'. Сервер может исключить любые заголовки, которые он уже обработал, такие как Authorization, Content -type, и Content- length. Если необходимо, сервер может исключить любые (или вообще все) дополнительные поля заголовка в случае, когда их включение может привести к превышению предела размера переменных окружения. Примером такой переменной может служить переменная HTTP_ACCEPT, которая была определена в спецификации CGI/1.0. Другим примером может служить заголовок User-Agent.

HTTP_ACCEPT - Список MIME типов, которые клиент может обработать, как задано в HTTP заголовках. Другие протоколы должны получить эту информацию из других мест (если она им необходима). Каждый тип в этом списке должен быть отделен запятой согласно HTTP спецификации. Формат: тип/подтип, тип/подтип.

HTTP_USER_AGENT - Просмотрщик, который использует клиент для посылки запроса. Общий формат: программа/версия библиотека/версия.

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

Как правило, шлюз производит свой вывод, который интерпретируется и посылается обратно клиенту. Преимущество этого подхода состоит в том, что шлюз не должен посылать полный HTTP/1.0 заголовок на каждый запрос.

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

Заголовки с синтаксическим разбором. Вывод шлюза начинается с маленького заголовка. Он содержит текстовые строки, в том же формате, как и в HTTP заголовке и завершается пустой строкой (содержащей только символ перевода строки или CR/LF). Любые строки заголовка, не являющиеся директивами сервера, посылаются непосредственно клиенту. В настоящий момент, CGI спецификация определяет три директивы сервера:

Content-type

⇐ Предыдущая 4 5 6 7 8 9 10 111213 Следующая ⇒