nmk

Лабораторна робота №15 (2 години)

Тема: Рефакторинг (Організація файлів). Поділ великого файлу (спагеті-коду) на окремі скрипти: header.php, footer.php, та винесення логіки в окремі блоки з використанням конструкцій include / require.

Мета: Познайомитися з базовим принципом шаблонізації (Templating). Навчитися знаходити повторювані блоки коду між різними сторінками сайту та виносити їх у зовнішні компоненти для полегшення підтримки (Рефакторинг).

Технологічний стек: PHP (include, require, include_once, require_once), мікрошаблонізація UI.

Завдання

  1. Знайти дублювання коду в існуючих файлах (index.php, create.php, login.php).
  2. Винести статичні елементи (від <!DOCTYPE html> до відкриваючого <body> й меню навігації) в окремий файл header.php.
  3. Винести статичні закриваючі елементи сторінки в окремий файл footer.php.
  4. Зв’язати утворені модулі в єдину сторінку за допомогою команди require().

Хід виконання роботи

Крок 1. Аналіз дублювання UI (інтерфейсу)

На цьому етапі ви помітите, що відкриваючи файли index.php або create.php, перший десяток рядків HTML у них ідентичний — всюди ми заново пишемо <!DOCTYPE>, <head>, підключаємо файли стилів <link rel="stylesheet">, і створюємо верхню менюшку сайту. Якщо виникне потреба додати ще одне посилання в меню, вам доведеться модифікувати всі наявні файли по-черзі. Це порушення принципу DRY (Don’t Repeat Yourself).

Крок 2. Відокремлення “Хедера” та “Футера”

Створіть у корені проекту (або краще — в новій папці components або includes) два нових файли: header.php та footer.php. Виріжте (Cut) всю верхню частину HTML-розмітки з index.php включно з відкриваючим тегом <main> і вставте в header.php. Виріжте усю нижню частину (закриваючі </main>, </body>, </html> та скрипти, якщо такі є) та вставте їх в footer.php.

Крок 3. Підключення фрагментів (Шаблонізація)

Поверніться до index.php. Тепер його структура має складатися лише з специфічного контенту сторінки (наприклад, циклу виведення списку завдань foreach). Додайте на самий початок файлу PHP-конструкцію $pageTitle = "Список завдань"; require 'components/header.php'; (за умови створення папки). Додайте в самий кінець: require 'components/footer.php';.

Відкрийте create.php та login.php і зробіть абсолютно те ж саме — видаліть їхню HTML-обгортку та замініть її на підключення зовнішніх файлів за допомогою require.

Крок 4. Динамізація компонентів

Але ж як зробити так, щоб Title (вкладка браузера) та активний стан пункту меню змінювались в header.php? Просто встановіть значення змінних перед тим, як викликати файл require. Наприклад, змінній $pageTitle під час виконання інтерпретатор знайде в header.php запис <title><?= $pageTitle ?? "Мій сайт" ?></title> і успішно виведе значення без помилок.

Контрольні запитання

  1. Поясніть сутність терміну “Рефакторинг” на прикладі вашої лабораторної. Чи змінився функціонал у фінального сайту після поділу на файли з точки зору звичайного користувача?
  2. Яка різниця між PHP-конструкціями include та require? Яку з них слід використовувати для підключення критично важливої логіки чи файлу підключення до БД?
  3. Що станеться, якщо файл, який підключається через require, не буде знайдений на диску (наприклад, сталася опечатка в імені)? А якщо через include?
  4. Для чого існують варіанти _once (напр., require_once) і які проблеми вони вирішують порівняно зі звичайним require?
  5. Чи можна підключати файли PHP з HTML всередині якогось циклу (наприклад for з require "list_item.php";)? Якщо так, чи є це кращою практикою?

Вимоги до звіту

  1. У файл lab15.md скинути вміст утворених файлів components/header.php та оновленого index.php.
  2. Здійснити перевірку роботи сайту, зробити скриншот головної сторінки (index.php), яка візуально зшита з різних компонентів і працює без помилок.
  3. Надіслати посилання на репозиторій на GitHub зі зміненою файловою структурою.
  4. Надати відповіді на контрольні запитання.