18/07/2022 07:12 Dynamisez vos vues à l’aide de Twig - Construisez un site web à l’aide du framework Symfony 5 - OpenClassrooms

Accueil > Cours > Construisez un site web à l’aide du framework Symfony 5 > Dynamisez vos vues à l’aide de Twig

Construisez un site web à l’aide du framework

Symfony 5

20 heures  Moyenne
Mis à jour le 08/07/2022

 

Dynamisez vos vues à l’aide de Twig

09:43

Qu’est-ce que Twig ?



Twig est un moteur de gabarit développé en PHP inclus par défaut avec le framework Symfony 5.

https://openclassrooms.com/fr/courses/5489656-construisez-un-site-web-a-l-aide-du-framework-symfony-5/5517021-dynamisez-vos-vues-a-l-ai… 1/12
18/07/2022 07:12 Dynamisez vos vues à l’aide de Twig - Construisez un site web à l’aide du framework Symfony 5 - OpenClassrooms

Mais PHP est déjà un moteur de gabarit : pourquoi devrions-nous utiliser et apprendre un
moteur de gabarit supplémentaire ?

Le langage PHP qui était un moteur de gabarit à ses débuts est maintenant devenu un langage
complet capable de supporter la programmation objet, fonctionnelle et impérative.

L'intérêt principal d'un moteur de gabarit est de séparer la logique de sa représentation. En

utilisant PHP, comment définir ce qui est de la logique et ce qui est de la représentation ?

Pourtant, nous avons toujours besoin d'un peu de code dynamique pour intégrer des pages web :

pouvoir boucler sur une liste d'éléments ;

pouvoir afficher une portion de code selon une condition ;
ou formater une date en fonction de la date locale utilisée par le visiteur du site...

Voici pourquoi Twig est plus adapté que le PHP en tant que moteur de gabarit :

il a une syntaxe beaucoup plus concise et claire;

par défaut, il supporte de nombreuses fonctionnalités utiles, telles que la notion d'héritage ;
et il sécurise automatiquement vos variables.

Éléments de syntaxe
Twig supporte nativement trois types de syntaxe :

{{ ... }} permet l'affichage d'une expression ;

{% ... %} exécute une action ;
{# ... #} n'est jamais exécuté, c'est utilisé pour des commentaires.

Voici un premier exemple de gabarit pour bien comprendre la différence :

twig

1 {# Ceci est un exemple de gabarit Twig #}

2 {% set collection = [1, 2, 3] %}
3
4 <ul>
5 {% for item in collection %}
6 <li>{{ item }}</li>
7 {% endfor %}
8 </ul>
9
10 {#
11 Va afficher seulement ce code HTML:
12
13 <ul>
14 <li>1</li><li>2</li><li>3</li>
15 </ul>
16 #}

https://openclassrooms.com/fr/courses/5489656-construisez-un-site-web-a-l-aide-du-framework-symfony-5/5517021-dynamisez-vos-vues-a-l-ai… 2/12
18/07/2022 07:12 Dynamisez vos vues à l’aide de Twig - Construisez un site web à l’aide du framework Symfony 5 - OpenClassrooms

Les commentaires multilignes sont autorisés en Twig.

Revenons à notre application Symfony précédente, nous voulions absolument afficher un "Hello
world" de toutes les façons possibles et imaginables . Eh bien, voici comment utiliser un gabarit
Twig dans un contrôleur Symfony :
php

1 <?php
2
3 // src/Controller/HelloController.php
4 namespace App\Controller;
5
6 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
7 use Symfony\Component\Routing\Annotation\Route;
8
9 class HelloController extends AbstractController
10 {
11 /**
12 * Hello world, avec Twig cette fois :)
13 *
14 * @Route("/hello/{name}", name="hello")
15 */
16 public function hello($name)
17 {
18 $this->render('hello.html.twig', ['name' => $name]);
19 }
20 }

Et le gabarit Twig correspondant :

twig

1 {# /templates/hello.html.twig #}
2
3 Hello {{ name }}!

Quelques explications supplémentaires ne seraient pas de refus, n'est-ce pas ?

Par défaut, le framework Symfony ira chercher les gabarits dans son dossier templates.
La fonction render prend en paramètre le chemin vers le gabarit et un tableau de
paramètres.
Les paramètres sont disponibles dans le gabarit.

D'accord, mais pourquoi n'appelle-t-on pas le template tout simplement hello.twig ?

Pourquoi devrait-on limiter nos templates aux pages HTML ? Par exemple, si l'on a besoin de
manipuler un fichier XML - disons un flux RSS -, nous pouvons tout à fait utiliser Twig pour cela, et
nous nommerons le fichier flux.rss.twig, par exemple.

Opérateurs

https://openclassrooms.com/fr/courses/5489656-construisez-un-site-web-a-l-aide-du-framework-symfony-5/5517021-dynamisez-vos-vues-a-l-ai… 3/12
18/07/2022 07:12 Dynamisez vos vues à l’aide de Twig - Construisez un site web à l’aide du framework Symfony 5 - OpenClassrooms

On retrouve tous les opérateurs dans Twig, tous décrits dans la documentation officielle.
twig

1 {% for key, element in elements %}

2 {% if loop.index % 2 %}
3 Element pair
4 {% else %}
5 Element impair
6 {% endif %}
7 {% else %}
8 Il n'y a aucun élément à afficher.
9 {% endfor %}

Par exemple :

in, is ;
les opérateurs mathématiques (+, -, /, %, //, *, **, %) ;
les opérateurs de logique (and, or, not...) ;
les opérateurs de comparaison (==, !=, <, >, >=...) ;
des opérateurs plus utilitaires (~, ?:...).

Bien que ce soit possible, vous ne devriez jamais avoir à écrire vos propres opérateurs :
consultez la documentation en cas de besoin.

Tags
Les tags sont des éléments de langage propres à Twig.

Voici la liste des tags les plus utilisés :

block : définit un espace surchargeable.

do, if, else,for, (with) : éléments de langage identiques à PHP.
import : permet d'importer un fichier comprenant des macros.
set : permet de définir une ou plusieurs variables.
spaceless : supprime tous les espaces entre les tags HTML.
verbatim : ne sera pas pris en compte par Twig.

Étendez votre utilisation de Twig : macros, fonctions et



filtres
Il est possible d'étendre Twig avec trois types d'extensions différentes : les fonctions, les filtres et
les macros.

Les fonctions et filtres à connaître

Une fonction peut changer la valeur d'une variable et peut avoir un ou plusieurs paramètres :
twig

https://openclassrooms.com/fr/courses/5489656-construisez-un-site-web-a-l-aide-du-framework-symfony-5/5517021-dynamisez-vos-vues-a-l-ai… 4/12
18/07/2022 07:12 Dynamisez vos vues à l’aide de Twig - Construisez un site web à l’aide du framework Symfony 5 - OpenClassrooms

1 {% for i in range(1, 10) %}

2 {{ i }}
3 {% endfor %}
4
5 {# Twig supporte les paramètres nommés #}
6 {{ renderWithOptions(foo = 'foo', bar = 'bar', baz = 'baz') }}

Parmi la liste des fonctions disponibles nativement, voici les plus utilisées :

constant : appelle une constante PHP.

include : retourne le rendu d'un fichier.
dump : appelle la fonction dump (disponible uniquement dans Symfony).
min, max : équivalents des fonctions PHP min() et max().

Là où une fonction peut changer la valeur d'une variable, un filtre change seulement son
affichage. On utilise l'opérateur "pipe" | pour appliquer un filtre. Les filtres peuvent être
chaînés.
twig

1 {{ 'foo'|capitalize|reverse }} {# "Oof" #}

Par défaut, Twig protège et échappe toute valeur, donc s'il vous faut afficher un contenu HTML ou
Javascript, utilisez le filtre e ou raw (aucune protection appliquée).
twig

1 {{ '<h1>Foo</h1>' }} {# affichera "<h1>Foo</h1>" dans le navigateur #}

2 {{ '<h1>Bar</h1>'|raw }} {# affichera "Bar" tel qu'attendu #}

Parmi la liste des filtres disponibles nativement, voici les plus utilisés :

date : permet de formater une date.

first : affiche le premier élément.
last : affiche le dernier élément.
length : affiche la longueur d'un tableau, d'une chaîne de caractères.
number_format : permet de formater un nombre.

Avec tous ces fonctions et filtres, vous devriez déjà pouvoir faire de très belles intégrations, mais il
y a mieux, une fonctionnalité de Twig particulièrement utile. Regardez l'exemple qui suit :
twig

1 {% set tableau, article = [1,2,3], {

2 'titre': 'Etendre Twig',
3 'contenu': 'Il est possible ...'
4 }
5 %}
6
7 {{ tableau.2 ~ ' ' ~ tableau|first }} {# "2 1" #}}
8
9 {{ article.titre }} {# "Etendre Twig" #}
10 {{ article.contenu }} {# "Il est possible ..." #}

https://openclassrooms.com/fr/courses/5489656-construisez-un-site-web-a-l-aide-du-framework-symfony-5/5517021-dynamisez-vos-vues-a-l-ai… 5/12
18/07/2022 07:12 Dynamisez vos vues à l’aide de Twig - Construisez un site web à l’aide du framework Symfony 5 - OpenClassrooms

Que s'est-il passé ici ? Plusieurs choses :

Tout d'abord, un exemple d'utilisation de ~ : il est utilisé pour la concaténation de chaînes

de caractères.
Twig est capable, à l'aide de l'opérateur . , d'aller retrouver la clé d'un tableau, la propriété
publique d'un objet ou même l'accesseur correspondant ! Par exemple si l'objet article avait
eu une fonction publique getContenu(), elle aurait été appelée.

Créez vos propres fonctions et filtres

Pour ajouter vos propres filtres et fonctions, il faudra créer une extension Twig.

Une extension Twig est une classe qui permet de définir ses propres filtres et fonctions et qui
implémente Twig_ExtensionInterface, mais on préférera étendre la classe abstraite
AbstractExtension:
php

1 <?php
2 // src/Twig/AppExtension.php
3 namespace App\Twig;
4
5 use Some\LipsumGenerator;
6 use Twig\Extension\AbstractExtension;
7 use Twig\TwigFilter;
8 use Twig\TwigFunction;
9
10 class AppExtension extends AbstractExtension
11 {
12 public function getFilters()
13 {
14 return [
15 new TwigFilter('price', [$this, 'filterPrice']),
16 ];
17 }
18
19 public function getFunctions()
20 {
21 return [
22 // appellera la fonction LipsumGenerator:generate()
23 new TwigFunction('lipsum', [LipsumGenerator, 'generate']),
24 ];
25 }
26
27 public function filterPrice($number, $decimals = 0)
28 {
29 $price = number_format($number, $decimals);
30 $price = $price . '€';
31
32 return $price;
33 }
34 }

Quelques explications s'imposent.

https://openclassrooms.com/fr/courses/5489656-construisez-un-site-web-a-l-aide-du-framework-symfony-5/5517021-dynamisez-vos-vues-a-l-ai… 6/12
18/07/2022 07:12 Dynamisez vos vues à l’aide de Twig - Construisez un site web à l’aide du framework Symfony 5 - OpenClassrooms

1. Tout d'abord, dans une extension Twig, on peut définir des filtres et/où des fonctions.
2. Ensuite, la déclaration se fait de la même façon : en premier argument, le nom du filtre (ou
de la fonction) et en deuxième argument, l'appel à effectuer. Cet appel peut être une
fonction de la classe que l'on référence avec $this, ou un appel à une autre classe.
3. Grâce à l'autoconfiguration des services, Symfony va automatiquement reconnaître qu'il
s'agit d'une extension Twig et rendre disponibles le filtre "price" et la fonction "lipsum".

On peut même appeler une simple fonction PHP ! Le deuxième argument de

TwigFunction et TwigFilter est de type callable.

Voici un exemple d'utilisation de ces extensions nouvellement créées :

twig

1 {% set somePrice = 10.7567 %}

2
3 {{ somePrice|price(2) }} {# "10.75€" #}
4
5 {{ lipsum() }}
6
7 {#
8 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam semper turpis et diam imperdiet,
molestie scelerisque diam congue...
9 #}

Créez vos propres macros

Il reste un dernier type d'extension à présenter qui répond à un besoin plus spécifique. On définit
une macro comme étant "une petite routine informatique pour automatiser une tâche répétitive".

Par exemple, imaginons que vous souhaitiez implémenter le système d'alertes du framework CSS
Bootstrap4.

Basiquement, en fonction du type d'erreur, seule une classe CSS va changer :

html

1 <div class="alert alert-primary" role="alert">

2 Message d'alerte principal
3 </div>
4 <div class="alert alert-success" role="alert">
5 Message de succès
6 </div>
7 <div class="alert alert-danger" role="alert">
8 Message d'erreur
9 </div>
10 <div class="alert alert-warning" role="alert">
11 Message d'avertissement
12 </div>
13 <!-- ... et bien d'autres -->

Voilà ce que vous pourriez faire en définissant une macro Twig :

twig
https://openclassrooms.com/fr/courses/5489656-construisez-un-site-web-a-l-aide-du-framework-symfony-5/5517021-dynamisez-vos-vues-a-l-ai… 7/12
18/07/2022 07:12 Dynamisez vos vues à l’aide de Twig - Construisez un site web à l’aide du framework Symfony 5 - OpenClassrooms

1 {# /templates/macros/alertes.html.twig #}
2 {% macro alert(message, type) %}
3 <div class="alert alert-{{ type }}" role="alert">
4 {{ message }}
5 </div>
6 {% endmacro%}

Et son utilisation dans un template Twig (n'oubliez pas d'importer la macro !) :

twig

1 {# /templates/exemple.html.twig #}
2 {% import 'alertes.html.twig' as utils %}
3
4 {{ utils.alert('Attention!', 'warning') }}
5 {{ utils.alert('Erreur fatale!', 'danger') }}

Vous voilà entièrement équipé pour étendre Twig selon vos besoins les plus fous !

Maîtrisez l’héritage de gabarit


Tout au début ce de chapitre, je vous disais que l'héritage de gabarit était l'une des
fonctionnalités les plus utiles de Twig.

Qu'est-ce qu'un héritage de gabarit ?

Définir des blocks et utiliser la fonction parent() permet de customiser et de rendre réutilisables
les gabarits, comme un héritage de classe permet de redéfinir le comportement d'une classe
parent.

Par exemple, le template parent.html.twig :

twig

1 {# /templates/parent.html.twig #}
2 <html>
3 <head>
4 <title>{% block titre %}Parent{% endblock%}</title>
5 {% block stylesheets %}
6 <link rel="stylesheet" href="styles.css" type="text/css" media="all" />
7 {% endblock %}
8 </head>
9 <body>
10 {% block contenuPrincipal %}
11 Contenu du body
12 {% endblock %}
13 {% block javascripts %}{% endblock %}
14 </body>
15 </html>

Et voici la page "Product" qui utilise "Parent" :

twig

1 {# /templates/produit.html.twig #}
2 {% extends 'parent.html.twig' %}
3

https://openclassrooms.com/fr/courses/5489656-construisez-un-site-web-a-l-aide-du-framework-symfony-5/5517021-dynamisez-vos-vues-a-l-ai… 8/12
18/07/2022 07:12 Dynamisez vos vues à l’aide de Twig - Construisez un site web à l’aide du framework Symfony 5 - OpenClassrooms

4 {% block titre %}Page Produit{% endblock%}

5
6 {% block stylesheets %}
7 {{ parent() }}
8 <link rel="stylesheet" href="produit.css" type="text/css" media="all" />
9 {% endblock%}
10
11 {% block contenuPrincipal %}
12 <p>Ceci est la page Produit!</p>
13 {% endblock %}
14
15 {% block javascripts %}
16 <script src="build/produit.js" />
17 {% endblock %}

Rendra le fichier HTML suivant à l'utilisateur :

html

1 <html>
2 <head>
3 <title>Page Produit</title>
4 <link rel="stylesheet" href="styles.css" type="text/css" media="all" />
5 <link rel="stylesheet" href="produit.css" type="text/css" media="all" />
6 </head>
7 <body>
8 <p>Ceci est la page Produit!</p>
9 <script src="build/produit.js" />
10 </body>
11 </html>

La fonction parent() permet de récupérer le contenu du bloc dans le gabarit parent.

Pour résumer ce que nous avons fait ici :

nous avons rendu le titre de la page HTML configurable: par défaut, sa valeur est "Parent" si
le bloc "titre" n'est pas surchargé ;
nous avons rendu le corps de la page configurable, et par défaut, il est vide ;
nous avons rendu l'ajout de fichier CSS et Javascript configurable : dans la page Produit,
nous avons souhaité conserver l'appel au fichier CSS "styles.css" à l'aide de la fonction
parent().

Vous l'aurez compris, plus vous définissez de blocs, plus vos gabarits seront extensibles
grâce à l'héritage !

 Console de code 

https://openclassrooms.com/fr/courses/5489656-construisez-un-site-web-a-l-aide-du-framework-symfony-5/5517021-dynamisez-vos-vues-a-l-ai… 9/12
18/07/2022 07:12 Dynamisez vos vues à l’aide de Twig - Construisez un site web à l’aide du framework Symfony 5 - OpenClassrooms

À votre tour de coder


Mettez immédiatement en application ce que vous avez
appris.
Vous êtes libre de vous tromper et de réessayer autant que vous
le souhaitez.

JE CODE MAINTENANT !

JE NE PEUX PAS, J'AI PISCINE

En résumé


Twig est un moteur de gabarit intégré au framework Symfony, avec une syntaxe claire et
sécurisée par défaut.

Les fonctions sont utiles pour l'intégration de vos pages, par exemple dump dont nous
avons parlé dans un chapitre précédent.
Les filtres sont utiles lorsque vous souhaitez changer l'affichage de vos données, et ils
peuvent être chaînés.
Les macros permettent d'automatiser toutes les tâches d'intégration répétitives qui ne
nécessitent aucun calcul : il faudra importer la macro dans chaque gabarit où vous en
aurez besoin.

Il est possible de créer ses propres fonctions et filtres grâce à l'autoconfiguration du container de
services. Il suffira de créer une classe qui étend AbstractExtension et les extensions seront
disponibles dans vos gabarits.

Enfin, Twig supporte l'héritage : ceci permet de mettre les blocs de vos pages communes (haut
de page, bas de page) dans les gabarits parents et de seulement surcharger des parties

https://openclassrooms.com/fr/courses/5489656-construisez-un-site-web-a-l-aide-du-framework-symfony-5/5517021-dynamisez-vos-vues-a-l-a… 10/12
18/07/2022 07:12 Dynamisez vos vues à l’aide de Twig - Construisez un site web à l’aide du framework Symfony 5 - OpenClassrooms

spécifiques du gabarit. L'intégration devient plus facile, car il y a moins de gabarits à maintenir et
ils sont plus configurables.

Dans le prochain chapitre, vous découvrirez comment interagir avec vos utilisateurs par le biais
de formulaires et ce sera l'occasion d'utiliser Twig dans un exercice pratique. À tout de suite !

INDIQUER QUE CE CHAPITRE N'EST PAS TERMINÉ

QUIZ : DÉVELOPPEZ VOTRE PREMIÈRE INTERAGISSEZ AVEC VOS

 
APPLICATION SYMFONY UTILISATEURS

Le professeur
Mickaël Andrieu
Consultant et Formateur Web / Data

OPENCLASSROOMS

OPPORTUNITÉS

AIDE

POUR LES ENTREPRISES

EN PLUS

Français

https://openclassrooms.com/fr/courses/5489656-construisez-un-site-web-a-l-aide-du-framework-symfony-5/5517021-dynamisez-vos-vues-a-l-a… 11/12
18/07/2022 07:12 Dynamisez vos vues à l’aide de Twig - Construisez un site web à l’aide du framework Symfony 5 - OpenClassrooms

https://openclassrooms.com/fr/courses/5489656-construisez-un-site-web-a-l-aide-du-framework-symfony-5/5517021-dynamisez-vos-vues-a-l-a… 12/12