Symfony 5 : TWIG

Achref El Mouelhi

Docteur de l’université d’Aix-Marseille

Chercheur en Programmation par contrainte (IA)
Ingénieur en Génie logiciel

[email protected]

H & H: Research and Training 1 / 64

 Plan

1 Introduction

2 Commentaire

3 Interpolation

4 Déclaration de variable

5 Opérations sur les variables

6 Structure conditionnelle

7 Structure itérative

H & H: Research and Training 2 / 64

 Plan

8 Filtre

9 Référencement d’un fichier

10 Lien hypertexte

11 Variables globales

12 Inclusion

13 Block et héritage

14 Bonnes pratiques

H & H: Research and Training 3 / 64

 Introduction

Symfony

Twig

Moteur de templates pour PHP.

Apparu en 2009.

H I ©
EL
Syntaxe inspirée par Jinja (moteur de template du framework Django de Python).

Issu et utilisé par Symfony .

O U
E LM
Supporté par plusieurs IDE : NetBeans, PhpStorm, Eclipse, Visual Studio Code...
f
ch r e
Supporté par plusieurs éditeurs de texte : Sublime text, notepad++, vim...

©A

H & H: Research and Training 4 / 64

 Introduction

Symfony

Twig

Moteur de templates pour PHP.

Apparu en 2009.

H I ©
EL
Syntaxe inspirée par Jinja (moteur de template du framework Django de Python).

Issu et utilisé par Symfony .

O U
E LM
Supporté par plusieurs IDE : NetBeans, PhpStorm, Eclipse, Visual Studio Code...
f
ch r e
Supporté par plusieurs éditeurs de texte : Sublime text, notepad++, vim...

©A
Remarque

Symfony 5 utilise la version 3 de Twig.

H & H: Research and Training 4 / 64

 Introduction

Symfony
Twig, Pourquoi ?

permet de séparer le code PHP du code HTML (lisibilité, maintenabilité)

offre la possibilité de modifier un fichier sans influencer le deuxième

H I ©
facilite le travail d’équipe
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 5 / 64

 Introduction

Symfony
Twig, Pourquoi ?

permet de séparer le code PHP du code HTML (lisibilité, maintenabilité)

offre la possibilité de modifier un fichier sans influencer le deuxième

H I ©
facilite le travail d’équipe
UEL
O
f E LM
ch r e
Inconvénients
© A
Ralentir le chargement de page

Un langage (de template) de plus à étudier

La gestion d’erreurs est plus compliquée

H & H: Research and Training 5 / 64

 Introduction

Symfony

Autres moteurs de template

Smarty
H I ©
Liquid
UEL
O
Mustache
f E LM
Plates
ch r e
Talus’TPL ©A
...

H & H: Research and Training 6 / 64

 Introduction

Symfony

Trois types de balises

H I ©
U
{% ... %} : pour exécuter une action EL
{# ... #} : pour définir unL M O
re f E commentaire

c h
{{ ... }} : pour afficher
©A

H & H: Research and Training 7 / 64

 Introduction

Symfony
Avant de commencer, considérons le contenu suivant pour le contrôleur HomeController

namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;
H I ©
U EL
class HomeController extends AbstractController
O
LM
{
/**

r e f E
* @Route("/home", name="home_route")
*/
ch
{ ©A
public function index(): Response

return $this->render(’home/index.html.twig’, [
’controller_name’ => ’HomeController’,
]);
}
}

H & H: Research and Training 8 / 64

 Introduction

Symfony

Et le contenu suivant pour index.html.twig

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

{% block title %}Home{% endblock %} H I ©

UEL
O
{% block body %}
f E LM
<div>
ch r e
©A
<h1>Hello {{ controller_name }}!</h1>

</div>
{% endblock %}

H & H: Research and Training 9 / 64

 Commentaire

Symfony

{# commentaire #} H I ©
UEL
n’affiche rien et ne fait rien. O
f E LM
ch r e
s’utilise en mono-ligne et multi-lignes.

©A

H & H: Research and Training 10 / 64

 Interpolation

Symfony

{{ var }}
H I ©
UEL
O
permet de récupérer et afficher la valeur d’une variable var
envoyée par le contrôleur
f E LM
ch r e
est l’équivalent de <?php echo $var; ?>
©A

H & H: Research and Training 11 / 64

 Interpolation

Symfony

Le contrôleur HomeController envoie à la vue index.html.twig un

tableau contenant une variable nommée controller name ayant
comme valeur la chaı̂ne de caractères HomeController
return $this->render(’home/index.html.twig’, [
’controller_name’ => ’HomeController’,
H I ©
]);
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 12 / 64

 Interpolation

Symfony

Le contrôleur HomeController envoie à la vue index.html.twig un

tableau contenant une variable nommée controller name ayant
comme valeur la chaı̂ne de caractères HomeController
return $this->render(’home/index.html.twig’, [
’controller_name’ => ’HomeController’,
H I ©
]);
UEL
O
f E LM
ch r e
Pour l’afficher, dans index.html.twig on utilise l’interpolation
<div> ©A
<h1>Hello {{ controller_name }}!</h1>
</div>
{% endblock %}

H & H: Research and Training 12 / 64

 Interpolation

Symfony

Exercice
H I ©
Créez un contrôleur TwigController
UEL
O
f E LM
La route de ce contrôleur doit permettre de récupérer deux

ch r e
paramètres de requête nom et prenom et les envoyer à la vue

©A
La vue affiche les valeurs envoyées par le contrôleur

H & H: Research and Training 13 / 64

 Interpolation

Symfony

{{ tableau[’idColonne’] }}
H I ©
EL
OU
affiche le contenu d’un élément du tableau
M
L $tableau[’idColonne’];
est l’équivalent de <?phpEecho
f
?>
chr e
© A

H & H: Research and Training 14 / 64

 Interpolation

Symfony
Exemple : contenu de la méthode index de HomeController
$tab = [2, 3, 8];
return $this->render(’home/index.html.twig’, [
’controller_name’ => ’HomeController’,
’tableau’ => $tab
]);

H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 15 / 64

 Interpolation

Symfony
Exemple : contenu de la méthode index de HomeController
$tab = [2, 3, 8];
return $this->render(’home/index.html.twig’, [
’controller_name’ => ’HomeController’,
’tableau’ => $tab
]);

H I ©
UEL
O
LM
Pour afficher le tableau dans index.html.twig : trois écritures correctes
<ul>
r e f E
ch
<li>

©A
{{ tableau[0] }}
</li>
<li>
{{ tableau[’1’] }}
</li>
<li>
{{ tableau["2"] }}
</li>
</ul>

H & H: Research and Training 15 / 64

 Interpolation

{{ objet.attribut }}

affiche, logiquement, la valeur de $ attribut de $objet

est l’équivalent de <?php echo $objet->attribut(); ?>

H I ©
U EL
O
f E LM
ch r e
©A

H & H: Research and Training 16 / 64

 Interpolation

{{ objet.attribut }}

affiche, logiquement, la valeur de $ attribut de $objet

est l’équivalent de <?php echo $objet->attribut(); ?>

Réellement {{ objet.attribut }}
H I ©
U
affiche $objet[’attribut’] si $objet est un tableau. EL
O
f E LM
affiche $objet->attribut si $objet est un objet et $attribut est public.

ch r e
affiche $objet->attribut() si $objet est un objet et attribut() est une méthode

©A
public.

affiche $objet->getAttribut() si $objet est un objet et getAttribut() est une

méthode public.

affiche $objet->isAttribut() si $objet est un objet et isAttribut() est une

méthode public.

n’affiche rien et retourne null sinon.

H & H: Research and Training 16 / 64

 Interpolation
Pour l’exemple, commençons par créer une entité Personne dans src/Entity

namespace App\Entity;

class Personne
{
private $id;
private $nom;
private $prenom;
public function getId(): ?int
{

©
return $this->id;
}

H I
EL
public function setId(int $id): void
{

}
$this->id = $id;

O U
LM
public function getNom(): ?string
{
return $this->nom;

r e f E
ch
}
public function setNom(string $nom): void

©A
{
$this->nom = $nom;
}
public function getPrenom(): ?string
{
return $this->prenom;
}
public function setPrenom(string $prenom): void
{
$this->prenom = $prenom;
}
}

H & H: Research and Training 17 / 64

 Interpolation

Dans HomeController, créons une instance de Personne

use App\Entity\Personne;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;

class HomeController extends AbstractController

{
/**
H I ©
EL
* @Route("/home", name="home_route")
*/
public function index(): Response
O U
{
$personne = new Personne();
f E LM
$personne->setId(100);
ch r e
©A
$personne->setNom("wick");
$personne->setPrenom("john");
$tab = [2, 3, 8];
return $this->render(’home/index.html.twig’, [
’controller_name’ => ’HomeController’,
’tableau’ => $tab,
’personne’ => $personne
]);
}
}
H & H: Research and Training 18 / 64
 Interpolation

Symfony
Pour afficher les attributs de l’objet Personne dans la vue
<ul>
<li>
{{ personne.id }}
H I ©
EL
</li>

<li> M OU
f E L
{{ personne.nom() }}
</li>
ch r e
© A
<li>
{{ personne.getPrenom() }}
</li>
</ul>

H & H: Research and Training 19 / 64

 Interpolation

Symfony

{{ variable1 ∼ " " ∼ variable2 }}

affiche le résultat de la concaténation de variable1 et

variable2
H I ©
est l’équivalent de
UEL
O
<?php echo $variable1 . ’ ’ . $variable2 ; ?>

f E LM
ch r e
©A

H & H: Research and Training 20 / 64

 Interpolation

Symfony

{{ variable1 ∼ " " ∼ variable2 }}

affiche le résultat de la concaténation de variable1 et

variable2
H I ©
est l’équivalent de
UEL
O
<?php echo $variable1 . ’ ’ . $variable2 ; ?>

f E LM
ch r e
©A
Exemple de concaténation
<p>
{{ personne.prenom ˜ " " ˜ personne.nom }}
</p>

H & H: Research and Training 20 / 64

 Interpolation

Symfony

H I ©
Pour le débogage, vous pouvez utiliser la fonction dump dans les
pages Twig
UEL
<p>
L MO
r e f E
{{ dump(personne) }}
</p>
A ch
©

H & H: Research and Training 21 / 64

 Déclaration de variable

Symfony
Utilisez le mot-clé set pour déclarer une variable str dans un bloc {% ... %}
{% set str = ’bonjour’ %}

H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 22 / 64

 Déclaration de variable

Symfony
Utilisez le mot-clé set pour déclarer une variable str dans un bloc {% ... %}
{% set str = ’bonjour’ %}

L’équivalent PHP
H I ©
<?php
UEL
$str = ’bonjour’;
O
?>

f E LM
ch r e
©A

H & H: Research and Training 22 / 64

 Déclaration de variable

Symfony
Utilisez le mot-clé set pour déclarer une variable str dans un bloc {% ... %}
{% set str = ’bonjour’ %}

L’équivalent PHP
H I ©
<?php
UEL
$str = ’bonjour’;
O
?>

f E LM
ch r e
©A
Pour afficher la variable str
{{ str }}

H & H: Research and Training 22 / 64

 Déclaration de variable

Symfony
Utilisez le mot-clé set pour déclarer une variable str dans un bloc {% ... %}
{% set str = ’bonjour’ %}

L’équivalent PHP
H I ©
<?php
UEL
$str = ’bonjour’;
O
?>

f E LM
ch r e
©A
Pour afficher la variable str
{{ str }}

Le mot-clé set permet aussi de modifier le contenu de la variable si elle existe

{% set str = ’bonjour’ %}

H & H: Research and Training 22 / 64

 Déclaration de variable

Symfony
On peut utiliser le mot-clé with pour donner une portée locale à une variable

{% with %}
{% set x = 2 %}
{{ x }}
{# affiche 2 #}
H I ©
EL
{% endwith %}

O U
f E LM
ch r e
©A

H & H: Research and Training 23 / 64

 Déclaration de variable

Symfony
On peut utiliser le mot-clé with pour donner une portée locale à une variable

{% with %}
{% set x = 2 %}
{{ x }}
{# affiche 2 #}
H I ©
EL
{% endwith %}

O U
f E LM
Une deuxième écriture sans set
ch r e
©A
{% with %}
{% set x = 2 %}
{{ x }}
{# affiche 2 #}
{% endwith %}
{{ x }}
{# Variable "x" does not exist. #}

H & H: Research and Training 23 / 64

 Déclaration de variable

Symfony

Une deuxième écriture sans set

{% with { x: 2 } %} H I ©
{{ x }}
UEL
O
{# affiche 2 #}
{% endwith %}
f E LM
ch r e
©A
{# Variable "x" does not exist. #}

H & H: Research and Training 24 / 64

 Déclaration de variable

Symfony
Dans un bloc with, par défaut, on a accès aux variables définies dans le contexte global

{% set y = 5 %}
{% with { x: 2 } %}
{{ x }} {{ y }}
{# affiche 2 5 #}
{% endwith %}
H I ©
{# la variable x n’est plus visible ici #}
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 25 / 64

 Déclaration de variable

Symfony
Dans un bloc with, par défaut, on a accès aux variables définies dans le contexte global

{% set y = 5 %}
{% with { x: 2 } %}
{{ x }} {{ y }}
{# affiche 2 5 #}
{% endwith %}
H I ©
{# la variable x n’est plus visible ici #}
UEL
O
f E LM
ch
Une deuxième écriture sans set r e
{% set y = 5 %} ©A
{% with { x: 2 } only %}
{{ x }}
{# affiche 2 et la variable y n’est plus accessible #}
{% endwith %}

{# la variable x n’est plus visible ici #}

H & H: Research and Training 25 / 64

 Opérations sur les variables

Symfony

Dans une interpolation, on peut effectuer des opérations

arithmétiques comme l’addition par exemple
H I ©
{% set x = 2 %}
UEL
O
{% set y = 5 %}
{{ x + y }}
f E LM
ch r e
{# affiche 7 #}
©A

H & H: Research and Training 26 / 64

 Opérations sur les variables

Symfony

Autres opérations

Arithmétiques : +, -, *, /, %, ** (puissance) et // (division

H I ©
entière)
UEL
O
Logiques : and, or et not
f E LM
ch r e
Comparaisons : ==, !=, <, >, >=, <=, ===, starts with, ends
with, matches
©A
Autres : is, in, [], ., .., ??, ?:

H & H: Research and Training 27 / 64

 Opérations sur les variables

Symfony
Exemple avec in
{{ 8 in tableau }}
{# affiche 1 #}

H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 28 / 64

 Opérations sur les variables

Symfony
Exemple avec in
{{ 8 in tableau }}
{# affiche 1 #}

H I ©
Exemple avec not in UEL
O
{{ 1 not in tableau }}
f E LM
{# affiche 1 #}
ch r e
©A

H & H: Research and Training 28 / 64

 Opérations sur les variables

Symfony
Exemple avec in
{{ 8 in tableau }}
{# affiche 1 #}

H I ©
Exemple avec not in UEL
O
{{ 1 not in tableau }}
f E LM
{# affiche 1 #}
ch r e
©A
Exemple avec starts with
{{ personne.prenom starts with ’j’ }}
{# affiche 1 #}

H & H: Research and Training 28 / 64

 Opérations sur les variables

Symfony

Exemple avec matches permet de déterminer si une variable

H I ©
respecte un motif donné par une expression régulière
UEL
O
{{ personne.prenom matches ’/ˆj.*n$/’ }}
f E LM
{# affiche 1 #}
ch r e
©A

H & H: Research and Training 29 / 64

 Structure conditionnelle

Symfony

Exemple avec if ... endif

{% if tableau[0] > 0 %}
{{ tableau[0] }} est positif
{% endif %}
H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 30 / 64

 Structure conditionnelle

Symfony

Exemple avec if ... endif

{% if tableau[0] > 0 %}
{{ tableau[0] }} est positif
{% endif %}
H I ©
EL
M OU
E L endif
Exemple avec if ... else ...
f
{{ tableau[0] }}c h re
est
© A > 0 %}
{% if tableau[0]
positif
{% else %}
négatif
{% endif %}

H & H: Research and Training 30 / 64

 Structure conditionnelle

Symfony

Exemple avec if ... elsif ... else ... endif

{{ tableau[0] }}
H I ©
EL
{% if tableau[0] > 0 %}
positif
O U
{% elseif tableau[0] < 0 %}
f E LM
négatif
{% else %} ch r e
nul
{% endif %}
©A

H & H: Research and Training 31 / 64

 Structure conditionnelle

Symfony

Tester l’existence d’une variable

{% if nom is defined %}
{{ nom }}
{% else %}
H I ©
doe
UEL
{% endif %} O
f E LM
ch r e
©A

H & H: Research and Training 32 / 64

 Structure conditionnelle

Symfony

Tester l’existence d’une variable

{% if nom is defined %}
{{ nom }}
{% else %}
H I ©
doe
UEL
{% endif %} O
f E LM
ch r e
©A
Tester la parité d’une variable
{% if tableau[0] is even %}
{{ tableau[0] }} est pair
{% endif %}

H & H: Research and Training 32 / 64

 Structure conditionnelle

Symfony

Tester si une variable est divisible par 2

{% if tableau[0] is divisible by(2) %}
{{ tableau[0] }} est divisible par 2
H I ©
{% endif %}
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 33 / 64

 Structure conditionnelle

Symfony

Tester si une variable est divisible par 2

{% if tableau[0] is divisible by(2) %}
{{ tableau[0] }} est divisible par 2
H I ©
{% endif %}
UEL
O
f E LM
ch r e
©A
Autres fonctions prédéfinies de test
https://twig.symfony.com/doc/3.x/tests/index.html

H & H: Research and Training 33 / 64

 Structure itérative

Symfony

Structure itérative : for

{% for i in tableau %}
{{ i }} <br>
H I ©
{% endfor %}
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 34 / 64

 Structure itérative

Symfony

Structure itérative : for

{% for i in tableau %}
{{ i }} <br>
H I ©
{% endfor %}
UEL
O
f E LM
Le résultat
ch r e
2 ©A
3
8

H & H: Research and Training 34 / 64

 Structure itérative

Symfony

On peut utiliser l’opérateur .. pour définir un intervalle

{% for i in 0..3 %}
{{ i }} <br>
H I ©
EL
{% endfor %}

O U
f E LM
ch r e
©A

H & H: Research and Training 35 / 64

 Structure itérative

Symfony

On peut utiliser l’opérateur .. pour définir un intervalle

{% for i in 0..3 %}
{{ i }} <br>
H I ©
EL
{% endfor %}

O U
f E LM
Le résultat
ch r e
0
1
©A
2
3

H & H: Research and Training 35 / 64

 Structure itérative

Symfony

On peut aussi utiliser la fonction range

{% for i in range(0, 3) %}
{{ i }} <br>
H I ©
EL
{% endfor %}

O U
f E LM
ch r e
©A

H & H: Research and Training 36 / 64

 Structure itérative

Symfony

On peut aussi utiliser la fonction range

{% for i in range(0, 3) %}
{{ i }} <br>
H I ©
EL
{% endfor %}

O U
f E LM
Le résultat
ch r e
0
1
©A
2
3

H & H: Research and Training 36 / 64

 Structure itérative

Symfony

On peut aussi modifier le pas

{% for i in range(low=0, high=7, step=2) %}
{{ i }} <br>
H I ©
EL
{% endfor %}

O U
f E LM
ch r e
©A

H & H: Research and Training 37 / 64

 Structure itérative

Symfony

On peut aussi modifier le pas

{% for i in range(low=0, high=7, step=2) %}
{{ i }} <br>
H I ©
EL
{% endfor %}

O U
f E LM
Le résultat
ch r e
0
2
©A
4
6

H & H: Research and Training 37 / 64

 Structure itérative

Symfony
On peut utiliser l’opérateur .. pour définir un intervalle de
caractères
{% for i in ’a’..’f’ %}
{{ i }} <br>
{% endfor %}
H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 38 / 64

 Structure itérative

Symfony
On peut utiliser l’opérateur .. pour définir un intervalle de
caractères
{% for i in ’a’..’f’ %}
{{ i }} <br>
{% endfor %}
H I ©
UEL
O
f E LM
Le résultat
ch r e
a
b ©A
c
d
e
f

H & H: Research and Training 38 / 64

 Structure itérative

Symfony

Ou aussi
{% for i in range(’a’,’f’) %}
{{ i }} <br>
{% endfor %}
H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 39 / 64

 Structure itérative

Symfony

Ou aussi
{% for i in range(’a’,’f’) %}
{{ i }} <br>
{% endfor %}
H I ©
UEL
O
Le résultat
f E LM
a ch r e
b
c
©A
d
e
f

H & H: Research and Training 39 / 64

 Structure itérative

Symfony

Structure itérative : for (clé, valeur)

{% for cle, valeur in tableau %}
{{ cle ˜ ’ : ’ ˜ valeur }} <br>
H I ©
{% endfor %}
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 40 / 64

 Structure itérative

Symfony

Structure itérative : for (clé, valeur)

{% for cle, valeur in tableau %}
{{ cle ˜ ’ : ’ ˜ valeur }} <br>
H I ©
{% endfor %}
UEL
O
f E LM
Le résultat
ch r e
0 : 2 ©A
1 : 3
2 : 8

H & H: Research and Training 40 / 64

 Structure itérative

Symfony

La boucle for génère un objet loop contenant les attributs suivants :

loop.index : numéro de l’itération courante (commence de 1)

H I ©
EL
loop.index0 : numéro de l’itération courante (commence de 0)
U
O
loop.length : le nombre total d’itérations
f E LM
r e
loop.first : contient true s’il s’agit de la première itération
ch
©A
loop.last : contient true s’il s’agit de la dernière itération
loop.revindex et loop.revindex0 : contiennent le nombre
d’itérations restantes avant la fin de la boucle

H & H: Research and Training 41 / 64

 Structure itérative

Symfony

Exemple
{% for valeur in tableau %}
{{ loop.index0 }} : {{
H ©
valeur }}
I
EL
<br>
{% endfor %}
O U
f E LM
ch r e
©A

H & H: Research and Training 42 / 64

 Structure itérative

Symfony

Exemple
{% for valeur in tableau %}
{{ loop.index0 }} : {{
H ©
valeur }}
I
EL
<br>
{% endfor %}
O U
f E LM
ch r e
©A
Le résultat
0 : 2
1 : 3
2 : 8

H & H: Research and Training 42 / 64

 Filtre

Symfony

Filtre

Permettant de formater et modifier l’affichage d’une donnée

H I ©
Pouvant prendre un ou plusieurs paramètres EL
M OU
E L filtre[paramètres] }}
Syntaxe : {{ variable | fonction
f
e
chrun filtre sur le résultat d’un autre filtre
A
Possibilité d’appliquer
©
Liste complète :
https://twig.symfony.com/doc/3.x/filters/index.html

H & H: Research and Training 43 / 64

 Filtre

Symfony

Quelques exemples
upper : convertit les lettres en majuscules comme strtupper()
en PHP (lower est la réciproque)
H I ©
EL
length : calcule le nombre d’éléments d’un tableau ou le nombre
de caractères d’une chaı̂ne
M OU
f E
sort : trie les éléments d’unLtableau
e
chlesr caractères spéciaux indiqués du début et de
A
trim : supprime
© chaı̂ne de caractères
la fin d’une
striptags : supprime les balisesHTML
...

H & H: Research and Training 44 / 64

 Filtre

symfony
Exemples avec les chaı̂nes de caractères

{{ personne.prenom | length }}
{# affiche 4 #}

{{ ’ john wick!
{# affiche 10 #}
’ | trim | length }}
H I ©
U EL
{{ ’ john wick!’ | trim(’!’) | length }}
O
{# affiche 11 #}
f E LM
{{ ’ john wick!
ch r e
’ | trim(side=’left’) | length }}
{# affiche 12 #}
©A
{{ ’ john wick! ’ | trim(’ ’, ’right’) | length }}
{# affiche 12 #}

{{ personne.prenom | capitalize ˜ " " ˜ personne.nom | upper }}

{# affiche John WICK #}

H & H: Research and Training 45 / 64

 Filtre

symfony

Pour appliquer un filtre à une portion du code

H I ©
{% apply upper %}
UEL
O
LM
Bonjour {{ personne.prenom }}
{% endapply %}
r e f E
{# affiche BONJOUR JOHN #}
ch
©A

H & H: Research and Training 46 / 64

 Filtre

symfony

Exemples avec les tableaux (slice)

{% for elt in tableau | slice(0, 2) %}
{{ elt }}
{% endfor %}
H I ©
{# affiche 2 3 #}
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 47 / 64

 Filtre

symfony

Exemples avec les tableaux (slice)

{% for elt in tableau | slice(0, 2) %}
{{ elt }}
{% endfor %}
H I ©
{# affiche 2 3 #}
UEL
O
f E LM
Un raccourci de slice
ch r e
©A
{% for elt in tableau [0:2] %}
{{ elt }}
{% endfor %}
{# affiche 2 3 #}

H & H: Research and Training 47 / 64

 Filtre

symfony

Au moins un des deux paramètres doit être présent dans [ : ]

{% for elt in tableau [:1] %}
{{ elt }}
{% endfor %}
H I ©
{# affiche 2 #}
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 48 / 64

 Filtre

symfony

Au moins un des deux paramètres doit être présent dans [ : ]

{% for elt in tableau [:1] %}
{{ elt }}
{% endfor %}
H I ©
{# affiche 2 #}
UEL
O
f E LM
ch r e
Au moins un des deux paramètres doit être présent dans [ : ]
©A
{% for elt in tableau [1:] %}
{{ elt }}
{% endfor %}
{# affiche 3 8 #}

H & H: Research and Training 48 / 64

 Filtre

symfony
Exemples avec les tableaux (reduce)

{{ tableau | reduce((somme, valeur) => somme + valeur) }}

{# affiche 13 #}

H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 49 / 64

 Filtre

symfony
Exemples avec les tableaux (reduce)

{{ tableau | reduce((somme, valeur) => somme + valeur) }}

{# affiche 13 #}

H I ©
reduce accepte aussi une valeur initiale
UEL
O
f E LM
{{ tableau | reduce((somme, valeur) => somme + valeur, 5) }}
{# affiche 18 #}

ch r e
©A

H & H: Research and Training 49 / 64

 Filtre

symfony
Exemples avec les tableaux (reduce)

{{ tableau | reduce((somme, valeur) => somme + valeur) }}

{# affiche 13 #}

H I ©
reduce accepte aussi une valeur initiale
UEL
O
f E LM
{{ tableau | reduce((somme, valeur) => somme + valeur, 5) }}
{# affiche 18 #}

ch r e
© A
Exemple avec map et reduce

{{ tableau | map(elt => elt + 2) | reduce((somme, valeur) =>

somme + valeur) }}
{# affiche 19 #}

H & H: Research and Training 49 / 64

 Filtre

Symfony

Remarques

I ©
Par défaut, Twig protège les variables en appliquant un filtre pour
H
les protéger de balises HTML
U EL
O
f E
Par exemple {{ variable | raw }}LM
Pour désactiver le filtre, on peut utiliser le filtre raw

r e
chde caractères non-définies dans une variable, on
utilise e©
A
Pour les chaı̂nes
pour échapper les balises HTML
Par exemple {{ ’texte <br>’ | e }}

H & H: Research and Training 50 / 64

 Filtre

symfony

Exemple (chaine est une variable définie dans le contrôleur

contenant la valeur bonjour <br>)
{{ ’hello <br>’ }}
{# affiche hello #}
H I ©
UEL
{{ ’hello <br>’ | e }} O
{# affiche hello <br> #}
f E LM
ch r e
©A
{{ chaine }}
{# affiche bonjour<br> #}

{{ chaine | raw }}
{# affiche bonjour #}

H & H: Research and Training 51 / 64

 Filtre

Symfony

Pour interpréter les différentes balises définies dans la variable test

{% set test = "<strong>Texte en gras</strong>
<script>
alert(’Ceci est un avertissement’)
H I ©
</script>" %}
U EL
O
{{ test | raw }}
f E LM
ch r e
©A

H & H: Research and Training 52 / 64

 Filtre

Symfony

Pour interpréter les différentes balises définies dans la variable test

{% set test = "<strong>Texte en gras</strong>
<script>
alert(’Ceci est un avertissement’)
H I ©
</script>" %}
U EL
O
{{ test | raw }}
f E LM
ch r e
©A
On peut aussi le faire avec autoescape
{% autoescape false %}
{{ test }}
{% endautoescape %}

H & H: Research and Training 52 / 64

 Référencement d’un fichier

Symfony

Caractéristiques

Il permet de faire référence au répertoire web du projet Symfony depuis les

vues

H I ©
EL
Il permet donc de référencer des fichiers de ressource (CSS, JavaScript,
U
images ...) définis dans public
O
f E LM
ch r e
©A

H & H: Research and Training 53 / 64

 Référencement d’un fichier

Symfony

Caractéristiques

Il permet de faire référence au répertoire web du projet Symfony depuis les

vues

H I ©
EL
Il permet donc de référencer des fichiers de ressource (CSS, JavaScript,
U
images ...) définis dans public
O
f E LM
ch r e
Exemples
© A
<link href="{{ asset(’css/style.css’) }}" rel="stylesheet" />
<script src="{{ asset(’js/jquery-1.11.3.js’) }}"></script>
<script src="{{ asset(’js/bootstrap.js’) }}"></script>
<script src="{{ asset(’js/script.js’) }}"></script>

H & H: Research and Training 53 / 64

 Lien hypertexte

Symfony
path et url

Elles permettent de référencer une route enregistrée dans notre routeur

path génère une URL relative.

H I ©
EL
url génère une URL absolue.

O U
f E LM
ch r e
©A

H & H: Research and Training 54 / 64

 Lien hypertexte

Symfony
path et url

Elles permettent de référencer une route enregistrée dans notre routeur

path génère une URL relative.

H I ©
EL
url génère une URL absolue.

O U
f E LM
Exemple
ch r e
<a href="{{©
A
<a href="{{ path(’vehicule_route’) }}">Véhicule</a>
url(’vehicule_route’) }}">Véhicule</a>

H & H: Research and Training 54 / 64

 Lien hypertexte

Symfony
path et url

Elles permettent de référencer une route enregistrée dans notre routeur

path génère une URL relative.

H I ©
EL
url génère une URL absolue.

O U
f E LM
Exemple
ch r e
<a href="{{©
A
<a href="{{ path(’vehicule_route’) }}">Véhicule</a>
url(’vehicule_route’) }}">Véhicule</a>

Code HTML équivalent

<a href="/vehicule">Accueil</a>
<a href="http://localhost:8000/vehicule">Véhicule</a>
H & H: Research and Training 54 / 64
 Lien hypertexte

Symfony

On peut aussi construire une route avec paramètres

H I ©
UEL
O
<a href="{{ path(’vehicule_route’,{’id’: ’value’})
}}">Véhicule</a>
f E LM
ch r e
<a href="{{ url(’vehicule_route’) }}">Véhicule</a>

©A

H & H: Research and Training 55 / 64

 Variables globales

Symfony

Les variables globales

app.request : la requête d’un contrôleur

app.session : service session
H I ©
U EL
app.user : pour récupérer l’utilisateur courant
M O
app.debug : True si le mode
f E L debug est activé, False sinon.

ch
app.environment r e: l’environnement courant dev ou prod
© A

H & H: Research and Training 56 / 64

 Variables globales

Symfony

Les variables globales

app.request : la requête d’un contrôleur

app.session : service session
H I ©
U EL
app.user : pour récupérer l’utilisateur courant
M O
app.debug : True si le mode
f E L debug est activé, False sinon.

ch
app.environment r e: l’environnement courant dev ou prod
© A
Exemple
{% set id = app.request.get(’personne’).nom %}

H & H: Research and Training 56 / 64

 Inclusion

Symfony

Considérons la page menu.twig à définir dans shared : un répertoire

à créer dans templates
<ul>
H I ©
<li>
UEL
O
LM
<a href="{{ url(’home_route’) }}">Home</a>
</li>
<li>
r e f E
ch
©A
<a href="{{ url(’vehicule_route’) }}">Vehicule</a>
</li>
</ul>

H & H: Research and Training 57 / 64

 Inclusion

Symfony

Pour inclure le menu dans la vue associée à HomeController

{% include ’shared/_menu.twig’ %}

H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 58 / 64

 Inclusion

Symfony

Pour inclure le menu dans la vue associée à HomeController

{% include ’shared/_menu.twig’ %}

H I ©
U
Inclusion avec ignorance d’erreur si page EL
inexistante

L MO
re f E
{% include ’page.twig’ ignore missing %}

c h
©A

H & H: Research and Training 58 / 64

 Inclusion

Symfony

Pour inclure le menu dans la vue associée à HomeController

{% include ’shared/_menu.twig’ %}

H I ©
U
Inclusion avec ignorance d’erreur si page EL
inexistante

L MO
re f E
{% include ’page.twig’ ignore missing %}

A c h
©
Inclusion conditionnelle
{% include condition ? ’_menu-admin.twig’ : ’_menu-
user.twig’ ignore missing %}}

H & H: Research and Training 58 / 64

 Inclusion

Symfony
Pour inclure le menu, on peut créer une méthode dans HomeController et lui
associer une route

/**
* @Route("/menu", name="menu_route")
*/
H I ©
EL
public function menu()
{
O U
LM
return $this->render(’shared/_menu.twig’, []);
}

r e f E
ch
©A

H & H: Research and Training 59 / 64

 Inclusion

Symfony
Pour inclure le menu, on peut créer une méthode dans HomeController et lui
associer une route

/**
* @Route("/menu", name="menu_route")
*/
H I ©
EL
public function menu()
{
O U
LM
return $this->render(’shared/_menu.twig’, []);
}

r e f E
ch
©A
Pour exécuter cette méthode dans la vue, on utilise la fonction render

{{ render("menu") }}

H & H: Research and Training 59 / 64

 Inclusion

Symfony
Pour inclure le menu, on peut créer une méthode dans HomeController et lui
associer une route

/**
* @Route("/menu", name="menu_route")
*/
H I ©
EL
public function menu()
{
O U
LM
return $this->render(’shared/_menu.twig’, []);
}

r e f E
ch
©A
Pour exécuter cette méthode dans la vue, on utilise la fonction render

{{ render("menu") }}

Attention à la performance de la fonction render

H & H: Research and Training 59 / 64

 Block et héritage

Symfony

Notion de block : zone réservée

H I ©
UEL
{% block nom_block %}
O
...
f E LM
{% endblock %}
ch r e
©A

H & H: Research and Training 60 / 64

 Block et héritage

Symfony
Le fichier base.html.twig situé dans templates

{# base.html.twig #}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
H I ©
<title>
UEL
{% block title %}Welcome!{% endblock %}
O
</title>
f E LM
ch r e
{% block stylesheets %}{% endblock %}
<link href="{{ asset(’css/style.css’) }}" rel="stylesheet"/
>
</head> ©A
<body>
{% block body %}{% endblock %}
{% block javascripts %}{% endblock %}
</body>
</html>

H & H: Research and Training 61 / 64

 Block et héritage

Symfony

Héritage entre block

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

{% block title %}
H I ©
Home
UEL
O
{# ce contenu sera inséré dans le bloc title de base.
html.twig #}
{% endblock %}
f E LM
h r e
%}c
{% block body A
© précédent #}
{# contenu
{# ce contenu sera inséré dans le bloc body de base.
html.twig #}
{% endblock %}

H & H: Research and Training 62 / 64

 Block et héritage

Symfony

Remarques

H I ©
EL
L’héritage sert à créer un template parent (avec un ou plusieurs blocks) qui contient le

U
design de base de notre site pour que les templates enfants puissent l’utiliser
O
pour ce block
f E LM
Si le template enfant ne redéfinit pas un block hérité, il aura la valeur définie par le père

ch r e
{{ parent() }} permet de récupérer le contenu du block côté père

©A
On peut faire des include pour ajouter entièrement un template

H & H: Research and Training 63 / 64

 Bonnes pratiques

Symfony

Bonnes pratiques
H I ©
EL(Exemple :
Utiliser le Snake Case pour nommer les vues
U
page admin.html.twig).
L MO
f
Préfixer le nom d’uneevue
r Epar un underscore pour les fragments
A
de vue (Exemple ch: menu.twig).
©

H & H: Research and Training 64 / 64