Занятие 11. "Создание раздела сайта: Заказать"
На этом занятии мы создадим последний раздел сайта: - реализуем раздел Заказать; - изучим методику отправления данных с веб-страницы; - рассмотрим методику приема данных из PHP; - изучим запись в файл с помощью PHP.
На этом занятии мы создадим последний раздел нашего сайта-Заказать. Этот раздел будет самым сложным по реализации,для его создания мы изучим несколько новых тем. Давайте посмотрим, что у нас должно получиться в результате (см.рис. 11.1):
Рис. 11.1
В самом верху представлен заголовок, ниже находится общая информация по заказу товаров. Еще ниже находится таблица с текущими остатками товаров (см. рис.1). В самом низу расположена форма для отправки контактных данных(см. рис. 11.2):
Рис. 11.2
При нажатии на кнопкуЗаказать звонок –над таблицей с остатками появляется информационное сообщение. В сообщении выводится информация о неверном заполнении контактных данных или сообщение об успешном приеме заявки (см. рис. 11.3):
Рис. 11.3
При успешном приеме заявки –данные передаются на сайт.
Создание верхней части раздела
Задача:сформировать верхнюю часть раздела сайтаЗаказать.
- В верхней части должен отображаться заголовокПравила заказа товаров. Под заголовком должен располагаться текст из файла Заявки.txt
- Внешний вид заголовка и текста должны в точности соответствовать разделам сайта Главная, Товары, Контакты
- Фрагмент HTML-разметки нужно поместить в таблицу базы данных razmetka, в строку сid=8.
- При переходе пользователя в раздел Заказать- HTML-разметка раздела должна выводиться при помощи PHPв самом верху страницы.
Перейдем в PHPMyAdmin, на закладкеSQL запишем запрос для добавления трех новых строк в таблицу razmetka (см. рис.11.4):
Рис. 11.4
Добавим сразу три строки: одну для разметки верхней части раздела и две для таблицы, которая будет расположена ниже. Запрос будет выглядеть так:
INSERT INTO razmetka (id,html) VALUES (8,'-');
INSERT INTO razmetka (id,html) VALUES (9,'-');
INSERT INTO razmetka (id,html) VALUES (10,'-');
Нажмем кнопку OK. В результате, в таблице razmetkaпоявятся три новых строки (см. рис. 11.5):
Рис. 11.5
Далее в эти строки мы поместим разметку для формирования раздела Заказать. Теперь нам нужно сформироватьHTML-код для верхней части раздела. Для этого перейдем в файл index.phpи найдем блок div с идентификатором sheet2:
<div id="sheet2">
В этом блоке выводится содержимое центральной части на белом фоне. Внутри этого блока находится кодPHP. Над PHP-кодомдобавим HTML-код:
<h1 class="h1_opisan">Правила заказа товаров</h1>
<br>
<div class="div_opisan">
<br/><br/>
</div>
В самом верху расположен заголовок h1,ниже находится блок div, в этот блок нужно поместить текст из файла Заявки.txt. Обратите внимание на тег <br/>, который вставлен для формирования отступа в виде дополнительной пустой строки.
К заголовку подключен класс CSS: h1_opisan, а к блоку подключен класс CSS: div_opisan.Это сделано для того, чтобы придать внешний вид заголовка и текста, как и в других разделах сайта. В файле puh.cssуже имеются селекторы по классу: .h1_opisanи .div_opisan.
Теперь разметка для верхней части раздела готова! Переместим ее из файла index.phpв таблицу базы данных razmetkaв строку с id=8 (см. рис. 11.6):
Рис. 11.6
Осталось записать программный код PHP, который выведет разметку, когда пользователь перейдет в раздел Заказать. Для этого добавим несколько строчек в конец PHP-вставки:
<?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);
}
?>
Было сделано продолжение блока if– также как для разделов Главная и Контакты.
Посмотрим на результат в браузере. При переходе в раздел Заказать выводится общая информация для заказа товаров.