Symfony 6

TWIG et Webpack
Encore
AYMEN SELLAOUTI
Introduction (1)
Introduction (2)
Moteur de Template PHP.

Développé par l'équipe de Sensio Labs,

Directement intégré dans Symfony (pas besoin de l’installer).

Introduction (3)
L'objectif principal de Twig est de permettre aux développeurs de
séparer la couche de présentation (Vue) dans des Templates dédiés, afin
de favoriser la maintenabilité du code.
Idéal pour les graphistes qui ne connaissent pas forcément le langage
PHP et qui s'accommoderont parfaitement des instructions natives du
moteur, relativement simples à maîtriser.
Il y a quelques fonctionnalités en plus, comme l'héritage de templates.
Il sécurise vos variables automatiquement (htmlentities(), addslashes())
Syntaxe de bases de Twig
{{ maVar }} : Les doubles accolades (équivalent de l’echo dans php ou
du <%= %> pour les jsp) permettent d'imprimer une valeur, le résultat
d'une fonction...

{% code %}: Les accolades pourcentage permettent d'exécuter une

fonction, définir un bloc...

{# Les commentaires #}: Les commentaires.

 Comment afficher une variable dans TWIG (1)
Fonctionnalité Exemple Twig Équivalent PHP

Afficher une variable Variable : {{ MaVariable }} Pseudo : <?php echo $MaVariable; ?>

Afficher le contenu d’une case

Identifiant : {{ tab['id'] }} Identifiant : <?php echo $tab['id']; ?>
d'un tableau
Afficher l'attribut d'un objet, dont
le getter respecte la Identifiant : {{ user.id }} Identifiant : <?php echo $user->getId(); ?>
convention $objet->getAttribut()

Afficher une variable en lui MaVariable majus: <?php echo

MaVariable majus :
appliquant un filtre. Ici, « upper » strtoupper($MaVariable);
{{ MaVariable|upper }}
met tout en majuscules : ?>
Comment afficher une variable dans TWIG (2)
Fonctionnalité Exemple Twig Équivalent PHP

Afficher une variable en

combinant les filtres. Message : <?php
« striptags » supprime les balises echo ucwords(strip_tags($news->
Message : {{ news.texte|striptags|title }}
HTML. getTexte()));
« title » met la première lettre de ?>
chaque mot en majuscule.

Utiliser un filtre avec des

Date : <?php echo
arguments.
Date : {{ date|date('d/m/Y') }} $date->format('d/m/Y');
Attention, il faut que date soit un
?>
objet de type Datetime ici.

Identité : <?php echo $nom.' '.

Concaténer Identité : {{ nom ~ " " ~ prenom }}
$prenom; ?>
Comment afficher une variable dans les TWIGS :
Exemple :
 Twig et l’affichage d’un attribut
Lorsqu’on veut accéder à un attribut d’un objet avec twig on a le fonctionnement suivant pour l’exemple
{{personne.name}} :
Vérification si personne est un tableau, si oui vérifier que nous avons un index valide dans ce cas elle
affiche le contenu de personne[‘name’]
Sinon, si personne est un objet, elle vérifie si name est un attribut valide public. Si c'est le cas, elle
affiche personne->name.
Sinon, si personne est un objet, elle vérifie si name() est une méthode valide publique. Si c'est le cas,
elle affiche personne->name().
Sinon, si personne est un objet, elle vérifie si getName() est une méthode valide. Si c'est le cas, elle
affiche personne->getName().
Sinon, et si personne est un objet, elle vérifie si isName() est une méthode valide. Si c'est le cas, elle
affiche personne->isName().
Sinon, elle n'affiche rien et retourne null.
Les filtres
 Un filtre permet de changer l’affichage d'une variable sans changer son
contenu. Il peut avoir un ou plusieurs paramètres.
Filtre Description Exemple Twig
Upper Met toutes les lettres en majuscules. {{ var|upper }}
Striptags Supprime toutes les balises XML. {{ var|striptags }}
Date Formate la date selon le format {{ date|date('d/m/Y') }}
donné en argument. La variable en Date d'aujourd'hui : {{ "now"|date('d/m/Y') }}
entrée doit être une instance
de Datetime.
Format Insère des variables dans un texte, {{ "Il y a %s pommes et %s poires"|format(153,
équivalent à printf. nb_poires) }}
Length Retourne le nombre d'éléments du Longueur de la variable : {{ texte|length }}
tableau, ou le nombre de caractères Nombre d'éléments du tableau : {{ tableau|length }}
d'une chaîne.
Exercice
Reprenez l’exemple du cv et appliquer les filtres suivants sur
l’affichage :
Les nom et prénoms doivent être en majuscule
L’âge doit être affiché en entier positif
Donner des valeurs par défaut aux variables
Les fonctions
Une fonction peut changer la valeur d'une variable et peut avoir un ou plusieurs
paramètres. {% if date(user.created_at) < date('-2days') %}
{# do something #}
Quelques fonctions offertes par twig :
{% endif %}
 date : convertie un argument en une date afin de permettre une comparaison
entre dates.
max, min : retourne le min et le max d’un ensemble
parent : utiliser dans l’héritage et retourne le contenu du bloc parent.
{{ random(['apple', 'orange', 'citrus']) }} {# example output: orange #}
random: retourne un élément aléatoire {{ random('ABC') }} {# example output: C #}
{{ random() }}{# example output: 15386094
selon les paramètres passées à la fonction (works as the native PHP mt_rand function) #}
{{ random(5) }} {# example output: 3 #}
{{ random(50, 100) }} {# example output: 63 #}
https://twig.symfony.com/doc/2.x/functions/index.html
Exercice
Créer une page TWIG qui prend en paramètre un tableau de notes,
qui l’affiche, affiche le nombre de ces éléments, le min et le max de ce
tableau en utilisant les fonctions et les pipes twig.
Le nombre d’éléments du tableau doit être paramétrable à travers la
route et doit être de 5 par défaut.
Le contenu du tableau doit être aléatoire.
Structures de contrôle
Les structures que ce soit séquentielles ou itératives sont souvent très
proches du langage naturel.

Elles sont introduites entre {% %}

Généralement elle se termine par une expression de fin de block

Affectation de variables
Afin d’affecter une valeur à une variable dans TWIG, utiliser la syntaxe
suivante :

{% set maVar = « valeur » %}

Exemple
{% set sum = 0 %}
Structure conditionnelle
if
Syntaxe :
{% if cnd %}
Block de traitement
{%endif%}
Exemple
{% if employee.salaire < 250 %}
ce salaire est inférieur au smig
{%endif%}
 Structure conditionnelle
IF else elseif Exemple
Syntaxe :
{% if cnd %} {% if maison.tempertature <0%}
block traitement Très Froid
{% elseif cnd2 %} {% elseif maison.tempertature <10 %}
block traitement
Froid
{% else %}
{% else %}
block traitement
Bonne température
{% endif %}
{% endif %}
 Tests
is defined l’équivalent de isset en php
Rôle vérifie l’existence d’une variable
Exemple:{% if MaVariable is defined %} J’existe {% endif%}

even odd
Rôle vérifie si la variable est pair Rôle vérifie si la variable est impair
Exemple : {% if MaVariable is even %}Pair{% endif%} Exemple : {% if MaVariable is odd%}Impair{% endif%}
 Structure itérative
{% for valeur in valeurs %} Exemple
block à répéter La formation de l’équipe A est : <br>
{% else %} <ol>
Traitements à faire si il n’y {% for joueur in joueurs %}
a aucune valeur <li> {{joueur.nom}} </li>
{% endfor %} {% else %}
La liste n’a pas encore été renseignée
{% endfor %}
</ol>
Structure itérative
 La boucle for définit une variable loop ayant les attributs suivants :
Variable Description

{{ loop.index }} Le numéro de l'itération courante (en commençant par 1).

{{ loop.index0 }} Le numéro de l'itération courante (en commençant par 0).

{{ loop.revindex }} Le nombre d'itérations restantes avant la fin de la boucle (en finissant par 1).

{{ loop.revindex0 }} Le nombre d'itérations restantes avant la fin de la boucle (en finissant par 0).

{{ loop.first }} true si c'est la première itération, false sinon.

{{ loop.last }} true si c'est la dernière itération, false sinon.
{{ loop.length }} Le nombre total d'itérations dans la boucle.
Exercice
 Reproduire ce tableau permettant d’afficher un tableau de user.
Accès aux Templates
Les Templates doivent se trouver dans l’un des emplacements suivants :
 templates/
 /Resources/views d’un bundle
Afin d’accéder aux Template, une convention de nommage est définit :
Si on est dans vos vues : Dossier/pageTwig
Exemples
index.html.twig // ce fichier se trouve directement dans templates
Si vous voulez accéder à la vue d’un bundle :
@NomBundle/Dossier/pageTwig
Le nom du bundle ne doit pas contenir le mot Bundle
Nommage des pages TWIG
Par convention le nommage des vues dans symfony se fait selon la
convention suivante :
NomPage.FormatFinal.MoteurDeTemplate
Exemple
index.html.twig
Le nom du fichier est index, le format final sera du html et le moteur
de template suivi est le TWIG
Héritage 1- Définition
 Vision proche de l’héritage dans l’orienté objet
Template de base :
Eléments communs
Définition de Bloc

Surdéfinition de blocs

Template Template Template

fils 1 fils 2 fils 3

Template
fils 3.1
Héritage 2 – Exemple de Template père
 Exemple de Template de base
Héritage 3- Syntaxe
Afin d’hériter d’un Template père il faut étendre ce dernier avec la
syntaxe suivante :
{% extends 'TemplateDeBase' %}
Exemple :
{% extends 'base.html.twig' %}
Si le fils ne surcharge aucun des blocs et n’ajoute rien on aura le même
affichage que pour la base
Héritage 4- Le Bloc
L’élément de base de l’héritage est le bloc
Un bloc est définit comme suit : {% block nomBloc%} contenu du
bloc{%endblock%}
Pour changer le contenu de la page il faut sur-définir le bloc cible
 En héritant d’une page et si vous écrivez du code à l’extérieur des
blocs vous aurez le message suivant qui est très explicite.
Héritage 5- Récupérer le contenu d’un
bloc parent
 Pour récupérer le contenu d’un bloc père il suffit d’utiliser la méthode
parent()

Ceci peut être aussi appliqué pour toute la hiérarchie

Exercice
 Aller dans la page base.html.twig
 Ajouter y via Bootstrap une partie header avec un menu.
 Ajouter une partie footer.
 Gérer vos blocs de sorte que vous ayez le maximum de
flexibilité.
 Exemple :
Inclusion de Template
Afin d’inclure un Template ou un fragment de code dans un autre
template on utilise la syntaxe suivante :
{% include 'Dossier/nomTemplate‘ with {'labelParam1':
param1,'labelParam2': param2,... } %}
Le chemin commance par le dossier Template
Exemple :

{{ include('Default/section.html.twig', {'Section': section})

Inclusion de Contrôleur
Que faire si on veut inclure un template dynamique ? Un template des meilleurs
ventes un template des articles les plus vus, les derniers cours postés …
La solution consiste à afficher la valeur de retour de la fonction render qui prend en
paramètres le controlleur à appeler et les attributs qu’il attend de recevoir.
Inclure un contrôleur sans ou avec des paramètres.
Syntaxe :
{{ render(controller(‘StringSyntaxControllerName::function', {'labelParam1':
param1,'labelParam2': param2,... })) }}
Exemple
{{ render(controller(‘App\\Controller\\PersonneController::List', { ‘page': 10 })) }}
Génération de liens avec TWIG
Twig permet de générer des liens à partir des noms de root en utilisant
la fonction path.
Génération de liens paramétrable avec
TWIG
Si le lien contient des paramètres, on garde la même syntaxe de la fonction path et on y ajoute
comme deuxième paramètre un tableau contenant les paramètres passer à la route.
Syntaxe : {{ path('root', { 'param1': param1, 'param2': param2,... }) }}
Génération de liens absolus
Pour générer l’url absolue nous utilisons la fonction url. Elle prend en
paramètre le nom de la root souhaitée. Cet fonctionnalité peut être utile
par exemple si vous envoyer un lien par mail. Ce lien ne peut pas être
relatif sinon il sera traité relativement à la ou il est exécuté et non
relativement à votre serveur.
Syntaxe : {{ url('root') }}
Asset
Pour générer le path d’un fichier (img, css, js,…) nous utilisons la
fonction asset.
Cette fonction permet la portabilité de l’application en permettant une
génération automatique du path du fichier indépendamment de
l’emplacement de l’application.
Exemple :
Si l’application est hébergé directement dans la racine de l’hôte alors le
path des images est /images/nomImg.
Asset
Si l’application est hébergé dans un sous répertoire de l’hôte alors le
path des images est /nomApp/images/nomImg.
Syntaxe :
asset('ressource')
Exemples
<img src="{{ asset('images/logo.png') }}" alt="Symfony!" />
<link href="{{ asset('css/blog.css') }}" rel="stylesheet"
type="text/css" />
Exercice
 Intégrer le template du lien suivant
https://themewagon.com/themes/free-bootstrap-5-admin-template-sb-admin/
Exercice
 Ajouter deux block. Un block Header et un block footer contenant
le header et le footer de votre template.
 Créer deux twig header.html.twig et footer.html.twig.
 Mettez y le code du header et du footer.
 Incluez le header à travers un controller
 Incluez le footer à travers le twig directement
Accéder aux variables globales
A chaque requête, Symfony vous fournit une variables globale app dans votre
Template. Cette variable vous permet d’accéder à plusieurs informations très
utiles.
1. app.session que nous avons vu dans le skill Controller nous permet de
récupérer la session courante. Elle a comme valeur null en cas d’absence de
session.
2. app.user permet de récupérer l’utilisateur courant connecté et null si aucun
utilisateur n’est connecté.
3. app.environment : permet de récupérer l’environnement courant, e.g. dev,
prod, test.
4. app.debug retourne true si on est dans le debug mode false sinon.
Débugger avec dump
Afin de débugger les variables dans votre page TWIG vous pouvez
utiliser la fonction dump.
Exemple :
{% extends "base.html.twig" %}

{% block body %}

{{ dump(app) }}

{% endblock %}