Ваш первый Сайт С использованием РНР-скриптов

ИСПОЛЬЗОВАНИЕ ФОРМ И ОТПРАВКА ДАННЫХ НА СЕРВЕР

Для любого хорошего проекта, страница новостей сайта просто необхо­дима. Она показывает, чем «живет» и «дышит» ваш сайт, что нового в нем появилось. Вместо новостей можно просто писать свои какие-нибудь рассу­ждения или просто мысли вслух, ваши впечатления о чем-нибудь. Или про­сто - услышали свежий анекдот, да и выложили его на сайт. Наверняка это будет интересно для посетителей сайта, а сам сайт станет «живым», если, ко­нечно, хотя бы раз в неделю вы будете что-то записывать. Если посетителям будет интересно читать, что вы написали, то наверняка они захотят посещать ваш сайт вновь и вновь. Поддерживать страничку новостей очень просто. У вас будет текстовый файл, куда вы и будете записывать новости сайта или что-либо другое. Ваши записи с помощью программы на php будут выведены в браузер в удобно читаемом виде. Программа автоматически отсортирует новости (более свежие будут наверху) и поставит дату написания той или иной записи. Для заполнения текстового файла с новостями сделаем удобный для этого дела интерфейс в виде формы, но это чуть позже, а пока продол­жим изучение языка php, а именно того, что нам понадобится для создания странички с новостями.

Очень часто на web-страницах сайтов используют элементы формы: рас­крывающиеся списки, кнопки, поля ввода данных и т. п. Это позволяет посе­тителям вводить, например, свои данные, посылать сообщения и т. д. Все это должно быть принято и обработано какой-нибудь рЬр-программой. Напри­мер, на форуме вы в текстовом поле создаете сообщение и отсылаете его при помощи нажатия кнопки формы. Спустя короткое время ваше сообщение появится на форуме сайта. Но для того чтобы это сообщение появилось, нужна php-nporpaMMa, которая запишет ваше сообщение в какой-нибудь тек­стовый файл на сервере, сохранит его и выведет в окно браузера. Как рабо­тать с текстовыми файлами, мы уже разобрали в прошлой главе. В этой главе мы научимся создавать формы, отправлять данные на сервер и обрабатывать полученную информацию.

Форма на web-странице задается при помощи парного HTML-тега <form> ...</form>. Все, что находится между этими тегами, и составляет фор­му. Тег <form> имеет свои атрибуты:

• action - указывает на URL-адрес программы, которая и обрабатывает пе­реданные данные из формы. В нашем случае это будет PHP-файл, где со-

Держится код для обработки переданных данных. Вместо URL можно указать электронный адрес, например:

Action="Mailto:Name@Name.Ru" - в этом случае данные будут направлены по электронной почте по указанному адресу;

• method - метод передачи данных на сервер. Имеет 2 значения get и post: get - устанавливается по умолчанию и означает, что передаваемые из формы данные присоединяются к URL-адресу через разделитель в ви­де символа знака вопроса «?». Чтобы было понятнее, чуть позже я приве­ду пример. Этот метод используют для передачи небольших объемов данных;

Post - этим методом можно передавать большие объемы информации, а также сообщения для электронной почты. Данные будут находиться в теле запроса и не выводиться в адресную строку с иЯЬтадресом. Это повышает безопасность передачи данных;

• enctype - метод кодирования передаваемых на сервер данных: Text/plain - используется для передачи данных по электронной почте; Multipart/form-data - используется для передачи файлов на сервер со сво­его компьютера. Посетители могут, например, передавать на ваш сайт картинки или фотографии, если, конечно, вы им это позволите; Application/x-www-form-urlencoded - используется в остальных случаях. Это значение используется по умолчанию и его можно не указывать;

• паше - имя формы.

Общий вид тега формы может быть таким:

<form action=novosti.php methdd=get> - при отправке данных запустится программа обработки этих данных в файле novosti.php. Данные передадутся методом get.

После тега <form> с включенными в него атрибутами, могут следовать элементы пользовательского интерфейса. Такие элементы, как кнопки, поля ввода данных, переключатели, создаются при помощи тега <input>. Атрибу­том type задается тип элемента. Тип элемента может быть text (текстовое по­ле), checkbox (флажок), radio (радиокнопка), password (текстовое поле для ввода пароля), frie (поле для выбора файла на вашем компьютере), submit (кнопка для отправки данных), reset (кнопка для отмены введенных данных), Image (тоже кнопка для отправки данных, но в графическом виде).

Давайте рассмотрим и разберем эти и другие элементы пользовательско­го интерфейса.

В РНР-редакторе создайте новый файл. Сохраните его в нашей рабочей папке htdocs под названием forma.php. Для начала разберитесь в листинге 5.1. После листинга я подробно разъяснил почти каждую строчку. Только после этого наберите код листинга 5.1 самостоятельно.

Листинг 5.1 (файл Forma. php) <Html> <Head>

<title>Uiititled web-page</title> </head>

<body bgcolor="#COCOCO"> //задаем цвет фона данной web-страницы. <form action=novosti.php method=get>

<input type=text value='Mofi Электронный адрес' size=25 name=adresxbrxbr> <input type=checkbox Уа1ие='Выбрать' checked name=fleg><brxbr> <input type=radio value='Выбрать' checked Name=radioknopkaxbrxbr> <input type=password name=parolxbr><br>

<textarea name=novosti cols=50 rows=15 wrap=virtualx/textareaxbrxbr> <input type=flle name=fllenamexbrxbr> <Ь>Выберите нужное количество экземпляров</ЬхЬг> <select name=knigi>

<option Уа1ие=1>один экземпляр</ор^оп> <option Уа1ие=2>два экземпляра</ор! юп> <option Уа! ие=3>три экземпляра</орНоп> <option Уа! ие=4>четыре экземпляра</ориоп> <option Уа! ие=5>пять экземпляров</ор^оп> <option value=0 se!ected>He Заказывать</орНоп> </selectxbrxbr>

<fieldset>

<Ь>Выберите нужную книгу</ЬхЬг>

<input type=radio Уа! ие='Сборник стихов А. Ахматовой' пагпе=Ьоок8>Сборник стихов А. Ахматовой<Ьг>

<input type=radio value-Сборник стихов С. Есенина' checked name=books>C6opHHK Стихов С. Есенина<Ьг>

<input type=radio value='Собачье сердце М. Булгакова' name=books>"Собачье сердце" М. Булгакова<Ьг>

<input type=radio value-Аэлита А. Толстого' name=books>"Аэлита" А. Толстого </fiel dsetxb rxb r>

<input type=submit Уа1ие='Отправить'> <input type=reset Уа1ие='Отменить'> <input type=image src=pic2.bmp> </form>

<?php

?>

</body> </html>

Запустив файл с этой программой в браузере, вы увидите множество эле­ментов формы (рис. 5.1).

Ш Syoi. NET : РНР Edit - [C:Home_serverApache2htdocsMyBookf

У Файл Редактор Вид Пуск Подсветка Закладки Вставка Помощь s Язык Плагины

Ьн Я I* *> <ж Л ц"< / / / ! V - £3 * Gk. & S-'i {*} !

^^ Address |h(lp/VIocalhost/MyBook/forma php

:|Мой электронный адрес

Plllllill

Выб^рите мужное кол

|не заказывать »j

" Сборник стихов А Ахматовой

Сборник стихов С Есенина г "Собачье сердце" М Булгакова ^ "Аэлита" А Толстого

Отправить

Рис. 5.1

Разберем теперь этот код, посматривая на рис. 5.1: <form action=novosti.php method=get> - при отправке данных запустится программа обработки этих данных в файле novosti.php (этот файл мы запол­ним кодом потом). Данные передадутся методом get. Пока просто создайте в PHP-редакторе новый пустой файл и сохраните его в рабочей папке hdocs Под названием novosti.php;

<input type=text value='Mou Электронный адрес' size=25 name =adres><hr> <br> - создает при помощи атрибута type текстовое поле для ввода данных, длиной в 25 символов. Это первый элемент, который вы увидите в браузере слева вверху. В поле уже содержится надпись, заданная атрибутом value.

Этому элементу присвоено имя, заданное атрибутом пате. Значения атрибу­тов type, Пате указаны без кавычек, поскольку используется только одно анг­лийское слово. В атрибуте value используется русский текст, поэтому его обязательно заключаем в кавычки, даже если там было бы всего одно слово. После каждого элемента интерфейса, чтобы они не сливались и были хорошо видны, я пропускаю одну или две строки, при помощи оператора <br>;

<input type=checkbox checked name=fleg><br><br> - создает флажок в виде маленького квадратика. Атрибут checked указывает, что данный флажок по­мечен галочкой;

<input type=radio checked name=radioknopka><br> <Br> - создает радио­кнопку, в виде меленького кружочка. Атрибут checked указывает, что данная кнопка отмечена;

<input type=password name=parol><br><br> - создает текстовое поле для пароля. Буквы, вводимые в этом поле, будут отображаться в виде точек;

<textarea name^novosti cols=50 rows-15 wrap=virtual></textarea><br><br> - Создает большое текстовое поле или текстовую область для ввода посетите­лем какой-либо текстовой информации. Атрибут cols задает ширину этого поля, а именно, количество символов в каждой строке. Атрибут rows, соот­ветственно, задает высоту поля или количество строк. Если количество строк превышает число, заданное параметром rows, то справа ог текстового поля появится полоса прокрутки. Атрибут wrap включает автоматический перенос слов на другую строку;

<input type=file name=filename><br><br> - создает элемент в виде неболь­шого текстового поля и кнопки, позволяющий вам выбрать какой-либо файл на вашем компьютере для отправки и отобразить его название (вернее, путь к нему) в этом текстовом поле.

Далее для примера мы создаем раскрывающийся список. Этот список создается тегом <select>. Элементы списка создаются тегами <option>. Пусть это будет список количества экземпляров выбранных книг. Сами кни­ги будут выбираться чуть ниже (в блоке <fieldset>):

<b>Выберите нужное количество экземпляров</Ь><br> - задаем текст над раскрывающимся списком, хотя в нашем случае это необязательно;

<select name=knigi> - создаем раскрывающийся список с именем knigi. Для этого тега существуют дополнительные атрибуты. Например, атрибут align Задает выравнивание данного элемента по горизонтали (Align=center - помес­тит раскрывающийся список по середине). Атрибут multiple дает возмож­ность выбрать из списка несколько элементов. Атрибут size задает количест­во одновременно видимых элементов списка. По умолчанию, size=l.

Далее следуют 6 элементов списка, которые, как я уже отметил, задаются тегом <option>. Атрибут тега value задает ассоциированное значение для ка­ждого элемента списка. Зачем это нужно, поймете чуть позже. Между тегами <option> и </option> надпись, которая будет в списке для каждого элемента: <option value= 1>один экземпляр</орйоп> <option value=2>dea Экземпляра</option>

< Opt ion value=3>mpu экземпляра</орПоп> <option value=4>четыре экземпляра</орГюп> <option value—5>пять зкземпляров</орИоп>

<option value=0 selectea>ne заказывать</орйоп> — атрибут selected означа­ет, что no умолчанию будет выбран именно этот элемент списка; </select><br><br> - завершаем список и ставим два тега перевода строки.

Далее следует блок элементов из радиокнопок с одинаковыми именами Books. Эти кнопки с одинаковыми именами образуют группу или массив. Особенностью этой группы является то, что выбрать можно только одну кнопку (в нашем случае только одну книгу). Атрибут тега value задает ассо­циированное значение для каждой радиокнопки. Поскольку значению value Мы присваиваем целое русское предложение, мы обязательно должны заклю­чить его в кавычки. Тег <fieldset> создает выделенную рамку вокруг радио­кнопок для оформления: <fields et>

<b>Выберите нужную книгу</Ь><Ьг>

<input type=radio value=' Сборник стихов А. Ахматовой' name=books> Сборник стихов А. Ахматовой<Ьг> - первый элемент блока радиокнопок;

<input type=radio value-= ' Сборник стихов С. Есенина' checked name=books> Сборник стихов С. Есекина<Ьг> - второй элемент блока радиокнопок. Атри­бут checked Указывает на то, что выбран именно этот элемент;

<input type=radio value='Собачье сердце М. Булгакова' name=books> "Со­бачье сердце" М. Булгакова<Ьг> - третий элемент блока радиокнопок;

< Input type=radio value-Аэлита А. Толстого' name=books>"Аэлита"А. Тол- стого> - и, наконец, четвертый элемент блока радиокнопок;

</fieldset><br><br> - закрывающийся тег </fieldset> указывает нижнюю границу рамки. Если вь: забудете поставить этот тег, то в выделенную рамку войдут все остальные элементы, расположенные ниже;

<input type=submit value='Omnpaeumb'> - создает один из главных элементов формы, а именно кнопку для отправки данных на сервер, т. е. тех данных, ко­торыми вы заполнили текстовые поля формы. Надпись на кнопке, как вы уже знаете, задается атрибутом value;

<input type=reset Уа}ие^'Отменить'> - создает кнопку для отмены или уда­ления того, что вы написали в текстовых полях;

<input type=image src=pic2.bmp> - тоже создает кнопку для отправки дан­ных, но в виде рисунка. Путь к рисунку указан в атрибуте src. Если графиче­ский файл расположен в отдельной папке, например image, то в этом случае нужно написать так: src=zimage/pic2.bmp. При щелчке мыши на этом рисунке осуществляется отправка данных;

</form> - тег «закрытия» формы.

< ?php

После формы здесь может быть расположен PHP-код. Пока у нас тут ни­чего нет.

?>

Запустите вновь в браузере эту программу и заполните текстовые поля, например так, как указано внизу на рис. 5.2. В текстовом окне для ввода па­роля (изображение в виде точек) я ввел 4 буквы на английском lolo. При по­мощи кнопки «Обзор» выбрал файл для отправки.

Нажмите на кнопку «Отправить». Мы перейдем с вами на страницу по - vosti. php, которая пока пуста. Если вы еще не создали эту страницу в нашей рабочей папке htdocs, то создайте ее и сохраните. Именно этот файл указан в теге <form>, Куда мы должны перейти после нажатия кнопки «Отпра­вить». После перехода на страницу novosti. php, обратите внимание на адрес­ную строку браузера вверху. У меня, например, она имеет вид: Http://localhost/MyBook/novosti. php? adres=stroganov921@yandex. ru&fleg=on& radioknopka=on&parol=lolo&novosti=%C4%C5%CB%C0+%C8%C4%D3%D2 +%CD%CE%D0%CC%C0%CB%DC%CD%CE.+%C8%C7%D3%D7%C0%DE +РНР. &filename=C%3A %5CHome_server%5CApache2%5Chtdocs%5CMyBook %5Cforma. php&knigi=2&books=Bulgakov.

Как вы видите, после названия страницы, куда мы переходим, следуют переданные на эту страницу данные. Сначала передается содержание первого текстового поля, куда я ввел электронный адрес. Далее у нас следует элемент флажковый переключатель checkbox (см. листинг 5.1), которому мы присвои­ли имя fleg. Это имя и будет ассоциироваться с данным элементом. Посколь­ку этот флажок у нас отмечен, то fleg будет иметь значение on. Далее идет элемент с именем radioknopka. Этот элемент у нас тоже отмечен, поэтому га - dioknopka=on. Затем, если вы помните, следует текстовое поле для ввода па­роля с именем parol. В адресной строке браузера пароль становится види­мым. Это нежелательно, поскольку ваш пароль или другие конфиденциаль­ные данные могут быть перехвачены недоброжелателем. Чтобы этого не произошло, при использовании в форме паролей и другой секретной ин­формации метод передачи данных на сервер (он указывается в теге <form>) Должен быть не GET, a POST. В данном же случае, мы просто обучаемся, по­этому можно использовать метод GET.

RApache2titdocsMyBookfoi

Файл Редактор Вид "lvcr Лод:ветка Закладки Встаека Помощь

.1 ЙНЯ J* Л <ж ь ; Г; у - j? > U

^jb Address I htlp.'/'Iccalhost/MyBook/'Mima. php

J str о g e n ov 9 21 @yan d ex. - u Ш11Ж1Ш1

После передается содержимое большого текстового поля с именем по - vosti. Русские буквы передаются в зашифрованном виде. В текстовом поле с именем filename у нас находится путь к файлу, который вы выбрали. Я вы­брал файл с нашей формой forma.php. Далее идет раскрывающийся список именем knigi. Передаваемое значение knigi=2 говорит о том, что выбран эле­мент списка со значением value=2. И, наконец, после следует массив радио­кнопок с общим именем books. Если вы посмотрите в листинг 5.1, то увидите, что название книг Булгакова «Собачье сердце», которую я выбрал в форме, стоит рядом с радиокнопкой со значением value=Bulgakov. Именно это зна­чение и передается на страницу novosti.php. Если вы выбрали другую книгу, то, соответственно, передастся другое значение. Все, адресную строчку в браузере мы разобрали.

Все данные, которые мы ввели в форме и передали методом GET, будут храниться в суперглобальном массиве $_GET (если данные передавались бы методом POST, то они были бы сохранены в суперглобальном массиве SPOST). Например, данные элемента формы с именем books (этим именем мы назвали массив радиокнопок для выбора книги) будут хранягься в элементе суперглобального массива $_GET['books'], т. е. у нас $_GET['books'] =Bulgakov.

Давайте, наконец, в файле novosti.php введем код с использованием эле­ментов суперглобального массива (листинг 5.2).

Листинг 5.2 (файл novostuphp) <?php

$adres=$_GET[,adres']; $knigi=$_GET [ 'knigi' ]; $books=$_GET[,books']; $novosti=$_GET [' novosti'J;

Echo "<Ь>Уважаемый клиент! Вы нам прислали письмо с текстом :<br>$novosti<br>

Вы выбрали $knigi Экземпляра книги:<Ьг>$Ьоок$<Ьг> Условия оплаты данного заказа мы вышлем вам

По указанному ва№и электронному адресу:<br>$adres</b>";

?>

Вначале мы присваиваем неким переменным значения элементов супер­глобального массива: $имя переменной=$_GET['имя элемента формы']. Имя переменной может и не совпадать с именем элемента формы. Здесь я это сде­лал для удобства. После присваивания в переменной $adres, например, будет находиться содержимое текстового поля с именем adres, которое мы запол­няли в форме, а именно: $adres=Stroganov92L@Yandex.Ru. В переменной Sknigi будет находиться значение value выбранного элемента раскрывающе­гося списка, которому было присвоено имя knigi. В нашем случае это количе­ство заказанных экземпляров. Переменной Sbooks будет присвоено значение Value выбранной радиокнопки (выбранной книги). Ну и в переменной $по - vosti будет находиться содержимое большого текстового поля с именем no­vosti.

После оператора echo в двойных кавычках мы выводим текст, для удоб­ства чтения разбивая его построчно при помощи оператора <br>. В текст вставлены наши переменные, которым выше были присвоены значения.

Снова запустите наш файл с формой и заполните эту форму, хотя бы как на рис. 5.2. В большом текстовом поле можете написать «Желаю заказать у вас книгу».

Когда заполните, нажмите кнопку «Отправить» или графическую кноп­ку с рис. 5.2. Запустится созданный нами код в файле novosti.php. В браузер

Выведется результат работы кода листинга 5.2 (рис. 5.3).

■ |

|! Уважаемый клиент! Вы нам прислал! письмо с текстом: 11 Желаю заказать у Bat книгу! I Вы выбрали 2 экземпляра книги: 11 Собачье сердце М. Булгакова

|! Условия оплаты данного заказа мы вышлем вам по указанному вами электронному адресу: I I S ti o ganov9 2 L@vaiulex. iTi

I!

У______________________________________________________________________

Puc. 5.3

Иногда возникает ситуация, когда на другую страницу (на ту, куда мы перейдем после нажатия кнопки формы) нужно передать какую-нибудь пе­ременную. Это можно сделать при помощи скрытого элемента формы, кото­рый задается параметром type и имеет значение hidden. Например:

<input type=hidden name=parol value=$parol> - в данном случае, на страни­цу, которую мы указали в теге <form>, передастся переменная Sparol. Она будет находиться в элементе суперглобального массива $_GET['parol']. Если вы назовете это скрытое поле по-другому, например патенту text, то пере­данная переменная $parol будет находиться в $_GET['mytext'].

Передавать какие-либо переменные на какую-либо страницу можно и без использования формы. Для этого достаточно добавить к URL-адресу страни­цы имя переменной и его значение. Чтобы, например, переменная Sknigi В листинге 5.2 файла novosti.php была определена, достаточно в адресной строке браузера после названия файла, добавить: ?knigi=2, т. е. мы получим: Novosti.php?knigi=2. Перед именем переменной символ $ не указывается. Ес­ли передаваемых переменных несколько, то они отделяются друг от друга символом &. По умолчанию информация, добавляемая к URL-адресу, пере­дается методом GET, т. е. значения передаваемых переменных будут хра - няться в элементах суперглобального массива $_GET. Данный способ ис­пользуется также для передачи на одну и ту же страницу разной информации, в зависимости от передаваемого параметра. Наберите в PHP-редакторе следующий код:

<?

$i=$_GET['i];

If ($i==2) {

Echo "Переменная равна devM "; }

Else if($i-=3) {

Echo "Переменная равна трем "; }

Else {

Echo "Переменная неопределена или не равна двум или трем "; }

?>

Сохраните этот файл где-нибудь в папке htdocs под названием, например Peremen.php. Запустите программу. Вы увидите в браузере надпись «Пере­менная неопределена или не равна двум или трем». Теперь в адресной строке браузера добавьте к строке параметр: ?i=2 и нажмите рядом на стрелочку, указывающую направо «перейти» (или вручную наберите в браузере: Http.V/Localhost/ peremen.php?i=2). Вы попадете на эту же страницу pere­men.php, но с переданным параметром: ?i=2. В результате в браузере вы уви­дите надпись «Переменная равна двум». Аналогично, если вы к строке допи­шете: ?i=3, то в браузере увидите надпись «Переменная равна трем». Как видите, у нас 3 PHP-страницы объединены как бы в одну. Меняется только параметр i. Этот способ мы будем с вами использовать при выводе на стра­ницу новостей сайта в этой главе, а также большого числа графических объ­ектов в гл. 8.

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