Занятие 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)
Создание таблицы дляHtml-разметки
Добавим еще одну таблицу в базу данных. Эта таблица будет использоваться для хранения HTML-разметки. Фрагменты разметки можно размещать не только в файлах, но и в базе данных. В этом случаеHTML-код извлекается из базы данных при помощиPHP, а затем вставляется в нужную часть страницы. Такой подход позволяет создавать динамические страницы.Динамическаястраница может иметь различный вид, в зависимости от действий пользователя.
Задача:создать новую таблицу:
Имя таблицы: razmetka
Количество колонок:две
Первая колонка: Имя-id, тип-INT, автонумерация
Вторая колонка: Имя-html, тип-TEXT
Перейдем в PHPMyAdmin, сверху нажмем на наименование базы данных puh (см. рис. 9.3):
Рис. 9.3
Введем наименование таблицы и количество колонок (см. рис. 9.4):
Рис. 9.4
Нажмем кнопку OK. Далее введем названия колонок и типы данных (см. рис. 9.5):
Рис. 9.5
Поставим признак автонумерации для поля id (см.рис. 9.6):
Рис. 9.6
Нажмем кнопку Сохранить. В списке появится новая таблица (см.рис. 9.7):
Рис. 9.7
Таблица razmetka является третьей и последней таблицей в базе данных puh.
Можно сказать, что формирование структуры базы данных на этом закончено. В поле html будет храниться фрагмент HTML-кода, а поле id будет являться номером строки. По номеру нужный фрагментHTMLбудет извлекаться и размещаться на веб-странице.
Для формирования левой и правой боковой части нам понадобятся пять фрагментов HTML:
Четыре фрагмента для левой боковой части (для каждого раздела сайта).
Один фрагмент для правой боковой части (для Flash-ролика).
Задача:Создать пять новых строк в таблице razmetka.
Значение поля id:1,2,3,4,5
Значение поля html:‘-’
Перейдем на закладкуSQL, сформируем запрос на добавление новых пяти строк(см. рис. 9.8).
Рис. 9.8
Запрос выглядит так:
INSERT INTO razmetka (id,html) VALUES (1,'-');
INSERT INTO razmetka (id,html) VALUES (2,'-');
INSERT INTO razmetka (id,html) VALUES (3,'-');
INSERT INTO razmetka (id,html) VALUES (4,'-');
INSERT INTO razmetka (id,html) VALUES (5,'-');
Нажмем на кнопку OK. В колонку HTML будут вставлены соответствующие фрагменты HTML-кода (см. рис. 9.9):
Рис. 9.9