Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Шаблонизация Ключевые аспекты веб-разработки на PHP

<?php

$app->get('/', function () {
    return 'Main Page';
});

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

<?php

$app->get('/', function () {
    $title = 'My super site';
    return "<html><body><h1>{$title}</h1></body></html>";
});

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

{% extends "email-html_base.tmpl" %}

{% block content %}
    <p>
        {{ msg }}
    </p>
    <p>
      <b>AFFECTED INSTANCES:</b>
    </p>
    <table class='noborder'>
      <tr>
    <th>UUID</th><th>IP Address</th><th>Host</th>
      </tr>
      {% for instance in instances -%}
        <tr>
          <td>{{ instance.id }}</td><td>{{ instance.accessIPv4 }}</td><td>{{ instance.name }}</td>
        </tr>
      {% endfor %}
    </table>
{% endblock %}

Некоторые виды шаблона не очень похожи на html и крайне популярны в других языках:

doctype html
html
  head
    title Slim Examples
    meta name="keywords" content="template language"
    meta name="author" content=author
    link rel="icon" type="image/png" href=file_path("favicon.png")
    javascript:
      alert('Slim supports embedded javascript!')

  body
    h1 Markup examples

    #content
      p This example shows you how a basic Slim file looks.

    == yield

    - if items.any?
      table#items
        - for item in items
          tr
            td.name = item.name
            td.price = item.price
    - else
      p No items found. Please add some inventory.
        Thank you!

    div id="footer"
      == render 'footer'
      | Copyright &copy; #{@year} #{@author}

А библиотека, в свою очередь, читает этот файл и подставляет необходимые переменные. Таким образом один шаблон может использоваться для разных данных. Например, на Хекслете множество уроков, но шаблон, который формирует html соответствующей страницы — один. Присмотритесь к шаблонам выше. Внутри них нередко используется свой язык с условными конструкциями, циклами и другими механизмами.

Возможно, вы уже догадались, что php сам является шаблонизатором. Ранее мы неоднократно упоминали, что php-код может перемешиваться с html в одном файле. Посмотрите типичный пример:

<?php

$unique = uniqid();
$reference = function($lang) use ($unique) {
    return $lang . $unique;
};

?>

<div class="code-snippets">
    <ul class="nav nav-tabs">
        <?php $first = true; foreach($examples as $lang => $code): ?>
        <li role="presentation" class="<?php echo $reference($lang) . ($first ? ' active' : ''); $first = false ?>">
            <a href="#<?php echo $reference($lang) ?>" aria-controls="<?php echo $reference($lang) ?>" role="tab" data-toggle="tab">
                <?php echo $lang ?>
            </a>
        </li>
        <?php endforeach ?>
    </ul>
    <div class="tab-content">
        <?php $first = true; foreach($examples as $lang => $code): ?>
        <div role="tabpanel" class="tab-pane <?php echo ($first ? 'active' : ''); $first = false ?>" id="<?php echo $reference($lang) ?>">
            <pre><code><?php echo $code ?></code></pre>
        </div>
        <?php endforeach ?>
    </div>
</div>

Получается, что сам файл — это html-код, в котором есть вставки php. Обратите внимание на то, что привычные конструкции имеют немного другой вид. В отличие от обычного кода, в котором мы используем фигурные скобки, в таком варианте используются :, и ключевые слова. Такой подход выбран разработчиками языка исключительно для удобства.

Безопасность

Об этом редко говорят во время обучения, но безопасность крайне важна при работе с html формами и шаблонами в целом. Не понимая основ защиты, вы гарантированно сделаете ошибку, которая может привести к фатальным последствиям для проекта. Например, отсутствие экранирования пользовательских данных приведет к тому, что появится возможность провести XSS атаку.


Самостоятельная работа

  1. Подключите к вашему проекту, созданному в предыдущем уроке, пакет PHP-View в соответствии с документацией. В начале файла public/index.php определите псевдоним для работы с пакетом:

          <?php
    
          use Slim\Views\PhpRenderer;
    
  2. Создайте директорию templates в корне проекта.

  3. Добавьте обработчик в файл public/index.php:

          <?php
    
          $app->get('/about', function ($request, $response) {
              $phpView = new PhpRenderer('../templates');
              return $phpView->render($response, 'about.phtml');
          });
    
  4. Создайте файл templates/about.phtml. Добавьте туда любой html-код.

  5. Запустите проект по аналогии с предыдущим уроком, и откройте в браузере страницу http://localhost:5555/about.


Аватары экспертов Хекслета

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы
профессия
Занимайтесь созданием сайтов, веб-приложений, сервисов и их интеграцией с внутренними бизнес-системами на бекенд-языке PHP
10 месяцев
с нуля
Старт 21 ноября

Используйте Хекслет по-максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»