На сегодняшний день существует большое количество способов осуществить вывод на html страницу. Всё чаще и чаще для этих целей веб разработчики пользуются так называемыми шаблонизаторами. Сегодня мы рассмотрим небольшой пример использования шаблонизатора Twig.
Особенности Twig
- феноменально быстрая скорость работы (в сравнении с другими шаблонизаторами)
- компиляция шаблонов в хорошо оптимизированный PHP код
- применение “наследования” (можно определить базовый и дочерние шаблоны)
- позволяет создавать и использовать макросы
Установка
Существует множество способов установки Twig-a. Самый простой и быстрый - это скачивание компонента с GitHub , после чего архив необходимо распаковать, и перекинуть каталог lib в папку с нашим проектом.
Структура проекта
Ну а теперь давайте приступим к делу и рассмотрим структуру нашего небольшого проекта:
- compilation_cache
- lib
- Twig
- templates
- base.html
- books.html
- index.php
Весь функционал, связанный с подключением и настройкой Twig-а, содержится в файле index.php .
В папке templates мы будем хранить файлы шаблонов. В нашем случае, этих файлов 2: base.html с базовым html кодом и books.html с выводом списка книг.
В каталоге compilation_cache будут помещаться PHP файлы, созданные Twig-ом для работы.
Подключение и базовая конфигурация Twig-a
Итак, первое что нам необходимо сделать, так это подключить Twig:
Require_once "lib/Twig/Autoloader.php"; Twig_Autoloader::register();
После этого сообщаем шаблонизатору, где у нас хранятся файлы шаблонов. В качестве аргумента передаём путь к каталогу templates :
$loader = new Twig_Loader_Filesystem("templates");
Затем создаём объект шаблонизатора и указываем ещё несколько опций:
$twig = new Twig_Environment($loader, array("cache" => "compilation_cache", "auto_reload" => true));
Параметру cache передаём путь к каталогу compilation_cache . Активируем опцию auto_reload, для того чтобы при обновлении страницы Twig заново обрабатывал шаблоны, и мы видели изменения. Если этого не сделать, то шаблонизатор просто закэширует страницы. Когда же работа над проектом будет завершена, эту опцию можно убрать, чтобы ваши страницы закэшировались и грузились ещё быстрее.
Данные
Для реализации нашего небольшого примера, возьмём список книг и сформируем массив вида ключ - значение:
$books = array(array("number" => "Книга 1", "title" => "Гарри Поттер и философский камень", "date" => "30.06.1997"), array("number" => "Книга 2", "title" => "Гарри Поттер и Тайная комната", "date" => "2.07.1998"), array("number" => "Книга 3", "title" => "Гарри Поттер и узник Азкабана", "date" => "8.07.1999"), array("number" => "Книга 4", "title" => "Гарри Поттер и Кубок огня", "date" => "8.07.2000"), array("number" => "Книга 5", "title" => "Гарри Поттер и Орден Феникса", "date" => "21.07.2003"), array("number" => "Книга 6", "title" => "Гарри Поттер и Принц-полукровка", "date" => "16.07.2005"), array("number" => "Книга 7", "title" => "Гарри Поттер и Дары Смерти", "date" => "21.07.2007"));
Загрузка файла и передача данных
Для того чтобы передать данные в какой-то шаблон и вывести html результат, нам необходимо воспользоваться методом render(); В качестве первого аргумента передаём название файла шаблона, который будем выводить. В качестве второго -массив вида ключ - значение. В дальнейшем по заданным ключам мы будем получать доступ к нашим данным в самих шаблонах.
Echo $twig->render("books.html", array("books" => $books));
index.php
Общий вид файла index.php
Require_once "lib/Twig/Autoloader.php"; Twig_Autoloader::register(); $loader = new Twig_Loader_Filesystem("templates"); $twig = new Twig_Environment($loader, array("cache" => "compilation_cache", "auto_reload" => true)); $books = array(array("number" => "Книга 1", "title" => "Гарри Поттер и философский камень", "date" => "30.06.1997"), array("number" => "Книга 2", "title" => "Гарри Поттер и Тайная комната", "date" => "2.07.1998"), array("number" => "Книга 3", "title" => "Гарри Поттер и узник Азкабана", "date" => "8.07.1999"), array("number" => "Книга 4", "title" => "Гарри Поттер и Кубок огня", "date" => "8.07.2000"), array("number" => "Книга 5", "title" => "Гарри Поттер и Орден Феникса", "date" => "21.07.2003"), array("number" => "Книга 6", "title" => "Гарри Поттер и Принц-полукровка", "date" => "16.07.2005"), array("number" => "Книга 7", "title" => "Гарри Поттер и Дары Смерти", "date" => "21.07.2007")); echo $twig->render("books.html", array("books" => $books));
Настройка базового шаблона
Базовый шаблон представляет собой обычный html документ со специальными вставками:
В нашем главном шаблоне мы прописываем 2 блока: title и content. Названия блоков выбираем сами.
В последствии, в эти общие блоки мы будем внедрять характерную для дочерних страниц информацию.
Настройка шаблона вывода книг
Для начала в дочернем шаблоне нам необходимо указать шаблон родителя:
{% block title %}Серия романов о Гарри Поттере{% endblock %}
Затем, пишем содержание, которое внедрится в блок под названием content в базовом шаблоне:
{% block content %}
Серия романов о Гарри Поттере
Тут же в цикле for (Twig for) мы проходимся по всем книгам, которые передали в данный шаблон с помощью записи $twig->render("books.html", array("books" => $books)); и для извлечения значений обращаемся к элементам массива по ключам: {{book.number}}, {{book.title}} и так далее.
Таким образом, после срабатывания метода $twig->render("books.html", array("books" => $books)) , Twig подгрузит шаблон books.html и сформирует html содержание. Далее он распознает, что books.html - это дочерний шаблон base.html, и поместит сформированное содержание в базовый шаблон. После всего этого Twig вернёт нам полноценную html страницу.
Итог
Пример работы данного скрипта вы можете посмотреть в demo или скачать архив с готовым примером.
Ждём впечатлений в комментариях. Если вас заинтересовала данная тема, то в дальнейшем мы продолжим разговор о шаблонизаторе Twig.
Как правило, все шаблонизаторы похожи друг на друга и различаются только какими-то специфическими особенностями и деталями. Главная задача шаблонизаторов - разделить бизнес логику приложения и вывод данных на страницу, таким образом, позволив разработчикам и дизайнерам работать одновременно, не капая друг другу на мозги.
Многие PHP фрэймворки, включая: Zend Frameworkd, Agavi, CackPHP и CodeIgniter, по-своему реализуют разделение бизнес логики и вывод данных. Однако, если вы не любите фрэймворки или ваш проект слишком мал для их использования, то вы можете воспользоваться какой-то отдельной системой построения шаблонов. К счастью, нам есть из чего выбирать. Smartym Savant, Dwoo... этот список можно продолжать и продолжать, однако в этой статье я покажу вам, как работать с шаблонизатором Twig.
Установка
Существует множество способов установки Twig-a. Самый простой и быстрый - это скачивание компонента с GitHub , после чего архив необходимо распаковать, и перекинуть каталог lib в папку с нашим проектом.
Основы
Прежде чем приступить непосредственно к делу, давайте разберёмся с принципом работы шаблонизаторов. Обычное PHP приложение состоит из целого набора страниц, которые включают в себя как статический HTML код (меню, списки, изображения и т.д.), так и динамический контент (вывод данных из БД, xml файла, сервисы, …). С помощью Twig мы можем разделить данные процессы, создавая шаблоны со специальными маркерами, вместо которых в последствии будет вставляться динамический контент.
Значения для данных маркеров формируются в основном PHP скрипте; там же происходит общение с базой данных, xml парсинг и другие всевозможные операции. Таким образом, ваша страница будет строиться на основе 2х источников: шаблона с специальными вставками и PHP скриптов, где мы храним основной функционал. Это даёт возможность PHP разработчикам и дизайнерам одновременно работать над одними и теми же страницами.
Приступаем к делу
Для того чтобы посмотреть, как работает Twig, предлагаю рассмотреть простой пример:
Account successfully created!
Hello {{ name }}
Thank you for registering with us. Your account details are as follows:
Username: {{ username }}
Password: {{ password }}
You"ve already been logged in, so go on in and have some fun!
Сохраните данный файл templates/thanks.tmpl. Обратите внимание на то, что все маркеры, представляющие собой переменные, помещены в двойные фигурные скобки. Подобная запись подскажет Twig-у, где и как осуществлять вставку данных.
Затем, нам необходимо создать основной скрипт, где будет происходить формирование переменных и данных:
loadTemplate("thanks.tmpl"); // передаём в шаблон переменные и значения // выводим сформированное содержание echo $template->render(array("name" => "Clark Kent", "username" => "ckent", "password" => "krypt0n1te",)); } catch (Exception $e) { die ("ERROR: " . $e->getMessage()); } ?>
В результате, если вы откроете данную страницу в браузере, то увидите следующее:
Для использования Twig-а, вам нужно пройти следующие шаги:
- Инициализировать авто-загрузчик Twig-а, для того чтобы классы шаблонизатора подгружались автоматически.
- Инициализировать загрузчик шаблонов. В нашем случае эт Twig_Loader_FileSystem. В качестве аргумента передаём путь к каталогу с шаблонами.
- Создать объект самого Twig и передать ему уже сконфигурированные настройки.
- Подгрузить нужный нам шаблон с помощью метода loadTemplate, передав в него название используемого шаблона. В качестве результата метод вернёт экземпляр шаблона.
- Сформировать массив вида "ключ-значение", где ключи - это названия переменных, а значения - данные, выводимые в шаблоне. Затем этот массив нужно передать в метод render(), который совместит шаблон с переданными данными и вернёт сгенерированный результат.
Условия
Twig также предоставляет нам возможность создавать условные выражения ‘if-else-endif’. Пример:
Odd or Even
{% if div == 0 %} {{ num }} is even. {% else %} {{ num }} is odd. {% endif %}В зависимости от числа, которое генерируется в основном PHP скрипте, шаблон отобразит одно из двух сообщений. Вот и скрипт, где генерируется число от 0 до 30 и проверяется на чётность:
loadTemplate("numbers.tmpl"); // генерируем случайное число // и проверяем его на чётность $num = rand (0,30); $div = ($num % 2); echo $template->render(array ("num" => $num, "div" => $div)); } catch (Exception $e) { die ("ERROR: " . $e->getMessage()); } ?>
а вот и результат:
Также мы можем сделать многоуровневые проверки ‘if-elseif-else-endif’. Пример:
Seasons
{% if month > 0 and month <= 3 %} Spring is here, watch the flowers bloom! {% elseif month > 3 and month <= 6 %} Summer is here, time to hit the beach! {% elseif month > 6 and month <= 9 %} Autumn is here, watch the leaves slowly fall! {% elseif month > 9 and month <= 12 %} Winter is here, time to hit the slopes! {% endif %}А вот и скрипт, где мы генерируем номер месяца и передаём его в шаблон:
loadTemplate("seasons.tmpl"); // получаем номер месяца $month = date("m", mktime()); echo $template->render(array ("month" => $month)); } catch (Exception $e) { die ("ERROR: " . $e->getMessage()); } ?>
А вот и вывод:
Циклы
Twig также поддерживает цикл ‘for’. Он очень удобен, если нам необходимо пройтись по массиву. Пример:
Shopping list
-
{% for item in items %}
- {{ item }} {% endfor %}
В данном примере у нас простой не ассоциативный массив. На каждой итерации мы будем получать по одному элементу и выводить его в элементе списка. Вот и скрипт:
loadTemplate("list.tmpl"); echo $template->render(array ("items" => $items)); } catch (Exception $e) { die ("ERROR: " . $e->getMessage()); } ?>
Результат:
Для того чтобы пройтись по ассоциативному массиву, мы можем обращаться к ключам через “точку”. Пример:
"Harry Potter and the Deathly Hallows", "author" => "J. K. Rowling", "publisher" => "Scholastic", "category" => "Children\"s fiction", "pages" => "784"); include "Twig/Autoloader.php"; Twig_Autoloader::register(); try { $loader = new Twig_Loader_Filesystem("templates"); $twig = new Twig_Environment($loader); $template = $twig->loadTemplate("book.tmpl"); echo $template->render(array ("book" => $book)); } catch (Exception $e) { die ("ERROR: " . $e->getMessage()); } ?>
Для того чтобы достучаться до значений массива в шаблоне, сначала пишем имя переменной, в которой хранится сам массив. Затем ставим точку и пишем название ключа, по которому достаём данные:
Book details
Title | {{ book.title }} |
Author | {{ book.author }} |
Publisher | {{ book.publisher }} |
Pages | {{ book.pages }} |
Category | {{ book.category }} |
Результат:
Такой же подход может быть применён для работы с объектами.
Дамп данных
Безусловно циклы вам пригодиться при выводе данных из БД. Пример:
Countries and capitals
Country | Region | Population | Capital | Language |
{{ d.name|escape }} | {{ d.region|escape }} | {{ d.population|escape }} | {{ d.capital|escape }} | {{ d.language|escape }} |
В следующем фрагменте кода я использую PDO подключение к MySQL базе данных ‘world’. Если вы хотите попробовать данный пример, то вам нужно сформировать базу самим:
getMessage(); } // установка error режима $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); // выполняем запрос try { // формируем SELECT запрос // в результате каждая строка таблицы будет объектом $sql = "SELECT country.Code AS code, country.Name AS name, country.Region AS region, country.Population AS population, countrylanguage.Language AS language, city.Name AS capital FROM country, city, countrylanguage WHERE country.Code = city.CountryCode AND country.Capital = city.ID AND country.Code = countrylanguage.CountryCode AND countrylanguage.IsOfficial = "T" ORDER BY population DESC LIMIT 0,20"; $sth = $dbh->query($sql); while ($row = $sth->fetchObject()) { $data = $row; } // закрываем соединение unset($dbh); $loader = new Twig_Loader_Filesystem("templates"); $twig = new Twig_Environment($loader); $template = $twig->loadTemplate("countries2.tmpl"); echo $template->render(array ("data" => $data)); } catch (Exception $e) { die ("ERROR: " . $e->getMessage()); } ?>
Тут стоит отметить несколько вещей:
Мы используем метод getchObject(), который вернёт нам строки из таблицы в виде объектов. Названия полей будут соответствовать названиям колонок. Затем эти объекты мы помещаем в массив и передаём его в шаблон. В шаблоне, используем цикл и выводим данные.
В данном примере также используется встроенный в Twig фильтр `escape`. По умолчанию данный фильтр пользуется функцией htmlspecialchars() для фильтровки данных. Это неплохая защита от XSS атак.
Подгрузка шаблонов
Также в Twig-е есть ещё одна команда - `include`, которая позволяет подключать содержание других шаблонов. Это может пригодиться, когда вы захотите прикрепить к вашим файлам меню, заголовок или подвал.
Для демонстрации представьте, что данный код - это главный шаблон:
Все секции данной страницы находятся в отдельных файлах и подключаются сюда с помощью команды `include`. Давайте посмотрим, как выглядят подключаемые файлы:
{{ item.name|upper }} | {% endfor %}
-
{% for item in nav.secondary %}
- {{ item.name }} {% endfor %}
А вот и главный PHP скрипт:
array(array("name" => "Clothes", "url" => "/clothes"), array("name" => "Shoes and Accessories", "url" => "/accessories"), array("name" => "Toys and Gadgets", "url" => "/toys"), array("name" => "Books and Movies", "url" => "/media"),), "secondary" => array(array("name" => "By Price", "url" => "/selector/v328ebs"), array("name" => "By Brand", "url" => "/selector/gf843k2b"), array("name" => "By Interest", "url" => "/selector/t31h393"), array("name" => "By Recommendation", "url" => "/selector/gf942hb"))); include "Twig/Autoloader.php"; Twig_Autoloader::register(); try { $loader = new Twig_Loader_Filesystem("templates"); $twig = new Twig_Environment($loader); $template = $twig->loadTemplate("shop.tmpl"); echo $template->render(array ("nav" => $nav, "updated" => "24 Jan 2011")); } catch (Exception $e) { die ("ERROR: " . $e->getMessage()); } ?>
Обратите внимание, что нам не нужно загружать все шаблоны функцией loadTemplate. Главное подключить основной шаблон. Каждый мелкий под-шаблон загрузится автоматом. Переменные и значения, переданные в главный шаблон, будут доступны во всех подключаемых шаблонах.
Результат:
Фильтрация данных
В данной статье мы уже затронули тему фильтров. Давайте посмотрим, какие ещё возможности в данной сфере предоставляет нам Twig.
Давайте рассмотрим, к примеру, фильтр ‘date’. Данный фильтр даёт нам возможность формировать дату и время, используя нативные для PHP маркеры. Пример:
{{ "now"|date("d M Y h:i") }}
{{ "now"|date("d/m/y") }}
Результат:
Также вы можете воспользоваться фильтрами `upper`, `lower`, `capitalize`, `title` для контроля заглавных и прописных букв:
{{ "the cow jumped over the moon"|upper }}
{{ "the cow jumped over the moon"|capitalize }}
{{ "the cow jumped over the moon"|title }}
{{ "The Cow jumped over the Moon"|lower }}
Результат:
Фильтр `striptags` уберёт из текста все HTML и XML элементы:
{{ "
Результат:
Фильтр `replace` позволяет быстро и просто заменять какие-то значения в строке на нужные нам. Пример:
{{ "I want a red boat"|replace({"red" : "yellow", "boat" : "sports car"}) }}
Результат:
Вы уже видели фильтр `escape` в действии. В Twig также есть фильтр, который делает абсолютно противоположное действие - `raw`. Его следует использовать только для html кода, который вы считаете 100% безопасным.
Escaped output: {{ html|escape }}
Raw output: {{ html|raw }}
Если же вам нужно применить `escape` к большому блоку кода, то вы можете воспользоваться синтаксисом `autoescape`, передав булево значение true/false для активации и дезактивации фильтрации `escape`. Пример:
{% autoescape true %} Escaped output: {{ html }}
{% endautoescape %} {% autoescape false %} Raw output: {{ html }} {% endautoescape %}
Теперь вы уже больше знаете о Twig-e и можете использовать условия, циклы и фильтры.
Используются для подготовки шаблонов печатных форм, писем, SMS и оповещений. Представляют из себя html-верстку с вкраплениями twig-разметки, поэтому для создания шаблонов необходимы базовые знания html и twig. В системе, как правило, есть ряд заранее подготовленных шаблонов, которые вы можете брать за основу.
Примеры обращений:
{% if order.fromApi %} {{ order.getNickName() }} {% endif %}
Объекты связаны между собой через поля, т.е., обращаясь к полю одного объекта, можно получить другой объект. В таких случаях описание поля в справочнике является ссылкой на объект, который возвращается при обращении к полю.
Пример обращения:
{% if order.getDeliveryType().getCode() == "russian-post" %} {{ order.trackNumber }} {% endif %}
Отмена генерации twig-шаблона
Могут возникать ситуации, когда требуется отменить генерацию шаблона. Например, мы на триггере хотим отправлять письмо с товарными рекомендациями, но, если никаких рекомендаций для клиента не найдено, то генерацию шаблона письма и его отправку производить не надо. Для отмены следует использовать тег {% cancel %} .
Пример использования:
{% set recom = best_selling_products() %} {% if recom|length > 0 %} {# выводим рекомендуемые товары #} {% else %} {% cancel %} {% endif %}
Если срабатывает {% cancel %} , то в это будет зафиксировано:
В теге также можно указать сообщение, которое будет зафиксировано в .
Пример использования с указанием сообщения:
{% set recom = best_selling_products() %} {% if recom|length > 0 %} {# выводим рекомендуемые товары #} {% else %} {% cancel "Не найдено рекомендованных товаров" %} {% endif %}
В журнале действий в этом случае будет следующее:
В случае отмены генерации шаблона письма, SMS или печатной формы, которые генерируются вручную, пользователю будет выведено сообщение, указанное в теге {% cancel %} .
Часто возникающие вопросы
1. Как вывести в шаблоне значение пользовательского поля заказа
Для вывода данных из пользовательского поля используйте метод getCustomField . Пример:
{{ order.getCustomField("some_code") }}
В примере some_code - символьный код пользовательского поля.
2. Ошибка при попытке вывести поле заказа, содержащее дату
Речь о проблеме в случае, когда вы видите следующее сообщение об ошибке:
Calling "__tostring" method on a "DateTime" object is not allowed
Дело в том, что при выводе в twig-шаблоне полей заказа (или клиента), которые содержат дату, требуется применять фильтр date , чтобы указать формат вывода даты.
{{ order.createdAt|date("d.m.Y") }}
3. Ошибка при попытке вывести поле, содержащее интервал дат
Речь о проблеме в случае, когда вы видите подобное сообщение об ошибке:
Calling "m" property on a "DateInterval" object is not allowed
Дело в том, что при выводе в twig-шаблоне полей, которые содержат интервал дат, требуется применять фильтр date , чтобы указать формат вывода.
{{ period|date("%m") }}
Подробное описание форматов вывода DateInterval можно найти по ссылке: http://php.net/manual/ru/dateinterval.format.php
4. Как вывести текущую дату
Для вывода текущей даты используйте фильтр date следующим образом:
{{ "now"|date("d.m.Y") }}
5. Как вывести штрихкод в печатной форме
Вы можете воспользоваться сервисом http://www.barcodes4.me/apidocumentation . Пример подстановки данных:
Twig 2 - Twig for Template Designers
Twig для дизайнеров шаблонов
Этот документ описывает синтаксис и семантику механизма шаблона и будет наиболее полезен в качестве ссылки на те, которые создают шаблоны Twig.
конспект
Шаблон - это просто текстовый файл. Он может генерировать любой текстовый формат (HTML, XML, CSV, LaTeX и т. Д.). У него нет определенного расширения, .html или.xml просто отлично.
Шаблон содержит переменные или выражения , которые заменяются значениями при оценке шаблона и тегами , которые управляют логикой шаблона.
Ниже приведен минимальный шаблон, который иллюстрирует несколько основ. Ниже мы расскажем о следующих деталях:
My Webpage
{{ a_variable }}Существует два типа разделителей: {% ... %} и {{ ... }} . Первый используется для выполнения таких операторов, как for-loops, последний печатает результат выражения в шаблоне.
Интеграция с IDE
Многие IDE поддерживают подсветку синтаксиса и автозаполнение для Twig:
- Textmate через пакет Twig
- Vim через плагин синтаксиса Jinja или плагин vim-twig
- Netbeans через плагин синтаксиса Twig (до 7.1, родной по 7.2)
- PhpStorm (родной от 2.1)
- Eclipse через плагин Twig
- Возвышенный текст через пакет Twig
- GtkSourceView через определение языка Twig (используется gedit и другими проектами)
- Coda и SubEthaEdit через синтаксический режим Twig
- Coda 2 через другой синтаксический режим Twig
- Комодо и Комодо Редактировать через режим Twid подсветки / синтаксиса
- Блокнот ++ через Notepad ++ Twig Highlighter
- Emacs через web-mode.el
- Atom через PHP-ветку для атома
- Код Visual Studio через пакет Twig
Реализация
Для удобства foo.bar выполняет следующие действия на уровне PHP:
- если нет, и если foo является объектом, проверьте, что bar является допустимым свойством;
- если нет, и если foo является объектом, проверьте, что bar является допустимым методом (даже если bar является конструктором - вместо этого используйте __construct());
- если нет, и если foo является объектом, проверьте, что getBar является допустимым методом;
- если нет, и если foo является объектом, проверьте, что isBar является допустимым методом;
- если нет, и если foo является объектом, проверьте, что hasBar является допустимым методом;
foo["bar"] с другой стороны, работает только с массивами PHP:
- проверьте, является ли foo массивом и bar действительный элемент;
- если нет, верните null значение.
Глобальные переменные
В шаблонах всегда доступны следующие переменные:
- _self: ссылается на текущее имя шаблона;
- _context: ссылается на текущий контекст;
- _charset: ссылается на текущую кодировку.
Установка переменных
Вы можете назначать значения для переменных внутри кодовых блоков. В назначениях используется тег set :
{% set foo = "foo" %} {% set foo = %} {% set foo = {"foo": "bar"} %}
фильтры
Переменные могут быть изменены фильтрами . Фильтры отделяются от переменной символом (|) и могут иметь необязательные аргументы в круглых скобках. Несколько фильтров могут быть скованы цепью. Выход одного фильтра применяется к следующему.
В следующем примере удаляются все теги HTML из name и заголовков:
{{ name|striptags|title }}
Фильтры, которые принимают аргументы, имеют круглые скобки вокруг аргументов. Этот пример присоединяется к списку через запятую:
{{ list|join(", ") }}
Чтобы применить фильтр к разделу кода, оберните его в тег filter :
{% filter upper %} This text becomes uppercase {% endfilter %}
Members
-
{% for user in users %}
- {{ user.username|e }} {% endfor %}
По умолчанию фильтр-победитель использует html стратегию, но в зависимости от контекста экранирования вы можете явно использовать любые другие доступные стратегии:
{{ user.username|e("js") }} {{ user.username|e("css") }} {{ user.username|e("url") }} {{ user.username|e("html_attr") }}
Работа с автоматическим экранированием
Независимо от того, включено ли автоматическое экранирование или нет, вы можете пометить раздел шаблона, который должен быть экранирован или нет, используя тег autoescape :
{% autoescape %} Everything will be automatically escaped in this block (using the HTML strategy) {% endautoescape %}
По умолчанию автоматическое экранирование использует стратегию экранирования html . Если вы выводите переменные в других контекстах, вам необходимо явно избежать их с помощью соответствующей стратегии экранирования:
{% autoescape "js" %} Everything will be automatically escaped in this block (using the JS strategy) {% endautoescape %}
Спасаясь
Иногда желательно или даже необходимо, чтобы Twig игнорировали части, которые иначе обрабатывались бы как переменные или блоки. Например, если используется синтаксис по умолчанию, и вы хотите использовать {{ качестве исходной строки в шаблоне и не запускать переменную, вам нужно использовать трюк.
Самый простой способ - вывести разделитель переменных ({{), используя переменное выражение:
{{ "{{" }}Для больших разделов имеет смысл отметить блок verbatim .
макрос
Макросы сопоставимы с функциями на обычных языках программирования. Они полезны для повторного использования часто используемых фрагментов HTML, чтобы не повторять себя.
{% if phone matches "/^[\\d\\.]+$/" %} {% endif %}
Оператор сдерживания
Оператор in выполняет тест на герметичность.
Он возвращает true если левый операнд содержится справа:
{# returns true #} {{ 1 in }} {{ "cd" in "abcde" }}
Наконечник
Вы можете использовать этот фильтр для выполнения теста сдерживания на строках, массивах или объектах, реализующих интерфейс Traversable .
Чтобы выполнить отрицательный тест, используйте оператор not in операторе:
{% if 1 not in %} {# is equivalent to #} {% if not (1 in ) %}
Оператор тестирования
Оператор выполняет тесты. Тесты могут быть использованы для проверки переменной на общее выражение. Правильный операнд - это имя теста:
{# find out if a variable is odd #} {{ name is odd }}
Тесты также могут принимать аргументы:
{% if post.status is constant("Post::PUBLISHED") %}
Тесты могут быть сведены на нет с помощью оператора is not:
{% if post.status is not constant("Post::PUBLISHED") %} {# is equivalent to #} {% if not (post.status is constant("Post::PUBLISHED")) %}
Мы разобрались с конфигами и значениями параметров. Сегодня научимся выводить настройки в браузере. А чтобы не было скучно просто писать html, подключим к проекту шаблонизатор Twig. Ему и будет посвящена основная часть статьи.
У Twiga отличный функционал и простой синтаксис. В дебри лезть не будем, нам хватит и малой части его возможностей. Начинаем.
Подключаем Twig и рендерим первый шаблон.
Хотел скачать последнюю версию twig-a 2.x, но обломался. Он ставится через composer, а я в нем не шарю. Подозреваю, что composer мало чем отличается от фронтовых npm или bower, но погружаться сейчас не будем. Кто в теме, сделают composer require "twig/twig:^2.0" и без меня, а я как нормальный php-шник скачиваю версию 1.x через Download zip и не парюсь. Качать отсюда https://github.com/twigphp/Twig/tree/1.x
Ищем твигу местечко в проекте. Создадим папку admin/lib/Twig и закинем туда библиотеку. Идеально, смогли и без composer-a.
Идем дальше. Твигу нужна папка cache, куда он может свободно записывать отрендеренные шаблоны. Дискуссионный вопрос, куда определяют папку кэша нормальные пацаны? Я без фантазии создал прямо в admin - admin/cache. Ну и бог с ней. Главное, убедитесь, что в нее разрешена запись юзеру www-data. Если сидите на винде, то пофиг. А если нет, то смените владельца и дайте права на запись в cache
$ sudo chown -R www-data:www-data ./cache $ sudo chmod -R 755 ./cache/
Последнее, что нужно твигу - знать, где брать шаблоны. Для этого сделаем папку admin/templates и закинем в нее index.html c содержимым Hello, {{name}} . Ага, уже постигаем магию. Значение name будет передаваться в шаблон извне, из php-файла.
Давайте в admin/index.php подключим twig и отрендерим шаблон. Испокон веков автор фигачил разметку в index.php, а сейчас нет. Повзрослел. php-файл займется тем, чем и должен - логикой приложения. Даже звучит приятно, значит, пора реализовывать.
// Подключаем шаблонизатор require_once "./lib/Twig/Autoloader.php"; // Инициализируем Twig Twig_Autoloader::register(); $loader = new Twig_Loader_Filesystem("./templates"); $twig = new Twig_Environment($loader, array("cache" => "./cache", "debug" => true)); // Рендерим шаблон echo $twig->render("index.html", array("name" => "Twig"));
В первой строке подключаем сам твиг. Дальше инициализация.
В документации я прочитал, если возникнет Непредвиденный Случай и почему-то НЕ СРАБОТАЕТ, то напишите Twig_Autoloader::register();
Я человек-удача и тот самый случай поймал. Написал, что велено, и все стало хорошо. Надеюсь, Вам повезет больше и вместо 10 строк уложитесь в 9.
Дальше в $loader и $twig загружаем среду или что-то такое нужное для шаблонизатора. Указываем в параметрах путь к папкам шаблонов и кеша и важный параметр debug=true. На боевом сайте debug убирайте, но пока оставьте. Иначе при изменении шаблона в templates/index.html твигу будет наплевать и он сразу возьмет срендеренный из кэша. И будем удивляться, чо это шаблон правим, а в браузере не меняется.
Итак, обновим страницу и видим текст Hello, Twig . Поздравляю, наш первый шаблон отработал. Но прежде чем наполнять его полезным содержимым, немного изменим index.php. А точнее подключим класс админки и в шаблон отдадим не name=Twig, а настройки. Получится вот так.
// Подключаем шаблонизатор и класс админки require_once "./lib/Twig/Autoloader.php"; require_once "./admin.class.php"; // Инициализируем Twig Twig_Autoloader::register(); $loader = new Twig_Loader_Filesystem("./templates"); $twig = new Twig_Environment($loader, array("cache" => "./cache", "debug" => true)); // Создаем объект админки $admin = new Admin(); // Рендерим шаблон echo $twig->render("index.html", array("settings" => $admin->getSettings()));
Редактируем шаблон.
В предыдущей статье засветился прототип. На него и ориентируемся. Нам понадобится заготовка html-документа и простая форма с названиями параметров и значениями.
Конечно, форма будет на bootstrap. Однажды я раздуплюсь и покажу какой-нибудь другой css-фреймворк, но пока лень. Оправдываю себя тем, что мы же с вами не css-ы верстаем, а ПРИЛОЖЕНИЯ ПРОГРАММИРУЕМ. Пока отмазка работает, возвращаемся к шаблону.
Заготовку беру с сайта bootstrap. В head скопипастим такое
А body придется писать самим.
Выглядит как обычная бутстраповская форма, но с твиговскими вставками.
Разберем по очереди.
{% for item in settings %}
Перебираем в цикле настройки и для каждой выводим label и input в форме.
item.key используется и как айди, и как название name инпута, и как значение for в label. Такой важный нужный key.
item.title - заголовок настройки.
А это текстовое поле со значением.
Теперь обновляем страницу и видим список настроек с нужными значениями. Красота! Поменяйте значения полей в config/values.json. Работает, опять красота.
На этом позитивном предложении автор закончил бы статью, но нельзя. Потому что внимательный читатель скажет: стоп, а картиночка-то не та! С прототипом не сходится. А любознательный читатель еще и спросит: а зачем в первом уроке столько мутили с конфигами и разными типами данных? Чтобы сейчас выводить их тупо в инпуты? Конечно, читатель прав. Поэтому автор сходит выпить чаю и напишет еще пару абзацев.
Итак, продолжаем. Мы хотим выводить разные инпуты-селекты в зависимости от типа найстройки. В этом помогут условия twig и поле type из конфига настроек. В наличии 4 типа настроек: text, number, checkbox и select. Под каждую из них делаем условие. Вместо
пишем так
{% if item.type == "text" %} {% endif %} {% if item.type == "number" %} {% endif %} {% if item.type == "checkbox" %}
{% endif %} {% if item.type == "select" %} {% for option in item.list %} {{ option }} {% endfor %} {% endif %}
Вроде прям много и развесисто, но посмотрим ближе и станет яснее.
- текстовый инпут просто обернули в условие item.type == "text"
- number - тот же инпут, только с type="number"
- для checkbox отдельная верстка. Логично, чекбокс же, не просто инпут.
Не забываем про атрибут checked, который ставится в зависимости от item.value (true или false).
Интересно, что у самого чекбокса нет атрибута name со значением item.key. Зато name есть у скрытого инпута рядом с чекбоксом.
Спойлер: так удобнее для отправки формы на бекенд, в следующей статье убедимся. - у select-а есть цикл, потому что выводим список возможных значений из поля item.list
Теперь еще раз обновим страницу. У меня получилось так
Вот теперь все. Можно поиграть с настройками и значениями в json-файлах и посмотреть, как оно успешно раскидывается по формочке.
Если прониклись твигом и хотите узнать больше, то вот документация на русском. https://x-twig.ru/intro/
Следующий урок будет заключительным по теме "админка на файлах". Мы напишем js-код, который отправит данные на бекенд, и php-код, который эти данные сохранит. Бонусом внедрим уведомления, чтобы пользователь видел, не забыл ли он нажать кнопочку сохранить.
Небольшой опрос напоследок и до встречи!