ЛАБОРАТОРНАЯ РАБОТА №7 <ФОРМЫ> ТЕОРЕТИЧЕСКИЕ СВЕДЕНИЯ Использование HTML-форм на Web-странице Одним из средств, позволяющих пользователю взаимодействовать с Web-сервером, являются HTML-формы. С помощью форм Web-дизайнеры существляют сбор отзывов посетителей о работе сайта, организуют прием заказов на приобретение продуктов и решают огромное количество самых разнообразных задач. HTML-формы обеспечивают интерфейс, посредством которого посетители сайта могут взаимодействовать с сервером, администратором сайта или другими посетителями. В HTML-форме могут находиться следующие элементы управления: Text Field (Текстовое поле) допускает любой тип текста - алфавитный или числовой. Введенный текст может быть показан как отдельной строкой, так и в несколько строк или в виде скрывающих звездочек (для защиты пароля); Button (Кнопка) в зависимости от типа, может обеспечивать передачу данных серверу (Submit), очищать форму (Reset) или запускать Javascript-код на исполнение. Check Box (Флажок) позволяет выбрать несколько вариантов ответов в одной группе настроек. Radio Button (Переключатель) позволяет сделать только один выбор. Щелчок по такому объекту в группе запрещает выбор всех других вариантов. List/Menu (Список/Меню) предоставляет пользователям выбор из набора значений. Это может быть раскрывающийся список, или список, который всегда показывает значения в прокручиваемом наборе вариантов и позволяет сделать множественный выбор. File Field (Поле файла) позволяет пользователям выполнять поиск файлов на их жестких дисках и передавать их в качестве данных формы. Image Field (Поле изображения) можно использовать вместо кнопки Submit (Отправить). Hidden Field (Скрытое поле) позволяет сохранять информацию, которая не нужна посетителю, но будет использоваться приложением, которое обрабатывает эту форму. Jump Menu (Меню перехода) позволяет вам вставлять меню, в котором каждый пункт используется для перехода к другой Web-странице. Каждый из объектов обладает собственным набором свойств, определить которые можно в палитре Properties. Вставка различных элементов управления на форму и их свойства Form - html-форма Text Field - текстовое поле Button - кнопка Check Box - флажок Radio Button - переключатель List/menu - список/меню Вставка различных элементов управления на форму и их свойства Для вставки html-форм и элементов управления на форму используется вкладка Forms палитры объектов. Перечислим основные свойства объектов, которые можно изменять с помощью палитры Properties: Form - html-форма, контейнер для размещения элементов управления Action - поле выбора файла с серверным сценарием, который будет обрабатывать данные из формы. Method - способ отправки данных серверу (Get или Post). Target - выбор окна или фрейма, где будет загружена страница c результатом обработки формы. Enctype - выбор типа отправляемых данных. Text Field - текстовое поле Char Width - длина текстового поля в символах; Max Chars - максимально возможное количество символов, которое можно ввести в текстовое поле; Type - тип текстового поля (Single line - однострочное, Multi Line - многострочное, Password поле для ввода пароля); Init Val - текст, отображаемый в текстовом поле по умолчанию (сразу при загрузке страницы); Wrap - разрешение или запрещение переноса слов в многострочном текстовом поле. Button - кнопка Label - надпись на кнопке; Action - функциональность кнопки (Submit - кнопка для отправки данных, введенных в форму, Reset - кнопка для очистки формы, None - функциональность задает сам Webдизайнер); Check Box - флажок Checked Value - значение, которое передается серверу, если флажок выбран. Initial State - состояние флажка изначально при загрузке страницы (выбран или не выбран); Radio Button - переключатель Checked Value - значение, которое передается серверу, если переключатель выбран. Initial State - состояние перключателя изначально при загрузке страницы (выбран или не выбран); List/menu - список/меню Type - тип элемента (List - список, Menu - меню); Height - высота списка в строчках Selection Allow Multipline - флажок позволяет выбирать несколько элементов из списка; List Values - определение элементов списка или меню и их значений, которые будут отправлять серверу; Initially Selected - выбор элементов списка или меню, которые будут выбраны изначально при загрузке страницы. Способы отправки данных серверу У любых элементов управления, размещенных на форме есть свойство Name. Именно это свойство и играет ключевую роль при отправке данных, введенных в форму. Рассмотрим процесс отправления данных более подробно. Есть два способа (метода) отправки данных: Get и Post. Метод Get. При использовании этого метода данные, введенные в форму отправляют в заголовке HTTP-запроса и подкрепляются к URL. Например, http://impuls-spb.ru/sendmail.php?name=dima&email=dm@mail.ru Наверняка вы когда-нибудь видели что-то подобное, когда нажимали на кнопке при заполнении формы или даже, когда просто щелкали на ссылке. sendmail.php - это имя файла программы, которая будет обрабатывать данные с формы. В данном случае программа это обыкновенная Web-страница, содержащая код на языке PHP. Далее идут конструкции вида: name=dima email=dm_design@mail.ru name и email - это имена тех элементов управления, которые размещены на форме (эти имена имеют текстовые поля, в которых посетитель вводит свое имя (dima) и e-mail (dm_design@mail.ru)). Таким образом, сервер получает данные в очень удобном для обработки виде: переменные со значением. Метод Post. Отличается от метода Get только тем, что данные с формы передаются не в заголовке, а в теле HTTP-запроса и в строке URL мы не видим ничего кроме адреса следующей страницы. Например, http://impuls-spb.ru/sendmail.php Метод Post использовать более предпочтительно, т.к. он скрывает от "посторонних" глаз имена переменных и те данные, которые передаются серверу. Ведь на ручной подмене отправляемых данных основано большинство хакерских атак на сайты. Язык серверных сценариев PHP PHP – это язык серверных сценариев (server scripting language), встраиваемый в HTML, который интерпретируется и выполняется на сервере. До того, как сервер "отдаст" файл броузеру, его просматривает интерпретатор PHP. Для того, тобы это происходило, файлы, которые подвергаются обработке интерпретатором, должны иметь определенное расширение (обычно это .phtml или .php3, но эти значения можно поменять) и содержать (хотя это не обязательное требование) код для интерпретатора. Перед отправкой страницы PHP-код проигрывается на сервере и брозеру выдается результат в виде опять таки HTML-страницы, которая может сильно отличаться от той, что хранится на сервере. Обычные же страницы, имеющие расширение .html/.htm Web-сервер будет отправлять броузеру без какой-либо обработки. Основное отличие PHP от CGI-скриптов, написанных на других языках, типа Perl или C – это то, что в CGI-программах вы сами пишете выводимый HTML-код, а, используя PHP – вы встраиваете свою программу-скрипт в готовую HTML-страницу, используя открывающий и закрывающий теги (в примере <?php и ?>). PHP называется языком серверных сценариев в отличие от JavaScript/Jscript/VBScript, которые являются языками клиентских сценариев. Это значит, что PHP-скрипт выполняется на сервере, а клиенту передается результат его работы, тогда как в JavaScript-код полностью передается на клиентскую машину и только там выполняется броузером. Рассмотрим простой пример. Так выглядит web-страница с элементами php: <html> < head> < title>Пример</title> < /head> < body> < ?php echo "Привет, я PHP-программа!"; ?> < /body> < /html> После выполнения этого скрипта мы получим страничку, в которой будет написано Привет, я PHP-программа! Открыв исходный текст данной страницы мы увидим следующее. < html> < head> < title>Example</title> < /head> < body> Привет, я PHP-программа! < /body> < /html> Как видите, в результирующей странице нет и следа PHP-кода. Казалось бы, весьма просто и бесполезно, но PHP позволяет делать и более сложные и фантастические вещи, о некоторых из них будет рассказо ниже. Отправка данных, введенных в форму на e-mail Отправка данных, введенных в форму, на e-mail Для отправки данных введенных в форму используется функция mail. Рассмотрим синтаксис этой функции и особенности ее работы. mail ($recipient, $subject, $message, $headers) $recipient - строковая переменная, в которой находится адрес получателя отправляемого письма; $subject - строковая переменная, в которой находится тема письма; $message - строковая переменная, в которой находится текст сообщения; $headers - строковая переменная, в которой может находится служебная информация, например, кодировка отправляемого письма, название почтовой программы, e-mail отправителя и пр. Эта переменная не является обязательной. Например, мы хотим отправить письмо по адресу dm_mail@mail.ru. Тема письма: "Проверка связи"; текст сообщения: "Ну как? Дошло ли мое письмо". Простейший php-код, который будет необходимо вставить на страницу, следующий: <?php $recipient='dm_mail@mail.ru'; $subject='Проверка связи'; $message='Ну как? Дошло ли письмо?'; mail($recipient, $subject, $message); ?> Технология SSI (Server-Side Include). Создание новостной ленты Суть технологии SSI состоит в обеспечении вставок в HTML-код специальных директив, которые передают указания серверу выполнить определенные действия. Эти директиры могут обеспечить вставку фрагментов HTML-кода из других файлов, динамическое формирование страницы в зависимости от некоторых условий и пр. Страницы, использующие технологию SSI имеют расширение SHTM или SHTML. SSI-директивы выполняются только на сервере, если вы попытаетесь запустить HTML-код с SSI-директивами на своем компьютере, то последние будут восприняты броузером просто как комментарии. Это обстоятельство несколько осложняет отладку кода. Существует около десятки SSI-директив, но самой популярной является команда включения содержимого одного файла в другой: <!--#include virtual="news.html" --> где include - команда вставки; virtual - параметр, определяющий, что путь к файлу относительный (в случае абсолютного пути следовало бы написать file); news.html - имя включаемого файла. Результатом выполнения этой директивы будет вставка содержимого файла news.html в место появления данной директивы. При просмотре сформированного в итоге HTML-кода мы не увидим никаких признаков SSI-директив. Создание новостной ленты Допустим мы хотим, чтобы на каждой странице нашего сайта была лента новостей. Если бы мы не использовали технологию SSI, нам бы пришлось при появлении новой новости изменять код каждой страницы. При использовании технологии SSI мы можем создать отдельный HTML-файл, содержащий заголовки новостей и ссылки на их подробное описание, а затем, на всех страницах вставить директиву <!--#include virtual="news.html" --> в то место странички, где у нас должна быть новостная лента. При отправке страницы клиенту, сервер будет вставлять html-код из файла news.html во все страницы сайта, где присутствует данная SSI-директива. ЛАБОРАТОРНАЯ РАБОТА 1. Создание формы для отправки по e-mail 1. 2. 3. 4. 5. Запустите программу Dreamweaver MX. Открытую пустую страницу сохраните как formmail.htm. Активизируйте вкладку Forms на палитре объектов. На странице напишите «Имя» и щелкните на объекте «Text Field». На вопрос программы о добавлении тега Form ответьте «Yes». 2. Надпись перед полем ввода и само поле ввода должны быть обведены красной пунктирной линией – областью формы. 6. Для поля ввода в палитре свойств установите следующие параметры: Char Width= 20; Max Chars = 25. Назначьте полю ввода имя: name. 3. Ниже данного поля добавим еще одного поле ввода для электронного адреса отправителя вопроса. 7. На странице напишите «Ваш E-mail» и щелкните на объекте «Text Field». 8. Для поля ввода в палитре свойств установите следующие параметры: Char Width= 20; Max Chars = 25. Назначьте полю ввода имя: email. 4. Ниже создадим многострочное текстовое поле для ввода текста вопроса. 9. На странице напишите «Ваш вопрос» и щелкните на объекте «Text Field». 10. В палитре свойств поставьте переключатель Type в положение Multi line. 11. В палитре свойств установите следующие параметры: Char Width = 40; Num Lines = 5. Назначьте многострочному текстовому полю имя vopros. 12. Сохраните страницу. 13. Создайте новую страницу и сохраните ее под именем sendmail.php. 14. Внутри области <body…></body> вставьте следующий код: <?php $recipient="your@e-mail.ru"; $subject="Вопрос с сайта"; $message="$name спрашивает:\n"; $message.="$vopros\n"; $message.="E-mail отправителя: $email"; $headers="From: $email\n"; $headers.="X-Sender: $email\n"; if ($email) { if (mail ($recipient, $subject, $message, $headers)) { print ("<h3><center>$name, Ваш вопрос отправлен. Ждите ответа!</center></h3>\n"); }} else { print ("<h3><center>$name, Вы не указали свой электронный адрес!</center></h3>\n"); } ?> 15. Сохраните страницу sendmail.php. 16. Откройте страницу formmail.htm. 17. В нижней строке окна документа щелкните на теге <form>. 18. В палитре свойств установите для формы следующие параметры: в поле Action выберите файл sendmail.php; method: Post; target: _blank; 19. Сохраните страницу. Примечание. Работу этого скрипта вы сможете проверить только при условии, что ваш хостинг-провайдер разрешает вам использование функции mail. На локальном компьютере проверить работу этого скрипта технически сложно. САМОСТОЯТЕЛЬНАЯ РАБОТА СТУДЕНТА 1. Создать форму для отправки вопроса по e-mail. 2. Написать собственный скрипт отправки формы. (адаптированный под вашу форму) Страницу со скриптом пришлите преподавателю на проверку. ТЕСТ 1. Что определяет свойство maxchars для текстового поля? длину текстового поля максимальное количество символов, которые можно ввести в текстовое поле 2. Что делает кнопка Submit? проверяет данные, введенные в форму отсылает данные, введенные в форму серверу возвращается форму в исходное состояние 3. Что делает кнопка Reset? проверяет данные, введенные в форму отсылает данные, введенные в форму серверу возвращается форму в исходное состояние 4. Какой элемент формы позволяет выбирать файлы на диске компьютера пользователя и передавать их в качестве данных формы? Image Field File Field Hidden Field 5. При использовании какого метода отправки данных последние отправляются в теле HTTP-запроса? Get Post 6. http://impuls-spb.ru/sendmail.php?name=dima&email=dm@mail.ru Здесь sendmail.php - это имя странички с PHP-кодом, которая будет обрабатывать посланные данные имя переменной, которой присвоятся посылаемые данные программа на языке PHP 7. Программа на языке PHP интерпретируется на сервере, а выполняется на компьютере-клиенте интерпретируется и выполняется на компьютере-сервере интерпретируется и выполняется на компьютере-клиенте 8. Можно ли просмотреть php-код на страницах, загруженных из Интернета с помощью пунктов меню Вид > Просмотр в виде HTML? да нет 9. Для отправки данных, введенных в форму, на e-mail используется функция языка PHP email() sendmail() mail() 10. Что нужно для того, чтобы проверять работу серверных сценариев на локальном компьютере? программа Web-сервер интерпретатор PHP оба ответа верны