1 of 41

PHPWorld (Робота з БД)

PHP: Lab11

​

2 of 41

Зразок головної сторінки (список континентів)

3 of 41

Зразок сторінки континенту

4 of 41

Зразок сторінки країни

5 of 41

Створення проекту

  • Створіть папку проекту php-world
  • Створити віртуальний хост (http://php-world.local/) (за бажанням). Роботу можна виконувати в папці php-labs

6 of 41

Створення проекту

  • Завантажте зображення та дамп бази даних в проект /php-world

​

7 of 41

Створення бази даних

  • Запустіть локальний сервер та зайдіть в інструмент PhpMyAdmin
  • Створіть нову базу даних GeoWorld

​

8 of 41

Імпорт бази даних

  • Зробіть імпорт бази даних:
    • GeoWorld -> Імпорт -> Вибрати файл geoworld.sql -> Вперед
  • Результат імпорту – дві таблиці:

​

9 of 41

Головна сторінка, index.php

  • Створіть файл index.php – файл головної сторінки
  • Переконайтесь, що віртуальний хост створений і працює

​

10 of 41

Файл functions.php

  • Створимо файл бібліотеки функцій functions.php, де будемо реалізовувати в тому числі функції для роботи з БД
  • В файлі index.php підключимо бібліотеку:

11 of 41

Функція connect() - з'єднання з БД

  • Відкриємо файл functions.php та створимо функцію з'єднання з БД
  • Примітка. Порт з'єднання з БД (при потребі) можна подивитись в налаштуваннях OpenServer або в PhpMyAdmin:

12 of 41

“Коннектимось” в index.php:

13 of 41

Функція getContinents() - отримання всіх континентів

  • В бібліотеці функцій створимо функцію, яка надсилає запит та отримує масив всіх континентів. Функція приймає в параметрі об'єкт $connection для реалізації запиту в БД:

​

14 of 41

Отримуємо масив континентів в index.php:

  • Перевіримо результат роботи скрипта, після чого закоментуємо функцію print_r():

15 of 41

Займемось шаблоном HTML

  • В index.php після PHP-коду створіть структуру HTML-документа:

​

16 of 41

Структура сторінки

  • В body створіть структурні блоки header, main і footer з внутрішніми блоками-контейнерами
  • Весь наступний html-код писатимемо в контейнерах даних структурних блоків

17 of 41

Підключимо бібліотеку Bootstrap

  • Зайдіть на сайт бібліотеки Bootstrap в розділ Documentation, скопіюйте код та підключіть CSS в розділ <head> і JS після футера перед </body>:

​

18 of 41

Додамо Navbar (Навігаційну панель)

  • На сайті Bootstrap зайдіть в розділ components->Navbar і скопіюйте код навігаційної панелі:

19 of 41

Розмістіть Navbar в контейнері хедера та …

  • Приберіть форму пошуку та випадний список, залишивши назву та декілька пунктів меню
  • Заміність класи navbar-light та bg-light відповідно на navbar-dark та bg-dark

Перевіримо… ОК!

20 of 41

Одразу після Navbar розмістіть компонент Breadcrumb (ланцюжок навігації):

  • Ланцюжок теж повинен міститись в контейнері хедера:

21 of 41

Перейдемо до блоку main

22 of 41

В контейнері блоку main створіть рядок та 6 стовпчиків у ньому і перевірте чи працює у вас адаптивність:

Пояснення:

Використовуючи 12-стовпчикову систему розмітки задамо структуру нашої сітки так щоб наші стовпчики займали половину ширини рядка (клас col-6), а для середніх і більших екранів (від 768px) перевизначимо ширину – 1/3 ширини рядка (клас col-md-4)

23 of 41

Залиште лише один стовпчик та розмістіть у ньому блок-картку нашого континенту (компонент Card бібліотеки Bootstrap):

  • Код картки скопіюйте з розділу Card компонентів Bootstrap, видаливши посилання
  • Додайте зображення та назву континенту
  • До картки можна додати класи p-2 (внутрішній відступ) та mb-2 (зовнішній нижній відступ)

​

Перевіримо… ОК!

24 of 41

FOREACH

  • Тепер даний стовпчик огорнемо в PHP-код, який циклом foreach проходить по масиву $continents
  • При кожному повторенні у внутрішній змінній $continentItem отримуємо поточний континент, що має елементи з ключами code, name та description:

Перевіримо… ОК!

25 of 41

Посилання

  • Для переходу на сторінку континенту, назви континентів огорнемо в посилання, передавши параметр code (код континенту) в URL:

Перевіримо… ОК!

26 of 41

FOOTER

  • В футері створіть абзац з копірайтом по центру:

Перевіримо… ОК!

27 of 41

Винесення повторюваного коду в окремі файли

  • Перша сторінка (World, index.php) практично готова
  • HTML-код інших сторінок буде відрізнятись лише контентом, тобто верхня та нижня частини HTML у всіх будуть однаковими
  • Отже є сенс винести їх в окремі файли та підключити до відповідних сторінок в потрібних місцях
  • Таким чином ми значно скоротимо код в наших сторінках та уникнемо зайвих повторень

28 of 41

header.php та footer.php

  • Створіть файл header.php та винесіть в нього верхню частину html-коду, що обмежена рядками <!DOCTYPE html> … </header>
  • Аналогічно створіть файл footer.php та винесіть в нього нижню частину html, що обмежена рядками <footer> … </html>
  • В файлі index.php підключіть файли header.php та footer.php в потрібних місцях:

​

​

Перевіримо… ОК!

29 of 41

Сторінка континенту

  • Створимо другу сторінку проекту - continent.php, підключимось до бази даних

30 of 41

Отримаємо код континенту із GET-запиту

  • На даній сторінці нам потрібно буде робити запити з таблиць continents та countries по коду континенту, який передався в запиті через URL
  • При цьому даний параметр code заноситься в масив $_GET. Створимо змінну $code та отримаємо значення даного параметру:

​

31 of 41

Функція getContinent() - отримання даних про континент

  • Для отримання даних про континент за його кодом в бібліотеці functions.php створимо функцію getContinent():

​

32 of 41

Функція getCountriesByContinent() - отримання країн даного континенту

  • Для отримання країн за кодом континенту в бібліотеці functions.php створимо функцію getCountriesByContinent():

​

33 of 41

Отримуємо дані про континент та масив країн в continent.php:

  • Функції print_r() допоможуть перевірити правильність коду. Після чого їх потрібно видалити або закоментувати:

34 of 41

Перейдемо до HTML-коду сторінки continent.php

  • Ми отримали два масиви continent та countries. Тепер потрібно відобразити їх в HTML-представленні.
  • Після PHP-коду, створіть структуру HTML:

35 of 41

В контейнері блоку main спочатку відобразіть назву частини світу:

36 of 41

А потім список із країн (використавши для цього компонент List Group бібліотеки Bootstrap):

  • Логіка даного циклу така ж як і при відображенні списку частин світу на головній

Перевіримо… ОК!

37 of 41

Посилання

  • Для переходу на сторінку країни, задамо значення атрибуту href до посилань в списку країн:

Перевіримо… ОК!

38 of 41

Нарешті третя сторінка - country.php – перегляд інформації про країну

  • Створіть файл country.php
  • Підключіться до бази даних
  • В змінній $code отримайте код країни, що передався в параметрі URL-запиту
  • В бібліотеці функцій створіть функцію getCountry(), яка за даним кодом отримує інформацію про країну з бази даних
  • В коді сторінки отримайте дані про країну в масив country, використовуючи функцію getCountry()
    • Підказка: завдання майже ідентичне до того, як ми отримували дані про континент
  • Перевірте правильність коду, використовуючи функцію print_r():

39 of 41

Html-код сторінки country.php

  • Створіть структуру коду сторінки, підключивши header.php та footer.php
  • В контейнері блоку main створіть рядок та два стовпчика по половині ширини рядка, використовуючи схему 12-стовпчикової розмітки Bootstrap

40 of 41

Контент сторінки: таблиця і карта

  • В першому стовпчику, використовуючи компонент table бібліотеки Bootstrap, відобразіть дані з отриманого масиву country.
  • В другому стовпчику відобразіть карту країни, використовуючи сервіс Google Maps API (Дане завдання є необов’язковим для виконання, проте зробіть собі виклик).

41 of 41

Створіть локальний та віддалений репозиторій, та закомітьте туди файли Вашого проекту. Не забудьте надати доступ викладачу☺