Шаблонизация в php

Шаблонизация

Шаблонизация – Это процесс встраивания готовой html-вёрстки на сайт, работающий на php или другом серверном языке.

Ведя работу над сайтом, написанном на PHP, мы разрабатываем логику, которая управляет представлением. Логика — это PHP-сценарии, где происходит объявление переменных, функций, использование массивов и циклов, получение и обработка информации.

Представление — это внешний вид сайта. Сюда входят страницы, которые содержат общие элементы оформления (шапка, меню, подвал) и контент (страницы, статьи и тому подобное).

Имея на руках готовую вёрстку, надо правильно её внедрить в работающий сайт, чтобы информация выводилась динамически, под контролем PHP-сценариев: выдавались сообщения на действия с формами, подставлялись данные из БД.

Общие фрагменты страниц сайта

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

В результате когда дело доходит до правок, то при необходимости поменять что-нибудь в той же шапке, это изменение нужно будет сделать во всех HTML-файлах, чтобы они выглядели одинаково. Конечно, такой напрасный труд никому не понравится.

Взглянув на страницы практически любого сайта, можно заметить их сходство друг с другом. Ведь все страницы состоят из общих частей, которые не меняются, а также из областей с уникальным содержимым. И как было бы удобно редактировать общие блоки, вроде шапки сайта, отдельно, а затем вкладывать их во все страницы. Тогда при смене логотипа потребуется внести изменение только в одном месте, а все страницы сайта обновятся автоматически.

Шаблонизация — это и есть деление всей вёрстки на независимые шаблоны и дальнейшее их подключение и вкладывание друг в друга.

Простой способ

Можно просто вынести общие части html-документа через include_once() в файлы head.php, header.php и footer.php.

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

В разговоре о шаблонизации очень важно придерживаться определённых терминов, чтобы всегда было понимание, о чём идёт речь. Договоримся использовать следующую терминологию:

Лейаут — это шаблон, который содержит HTML-код, общий для всех страниц сайта. В нём могут содержаться подключение стилей, метатеги, шапка, подвал. Также лейаут содержит область для вставки уникального содержимого каждой страницы.

Шаблон страницы — это шаблон с уникальным для одной страницы HTML-кодом. Например, для главной страницы там может быть список новостей. Также шаблон страницы может включать в себя блоки.

Блок — это шаблон очень небольшого блока страницы. Например, это может быть один элемент списка новостей. Удобство блоков в том, один блок могут включать разные страницы.

Сбор страницы из частей

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

Данные в шаблоне

Шаблон показывает динамическую информацию. Прилагательное «динамическая» означает, что эти данные могут меняться и показываться в зависимости от различных условий. Сама информация, как правило, хранится в базе данных, а PHP-сценарий извлекает её оттуда и передаёт в шаблон.

Вне зависимости от источника информации есть строгое правило: любой шаблон (лейаут, шаблон страницы, блок) должен иметь доступ только к тем данным, которые ему явно передали.

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

Логика шаблона

В шаблоне должна находиться только несложная логика. Иными словами, шаблоны не содержат «тяжёлого» PHP-кода, а только простые конструкции.

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

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

Шаблонизатор — это функция, которая подключает файл шаблона, передаёт ему данные и возвращает сгенерированный HTML.

Именно шаблонизатор является тем клеем, что скрепляет воедино отдельные шаблоны в итоговую страницу. Работает он следующим образом: PHP-сценарий страницы выполняет все действия для подготовки необходимой информации, к примеру, запрашивает записи из базы данных. Эти записи в виде массива отправляются шаблонизатору вместе с именем шаблона страницы.

Шаблонизатор подключает указанный файл шаблона и передаёт туда всю информацию. Но, вместо вывода на экран содержимого этого шаблона, он захватывает получившийся HTML-код и возвращает его.

Пример функции рендера:

тут был код шаблонизатора

Пример использования шаблонизатора

Посмотрим на примере, как это всё работает. Начнём с того, что определим три шаблона: лейаут, шаблон страницы и какой-нибудь блок.

Напоминаю, что в лейаут выносим общий HTML-код.

[layout.php]

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8" />
    <title><?= $metaTitle; ?></title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="wrapper">
        <header class="main-header">
            <h1 class="visually-hidden"><?= $title; ?></h1>
        </header>
        <div class="main-content">
            <main class="content"><?= $content; ?></main>
        </div>
        <footer class="main-footer">Все права защищены</footer>
    </div>
</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
// двумерный массив со списком записей
// имитация выборки из БД
$metaTitle = 'Дневник наблюдений за погодой';
$title = 'Дневник погоды';
$itemsList = [
    ['id' => 1, 'title' => 'понедельник', 'temp' => '+14'], 
    ['id' => 2, 'title' => 'вторник', 'temp' => '+9'],
    ['id' => 3, 'title' => 'среда', 'temp' => '+12'],
];

// HTML код главной страницы
$pageContent = renderTemplate('main.php', ['items' => $itemsList]);

// окончательный HTML код
$layoutContent = renderTemplate(
    'layout.php', 
    [
        'content' => $pageContent,
        'metaTitle' => $metaTitle,
        'title' => $title,
    ]
);

// вывод на экран итоговой страницы
echo $layoutContent;

// тут должен быть код шаблонизатора