 |
Тема 1. Архитектура веб-приложений
|
|
|
|
ИНТЕРАКТИВНОЕ ПРОГРАММИРОВАНИЕ
ВЕБ-ПРИЛОЖЕНИЙ
Методические указания
к выполнению практических работ
по курсу «Интерактивное программирование веб-приложений»
для студентов направления
«Информационные системы и технологии»
Саратов 2017
Разработка веб-приложений с использованием PHP и MySQL
Современные веб-сайты зачастую представляют собой полноценные информационные системы. Для их создания недостаточно тех средств разработки, которые описаны в предыдущих разделах данного учебного пособия. Даже для того, чтобы создать простой сайт-визитку, но с возможностью редактирования и добавления информации, необходимо где-то эту информацию хранить и каким-то образом ее обрабатывать. Чаще всего в качестве хранилища информации используются базы данных.
База данных – структурированный организованный набор данных, описывающих характеристики какой-либо физической или виртуальной системы.
СУБД – программное обеспечение, предназначенное для работы с базами данных, а именно: хранения и поиска информации по сложным запросам.
Для того, чтобы связать содержимое базы данных и html-страницы веб-сайта, необходим серверный язык программирования.
Серверный язык программирования – это такой язык, чей программный код обрабатывается на сервере, а не на стороне пользователя, а пользователь получает уже результат выполнения программы.
Сервер в данном случае - программное обеспечение, принимающее запросы от клиентов. В широком смысле сервер – это компьютерное устройство с установленным программным обеспечением, предназначенное для выполнения различных задач.
В последнем разделе данного учебного пособия мы рассмотрим процесс создания веб-приложения с использованием СУБД MySQL и языка программирования PHP.
|
|
|
Тема 1. Архитектура веб-приложений
Веб-приложение состоит из клиентской и серверной частей, тем самым реализуя технологию «клиент-сервер».
Клиентская часть реализует пользовательский интерфейс, формирует запросы к серверу и обрабатывает ответы от него.
Серверная часть получает запрос от клиента, выполняет вычисления, после чего формирует веб-страницу и отправляет её клиенту по сети с использованием протокола HTTP. Схема работы клиент-серверного приложения представлена на рисунке 91.
Рисунок 91 - Схема работы клиент-серверного приложения
HTTP – HyperText Transfer Protocol – протокол передачи данных, предназначенный для передачи гипертекста.
Запрос, переданный серверу по протоколу HTTP представляет собой непосредственно строку запроса и раздел HTTP-заголовков, в которых указывается различная вспомогательная информация.
Пример структуры HTTP-запроса:
GET / HTTP/1.1 – строка запроса
Host: localhost – заголовок
Здесь:
· GET – метод передачи данных;
· / - указание на то, какой файл мы запрашиваем. В данном случае, это главная страница сайта;
· HTTP/1.1 – версия протокола HTTP.
· Host: localhost – заголовок, в котором указан адрес сайта, к которому мы обращаемся.
HTTP-заголовков существует множество, и какие из них отправляются в запросе, а какие – нет, зависит от браузера. Заголовок Host отправляется в любом случае, всегда, иначе запрос будет отклонен сервером.
Начальная строка запроса отделяется от заголовков переходом на новую строку. Двойной переход на новую строку означает конец запроса. Забегая вперед, отметим, что в языке PHP аналогом перехода на новую строку является сочетание специальных символов «\r\n».
Получив запрос, сервер сохраняет отдельные его части в специальных переменных, затем выполняет запрос и возвращает клиенту ответ.
|
|
|
Структура ответа сервера на HTTP-запрос:
HTTP/1.1 200 OK
Server: Apache/2.4.18 (Win64) PHP/7.0.3
Date: Sat, 05 Mar 2016 14:23:26 GMT
Content-Type: text/html
Content-Length: 7563
Last-Modified: Sat, 05 Mar 2014 12:54:30 GMT
Connection: keep-alive
<html>…
</html>
Стартовая строка ответа содержит версию протокола HTTP, код состояния, показывающий результат выполнения запроса (коды, превышающие 400, означают ошибку) и текстовое пояснение результата.
Далее идут заголовки:
· Server – версия сервера;
· Date – дата получения ответа;
· Content-Type – тип возвращаемых данных;
· Content-Length – размер возвращаемых данных;
· Last-Modified – дата последнего изменения запрашиваемого документа;
· Connection – состояние соединения с сервером после выполнения запроса, keep-alive – сервер доступен для новых запросов, close – соединение закрыто.
После заголовков начинается непосредственно тело ответа. В данном случае, это код html-страницы.
Наличие или отсутствие тех или иных заголовков в HTTP-ответе зависит от настроек сервера и действий серверных программистов.
Тело ответа отделено от заголовков двойным переносом строки. Окончание ответа определяется согласно содержимому заголовка Last-Modified.
Говоря о начальной строке HTTP-вопроса, мы упомянули метод передачи данных. Существует некоторое количество методов отправки данных, но нас интересуют два из них:
· Метод GET;
· Метод POST.
Методом GET, как уже говорилось, данные отправляются непосредственно через адресную строку браузера. Собственно говоря, любой переход по ссылке при работе в сети Интернет является отправкой запроса методом GET, как мы видели в примере выше. Но этим методом также можно передать и конкретные данные, которые затем можно извлечь и обработать.
Например, ссылка на результат поискового запроса имеет вид «https://www. Google.ru/search?q=php&oq=ЗРЗ&aqs=chrome.1.69i57j0l5.2680j0 j8&sourceid=chrome&es_sm=122&ie=UTF-8». В этой ссылке все, что находится после знака «?» является параметрами, переданными с помощью метода GET обработчику /search, находящемуся по адресу www. Google.ru. Знак «&» используется при передаче нескольких параметров. Обратите внимание, в примере эти данные переданы по протоколу HTTPS – защищенной версии протокола HTTP.
Представим, что у нас есть файл form.php, находящийся по адресу localhost. В этом файле у нас есть веб-форма с двумя полями: login и pass. Эти данные отправляются на сервер методом GET. Пусть этот же файл является также и обработчиком, то есть получателем данных. Тогда HTTP-запрос будет выглядеть следующим образом:
|
|
|
GET /form.php?login=julia&pass=123456 HTTP/1.1
Host: localhost
Вроде бы все в порядке, однако в реальности этот запрос будет помещен для отправки в адресную строку браузера, как показано на рисунке 92.
Рисунок 92- передача данных методом GET
Итак, из-за способа отправки данных метод GET обладает следующими недостатками:
· Отсутствие безопасности при передаче конфиденциальных данных;
· Невозможность отправки некоторых данных, например, файлов;
· Загромождение адресной строки браузера в том случае, если данных при запросе слишком много.
Из этого можно сделать вывод, что для передачи данных веб-формы метод GET лучше не использовать, за исключением тех случаев, когда это необходимо. Зато метод GET отлично работает тогда, когда нужно передать параметры вместе со ссылкой.
Для отправки же данных из формы лучше использовать метод POST. Он отличается от GET тем, что данные посылаются не в составе строки запроса вместе с запрашиваемым файлом, а отдельно.
Рассмотрим структуру HTTP-запроса, отправленного методом POST. Данные из веб-формы отправляются на сервер, HTTP-запрос выглядит следующим образом:
POST /form.php HTTP/1.1
Host: localhost
Content-Length: 23
login=julia&pass=123456
Как видно, в начальной строке запроса указан только метод передачи данных и путь к файлу обработчику. Однако отправляемые данные находятся в теле запроса, которое отделяется от заголовков двойным переходом на новую строку. Также обратите внимание, что появился еще один обязательный заголовок Content-Length, по значению которого сервер определяет окончание запроса.
Итак, мы рассмотрели протокол HTTP передачи данных между клиентом и сервером и два метода передачи данных – GET и POST.
Любое действие пользователя на веб-сайте является HTTP-запросом к серверу, например, переход по ссылке или открытие изображения в новом окне. Результат же этого действия является HTTP-ответом сервера. Таким образом, еще раз подчеркнем, что любой веб-сайт является приложением «клиент-сервер», где роль клиента выполняет браузер пользователя.
|
|
|
Установка веб-сервера
Как уже выяснилось, для того, чтобы использовать все возможности веб-приложения, необходим сервер. Но сервер не обязательно должен находиться на удаленном компьютере с выходом в сеть. Существует такое понятие, как локальный сервер.
Локальный сервер – программное обеспечение, имитирующие работу реального сервера и позволяющее работать с веб-приложениями без подключения к сети.
Итак, для дальнейшей работы по разработке и отладке веб-приложений с использованием PHP и MySQL нам необходимо установить локальный веб-сервер, СУБД MySQL и интерпретатор PHP.
Интерпретатор - это программное обеспечение, используемое для выполнения программного кода языков высокого уровня. Каждая часть кода интерпретируется и выполняется отдельно и последовательно; если в какой-то части будет найдена ошибка, она остановит интерпретацию кода без обработки оставшейся части кода.
Для установки мы выберем сервер Apache. Все программные компоненты, относящиеся к установке и настройке этого веб-сервера, являются свободно распространяемыми, то есть бесплатными.
Также, для комфортной работы с базой данных MySQL, нам понадобится phpMyAdmin – программа, написанная на языке PHP и представляющая собой визуальный интерфейс для работы с СУБД MySQL, которая не имеет собственного визуального интерфейса.
Будем рассматривать пример установки нужных нам программ на примере операционной системы Windows 10, однако процедура установки не отличается и для более ранних версий Windows.
Наши действия будут разделены на несколько этапов:
1. Подготовительный этап;
2. Создание файловой структуры веб-сервера;
3. Установка Apache 2.4;
4. Установка и настройка MySQL 5.7;
5. Установка и настройка PHP 7;
6. Установка и настройка phpMyAdmin;
7. Использование сервера и резервное копирование данных;
8. Дополнительная настройка PHP;
9. Настройка почтовой заглушки.
Подготовительный этап
На данном этапе следует скачать нужные программы и подготовиться к их установке.
Итак, нам необходимы следующие программные компоненты:
· Apache 2.4 - веб-сервер;
· PHP 7- среда для работы PHP-программ;
· MySQL 5.7 - система управления базами данных;
· phpMyAdmin – визуальный интерфейс для работы с MySQL.
Официальный сайт разработчиков Apache располагается по адресу httpd.apache.org. Но, поскольку официальная версия собирается с использованием старого компилятора, она не работает с новыми версиями PHP. Авторы PHP рекомендуют скачивать Apache с ресурса, расположенного по адресу apachelounge.com/download.
|
|
|
Если в вашем распоряжении 64-битная версия Windows, то можно выбирать как 64-битную, так и 32-битную версию компонентов. Главное правило - все компоненты должны быть одной версии. Если у вас 32-битная версия Windows, то все компоненты должны быть 32-битными. Это не относится к phpMyAdmin, который написан на языке PHP. Для PHP программ понятие битности неприменимо.
PHP 7 скачиваем со страницы http://windows.php.net/qa/. Необходимо выбрать версию Thread Safe.
Бесплатная версия MySQL называется MySQL Community Server. Её можно скачать на странице http://dev.mysql.com/downloads/mysql/. На этой же странице можно скачать установщик в виде исполняемого файла, но мы будем использовать ZIP-архив.
На странице скачивания нам предлагают зарегистрироваться или войти в существующую учётную запись. Делать это необязательно. Достаточно нажать на ссылку No thanks, just start my download.
Ресурс для скачивания phpMyAdmin: phpmyadmin.net.
Ещё нам понадобится для работы файл «Распространяемый компонент Visual C++ для Visual Studio 2015» с обновлением 1 (или любой другой более поздний), скачать который можно на официальном сайте Microsoft по адресу https://www.microsoft.com/ru-RU/download/details.aspx?id=49984.
Итак, в результате в нашем распоряжении должны оказаться следующие файлы:
· httpd-2.4.18-win64-VC14.zip;
· php-7.0.3-Win32-VC14-x64.zip;
· mysql-5.7.11-winx64.zip;
· phpMyAdmin-4.5.4.1-all-languages.zip;
· vc_redist.x64.exe.
Перечень файлов, необходимых для установки, представлен на рисунке 93.
Рисунок 93 - Перечень файлов, необходимых для установки
В первую очередь запустим файл vc_redist.x64.exe. Установка данного компонента необходима для корректной работы Apache.На рисунке 94 представлено окно запуска процессаустановки vc_redist.x64.exe:
Рисунок 94 - Запуск установки vc_redist.x64.exe
Ставим отметку в поле «Я принимаю условия лицензии» и нажимаем «Установить». Ждем, пока установка не завершится. Признаком окончания процесса установки vc_redist.x64.exe является появление окна, показанного на рисунке 95.
Рисунок 95 - Окончание установки vc_redist.x64.exe
На этом подготовительный этап установки завершен.
|
|
|
