Apprendre à exploiter le moteur

de templates Twig dans Symfony

Par iner dukoid

Date de publication : 22 mars 2016

Dernière mise à jour : 29 août 2016

Ce tutoriel a pour but de vous apprendre le moteur de templates Twig, qui est intégré dans
Symfony depuis la version 2, du framework PHP.

Commentez
 Apprendre à exploiter le moteur de templates Twig dans Symfony par iner dukoid

I - À propos..................................................................................................................................................................3
II - Avantages de Twig.................................................................................................................................................3
III - Le langage Twig....................................................................................................................................................4
III-A - Affichage des données................................................................................................................................ 4
III-B - Concaténation.............................................................................................................................................. 5
III-C - Les variables................................................................................................................................................6
III-D - Condition IF : {% if … %} … {% endif %}................................................................................................... 7
III-E - La boucle FOR: {% for … %} {% endfor %}................................................................................................8
III-F - Commentaire: {# … #}................................................................................................................................. 9
III-G - Les filtres..................................................................................................................................................... 9
III-H - Les fonctions..............................................................................................................................................10
III-I - Les macros.................................................................................................................................................. 10
III-J - Named Arguments......................................................................................................................................11
III-K - Les tags ou actions....................................................................................................................................11
III-L - Include de template (Symfony).................................................................................................................. 11
III-M - Render controller (Symfony)..................................................................................................................... 12
III-N - Personnaliser les templates: héritage, block…......................................................................................... 12
III-O - Les liens (Symfony)................................................................................................................................... 14
III-P - L'inclusion de feuilles de style et de JavaScripts avec Twig (Symfony).................................................... 14
III-Q - Vérification de la syntaxe.......................................................................................................................... 14
III-R - Les formats de template (Symfony).......................................................................................................... 15
III-S - créer un filtre (Symfony)............................................................................................................................ 15
III-T - Math............................................................................................................................................................16
III-U - Coding Standards...................................................................................................................................... 16
IV - Remerciements................................................................................................................................................... 17

-2-
Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par
les droits d'auteur. Copyright ® 2016 iner dukoid. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans
l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.
[Link]
 Apprendre à exploiter le moteur de templates Twig dans Symfony par iner dukoid

I - À propos

Twig est un moteur de templates qui a été créé par SensioLabs, les créateurs de Symfony.
On le retrouve nativement dans les frameworks Symfony et Drupal8, mais il peut être installé sur la majorité des
frameworks ainsi que dans un environnement PHP.
Dans ce tutoriel pas de long discours explicatif. J'ai choisi de présenter un exemple Twig et son équivalent en PHP.
Parfois aucune explication, en lisant l'exemple du code, on comprend le fonctionnement.

Même si ce tutoriel est orienté Symfony, il peut être valable pour apprendre Twig de façon
générale.

II - Avantages de Twig

A Twig permet de séparer la présentation des données du traitement.

B Twig permet la personnalisation de page web.
C Twig permet de rendre les pages web plus lisibles, plus claires.
D Twig est rapide.
E Twig apporte de nouvelles fonctionnalités.
F Twig apporte plus de sécurité.

Mais aussi :

• Twig est facile à apprendre ;

• les messages d'erreur Twig sont clairs et précis ;
• Twig est supporté par la plupart des éditeurs de code.

A.

Bien souvent, afficher une donnée brute ne suffit pas. On veut lui appliquer un traitement logique avant de l'afficher
(une conversion, un calcul…).

Twig permet de définir en dehors de la page web des filtres que l'on pourra appliquer à la donnée.

B.

Un block menu, un block recherche, un block contenu… le tout défini dans un template lui-même héritable.

C.

On a souvent besoin de boucles, de conditions… à la construction d'une page web et pour cela, on utilise PHP. Votre
page devient vite illisible, peu maintenable, sujette à de nombreuses erreurs.

Twig par son langage est moins invasif que PHP et se substitue à celui-ci.

TWIG PHP
{% for value in items if <?php foreach
[Link] %} ($items as $value):
<img src="{{ [Link] }}"/> if ($[Link]) {?>
{% endfor %} <img
src="<?php echo $[Link];?>"/>
<?php } endforeach;?>

D.

-3-
Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par
les droits d'auteur. Copyright ® 2016 iner dukoid. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans
l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.
[Link]
 Apprendre à exploiter le moteur de templates Twig dans Symfony par iner dukoid

La conversion Twig/PHP ne se fait qu'une seule fois au premier appel, ensuite il est mis en cache pour les autres
appels (et donc finalement, c'est aussi rapide qu'en PHP).

E.

Twig apporte de nouvelles fonctionnalités: les macros, les filtres, les blocks, l'héritage de templates…

F.

Avec Twig, plus de sécurité avec l'échappement des variables qui est activé par défaut.

III - Le langage Twig

Faisons le tour de toute la syntaxe du langage Twig.

{% %}: pour faire une action : un set de variable, une condition if, une boucle for ;
{{ }}: pour afficher quelque chose.

III-A - Affichage des données

L'affichage des données et l'échappement :

TWIG coucou
<b>{{ 'coucou' }}</b>

TWIG <h1>coucou</h1>
{% set
data = '<h1>coucou</h1>' %}

{{ data }}

Pour la sécurité, l'échappement est activé par défaut. Les balises ne sont pas interprétées.
L'échappement convertit la donnée en code HTML avant l'affichage.

Forcer l'interprétation des balises avec le filtre raw :

TWIG coucou
{% set
data = '<h1>coucou</h1>' %}

{{ data|raw }}

Si l'échappement par défaut a été désactivé. Forcer l'échappement avec le filtre e :

TWIG <h1>coucou</h1>
{% set
data = '<h1>coucou</h1>' %}

{{ data|e }}

L'affichage des données de différents types: objet, tableau…

TWIG PHP
{{ [Link] }} <?php
{{ [Link] }} echo $produit->getNom();
echo $produit-
>getCategorie()->getNom();

-4-
Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par
les droits d'auteur. Copyright ® 2016 iner dukoid. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans
l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.
[Link]
 Apprendre à exploiter le moteur de templates Twig dans Symfony par iner dukoid

PHP
?>

TWIG PHP
{{ produit["nom"] }} ou {{ <?php
[Link] }} echo $produit["nom"];
?>

TWIG PHP
{% set animal = 'oiseaux' %} <?php
{{ "il y a des #{animal} sur le toit" }} $animal = 'oiseaux';
echo sprintf('Il y a des %s sur le toit',
{{ 14752 / 22 = #{14752 / 22} }} $animal);

echo printf('14752 / 22 = %d',

(14752 / 22));
?>

L'affichage de données avec suppression d'espace entre deux balises à gauche ou à droite ou les deux :

supprimer les espaces entre les balises HTML

TWIG Conversion en : (avant affichage)

{% spaceless %} <div><strong>foo
<div> <strong>foo bar</strong></div>
bar</strong>
</div>
{% endspaceless %}

supprimer les espaces à gauche puis des deux côtés avec le caractère '-' :

TWIG Conversion en: (avant affichage)

<li> {{- 'bonjour' }} <li>bonjour </li>
</li> <li>aurevoir</li>
<li> {{- 'aurevoir' -}}
</li>

III-B - Concaténation

TWIG PHP
{{ "Description du produit:" ~ <?php
[Link] }}
echo "Description du produit:"
.
$produit->getDescription();
?>

TWIG PHP
{% set texte = greeting ~ <?php
name|lower %}
{{ texte }} $texte = $greeting . strtolower($name);
echo $texte;
?>
TWIG PHP
{{ (greeting ~ name)|lower }} <?php

echo strtolower($greeting . $name);

?>

-5-
Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par
les droits d'auteur. Copyright ® 2016 iner dukoid. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans
l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.
[Link]
 Apprendre à exploiter le moteur de templates Twig dans Symfony par iner dukoid

III-C - Les variables

TWIG
{% 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 %}

[ … ] un tableau avec une série de valeurs.

{ … } un tableau avec des couples clé/valeur.

Les variables globales (Symfony)

parameters,yml [Link]
parameters: twig:
webmaster: dark-vador globals:
webmaster:
%webmaster%
TWIG Résultat à l'affichage
{{ webmaster }} dark-vador

La variable globale webmaster sera accessible dans tous les templates Twig.

Cas particulier : une variable nommée avec un caractère spécial. ('-'…). L'attribut d'un objet ([Link]-produit) ou
la clé d'un tableau article['info-produit'] :

une donnée avec '-' TWIG

[Link]-description {{
attribute(article, 'data-description') }}

ERREUR -> {{ [Link]-

description }}
une donnée avec '-' TWIG
{% set {{
tableau={'data-info': 'information'} %}attribute(tableau, 'data-info') }}
ou
{{ tableau['data-info'] }}

ERREUR -> {{ [Link]-

info }}

-6-
Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par
les droits d'auteur. Copyright ® 2016 iner dukoid. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans
l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.
[Link]
 Apprendre à exploiter le moteur de templates Twig dans Symfony par iner dukoid

à savoir :

TWIG
{{ attribute(object, method) }}
{{ attribute(object, method, arguments) }}
{{ attribute(array, item) }}
{{ attribute(object, method) is defined? 'Method exists': 'Method does not exist' }}

[Link]

III-D - Condition IF : {% if … %} … {% endif %}

and, or, not, is defined, starts with, ends with, matches, in, empty

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

{% if ((a==1 and b>0) or not c==0) and d is defined %}

{% set resultat = (d + a * b) / c %}
{{ resultat }}
{% endif %}

{% if 'Fabien' starts with 'F' %}

commence par F
{% endif %}

{% if 'Fabien' ends with 'n' %}

Finis par n
{% endif %}

- regular expressions:
{% if phone matches '/^[\\d\\.]+$/' %}
format telephone ok
{% endif %}

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

mais aussi :

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 ===).

Sous une autre forme :

TWIG
{{ article is null? 'yes': 'no' }} // affiche yes ou no

{{ var is odd }} // Affiche true ou false

// pareil que: {% if var is odd %}true{% else %}false{% endif %}

{{ var is null }} // Affiche true ou false

[Link]

-7-
Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par
les droits d'auteur. Copyright ® 2016 iner dukoid. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans
l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.
[Link]
 Apprendre à exploiter le moteur de templates Twig dans Symfony par iner dukoid

III-E - La boucle FOR: {% for … %} {% endfor %}

TWIG
- affiche 0123456789
{% for i in 0..9 %} // pareil que {% for i in range(0, 9) %}
{{ i }}
{% endfor %}

{% for produit in produits %}

{{ [Link] }}
{% endfor %}

- avec une condition:

{% for produit in produits if [Link]==1 %}
{{ [Link] }}
{% endfor %}

- boucle for avec condition vide:

{% for article in articles %}
{{ [Link] }}
{% else %}
pas d'article trouvé
{% endfor %}

- clés et valeurs:
{% for key, value in table %}
{{ key }} {{ value }}
{% endfor %}

- les 10 premiers users:

{% for user in users|slice(0, 9) %}
<li>{{ [Link] }}</li>
{% endfor %}

- bascule:
{% for i in 0..10 %}
<div class="{{ cycle(['fond-noir', 'fond-blanc'], i) }}"> // fond-noir / fond-
blanc / …

</div>
{% endfor %}

La variable loop de la boucle for :

TWIG
{{ [Link] }} // Numéro de l'itération courante en commençant par 1
{{ loop.index0 }} // Numéro de l'itération courante en commençant par 0
{{ [Link] }} // Nombre itérations restantes avant la fin en commençant par
1
{{ loop.revindex0 }} // Nombre itérations restantes avant la fin en commençant par
0
{{ [Link] }} // La première itération? True ou false
{{ [Link] }} // La dernière itération? True ou false
{{ [Link] }} // Nombre total d'itérations

Un exemple avec loop :

TWIG
{% for produit in produits %}
<span class="{% if [Link] is even %}fond-noir{% else %}fond-blanc{% endif %}">
{{ produit }}
</span>
{% endfor %}

-8-
Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par
les droits d'auteur. Copyright ® 2016 iner dukoid. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans
l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.
[Link]
 Apprendre à exploiter le moteur de templates Twig dans Symfony par iner dukoid

III-F - Commentaire: {# … #}

TWIG
{# mon commentaire #}

III-G - Les filtres

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

Le filtre length

TWIG PHP
{% for <?php
i in 0..produits|length %} for
($i=0; $i<count($produits); $i++) {
{% endfor %}
}
?>

Appliquer plusieurs filtres: trim et upper

TWIG PHP
{{ "les fleurs du mal"|trim|upper }} <?php
echo
strtoupper(trim("les fleurs du mal"));
?>

Une autre façon d'appliquer un filtre upper

TWIG
{% filter upper %}

C'est l'heure exquise et

matinale
Que rougit un soleil
soudain.
A travers la brume
automnale
{% endfilter %}

Avec un long texte, sous cette

forme c'est plus pratique et
plus clair.

à savoir:

La liste des filtres

[Link]

TWIG
abs, batch, capitalize, convert_encoding, date, date_modify, default, escape, first, format,
join, json_encode, keys, last, length, lower, merge,
nl2br, number_format, raw, replace, reverse, round, slice, sort, split, striptags, title, trim,
upper, url_encode

Nous verrons plus loin comment créer nos propres filtres.

-9-
Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par
les droits d'auteur. Copyright ® 2016 iner dukoid. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans
l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.
[Link]
 Apprendre à exploiter le moteur de templates Twig dans Symfony par iner dukoid

III-H - Les fonctions

Une fonction effectue un traitement (contrairement à un filtre qui est destiné à faire une conversion) :

TWIG
- la fonction dump: affiche tout le détail d'un objet ou d'un tableau
{{ dump(produit) }}

- la fonction max: retourne le max d'une série de valeurs

{% set tab = [1, 5, 2, 3] %}
{{ max(tab) }} // affiche 5

Liste des fonctions :

TWIG
attribute, block, constant, cycle, date, dump, include, max, min, parent, random, range, source,
template_from_string

[Link]

III-I - Les macros

Les macros sont comme des fonctions, mais composées de fragments HTML réutilisables.
Dans un template, on regroupe toutes les macros que l'on pourra importer dans un autre template afin d'être utilisées.

Prenons pour exemple un template [Link] qui va contenir plusieurs macros. Une macro pour la balise input
et une qui affiche une liste d'article.

[Link]
{% macro input(name, value, type, size) %}
<input type="{{ type|default('text') }}" name="{{ name }}" value="{{ value|e }}" size="{{
size|default(20) }}" />
{% endmacro %}

{% macro articleListe(articles, className) %}

<ul {% if className %}class="{{ className }}"{% endif %}>
{% for article in articles %}
<li class="article"><a href="{{ [Link] }}">{{ [Link] }}</a></li>
{% endfor %}
</ul>
{% endmacro %}

Son utilisation : soit on importe toutes les macros, soit on choisit celle que l'on veut importer :

[Link] : avec import de [Link] : avec import

toutes les macros se trouvant dans d'une seule macro parmi les macros
[Link] se trouvant dans [Link]
{% import "[Link]" as {% from '[Link]' import
forms %} input as input_field %}

<p>{{ <p>{{
[Link]('livre', 'saint-exupery') }}</p>
input_field('livre', 'saint-exupery') }}</p>

[Link] : la macro se trouve dans la page même. (sans import)

{% macro input(name, value, type, size) %}
<input type="{{ type|default('text') }}" name="{{ name }}" value="{{ value|e }}" size="{{
size|default(20) }}" />
{% endmacro %}

- 10 -
Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par
les droits d'auteur. Copyright ® 2016 iner dukoid. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans
l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.
[Link]
 Apprendre à exploiter le moteur de templates Twig dans Symfony par iner dukoid

[Link] : la macro se trouve dans la page même. (sans import)

<p>{{ _self.input('livre', 'saint-exupery', 'text', 64) }}</p>

Une macro dans la page même de son utilisation, pour cela on utilise _self. Mais on perd sa
réutisabilité.

III-J - Named Arguments

Donner des noms aux arguments pour une meilleure compréhension et de pouvoir cibler un argument.

Des exemples :

TWIG
- au lieu de ... range(1, 10, 2) :
{% for i in range(low=1, high=10, step=2) %}
{{ i }},
{% endfor %}

- l'argument ciblé est timezone parmi les autres arguments (format, date...)
{{ "now" | date(timezone="Europe/Paris") }} //

{{ data|convert_encoding(from='iso-2022-jp', to='UTF-8') }}

III-K - Les tags ou actions

{% … %} Les commandes de base Twig pour faire des actions comme: for, if, set…

Liste de toutes les commandes :

TWIG
autoescape, block, do, embed, extends, filter, flush, for, from, if, import, include, macro,
sandbox, set, spaceless, use, verbatim

[Link]

III-L - Include de template (Symfony)

Inclure des fichiers template.

[Link]
<ul>
{% for item in items %}
{% include
"AcmeDemoBundle:dossier:render_item.[Link]" with {'item':
item} only %}
{% endfor %}
</ul>

only est facultatif. Il permet

d'indiquer que le fichier inclus
n'a pas besoin des variables
extérieures, mais seulement
ceux passés en paramètres.

Mais aussi :

- 11 -
Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par
les droits d'auteur. Copyright ® 2016 iner dukoid. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans
l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.
[Link]
 Apprendre à exploiter le moteur de templates Twig dans Symfony par iner dukoid

TWIG
- Un include avec une condition:
{% include isValid ? '[Link]' : '[Link],twig' %}

- Si la page de l'include n'existe pas, alors il n'y aura pas d'erreur. Rien ne se passe.
{% include "[Link]" ignore missing %}

III-M - Render controller (Symfony)

Faire appel à une action du contrôleur qui renvoie un rendu qui va être inclus.

Exemple : récupérer les trois derniers articles les plus récents :

TWIG
{{ render(controller('AcmeDemoBundle:Article:recentArticles', { 'max': 3 })) }}

// Fait appel à une action (recentArticlesAction) du controller (ArticleController)

// retourne un rendu avec les 3 derniers articles.

III-N - Personnaliser les templates: héritage, block…

Pour personnaliser les templates, Twig propose un système de blocks et d'héritage de templates.

Prenons cet exemple :

toutes les pages "client" et les pages "produit" ont le même header et footer ;
les pages client ont une recherche par client ;
les pages produit ont une recherche par produit ;
toutes les pages "client" et "produit" ont leur propre contenu respectif.

[Link]
<html>
<head>...</head>

<body>
<div class="head"> {% block header %} header {% endblock %} </div>
<div class="sidebar"> {% block recherche %}{% endblock %} </div>
<div class="content"> {% block contenu %}{% endblock %} </div>
<div class="footer"> {% block footer %} footer {% endblock %} </div>
</body>
</html>

[Link] [Link]
{% extends "::[Link]" %} {% extends "::[Link]" %}

{% block recherche %} {% block recherche %}

recherche client recherche produit
{% endblock %} {% endblock %}

* Toutes les pages web 'client' * Toutes les pages web 'produit'
{% extends "AcmeDemoBundle::[Link]"
{% extends
%} "AcmeDemoBundle::[Link]" %}

{% block contenu %} {% block contenu %}

... contenu client ... ... contenu produit ...
{% endblock %} {% endblock %}
Résultat
Avec une page web "client" Avec une page web "produit"
header header

- 12 -
Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par
les droits d'auteur. Copyright ® 2016 iner dukoid. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans
l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.
[Link]
 Apprendre à exploiter le moteur de templates Twig dans Symfony par iner dukoid

recherche client recherche produit

contenu client contenu produit
footer footer

Les avantages :

• finalement, pour créer une page web "client" ou "produit", on hérite de son layout et on ajoute son propre
contenu et… c'est tout ;
• si vous voulez modifier le header (de toutes les pages), il suffit de ne le modifier qu'à un seul endroit c'est-à-
dire dans la base.

D'autres possibilités avec les blocks :

Identique TWIG header

recherche client
contenu client
{% extends "AcmeDemoBundle::[Link]" %}
footer
{% block contenu %}
contenu client
{% endblock %}

Le fait de ne pas
mentionner un block
parent a pour résultat
que le contenu est
tout de même inclus
automatiquement par
héritage.
Identique TWIG header
recherche client
contenu client
{% extends "AcmeDemoBundle::[Link]" %}
footer
{% block header %} {{
parent() }} {% endblock %}
{% block
recherche %} {{
parent() }} {% endblock%}
{% block
contenu %} contenu
client {% endblock %}
{% block footer %} {{
parent() }} {% endblock %}

{{ parent() }}: appelle du

contenu parent
Supprimer un block parent TWIG header
Suppression du block recherche contenu client
footer
{% extends "AcmeDemoBundle::[Link]" %}

{% block
recherche %}{% endblock%}
{% block
contenu %} contenu
client {% endblock %}

Le fait de mentionner
un block et qu'il soit
vide a pour résultat que

- 13 -
Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par
les droits d'auteur. Copyright ® 2016 iner dukoid. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans
l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.
[Link]
 Apprendre à exploiter le moteur de templates Twig dans Symfony par iner dukoid

le contenu parent n'est

pas appelé
Remplacer le contenu d'un block TWIG header
par un autre un autre contenu
sur le block recherche contenu client
{% extends "AcmeDemoBundle::[Link]" %}
footer
{% block
recherche %}un autre
contenu{% endblock%}
{% block
contenu %} contenu
client {% endblock %}
Ajouter du contenu dans un block TWIG header
sur le block recherche recherche client
un texte en dessous
{% extends "AcmeDemoBundle::[Link]" %}
contenu client
{% block recherche %} footer

{{parent() }} <br/>
un texte en
dessous
{% endblock%}
{% block
contenu %} contenu
client {% endblock %}

Pour information, dans cette partie "personnalisation, héritage…" seule la façon d'écrire
l'extends est liée à Symfony: {% extends "AcmeDemoBundle::[Link]" %}.

III-O - Les liens (Symfony)

TWIG
- vers fichiers assets :
<img src="{{ asset('images/[Link]') }}" />

- Vers url / :
<a href="{{ path('_welcome') }}">Home</a>

- Vers url / avec des paramètres :

<a href="{{ path('article_show', { 'slug': [Link] }) }}">
{{ [Link] }}
</a>

- Vers url absolue :

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

III-P - L'inclusion de feuilles de style et de JavaScripts avec Twig (Symfony)

[Link]

III-Q - Vérification de la syntaxe

Avec les commandes Symfony, on peut vérifier la syntaxe Twig à plusieurs niveaux: template, dossier, bundle.

- Par template :
php app/console twig:lint src/Acme/ArticleBundle/Resources/views/Article/[Link]

- Par dossier :
php app/console twig:lint src/Acme/ArticleBundle/Resources/views

- 14 -
Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par
les droits d'auteur. Copyright ® 2016 iner dukoid. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans
l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.
[Link]
 Apprendre à exploiter le moteur de templates Twig dans Symfony par iner dukoid

- Par bundle :
php app/console twig:lint @AcmeArticleBundle

III-R - Les formats de template (Symfony)

Les formats de template permettent de rendre en HTML, mais aussi en XML ou PDF.

[Link]

III-S - créer un filtre (Symfony)

On a vu comment utiliser les filtres: {{ articles|length }}.

Il est possible de créer ses filtres, voici comment faire avec cet exemple.
Création d'un filtre price qui va formater une valeur en prix (monnaie dollars) :

src/AppBundle/Twig/[Link]
// src/AppBundle/Twig/[Link]
namespace AppBundle\Twig;

class AppExtension extends \Twig_Extension

{
public function getFilters()
{
return array(
new \Twig_SimpleFilter('price', array($this, 'priceFilter')),
);
}

public function
priceFilter($number, $decimals = 0, $decPoint = '.', $thousandsSep = ',')
{
$price = number_format($number, $decimals, $decPoint, $thousandsSep);
$price = '$'.$price;

return $price;
}

public function getName()

{
return 'app_extension';
}
}

Déclarer la classe en tant que service :

[Link]
app.twig_extension:
class: AppBundle\Twig\AppExtension
tags:
- { name: [Link] }

Et plus qu'à utiliser le filtre price dans un template Twig :

TWIG $5500,25

{{ '5500.25155'|price(2, ',', '') }}

TWIG $5,500.00

{{ '5500'|price }}

- 15 -
Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par
les droits d'auteur. Copyright ® 2016 iner dukoid. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans
l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.
[Link]
 Apprendre à exploiter le moteur de templates Twig dans Symfony par iner dukoid

III-T - Math

Un peu de math pour la route

TWIG
+ - * / : les bases

% : modulo donne le reste de la division

{{ 11 % 7 }} retourne 4.

// : arrondi inférieur ou supérieur sans les décimales

{{ 20 // 7 }} retourne 2
{{ 20 // 6 }} retourne 3

** : puissance
{{ 2 ** 3 }} retourne 8

III-U - Coding Standards

Toujours un et un seul espace entre les balises, les données… (sauf pour les filtres) :

TWIG
{{ foo }}
{# comment #}
{% if foo %}{% endif %}
{{ 1 + 2 }}
{{ foo ~ bar }}
{{ true ? true : false }}

un seul espace après (mais pas avant) un séparateur :

TWIG
{{ [1, 2, 3] }}
{{ {'foo': 'bar'} }}

inversement un seul espace avant (mais pas après) une parenthèse :

TWIG
{{ 1 + (2 * 3) }}

pas d'espace pour les filtres :

TWIG
{{ foo|upper|lower }}

indenter les blocks :

TWIG
{% block foo %}
{% if true %}
true
{% endif %}
{% endblock %}

- 16 -
Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par
les droits d'auteur. Copyright ® 2016 iner dukoid. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans
l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.
[Link]
 Apprendre à exploiter le moteur de templates Twig dans Symfony par iner dukoid

IV - Remerciements

Je tiens à remercier Francis Walter pour sa relecture technique, Claude Leloup pour sa relecture orthographique
et Guillaume SIGUI pour son encadrement.

- 17 -
Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par
les droits d'auteur. Copyright ® 2016 iner dukoid. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans
l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.
[Link]