Le moteur de templates : Twig

UP Web

AU: 2021/2022
 Plan
1. Qu'est ce qu'un moteur de templates
2. Le moteur de templates Twig
3. Syntaxe de base
a. Déclaration et affichage des variables
b. La concaténation
c. La structure conditionnelle
d. La structure itérative
e. Les filtres
f. Les fonctions
g. Les variables globales
h. Les liens
4. Ajout de fichiers

2
1. Qu'est ce qu'un moteur de templates

● PHP peut être considéré comme un moteur de

template.

● Il est possible de mélanger du PHP avec du code

HTML mais il reste très verbeux et peu pratique pour
certaines tâches.

3
1. Qu'est ce qu'un moteur de templates

● Exemple:

UP-WEB 2020/2021 4
1. Qu'est ce qu'un moteur de templates
● Grace à un moteur de template, nous pouvons le séparer en 2
fichiers mais au meme temps le rendre plus clair et plus facile à
manipuler.

UP-WEB 2020/2021 5
1. Qu'est ce qu'un moteur de templates
Les principaux moteur de templates php
○ php
○ raintpl
○ smarty
○ twig
○ talus..

Pourquoi utiliser un moteur de templates ?

● Séparer la couche métier (le code PHP) de la couche

présentation
● Permettre aux designers de développer rapidement des gabarits
sans spécialement connaître le langage utilisé
● Minimiser le code et le rendre plus clair
Inconvénients:
● la gestion des templates multiplie légèrement le nombre de
fichiers de votre application.
● Un peu plus lent à exécuter (cache obligatoire)
● Un autre langage à apprendre
6
2. Le moteur de template Twig
● Twig est un moteur de templates développé par SensioLabs,apparu en 2009
● Utilisé par Symfony et d’autre projet PHP
● La Version actuelle: Twig 3
● Un projet symfony 4 offre la version 3 et la version 2.x de Twig ,la version de
Twig utilisée dépendra de la version de PHP

Twig 2.x Twig 3

● PHP>=7.1.3 et <=7.2.4 ● PHP >=7.2.5 +

● Des fonctionnalités obsolètes
sont supprimées dans la
version 3 (voir la
documentation officielle
https://twig.symfony.com/doc/
2.x/deprecated.html)

7
2. Le moteur de template Twig

La version de TWIG depend de la version de symfony et de la

version de PHP utilisés. Dans notre cas, nous travaillons avec
Symfony 4 et PHP 7.4.9 donc la version Twig sera 3.0.

Si jamais nous voulons travailler avec une version spécifique

de Twig, il suffit de:
➢ Modifier le fichier composer.json (choisir la version
2.x ou 3 de Twig)

"twig/twig": "^2.12|^3.0"

➢ Mettre à jour les dépendances :composer update

8
2. Le moteur de template Twig

Les avantages de Twig:

● Permet de séparer la présentation des données du

traitement.
● Permet la personnalisation de la page web.
● Permet de rendre les pages web plus lisibles, plus claires.
● Apporte de nouvelles fonctionnalités (comme l’héritage
des templates, les filtres…).
● Apporte plus de sécurité.
9
 2. Le moteur de template Twig
Fonctionnement de twig

1. L'utilisateur envoie une demande à l'application via le navigateur

2. La requête sera envoyé vers le Framework Symfony pour trouver le contrôleur demandé.
3. Une fois le contrôleur aura terminé son processus, il génèrera la réponse lui-même ou via
le moteur de template ( TWIG).
4. Pour générer sa réponse, TWIG fera une compilation et mise en cache du code reçu de
son coté.
5. Enfin, la réponse sous forme de page HTML sera envoyée au navigateur comme
demandé au tout début de ce processus. 10
2. Le moteur de template Twig
Retourner un Template Twig
• Depuis le contrôleur, on utilise la méthode render() pour retourner
une interface

• la méthode render() prend en paramètre:

1. Le chemin vers le template:
/Template/vue
2. Un tableau des paramètres à afficher dans le twig
1 2

le répertoire contenant les Nom de la vue Tableau des

templates propre à ce Paramètres
contrôleur envoyé du
Controller à
la vue
11
 2. Le moteur de template Twig

Emplacement des templates

• Les vues sont placées sous le dossier

Template
• Il est recommandé de créer un répertoire sous
dossier template pour chaque contrôleur

• On utilise les deux extensions .html et .twig

12
3. La Syntaxe de base

Trois types de syntaxes :

- Syntaxe de base pour afficher des variables

• {{ … }} affiche quelque chose

- Syntaxe de base pour les structures de contrôle et les expressions

• {% … %} exécute une action

- Syntaxe pour les commentaires

• {# … #} définit un commentaire

13
3. La Syntaxe de base
a. Affichage et déclaration des variables

• Afficher une variable se fait avec les doubles accolades « {{ … }}»

• Affichage d’une variable simple: {{ title}} est esquivant à <?php echo $title ?>

• Affichage d’index d’un tableau {{ T[‘i’]}} est équivalant à <?php echo T[‘i’] ?>

• Affichage l'attribut d'un objet, dont le getter respecte la convention

$objet->getAttribut()
twig : Identifiant : {{ user.id }} => php: Identifiant : <?php echo $user->getId();
?>

14
3. La Syntaxe de base
Déclaration d’une variable
• une variable
{% set pi = 3.14 %} {% set foo = 'foo' %}
• tableau simple avec une série de valeurs:
{% set tableau=[1, 2, 3] %}
• tableau avec des clés:
{% set tableau={key1:value1, key2:value2} %}
• tableau avec valeur et clé:
{% set foo = [3, {"mot": "soleil"}] %}
afficher le contenu de 'mot' donc 'soleil':
{{ foo[1]['mot'] }}
• déclarer 2 variables en même temps // foo='foo' // bar='bar':
{% set foo, bar = 'foo', 'bar' %}
• foo contient le texte entre les 2 balises:
{% set foo %}
<div id="pagination">
… </div>
{% endset %}
15
3. La Syntaxe de base
b. Concaténation

• Concaténer deux variables dans le Template twig:

{{ "Description du produit:" ~ produit.description }}

{{ var1 ~ var2 }}

16
3. La Syntaxe de base
c. La structure conditionnelle:{% if … %} … {% endif %}

• Une condition avec empty

{% if produits is empty %}
il n'y a plus de produit
{% endif %}

• Une condition avec and, or ,defined

{% if ((a==1 and b>0) or not c==0) and d is defined %}
{% set resultat = (d + a * b) / c %}
{{ resultat }}
{% endif %}

• Une condition avec start , ends {% if 'Fabien' ends with 'n' %}

{% if 'Fabien' starts with 'F' %} Finis par n
commence par F {% endif %}
{% endif %}

17
3. La Syntaxe de base
• Une condition avec matches: permet dede determiner si une variable ´
respecte un motif donne par une expression régulière
{% if phone matches '/^[\\d\\.]+$/' %}
format telephone ok
{% endif %}

• Une condition avec not in

{% if 5 not in [1, 2, 3] %}
5 non présent
{% endif %}

• Une condition avec else if

{% if var is odd %} ou {{ var is odd? 'yes': 'no' }}

yes
{%else%}
no
{% endif %}

18
3. La Syntaxe de base

• Tests utiles:
is null: si est null ;
is constant: comparer si est une constante ;
is divisible by(x): si est divisible par x ;
is even: si est pair ;
is odd: si est impair ;
is iterable: si est du type itérable (comme une liste) ;
is same as: comparer 2 variables (en php correspond ===).

• La liste des test utiles: https://twig.symfony.com/doc/3.x/tests/index.html

19
3. La Syntaxe de base
d. La structure itérative: for

• Parcourir un tableau associatif

{% for produit in produits %}

{{ produit.nom }}

{% endfor %}

• Parcourir un tableau indexé: (on peut utiliser l’operateur ´ .. pour definir un intervalle )

{% for i in 0..9 %} // pareil que {% for i in range(0, 9) %}

{{ i }}

{% endfor %}

// affiche 0123456789

20
3. La Syntaxe de base
d. La structure itérative: for

• Parcourir un tableau associatif avec une condition:

{% for produit in produits if produit.etat==1% }

{{ produit.nom }}

{% endfor %}

• Parcourir un tableau associatif avec une condition vide:

{% for article in articles %}

{{ article.nom }}

{% else %} pas d'article trouvé

{% endfor %}

21
3. La Syntaxe de base
d. La structure itérative: for

• Parcourir un tableau associatif avec une condition:

{% for produit in produits if produit.etat==1% }

{{ produit.nom }}

{% endfor %}

• Parcourir un tableau associatif avec une condition vide:

{% for article in articles %}

{{ article.nom }}

{% else %} pas d'article trouvé

{% endfor %}

22
3. La Syntaxe de base
d. La structure itérative: for

• clés et valeurs:

{% for key, value in table %}

{{ key }} {{ value }}

{% endfor %}

Exemple:

23
3. La Syntaxe de base
e. Les filtres
• Permettant de formater et modifier l’affichage d’une donnée´

• Pouvant prendre un ou plusieurs paramètres `

• Syntaxe : {{ variable | fonction filtre[paramètres] }}

• On peut appliquer des filtres sur une variable à afficher, sur une variable d'une
condition IF ou d'une boucle FOR…

• Appliquer un seul filtre

• Appliquer plusieurs filtres

• Appliquer un filtre sur un texte long avec apply

24
3. La Syntaxe de base
e. Les filtres (exemples)
Les filtres Description

upper() Affiche la variable en majuscules

{{“hello”|upper}}=>HELLO

lower() Affiche la variable en minuscules

{{“HELLO”|lower}}=>hello

trim() Supprime les caractères spéciaux indiqués du début et de la fin

d’une chaîne de caractères
{{“hello world .”|trim(‘.’)}} =>hello world

Slice(start, length) Extrait les éléments de la position start et de nombre length

{% for i in [1, 2, 3, 4, 5]|slice(1, 2) %}
{# will iterate over 2 and 3 #}
{% endfor %}

{{ '12345'|slice(1, 2) }}

{# outputs 23 #}

length() calcule le nombre d’élèments d’un tableau ou le nombre de

caractères d’une chaîıne
25
3. La Syntaxe de base
e. Les filtres (exemples)
Les filtres Description

Date() Formate la date selon le format donné en argument

{{post.published_at|date(“m/d/Y”)}}

date_modify() Formate la date selon la chaine donnée en paramètre

{{post.published_at|date_modify(“+1 day”)}}

● La liste complète des filtres:

https://twig.symfony.com/doc/3.x/filters/index.html

26
3. La Syntaxe de base
f. Les fonctions
• Permettant d’effectuer un traitement

Exemples:
● Dump(): affiche tout le détail d'un objet ou d'un tableau

{{dump(entities)}}

● Max():

{% set tab = [1, 5, 2, 3] %}

{{ max(tab) }} =>5

● Date(): permet de convertir l’argument en date afin de pouvoir comparer les

dates
{% if date(club.created_at) < date() %}
{# traitement #} {% endif %}
Liste des fonctions: https://twig.symfony.com/doc/3.x/functions/index.html
27
3. La Syntaxe de base
g.Les variables globales

● app
Variable globale qui va nous permettre de récupérer des informations de
notre application.
● app.environment
Récupère l’environnement actuel pour savoir si vous êtes sur
l’interface de production ou de développement.
● app.debug
Permet de savoir si le mode debug est activé ou non (retourne
un boolean).
● app.user
Récupère les informations de l’utilisateur courant, c’est ni plus ni
moins que l’entité User.

28
3. La Syntaxe de base
g.Les variables globales

● app.request
Retourne la séquence de tous les éléments disponibles de la requête
HTTP.
● app.request.query
Permet d’accéder à un paramètre d’une requête GET en utilisant la
méthode get(). Exemple: {{app.request.query.get("nom_parametre")}}
● app.request.server: Retourne la séquence de la variable global
$_SERVER de PHP. Par exemple l’exemple suivant retourne le nom du
serveur hôte qui exécute le script. Exemple:
{{ app.request.server.get("SERVER_NAME") }}
● app.request.parameter
Permet d’accéder à un paramètre d’une requête POST en utilisant la
méthode get(). Exemple: {{app.request.parameter.get("nom_parametre")}}

29
3. La Syntaxe de base
g.Les variables globales

● app.request.cookies
Permet d’accéder à un paramètre contenu dans un COOKIE en utilisant la
méthode get(). Exemple: {{app.request.cookies.get("nom_parametre")}}
● app.request.headers
Retourne toutes les informations du header de la requête HTTP, permet
notamment de récupérer le user-agent, le referer, etc ...
● app.request.content
Retourne toutes les informations du contenu de la requête HTTP.
● app.request.languages
Permet de récupérer la séquence des langages acceptés par le navigateur,
par exemple : fr, fr-FR, etc.

30
3. La Syntaxe de base
g.Les variables globales

● app.request.charsets
Permet de récupérer la séquence des jeux de caractères acceptés par le navigateur,
par exemple : ISO-8859-1, UTF-8, etc.
● app.request.acceptableContentTypes
Permet de récupérer la séquence des types de contenus acceptés par le navigateur,
par exemple : text/html, application/xml, etc.
● app.request.pathInfo
Renvoie les informations sur le chemin d’accès de l’application sans le nom de
domaine.
● app.request.requestUri
Retourne l’uri qui est le chemin de la page courante sans le nom de domaine.

31
3. La Syntaxe de base
g.Les variables globales

● app.request.baseUrl
Retourne l’url de base de l’application.
● app.request.basePath
Renvoie le path de la base de l’application.
● app.request.method
Permet de récupérer les méthodes de requêtes qui ont été utilisés à l’appel
de la page, comme par exemple : POST, GET, etc.
● app.session
Permet d’accéder à un paramètre contenu dans une SESSION en utilisant
la méthode get(). Exemple: {{app.request.session.get("nom_parametre")}}

32
3. La Syntaxe de base
h.Les liens

Path() et url ()
o Elles permettent de référencer une route.
• url() genére une URL absolue.
• Path() genére une URL relative.
• Exemple:
<a href="{{ path(’produit_route’) }}">Produit</a> (Le lien generé sera de type
« /produit » )

<a href="{{ url(’produit_route’) }}">Produit</a> (Le lien generé sera de type

« http://www.localhost:8000/produit » )

o On peut également définir une route paramétrée

• <a href="{{ path(’produit_route’,{’id’: ’value’})}}">Produit détails</a>

33
4. Ajout de fichier
Asset(): Permet d’appeler les fichiers ressources css, js,images
définis dans le dossier public

● css
<link rel= “stylesheet” href=”{{asset(css/style.css)}}”, type = “text/css”>

● JS
<script src="{{ asset('js/script.js') }}"></script>

● Image
<img src="{{ asset (‘images/example.jpg’) }}" alt="Example"/>

34
 4. Ajout de fichier:
Pourquoi utiliser Asset () ?

• Bien qu’il soit possible de mettre des URL directement sans mettre asset(), cette

pratique n'est plus.

• Les URL à codage en dur peuvent être un inconvénient: Vous devez écrire le

chemin complet de chaque élément.

• Lorsque vous utilisez le composant Asset, vous pouvez regrouper les actifs dans

des packages pour éviter de répéter la partie commune de leur chemin.

35
 • References:

• https://twig.symfony.com/
• https://connect.ed-diamond.com/GNU-Linux-Magazine/GLMF-199/Moteur-de-Te
mplate-Twig-prise-en-main
• https://twig.symfony.com/doc/2.x/deprecated.html
• https://twig.symfony.com/doc/3.x/
• http://sdz.tdct.org/sdz/utilisation-de-twig-un-moteur-de-templates.html

36