Занятие 5. "Начало создания серверной части проекта"Винни-Пух и компания"
На этом занятии мы начнем реализацию серверной части проекта "Винни-Пух и компания" на PHP: -создадим новый проект; -поговорим о кодировке проекта UTF-8; -начнем реализацию приема данных от клиентской части на Java.
Создание серверной части проекта на php
Клиентская часть проекта на Java у нас уже закончена, осталось проверить ее взаимодействие с серверной частью. Настало время приступить к созданию проекта PHP для серверной части.Эта часть будет сложнее клиентской, и она является основной.
Запустим Денвер и откроемEclipse для PHP. От первых трех занятий у нас остался проект test_php- он был создан для изучения нового материала и показательного примера создания нового проекта. Закроем закладки открытых файлов проекта и выделим проект test_phpв списке проектов, нажав на его заголовок левой клавишей мыши. (см. рис.5.1):
Рис. 5.1
Нажмем правую клавишу мыши в контекстном меню и выберем Delete для удаления проекта. (см. рис. 5.2):
Рис. 5.2
Проект удалится, при этом удалится и папка "www"на виртуальном диске, которую мы создавали на первом занятии.
Теперь создадим новый проект и назовем его puh.
Самостоятельно выполните следующие действия:
Создайте новый проект с названием:puh;
Добавьте к проекту файл: index.php
Внимание!!!Подробное описание по созданию нового проекта находится в первом занятии данного методического пособия! Для правильной работы проекта требуется учесть все тонкости, описанные в первом занятии!
Если все сделано правильно, то на виртуальном диске должны появиться следующие файлы и папки (см. рис. 5.3):
Рис. 5.3
В среде разработкиEclipse для PHPдолжно появиться следующее (см. рис. 5.4):
Рис. 5.4
Страница index.php - это главная страница нашего проекта, при открытии сайта будет запускаться именно она.Страница index.php будет отображать внешний вид нашего сайта, при этом внешний вид страницы в браузере может меняться.
Добавим основные теги на страницу index.php:
<html>
<head>
</head>
<body>
</body>
</html>
Напомним, внутри теговbody будет содержимое страницы для отображения в браузере, а внутри тегов head–различная информация для настроек страницы.
Добавим заголовок страницы при помощи тега titleследующий заголовок: Project Winnie the Pooh and Company (Проект "Винни-Пух и компания").
<html>
<head>
<title>Project Winnie the Pooh and Company</title>
</head>
<body>
</body>
</html>
Сохраним все файлы проекта (см. рис. 5.5):
Рис. 5.5
Откроем браузер и в адресной строке введем: http://puh.Нажмем клавишу Enter –откроется наша страница и мы увидим добавленный нами заголовок (см. рис. 5.6):
Рис. 5.6
Теперь можно сказать,что мы положили начало нашему проекту!
Кодировка проектаUtf-8
Разберемся с таким важным вопросом, как кодировка. При создании первых сайтов, веб-разработчики часто сталкиваются с этой проблемой.
Кодировка –это некоторая таблица соответствий символов и их числовых кодов. Каждый символ имеет свой числовой код. Например, восклицательный знак(!) имеет код33, цифра нуль(0) - 48, буква d - 100. Каждый символ имеет свой уникальный код! Таких таблиц соответствия существует большое количество.
Английские буквы(маленькие и заглавные), цифры: 0,1,2,3,4,5,6,7,8,9и стандартные символы, такие как: !@#$%^&*()_-=+\| имеют в любой кодировке одинаковый код. Например,цифра нуль (0) в любой кодировке имеет код: 48.
По-другому дело обстоит с национальными символами –русскими буквами!В разных кодировках одна и та же русская буква может иметь разный числовой код. И если русский текст сохранен в одной кодировке, а браузер его отображает в другой, то вместо ожидаемого русского текста появится набор непонятных символов.На рис. 7 показан пример вывода текстовой надписи: Проект "Винни-Пух и компания" в другой кодировке:
Рис. 5.7
Внимание!!!Если вместо русских букв отображаются другие символы – возникла проблема с кодировкой!
Существуют две основные кодировки, которые используются при создании сайтов: WINDOWS-1251и UTF-8. Мы будем использовать кодировку UTF-8.
С кодировкой необходимо определиться сразу, перед созданием сайта!!! Неправильный подход к этому вопросу может доставить множество неприятных моментов и отнять много времени.
Для настройки нужной кодировки необходимо выполнить несколько условий:
Все файлы проекта должны сохраняться в нужной кодировке.
Кодировка должна быть указана для PHP,HTML,CSS.
Операции с данными из базы данных должны выполняться с учетом выбранной кодировки.
Выполним пункт первый –укажем кодировку UTF-8для всех файлов проекта. Для этого нажимаем левой клавишей мыши на заголовок проекта puh (см. рис. 5.8):
Рис. 5.8
Нажимаем правую клавишу мыши и в открывшемся меню, выбираем командуСвойства (см. рис. 5.9):
Рис. 5.9
Откроется окно свойств проекта. Для установки нужной кодировки переключатель Кодировка текстовых файлов следует поместить в положение Другаяи справа от переключателя выбрать кодировку UTF-8 (см.рис. 5.10):
Рис. 5.10
После выполнения настроек –нажимаем кнопку OK. Теперь все файлы проекта будут сохраняться в кодировке UTF-8.
Важно!!!При изменении и сохранении файлов проекта не из Eclipse для PHP,кодировка может измениться. В этом случае русские буквы станут отображаться неверно! Во избежание этой проблемы, файлы проекта необходимо редактировать и сохранять строго в Eclipse для PHP!
Выполним второй пункт условий (установим нужную кодировку для PHP,HTML,CSS)-начнем с HTML.Перейдем в файл index.php. Здесь уже записаны некоторые теги. Внутри тегов head добавим тег указания кодировки дляHTML:
<html>
<head>
<title>Project Winnie the Pooh and Company</title>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
</head>
<body>
</body>
</html>
Мы добавили новый тегmeta. В этом виде он указывает, что в HTMLбудет использоваться кодировкаUTF-8 (кодировка указана в атрибуте charset).
Теперь добавим к нашему проекту файл puh.css –это файл для CSS. Для этого нажимаем левой клавишей мыши на заголовок проекта puh в списке проектов,открываем контекстное меню ивыбираем команду New, CSS File. В появившемся окне, вводим имя файлаpuh.css, и нажимаем кнопку Готово.
В результате к проекту добавится новый файл: puh.css (см. рис. 5.11):
Рис. 5.11
В файле puh.cssмы будем добавлять все свойства CSSдля нашего проекта.
При создании файлаpuh.css, как правило, автоматически добавляется следующая строка (см. рис.5.12):
Рис. 5.12
Эта строка указывает кодировку в CSS. Если у вас не добавилась эта строка или добавилась с другой кодировкой–необходимо добавить/изменить на указанный вариант!
Осталось добавить настройку кодировки для PHP. Эту операцию мы сделаем в специальном служебном файле.htaccess. Обратите внимание, что название файла начинается с символа точка (.). Для этого, нажимаем левой клавишей мыши на заголовок проекта puh в списке проектов.Нажимаем правую клавишу мыши для открытия меню, выбираем New, Файл. В появившемся окне,вводим имя файла .htaccess и нажимаем кнопку Готово.
В результате, сверху появится новая закладка с открытым файлом: .htaccess (см. рис. 5.13):
Рис. 5.13
В файле .htaccess необходимо записать следующие две строки:
AddDefaultCharSet utf-8
php_value default_charset utf-8
Строки указывают настройку кодировки UTF-8для всех PHPфайлов нашего проекта. Пока у нас имеется только одинPHP файл - index.php
Внимание!!!Не стоит пугаться множества новых тегов и настроек. У нас нет задачи специально запоминать их. Главное понимать их предназначение. После создания одного сайта – необходимые теги копируются, немного корректируются и вставляются в новый проект!
Третий пункт по настройке кодировки при работе с базой данных мы выполним, когда начнем работать с базой данных. Первые два пункта для настройки кодировки UTF-8мы выполнили.
Перейдем в файл index.php и внутри теговhead подключимCSSк файлуindex.php:
<html>
<head>
<title>Project Winnie the Pooh and Company</title>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
<link href="puh.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>
Добавлен тег link, в атрибуте href указано имя нашегоCSS-файла. С подключением внешнего файла к HTML мы уже знакомились на третьем занятии. К нашему проекту необходимо добавить еще два файла PHP, с наименованиями:lib.phpи tovar.php.
Выполните это задание самостоятельно! Добавление этих файлов происходит также как и добавление файла index.php1.
Содержимое файловlib.php и tovar.php пока удалим.
После добавления должно получиться следующее (см.рис. 5.14)
Рис. 5.14
Файл tovar.php–это и есть та страница, которая отвечает за обмен данными с клиентской частью на Java. На этом занятии мы начнем писать ее программный код. Файл lib.phpбудет использоваться для создания основной части программного кода на PHP.Получается, что наш проект будет содержать три файла PHP.
Вспомним: после добавления новых файлов к проекту –необходимо перезапустить Денвер!Выполним перезапуск Денвера2.