Templates

If you look at the last version of the contact form, you have probably noticed that it is becoming quite a convoluted mess of PHP and HTML (and yet it is still a very simple form). The solution to this problem is to use (HTML) templates.

The advantage of using templates is that they simplify both the PHP and HTML code and that they protect your code against Cross Site Scripting vulnerabilities. The templates disadvantage is that you need to learn another language. HTML templates are called templates, because they are HTML pages with placeholders. The actual value of the placeholders is supplied when the template is rendered (which usually means – sent to a web browser). Only then the template becomes a valid HTML page.

Templating Engines

Template engine is a library which processes a HTML page with macros (snippets of a template language) and produces a valid HTML page. There are many templating engines available for PHP, some of the popular engines are: Smarty, Latte, Twig. All of them (and many others) can be used as parts of their respective frameworks or standalone. In the following examples I will stick to using the standalone Latte templating engine. The choice is rather arbitrary, as all templating engines work in a very similar way, have almost the same features and they even have a somewhat similar syntax.

Getting Started with Latte

First you need to obtain Latte, either by using the Composer tool or simply by downloading the library from Github:

You should get latte-master and copy the contents of the src folder to your script. Now create a PHP script like this:

    charset="utf-8">   n:if="$currentUser['first_name']">Hello  method="post" action="http://odinuv.cz/form_test.php">   First name:  type="text" name="first_name" value="">    Last name:  type="text" name="last_name" value="">    E-mail address:  type="email" name="email" value="">    Year of birth:  name="birth_year">  n:attr="selected => $currentUser['birth_year'] == $year" value="">      Message for us:  name="message" cols="" rows="">     type="submit" name="contact" value="contact">Contact Us   

I have simplified the condition if ($templateVariables[‘currentUser’][‘firstName’] != ») to if ($templateVariables[‘currentUser’][‘firstName’]) because the automatic boolean conversion allows us to do it.

You need to convert the entities & < and > in the message back to the characters < and >. Now Latte does this conversion automatically for you.

Task – Person Form

Using templates, create a form like the one below. Assume that you have a variable $person which contains the default values for the form inputs. The person variable should be an associative array with the keys id , first_name , last_name , nickname , birth_day , height .

// This is not a solution, only a hint, how the PHP script should start // Existing user $person = [ 'id' => 123, 'first_name' => 'John', 'last_name' => 'Doe', 'nickname' => 'johnd', 'birth_day' => '1996-01-23', 'height' => 173, ]; /* // New user $person = [ 'id' => null 'first_name' => '', 'last_name' => '', 'nickname' => '', 'birth_day' => null, 'height' => null, ]; */

 require 'latte.php'; $latte = new Latte\Engine(); // Existing user $person = [ 'id' => 123, 'first_name' => 'John', 'last_name' => 'Doe', 'nickname' => 'johnd', 'birth_day' => '1996-01-23', 'height' => 173, ]; /* // New user $person = [ 'id' => null 'first_name' => '', 'last_name' => '', 'nickname' => '', 'birth_day' => null, 'height' => null, ]; */ if ($person['id'])  $tplVars['pageTitle'] = "Edit person"; > else  $tplVars['pageTitle'] = "Add new person"; > $tplVars['person'] = $person; $latte->render('person-form.latte', $tplVars); 

Template file person-form.latte :

Summary

Using a template engine requires you to learn its macro language. However it does lead to a cleaner and safer HTML and PHP code. You don’t need to struggle so much with using proper quotes. When using templates, don’t forget that the variables defined inside a template are only those passed in an array to the render method! Variables from the PHP script are not available in the template automatically. Also keep in mind that while a HTML Template is very similar to a HTML page, it cannot be interpreted by the web browser, only the corresponding template engine is capable of processing it and producing a valid HTML page.

Now you should be familiar with the principle of a PHP template engine and you should be aware of the benefits of using a template engine. You should be able to use basic macros for inserting variables in a template and working with conditionals and loops in Latte templates (either syntax).

New Concepts and Terms

Control question

• Why use templates?
• Are templates slower than plain PHP (using echo )?
• Can you define yor own macro of filter?
• What is the interface between template and PHP code?
• How does a template obtain its variables?
• What is the result of template rendering?

Источник

Шаблонизация в 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-код.

       
Дневник погоды
 
    

Теперь очередь за шаблоном страницы: [main.php]

 
Последние записи
 Добавить новую   
 

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

А вот и шаблон блока для показа одной записи: [inc/item.php]

Так выглядели три шаблона. Все они примут участие в формировании итоговой страницы. Соберёт эти шаблоны и выведет страницу на экран наш сценарий — index.php:

 $items_list]); // окончательный HTML код $layout_content = renderTemplate('layout.php', ['content' => $page_content, 'title' => 'Дневник наблюдений за погодой']); // вывод на экран итоговой страницы print($layout_content); 

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

Источник