2.5.3 Создание базы данных

Для разработки web-сайта на локальном компьютере устанавливается пакет программ Denwer.

После установки пакета программ Denwer и запуска web-сервера в адресной строке интернет - браузера вводится следующий адрес: «http://localhost/». На экран будет выведена информация о web-сервере и список необходимых для работы ссылок. Для начала проектирования базы данных запускается web-интерфейс phpMyAdmin по ссылке «http://localhost/Tools/phpMyAdmin».

В phpMyAdmin в поле «Новая база данных» вводится название и создается база данных. После создания базы данных создаются необходимые таблицы. Далее указывается имя каждого поля, тип вносимых в таблицу данных, возможно ли нулевое значение поля, заполняется ли поле по умолчанию, так же необходимо указать первичный ключ.

Далее создается пользователь, который будет работать с данной базой данных. На главной странице phpMyAdmin во вкладке «Привилегии», имеется специальная ссылка «Создать нового пользователя». В области «Информация учетной записи» заполняются поля: имя пользователя: imperiavostoka_u, хост - предварительно из выпадающего списка выбирается «локальный»: localhost, пароль: imperiavostoka, подтвержение: imperiavostoka. В области «Глобальные привилегии» пройдя по ссылке «Отметить все» - вновь созданному пользователю даются максимальные права по работе с данными, структурой и администрированием базы Империя Востока. После этого таблица заполняется данными.

В БД компании Империя Востока сформированы следующие таблицы: «pages» (Таблица 2); «profile» (Таблица 3).

В таблице «pages» хранится содержимое всех страниц сайта и имеются следующие поля:

1. page_id - уникальный идентификатор страницы;

2. title - название страницы;

3. keywords - ключевые слова;

4. description - метаописание содержимого страницы;

5. text - основное содержимое страницы.

Таблица 2

Структура таблицы «pages»

Название полей	Тип данных	Null	Значение по умолчанию
page_id	varchar (20)	Нет	Нет
title	varchar(200)	Нет	Нет
keywords	varchar(200)	Нет	Нет
description	text	Нет	Нет
text	text	Нет	Нет

Внешний вид Таблицы «pages» в панели phpMyAdmin с заполнением основных данных, которые хранит таблица, представлен на рис. 6.

Рисунок 6 - Таблица «pages» с внесенными данными

В таблице «profile» хранятся данные администратора:

1. admin_name - логин;

2. password - пароль;

3. email - адрес электронной почты.

Таблица 3

Структура таблицы «profile»

Название полей	Тип данных	Null	Значение по умолчанию
admin_name	varchar (100)	Нет	Нет
password	varchar(100)	Нет	Нет
email	varchar(100)	Нет	Нет

2.5.4 Главная страница и структура сайта

При сведении блоков страниц применена как табличная так и блочная верстка. Стартовая страница сайта «index.php» состоит из блока «wrapper», который посредством свойства «background-image» размещает «шапку» и задает фон всей странице с использованием растрового изображения. Внутри блок «wrapper» исключительно для удобства размещения главного меню в нужном месте страницы разбит еще на несколько блоков.

На всех остальных страницах применена табличная верстка, и в соответствии с предложенной структурой сайта, происходит подключение верхнего и нижнего графических элементов, располагаемых в верхней и нижней ячейках таблицы. Так как эти элементы представляют собой изображения, для удобства они размещены в отдельных папках и их подключение обеспечивает тег <img> с атрибутом src, который определяет адрес файла с изображением [10].

В связи с тем, что контент всех страниц находится в базе данных, необходимо каждую страницу начинать с подключения к серверу MySQL. Настройки соединения с сервером MySQL вынесены в отдельный конфигурационный файл «config.php», подключение которого осуществляется с помощью оператора require_once:

require_once("include/config.php");

Листинг кода файла приведен ниже.

<?php

//Объявление сессии

session_start ();

$dbhost = "localhost";

$dbuser = "imperiavostoka_u";

$dbpassword = "imperiavostoka";

$dbase = "IV";

//подключение к серверу

@mysql_connect($dbhost,$dbuser,$dbpassword) or die (mysql_error());

@mysql_select_db($dbase) or die (mysql_error());

//Полный путь

define(PATH, "http://{$_SERVER['HTTP_HOST']}");

?>

Далее для возможности получения информации из базы данных (БД) и представления ее на странице выполняется запрос к БД. Создается переменная $query (англ. запрос), в которую помещается результат работы функции mysql_query() осуществляющей запрос к БД. Синтаксис функции приведен в п.п. 1.4.4 «Доступ к базе данных из PHP». Условие задается с помощью ключевого слова WHERE (англ. где) - выбрано поле page_id со значением страницы, которую подключаем к БД, 'index' - для главной страницы и т.д. Листинг запроса:

<?php

…

$query = mysql_query("SELECT title, description, keywords, text FROM

pages WHERE page_id = 'index'");

…

Таким образом, с помощью данного запроса помещаются в переменную $query значения всех указанных полей для выбранной страницы. Далее проводится небольшая проверка - если переменная $query содержит неверный результат, выводится ошибка БД с помощью функции mysql_error():

…

if (!$query)

{

exit(mysql_error());

}

…

В случае, когда проверка успешно пройдена, в переменную $res помещается результат работы функции mysql_fetch_array(), которая преобразует результат запроса к базе данных, помещенный в переменную $query, в специальный массив [10]. Элементы массива в дальнейшем можно использовать для вывода в конкретном месте на странице.

…

$res = mysql_fetch_array($query);

…

?>

На главной странице в блоке, где находится меню сайта (блок с идентификатором id="prav") помещен скрипт языка Javascript с обработчиком событий, о котором уже упоминалось. Скрипт располагается между открывающим <script type="text/javascript"> и закрывающим </script> тегами и представляет собой обработчики событий parMouseOver - возникает при наведении курсора мыши на объект, parMouseOut - при удалении курсора мыши за пределы объекта. Объектами в данном случае являются пункты меню. Обработчики представляют собой функции, которые содержат параметр objTemp для обработки при вызове функции [5, с.212]. Параметр objTemp задает соответствующий цвет. Вызов функций осуществляется из меню, в каждый пункт которого встроена конструкция: onMouseOver="parMouseOver(this);" onMouseOut="parMouseOut(this);".

В связи с тем, что основное содержание страницы помещено в базу данных в поле 'text' - вывести его необходимо в том же блоке "prav". К настоящему моменту имеется массив в переменной $res, который содержит результаты по выбранным в запросе полям для указанной страницы, в том числе и поле 'text' как один из элементов массива. В данный момент выборка произведена для страницы с именем 'index'. Конструкция вывода имеет следующий вид:

<?php echo $res['text'];?>

Данная конструкция вставляется в те места на других страницах, где необходимо вывести их содержимое. Как правило, это средняя ячейка таблицы, с помощью которой производилась верстка страницы. Исключение составляет страница обратной связи «Контакты».

Также, используя эту конструкцию на каждой странице производится вывод из БД: заголовка страницы из поля 'title' и метаинформации - ключевых слов из поля 'keywords' и краткого описания страницы из поля 'description' той же таблицы «pages». Только вместо элемента 'text' указываются нужные названия элементов массива. Для удобства на всех страницах часть содержимого от начала документа до открывающего тега <body> включительно помещена в папку «parts» в отдельный файл «meta.php». Содержимое файла:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01

Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-

1251">

<meta name="keywords" content="<?php echo $res['keywords'];?>" />

<meta name="description" content="<?php echo $res['description'];?>" />

<title><?php echo $res['title'];?></title>

<link href="http://imperiavostoka.ru/style.css" rel="stylesheet"

type="text/css" media='screen,projection'>

<script type="text/javascript" src="form.js"></script>

</head>

<body>

Подключение выполняется с помощью уже знакомого оператора

require_once:

require_once("parts/meta.php")

В целом листинг главной страницы приведен в Приложении А.

2.5.5 Создание формы обратной связи

Форма обратной связи для данного сайта содержит следующие поля (все поля обязательны для заполнения):

– выбор темы сообщения (из предлагаемого списка);

– имя отправителя (ввод данных);

– e-mail отправителя (ввод данных);

– текст сообщения (текстовое поле).

Для предотвращения спама предусмотрена капча. Капча взята из свободного распространения в Internet и устроена таким образом, что при ее активации в момент отправки формы происходит старт сессии. В связи с этим подключение страницы «Контакты» к БД выполнено не с помощью файла «include/config.php», а настройки подключения вынесены в начало страницы и сессия не объявляется. Это происходит позже, после подключения капчи.

Проверка правильности и полноты заполненности формы выполняется дважды. Один раз с использованием программы на языке Javascript, которая вынесена в отдельный файл «form.js». Подключение файла происходит посредством тега <script type="text/javascript" src="form.js"></script>. Скрипт (программа) представляет собой функцию f_submit(), которая вызывается событием onsubmit, возникающем при отправке данных формы. В теле функции создается переменная с говорящим именем соответствующая проверяемому элементу формы. В переменную помещается результат работы метода getElementById. getElementById - метод объекта document. Он возвращает ссылку на узел документа, которую можно использовать для изменения свойств или обращения к методам узла [11]. В данном случае узлом является элемент формы. Создается еще одна переменная, в которую помещается регулярное выражение проверяющее корректность вносимой информации. С помощью оператора ветвления if…else происходит перебор элементов формы по следующему принципу: событие focus позволяет сфокусироваться на элементе, если элемент заполнен - свойство value объекта элемента формы не равно пустоте, то с помощью метода test проверяется соответствует ли содержимое строки (элемента) шаблону регулярного выражения в этом элементе. На каждом этапе проверки при обнаружении ошибки выводится сообщение с указанием ее вида. Таким образом, скрипт последовательно проходит по всем элементам формы.

В случае если в браузере пользователя отключена поддержка Javascript выполняется проверка на стороне сервера с помощью PHP, которая встроена в капчу. Проверка проводится по похожей методике. С помощью оператора ветвления if…else проверяется существование данных во встроенных массивах PHP, которые попадают туда при отправке формы. Так как при передаче использовался метод POST, данные размещены в массиве $_POST. Если элемент массива с именем соответствующим имени элемента формы существует и он пустой выводится ошибка о том, что поле не заполнено, в противном случае для поля ввода е-mail осуществляется проверка корректности написания е-mail с помощью встроенного регулярного выражения.

С помощью функции empty проверяется существование массива $_POST и, если он существует и заполнен, создается переменнуая $headers, которая будет выводиться в заголовке сообщения при его получении. В нее последовательно помещаются: версия стандарта, в соответствии с которым написано данное письмо; поле заголовка 'Content-Type' для того, чтобы почтовый агент (программа) получателя могла выбрать соответствующий механизм для обработки данных; дата и время отправления; е-mail-адрес отправителя; вид почтовой программы браузера.

<?php

…

elseif (!empty($_POST))

{

$headers = "MIME-Version: 1.0\r\n";

$headers .= "Content-Type: $content charset=$charset\r\n";

$headers .= "Date: ".date("Y-m-d (H:i:s)",time())."\r\n";

$headers .= "From: \"".$_POST['posName']."\"

<".$_POST['posEmail'].">\r\n";

$headers .= "X-Mailer: My Send E-mail\r\n";

…

Далее, если существует элемент 'button', то есть произошла отправка формы, делается выборка из БД - поле 'email' из таблицы «profile», содержащее адрес эл. почты, на который происходит отправка сообщения с помощью формы. Значение этого поля в качестве элемента массива помещается в переменную $to.

…

if($_POST['button']){

$sql = mysql_query("SELECT email FROM profile");

if(!$sql){

return exit(mysql_error());

}

$array = mysql_fetch_array($sql);

$to = $array['email'];

}

…

Теперь с помощью функции mail происходит отправка сообщения по образу заполненной формы получателю $to:

…

mail("$to","$subject","$message","$headers");

…

Форма очищается, удаляя созданные переменные, и выводится сообщение об успешной отправке:

…

unset($name, $posText, $to, $subject, $posRegard, $message);

$statusSuccess = "$send";

…

В случае неверно введенного проверочного числа капчи, также выводится сообщение об ошибке и происходит удаление сессии:

…

$statusError = "$captcha_error";

unset($_SESSION['captcha_keystring']);

…

?>

Кроме формы обратной связи на страницу помещены контактные данные и местоположение организации на карте города, выполненной с помощью сервиса Яндекс.Карт.

2.5.6 Блок администратора

Написание блока администратора начинается с создания файла авторизации «index_a.php». После подключения его к БД (require_once("include/config.php");) проверяется сессионная переменная 'auth', если она существует, производим подключение основного файла админчасти «admin.php», в котором выполняется редактирование содержимого страниц сайта:

<?php

if($_SESSION['auth']){

include_once('admin.php');

exit;

}

?>

Если же этой переменной не существует, то появляется форма авторизации администратора с полями для внесения логина и пароля. Процесс авторизации происходит следующим образом. Если произошло нажатие кнопки «Вход» при отправке логина и пароля, то для удобства создаются переменные с говорящими именами $name и $password, куда помещаются соответствующие элементы массива $_POST из формы. При этом значения помещаеются в функцию обработки строк htmlspecialchars(), преобразующей специальные символы в HTML сущности. А пароль (поле 'password') кроме этого дважды хешируется (шифруется) с помощью алгоритма md5:

<?php

if($_POST['button']){

$name = htmlspecialchars($_POST['name']);

$password = md5(md5(htmlspecialchars($_POST['password'])));

Затем с помощью функции get_magic_quotes_gpc() проводится проверка активна ли установка конфигурации "Волшебных Кавычек". "Волшебные Кавычки" (Magic Quotes) - это процесс, который позволяет автоматически экранировать внешние данные, приходящие в PHP скрипт во время его выполнения. И если "Волшебные Кавычки" включены, функцией stripslashes() удаляется экранирование символов [12].

…

if (get_magic_quotes_gpc()) {

$name = stripslashes($name);

$password = stripslashes($password);

}

…

Теперь производится выборка хранящихся в БД логина и пароля администратора в полях 'admin_name' и 'password' таблицы «profile» с проверкой:

…

$query = "SELECT `admin_name`,`password` FROM `profile`";

$select = mysql_query($query);

if(!$select){

return exit('Выборка не удалась!!!');

…

Выбранные значения помещаются в ассоциативный массив:

…

$array = mysql_fetch_assoc($select);

…

И теперь сравнивается идентичность (===) значений запрошенных из БД и введенных в форме авторизации. Если данные полностью совпадают, выводится в виде ссылки надпись «В админпанель», пройдя по которой можно попасть в файл «admin.php». Здесь же объявляется сессия путем присвоения ей в качестве имени логина авторизовавшегося администратора.

…

if(($name === $array['admin_name']) && ($password ===

$array['password'])){

$_SESSION['auth'] = $name;

echo "<a href='admin.php' >В админпанель</a>";

}

else{

return exit('Данные не совпадают');

}

}

?>

Все остальные файлы в админчасти начинаются с проверки существования сессионной переменной, т.е. произведена ли авторизация. Если переменной не существует выводится надпись «Вы не авторизированны».

<?php

if(!$_SESSION['auth']) {

return exit('Вы не авторизированы');

}

…

Таким образом, предотвращается возможность попадания в админчасть посторонних.

Файл «admin.php» (Приложение Б) предусматривает выход из админчасти, реализованный в виде ссылки на файл «index_a.php» и удаление сессии в этом случае.

<a href='index_a.php?exit=del'>Выйти</a>

Также в виде ссылки, ведущей в файл «re.php» предусмотрено изменение данных администратора. Файл «re.php» технически похож на файл «index_a.php». Он также содержит форму, в которую при открытии файла помещаются из БД существующие данные. При этом пароль находится в хешированном виде. Далее данные можно поменять - нажатием кнопки «Изменить данные» по аналгии с файлом «index_a.php» создаются переменные, куда помещаются новые данные из формы. После удаления "Волшебных Кавычек" обновляются данные в базе данных и в случае успешного обновления выводится сообщение об этом.

Главное же назначение файла «admin.php» - это возможность обновления информации в базе данных. В начале проводится проверка, если существует элемент 'page_id' глобального массива $_GET, то его значение присваивается переменной $page_id.

<? if (isset($_GET['page_id']))

{

$page_id = $_GET['page_id'];

}

?>

Делается это для того, что на многих хостингах отключена опция позволяющая получать доступ к элементам из массива $_GET напрямую. Если же переменная 'page_id' не существует, то выводится список страниц для редактирования - выполняется запрос к БД и выбираются поля title, page_id из таблицы pages. Значения полей с помощью функции mysql_fetch_array() помещаются в массив и в качестве элементов массива присваивают переменной $res. Затем с помощью цикла do - while выводятся названия всех страниц в виде ссылок. Ссылка ведет в форму для редактирования содержимого страницы. В поля формы сразу внесена существующая информация из БД. При нажатии кнопки «Сохранить изменения» данные из формы передаются в файл-обработчик формы «update.php». В файле «update.php» осуществляется проверка заполнены ли были все поля формы и, если они заполнены производится обновление базы данных. После обновления выбранной страницы выводится ссылка: «Редактировать другую страницу» ведущая обратно к списку страниц. Если обновление не удалось, выводится сообщение об ошибке.

Заключение

В общей части дипломного проекта была рассмотрена классификация типов сайтов, виды обеспечения работы веб-сайта: описание информационного, программного и технического обеспечения сайта. Выполнен обзор основных этапов создания сайта. Рассмотрены теоретические основы построения веб-сайтов: принципы работы web-сервера, основы проектирования web-узла на языке PHP, основы работы с базой данных MySQL, взаимодействие PHP сайта и базы данных MySQL.

В практической части приведена характеристика объекта проектирования сайта - компании занимающейся продвижением оздоровительных восточных практик. Был выполнен обзор сайтов компаний, представляющих данный сегмент рынка, и проведен их сравнительный анализ, выявлены сильные и слабые стороны. Поставлены задачи, которые должен решить разрабатываемый сайт.

Последовательно и детально разобраны все практические этапы создания сайта с помощью языка программирования PHP: от разработки дизайна и выбора концепции до создания блока администратора.

Список используемых источников

1. Овчинников Р., Сухов С. Корпоративный веб-сайт на 100%. Требуйте от сайта большего! - СПб.: Питер, 2009. -- 320 с.: ил.

2. Джонс К. 140 технологий раскрутки сайтов. Все, что нужно знать о SEO, чтобы вывести свой сайт в лидеры / Джонс К. - М.: Рид Групп, 2011. - 352 с.

3. Типы и виды сайтов [электронный ресурс]: описание видов сайтов

4. 6 основных этапов разработки сайта [электронный ресурс]: обзор этапов создания проекта

5. Прохоренок Н.А. HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера. -- 3-е изд., перераб. и доп. -- СПб.: БХВ-Петербург, 2010. --912 с.: ил.

6. Портал о PHP [электронный ресурс]: типы данных языка PHP

7. Ульман Л. MySQL / Лари Ульман; Пер. с англ. Слинкина А.А. - М.:ДМК Пресс; СПб.:Питер, 2004.- 352с.:ил.

8. Томсон Лаура Разработка Web-приложений на PHP и MySQL: Пер. с англ. / Лаура Томсон, Люк Веллинг.- 2-е изд., испр. - СПб.: ООО «ДиаСофтЮП», 2003. - 672 с.

9. Логвиненко Г.М. Декоративная композиция: учеб. пособие для студентов вузов, обучающихся по специальности 030800 / Г.М. Логвиненко. - М.: Гуманитар. изд. центр ВЛАДОС, 2005. - 144с.: ил.

10. Котеров Д.В. Самоучитель PHP 4. - СПб.: БХВ-Петербург, 2003. - 576 с.: ил.

11. Информация о getElementById [электронный ресурс]: информация о методе getElementById. Режим доступа: http://getelementbyid.ru/ - 23.04.2012.

12. Информационные и опционные функции PHP [электронный ресурс]: описание функции get_magic_quotes_gpc.



Приложение А

Листинг главной страницы

<?php require_once("include/config.php");

$query = mysql_query("SELECT title, description, keywords, text FROM

pages WHERE page_id = 'index'");

if (!$query)

{

exit(mysql_error());

}

$res = mysql_fetch_array($query);

require_once("parts/meta.php");?>

<div id="wrapper">

<div id="verh"></div>

<div id="left"></div>

<div id="prav">

<!--Обработчик события - наведение курсора мыши на ссылку-->

<script type="text/javascript">

function parMouseOver(objTemp) {

objTemp.style.color = "#FFF";

}

function parMouseOut(objTemp) {

objTemp.style.color = "#000000";

}

</script>

<?php echo $res['text'];?>

</div>

</div>

<!--Подключаем нижний графический элемент-->

<div id="footer">

<?php include ("blocks/footer.php");?>

</div>

</body>

</html>



Приложение Б

Листинг файла «admin.php»

<?php include_once('../include/config.php');?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01

Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-

1251">

<title>Редактирование страниц</title>

</head>

<body>

<?php

if(!$_SESSION['auth']) {

return exit('Вы не авторизированны');

}

echo "Добро пожаловать

&nbsp;<b>".$_SESSION['auth']."</b>&nbsp;||&nbsp; <a

href='index_a.php?exit=del'>Выйти</a>";

if($_GET['exit'] == "del") {

session_destroy(); //Удаление сессии

}

?><br />

<a href="re.php"><b>Изменить данные администратора</b></a>

<br />

<? if (isset($_GET['page_id']))

{

$page_id = $_GET['page_id'];

}

?>

<h2>Редактирование содержимого:</h2>

<div style="text-decoration:none; font-family:Arial, Helvetica, sans-serif;

font-size:13px">

<?php

if (! isset($page_id))

{

echo "<h4><p>Выберите страницу для редактирования:</p></h4>";

//Делаем запрос к БД для вывода списка страниц

$query = mysql_query ("SELECT title, page_id FROM pages");

$res = mysql_fetch_array($query);

do

{

printf("<p><a href='admin.php?page_id=%s'>%s</a></p>", $res['page_id'],

$res['title']);

}

while ($res = mysql_fetch_array($query));

}

else

{

$query = mysql_query ("SELECT * FROM pages WHERE page_id =

'$page_id'");

$res = mysql_fetch_array($query);

print <<<HERE

<form name = "update" action = "update.php" method = "post">

<p>Название страницы<br>

<input value = "$res[title]" type = "text" name = "title"></p>

<p>Мета-описание страницы<br>

<input value = "$res[description]" type = "text" name = "description"></p>

<p>Ключевые слова для страницы<br>

<input value = "$res[keywords]" type = "text" name = "keywords"></p>

<p>Основной контент страницы<br>

<textarea type = "text" name = "text" cols = "68" rows =

"15">$res[text]</textarea></p>

<input type = "hidden" name = "page_id" value = "$res[page_id]">

<p><input type = "submit" name = "submit" value = "Сохранить

изменения" id = "submit"</p>

</form>

HERE;

}

?>

</div>

</body>

</html>

Размещено на Allbest.ru