Templates

Le moteur de templates est responsable de l'affichage des vues. Il est conseillé d'utiliser Twig, plutôt que PHP, comme moteur de templates.

composer require twig

Twig utilise 3 types de tags :

{{ ... }}	“affiche quelque chose” équivalent du echo de php : affiche une variable ou le résultat d'une expression.
{% ... %}	“Fait quelque chose”: tag agissant sur la logique du template ; il est utilisé par exemple pour faire des itérations, ou des contrôles.
{# ... #}	“Commente quelque chose”: équivalent du PHP /* comment */. Il est utilisé pour ajouter des commentaires sur 1 ou plusieurs lignes. Le commentaire ne sera pas présent dans la page réponse.

Twig contient aussi des filtres (filters), qui permettent de modifier le contenu affiché.

L'appel suivant affiche la variable title en majuscules :

{{ title|upper }}

La liste complète des tags est fournie dans la documentation twig

Afficher une variable	Nom : {{nom}}
Afficher un élément de tableau	Utilisateur en position 0 : {{users[0]}}
Accès aux membres (utilisation implicite du getter getNom())	Nom d'utilisateur : {{user.nom}}
Application d'un filtre	Pseudo en majuscules : {{ pseudo\|upper }}
Utilisation d'une combinaison de filtres	Message : {{ news.texte\|striptags\|title }}
Affichage d'une date de type DateTime	Date : {{ date\|date('d/m/Y') }}
Concaténation	Identité : {{ nom ~ ' ' ~ prenom }}

upper	Met toutes les lettres en majuscules.	{{ var\|upper }}
striptags	Supprime toutes les balises XML.	{{var\|striptags }}
date	Formate la date selon le format donné en argument. La variable en entrée doit être une instance de DateTime.	{{ date\|date('d/m/Y') }}
format	Insère des variables dans un texte, équivalent à printf.	{{ "Il y a %s pommes et %s poires"\|format(153, nb_poires) }}
length	Retourne le nombre d'éléments du tableau, ou le nombre de caractères d'une chaîne.	Longueur de la variable : {{ texte\|length }}
raw	Désactive l'auto-escape sur l'affichage de la variable.	Elément HTML : {{ element\|raw }}

if

voir Doc twig if

Permet de poser une condition, comme en php

{% if online == false %}
    <p>Our website is in maintenance mode. Please, come back later.</p>
{% endif %}

for

voir Doc twig for

Equivalent du foreach php :

<h1>Members</h1>
<ul>
    {% for user in users %}
        <li>{{ user.username|e }}</li>
    {% endfor %}
</ul>

Fonctions utiles

attribute

Permet d'accéder au membre d'un objet :

{{ attribute(object, method) }}
{{ attribute(object, method, arguments) }}
{{ attribute(array, item) }}

isDefined

Test l'affectation d'une variable (isset de php)

{% if var is defined %} … {% endif %}

Très souvent, les templates ont besoin de partager certains éléments : header, footer, barres de menus…

Twig permet de répondre à cette problématique à partir de l'héritage et des blocs dans les templates :

Soit un template père définissant le style, ainsi que quelques bloc nommés affichant ou non du contenu.
Il est possible de créer des templates fils héritant du père et remplaçant ou ajoutant leur propre contenu dans les blocs définis.

C'est ainsi que Twig permet de structurer un ensemble de pages, en uniformisant la présentation et en évitant les répétitions de code.

Soit le template principal suivant :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Test Application{% endblock %}</title>
    </head>
    <body>
        <div id="sidebar">
            {% block sidebar %}
                <ul>
                    <li><a href="/">Home</a></li>
                    <li><a href="/blog">Blog</a></li>
                </ul>
            {% endblock %}
        </div>

        <div id="content">
            {% block body %}{% endblock %}
        </div>
    </body>
</html>

Il est possible de définir un template enfant de la façon suivante :

{% extends 'base.html.twig' %}

{% block title %}My cool blog posts{% endblock %}

{% block body %}
    {% for entry in blog_entries %}
        <h2>{{ entry.title }}</h2>
        <p>{{ entry.body }}</p>
    {% endfor %}
{% endblock %}

Il est possible de réutiliser le contenu affiché un bloc du template parent en utilisant la fonction parent() :

{% block sidebar %}
    <h3>Table of Contents</h3>

    {# ... #}

    {{ parent() }}
{% endblock %}

Soit le template suivant affichant le détail d'un article :

<h2>{{ article.title }}</h2>
<h3 class="byline">by {{ article.authorName }}</h3>

<p>
    {{ article.body }}
</p>

Il est possible de réutiliser ce template pour afficher la liste des articles, par inclusion :

{% extends 'layout.html.twig' %}

{% block body %}
    <h1>Recent Articles<h1>

    {% for article in articles %}
        {{ include('article/article_details.html.twig', { 'article': article }) }}
    {% endfor %}
{% endblock %}

Soit la route suivante définie dans le contrôleur Welcome :

use Symfony\Component\Routing\Annotation\Route;

class WelcomeController extends Controller
{
    /**
     * @Route("/", name="welcome")
     */
    public function index()
    {
        // ...
    }
}

Il est possible de générer l'url correspondant à cette route en passant à la fonction path la propriété name de la route : welcome

<a href="{{ path('welcome') }}">Home</a>

Génération de route avec paramètres :

use Symfony\Component\Routing\Annotation\Route;

class ArticleController extends Controller
{
    /**
     * @Route("/article/{slug}", name="article_show")
     */
    public function show($slug)
    {
        // ...
    }
}

{% for article in articles %}
    <a href="{{ path('article_show', {'slug': article.slug}) }}">
        {{ article.title }}
    </a>
{% endfor %}

Génération d'url absolue, à partir de la function url() :

<a href="{{ url('welcome') }}">Home</a>

Templates

Installation

Éléments syntaxiques

Tags

Afficher {{...}}

Filtres

Faire {{#...}}

if

for

Fonctions utiles

attribute

isDefined

Structuration de template

Héritage et blocs

Parent

Inclusion

Liens