Учебное пособие: Этапы создания веб-приложения. Основы РНР и MySQL
Учебное пособие: Этапы создания веб-приложения. Основы РНР и MySQL
Этапы создания веб-приложения. Основы РНР и MySQL
Лекция
План
ВВЕДЕНИЕ
1. Что такое веб-программирование. Основные технологии
1.1. Клиент-Сервер
1.2. HTML-формы. Методы отправки данных на сервер с помощью формы
1.3. Технология CGI
2. PHP: Препроцессор Гипертекста
2.1. Что такое PHP?
2.2. Возможности PHP
2.3. Почему нужно выбирать PHP
2.4. Недостатки PHP
2.5. Встраивание PHP в HTML - форму
2.6. HTML-формы. Массивы $_GET и $_POST
2.6.1. Особенности метода отправки формы POST
2.6.2. Особенности метода отправки формы GET
2.7. Функция htmlspecialchars()
2.8. Применение функции phpinfo() для отладки
3. Что такое MySQL
3.1. Возможности MySQL.
3.2. Примеры использования PHP совместно с MySQL
3.2.1. Работа с формами
3.2.2. Сохранение данных в базе данных MySQL
3.2.3. Получение (извлечение) данных из базы данных MySQL
Основные технологии веб-программирования. Методы отправки данных на сервер с помощью HTML-формы. PHP - Препроцессор Гипертекста. Сохранение данных в базе данных MySQL. Клиент-Сервер и технология CGI. Примеры использования PHP совместно с MySQL.
Рассмотрим основные этапы создания web-приложения на языке PHP.
Предполагается, что Вы знаете основы языка разметки HTML и имеете небольшой опыт программирования.
Прежде, чем приступать к созданию web-приложения, нужно выяснить, что понимают под web - программированием.
1. Что такое веб-программирование. Основные технологии
1.1. Клиент-Сервер
Когда Вы программировали, например, на Delphi, Visual Basic, или Visual C++, то привыкли к такой схеме работы программы: нажимаете кнопку на клавиатуре ► выполняется код ► выводится результат. Все это выполняется на одном компьютере.
В web -программировании все обстоит по-другому.
Когда Вы вводите в адресной строке браузера URL (Universal Resource Location, или в просторечии - адрес) происходит следующее:
● Браузер открывает соединение с сервером.
● Браузер отправляет серверу запрос на получение страницы.
● Сервер формирует ответ (чаще всего - HTML-код) браузеру и закрывает соединение.
● Браузер обрабатывает HTML-код и отображает web -страницу, которую Вы видите на экране монитора.
Еще до того, как Вы увидели на экране запрошенную страницу, соединение с сервером закрыто, и он о Вас забыл. И когда Вы введете другой (или тот же самый) адрес, или щелкните по ссылке, или нажмете на кнопку HTML-формы - та же схема повторится снова.
Такую схему работы называют "клиент-сервер". Клиент в данном случае - браузер.
Соединение с web -сервером длится промежуток времени между щелчком по ссылке (или другим способом запроса) и началом отображения web -страницы. Большинство браузеров во время соединения отображают индикатор, например, индикатор MS Internet Explorer отображает анимацию в правом верхнем углу.
Внимательный студент может заметить - а как же так, я уже читаю страницу, а индикатор все еще показывает процесс соединения? Дело в том, что тэг <img src=...> (загрузка изображения) и некоторые другие теги HTML – кода - это еще один запрос к серверу. Выполняется он точно так же, как и любой другой запрос - по той же схеме.
Чтобы навсегда избавиться от восприятия HTTP как "черного ящика", "притворимся" браузером с помощью telnet'а:
1. Запустим telnet www.php5.ru 80
2. Введем в окне терминала следующее (если ввод не отображается - ничего страшного):
GET / HTTP/1.0 [здесь нажмем Enter]
Host: www.php5.ru [здесь нажмем Enter дважды]
Нажатие Enter соответствует, как правило, комбинации символов CR + LF, обозначаемых как \r\n. Далее будет использоваться именно это обозначение.
По экрану монитора пробежит HTML-код страницы http://www.php5.ru/.
HTML-код текущей страницы можно просмотреть практически в любом браузере, выбрав в меню "Вид|Просмотр HTML-кода":
Картинки, фреймы - это дополнительные запросы: при обработке (парсинге) HTML-кода, браузер, натыкаясь на тэг <img src="картинка"> осуществляет дополнительный запрос к серверу - запрос картинки, и отображает ее на месте, где стоит тэг <img...>.
Введите:
telnet www.php5.ru 80
GET /php/php5ru.png HTTP/1.0\r\n
Host: www.php5.ru\r\n\r\n
По экрану пробежит то, что бы вы увидели, если б просмотрели этот png-файл в текстовом редакторе.
1.2. HTML-формы. Методы отправки данных на сервер с помощью формы
Одно из наиболее распространенных приложений любого языка создания серверных сценариев – обработка HTML - форм. Web-программирование в большей части представляет собой обработку различных данных, введенных пользователем.
РНР облегчает задачу обработки и разбора форм, поступивших из браузера, так как в язык на самом нижнем уровне встроены все необходимые возможности. Поэтому программисту не приходится даже и задумываться над особенностями протокола HTTP и размышлять, как же происходит отправка и прием роsт-форм или даже загрузка файлов.
С HTML-формами Вы уже встречались при изучении языка разметки HTML.
Рассмотрим пример посылки сообщения из формы по электронной почте.
Листинг e_mail.html. Посылка сообщения из формы по e-mail
<html>
<head>
<title>Посылка формы по е-mail</title>
</head>
<body>
<FORM action=mailto: myaddres@mail.ru enctype=”text/plain method=”post”>
Нажмите “Cброс” и заполните заказ.<BR>
<INPUT type=reset value=C6poc><BR>
<P>
<TABLE border=0 cellspacing=O cellpadding=5>
<TR>
<TD>Ваше имя:</TD >
<TD>
<INPUT type=text size=33 name=name value=”Прохоров Виктор Сергеевич”>
</TD>
</TR>
<TR>
<TD>Ваш адрес:</TD>
<TD>
<INPUT type=text size=33 name=email value=prohwik@mail.ru >
</TD>
</TR>
<TR>
<TD>Прислать:</TD>
<TD>
<INPUT type=text size=33 name=obj value=”Методические указания”>
</TD>
</TR>
</TABLE>
<INPUT type=submit value=”Послать заказ”>
</FORM>
</body>
</html>
Если обработать этот HTML-код браузером, то отобразится web -страница, которую можно увидеть на экране монитора:
Пользователь нажимает кнопку «Сброс», и поля принимают значения, установленные по умолчанию. Форма заполняется пользователем, и по нажатию кнопки «Послать заказ» отправляется по адресу myaddres@mail.ru. Обычно браузер не сам отсылает форму, а поручает эту работу почтовой программе, установленной по умолчанию в операционной системе компьютера (например, Outlook). Письмо посылается в виде:
subjct: Форма отправлена из Microsoft Internet Explorer
name = Прохоров Виктор Сергеевич
value=prohwik@mail.ru
obj = «Методические указания»
Письмо составляется из пар имя=значение, которые выбираются по порядку из полей формы.
Рассмотрим подробнее следующий пример.
Листинг form_1.html
<form method="GET" action="/cgi-bin/form_handler.cgi">
Введите Ваше имя: <input type="text" name="name">
<br>
<input type="submit" name="okbutton" value="OK">
</form>
Сохранив этот код в HTML-файле form_1.html и просмотрев его с помощью браузера, можно увидеть HTML-форму:
Форма реализована тегом-контейнером <form>. Тег своими атрибутами указывает:
● адрес сценария, которому будет послана форма;
● способ пересылки и характеристику данных, содержащихся в форме. Начальный <form> и конечный </form> теги задают границы формы. Их указание является обязательным.
Атрибуты тега-контейнера <form> (все необязательные):
● action атрибут, в качестве значения которого указывают URL-адрес (полный или относительный) запрашиваемой CGI-программы. Эта программа будет обрабатывать данные, содержащиеся в форме. Допустимо использовать запись MAILTO:URL. В этом случае форма будет послана по электронной почте. Если атрибут action не указать, то содержимое формы будет отправлено на URL-адрес, с которого загружена данная web-страница, то есть "саму на себя". Это удобное сокращение, но по стандарту HTML атрибут action обязателен.
● method — определяет метод HTTP, используемый для пересылки данных формы от браузера к серверу. Атрибут method может принимать два значения: get или post:
♦ get - отправка данных формы в адресной строке. Вы могли заметить на различных сайтах присутствие в конце URL символа "?" и следующих за ним данных в формате параметр=значение. Здесь "параметр" соответствует значению атрибута name элементов формы (см. ниже про тэг <input>), а "значение" - содержимому атрибута value (в нем, например, содержится ввод пользователя в текстовое поле того же тэга <input>).
Для примера - попробуйте поискать что-нибудь в Яндексе и обратите внимание на адресную строку браузера. Это и есть способ get.
♦ post - данные формы отправляются в теле запроса. Если не совсем понятно (или совсем непонятно), что это такое - не беспокойтесь, скоро мы к этому вопросу вернемся.
Если атрибут method не указан - подразумевается "get".
● enctype — необязательный атрибут. Указывает тип содержимого формы, используемый для определения формата кодирования при ее пересылке. В HTML определены два возможных значения для атрибута enctype:
♦ APPLICATION/X-WWW-FORM-URLENCODED (используется по умолчанию).
♦ MULTIPART/FORM-DATA.
Тег <input> позволяет создавать внутри формы поля ввода строки текста, имени файла, пароля и др. У <input> нет конечного тега. Атрибуты и особенности использования <input> зависят от способа его использования.
Тэг <input> - задает элемент формы, определяемый атрибутом type:
♦ Значение "text" задает однострочное текстовое поле ввода.
♦ Значение "submit" задает кнопку, при нажатии которой происходит отправка формы на сервер.
Возможны и другие значения (да и <input> - не единственный тэг, задающий элемент формы), но их мы рассмотрим в следующих главах.
Итак, что же происходит, когда нажимают кнопку "OK"?
1. Браузер просматривает входящие в форму элементы и формирует из их атрибутов name и value данные формы. Допустим, введено имя Vasya. В этом случае данные формы: name=Vasya&okbutton=OK.
2. Браузер устанавливает соединение с сервером, отправляет на сервер запрос документа, указанного в атрибуте action тэга <form>, используя метод отправки данных, указанный в атрибуте method (в данном случае - GET), передавая в запросе данные формы.
3. Сервер анализирует полученный запрос, формирует ответ, отправляет его браузеру и закрывает соединение.
4. Браузер отображает полученный от сервера документ.
Отправка того же запроса вручную (с помошью telnet) выглядит следующим образом (предположим, что доменное имя сайта - www.example.com):
telnet www.example.com 80
GET /cgi-bin/form_handler.cgi?name=Vasya&okbutton=OK HTTP/1.0\r\n
Host: www.example.com\r\n
\r\n
Нажатие submit-кнопки в форме с методом отправки "GET" аналогично вводу соответствующего URL (со знаком вопроса и данными формы в конце) в адресной строке браузера: http://www.example.com/cgi-bin/form_handler.cgi?name=Vasya&okbutton=OK
На самом деле, метод GET используется всегда, когда Вы запрашиваете с сервера какой-либо документ, просто введя его URL, или щелкнув по ссылке. При использовании <form method="GET" ... >, к URL просто добавляются знак вопроса и данные формы.
Как же нам в сценарии получить строку параметров, переданную после знака вопроса в URL при обращении к сценарию? Для этого можно проанализировать переменную окружения QUERY_STRING, которая в РНР доступна под именем $_SERVER[QUERY_STRING].
Напишем пример, чтобы это проиллюстрировать (листинг qs.php).
Листинг qs.php. Вывод параметров командной строки.
<?php
echo «Данные из командной строки: $_SERVER[QUERY_STRING]»;
?>
Если теперь запустить этот сценарий из браузера (перед этим сохранив его в корневом каталоге сервера) таким образом:
http://localhost/qs.php?this+is+the+world/
то получим документ следующего содержания: Данные из командной строки: this+is+the+world
Обратите внимание на то, что URL-декодирование символов не произошло: строка $_server [' query_string '], как и одноименная переменная окружения, всегда приходит в той же самой форме, в какой она была послана браузером.
Так как РНР изначально создавался именно как язык для Web-программирования, то он дополнительно проводит некоторую работу с переменной query_string перед передачей управления сценарию. А именно, он разбивает ее по пробельным символам (в примере пробелов нет, их заменяют символы +, но эти символы РНР также понимает правильно) и помещает полученные кусочки в массив-список $argv, который впоследствии может быть проанализирован в программе.
Массив $argv используется при программировании на РНР крайне редко, что связано с большими возможностями интерпретатора по разбору данных, поступивших от пользователя. Однако в некоторых (учебных) ситуациях его применение оправдано.
Возможно, все эти технические подробности кажутся невероятно скучными и даже ненужными ("а при чем тут PHP?"). Но это основы работы по протоколу HTTP, которые необходимо знать каждому web-программисту.
Теперь заменим первую строку нашей формы на следующую:
<form method="POST" action="/cgi-bin/form_handler.cgi">
Мы указали метод отправки "POST". В этом случае данные отправляются на сервер несколько другим способом:
telnet www.example.com 80
POST /cgi-bin/form_handler.cgi HTTP/1.0\r\n
Host: www.example.com\r\n
Content-Type: application/x-www-form-urlencoded\r\n
Content-Length: 22\r\n
\r\n
name=Vasya&okbutton=OK
При использовании метода POST данные формы отправляются уже после "двух Enter-ов" - в теле запроса. Все, что выше - на самом деле заголовок запроса (и когда мы использовали метод GET, данные формы отправлялись в заголовке).
