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

Министерство образования Российской Федерации
Государственное образовательное учреждение высшего
профессионального образования
“Хабаровский государственный технический университет”
ПРОЕКТИРОВАНИЕ ИНФОРМАЦИОННЫХ СИСТЕМ
Методические указания к выполнению практического задания № 3
для студентов специальности 071900 “Информационные системы
и технологии”
Хабаровск
Издательство ХГТУ
2003
2
УДК
681.58:681.32
Проектирование информационных систем: Методические указания к выполнению
практического задания № 3 для студентов специальности 071900 «Информационные
системы и технологии» / Сост. Г. К. Конопелько. – Хабаровск: Изд-во Хабар. гос. техн. ун-та,
2003. – 8 с.
Методические указания составлены на кафедре «Автоматика и системотехника». В них
приводятся задание на практическую работу, требования по оформлению отчета, а также
краткие общие сведения. Дается перечень рекомендованной литературы, необходимой для
выполнения задания.
Печатается в соответствии с решениями кафедры "Автоматика и системотехника" и
методического совета института информационных технологий.
© Хабаровский государственный
технический университет, 2003
3
Разработка страницы HTML с формой для ввода данных
Цель работы: Ознакомление с основными элементами HTML для разработки форм,
разработка простой страницы для ввода информации.
Введение
Практическое задание выполняется в локальной сети на рабочей станции с
операционной системой Windows 95/98, 2000, XP или более поздней, с установленным
сервером с операционной системой Linux версии не ниже пятой.
Порядок выполнения практического задания
1. Подготовка и допуск к работе
К выполнению практического задания допускаются студенты, которые подготовились к
работе и имеют не более двух невыполненных предыдущих заданий.
Перед работой студент должен:
 предъявить преподавателю полностью оформленный отчет о предыдущей работе;
 ответить на вопросы преподавателя.
К работе не допускаются студенты, которые не выполнили одно из вышеперечисленных
требований.
2. Отчёт по работе должен содержать следующее:
- Текст задания.
- Перечень всех использованных в практической работе команд и инструкций.
- Вывод по работе.
Общие сведения
Форма HTML представляет собой документ, созданный с использованием элементов
HTML. Назначением формы является сбор информации от пользователей. После того как
пользователь заполняет форму и запускает процесс ее обработки, информация из нее
попадает к программе, работающей на сервере. Другая программа под названием Common
Gateway Interface (CGI) обрабатывает ее. Таким образом, пользователь может интерактивно
взаимодействовать с сервером Web через Интернет.
Элементы формы
Элемент <FORM> используется для обозначения документа как формы. Данный
элемент определяет границы использования других элементов, размещаемых
4
программистами в форме. Элемент <FORM> определяется последовательностью элементов
<INPUT>, размещенных внутри пары <FORM> и </FORM>. Элемент формы использует как
метод, так и действие для описания обработки формой данных, вводимых пользователем.
Метод (GET или POST) определяет, как программист должен обрабатывать входные данные
из формы, а действие указывает на URI программы, ответственной за обработку этих
данных.
Сбор данных при помощи форм
Элемент <INPUT> используется для определения области внутри формы, где
собираются данные. Данный элемент представляет собой поле для ввода информации
пользователем. Когда форме необходимо принять от пользователя небольшое количество
текста (одну строку или немного более), она использует элемент <INPUT> и устанавливает
атрибут TYPE в значение TYPE=TEXT (на самом деле это значение по умолчанию и
указывать его необязательно). В таком случае требуется наличие атрибута NAME для
определения наименования переменной поля.
Примечание: Вы можете использовать элемент <TEXTAREA> для ввода нескольких
строк текста.
Когда форма использует элемент <INPUT> с атрибутом <TYPE>, установленным на
значение TEXT (по умолчанию), имеется еще три дополнительных атрибута, которые вы
можете использовать. Первый называется MAXLENGTH и ограничивает число символов,
вводимых пользователем в текущее поле. По умолчанию данное число не ограничено.
Вторым атрибутом является SIZE, определяющий размер видимой на экране области,
занимаемой текущим полем. Значение по умолчанию определяется типом броузера. Если
значение MAXLENGTH больше, чем SIZE, броузер будет прокручивать данные в окне.
Последним из дополнительных атрибутов является VALUE, обеспечивающий начальное
значение поля ввода. Следующий фрагмент HTML демонстрирует использование элемента
<INPUT>:
<P>Mу Street Address: <INPUT NAME="street"><BR>
City: <INPUT NAME="city" SIZE="20" MAXLENGTH="20"><BR>
Zip: <INPUT NAME="zip" SIZE="5" MAXLENGTH="5"
VALUE="999999"><BR>
Тип элемента ввода CHECKBOX
При создании форм часто бывает необходимо получить ответ пользователя на вопрос
типа «Да/Нет» или «Правда/Ложь». Например, если ваш узел Web позволяет пользователям
выбирать характеристики пиццы, он должен предоставлять им возможность отметить их,
например, пепперони, сыр или зеленый перец. Для создания независимых кнопок в формах
HTML используется элемент <INPUT> с атрибутом TYPE=CHECKBOX. В зависимости от
содержания формы пользователь может отметить несколько флагов. Когда форма использует
элемент <INPUT> с атрибутом CHECKBOX, в нем должны присутствовать и атрибуты
NAME и VALUE. Атрибут NAME указывает на наименование данного поля (флага) ввода. В
атрибуте VALUE будет содержаться значение поля.
В некоторых случаях необходимо инициализировать данный флаг, как уже
отмеченный. В таких случаях элемент <INPUT> должен содержать атрибут CHECKED.
Следующий фрагмент HTML демонстрирует использование элемента <INPUT> с атрибутом
CHECKBOX:
5
<HTML><P>Pick Yow Favorite Team</P>
<FORM>
<INPUT TYPE="checkbox" NAME="team"
VALUE="steelers">Steelers<BR>
<INPUT TYPE="checkbox" NAME="team"
VALUE="cowboys">Cowboys<BR>
INPUT TYPE="checkbox" NAME="team"
VALUE="vikings">Vikings<BR>
<FORM></HTML>
Тип элемента ввода PASSWORD
Если в форме требуется организовать ввод пароля, то атрибут TYPE можно установить
в значение PASSWORD (TYPE=PASSWORD). Используя данный тип, можно организовать
ввод пароля без вывода на экран составляющих его символов. Следующий фрагмент HTML
демонстрирует использование установки TYPE=PASSWORD:
<P>My_name: <INPUT NAME="login">
MY_Password: <Input Type="password" NAME="p_wors">
Тип элемента ввода SUBMIT
Когда программист использует форму HTML для ввода информации от пользователя,
он должен обеспечить возможность пользователю завершить ввод данных. Для этого он
использует элемент <INPUT> с атрибутом TYPE = SUBMIT. Броузер, в свою очередь,
выводит данный элемент как кнопку, на которой пользователь может щелкнуть, чтобы
завершить процесс редактирования. Когда форма использует элемент <INPUT> с атрибутом
SUBMIT, данный элемент может содержать два дополнительных атрибута: NAME и VALUE.
Атрибут NAME указывает наименование кнопки SUBMIT. Атрибут VALUE хранит значение
переменной поля в вашей форме.
Тип элемента ввода TEXTAREA
В зависимости от типа формы может потребоваться организовать ввод большого
количества текстовой информации. В таких случаях программисты используют элемент
<TEXTAREA> для создания текстового поля из нескольких строк. Данный элемент
использует три атрибута: COLS, NAME и ROWS. Атрибут COLS указывает (число символов)
число колонок, содержащихся в текстовой области. Атрибут NAME указывает на
наименование поля. Атрибут ROWS задает количество видимых строк текстовой области.
Содержимое элемента <TEXTAREA> первоначально равно значению по умолчанию.
Обычно броузер использует атрибуты ROWS и COLS для определения видимых размеров
поля на основании шрифта фиксированной ширины. Следующий фрагмент HTML
демонстрирует использование элемента <TEXTAREA>:
<TEXTAREA NAME="address" ROWS=6 COLS=64>
Jamsa Press
2975 S. Rainbow
Suite I
Las Vegas, Nevada 89102
</TEXTAREA>
6
Пример разработки форм
Следующие документы HTML содержат пример формы, работающей на web сервере
ais.khstu.ru. Все файлы, описанные здесь, находятся в каталоге /web_server/Metodika.
Файл vipusk.shtml
<HTML>
<head>
<title>Выпускники</title>
</head>
<BODY background="Img/1.gif" text="#000000">
<h1>Выпускники!</h1>
<form method=GET action="submit.shtml">
<br>
<h2>Введите, пожалуйста, новые сведения о себе:</h2>
<!--#exec cgi="/cgi-bin/vipusk_rep.pl"-->
<TT><strong>
<PRE>
Фамилия: <INPUT TYPE="text" NAME="famaly" SIZE="30" MAXLENGTH="60">
Имя: <INPUT TYPE="text" NAME="name" SIZE="30" MAXLENGTH="60">
Отчество: <INPUT TYPE="text" NAME="otch" SIZE="30" MAXLENGTH="60">
Год выпуска: <INPUT TYPE="text" NAME="year" SIZE="5" MAXLENGTH="7">
Где работаю: <INPUT TYPE="text" NAME="locate" SIZE="60" MAXLENGTH="80">
Кем работаю: <INPUT TYPE="text" NAME="work" SIZE="30" MAXLENGTH="60">
Край (область): <INPUT TYPE="text" NAME="state" SIZE="40" MAXLENGTH="70" >
Город: <INPUT TYPE="text" NAME="city" SIZE="40" MAXLENGTH="60">
Улица: <INPUT TYPE="text" NAME="street" SIZE="40" MAXLENGTH="60">
Почтовый инд.: <INPUT TYPE="text" NAME="zip" SIZE="6" MAXLENGTH="8">
</PRE>
</strong></tt>
<br>
<TYPE="text" NAME="rep" value="00">
<input type="submit" value="Передать данные">
_________Сегодня: <!--#echo var="DATE_LOCAL"-->
</form>
<hr>
<p>
</body>
</HTML>
Файл submit.shtml
<HTML>
<head>
<title>Результат</title>
</head>
<BODY background="Img/1.gif" text="#000000">
<h1>Ваши новые данные:</h1>
<br>
<!hr>
<!--#exec cgi="/cgi-bin/vipusk.pl"-->
7
<p><a href="ourvipusk.htm"><img src="Img/prevtbtn.gif" border="0" width="34"
height="33"></a></p>
</HTML>
Необходимые пояснения:
1. Файл vipusk.shtml позволяет ввести новые данные о себе выпускникам нашей
кафедры. Форма использует метод GET и файл submit.shtml для обработки данных,
введенных в форме. Оба файла имеют расширение shtml, указывающее на то, что в
файлах могут присутствовать так называемые расширенные команды сервера ServerSide Includes (SSI). Это следующие строки: <!--#exec cgi="/cgi-bin/vipusk_rep.pl"-->
для запуска скрипта vipusk_rep.pl, назначение которого предотвратить повторный
ввод данных при нажании кнопки «обновить» на web броузере; <!--#echo
var="DATE_LOCAL"--> для вывода текущей даты; <!--#exec cgi="/cgibin/vipusk.pl"--> запускает скрипт для обработки введенных данных.
2. Файл submit.shtml непосредственно запускает скрипт для обработки введенных
данных и записи их в файл для архивирования. Скрипт дополняет HTML страницу
(submit.shtml) введенными данными для их контроля на стороне web броузера.
Задание
1. Разработать форму для ввода следующих сведений:
 Фамилия.
 Имя.
 Отчество.
 Год поступления в университет.
 Год рождения.
 Номер студенческой группы.
2. Обеспечить формирование HTML страницы с информацией, подтверждающей
правильную передачу введенных данных (см. методические указания к
практическому заданию № 4).
3. Продемонстрировать работу преподавателю, составить отчет по практической работе.
Контрольные вопросы
1. Что такое «форма»?
2. Основные теги для организации форм.
3. Способы передачи данных из формы серверу.
Библиографический список
1. Хольцнер Стивен. Dynamic HTML. Рук. разработчика: Пер. с англ. С. А. Бойко / Под ред.
А. А.Кудряшовой / Стивен Хольцнер. – М.: Спаррк, 1999. – 397 с.
2. Использование HTML 4. Ясно. Кратко. Надежно / Л. Паттерсон. – М.: Вильямс, 1999. –
400 с.
3. Матросов А. В. HTML 4.0 / А. В. Матросов. – СПб.: БХВ-Санкт-Петербург, 2000. – 671 с.
4. Федотов А. М. Язык HTML 3.2: Учеб. пособие / А. М. Федотов. – Новосибирск: СибГУТИ,
1999. – 76 с.
5. Морис Б. HTML в действии / Б. Морис. – СПб.: Питер, 1997. – 256 с.
6. Браун М. Использование HTML 4: Пер. с англ. / М. Браун. – М.: Вильямс, 1999. – 779 с.
8
7. Шарф Д. HTML 3.2: Справочник: Пер. с англ. / Д. Шарф. – СПб.: Питер паблишинг, 1998.
– 220 с.
8. Полянский А. Хитрости, трюки и секреты создания web-страниц на базе языка
гипертекстовых документов HTML 3.0-4 / А. Полянский. – М.: Познават. кн. Плюс, 1999. –
240 с.
9. Хоумер А. Dynaмic HTML: Справочник / А. Хоумер. – СПб.: Питер Ком, 1999. – 510 с.
10. Закарян И. О. Что такое Internet, WWW и HTML. Первое знакомство / И. О. Закарян.– М.:
Изд. дом "ИНФРА-М", 1998. – 211 с.
11. Декарт А. Программирование на Perl DBI / А. Декарт. – М.: Символ-Плюс, 2000. – 400 с.
13. Холзнер С. Perl. Спец. справ.: Наиболее полн. справ. рук.: Пер. с англ. / С. Холзнер. –
СПб.: Питер, 2000. – 490 с.
14. Кристиансен Т. PERL / Т. Кристиансен. – СПб.: Питер, 2001. – 734 с.
15. Пэтчетт К. CGI/Pepl: создание программ для Web: Пер. с англ. / К. Пэтчетт. – М.: БХВ,
2000. – 622 c.
16. Шварц Р. Изучаем Perl / Р. Шварц. – М.: Изд. группа "BHV", 1998. – 320 с.
9
ПРОЕКТИРОВАНИЕ ИНФОРМАЦИОННЫХ СИСТЕМ
Методические указания к выполнению практического задания № 3
для студентов специальности 071900 «Информационные системы
и технологии»
Конопелько Геннадий Константинович
Главный редактор Л. А. Суевалова
Редактор Л. С. Бакаева
Компьютерная верстка Г. К. Конопелько
Подписано в печать 20.11.03. Формат 60х84 1/16.
Бумага писчая. Гарнитура “Таймс”. Печать офсетная. Усл. печ. л. 0,5.
Тираж 100 экз. Заказ
Издательство Хабаровского государственного
технического университета.
680035, Хабаровск, ул. Тихоокеанская, 136.
Отдел оперативной полиграфии издательства
Хабаровского государственного технического
университета.
680035, Хабаровск, ул. Тихоокеанская, 136.