2018-01-08
361
Для создания серверной части посредством PHP понадобится среда разработки Eclipse for PHP. На момент создания данного методического пособия официальный сайт находится по адресу: http://www.eclipse.org/ (оригинальная версия находится по этому адресу).
Установка Eclipse for PHP производится стандартным способом.
· Запустите среду разработки Eclipse for PHP.
· Создайте новый PHP проект, при помощи контекстного меню «File»-«New»-«PHP Project» (рис. 1.7).
Рис. 1.7
В поле «Project name» введите имя проекта «simp» и нажмите кнопку «Finish» (рис. 1.8).
Рис. 1.8
В окне навигации проекта выберите папку «simp», нажмите правой кнопкой мыши по иконке папки и выберите пункт «New» - «PHP File». (рис. 1.9).
Рис. 1.9
В поле «File name:» введите «index.php» и нажмите кнопку «Finish» (рис. 1.10).
Рис. 1.10
Аналогичным образом создайте в проекте папки «doc» и «img».
В корневой папке «simp» создайте аналогичным образом файлы «lib.php» «simp.css» «tovar.php»
Результат продемонстрирован на рис 1.11
Рис 1.11
Откройте файл проекта для верстки: «lib.php», в него поместите следующий код:
|
|
|
<?php
//Параметры подключения к БД
@ error_reporting (E_STRICT);
define ("ServerName", "localhost");
define ("UserLogin", "root");
define ("UserPassword", "");
define ("DbName", "sim");
Дополните код следующей функцией «makeOpisan()»:
//функци для формирования описания товаров
function makeOpisan () {
// Подключаемся кMySQL
$db = mysqli_connect (ServerName, UserLogin, UserPassword) or die ("cannot connect");
// Если подключение выполнено
if ($db) {
// Выбираем базу данных с проверкой успешного выбора
if (mysqli_select_db ($db, DbName) or die ("cannot select DB")) {
//Указываем использование кодировки UTF-8
mysqli_query ($db, "SET names 'utf8'");
$rez = mysqli_query ($db, "SELECT * FROM opisan");
$out_page = "";
// Перебираем десять строк результат запроса
for ($i = 0; $i < 10; $i ++) {
//Получаем очередную строку из запроса
$row = mysqli_fetch_row ($rez);
//Получаем наименование
$naim = $row [1];
//Получаем описание
$txt = $row [2];
//Добавляем в конец строки
$out_page.= "<h1 class='h1_opisan'>{$naim}</h1>". "<div class = 'div_opisan'>{$txt}</div><br/>";
}
// Выводим на страницу браузера
echo $out_page;
}
//Отключаемся от MySQL
mysqli_close ($db);
}
}
Далее добавьте функцию «getIdMenu()» для получения раздела меню:
// Получение номера раздела меню
function getIdMenu () {
// Результат
$tmp = 0;
// Если есть данные вGET-запросе
if ($_GET) {
// Если параметр: id имеет значение вGET-запросе
if ($_GET ["id"]) {
// Получаем значение параметра: id
$tmp = $_GET ["id"];
}
// Если это значение не лежит в интервале [1..3],
// то записываем нулевое значение в$tmp
if (! (($tmp >= 1) && ($tmp <= 3)))
$tmp = 0;
}
// Возвращаем значение из функции
return $tmp;
}
Далее добавьте функцию «getHTML()» для получения HTML-разметки из базы данных и вывода на веб-страницу:
// Получение HTML-разметки из базы данных и вывод на веб-страницу
|
|
|
function getHTML ($nom) {
// Результат работы функции
$html = "";
// Подключаемся кMySQL
$db = mysqli_connect (ServerName, UserLogin, UserPassword) or die ("cannot connect");
// Если подключение выполнено
if ($db) {
// Выбираем базу данных с проверкой успешного выбора
if (mysqli_select_db ($db, DbName) or die ("cannot select DB")) {
//Указываем использование кодировки UTF-8
mysqli_query ($db, "SET names 'utf8'");
//Выполняем запрос для получения данных
$rez = mysqli_query ($db, "SELECT * FROM razmetka WHERE (id={ $nom })");
//Определяем количество строк в результате запроса
$kol_str = mysqli_num_rows ($rez);
// Если получена одна строка
if ($kol_str == 1) {
//Получаем строку
$row = mysqli_fetch_row ($rez);
// Получаем значение поля: html
$html = $row [1];
}
}
//Отключаемся от MySQL
mysqli_close ($db);
}
// Выводим HTML на страницу
echo $html;
}
Далее добавьте функцию «getHTML()» для обработки заявки заказа в интернет магазине:
// Функция обработки заявки
function testPost () {
// Если была нажата кнопка отправления данных
if ($_POST ["btn"]) {
//Переменная для сообщения
$rez = "";
// Если поле Имя не заполнено
if (trim ($_POST ["user_name"]) == "")
$rez = "Введите Имя!";
// Если поле Телефон не заполнено
else if (trim ($_POST ["user_tel"]) == "")
$rez = "Введите Телефон!";
else {
//Данные для записи в файл
$info = "Name: ". trim ($_POST ["user_name"]). " Tel: ". trim ($_POST ["user_tel"]);
// Создаем случайное имя файла
$file_name = "". rand (1000000, 9999999). ".txt";
// Сообщение о приеме заявки
$rez = "Заявка принята!";
// Создаем файл для записи
$f = fopen ("./doc/". $file_name, "w");
// Если файл создан
if ($f) {
// Записываем в него данные
fwrite ($f, $info);
// Закрываем файл
fclose ($f);
}
}
//Выводим сообщение на веб-страницу ввиде заголовка
echo "<h1 class='h1_opisan' style='font-size: 35px;'>{$rez}</h1>";
}
}
Далее добавьте функцию «makeTabl()» для обработки заявки заказа в интернет магазине:
//Функция для формирования таблицы товаров
function makeTabl () {
// Подключаемся к MySQL
$db = mysqli_connect (ServerName, UserLogin, UserPassword);
// Если подключение выполнено
if ($db) {
//Выбираем базу данных с проверкой успешного выбора
if (mysqli_select_db ($db, DbName) {
// Указываем использование кодировки UTF-8
mysqli_query ($db, "SET names 'utf8'");
// Запрос для получения остатков товаров
$sql1="SELECT img, naim, SUM(kol) FROM tovar GROUP BY naim ASC";
// Выполняем запрос
$rez1 = mysqli_query ($db, $sql1);
// Запрос для получения наименований товаров
$sql2 = "SELECT naim FROM opisan";
// Выполняем запрос
$rez2 = mysqli_query ($db, $sql2);
// Запрос для получения изображения товаров
$sql3 = "SELECT img FROM tovar";
// Выполняем запрос
$rez3 = mysqli_query ($db, $sql3);
// Переменная для вывода тегов на веб-страницу
$out_page = "";
// Перебираем десять строк результата запроса
for ($i=0;$i<10;$i++) {
// Получаем очередную строку из запроса
$row1= mysqli_fetch_array ($rez1);
// Получаем очередную строку из запроса
$row2= mysqli_fetch_array ($rez2);
// Получаем очередную строку из запроса
$row3= mysqli_fetch_array ($rez3);
// Получаем количество
$kol=$row1[2];
// Получаем наименование товара
$naim=$row2[0];
// Получаем изображение
$img=$row3[0];
//Добавляем строку таблицы с двумя ячейками,
// в ячейки помещаем наименование товара и количество
$out_page.="<tr><td><img src= $img></td><td>{$naim}</td><td>{$kol}</td></tr>";
}
// Выводим на страницу браузера
echo $out_page;
}
//Отключаемся от MySQL
mysqli_close ($db);
}
}
?>
Сохраните файл lib.php и перейдите к верстке главной страницы index.php:
В самом начале файла index.php подключите файл lib.php при помощи конструкции однократного включения require_once ' ';
<?php
require_once 'lib.php';
?>
После подключения конструкции однократного включения require_once 'lib.php'; поместите в файл index.php следующий код:
<html>
<head>
<title>Кондитерская симпсонов</title>
<meta http-equiv= "Content-Type" content= "text/html" charset= "utf-8" />
<!--Подключаем иконку для сайта-->
<link rel= "shortcut icon" href= "img/icon.png" type= "image/x-icon" >
<!--Разрешаем поисковым роботам индексировать страницы сайта-->
|
|
|
<meta name= "robots" comtent= "all" />
<link href= "simp.css" rel= "styLesheet" type= "text/css" />
<!--Указываем заголовок сайта в списке поисковой системы-->
<meta name= "description" content= "Project Simpson and Company" />
<!--Указываем ключевые слова для поисковой системы-->
<meta name= "keywords" content= "Симпсоны,пончики,заказать,кондитерские изделия" />
<script type= "text/javascript" src= "puh.js" ></script>
</head>
Дополните файл index.php следующим кодом:
<body onload="func()">
<div id= "top" >
<a href= "index.php" target= "_self" >
<img src= "img/shapka.png" border= "0" id= "img_logo" />
</a>
</div>
<div id= "menu" >
<ul>
<li><a class= "buttons" href= 'index.php' target= "_self" >Главная</a></li>
<li><a class= "buttons" href= 'index.php?id=1' target= "_self" >Товары</a></li>
<li><a class= "buttons" href= 'index.php?id=2' target= "_self" >Заказать</a></li>
<li><a class= "buttons" href= 'index.php?id=3' target= "_self" >Контакты</a></li>
</ul>
</div>
<div id= "sheet" align= "center" >
<?php
// Получаем и выводим левую боковую часть
getHTML (getIdMenu () + 1)?>
</div>
<div id= "main" >
<div id = "cen" >
<?php
// Получаем номер раздела меню
$id_menu = getIdMenu ();
if ($id_menu == 1) { // Если номер: 1 -Товары
// Выводим описание товаров
makeOpisan ();
} else if ($id_menu == 0) { // Если номер: 0 - Главная страница
// Получаем разметку по номеру
getHTML (6);
} else if ($id_menu == 3) { // Если номер: 3 - Контакты
// Получаем разметку по номеру
getHTML (7);
} else if ($id_menu == 2) { // Если номер: 2 - Заказы
// Получаем разметку по номеру
getHTML (8);
//Принимаем данные через POST-запрос
testPost ();
//Получаем разметку верхней части таблицы
getHTML (9);
//Вывод десяти строк таблицы с остатками товаров
makeTabl ();
// Получаем разметку нижней части таблицы
getHTML (10);
}
?>
</div>
</div>
<div id= "sidebar" align = "center" >
<?php
// Получаем и выводим правую боковую часть
getHTML (5);
?>
</div>
<div id= "footer" >
</div>
</body>
</html>
После написания главной страницы напишите php – скрипт для работы с товарами интернет магазина. Откройте файл tovar.php и поместите в него следующий код:
|
|
|
<?php
$db = mysqli_connect ("localhost", "root", "");
//возврат количества товаров
function javaKol () {
// Переменная, в которой будет результат остатков
$otvet = "";
global $db;
// Запрос для подсчета остатков
$sql = "SELECT naim, SUM(kol) FROM tovar GROUP BY naim ASC";
//Выполним запрос и получим результат:
$rez = mysqli_query ($db,$sql);
// Перебираем десять строк результата запроса
for ($i = 0; $i < 10; $i ++) {
//echo $otvet."\n";
// Получаем очередную строку из запроса
$row = mysqli_fetch_row ($rez);
// Получаем количество
$kol = $row [1];
// Добавляем количество в конец строки
$otvet.= $kol;
// Добавляем разделитель тильда (~)
if ($i!= 9)
$otvet.= "~";
}
// Выводим на страницу браузера
echo $otvet;
}
Дополните Файл tovar.php функцией «getQuery()»:
//Добавление даты на момент изменения данных в БД
function getQuery () {
global $db;
//получаем дату и время на момент записи в бд
$date_time = date ('Y-m-d [H:i:s]');
//перебираем в цикле 10 параметров
for ($i = 1; $i <= 10; $i ++) {
//переменная для имени параметра
$tmp = "tov". $i;
//если такой параметр передан в гет-запросе
if ($_GET [$tmp]) {
//значение текущего параметра-колич товара
$kol = $_GET [$tmp];
//строка запроса
$q = "INSERT INTO tovar (naim, kol, dv)". "VALUES ({$i},{$kol}, '{$date_time}')";
//выполняем запрос
mysqli_query ($db,$q);
}
}
}
Дополните Файл tovar.php функцией «runMySQL()»:
//Выполнение операций с БД
function runMySQL () {
global $db;
//если подключение выполнено
if ($db) {
//выбираем бд с проверкой успешного выбора
if (mysqli_select_db ($db, "sim")or die ("cannot select DB")) {
//указываем кодировку
mysqli_query ($db, "SET names");
//выполняем запрос на добавление
getQuery ();
// возврат количества товаров
javaKol ();
}
//отключаемся
mysqli_close ($db);
}
}
// Если есть данные в гет-запросе
if ($_GET) {
// выполняем проверку формата гет-запроса
//флаг проверки данных
$flag = false;
//цикл, выполняющий 10 шагов
for ($i = 1; $i <= 10; $i ++) {
//переменная для имени параметра
$tmp = "tov". $i;
//если такой параметр передан в гет-запросе
if ($_GET [$tmp]) {
//меняем значение флага
$flag = true;
//прерываем цикл
break;
}
}
//если формат гет-запроса оказался верным
if ($flag) {
runMySQL ();
}
}
?>
Поместите прилагающийся изображения в папку «img» проекта, далее опишите стили для интернет-магазина.
Откройте файл simp.css и поместите в него следующий код:
Для полного ознакомления с каждой функцией воспользуйтесь css справочником: http://htmlbook.ru/css
@CHARSET "UTF-8";
/*Отключение отступов от краёв экрана*/
body, table, tr, td, div, ul, li, img, a, h1, th, input, from {
padding: 0px;
vertical-align: top;
margin: 0px;
background-color: #FFE4C4;
}
/*Логотип/шапка интернет магазина*/
#img_logo {
height: 13%;
width: 100%;
background-size: 100% 100%;
background-position: 70% 70%;
background-repeat: no-repeat;
}
/*Меню интернет магазина*/
#menu {
height: 5%;
width: 100%;
text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
background-repeat: repeat;
background-attachment: scroll;
background-position: top left;
background-size: cover;
font-size: 15%px;
}
/*Стиль кнопок меню*/
a .buttons {
display: inline-block;
text-decoration: none;
padding: 0.5em;
outline: none;
border-radius: 5%;
}
/*Стиль неактивных кнопок меню*/
a .buttons:hover {
background-image:
radial-gradient(1% 45% at 0% 50%, rgba(0,0,0,.6), transparent),
radial-gradient(1% 45% at 100% 50%, rgba(0,0,0,.6), transparent);
}
/*Стиль активных кнопок меню*/
a .buttons:active {
background-image:
radial-gradient(45% 45% at 50% 100%, rgba(255,255,255,.9), rgba(255,255,255,0)),
linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,.3));
box-shadow:
inset rgba(162,95,42,.4) 0% 0% 0% 1%,
inset rgba(255,255,255,.9) 0% 0% 1% 3%;
}
/*Стиль списка*/
#menu ul {
list-style: none;
}
/*Стиль списка*/
#menu li {
float: left;
padding-top: 0%;
padding-left: 17%;
}
/*Стиль списка*/
#sheet {
height: 69%;
width: 20%;
background-color: #FFE4C4;
float: left;
}
/*Стиль списка*/
#main {
height: auto;
width: 60%;
background-color: #FFE4C4;
float: left;
padding: 0% 0%;
}
#cen {
width: 60%;
height: auto;
padding: 0% 25%;
}
#sidebar {
height: 69%;
width: 20%;
background-color: #FFE4C4;
background-repeat: repeat;
background-attachment: fixed;
background-position: top left;
float: right;
}
/*Подвал/нижняя картинка интернет магазина*/
#footer {
height: 13%;
width: 100%;
background-image: url('img/podval.png');
background-size: 100% 100%;
background-position: 70% 70%;
background-repeat: no-repeat;
clear: both;
}
/*Стиль блока описания*/
.div_opisan {
text-decoration: none;
font-size: 100%;
font-family: verdana, arial, serif;
font-style: normal;
font-weight: normal;
line-height: auto;
color: black;
width: 100%;
white-space: normal;
text-align: justify;
}
/*Стиль заголовка*/
.h1_opisan {
width: 100%;
text-align: center;
text-decoration: none;
font-size: 100%;
font-family: verdana, arial, serif;
font-style: italic;
text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
}
/*Стиль левого заголовка*/
.left_b h1 {
color: rgba(0,0,0,0.6);
text-shadow: 2px 8px 6px rgba(0,0,0,0.2),
0px -5px 35px rgba(255,255,255,0.3);
}
/*Стиль левого заголовка при наведении на него*/
.left_b h1 :HOVER {
background-color: #666666;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
}
#right_b {
padding-top: 0%;
padding-bottom: 5%;
width: 100%;
}
/*Стиль правого заголовка*/
#right_b h1 {
color: rgba(0,0,0,0.6);
text-shadow: 2px 8px 6px rgba(0,0,0,0.2),
0px -5px 35px rgba(255,255,255,0.3);
}
/*Стиль правого заголовка при наведении на него*/
#right_b h1 :HOVER {
background-color: #666666;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
}
/*Стиль таблицы*/
#zakaz td, #zakaz th, #zakaz input
{text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
white-space: nowrap;
text-decoration: none;
font-size: 100%;
font-family: ‘Verdana’, sans-serif;
font-style: normal;
line-height: 100%;
color: black;
}
/*Стиль шапки таблицы*/
#zakaz th
{
text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
color: #000000;
}
/*Стиль таблицы*/
#zakaz td, zakaz th
{
width: 100%;
vertical-align: middle;
text-align: center;
border: black 1% solid;
background-color: #FFE4C0
}
/*Стиль формы заказа товара*/
#zakaz input
{
text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
width: 100%;
height: 135%;
background-color: #FFE4C0;
padding: 3%;
color: black;
}
