Перейдем в файл index.php, в самом верху файла, перед всеми тегами HTMLдобавим вставку PHP:
<?php
require_once 'lib.php';
?>
Команда require_onceподключает внешний файл к index.php. После этого можно вызывать функции из файла lib.php.Файл lib.php будет основным для создания PHP-кода, а в файлеindex.php будет прописан вывод уже готовых функций.
Спустимся ниже и найдем теги div для формирования белой области. Внутрь тегаdiv с идентификатором sheet2 добавим PHP-вставку:
<div id="sheet">
<div id="sheet1"></div>
<div id="sheet2">
<?php
makeOpisan();
?>
</div>
<div id="sheet3"></div>
</div>
Мы записали вызов функции makeOpisan(),которую создадим внутри файла lib.php.Эта функция выполнит получение данных - описаний товаров из базы данных, и выведет их на страницу. Другими словами, вместо вызова этой функции будет вставлен большой фрагмент тегов с текстом.
Перейдем в файл: lib.php и добавим в него код:
<?php
define("ServerName", "localhost");
define("UserLogin", "root");
define("UserPassword", "");
define("DbName", "puh");
?>
Команда define() создает константу. Значение,указанное вторым параметром, будет подставляться вместо имени, указанного первым параметром. Мы добавили четыре строки с нужными данными для подключения к нашей базе: адрес сервера MySQL, имя пользователя,пароль пользователя, имя базы данных. В файле tovar.php мы явно указывали эти подключения, но в случае переноса сайта этот вариант неудобен. При переносе сайта –данные подключения к базе изменятся, и придется во всех местах программного кода вносить исправления. При использовании define() изменения вносятся в одном месте,так как в коде везде будут указаны значения первого параметра команды define(). В файле tovar.phpмы уже не будем вносить изменения, но далее будем использовать более правильную и удобную схему.
Создадим функцию makeOpisan():
<?php
// Константы для подключения к базе данных
define("ServerName", "localhost");
define("UserLogin", "root");
define("UserPassword", "");
define("DbName", "puh");
// Функция для формирования описания товаров
function makeOpisan()
{
}
?>
Будем формировать запрос к базе данных.
Мы делали уже похожее действие и в файле tovar.php. В функции runMySQL()имеется необходимый код. Скопируем и вставим этот фрагмент в функцию makeOpisan().Потом уберем оттуда ненужные строки и вставим наши константы для подключения к базе данных. В итоге получится следующий код (см. рис. 8.21):
Рис. 8.21
Обратите внимание, что теперь вместо явных значений для подключения к базе стоят константы из строк с командой define():
// Выбираем базу данных с проверкой успешного выбора
if (mysql_select_db(DbName,$db))
{
//Указываем использование кодировки UTF-8
mysql_query("SET names 'utf8'",$db);
// В этом месте будет добавлен код !!!
}
//Отключаемся от MySQL
mysql_close($db);
}
}
Такой программный код выполняет подключение к MySQL, выбирается база данных, устанавливается кодировка UTF-8 и потом выполняется отключение. После установки кодировкиUTF-8,добавим программный код для извлечения описания товаров из базы данных и выведем на страницу:
Появился текст с описанием товаров. Рассмотрим программный код:
$rez = mysql_query("SELECT * FROM opisan",$db);
Эта строка выполняет запрос выборки данных из таблицы opisan, результат попадает в переменную $rez.В результате запроса получится десять строк – все строки в таблицеopisan:
$out_page = "";
В переменную $out_page будет помещен набор тегов с описанием текста, который будет выводиться на страницу:
// Перебираем десять строк результат запроса
for ($i=0;$i<10;$i++)
{
//Получаем очередную строку из запроса
$row = mysql_fetch_row($rez);
}
Цикл forвыполнит десять шагов, потому что строк в таблице именно десять!
// Получаем очередную строку из запроса
$row = mysql_fetch_row($rez);
На каждом шаге цикла в переменную $row будет извлекаться очередная строка из результата $rez.
// Получаем наименование
$naim = $row[1];
//Получаем описание
$txt = $row[2];
Из строки получим значение поля: naim и txt, их номера соответственно - 1и 2, нумерация колонок идет с нуля.
Очередной фрагмент данных добавляется в конец строки. Вместо переменных, вставленных в фигурных скобках: {$naim}и{$txt}, будут подставлены их значения –это наименование товара и его описание. Строки складываются при помощи сложения строк через операторточка(.).
Тег h1–это заголовок. Текст заголовка выводится как обычный текст с переходом на следующую строку. Поисковая система отличает теги заголовков от других тегов,поэтому подобную информацию лучше заключать именно в эти теги. В конце стоит тег <br/> - это перевод строки, чтобы сделать дополнительный отступ между описаниями.Обратите внимание, что к тегам h1и divподключены атрибуты class.Это сделано для использования в CSS. Если кавычки находятся внутри двойных кавычек, то необходимо использовать одиночные кавычки!
"<h1 class='h1_opisan'>{$naim}</h1>"
После цикла for:
// Выводим на страницу браузера
echo $out_page;
значение переменной$out_page выводится на страницу браузера.
Перейдем в браузер и наведем курсор мыши на белую прямоугольную область. В контекстном меню страницы(правая клавиша мыши) выберем: Просмотр кода страницы (см. рис.8.23):
Рис. 8.23
Открывшийся HTML-код пролистнем вниз и найдем тег div с идентификатором sheet2:
<div id="sheet2">
Посмотрите на фрагмент кода, который идет далее (см.рис. 8.24):
Рис. 8.24
Этот программный код сформирован из PHPфункцией makeOpisan().
Если бы мы создавали страницу только при помощи HTML, без использования PHP, то этот большой фрагмент пришлось бы разместить на странице, внутри тегов HTML!
Остался последний момент –задать внешний вид описанию товаров. Для этого перейдем в файл puh.cssи в самом низу добавим два селектора по классу со следующими свойствами:
/*Фрагмент с текстом описания товара*/
.div_opisan
{
text-decoration: none;
font-size: 18px;
font-family: verdana, arial, serif;
font-style: normal;
font-weight: normal;
line-height: 22px;
color: #000066;
width: 530px;
white-space: normal;
text-align: justify;
}
/*Заголовок описания товара*/
.h1_opisan
{
width: 530px;
text-align: center;
text-decoration: none;
font-size: 25px;
font-family: verdana, arial, serif;
font-style: italic;
font-weight: bold;
line-height: 40px;
color: red;
}
Посмотрим результат в браузере (см. рис. 8.25):
Рис. 8.25
В результате мы получили внешний вид описания товаров, как на образце.
Разберем более подробноCSS-код. Селектор по классу указывается через операторточка (.):
.div_opisan
{
}
В отличие от селектора по идентификатору –селектор по классу может применяться к целой группе тегов. В данном случае получается по десять тегов: div и h1.Указанные CSS-свойства определяют внешний вид текста, многие свойства нам уже знакомы.
white-space: normal;
Свойство white-space со значениемnormalуказывает,что слова текста будут переноситься на следующую строку. При помощи этого свойства можно запретить перенос слов,если поставить значение nowrap:
text-align: justify;
justify –это выравнивание текста по ширине, по правому и левому краю одновременно.
font-family: verdana, arial, serif;
Когда несколько шрифтов перечисляется через запятую, то следующий по порядку шрифт, браузер будет применять,если не поддерживает тот, который находится в списке левее.
line-height: 40px;
line-height –это интервал между строками.
width: 530px;
Текст вписывается внутрь белой области, ширина которой550 пикселей, но при этом имеет отступ слева и справа по10 пикселей,поэтому ширина текста 530пикселей.
text-decoration: none;
Свойство text-decorationпозволяет сделать текст, например,подчеркнутым или отключить подчеркивание.
Рекомендуется!!!Текст ссылок лучше всегда делать подчеркнутым, а обычный текст никогда не подчеркивать. Нарушение этого правила сбивает с толку пользователя сайта, который привык к подчеркнутым ссылкам!
color: red;
Свойство color задает цвет текста.
font-size: 25px;
Свойство font-size задает размер текста.
font-style: italic;
Свойство font-style задает наклонность текста.
font-weight: bold;
Свойство font-weight задает жирность текста.
На этом создание раздела с описанием товаров закончено!
Итог занятия:На этом занятии мы:• создали и заполнили данными таблицу описания товаров;• создали главное меню сайта;• сформировали раздел описания товаров на основании данных из базы MySQL.
Занятие 9 "Создание левой и правой боковой части страницы"
На этом занятии организуем переход по пунктам меню: - создадим левую боковую часть с информацией о разделах сайта; - создадим правую боковую часть с Flash-вставкой.
На предыдущих занятиях мы создали основной каркас нашего сайта,меню и раздел описания товаров. На этом занятии мы продолжим работу над нашим интернет-магазином, его внешним видом и функционалом. Вот, что должно у нас добавиться:
Рис. 9.1
Для решения поставленных задач нам понадобится:
· пять новых изображений;
· Flash-ролик для расположения в правой части страницы;
· текстовый файл c тегами для вставкиFlash-ролика.
Файлы: r1.png, r2.png, r3.png, r4.png–это картинки для четырех пунктов меню, которые будут отображаться слева при переходе по разделам сайта. Следующий файл shar.png –предназначен для создания фона у Flash-ролика. Все изображения подготовлены в графическом редакторе. ФайлFlash.txt –это теги вставки Flash-ролика. Откроем этот файл в программе Блокнот(см. рис. 9.2)
Рис. 9.2
Эти теги мы будем использовать при работе с Flash-роликом.
Последний файл shar.swf –это Flash-ролик, который будет вставляться в правой части страницы (см.рис. 9.1)
