Перейдемо в файл index.php, в самому верху файлу, перед усіма тегами HTMLдобавім вставку PHP:
Команда require_onceподключает зовнішній файл до index.php. Після цього можна викликати функції з файлу lib.php.Файл lib.php буде основним для створення PHP-коду, а в файлеindex.php буде прописаний висновок вже готових функцій.
Спустимося нижче і знайдемо теги div для формування білої області. Всередину тегаdiv з ідентифікатором sheet2 додамо PHP-вставку:
Ми записали виклик функції makeOpisan (), яку створимо всередині файлу lib.php.Ета функція виконає отримання даних - описів товарів з бази даних, і виведе їх на сторінку. Іншими словами, замість виклику цієї функції буде вставлений великий фрагмент тегів з текстом.
Перейдемо в файл: lib.php і додамо в нього код:
Створимо функцію makeOpisan ():
// Константи для підключення до бази даних
// Функція для формування опису товарів
Будемо формувати запит до бази даних.
Ми робили вже схоже дію і в файлі tovar.php. У функції runMySQL () є необхідний код. Скопіюємо і вставимо цей фрагмент в функцію makeOpisan (). Потім приберемо звідти непотрібні рядки і вставимо наші константи для підключення до бази даних. У підсумку вийде наступний код (див. Рис. 8.21):
Зверніть увагу, що тепер замість явних значень для підключення до бази стоять константи з рядків з командою define ():
// Функція для формування опису товарів
// Якщо підключення виконано
// Вибираємо базу даних з перевіркою успішного вибору
// Вказуємо використання кодування UTF-8
mysql_query ( "SET names 'utf8'", $ db);
// У цьому місці буде додано код.
// відключати від MySQL
Такий програмний код виконує підключення до MySQL, вибирається база даних, встановлюється кодування UTF-8 і потім виконується відключення. Після установки кодіровкіUTF-8, додамо програмний код для вилучення опису товарів з бази даних і виведемо на сторінку:
$ Rez = mysql_query ( "SELECT * FROM opisan", $ db);
// Перебираємо десять рядків результат запиту
// Отримуємо черговий рядок із запиту
// Додаємо в кінець рядка
$ Out_page. = "
".// Виводимо на сторінку браузера
Подивимося результат в браузері (див. Рис. 8.22):
З'явився текст з описом товарів. Розглянемо програмний код:
$ Rez = mysql_query ( "SELECT * FROM opisan", $ db);
Цей рядок виконує запит вибірки даних з таблиці opisan, результат потрапляє в змінну $ rez.В результаті запиту вийде десять рядків - все рядки в табліцеopisan:
У змінну $ out_page буде поміщений набір тегів з описом тексту, який буде виводитися на сторінку:
// Перебираємо десять рядків результат запиту
// Отримуємо черговий рядок із запиту
Цикл forвиполніт десять кроків, тому що строк в таблиці саме десять!
// Отримуємо черговий рядок із запиту
На кожному кроці циклу в змінну $ row буде вилучатись черговий рядок з результату $ rez.
З рядка отримаємо значення поля: naim і txt, їх номери відповідно - 1 та 2, нумерація колонок йде з нуля.
// Додаємо в кінець рядка
$ Out_page. = "
".Черговий фрагмент даних додається в кінець рядка. Замість змінних, вставлених в фігурних дужках: і, будуть підставлені їх значення це найменування товару та його опис. Рядки складаються за допомогою додавання рядків через операторточка (.).
Тег h1-це заголовок. Текст заголовка виводиться як звичайний текст з переходом на наступний рядок. Пошукова система відрізняє теги заголовків від інших тегів, тому подібну інформацію краще укладати саме в ці теги. Насамкінець варто тег
- це новий рядок, щоб зробити додатковий відступ між опісаніямі.Обратіте увагу, що до тегам h1и divподключени атрибути class.Ето зроблено для використання в CSS. Якщо лапки знаходяться всередині подвійних лапок, то необхідно використовувати одиничні лапки!
Після циклу for:
// Виводимо на сторінку браузера
значення змінної $ out_page виводиться на сторінку браузера.
Відкрився HTML-код пролістнем вниз і знайдемо тег div з ідентифікатором sheet2:
Подивіться на фрагмент коду, який йде далі (див.рис. 8.24):
Цей програмний код сформований з PHPфункціей makeOpisan ().
Якби ми створювали сторінку тільки за допомогою HTML, без використання PHP, то цей великий фрагмент довелося б розмістити на сторінці, всередині тегів HTML!
Залишився останній момент-задає зовнішній вигляд опису товарів. Для цього перейдемо в файл puh.cssі в самому низу додамо два селектора по класу з наступними властивостями:
/ * Фрагмент з текстом опису товару * /
font-family: verdana, arial, serif;
Подивимося результат в браузері (див. Рис. 8.25):
В результаті ми отримали зовнішній вигляд опису товарів, як на зразку.
Розберемо більш подробноCSS-код. Селектор по класу вказується через операторточка (.):
На відміну від селектора за ідентифікатором -селектор по класу може застосовуватися до цілої групи тегів. В даному випадку виходить за десять тегів: div і h1.Указанние CSS-властивості визначають зовнішній вигляд тексту, багато властивостей нам вже знайомі.
Властивість white-space з значеніемnormalуказивает, що слова тексту будуть переноситися на наступний рядок. За допомогою цієї властивості можна заборонити перенесення слів, якщо поставити значення nowrap:
justify це вирівнювання тексту по ширині, по правому і лівому краю одночасно.
font-family: verdana, arial, serif;
Коли кілька шрифтів перераховується через кому, то наступний усе своєю чергою шрифт, браузер буде застосовувати, якщо не підтримує той, який знаходиться в списку лівіше.
line-height це інтервал між рядками.
Текст вписується всередину білої області, ширина которой550 пікселів, але при цьому має відступ зліва і справа по10 пікселів, тому ширина тексту 530пікселей.
Властивість text-decorationпозволяет зробити текст, наприклад, підкресленим або відключити підкреслення.
Властивість color задає колір тексту.
Властивість font-size задає розмір тексту.
Властивість font-style задає схильність тексту.
Властивість font-weight задає жирність тексту.
На цьому створення розділу з описом товарів закінчено!
Підсумок заняття: На цьому занятті ми: • створили і заповнили даними таблицю опису товарів; • створили головне меню сайту; • сформували розділ опису товарів на підставі даних з бази MySQL.
Заняття 9 "Створення лівої і правої бічної частини сторінки"
На цьому занятті організуємо перехід по пунктах меню: - створимо ліву бічну частину з інформацією про розділи сайту; - створимо праву бокову частину з Flash-вставкою.
На попередніх заняттях ми створили основний каркас нашого сайту, меню і розділ опису товарів. На цьому занятті ми продовжимо роботу над нашим інтернет-магазином, його зовнішнім виглядом і функціоналом. Ось, що повинно у нас додатися:
Для вирішення поставлених завдань нам знадобиться:
· П'ять нових зображень;
· Flash-ролик для розташування в правій частині сторінки;
· Текстовий файл c тегами для вставкіFlash-ролика.
Ці теги ми будемо використовувати при роботі з Flash-роликом.
Останній файл shar.swf це Flash-ролик, який буде вставлятися в правій частині сторінки (див.рис. 9.1)