Шаблонизация — Ключевые аспекты веб-разработки на 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 атаку.

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

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

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

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

      <?php

      $app->get('/about', function ($request, $response) {
          $phpView = new PhpRenderer('../templates');
          return $phpView->render($response, 'about.phtml');
      });

Создайте файл templates/about.phtml. Добавьте туда любой html-код.
Запустите проект по аналогии с предыдущим уроком, и откройте в браузере страницу http://localhost:5555/about.

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

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

Об обучении на Хекслете

Статья «Как учиться и справляться с негативными мыслями»
Статья «Ловушки обучения»
Статья «Сложные простые задачи по программированию»
Вебинар «Как самостоятельно учиться»

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

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

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

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

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

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