Retour
Symfony 6: Les vues avec twig

Dans cette partie du cours, nous allons explorer les vues et les templates TWIG, un moteur de templates puissant et flexible utilisé dans le Framework Symfony.
En comprenant ces concepts, vous serez en mesure de créer des interfaces utilisateur interactives et esthétiques pour vos applications Symfony.
Plan du cours
-
Introduction aux vues et aux templates TWIG
- 1.1 Rôle des vues dans le modèle MVC
- 1.2 Présentation des templates TWIG
- 1.3 Installation du package
- 1.4 Utiliser les Twig
-
Syntaxe de base de TWIG
- 2.1 Les variables
- 2.2 Les opérations
- 2.3 Envoyer des données dans une TWIG
-
Les filtres et les fonctions
- 3.1 Les filtres
- 3.2 Les fonctions
-
Structures de contrôle
- 4.1 Les conditions
- 4.2 Les boucles
- 4.3 Les structures de contrôle avancées
-
Héritage et inclusion
- 5.1 Hériter d'un template
- 5.2 Inclure des templates
- 5.3 LEs macro
-
Les extensions TWIG
- 6.1 Créer des filtres
- 6.2 Créer des fonction
-
Pratique
Prérequis
- Connaissance de base en programmation web (HTML, CSS et PHP)
- Compréhension des concepts de base du modèle MVC (Modèle-Vue-Contrôleur)
- Connaissance sur la programmation orientée objet avec PHP
-
Familiarité avec le framework Symfony (concepts de base, installation, configuration)
-
Savoir créer et utiliser les contrôleur de symfony
Objectifs
- Comprendre le rôle des vues dans le modèle MVC (Modèle-Vue-Contrôleur) et leur importance dans les applications web Symfony.
- Utiliser les templates TWIG pour générer des pages web dynamiques et réutilisables.
- Manipuler des variables, des boucles et des conditions dans les templates TWIG pour rendre les vues plus interactives.
- Intégrer des données provenant des contrôleurs et des modèles dans les templates TWIG.
- Utiliser les filtres et les fonctions TWIG pour formater et manipuler les données dans les vues.
- Organiser et étendre les templates TWIG pour faciliter la maintenance et la réutilisation du code.
1. Introduction aux vues et Twig
1.1 Rôle des vues dans le modèle MVC
Dans l'architecture MVC, les vues sont responsables de la présentation des données aux utilisateurs.
Elles s'occupent de la mise en forme et de l'affichage des informations provenant du contrôleur.
Les vues sont généralement des fichiers de template qui contiennent du code HTML avec des éléments dynamiques.
Cela permet de séparer la logique de présentation du reste de l'application, ce qui facilite la maintenance et les modifications ultérieures.
Prenons l'exemple d'un site de commerce électronique.
Le contrôleur récupère les données des produits à afficher, puis les transmet à la vue correspondante.
La vue utilise ensuite ces données pour générer le code HTML qui présente les produits, y compris leur nom, leur description, leur prix, etc.
Ainsi, la vue est responsable de l'aspect visuel de la page, tandis que le contrôleur gère la récupération et le traitement des données.
1.2 Présentation des templates Twig
Symfony utilise le moteur de template Twig par défaut pour générer les vues.
Twig offre une syntaxe simple et expressive, facilitant la génération de pages web dynamiques.
Les templates Twig sont des fichiers texte qui contiennent du code Twig mélangé avec du code HTML.
Ils peuvent être étendus et réutilisés pour maintenir une structure cohérente dans les vues.
Avec Twig, vous pouvez manipuler des variables, effectuer des boucles, des conditions, des inclusions, des héritages de templates et bien plus encore.
1.3 Installation du package
Afin de pouvoir utiliser Twig avec un projet Symfony, il faut d'abord télécharger et installer les dépendances nécessaires :
composer require twig
Vos fichiers Twig devront être placés dans un dossier nommé templates
à la racine de votre projet.
1.4 Utiliser Twig
Commencez par créer un fichier dans le dossier templates
nommé accueil.twig
et ajoutez-y du HTML :
{# Dans '/tempales/accueil/accueil.twig' #}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/globals.css">
<link rel="stylesheet" href="/css/navbar.css">
<title>Titre du Site</title>
</head>
<body>
<header>
<nav class='nav-header'>
<a href="/">Accueil</a>
<a href="/profil">Profil</a>
<a href="/contact">Contact</a>
</nav>
</header>
<main>
<h1>Bienvenue !</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Nesciunt saepe blanditiis, excepturi id at amet reiciendis ad!
Voluptate dolor omnis nam, provident veritatis, iure inventore vel repellendus expedita tempore asperiores?
</p>
</main>
<footer>
<nav class='nav-footer'>
<a href="/">Accueil</a>
<a href="/profil">Profil</a>
<a href="/contact">Contact</a>
</nav>
</footer>
</body>
</html>
Maintenant, il nous faut retourner le rendu de ce Twig dans un contrôleur en utilisant la méthode render(string $nomVue)
:
<?php
// Dans le fichier /src/Controller/AccueilController.php
namespace App\Controller;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;
class AccueilController extends AbstractController {
#[Route('/', name: 'accueil', methods: ['GET'])]
public function index(Request $request): Response {
// Retourner le rendu d'un template Twig
return $this->render('accueil/accueil.twig');
}
}
2. Syntaxe de base de Twig
Twig utilise des balises pour marquer les différentes parties du code.
Voici quelques balises couramment utilisées :
{{ ... }}
: Utilisée pour afficher des variables ou le retour d'expressions.{% ... %}
: Utilisée pour les structures de contrôle telles que les boucles et les conditions.{# ... #}
: Utilisée pour les commentaires qui ne seront pas affichés dans la sortie finale.
2.1 Les variables
Nous pouvons créer des variables dans les templates Twig en utilisant les balises {% ... %}
et en précédant le nom de la variable par set
:
{% set variable = valeur %}
Twig prend en charge différents types de variables, tels que les chaînes de caractères, les nombres, les tableaux et les objets.
Pour afficher/lire des variables, vous pouvez utiliser {{ ... }}
:
{% set prenom = 'Samy' %}
{% set age = 30 %}
<h2>Bonjour {{ prenom }} !</h2>
<p>Votre âge est {{ age }}</p>
2.2 Les opérations
Twig prend en charge différentes opérations telles que les additions, les soustractions, la concaténation, etc.
Voici un exemple de concaténation avec l'opérateur ~
:
{% set prenom = 'Samy' %}
{% set nom = 'Djemai' %}
<h2>Bonjour {{ nom ~ ' ' ~ prenom }}</h2>
2.3 Envoyer des données dans une Twig
La plupart du temps, les données à afficher sont reçues depuis nos contrôleurs.
Symfony permet de passer des données aux vues en utilisant la méthode render()
du contrôleur.
Nous pouvons transmettre des variables individuelles, des tableaux associatifs ou des objets entiers tel que des entités.
<?php
// Dans le fichier /src/Controller/ProfilController.php
namespace App\Controller;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;
class ProfilController extends AbstractController {
#[Route('/profil', name: 'profil', methods: ['GET'])]
public function index(Request $request): Response {
// Variables à transmettre à la template :
$nom = 'Doe';
$prenom = 'John';
$notes = [
'math' => 12,
'physique' => 17,
'informatique' => 18,
'Chimie' => 8,
];
// Retourner le rendu d'un template Twig
return $this->render('profil/profil.twig', ['nom' => $nom, 'prenom' => $prenom, 'notes' => $notes]);
}
}
Dans cet exemple, nous transmettons les variables $nom
, $prenom
et $notes
à la vue.
Elles sont encapsulées dans un tableau associatif où les clés représentent les noms des variables dans le template et les valeurs correspondent aux données réelles.
Les données transmises seront accessibles dans le template à travers des variables.
{# Dans : /templates/profil/profil.twig #}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/globals.css">
<link rel="stylesheet" href="/css/navbar.css">
<title>Profil de {{ nom }}</title>
</head>
<body>
<header>
<nav class='nav-header'>
<a href="/">Accueil</a>
<a href="/profil">Profil</a>
<a href="/contact">Contact</a>
</nav>
</header>
<main>
<h1>Bonjour {{ prenom }} !</h1>
</main>
<footer>
<nav class='nav-footer'>
<a href="/">Accueil</a>
<a href="/profil">Profil</a>
<a href="/contact">Contact</a>
</nav>
</footer>
</body>
</html>
Dans cet exemple, nous utilisons des balises Twig telles que {{ }}
pour afficher des variables dont la valeur a été envoyée depuis le contrôleur.
3. Les filtres et les fonctions
3.1 Les filtres
Les filtres Twig permettent de formater et de manipuler les données affichées dans les templates.
Les filtres sont appliqués en utilisant le symbole |
:
{{ variable|filtre1|filtre2|filtre3 }}
Par exemple, il existe un filtre qui permet de mettre la première lettre d'une chaîne de caractères en majuscule.
Nous pouvons l'utiliser pour mettre en majuscule la première lettre du nom et du prénom :
<h2>Bonjour {{ nom|capitalize ~ ' ' ~ prenom|capitalize }}!</h2>
Un autre filtre permet de connaître la taille d'un tableau.
Nous pouvons l'utiliser pour afficher le nombre de notes reçues, par exemple :
<h3>Vous avez {{ notes|length }} notes.</h3>
Il existe de nombreux filtres intéressants.
Vous pouvez consulter la documentation officielle de Twig pour une liste complète des filtres disponibles et leurs utilisations détaillées.
Voici une liste de filtres populaires :
-
date
: Ce filtre permet de formater une date selon le format spécifié. Par exemple,{{ date|date('d/m/Y') }}
affichera la date au format jour/mois/année. -
number_format
: Ce filtre permet de formater un nombre en utilisant une séparation des milliers et une précision décimale. Par exemple,{{ price|number_format(2, ',', ' ') }}
formatera le prix avec deux décimales, une virgule comme séparateur décimal et un espace comme séparateur de milliers. -
length
: Ce filtre retourne la longueur d'une chaîne de caractères, d'un tableau ou d'une collection. Par exemple,{{ text|length }}
affichera le nombre de caractères dans la variabletext
. -
truncate
: Ce filtre permet de tronquer une chaîne de caractères à une longueur spécifiée. Par exemple,{{ text|truncate(50) }}
affichera les 50 premiers caractères de la variabletext
. -
upper
etlower
: Ces filtres permettent de convertir une chaîne de caractères en majuscules ou en minuscules. Par exemple,{{ 'text'|upper }}
afficheraTEXT
. -
join
: Ce filtre permet de joindre les éléments d'un tableau en utilisant un séparateur spécifié. Par exemple,{{ array|join(', ') }}
affichera les éléments du tableau séparés par des virgules et des espaces. -
default
: Ce filtre permet de définir une valeur par défaut si une variable est nulle ou non définie. Par exemple,{{ username|default('Guest') }}
affichera la valeur deusername
s'il est défini**, sinon afficheraGuest
. -
url_encode
eturl_decode
: Ces filtres permettent d'encoder ou de décoder une chaîne de caractères en utilisant l'encodage URL.
3.2 Les fonctions
Twig propose également des fonctions qui offrent des fonctionnalités supplémentaires.
Par exemple, il existe une fonction nommée date
qui retourne la date avec le format désiré :
{{ date('d/m/Y') }}
Twig propose de nombreuses autres fonctions qui offrent une gamme étendue de fonctionnalités pour manipuler, formater et afficher les données dans les templates.
Vous pouvez consulter la documentation officielle de Twig pour une liste complète des fonctions disponibles et leurs utilisations détaillées.
Voici quelques exemples de fonctions Twig couramment utilisées :
-
path
: Cette fonction permet de générer l'URL d'une route Symfony en utilisant son nom. Par exemple,{{ path('route_name') }}
générera l'URL correspondante à la route spécifiée. -
url
: Cette fonction est similaire àpath
, mais elle génère une URL absolue plutôt qu'une URL relative. Elle prend également en compte le schéma et le nom d'hôte de l'application Symfony. -
asset
: Cette fonction permet de générer l'URL d'un fichier statique (CSS, JavaScript, images, etc.) en utilisant le système de gestion des ressources de Symfony. Par exemple,{{ asset('css/style.css') }}
générera l'URL complète du fichier CSS. -
dump
: Cette fonction est utilisée pour déboguer les variables et afficher leur contenu. Par exemple,{{ dump(variable) }}
affichera les détails de la variable. -
range
: Cette fonction génère une séquence de nombres. Elle est souvent utilisée pour générer une boucle avec un nombre prédéfini d'itérations. Par exemple,{% for i in range(1, 5) %}{{ i }}{% endfor %}
générera les nombres de1
à5
. -
random
: Cette fonction génère un nombre aléatoire. Elle est souvent utilisée pour afficher des éléments aléatoires dans les templates. Par exemple,{{ random(1, 10) }}
générera un nombre aléatoire entre1
et10
.
4. Structures de contrôle
4.1 Les conditions
Vous pouvez également afficher un élément ou un autre en utilisant les conditions.
La syntaxe ressemble à ceci :
{% if condition %}
<p>Ce texte est affiché si la condition est vraie.</p>
{% else %}
<p>Ce texte est affiché si la condition est fausse.</p>
{% endif %}
Ou avec l'opérateur ternaire :
<p>La condition est {% condition ? 'vraie' : 'fausse' %}</p>
Nous pouvons par exemple l'utiliser pour tester si la taille du tableau de notes est supérieure à 0 :
{% if notes|length %}
<p>Afficher la liste de notes</p>
{% else %}
<p>Vous n'avez pas de notes pour l'instant</p>
{% endif %}
4.2 Les boucles
La plupart du temps, les données reçues depuis le contrôleur sont sous forme de tableau.
Twig nous offre un moyen simple d'itérer sur les éléments d'un tableau :
{% for cle, valeur in elements %}
{{ cle }}
{{ valeur }}
{% endfor %}
Par exemple, nous pouvons l'utiliser pour afficher la liste des matières et la note associée :
<table>
<thead>
<tr>
<th>Matiere</th>
<th>Note</th>
<th>Status</th>
</tr>
</thead>
<tbody>
{% for matiere, note in notes %}
<tr>
<td>{{ matiere|capitalize }}</td>
<td>{{ note }}</td>
<td>{{ note > 10 ? '✅ Validé' : '❌ Ajourné' }}</td>
</tr>
{% endfor %}
</tbody>
</table>
5. Composition de templates
5.1 L'héritage
Imaginons que nous ayons différentes pages suivant la même structure de base :
- Page d'accueil
{# Dans le template parent "accueil/accueil.twig" #}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/globals.css">
<link rel="stylesheet" href="/css/navbar.css">
<title>Page d'accueil</title>
</head>
<body>
<header>
<nav class="nav-header">
<a href={{ path('accueil')}}>Accueil</a>
<a href={{ path('profil')}}>Profil</a>
<a href={{ path('contact')}}>Contact</a>
</nav>
</header>
<main>
{# Contenu de la page d'accueil #}
<h1>Bienvenue !</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Nesciunt saepe blanditiis, excepturi id at amet reiciendis ad!
Voluptate dolor omnis nam, provident veritatis, iure inventore vel repellendus expedita tempore asperiores?
<p>
<section>
{% set prenom = 'Samy' %}
{% set nom = 'Djemai' %}
{% set age = 30 %}
<h2>Bonjour {{ nom ~ ' ' ~ prenom }}</h2>
<p>Votre âge est {{ age }}</p>
</section>
</main>
<footer>
<nav class="nav-footer">
<a href={{ path('accueil')}}>Accueil</a>
<a href={{ path('profil')}}>Profil</a>
<a href={{ path('contact')}}>Contact</a>
</nav>
</footer>
</body>
</html>
- Page de contact
{# Dans le template parent "contact/contact.twig" #}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/globals.css">
<link rel="stylesheet" href="/css/navbar.css">
<title>Page de contact</title>
</head>
<body>
<header>
<nav class="nav-header">
<a href={{ path('accueil')}}>Accueil</a>
<a href={{ path('profil')}}>Profil</a>
<a href={{ path('contact')}}>Contact</a>
</nav>
</header>
<main>
{# Contenu de la page de contact #}
<h1>Contactez-nous :</h1>
<form>
<input name='Email' placeholder='Entrez votre email'/>
<textarea name='message' placeholder='Votre message...'></textarea>
<button>Envoyer</button>
</form>
</main>
<footer>
<nav class="nav-footer">
<a href={{ path('accueil')}}>Accueil</a>
<a href={{ path('profil')}}>Profil</a>
<a href={{ path('contact')}}>Contact</a>
</nav>
</footer>
</body>
</html>
Les seules différences entre les deux pages sont le <title>
dans la balise <head>
et le contenu de la balise <main>
, tout le reste est identique.
Nous pouvons alors utiliser l'héritage pour créer un template de base en permettant la modification du <title>
et du <main>
.
Pour faire cela, nous commençons par créer ce template de base et utiliser des blocs (block
) pour indiquer quelles sont les parties pouvant contenir du contenu différent :
{# Dans le template parent "layout/base.twig" #}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% block styles %}
<link rel="stylesheet" href="/css/globals.css">
<link rel="stylesheet" href="/css/navbar.css">
{% endblock %}
<title>
{% block titrePage %}Titre Site{% endblock %}
</title>
</head>
<body>
<header>
<nav class="nav-header">
<a href={{ path('accueil')}}>Accueil</a>
<a href={{ path('profil')}}>Profil</a>
<a href={{ path('contact')}}>Contact</a>
</nav>
</header>
<main>
{% block contenuMain %}{% endblock %}
</main>
<footer>
<nav class="nav-footer">
<a href={{ path('accueil')}}>Accueil</a>
<a href={{ path('profil')}}>Profil</a>
<a href={{ path('contact')}}>Contact</a>
</nav>
</footer>
</body>
</html>
Ici, nous avons créé deux blocs modifiables :
titrePage
: Partie pour le titre du site, si elle n'est pas modifiée dans les templates enfants, elle sera par défautTitre Site
.contenuMain
: Partie principale de la page, vide par défaut.
Maintenant, il est possible d'hériter de ce template dans des templates enfants en utilisant la balise extends
.
Dans le template accueil.twig
:
{# Dans "/templates/accueil/accueil.twig" #}
{% extends 'base.twig' %}
{% block contenuMain %}
<h1>Bienvenue !</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Nesciunt saepe blanditiis, excepturi id at amet reiciendis ad!
Voluptate dolor omnis nam, provident veritatis, iure inventore vel repellendus expedita tempore asperiores?
</p>
<section>
{% set prenom = 'Samy' %}
{% set nom = 'Djemai' %}
{% set age = 30 %}
<h2>Bonjour {{ nom ~ ' ' ~ prenom }}</h2>
<p>Votre âge est {{ age }}</p>
</section>
{% endblock %}
Et dans le template contact.twig
:
{# Dans "/templates/contact/contact.twig" #}
{% extends 'base.twig' %}
{% block titrePage %}Contact{% endblock %}
{% block contenuMain %}
<h1>Contactez-nous :</h1>
<form>
<input name='Email' placeholder='Entrez votre email'/>
<textarea name='message' placeholder='Votre message...'></textarea>
<button>Envoyer</button>
</form>
{% endblock %}
Et dans le template profil.twig
:
{# Dans "/templates/profil/profil.twig" #}
{% extends 'layout/base.twig' %}
{% block styles %}
{{ parent() }}
<link rel="stylesheet" href="/css/notes.css">
{% endblock %}
{% block titrePage %}Profil de {{ nom }}{% endblock %}
{% block contenuMain %}
<h1>Bonjour {{ nom ~ ' ' ~ prenom }} !</h1>
<table>
<thead>
<tr>
<th>Matiere</th>
<th>Note</th>
<th>Statut</th>
</tr>
</thead>
<tbody>
{% if notes|length > 0 %}
{% for matiere, note in notes %}
<tr>
<td>{{ matiere|capitalize }}</td>
<td>{{ note }}</td>
<td>{{ note > 10 ? '✅ Validé' : '❌ Ajourné' }}</td>
</tr>
{% endfor %}
{% endif %}
</tbody>
</table>
{% endblock %}
5.2 Inclusion
Twig permet d'inclure des fichiers partiels dans d'autres templates à l'aide de la balise include
.
Cela est très utile pour séparer nos pages en différents morceaux et réduire leur taille.
Pour l'exemple, notre page de profil pourrait devenir très large plus tard si nous y ajoutons du contenu.
Nous allons séparer le tableau des notes dans un autre fichier, puis l'inclure dans le fichier profil.twig
:
{# Dans la template "/profil/notes.twig" #}
<table>
<thead>
<tr>
<th>Matiere</th>
<th>Note</th>
<th>Statut</th>
</tr>
</thead>
<tbody>
{% if notes|length > 0 %}
{% for matiere, note in notes %}
<tr>
<td>{{ matiere|capitalize }}</td>
<td>{{ note }}</td>
<td>{{ note > 10 ? '✅ Validé' : '❌ Ajourné' }}</td>
</tr>
{% endfor %}
{% endif %}
</tbody>
</table>
Puis, dans le fichier profil.html.twig
:
{# Dans "/templates/profil.twig" #}
{% extends 'layout/base.twig' %}
{% block styles %}
{{ parent()}}
<link rel="stylesheet" href="/css/notes.css">
{% endblock %}
{% block titrePage %}Profil de {{ nom }}{% endblock %}
{% block contenuMain %}
<h1>Bonjour {{ nom|capitalize ~ ' ' ~ prenom|capitalize }}!</h1>
<h2>Vous avez {{ notes|length }} notes.</h2>
{% if notes|length %}
{% include 'profil/notes.twig' %}
{% else %}
<p>Vous n'avez pas de notes pour l'instant</p>
{% endif %}
{% endblock %}
5.3 Les macros
Les macros sont des morceaux de code réutilisables dans les templates Twig.
Elles permettent de réduire la duplication de code en encapsulant des fonctionnalités couramment utilisées.
Elles agissent comme des fonctions et peuvent recevoir des paramètres.
Voici un exemple de macro :
{% macro maMacro(param1, param2) %}
{# Code à exécuter #}
{% endmacro %}
{{ maMacro('valeur1', 'valeur2') }}
{{ maMacro('valeur3', 'valeur4') }}
Par exemple, nous pouvons utiliser des macros pour éviter de dupliquer notre navbar dans l'en-tête et le pied de page.
Notre macro recevra le nom de la classe à appliquer à la balise <nav>
pour la rendre plus flexible :
{# Dans '/templates/layout/layout.macro.twig' #}
{% macro navbar(navClasse) %}
<nav class="{{ navClasse }}">
<a href={{ path('accueil')}}>Accueil</a>
<a href={{ path('profil')}}>Profil</a>
<a href={{ path('contact')}}>Contact</a>
</nav>
{% endmacro %}
Maintenant, vous pouvez utiliser la macro navbar
dans le fichier base.html.twig
pour inclure la navigation à différents endroits sans dupliquer le code
.
Dans le template de base :
{# Dans le template parent "templates/layout/base.twig" #}
{% import 'layout/layout.macro.twig' as layout %}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% block styles %}
<link rel="stylesheet" href="/css/global.css">
<link rel="stylesheet" href="/css/navbar.css">
{% endblock %}
<title>
{% block titrePage %}Titre Site{% endblock %}
</title>
</head>
<body>
<header>
{{ layout.navbar('nav-header') }}
</header>
<main>
{% block contenuMain %}{% endblock %}
</main>
<footer>
{{ layout.navbar('nav-footer') }}
</footer>
<body>
</html>
6. Les extensions
Les extensions Twig permettent d'étendre les fonctionnalités de Twig en ajoutant des filtres personnalisés, des fonctions et des tests.
Dans notre exemple, nous allons créer une extension pour gérer la moyenne d'un élève :
Les extensions sont des classes, nous allons la définir dans le fichier /src/Twig/MoyenneExtension.php
:
// src/Twig/MoyenneExtension.php
namespace App\Twig;
use Twig\Extension\AbstractExtension;
class MoyenneExtension extends AbstractExtension
{
public function getFilters()
{
// Retourner les filtres
return [];
}
public function getFunctions()
{
// Retourner les fonctions
return [];
}
}
Pour utiliser cette extension, vous devez vous assurer que vous avez correctement configuré votre application Symfony pour charger les extensions Twig personnalisées.
6.2 Créer un filtre
Nous allons créer un filtre permettant de calculer la moyenne d'un tableau de nombres :
<?php
// src/Twig/MoyenneExtension.php
namespace App\Twig;
use Twig\Extension\AbstractExtension;
use Twig\TwigFilter;
class MoyenneExtension extends AbstractExtension {
public function getFilters() {
// Retourner le filtre 'moyenne' lié à la fonction 'calculerMoyenne'
return [
new TwigFilter('moyenne', [$this, 'calculerMoyenne']),
];
}
public function getFunctions() {
return [];
}
// Filtre pour calculer la moyenne
public function calculerMoyenne($nombres) {
return array_sum($nombres) / count($nombres);
}
}
Vous pouvez maintenant l'utiliser pour afficher la moyenne des notes :
{# Dans la template parent "/profil/notes.html.twig" #}
<table>
<thead>
<tr>
<th>Matière</th>
<th>Note</th>
<th>Statut</th>
</tr>
</thead>
<tbody>
{# Code précédent pour afficher les notes... #}
<tr>
{% set moyenne = notes|moyenne %}
<td><strong>Moyenne</strong></td>
<td>{{ moyenne }}</td>
<td>{{ moyenne > 10 ? '✅ Validé' : '❌ Ajourné' }}</td>
</tr>
</tbody>
</table>
6.3 Créer une fonction
Nous allons ajouter une fonction permettant de formatter la moyenne en ne laissant que deux nombres derrière la virgule et de changer le séparateur .
par une ,
:
// src/Twig/MoyenneExtension.php
namespace App\Twig;
use Twig\Extension\AbstractExtension;
use Twig\TwigFilter;
use Twig\TwigFunction;
class MoyenneExtension extends AbstractExtension
{
// Code précédent pour les filtres
public function getFunctions()
{
return [
new TwigFunction('format', [$this, 'formatNombre']),
];
}
// Fonction pour formater un nombre
public function formatNombre($nombre)
{
return number_format($nombre, 2, ',', '.');
}
}
Vous pouvez maintenant l'utiliser pour formater la moyenne des notes :
{# Dans la template parent "/profil/notes.html.twig" #}
<tr>
{% set moyenne = notes|moyenne %}
<td><strong>Moyenne</strong></td>
<td>{{ format(moyenne) }}</td>
<td>{{ moyenne > 10 ? '✅ Validé' : '❌ Ajourné' }}</td>
</tr>
Conclusion
Ce cours sur les vues avec Twig dans Symfony 6 nous a permis d'explorer en détail les concepts et les fonctionnalités clés nécessaires pour créer des interfaces utilisateur dynamiques et esthétiques dans le Framework Symfony.
Nous avons commencé par comprendre le rôle des vues dans le modèle MVC et comment les templates Twig sont utilisés pour générer des pages web dynamiques.
Nous avons appris à créer et manipuler des variables dans les templates Twig pour rendre nos vues plus interactives.
Ensuite, nous avons exploré les filtres et les fonctions Twig, qui nous ont permis de formater et de manipuler les données affichées dans nos templates.
Nous avons découvert une multitude de filtres et de fonctions prédéfinis, ainsi que la possibilité de créer nos propres filtres et fonctions personnalisés.
Nous avons également abordé les structures de contrôle Twig, telles que les conditions et les boucles, qui nous ont permis de contrôler l'affichage des éléments en fonction de certaines conditions ou d'itérer sur des listes de données
Nous avons exploré l'inclusion de fichiers et l'héritage de templates, qui nous ont permis de réutiliser du code commun et de maintenir une structure cohérente dans nos vues.
Nous avons également découvert les macros, qui nous ont permis de créer des morceaux de code réutilisables dans nos templates.
En combinant toutes ces connaissances, vous serez en mesure de créer des vues flexibles, réutilisables et esthétiques pour vos applications Symfony.
Voici des liens pour approfondir et renforcer vos connaissances sur les Twig:
- La documentation officielle de Twig pour comprendre en détail toutes les fonctionnalités et les possibilités offertes par Twig.
- Symfony Casts est une plateforme de formation en ligne qui propose des tutoriels vidéo sur Symfony.
- Le site web officiel de Symfony contient de nombreux tutoriels et guides sur différents sujets liés à Symfony, y compris Twig.
Aller plus loin
Dans les prochain cours, nous allons aborder les formaulaires avec Symfony 6.
Les formulaires jouent un rôle essentiel dans les applications web, permettant aux utilisateurs d'interagir avec le système en saisissant et en soumettant des données.
Commentaires

Symfony 6: Initiation
Au cours de cette série, vous découvrirez les concepts fondamentaux de Symfony 6, tels que la gestion des routes, la manipulation des bases de données, l'authentification et l'autorisation, la création de formulaires, ainsi que l'intégration de composants tiers populaires tels que Doctrine et Twig.
PHP
Initiation
Bases
Web
Programmation
Album

Symfony 6: Introduction
Ce support de cours vous fournira une introduction complète au Framework Symfony.
Vous découvrirez comment installer et configurer Symfony sur votre machine, ainsi que les principes fondamentaux, son architecture et la manière de configurer votre environnement de développement.
PHP
Symfony
Initiation
Bases
Web
Programmation
Introduction

Symfony 6: Les Contrôleurs
Ce support de cours vous introduira aux contrôleurs dans le contexte du développement web avec le Framework Symfony.
Vous apprendrez comment créer, configurer et utiliser des contrôleurs pour interagir avec les utilisateurs, traiter les données et générer des réponses dynamiques.
PHP
Symfony
Initiation
Bases
Contrôleur
Web
Programmation
Introduction

Symfony 6: ORM Doctrine
Ce support de cours mettra l'accent sur la gestion des bases de données avec Symfony.
Vous apprendrez à configurer et à utiliser Doctrine, l'ORM (Object-Relational Mapping) de Symfony, pour interagir avec votre base de données.
PHP
Symfony
Initiation
Bases
ORM
Doctrine
Web
Programmation
Serveur

Symfony 6: Les Formulaires
Les formulaires jouent un rôle essentiel dans les applications web, permettant aux utilisateurs d'interagir avec le système en saisissant et en soumettant des données.
En comprenant les concepts et les fonctionnalités des formulaires dans Symfony 6, vous serez en mesure de développer des applications web dynamiques et interactives.
PHP
Symfony
Initiation
Bases
Formulaires
Validation
Web
Programmation
Serveur

Symfony 6: Authentification
Ce cours d'initiation à la programmation avec Symfony 6 se concentre sur l'authentification et l'autorisation, deux aspects essentiels de la sécurité des applications web.
Vous apprendrez à mettre en place un système d'authentification sécurisé pour gérer l'accès des utilisateurs à votre application et à contrôler leurs permissions.
PHP
Symfony
Initiation
Bases
Formulaires
Authentification
Web
Programmation
Serveur