Педагогический университет

Основы web-программирования для школьного "сайтостроительства". Лекция 3.

Формы приятные и полезные: обработка форм на стороне сервера

Здравствуйте, уважаемые коллеги!

Третья лекция нашего курса посвящена формам — основному инструменту взаимодействия двух сторон переговорного процесса — клиентской и серверной.

Форма на языке HTML кодируется тегом form. Этот тег сам по себе имеет ряд важных параметров, которые мы рассмотрим ниже, но основное его назначение — быть контейнером для разнообразных элементов управления — текстовых полей ввода (однострочного и многострочного), радиокнопок, флажков (чекбоксов), списков. (Мы перечислили не все элементы управления, некоторые в силу ограниченности объема нашего курса рассмотрены не будут.)

Быстрый старт

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

Учебный план

№ газеты	ЛЕКЦИЯ
17/2008	Лекция 1. “Пролетая над миром web-программирования”. Границы возможностей статического HTML. Два мира, две системы: программирование на стороне клиента и программирование на стороне сервера. Идем от реальности: текущие предложения хостинг-провайдеров. Инструментарий: пакет Denwer, установка. Первая программа на PHP “Здравствуй, мир web-программирования”.
18/2008	Лекция 2. Пример задачи автоматизации: доска объявлений школьного сайта. SSI, основные возможности и директивы. SSI-версия школьной доски объявлений. PHP-версия доски объявлений. Совершенству нет предела: выводим все объявления из каталога, помечаем важные. Передача параметров в программы на PHP. Обзор синтаксиса PHP: типы данных, операции, основные алгоритмические конструкции.
19/2008	Лекция 3. Обработка форм на стороне сервера. Формы и элементы управления HTML: однострочное и многострочное поля ввода, флажки, радиокнопки, списки. Методы GET и POST, кодирование URL. Обзор синтаксиса PHP: функции, массивы.
20/2008	Лекция 4. Усовершенствованная доска объявлений с разделом администратора. Обзор синтаксиса PHP: файлы. Законченный мини-проект: административный интерфейс для доски объявлений на файловом “движке”. Контрольная работа № 1. Разработка теста с обработкой результатов тестирования на стороне сервера.
21/2008	Лекция 5. Введение в использование баз данных в задачах web-программирования. Зачем нужна СУБД? Теория реляционных баз данных: основные термины. SELECT — “главная команда” SQL. Что такое MySQL? Взаимодействие с сервером MySQL из программ на PHP.
22/2008	Лекция 6. База данных “Страница школьного журнала”: от проектирования до визуализации. Практическое применение базы данных для автоматизации школьного сайта и школьной жизни. Контрольная работа № 2. Доработка базы данных “Страница школьного журнала”.
23/2008	Лекция 7. “На троих”. Задействуем трех основных “игроков”: MySQL+PHP+Javascript. Проверка данных форм на стороне клиента перед отправкой на сервер.
24/2008	Лекция 8. Рисование средствами PHP. Генерирование графических данных “на лету”. Построение графиков и диаграмм. Графическая визуализация данных школьного журнала. Итоговая работа

Итак, суть задачи: от пользователя требуется закончить известную фразу. Введенная пользователем строка отправляется на сервер, где и производится проверка, по результатам которой выводится соответствующее сообщение. На рис. 1 и 2 показаны примеры правильного и неправильного ввода.

а)

б)

Рис. 1

а)

б)

Рис. 2

Как все это работает? Так это же самое интересное! Организуем отдельный каталог, в котором будем размещать все примеры этого занятия. Вы еще не запустили Denwer? Нет? Ну и хорошо! Если уже запустили, остановите его, пожалуйста, потому что мы собираемся создать новый каталог в home. Назовем этот каталог forms. (Не забудьте внутри каталога forms создать каталог www.) Теперь можно запустить Denwer и поместить в каталог home/forms/www файл test.htm:

1. <html>

2. <head>

3. <meta http-equiv="content-type" content="text/html;

charset=windows-1251">

4. <title>О сколько нам открытий чудных готовит...</title>

5. </head>

6. <body>

7. <h1>Тестируем простейшую форму</h1>

8. <form name="test" action="check.php">

9. <pre>

10. О сколько нам открытий чудных

11. Готовит <input type="text" name="spirit" size="30">

12. </pre>

13. <p><input type="submit" value="Проверить!">

14. </form>

15. </body>

16. </html>

Я пронумеровал строки этого примера только для того, чтобы на них было легче ссылаться! Разумеется, в самом HTML-файле никаких номеров нет.

Контейнер form открывается в строке 8 (закрывается он в строке 14). В этом контейнере имеются два элемента управления — однострочное текстовое поле ввода (тег input с параметром type="text", строка 11) и кнопка (тег input с параметром type="submit", строка 13). Рассмотрим существенные параметры этих тегов.

У тега input в строке 11, помимо параметра type, который как раз и кодирует однострочное текстовое поле ввода, есть параметры name и siz. Смысл второго очень простой — он задает размер поля (в символах). Это существенный параметр, но он имеет отношение лишь к визуализации поля ввода в браузере. А вот параметр name куда важнее! Он задает имя переменной, которая будет хранить значение этого поля при передаче данных на сервер.

У тега input в строке 13 в параметре value определяется значение надписи на кнопке. Но в данном случае как раз важнее значение параметра type. Заданное здесь значение submit информирует браузер о том, что при нажатии на данную кнопку необходимо передать данные формы на сервер. Этим кнопки submit отличаются от обычных кнопок button, у которых такой функции нет.

А как это “передать на сервер”? — спросите вы. Кому передать? А вот это-то и написано в самом теге form. Посмотрим теперь на него.

Параметр name у нашей формы задан “для порядку”. В данном случае он никак не используется. Наиважнейшим из всех параметров form для нас является action. В этом параметре задается имя скрипта-обработчика, в нашем случае — программы на PHP, которой будут переданы данные формы для обработки. Посмотрим на содержимое файла check.php:

<html>

<head>

<title>Проверка теста "О сколько нам открытий чудных готовит..."</title>

</head>

<body>

<h1>Результат теста</h1>

<p>

<?php

$result=($spirit=="просвещенья дух")?"Правильно!":"Неправильно :-(";

echo "Вы ввели <b>$spirit</b>. Это <font color=red>$result</font>";

</body>

</html>

Наш скрипт в выделенной строке анализирует значение переменной $spirit и в зависимости от него присваивает то или иное значение переменной $result. Использованная здесь конструкция, разумеется, может быть заменена условным оператором, но я написал именно так специально. Условная тернарная операция ?: часто применяется при программировании на Си-подобных языках. Она имеет следующий вид:

(условие)?значение1:значение0

В зависимости от значения условия значение всей операции равно либо значению1 (если условие истинно), либо значению0.

Итак, обработка формы происходит следующим образом:

1. Пользователь задает некоторые значения элементам управления формы (в данном случае — вводит значение в текстовое поле ввода).

2. Затем пользователь нажимает кнопку отправки данных (submit).

3. По нажатию этой кнопки браузер смотрит на значение параметра action тега form и загружает соответствующий файл, передавая ему значения полей формы в качестве параметров.

4. Ну а уж дело этого файла — сделать со своими параметрами то, что он считает нужным.

Далее мы рассмотрим ряд небольших, но содержательных примеров с использованием различных элементов управления, но сначала кратко вспомним основные элементы управления HTML, которые можно использовать в формах.

Основные элементы управления HTML

В следующей таблице представлены основные элементы управления HTML, с которыми нам придется иметь дело. Данная таблица носит конспективный характер, в ней отмечены лишь самые существенные параметры рассматриваемых элементов.

Визуализация	Код на HTML	Комментарии и пояснения
	<input type="text" name="abc" size="20" >	Однострочное текстовое поле ввода мы уже использовали выше
	<textarea name="abc" cols="20" rows="10"></textarea>	Многострочное текстовое поле ввода. Фактически мини-редактор, который можно использовать внутри HTML-страницы
	<input type="radio" name="abc" value="1">?Понедельник <input type="radio" name="abc" value="3">?Среда <input type="radio" name="abc" value="5">?Пятница	Радиокнопки объединяются в группы по значению параметра name. В качестве значения группы используется значение value выбранного пункта. Поясняющий текст лежит за пределами тега и с точки зрения браузера никакого отношения к нему не имеет
	<input type="checkbox" name="abc1" value="1">?Понедельник <input type="checkbox" name="abc2" value="3">?Среда <input type="checkbox" name="abc3" value="5">?Пятница	Поясняющий текст не имеет отношения к значению флажка. Важно лишь значение параметра value
	<select name="abc"> <option value="1">?Понедельник </option> <option value="3">?Среда</option> <option value="5">?Пятница</option> </select>	Хотя элементы списка и размещаются внутри option, в качестве значения списка все равно возвращается значение value выбранного элемента. (До элементов списка можно добраться, например, из Javascript, но на сервер они не отправляются.)
	<select name="abc" multiple> <option value="1">?Понедельник </option> <option value="3">?Среда</option> <option value="5">?Пятница</option> </select>	Параметр multiple обеспечивает возможность множественного выбора из списка (с удержанием клавиши ?). Можно считать, что обычный список ведет себя как группа радиокнопок, а такой список — как группа флажков
	<input type="button" value="Нажми меня!" onclick="alert('Большое cпасибо!')"> <input type="submit" name="abc" value="Отправить данные"> <input type="reset" value="Откатить изменения">	Здесь показаны три вида кнопок. Первая редко используется в формах и предназначена в основном для обработчиков на Javascript (поэтому я и написал ей маленький обработчик). С назначением кнопки submit мы познакомились выше. А кнопка reset выполняет особую функцию — при нажатии на нее браузер возвращает все элементы управления формы в исходное состояние (сбрасывает все изменения, сделанные пользователем). Данные никуда не отправляются

Мини-тест: таблицы истинности

В этом разделе мы реализуем несколько вариантов небольшого теста, предназначенного для проверки знаний таблиц истинности. Пользователь должен будет заполнить таблицу, а мы проверить, как он ее заполнил.

Реализация теста посредством текстовых полей ввода

Пусть, к примеру, требуется проверить знание таблицы истинности операции конъюнкции. Предложим пользователю задание, подобное представленному на рис. 3.

Рис. 3

Код этой страницы разметим в файле testANDtext.htm:

<html>

<head>

<title>Таблица истинности логической операции операции "И"</title>

</head>

<body>

<h1>Таблица истинности логической операции операции "И"</h1>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

Как вы уже видите, обработчиком будет скрипт testANDtext.php. Правда, здесь и далее, в обработчике, я буду лишь печатать ввод пользователя. А проверить его вам предстоит самостоятельно, выполняя задания к этой лекции.

Вот код обработчика (он мало отличается от рассмотренного выше примера):

<html>

<head>

<title>Проверка теста "Таблица истинности логической операции операции "И"</title>

</head>

<body>

<h1>Результат теста</h1>

<p>Вы заполнили таблицу следующим образом:

<p>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

Здесь просто печатаются значения четырех переменных, полученных из полей ввода формы. В браузере это выглядит так (см. рис. 4):

Рис. 4

Зачем “городить огород”?

А действительно, зачем? Почему нельзя все быстро и просто проверить на стороне пользователя? Зачем нужны серверные скрипты, зачем что-то (данные) куда-то (на сервер) отправлять?

Конечно, можно проверить все и на стороне клиента, посредством Javascript. И проблем никаких нет, и работать все будет быстрее. Вот так, например:

<html>

<head>

<title>Таблица истинности логической операции операции "И"</title>

function check() {

//Переменная myform нужна только для сокращения записи при вычислении

//значения result

myform=document.forms.test;

result=(myform.t00.value=="0")&&(myform.t01.value=="0")&&

(myform.t10.value=="0")&&(myform.t11.value=="1")?

"Правильно!":"Неправильно :-(";

alert("Результат проверки: "+result);

}

</script>

</head>

<body>

<h1>Таблица истинности логической операции операции "И"</h1>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

Результат работы этого скрипта показан на рис. 5.

Рис. 5

Как видите, все работает. Но! Взгляните-ка на рис. 6. Для пользователя не составляет никакого труда добраться до исходного кода скрипта!

Рис. 6

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

Реализация теста посредством радиокнопок

Таблица истинности конъюнкции хороша тем, что ее можно просто реализовать и посредством радиокнопок. Пользователь должен будет просто отметить единственное истинное значение в таблице (хотя это, конечно, уже серьезная подсказка :).

Рис. 7

Сам тест на радиокнопках разместим в файле testANDradio.htm, а обработчик — в файле testANDradio.php.

Код теста:

<html>

<head>

<title>Таблица истинности логической операции операции "И"</title>

</head>

<body>

<h1>Таблица истинности логической операции операции "И"</h1>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

Код обработчика:

<html>

<head>

<title>Проверка теста "Таблица истинности логической операции операции "И"</title>

</head>

<body>

<h1>Результат теста</h1>

<p>Вы заполнили таблицу следующим образом:

<p>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

Как видите, здесь снова используется условная операция. В переменной $AND (напомним, что PHP-язык регистрово-зависимый, поэтому можно не опасаться такого названия переменной) передается значение value выбранной кнопки группы. Скрипт анализирует это значение и помещает его в таблицу. (Внимание! Если ни одна из кнопок не будет выбрана, возникнет ошибка. От нее вам предстоит избавиться самостоятельно, выполняя задания к лекции.)

А как же… Реализация теста посредством чекбоксов “в лоб”

Мы ловко реализовали таблицу истинности конъюнкции на радиокнопках, но это, конечно, несколько искусственный вариант. Реализовывать на радиокнопках дизъюнкцию уже очень неудобно (попробуйте :). Ну, можно, конечно, отмечать ложное значение, но это как-то… “криво”. Естественный вариант — флажки. Например, так (см. рис. 8):

Рис. 8

Однако с флажками не все так просто. Впрочем, сначала реализуем этот вариант “в лоб”. В файле testORcheckbox.htm разместим тест, а в файле testORcheckbox.php — обработчик.

Тест:

<html>

<head>

<title>Таблица истинности логической операции операции "ИЛИ"</title>

</head>

<body>

<h1>Таблица истинности логической операции операции "ИЛИ"</h1>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

Обработчик:

<html>

<head>

<title>Проверка теста "Таблица истинности логической операции операции "ИЛИ"</title>

</head>

<body>

<h1>Результат теста</h1>

<p>Вы заполнили таблицу следующим образом:

<p>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

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

Поэтому нам пришлось использовать специальную функцию isset. Она проверяет, определена ли переменная с данным именем. В данном случае этого достаточно, значение переменной можно уже не проверять.

Хороший вариант? Ужасный! Хуже не бывает! Я с большим трудом заставил себя написать его, так мне было противно :)! Почему? А представьте, что флажков не четыре, а двадцать четыре. Или сто. В реальном тесте — вполне мыслимый вариант. И что же, каждый раз заводить отдельную переменную :(?

Конечно, нет. Для решения этой и подобных задач в PHP применяют стандартный, но довольно хитрый прием, требующий использования массивов. Так что придется с ними (с массивами) познакомиться. Вы, конечно, заметили, что я, в силу ограничений объема публикации нашего курса, практически не углубляюсь в технические подробности программирования на PHP. Но массивы на PHP могут вызвать удивление даже у бывалых программистов, поэтому на них я остановлюсь подробнее.

Массивы в PHP

Массивы в PHP — это не вполне то, к чему привыкли программисты, использующие, например, Паскаль или Си. Массивы в традиционном стиле (как упорядоченные нумерованные последовательности элементов) на PHP тоже можно использовать, но они лишь являются частным случаем “настоящих” PHP-массивов. Что же такое истинные PHP-массивы?

Массив в PHP представляет собой набор пар ключ/значение. Ключи могут быть представлены лишь целым или строковым типом, значения могут быть любыми. Типы ключей и значений в пределах одного массива не обязаны совпадать.

Понятно? Уверен, что нет. Я и сам лет… много… назад был озадачен таким представлением о массивах. Я разобрался с массивами в PHP до конца лишь поставив довольно много экспериментов. Что предлагаю проделать и вам. Результаты основных экспериментов с массивами я собрал в таблицу. В первом столбце находится исходный код на PHP, во втором — результат его выполнения. В третьем — мои комментарии. Уверен, что если вы уясните каждый из приведенных примеров, то поймете практически все.

Исходный код

Результат выполнения

Комментарии и пояснения

echo "<h4>Пример 1</h4>";

$arr1=array(1,2,3,4,5);

echo "<pre>";

print_r($arr1);

echo "</pre>";

Пример 1

Array

(

[0] => 1

[1] => 2

[2] => 3

[3] => 4

[4] => 5

)

Здесь создается “почти нормальный массив”. Элементы массива, если не указано иное, нумеруются с нуля.

Стандартную функцию print_r очень удобно использовать при отладке. Она выводит массив в виде пар [ключ]=>значение

echo "<h4>Пример 2</h4>";

$arr2=array(0=>1,1=>2,2=>3,

3=>4,4=>5);

echo "<pre>";

print_r($arr2);

echo "</pre>";

Пример 2

Array

(

[0] => 1

[1] => 2

[2] => 3

[3] => 4

[4] => 5

)

Этот пример отличается от первого лишь явным заданием значений ключей

echo "<h4>Пример 3</h4>";

$arr3=array(2=>1,0=>2,3=>3,

4=>4,10=>5);

echo "<pre>";

print_r($arr3);

echo "</pre>";

Пример 3

Array

(

[2] => 1

[0] => 2

[3] => 3

[4] => 4

[10] => 5

)

Начинаем знакомиться с “чудесами”. Видим, что ключи, как и было обещано, вовсе не обязаны идти подряд

echo "<h4>Пример 4</h4>";

$arr4[0]=array(1,2,4);

$arr4[1]=array(4,5,6);

$arr4[2]=array(7,8,9);

echo "<pre>";

print_r($arr4);

echo "</pre>";

Пример 4

Array

(

[0] => Array

(

[0] => 1

[1] => 2

[2] => 4

)

[1] => Array

(

[0] => 4

[1] => 5

[2] => 6

)

[2] => Array

(

[0] => 7

[1] => 8

[2] => 9

)

Вариант организации двумерного массива. Ключами являются числа, значениями — массивы

echo "<h4>Пример 5</h4>";

$arr5=array("abc"=>1,0=>2,

"#ffffff"=>3,4=>4,"Петя"=>5);

echo "<pre>";

print_r($arr5);

echo "</pre>";

Пример 5

Array

(

[abc] => 1

[0] => 2

[#ffffff] => 3

[4] => 4

[Петя] => 5

)

Смешанные ключи — числа и строки

echo "<h4>Пример 6</h4>";

$arr6[0]=array(1,"Петя",true);

$arr6["Маша"]="Вася";

$arr6[5]=array(7,8,3.14);

echo "<pre>";

print_r($arr6);

echo "</pre>";

Пример 6

Array

(

[0] => Array

(

[0] => 1

[1] => Петя

[2] => 1

)

[Маша] => Вася

[5] => Array

(

[0] => 7

[1] => 8

[2] => 3.14

)

Идейно этот пример не отличается от предыдущих. Только здесь еще больше вариантов

echo "<h4>Пример 7

(специально с ошибкой)</h4>";

echo "<pre>";

echo $arr6[1];

echo "</pre>";

Пример 7

(специально с ошибкой)

Notice: Undefined offset: 1 in Q:\home\forms\www\arrays.php

Чтобы увидеть представленное здесь сообщение об ошибке, необходимо поднастроить Denwer. Сделайте следующее:

1. Остановите Denwer.

2. Найдите файл /usr/local/php5/php.ini (вы уже делали это на прошлом занятии).

3. Измените строку 305.

Вместо error_reporting = E_ALL & ~E_NOTICE

оставьте

error_reporting = E_ALL

Таким образом вы включите предупреждения. После этого снова запустите Denwer.

Что касается смысла ошибки, то он простой: в предыдущем примере мы не задали значение элемента массива с ключом 1. Вот нам об этом и говорят

echo "<h4>Пример 8</h4>";

$arr8[1][1]=3.14;

echo "<pre>";

echo $arr8[1][1]."<br>";

print_r($arr8);

echo "</pre>";

Пример 8

3.14

Array

(

[1] => Array

(

[1] => 3.14

)

Ничего нового. Просто показано, что можно сразу присваивать значения элементам “двумерных массивов”

echo "<h4>Пример 9</h4>";

$arr9[]=3.14;

$arr9[]=32767;

$arr9[]="php";

echo "<pre>";

print_r($arr9);

echo "</pre>";

Пример 9

Array

(

[0] => 3.14

[1] => 32767

[2] => php

)

Наиважнейший пример! Он демонстрирует, что если присваивать значения элементам массива без явного указания ключей, элементы будут нумероваться подряд автоматически. Эта возможность активно используется как раз при обработке чекбоксов

echo "<h4>Пример 10</h4>";

echo "<p>";

foreach ($arr9 as $elem)

echo "$elem<br>";

echo "<p>";

for ($i=0;$i<count($arr9);$i++)

echo "$arr9[$i]<br>";

Пример 10

3.14

32767

php

3.14

32767

php

В этом примере показаны два способа обхода массива. Второй — традиционный (надо лишь запомнить, что функция count возвращает количество элементов в массиве). Традиционный способ можно применять далеко не всегда. В частности, его нельзя использовать в массивах, в которых ключи не образуют упорядоченную последовательность. Тогда остается только цикл foreach. Это специальный цикл, который позволяет перебрать элементы произвольного массива. На каждом шаге цикла извлекается значение очередного элемента

echo "<h4>Пример 11</h4>";

echo "<p>";

foreach ($arr5 as $elem)

echo "$elem<br>";

Пример 11

Здесь это показано как раз применительно к неупорядоченному массиву $arr5 (см. пример 5)

echo "<h4>Пример 12</h4>";

echo "<table border=\"1\">

<th>Значение</th></tr>";

foreach ($arr5 as $key=>$value) echo "<tr><td>$key</td>

<td>$value</td></tr>";

echo "</table>";

Пример 12

Последний пример показывает, что foreach умеет извлекать не только значения элементов, но и ключи

Педагогический университет

Основы web-программирования для школьного "сайтостроительства". Лекция 3.

Формы приятные и полезные: обработка форм на стороне сервера

Быстрый старт

Учебный план

Основные элементы управления HTML

Мини-тест: таблицы истинности

Се. Ль. Островский