Шаблонізація в PHP

Шаблонізація - це робота з інтеграції готової, статичної верстки на сайт.

Ведучи роботу над сайтом, написаним на PHP, ми розробляємо логіку, яка керує представленням. Логіка - це PHP-сценарії, де відбувається оголошення змінних, функцій, використання масивів і циклів, отримання та обробка інформації.

Представлення - це зовнішній вигляд сайту. Сюди входять сторінки, які містять загальні елементи оформлення (шапка, меню, підвал) і контент (сторінки, статті тощо).

Маючи на руках готову верстку, треба правильно її впровадити в працюючий сайт, щоб у певних місцях сторінок інформація виводилася динамічно, під контролем PHP-сценаріїв.

Що таке "шаблон" і до чого тут риба?

Шаблон - це готова верстка сторінки або блоку, яка складається тільки з оформлення, і не містить жодного контенту (корисної інформації).

Шаблон за своєю суттю - це звичайний PHP-сценарій, який на 90% складається з HTML-коду і тільки на 10% з PHP-конструкцій. Основне завдання програміста в процесі роботи над сайтом - це перетворити статичні HTML-сторінки на динамічні PHP-шаблони, які будуть використовуватися для показу підсумкових сторінок.

Але якщо статична верстка сторінок не містить динамічного контенту, то що буде на його місці до початку впровадження цих сторінок? Коли дизайнер або верстальник хочуть показати, який вигляд матиме сторінка на сайті, то замість реального контенту використовується так звана риба. Риба - це заповнювач. Безглуздий текст, який використовується у верстці, щоб показати, який вигляд матиме сторінка, наповнена контентом.

Проблеми типового процесу верстки

Коли верстальник працює над кількома сторінками, йому доводиться копіювати більшу частину HTML-коду між сторінками, оскільки ці сторінки містять багато повторюваних елементів: підключення стилів, шапка сайту з логотипів, футер сайту, різні меню тощо.

У результаті коли справа доходить до правок, то за потреби поміняти що-небудь у тій самій шапці, цю зміну треба буде зробити у всіх HTML-файлах, щоб вони виглядали однаково. Звісно, така марна робота нікому не сподобається.

Загальні фрагменти сторінок сайту

Поглянувши на сторінки практично будь-якого сайту, можна помітити їхню схожість одна з одною. Адже всі сторінки складаються із загальних частин, які не змінюються, а також з областей з унікальним вмістом. І як було б зручно редагувати загальні блоки, на кшталт шапки сайту, окремо, а потім вкладати їх у всі сторінки. Тоді під час зміни логотипу потрібно буде внести зміну тільки в одному місці, а всі сторінки сайту оновляться автоматично.

Шаблонізація - це і є поділ усієї верстки на незалежні шаблони та подальше їхнє під'єднання і вкладання один в одного.

Збір сторінки з частин

Якщо поділити всю верстку сайту на окремі, невеликі шаблони, ми отримаємо одразу кілька переваг. Стане легше стежити за однаковістю інтерфейсу. Виділивши представлення сайту в шаблони, ми також істотно спростимо PHP-сценарії, адже в них залишиться тільки PHP-код. Можна навіть довірити верстальнику редагувати шаблони, бо в них майже немає програмного коду, а той, що є, дуже простий.

Терміни шаблонізації

У розмові про шаблонізацію дуже важливо дотримуватися певних термінів, щоб завжди було розуміння, про що йдеться. Домовимося використовувати таку термінологію:

Лейаут - це шаблон, який містить HTML-код, спільний для всіх сторінок сайту. У ньому можуть міститися підключення стилів, метатеги, шапка, підвал. Також лейаут містить область для вставки унікального вмісту кожної сторінки.

Шаблон сторінки - це шаблон з унікальним для однієї сторінки HTML-кодом. Наприклад, для головної сторінки там може бути список новин. Також шаблон сторінки може містити в собі блоки.

Блок - це шаблон дуже невеликого блоку сторінки. Наприклад, це може бути один елемент списку новин. Зручність блоків у тому, що один блок можуть включати різні сторінки.

Вміст шаблону

Що ж знаходиться всередині шаблону? Ви вже знаєте, що шаблон майже повністю складається з HTML-коду. Але крім HTML-тегів, там також лежать дані та проста логіка.

Дані в шаблоні

Шаблон показує динамічну інформацію. Прикметник "динамічна" означає, що ці дані можуть змінюватися і показуватися залежно від різних умов. Сама інформація, як правило, зберігається в базі даних, а PHP-сценарій витягує її звідти і передає в шаблон.

Незалежно від джерела інформації є суворе правило: будь-який шаблон (лейаут, шаблон сторінки, блок) повинен мати доступ тільки до тих даних, які йому явно передали.

Таку ізоляцію даних забезпечує спеціальна функція-шаблонізатор, про яку піде мова далі.

Логіка шаблону

У шаблоні має міститися тільки нескладна логіка. Іншими словами, шаблони не містять "важкого" PHP-коду, а тільки прості конструкції.

Так, у шаблоні можна показувати змінні, використовувати умови, цикли, обходити масиви, викликати функції та підключати файли. Все інше заборонено. Бізнес-логіка, що лишилася, зосереджується в PHP-сценаріях, які викликають шаблони і передають у них інформацію.

Функція-шаблонізатор

Шаблонізатор - це функція, яка підключає файл шаблону, передає йому дані та повертає згенерований HTML.

Саме шаблонізатор є тим клеєм, що скріплює воєдино окремі шаблони в підсумкову сторінку. Працює він таким чином: PHP-сценарій сторінки виконує всі дії для підготовки необхідної інформації, наприклад, запитує записи з бази даних. Ці записи у вигляді масиву надсилаються шаблонізатору разом з ім'ям шаблону сторінки.

Шаблонізатор підключає вказаний файл шаблону і передає туди всю інформацію. Але, замість виведення на екран вмісту цього шаблону, він захоплює отриманий HTML-код і повертає його. Потім сценарій викликає шаблонізатор ще раз, але тепер за його допомогою підключає загальний лейаут, куди відправляється загальна інформація, а також вміст сторінки, отриманий із попереднього кроку. Весь результат роботи виводиться на екран.

Приклад використання

Подивимося на прикладі, як це все працює. Почнемо з того, що визначимо три шаблони: лейаут, шаблон сторінки і який-небудь блок.

Нагадую, що в лейаут виносимо загальний HTML-код.

layout.php

<!DOCTYPE html>

  <html lang="uk">

  <head>

    <title><?= $title; ?></title>

    <link rel="stylesheet" href="css/style.css">

  </head>

  <body>

    <header class="main-header">

      <h1 class="visually-hidden">Щоденник погоди</h1>

    </header>

    <div class="main-content">

      <main class="content"><?= $content; ?></main>

    </div>

    <footer class="main-footer">Щоденник спостереження за погодою. Усі права захищені</footer>

  </body>

</html>

Тепер черга за шаблоном сторінки у файлі main.php

<div class="content__main-col">

  <h2 class="visually-hidden">Останні записи</h2>

  <a class="button" href="/gif/add">Додати нову</a>

  <ul class="items-list">

    <?php foreach ($items as $item): ?>

      <?=renderTemplate('inc/item.php', ['item' => $item]);?>

    <?php endforeach; ?>

  </ul>

</div>

Тут зверніть увагу, що шаблон сторінки, крім ітерації по масиву, для кожного його елемента викликає функцію-шаблонізатор. Шаблонізатор отримує контент із шаблону блоку і показує його всередині списку.

А ось і шаблон блоку для показу одного запису у файлі inc/item.php

<li class="list-item">

  <div class="picture">

    <img src="uploads/preview_<?=$item['path'];?>">

  </div>

  <h3 class="desc-title">

    <a href="/view?id=<?=$item['id'];?>"><?=$item['title'];?></a>

  </h3>

  <div class="desc-data">

    <span class="temp"><?=$item['temp'];?></span>

  </div>

</li>

Так виглядали три шаблони. Усі вони візьмуть участь у формуванні підсумкової сторінки. Збере ці шаблони і виведе сторінку на екран наш сценарій - index.php:

<?php

// двовимірний масив зі списком записів

$items_list = [];

// HTML код головної сторінки

$page_content = renderTemplate('main.php', ['items' => $items_list]);

// остаточний HTML код

$layout_content = renderTemplate('layout.php',

['content' => $page_content, 'title' => 'Дневник наблюдений за погодой']);

// виведення на екран підсумкової сторінки

print($layout_content);