Шаблонизация — это работа по интеграции готовой, статичной вёрстки на сайт.

Ведя работу над сайтом, написанном на 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="ru">
  <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);


«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

Как работает протокол HTTP

Как работает протокол HTTP

HTTP был разработан в 1990-х годах для создания первого интерактивного текстового веб-браузера. За эти годы протокол менялся и совершенствовался, становился более гибким и постепенно превратился в современный интернет. В статье рассмотрим принцип работы протокола и что важно знать о нём разработчику.

Читать дальше
  • 8 февраля 2023
Массивы в PHP

Массивы в PHP

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

  • $name = "Иннокентий"
  • $age = 42

А если мы хотим узнать не только пол, имя и возраст пользователя, но и, допустим, любимые сериалы? Очень непросто назвать один самый любимый сериал, а вот вспомнить несколько — намного легче. Сохранение в переменную-массив нескольких значений выглядит так:

 $fav_shows = ["game of thrones", "american horror story", "walking dead"];

В этом примере мы сохранили в переменной $fav_shows сразу три значения. Но сохранить эти данные — это только половина дела. Как с ними потом работать? Уже знакомый вам способ вывода переменной на экран не будет работать с массивами:

<?php
print("Мои любимые сериалы: " . $fav_shows);

Так увидеть список любимых сериалов не получится. Дело в том, что массив — это не обычная переменная. Массив хранит не простые типы, вроде текста или чисел (их ещё называют «скалярными типами»), а более сложную структуру данных, поэтому здесь нужен особый подход.

Внутри массива у каждого значения есть адрес, по которому к нему можно обратиться. Такой адрес называется индексом. Индекс — это просто порядковый номер значения внутри массива. Индексация начинается с нуля, так что первый элемент получает индекс — 0, второй — 1, и так далее.

Чтобы получить определенный элемент массива, необходимо знать его индекс (ключ). Напечатаем названия всех сериалов из массива через запятую:

<?php
print("Мои любимые сериалы: " . $fav_shows[0] . ", " . $fav_shows[1] . ", " . $fav_shows[2]);?>

Теперь можно дать определение массива: Массив — это совокупность множества элементов вида «ключ: значение».

Массивы позволяют перезаписывать существующие значения и добавлять новые. Добавить новое значение в массив можно так:

$fav_shows[] = "the big bang theory";

Новый элемент автоматически получит индекс равный максимальному индексу из существующих + 1. «Теория большого взрыва» сохранится в массиве под индексом 3.

Если нам перестал нравиться один из сериалов, так как новый сезон оказался очень плох или появился новый фаворит, значения в массиве можно заменить. Чтобы вычеркнуть старое значение и заменить его новым, нужно присвоить новое значение любому из существующих в массиве индексов:

$fav_shows[4] = "fargo";

Для полного удаления (без замены на другое) значения по его индексу существует функция unset:

unset($fav_shows[4]);
Читать дальше
  • 10 ноября 2022
Синтаксис PHP

Синтаксис PHP

Разберёмся, из чего состоит любой язык программирования.

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

Читать дальше
  • 27 октября 2022
Массивы $_POST и $_GET в PHP. Обработка форм

Массивы $_POST и $_GET в PHP. Обработка форм

Формы — это часть языка HTML. Формы нужны для передачи данных от клиента на сервер. Чаще всего формы используются для регистрации пользователей, заполнения анкет, оформления заказа в интернет магазине, и так далее.

Через формы можно отправлять как простую текстовую информацию, так и файлы.

Большую часть времени программирования на PHP вы будете так или иначе работать с формами и данными из них.

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

PHP содержит множество средств для работы с формами. Это позволяет очень просто решать типичные задачи, которые часто возникают в веб-программировании:

  • Регистрация и аутентификация пользователя;
  • Отправка комментариев на форумах и социальных сетях;
  • Оформление заказов.

Практически любой современный сайт содержит как минимум несколько разных HTML-форм.

Читать дальше
  • 20 октября 2022
Учебник по PHP

Учебник по PHP

  1. Знакомство с языком
  2. Шаблонизация и подключение файлов
  3. Протокол HTTP и формы
  4. Идентификация пользователя на сайте
  5. Базы данных
  6. Объекты и использование библиотек
  • 10 сентября 2022
Объекты и классы в PHP

Объекты и классы в PHP

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

Читать дальше
  • 10 сентября 2022
Циклы в PHP. Краткое руководство

Циклы в PHP. Краткое руководство

Цикл — это конструкция языка, которая выполняет блок кода больше одного раза.

Мы привыкли, что сценарии выполняются линейно: сверху вниз, строчка за строчкой. Но что делать, если надо повторить какую-нибудь инструкцию несколько раз? Например, как вывести на экран натуральные числа от 1 до 9?

Есть очевидный способ:

<?php
print(1);
print(2);
print(3);
// и так далее...

Но он заставляет писать много кода. И что если требуется вывести последовательность из миллиона чисел? Ещё бывают ситуации, когда заранее неизвестно сколько раз нужно выполнить определённую инструкцию.

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

Так выглядит цикл в PHP:

<?php
while (<условие цикла>) {
<тело цикла>
}
Читать дальше
  • 10 сентября 2022
Функции в PHP. Краткое руководство

Функции в PHP. Краткое руководство

Функция — это блок кода, который может быть именован и вызван повторно. Иногда функцию ещё называют подпрограммой.

Обычной переменной присваивают число, строку или массив, а затем получают его обратно, обратившись к значению по имени переменной. Функции устроены похожим образом. Это тоже переменная, только вместо строки или числа в функции хранится блок кода, который вызывается при использовании этой «переменной».

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

Чтобы упростить себе работу, оформите в виде функции часть кода, используемую в сценарии несколько раз. Затем, вместо копирования и вставки этой части, нужно будет только вызывать функцию, как если бы мы обращались к переменной.

Типы функций

Разделяют два типа функций — встроенные и пользовательские.

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

Одна из хорошо знакомых функций — функция, которая выводит переданный ей текст на экран — print().

Пользовательские функции программист создаёт самостоятельно. Эти функции используются только внутри одного проекта или сценария.

Читать дальше
  • 10 сентября 2022