Создание таблицы описания товаров
Начнем с создания новой таблицы в базе данных MySQL.Эта таблица будет состоять из трех колонок и десяти строк. Перейдем вPHPMyAdmin, выберем базу данных puh,нажмем сверху на наименование базы puh (см. рис. 8.3):
Рис. 8.3
Введем имя новой таблицыopisan и количество полей 3 (см. рис.8.4):
Рис. 8.4
Нажмем кнопку OK.
Важно!!!Желательно не заниматься копированием текстовых материалов с других сайтов. Это может быть нарушением авторских прав! Кроме того, рейтинг сайта, содержащий скопированные материалы, может упасть в поисковой системе. Поисковая система может определить признак точного соответствия текста с другим сайтом по одинаковому набору слов. Сайт, разместивший текст позднее по дате, может подозреваться в копировании материалов с другого сайта. Необходимо всегда указывать источник получения информации или изменять исходный текст.
Откроется окно для ввода данных по колонкам. Мы укажем следующие наименования колонок: id, naim, txt (см. рис. 8.5):
Рис. 8.5
Поле id–это нумерация строк в таблице. Пусть это поле имееттипINT (целые числа).Поле naim–наименование товара, пусть имеет тип VARCHARс максимальной длиной 100. Тип поля txt–текстовое описание товара. Тип TEXTиспользуется для хранения большого текстового фрагмента.
Переместимся правее и поставим галочку AUTO_INCREMENTдля поляid и нажмем кнопку Сохранить (см. рис.8.6):
Рис. 8.6
Таблица создана, теперь заполним ее данными. Для этого переходим на закладку SQL и создаем запрос:
INSERT INTO opisan (id,naim,txt) VALUES (1,'-','-');
Копируем этот запрос и вставляем еще девять раз, значение первого поля делаем от 1до 10 (см. рис. 8.7):
Рис. 8.7
Нажимаем кнопку OK для выполнения запроса.
Обратите внимание, что значениями полей naimи txtявляются прочерки. Позже мы вставим вместо прочерков текст из подготовленного файла с описанием товаров. Теперь перейдем к данным таблицы opisan –слева в списке таблиц нажмем на наименование таблицы (см. рис. 8.8):
Рис. 8.8
Данные таблицы можно редактировать. Для каждой строки добавим данные из файла ОписаниеТоваров.txt. Для этого выделим галочкой слева самую верхнюю строку и нажмем на кнопку Изменить (см. рис. 8.9):
Рис. 8.9
Откроется окно редактирования, вместо прочерков из файлаОписаниеТоваров.txt нужно вставить название первого товара Мед и его описание (см. рис. 8.10):
Рис. 8.10
Нажмем кнопку OK –в первой строке появятся данные (см. рис.8.10):
Рис. 8.11
Внимание!!!Копирование и вставка текста удобнее при помощи комбинаций клавиш: - копирование, - вставка.
Таким же образом нужно заполнить все десять строк таблицы.
После вставки текстового описания в поле таблицы базы данных - не нужно редактировать содержимое,а просто нажать кнопку OK!Теперь вся необходимая информация находится в базе данных MySQL. При помощи языкаPHP мы будем извлекать эти данные и выводить на веб-страницу. Сайт может содержать огромное количество текстовых статей.Использование базы данных очень эффективно и удобно для этих целей.
Формирование верхнего горизонтального меню
Для верхнего горизонтального меню мы создали отдельную область, которая находится в ячейке таблицы. Но пока у нас имеется только фон для пунктов меню (см. рис.8.12):
Рис. 8.12
Перейдем в среду разработки Eclipseдля PHP, откроем файл index.php. Найдем в коде блок, при помощи которого создан фон для меню (см. рис. 8.12). Найдем тегdiv:
<div id="vmenu">
</div>
Теги формирования меню будут находиться внутри него. Запишем следующие теги:
<div id="vmenu">
<ul>
<li>Главная</li>
<li>Товары</li>
<li>Заказать</li>
<li>Контакты</li>
</ul>
</div>
Тег ul–это тег для меню, а тег li –это один из пунктов меню. Мы добавили четыре пункта меню с нужными нам названиями. Посмотрим на получившийся в браузере результат (см. рис.8.13):
Рис. 8.13
Пункты меню появились,но расположены они явно не так как должны быть – слева от названий пунктов меню имеются круглые точки, пункты меню расположены вертикально, нет возможности нажать на пункт меню, как на ссылку. Исправим результат –приведем его к нужному виду (как на рис. 8.1).
Во-первых, сделаем пункты меню ссылками. Для этого преобразуем код –добавим тег a, позволяющий добавить ссылку.
<ul>
<li><a href="index.php" target="_self">Главная</a></li>
< li><a href="index.php?id=1" target="_self">Товары</a></li>
< li><a href="index.php?id=2" target="_self">Заказать</a></li>
< li><a href="index.php?id=3" target="_self">Контакты</a></li>
</ul>
Атрибут target="_self" указывает, что ссылка будет открываться в этом же окне.Атрибут href содержит адрес перехода по ссылке.Пункт меню Главная –это домашняя страница, которой соответствует ссылкаindex.php. Для других пунктов меню в конце добавленGET-запрос с одним параметром id. По значению этого параметра при помощи PHP мы будем определять выбранный пункт меню.Подобным образом мы уже работали с параметрами GET-запроса.
Чтобы вместо текста пунктами меню были картинки –необходимо внутрь тега a (вместо имеющегося сейчас текста) поместить картинку при помощи тега img.
Скопируем все семь подготовленных файлов картинок в папкуimgнашего проекта.
Перейдем в Eclipseдля PHP. Кликнем мышью на папку img нашего проекта и вставим изображения (<Ctrl+V>). Изображения попадут в папку проекта (см.рис. 8.14):
Рис. 8.14
При использовании изображений в HTML и CSS требуются их размеры. Напомним, что при наведении курсора мыши на файл изображения (хранящегося на компьютере)появится подсветка с размерами картинки.
Изображения в файлах:menu1.png, menu2.png, menu3.png, menu4.png– предназначены для пунктов меню. Их размеры одинаковые - 150x30.
Добавим вместо текста в пункты меню –изображения. Программный код примет следующий вид:
<ul>
<li><a href="index.php" target="_self">
<img src="img/menu1.png" width="150"height="30"border="0"/>
< /a></li>
<li><a href="index.php?id=1" target="_self">
<img src="img/menu2.png" width="150"height="30"border="0"/>
< /a></li>
<li><a href="index.php?id=2" target="_self">
<img src="img/menu3.png" width="150"height="30"border="0"/>
< /a></li>
<li><a href="index.php?id=3" target="_self">
<img src="img/menu4.png" width="150"height="30"border="0"/>
< /a></li>
</ul>
Посмотрим на результат в браузере. Пока он имеет следующий вид(см. рис. 8.15):
Рис. 8.15
С тегом imgи его атрибутами мы уже работали, когда добавляли изображенияшапки и подвала сайта. Теперь текст заменился на изображения, которые стали ссылками. Но пункты пока еще расположены вертикально, а слева осталась маркировка. Исправим это с помощью CSS. Для этогоперейдем в файл puh.css. В самом низу добавим строки:
#vmenu ul
{
list-style: none;
}
Тег ulвложен в тег divс идентификатором: vmenu. Чтобы обратиться к вложенному тегу –нужно указать его название после селектора по идентификатору #vmenu через пробел.Свойство list-style: none; отключает маркировку списка. Еще ниже добавим:
#vmenu li
{
float: left;
padding-top: 5px;
padding-left: 70px;
}
Эти три свойства подключены к тегам li, которые находятся внутри тега с идентификатором vmenu. Свойство float: left; выстраивает пункты горизонтально,обтекание слева. Свойство padding-top: 5px; задает отступ сверху в виде полей. Свойство padding-left: 70px;задает отступ слева в виде полей. Благодаря последним двум свойствам, пункты меню будут находиться со смещением сверху и друг от друга. Посмотрим в браузере. Должно получиться следующее (см. рис.8.16):
Рис. 8.16
Теперь главное меню выглядит так, как нам нужно!
Попробуем понажимать на пункты меню. При нажатии на пункт: Товары в адресной строке браузера появляется ссылка http://puh/index.php?id=1.
При нажатии на пунктКонтакты в адресной строке браузера появляется ссылка http://puh/index.php?id=3 (см. рис. 8.17):
Рис. 8.17
В дополнение к меню выполним сразу еще одну важную вещь –в самом верху файлаpuh.css, под строкой указания кодировки UTF-8 добавим:
body, table, tr, td, div, ul, li, img, a, h1
{
margin: 0px;
padding: 0px;
}
Так мы обнулили отступы и поля для всех тегов, которые есть на странице. Если перечислить теги через запятую, то список свойств применится сразу ко всему списку. Некоторые браузеры используют для определенных тегов ненулевые свойства отступов и полей. Могут появляться отступы и смещения, которые не нужны. Поэтому лучше обнулить эти свойства для всех тегов и задавать их по мере необходимости. В двух местах мы указывали подобную настройку –теперь это можно удалить из CSS (см. рис. 8.18):
Рис. 8.18