Ввод и правка данных

Глава 10. Ввод и правка данных
Что ж, выводить данные из базы на Web-страницу мы научились. Настала пора выяснить, каким образом с помощью HTML и PHP можно реализовать ввод данных: добавление, изменение и удаление записей. И создать, наконец, предназначенные для
этого Web-страницы.
Хоть в конце главы 9 страницы, реализующие ввод и правку данных, и были названы
сложными, но ничего особо сложного в них нет. Нужно просто уяснить некоторые
принципы, на основе которых они строятся, и изучить модели серверного поведения
Dreamweaver, которые используются для их создания. А также нужно знать средства
языка HTML, с помощью которых реализуется сам ввод данных.
Сначала, как обычно, — небольшой теоретический курс. В нем мы как раз и изучим
основные принципы приема данных от посетителя и передачи их серверной программе. Так что можно пока оставить компьютер в покое и просто почитать.
Реализация ввода и передачи данных
Чтобы принять данные от посетителя и обработать их (в нашем случае — занести в
базу данных), нужно решить три задачи:
собственно ввод данных;
кодирование их на стороне Web-обозревателя;
передача их в закодированном виде серверной программе.
Раскодирование принятых данных выполняется самим интерпретатором PHP без нашего участия, так что нам этим заниматься не придется.
За мечан ие
Поскольку технология PHP предназначена именно для создания серверных программ,
она имеет встроенные средства для раскодирования принятых данных. Если же серверная программа пишется с использованием других технологий (например, на языках
C++ или Pascal), то их раскодированием придется заниматься самому программисту.
Давайте же рассмотрим, как решаются эти задачи с помощью HTML и PHP.
Ввод данных. Формы
Как реализуется ввод данных в обычных приложениях Windows? Очень просто — с
помощью окон и элементов управления: полей ввода, списков, флажков, переключателей и кнопок. На экране появляется окно, содержащее элементы управления, в которые нам нужно ввести какие-то данные. Введя их, мы нажимаем кнопку OK, и
программа приступает к обработке этих данных. Все это мы уже наблюдали на примере того же Dreamweaver.
А как в случае Web-страниц? Точно так же! Web-обозреватель выводит страницу,
содержащую набор элементов управления, таких же, какие используются в приложениях Windows. И мы вводим в них свои данные.
Как элементы управления Windows-программы обязательно должны находиться в
окне, так и элементы управления Web-страницы должны быть помещены в форму.
Форма — это особый элемент страницы, своего рода вместилище для элементов
управления, данные из которых должны быть посланы серверной программе. Пример
такой формы можно видеть на рис. 10.1; эта форма с двумя полями ввода используется для задания имени и пароля пользователя перед входом на почтовый Webсервер.
Рис. 10.1. Пример формы
Внимание !
Все элементы управления, используемые для ввода данных, которые должны быть отправлены серверной программе, обязательно должны находиться в форме.
Сам процесс отправки данных начинается после того, как посетитель нажмет особую
кнопку, называемую кнопкой отправки. (На рис. 10.1 это кнопка Войти.) Она обязательно должна присутствовать в форме. Также в форме может присутствовать кнопка
сброса, обнуляющая введенные посетителем данные. Как правило, обе эти кнопки
располагаются в нижней или правой части формы.
Форма создается с помощью особого парного тега <FORM>, внутри которого помещаются теги, создающие элементы управления:
<FORM ACTION="givemedata.php">
...
</FORM>
Обязательный атрибут ACTION этого тега задает имя серверной программы, которая
должна получить введенные данные.
Большинство элементов управления создается с помощью одинарного тега <INPUT>.
Этот тег имеет обязательные атрибуты TYPE и NAME. Первый атрибут задает тип элемента управления (поле ввода, флажок или кнопка), а второй — его уникальное имя.
Давайте рассмотрим HTML-код, создающий небольшую форму наподобие той, что
показана на рис. 10.1:
<FORM ACTION="givemedata.php">
<P>Имя пользователя: <INPUT TYPE="text" NAME="name"></P>
<P>Пароль: <INPUT TYPE="text" NAME="password"></P>
<P><INPUT TYPE="submit" NAME="submit"></P>
</FORM>
Первая строка этого кода нам уже знакома — она создает форму, которая отправит
введенные данные серверной Web-странице givemedata.php.
Вторая и третья строки создают поля ввода для задания, соответственно, имени пользователя и его пароля. Видно, что теги <INPUT>, создающие их, имеют атрибуты
TYPE со значениями "text", то есть поле ввода.
Четвертая строка создает кнопку отправки. Для этого атрибут TYPE тега <INPUT>
должен иметь значение "submit".
За мечан ие
Для задания имен элементов управления может также использоваться атрибут ID:
<INPUT TYPE="text" ID="name">
Но, поскольку он поддерживается не всеми Web-обозревателями, на практике в теге
<INPUT> обычно используют оба атрибута — и NAME, и ID. Вот так:
<INPUT TYPE="text" NAME="name" ID="name">
Теги HTML, используемые для создания разных элементов управления, мы рассмотрим далее в этой главе. Сейчас же давайте выясним, каким образом решается вторая
задача — кодирование данных для передачи.
Кодирование данных
Прежде чем данные будут отправлены Web-серверу и, через него, серверной программе, они должны быть особым образом закодированы. Кодирование данных выполняется формой, точнее, Web-обозревателем на основе значений особых атрибутов
тега <FORM>. Давайте выясним, как именно кодируются данные, и какие атрибуты за
это "отвечают".
Как мы знаем, отправка данных выполняется после нажатия кнопки отправки. Форма
извлекает из элементов управления введенные данные и имена, заданные атрибутами
NAME и ID тега <INPUT>, и объединяет их в пары вида <имя элемента
управления>=<значение элемента управления>. Например, на основе данных,
введенных в приведенную выше форму, Web-обозреватель создаст такой набор:
name=admin
password=superuser
Так что серверная программа сможет узнать, какие данные в какой элемент управления были введены.
За мечан ие
Что касается кнопки отправки, то она всегда отправляет строку, соответствующую надписи на ней. На практике это значение никогда не используется — серверной программе и так ясно, что кнопка отправки была нажата, иначе эта программа не получила бы
данные от формы. Поэтому в дальнейшем мы будем опускать данные, соответствующие кнопке отправки.
После этого форма выполняет преобразование символов. Все символы, не являющиеся цифрами, латинскими буквами и знаками подчеркивания, преобразуются в после-
довательности вида %NN, где NN — шестнадцатеричный код символа. Единственное
исключение — символ пробела, который заменяется знаком +.
А уже после этого форма выполняет кодирование данных согласно заданному набору
правил — методу кодирования. Метод кодирования задается с помощью особого
атрибута ENCTYPE тега <FORM>.
<FORM ACTION="givemedata.php"
ªENCTYPE="application/x-www-form-urlencoded">
...
</FORM>
По умолчанию (если атрибут ENCTYPE не указан) выполняется кодирование данных с
помощью метода application/x-www-form-urlencoded. Этот метод применяется
в подавляющем большинстве случаев. Web-обозревателями также поддерживаются
методы кодирования multipart/form-data и text/plain, но они используются
значительно реже.
За мечан ие
Метод кодирования multipart/form-data используется, если нужно отправить
серверной программе файлы; он обеспечивает соответствующее такому случаю преобразование двоичных данных. А метод text/plain представляет данные в виде обычного текста, что может быть полезно, если введенные в форму данные будут отправляться по электронной почте (иногда используется и такой способ передачи данных).
Закодировав данные, Web-обозреватель приступает к решению третьей задачи —
передачи данных.
Передача данных
Для передачи данных Web-обозреватель может использовать один из двух методов
передачи данных. Это уже знакомый нам метод GET и пока еще не известный метод
POST. Рассмотрим их по порядку.
Метод GET мы изучили в главе 9, когда разбирали способ передать данные от одной
Web-страницы другой. Передаваемые этим методом данные представляются в виде
набора пар <имя аргумента>=<значение аргумента>, который ставится в самый
конец интернет-адреса и отделяется от него вопросительным знаком. Сами же пары
разделяются друг от друга знаком "&" (амперсанд).
Давайте возьмем набор данных, сформированный Web-обозревателем на основе введенных в нашу форму данных:
name=admin
password=superuser
и отправим его серверной программе методом GET:
givemedata.php?name=admin&password=superuser
Видно, что имена элементов управления стали именами атрибутов GET, а введенные
в эти элементы управления данные — их значениями. Все очень просто и наглядно.
Простота и наглядность представления данных — единственное преимущество метода GET. Поскольку передаваемый Web-серверу адрес всегда отображается в строке
адреса Web-обозревателя, мы всегда сможем увидеть, что именно было передано, а
значит, понять, правильно ли работает созданная нами форма.
Недостатков же у метода GET два, и оба очень серьезные. Первый: с его помощью
невозможно передавать большие объемы данных. Это происходит из-за ограничения,
накладываемого стандартами на длину интернет-адреса — не более 256 символов.
Вычтем отсюда длину интернет-адреса самой серверной программы — и получим
максимально допустимый размер наших данных. Второй недостаток метода GET —
обратная сторона его достоинства. Данные, пересылаемые им, открыты для всеобщего обозрения и могут быть легко прочитаны в строке адреса Web-обозревателя. Так
что конфиденциальные данные (имена пользователя и пароли) этим методом не передашь.
Метод GET используется, если пересылаемые серверной программе данные заведомо
невелики и не являются секретными. В основном, это внутренние коды и идентификаторы, например, идентификаторы заметок блога. Если же нам нужно передавать
объемные либо конфиденциальные данные, мы используем второй метод передачи,
называемый POST.
Метод POST передает данные серверной программе уже не в виде части интернетадреса, а в так называемых дополнительных данных клиентского запроса. Поскольку
размер этих дополнительных данных не ограничен (по крайней мере, он может быть
очень велик), мы можем передать все, что угодно и в каких угодно количествах. Методом POST можно передать Web-серверу даже файл.
Данные для передачи методом POST организуются так же, как и для передачи методом GET, — в виде пар <имя аргумента>=<значение аргумента>. Аргументы в
этом случае носят название аргументов POST. А сами пары выстраиваются в дополнительных данных клиентского запроса построчно.
Достоинств у метода POST два: отсутствие ограничения на объем передаваемых данных (как мы уже выяснили) и их "невидимость". Недостатки: сложность раскодирования данных и трудность отладки. Но, поскольку раскодированием данных за нас
занимается интерпретатор PHP, а трудностей настоящие программисты не боятся
(так ведь?), этими недостатками можно пренебречь.
Методом POST передаются объемные данные, которые должны быть занесены в базу
данных сайта, или секретные сведения (имена и пароли). Поэтому на наших Webстраницах, выполняющих ввод и правку данных, мы будем использовать именно метод POST.
За мечан ие
Говорят, что консорциум W3C намерен со временем заставить Web-дизайнеров и Webпрограммистов вообще отказаться от метода GET и использовать только метод POST.
Пока что метод GET просто объявлен не рекомендованным (deprecated) для использования. Однако все присутствующие в настоящее время на рынке Web-обозреватели
поддерживают метод GET, поэтому он все еще в деле.
За мечан ие
Кстати, ничто нам не мешает передавать одни данные методом GET, а другие — методом POST. Впоследствии мы этим и воспользуемся.
Ну, вот и все! Теория закончилась, и, как обычно, наступает время практики. Пора
браться за Dreamweaver.
Простые серверные Web-страницы для ввода и
правки данных
Сначала мы создадим набор административных Web-страниц, предназначенных для
добавления, правки и удаления заметок. Страницами для добавления, правки и удаления комментариев, как административными, так и общедоступными, мы займемся
потом. (Об административных и общедоступных Web-страницах было рассказано в
главе 2.)
Страница для добавления записи
И начнем мы с Web-страницы, предназначенной для добавления новой заметки. Создадим новую серверную страницу PHP и сохраним под именем addnote.php в корневой папке сайта. Дадим ей название "Добавление заметки", введем такой же заголовок и какой-либо поясняющий текст. Подключим таблицу стилей styles.css. И создадим первую в нашей карьере интернет-программиста форму.
Чтобы создать форму, выберем пункт Form подменю Form меню Insert. Созданная
нами пока еще пустая форма будет выглядеть так, как показано на рис. 10.2.
Рис. 10.2. Пустая форма на Web-странице addnote.php
Поставим в эту форму текстовый курсор. (Возможно, придется выделить форму, воспользовавшись секцией тегов.) Редактор свойств после этого должен выглядеть так,
как показано на рис. 10.3.
Рис. 10.3. Редактор свойств при выделенной форме
Здесь нас интересует только поле ввода Form name, в котором задается уникальное в
пределах Web-страницы имя формы. Дадим нашей форме "говорящее" имя addnote.
Наберем это имя в упомянутом выше поле ввода и нажмем клавишу <Enter>, чтобы
Dreamweaver внес соответствующие изменения в код HTML.
За мечан ие
Остальные элементы управления редактора свойств, показанного на рис. 10.3, задают
значения соответствующих атрибутов тега <FORM>. Мы не будем их вводить — это
сделает сам Dreamweaver, когда будет создавать модель серверного поведения для добавления новой записи.
Теперь снова поставим текстовый курсор в форму, введем текст "Заголовок:" и поставим пробел. После этого пробела мы создадим поле ввода, предназначенное для
ввода заголовка новой заметки.
Поле ввода создается выбором пункта Text Field подменю Form меню Insert. После
этого чересчур предупредительный Dreamweaver выведет диалоговое окно Input Tag
Accessibility Attributes, показанное на рис. 10.4. Оно предназначено для задания некоторых необязательных параметров, которые мы сейчас рассмотрим.
Рис. 10.4. Диалоговое окно Input Tag Accessibility Attributes
За мечан ие
Диалоговое окно Input Tag Accessibility Attributes появляется на экране при создании
любого элемента управления, кроме скрытого поля (скрытые поля обсуждаются ниже).
В поле ввода Label этого окна вводится текст надписи — своего рода описания назначения данного поля ввода. Поскольку мы уже фактически создали к нему надпись
(текст "Заголовок:"), ничего не будем туда вводить.
За мечан ие
Надпись создается с помощью парного тега <LABEL>. Внутри этого тега помещается
текст надписи и, возможно, тег, создающий сам элемент управления, к которому привязывается надпись.
Группа переключателей Style задает, каким образом надпись привязывается к полю
ввода (и вообще любому элементу управления). Всего переключателей в этой группе
три:
Wrap with label tag (включен по умолчанию) предписывает Dreamweaver поместить тег, создающий поле ввода, внутрь тега <LABEL>, задающего надпись;
Attach label tag using 'for' attribute "выносит" тег, задающий поле ввода, за пределы тега <LABEL>. При этом в тег <LABEL> помещается атрибут FOR, в качестве
значения которого указывается имя поля ввода;
No label tag вообще не использует тег <LABEL> для создания надписи. Текст надписи помещается рядом с тегом, задающим поле ввода.
Поскольку мы ничего не ввели в поле ввода Label, пропустим группу переключателей Style и посмотрим, что находится ниже ее. А находится там также неактуальная
для нас группа переключателей Position, задающая местонахождение надписи. Пункт
Before form item помещает ее перед полем ввода, а пункт After form item — после
него.
В поле ввода Access key задается "горячая" клавиша, которая в дальнейшем будет
использоваться для активизации созданного нами поля ввода. Клавиша вводится в
виде ее наименования: A, G, Z и пр. Чтобы ее использовать, посетителю будет нужно
вместе с соответствующей клавишей клавиатуры нажать клавишу <Alt>.
Заметим, что "путешествовать" по элементам управления можно с помощью клавиатуры. Так, если нажать клавишу <Tab>, следующий элемент управления, находящий-
ся на странице, станет активным. А если нажать комбинацию клавиш <Shift>+<Tab>,
то активным станет предыдущий элемент управления.
Поле ввода Tab index позволяет задать номер создаваемого элемента управления в
порядке, в котором Web-обозреватель выполняет "обход" элементов управления при
последовательном нажатии клавиши <Tab> (он так и называется — порядок обхода).
То есть можно, к примеру, сделать первым в данном порядке элемент управления,
находящийся внизу формы, вторым — находящийся в ее середине, третьим — в начале. Понятно, что номер в порядке обхода вводится в виде числа.
По умолчанию элементы управления "обходятся" в том порядке, в котором они находятся в HTML-коде страницы. Так что специально задавать порядок обхода нет нужды.
Закроем окно Input Tag Accessibility Attributes. Для этого достаточно нажать кнопку
OK, если мы ввели в нем какие-то данные, или Cancel в противном случае.
Созданное поле ввода тотчас появится в том месте, где стоит текстовый курсор, то
есть сразу после текста "Заголовок:". Щелкнем по нему мышью, чтобы выделить, и
посмотрим на редактор свойств (рис. 10.5).
Рис. 10.5. Редактор свойств при выделенном поле ввода
В редакторе свойств мы введем следующие параметры только что созданного поля
ввода:
имя (поле ввода TextField) — title;
ширина в символах (поле ввода Char width) — 60 (поле title таблицы notes
имеет размер 60 символов);
максимальное количество символов, которое можно ввести в это поле ввода (поле
ввода Max Chars), — 60;
тип (группа переключателей Type) — обычное поле ввода в одну строку (переключатель Single line);
значение по умолчанию (поле ввода Init val) — ничего.
Введя эти данные, поставим текстовый курсор сразу после только что созданного
поля ввода и нажмем клавишу <Enter>, чтобы создать другой абзац. В этом абзаце
мы наберем текст "Содержимое:" и поставим пробел. Здесь мы создадим область редактирования — этот элемент управления лучше всего подходит для работы с большими текстами.
Для создания области редактирования выберем пункт Textarea подменю Form меню
Insert. Закроем появившееся на экране диалоговое окно Input Tag Accessibility Attributes нажатием кнопки OK или Cancel. И выделим только что созданную область
редактирования щелчком мыши. Редактор свойств после этого примет вид, показанный на рис. 10.6.
Рис. 10.6. Редактор свойств при выделенной области редактирования
Зададим с помощью редактора свойств такие параметры вновь созданной области
редактирования:
имя (поле ввода TextField) — content;
ширина в символах (поле ввода Char width) — 55 (после этого правые границы
поля ввода и области редактирования будут примерно на одной линии);
высота в строках (поле ввода Num Lines) — 10 (лучше сделать область редактирования побольше, так как заметки могут быть весьма объемными);
тип (группа переключателей Type) — область редактирования (переключатель
Multi line);
способ переноса строк (раскрывающийся список Wrap) — автоматическая расстановка "мягких" переносов (пункт Virtual);
значение по умолчанию (область редактирования Init val) — ничего.
Здесь самое время рассмотреть различные способы переноса строк, предлагаемые
областью редактирования HTML. Их три, и все они задаются соответствующими
пунктами раскрывающегося списка Wrap (см. рис. 10.6).
Пункт Off отключает перенос строк. В этом случае, если текст не помещается в
область редактирования по горизонтали, в ней появляется горизонтальная полоса
прокрутки. При этом пользователь может вставить в текст "жесткий" перевод
строки, нажав клавишу <Enter>.
Если выбран пункт Virtual, область редактирования сама будет выполнять перенос длинных строк, вставляя так называемые "мягкие" переводы строк. При отправке содержимого области редактирования серверной программе эти переводы
не сохранятся. (Собственно, никаких "мягких" переводов в текст вообще не помещается — это просто такой термин.)
Если же выбран пункт Physical, то перед отправкой данных все "мягкие" переводы строк преобразуются в "жесткие". При этом в нужных местах текста будут вставлены символы перевода строк.
Последний пункт — Default — задает модель поведения по умолчанию. Как правило, он аналогичен Off.
Автор книги составил табл. 10.1, которая поможет решить, какой пункт списка Wrap
выбрать в том или ином случае.
Таблица 10.1. Советы по выбору пунктов раскрывающегося списка Wrap
Как должны отображаться данные
Как данные должны получаться
серверной программой
Пункт списка
Неизменными
Неизменными
Off
Измененными (с "мягкими" переносами)
Неизменными
Virtual
Измененными (с "мягкими" переносами)
Измененными (с "жесткими" переносами строк)
Physical
Но пора вернуться к нашей форме. Введя все указанные выше параметры, поставим
текстовый курсор сразу после области редактирования и… А вот что делать дальше?
Нам нужно занести в поле added таблицы notes дату публикации заметки. Понятно,
что это будет сегодняшняя дата. Логично было бы указать ее прямо в структуре этой
таблицы как значение поля added по умолчанию. Но MySQL позволяет задавать в
качестве значений по умолчанию только конкретные данные: конкретное число, конкретную строку, конкретную дату. Мы не сможем сказать MySQL: "Возьми сегодняшнюю дату и подставь ее в это поле при создании записи" — MySQL просто не
сможет этого сделать.
Выходит, нам самим придется вычислять значение сегодняшней даты и передавать
его MySQL. Как это сделать?
Для получения сегодняшней даты в строковом виде PHP предоставляет встроенную
функцию date(). Вот формат ее вызова:
date(<формат>)
Единственный параметр этой функции задает строку, указывающую формат даты в
результирующей строке. Эта строка содержит набор шаблонов, представляющих собой латинские буквы.
MySQL требует, чтобы значения даты представлялись в формате <год>-<месяц><число>. Причем год должен быть представлен четырьмя цифрами, месяц — номером из двух цифр, а число — также двумя цифрами. Таковы требования MYSQL, и с
ними не поспоришь…
Исходя из этого, мы выбираем строку формата "Y-m-d", где шаблон Y представляет
номер года из четырех цифр, шаблон m — номер месяца из двух цифр, а шаблон d —
число из двух цифр. Тогда вызов функции date() будет иметь вид:
date("Y-m-d");
Теперь нам как-то нужно поместить полученное значение даты в добавляемую в таблицу notes запись. Проще всего создать в форме особый элемент управления, не
отображаемый Web-обозревателем, — скрытое поле — и поместить значение даты в
него. А остальное — дело техники, точнее, Dreamweaver.
Поставим текстовый курсор после области редактирования и выберем пункт Hidden
Field подменю Form меню Insert. На этот раз Dreamweaver не будет надоедать нам
всякими бесполезными диалоговыми окнами, а без разговоров создаст то, что нам
.
нужно. Скрытое поле в его окне документа будет обозначено значком
Сразу же выделим полученное скрытое поле щелчком мыши и посмотрим на редактор свойств. Он должен принять вид, показанный на рис. 10.7.
Рис. 10.7. Редактор свойств при выделенном скрытом поле
В поле ввода HiddenField следует ввести имя только что созданного скрытого поля — added. А в поле ввода Value мы введем его значение, которое потом будет помещено в поле added таблицы notes. Вот это значение:
<?php echo date("Y-m-d") ?>
Это сценарий PHP, который вычислит значение сегодняшней даты и поместит его в
код HTML, создающий скрытое поле.
Вот и все. Ставим текстовый курсор после скрытого поля и создаем еще один абзац.
В нем поместится последний элемент управления, без которого не обходится ни одна
форма, — кнопка отправки.
Чтобы создать кнопку, выберем пункт Button подменю Form меню Insert. Закроем
появившееся на экране диалоговое окно Input Tag Accessibility Attributes нажатием
кнопки OK или Cancel. Когда кнопка появится на форме, выделим ее щелчком мыши
и прибегнем к помощи редактора свойств (рис. 10.8), чтобы задать ее параметры.
Рис. 10.8. Редактор свойств при выделенной кнопке
А параметры нашей кнопки будут такими:
имя (поле ввода Button name) — submit;
надпись на кнопке (поле ввода Label) — "Добавить";
действие, выполняемое кнопкой (группа переключателей Action), — отправка
данных (переключатель Submit form).
За мечан ие
Чтобы создать кнопку сброса, нужно включить переключатель Reset form группы Action (см. рис. 10.8). Также имеется возможность создать кнопку, не выполняющую никакого предусмотренного в HTML действия; для этого нужно включить в этой группе
переключатель None.
Все, наша форма готова — см. рис. 10.9. Теперь можно сохранить страницу и приступить к созданию модели серверного поведения, выполняющего добавление записи; эта модель носит имя Insert Record.
Рис. 10.9. Страница addnote.php с готовой формой
Для создания модели серверного поведения нам понадобится незаменимая панель
Server Behaviors. Выведем ее на экран, нажмем кнопку со знаком "плюс" и выберем
в появившемся на экране меню пункт Insert Record. На экране появится диалоговое
окно Insert Record (рис. 10.10).
Рис. 10.10. Диалоговое окно Insert Record
В раскрывающемся списке Submit values from выбирается имя формы, из которой
будет производиться выборка данных для создания новой записи. В нашем случае
это форма addnote.
Раскрывающийся список Connection уже знаком нам по другим окнам. Он задает
соединение с базой данных; в нашем случае — site.
Таблица, в которую должна быть добавлена запись, выбирается в раскрывающемся
списке Insert table. Выберем в нем таблицу notes.
Большой список Columns перечисляет все поля выбранной таблицы и соответствующие им элементы управления формы. Мы можем выбрать в нем любое поле и
задать для него элемент управления и тип данных с помощью раскрывающихся списков Value и Submit as соответственно.
Давайте поочередно выбирать в списке Columns поля таблицы notes и задавать для
них нужные параметры. Итак, значение поля id не будет браться из формы (оно проставляется самим сервером данных, поскольку имеет тип счетчик), поэтому мы выбираем пункт None в раскрывающемся списке Value. Значение поля added будет
взято из скрытого поля added (выберем пункт FORM.added в списке Value), а его
тип — дата (пункт Date списка Submit as). Поле title получит значение из поля
ввода title (пункт FORM.title в списке Value) текстового типа (пункт Text списка
Submit as). Поле content получит значение из области редактирования content
(пункт FORM.content списка Value) и тип будет иметь также текстовый.
Что касается поля ввода After inserting, go to, то оно задает Web-страницу, на которую будет выполнен переход, если новая запись будет создана. Введем в это поле
имя главной страницы нашего сайта — default.php. Также можно щелкнуть по кнопке
Browse, расположенной справа, и выбрать файл нужной страницы в диалоговом окне
Select a redirect file, похожем на окно Select File.
Введя все нужные данные, можно нажать кнопку OK. Готовая форма с привязанной
к ней моделью серверного поведения Insert Record показана на рис. 10.11.
Рис. 10.11. Страница addnote.php с готовой формой, к которой была привязана модель серверного поведения Insert Record
Кстати, присмотревшись, мы можем заметить внизу формы уже знакомый нам значок
. Да, это еще одно скрытое поле, но его Dreamweaver создал сам, для своих
собственных нужд.
Осталось сделать всего две вещи. Во-первых, открыть страницу default.php и превратить текст "Добавить заметку" в гиперссылку, указывающую на страницу addnote.php. Во-вторых, создать на странице addnote.php гиперссылку, указывающую на
главную страницу, чтобы мы могли вернуться на нее, если раздумаем добавлять новую заметку.
После этого можно проверить созданную нами страницу в действии, добавив пару
новых заметок. Наш блог постепенно пополняется…
Разбор сценариев PHP, добавляющих запись
Что ж, настала пора переключиться в режим отображения кода HTML и посмотреть
на созданный Dreamweaver PHP-код. Он довольно объемный.
Сначала давайте найдем такой фрагмент кода PHP в большом сценарии, находящемся перед кодом HTML и соответствующем модели серверного поведения Insert Record:
$editFormAction = $_SERVER['PHP_SELF'];
if (isset($_SERVER['QUERY_STRING'])) {
$editFormAction .= "?" . htmlentities($_SERVER['QUERY_STRING']);
}
Сначала переменной $editFormAction присваивается имя файла серверной Webстраницы, которая обрабатывается в данный момент, то есть страницы addnote.php.
Это имя получается уже знакомым нам образом — извлекается из элемента с индексом "PHP_SELF" встроенного массива $_SERVER.
Далее проверяется, были ли этой странице переданы какие-то аргументы GET (они в
виде "сырой", необработанной строки находятся в элементе с индексом
"QUERY_STRING" все того же встроенного массива $_SERVER). Если они были переданы (данный элемент массива существует), они добавляются к имени страницы,
хранящейся в переменной $editFormAction, после преобразования символов, которое выполняет встроенная функция htmlentities.
Теперь обратимся к HTML-коду, создающему форму:
<FORM ACTION="<?php echo $editFormAction; ?>" METHOD="POST"
ªNAME="addnote" ID="addnote">
<P>Заголовок:
<INPUT NAME="title" TYPE="text" ID="title" SIZE="60" MAXLENGTH="60">
</P>
<P>Содержимое:
<TEXTAREA NAME="content" COLS="55" ROWS="10" WRAP="VIRTUAL"
ªID="content"></TEXTAREA>
<INPUT NAME="added" TYPE="hidden" ID="added"
ªVALUE="<?php echo date("Y-m-d"); ?>">
</P>
<P>
<INPUT NAME="submit" TYPE="submit" ID="submit" VALUE="Добавить">
</P>
<INPUT TYPE="hidden" NAME="MM_insert" VALUE="addnote">
</FORM>
Для формирования поля ввода и кнопки отправки используется уже знакомый нам
тег <INPUT> с соответствующим значением атрибута TYPE — "text" или "submit". А
для формирования области редактирования применяется уже другой тег —
<TEXTAREA>, причем парный. Содержимое области редактирования помещается
внутрь этого тега.
Остальное, в принципе, нам знакомо. Видно, что Dreamweaver сам задал метод передачи данных (POST) и серверную страницу, которая примет эти данные (значение
переменной $editFormAction). Обратим внимание, что при этом будет выполнена
передача данных как методом GET (данные, полученные ранее из элемента
"QUERY_STRING" встроенного массива $_SERVER и добавленные к имени файла
текущей страницы, — все это хранится в переменной $editFormAction), так и методом POST (данные, введенные в форму addnote). Это, как говорилось выше, допустимо и, как видим, используется на практике.
Теперь посмотрим на код, создающий скрытое поле added. Вот он:
<INPUT NAME="added" TYPE="hidden" ID="added"
ªVALUE="<?php echo date("Y-m-d"); ?>">
Атрибут TYPE тега <INPUT> в случае скрытого поля должен содержать значение
"hidden". А атрибут VALUE, задающий значение элемента управления (введенный в
поле текст или содержимое скрытого поля, как в нашем случае), содержит введенный
нами ранее сценарий PHP.
А вот код, создающий служебное скрытое поле:
<INPUT TYPE="hidden" NAME="MM_insert" VALUE="addnote">
Имя этого скрытого поля (значение атрибута NAME) установлено в "MM_insert", а его
значение (значение атрибута VALUE) — в "addnote".
Пока оставим служебное скрытое поле в покое и вернемся к тегу <FORM>, задающему
нашу форму. Посмотрим на значение атрибута ACTION. Если переменная содержит
имя данной Web-страницы, то, выходит, данные будут отправлены этой же самой
странице — addnote.php. И выходит, что именно она должна их обработать.
Таков подход Dreamweaver — данные обрабатывает та же самая Web-страница, на
которой они вводятся. Модель серверного поведения Insert Record содержит сценарий, который проверяет наличие в данных, переданных ей методом POST, аргумента
MM_insert со значением "addnote" — содержимого того самого служебного скрытого поля! Если аргумент MM_insert отсутствует, то выводится форма для ввода данных, а если присутствует, значит, данные уже были введены, и их нужно обработать.
То есть страница addnote.php, созданная Dreamweaver, работает так:
1.
При первом открытии, поскольку странице вообще не были переданы никакие
данные методом POST, будет выведена форма.
2.
После ввода данных в форму посетитель нажимает кнопку Добавить, и данные
передаются методом POST этой же странице.
3.
Страница открывается во второй раз. Сценарий PHP снова проверяет, были ли ей
переданы данные методом POST, и, поскольку они были переданы, обрабатывает
их. Форма в этом случае не выводится, а выполняется переход на главную страницу default.php.
А теперь давайте подробно, строка за строкой, разберем сценарий обработки данных,
для чего вернемся в начало страницы.
if ((isset($_POST["MM_insert"])) && ($_POST["MM_insert"] == "addnote")) {
Здесь выполняется проверка наличия во встроенном массиве $_POST элемента с индексом "MM_insert". Данный массив содержит все данные, переданные странице методом POST, в раскодированном виде; он имеет ту же организацию, что и уже знакомый нам массив $_GET. Если таковой элемент в массиве есть (то есть странице был
передан аргумент POST с именем MM_insert), проверяется, равно ли его значение
"addnote", и, если равно, выполняется весь последующий блок.
$insertSQL = sprintf("INSERT INTO notes (added, title, content)
ªVALUES (%s, %s, %s)", GetSQLValueString($_POST['added'], "date"),
ªGetSQLValueString($_POST['title'], "text"),
ªGetSQLValueString($_POST['content'], "text"));
Переменная $insertSQL получает значение — запрос SQL добавления записи. Для
его создания, опять же, используется встроенная функция sprintf(). А для подстановки в запрос SQL реальных значений, которые будут помещены в поля добавляемой записи, используется знакомая нам по главе 9 функция GetSQLValueString().
mysql_select_db($database_site, $site);
$Result1 = mysql_query($insertSQL, $site) or die(mysql_error());
Эти два уже знакомых нам выражения осуществляют подключение к базе данных
site и выполняют созданный ранее и помещенный в переменную $insertSQL запрос SQL. Результат выполнения запроса помещается в переменную $Result1 и
больше нигде не используется. (В таком случае непонятно, зачем его нужно где-то
хранить…)
$insertGoTo = "default.php";
А это выражение помещает в переменную $insertGoTo имя Web-страницы, на которую будет выполнен переход после добавления записи. Это главная страница нашего сайта.
if (isset($_SERVER['QUERY_STRING'])) {
А здесь выполняется проверка, были ли переданы странице addnotes.php какие-то
аргументы GET. Если же они были переданы, то выполняются два выражения, приведенные далее.
$insertGoTo .= (strpos($insertGoTo, '?')) ? "&" : "?";
Встроенная функция strpos() возвращает номер позиции символа, переданного
вторым параметром, в строке, переданной первым параметром. Если же этот символ
в строке не встретился, возвращается 0. В приведенном выше выражении с ее помощью проверяется, присутствует ли в значении переменной $insertGoTo символ вопросительного знака (?). Если он присутствует, то к значению этой переменной добавляется символ &, в противном случае — ?.
$insertGoTo .= $_SERVER['QUERY_STRING'];
}
А это выражение добавляет к значению переменной $insertGoTo закодированные
данные, переданные странице addnote.php методом GET.
header(sprintf("Location: %s", $insertGoTo));
}
Последнее выражение собственно выполняет переход на страницу, чье имя (со всеми
передаваемыми методом GET аргументами) находится в переменной $insertGoTo.
Для этого используется следующий синтаксис:
header("Location: <интернет-адрес Web-страницы>");
Встретив встроенную функцию header(), интерпретатор PHP через Web-сервер посылает Web-обозревателю особый серверный ответ, содержащий команду перехода
на другую страницу (выполняет перенаправление). Когда Web-обозреватель ее получит, он отправит Web-серверу запрос на Web-страницу, чье имя было указано в команде (в нашем случае — это страница default.php).
Кроме того, странице default.php при этом будут "отфутболены" все аргументы GET,
принятые страницей addnote.php. Этой исключительно полезной возможностью, которую предусмотрел для нас предупредительный Dreamweaver, мы потом обязательно воспользуемся.