Découvrez le moteur de templating Twig
Nous avons les controllers, nous avons les routes, nous renvoyons les pages web. Il est temps d’apprendre à personnaliser notre affichage grâce au moteur de templating Twig. Cela nous permettra de créer une base de design pour l’application Biblios, que nous pourrons réutiliser sur toutes les pages.
Doucement, doucement ! C’est quoi déjà un “moteur de templating” ?
Effectivement, ça fait beaucoup de nouveaux termes !
Tout d’abord, le moteur de templating. Le premier rôle d’un moteur de templating est de nous permettre de créer des modèles de pages (“templates”) dans lesquels nous pourrons insérer nos données de manière dynamique, en réagissant aux requêtes du client. Par exemple, une page unique dans laquelle on pourra afficher n’importe quel billet de blog que le client aura demandé.
Twig est un moteur de templating. Il va donc nous permettre de créer et d’afficher des templates complexes, contenant des variables, des boucles, des conditions, et aussi de mutualiser toutes les parties communes de nos pages grâce entre autres à un système d’héritage très performant.
Twig fait partie de l’écosystème Symfony, c’en est même une librairie officielle. Vous pouvez bien sûr choisir d’utiliser un autre moteur de templating avec Symfony (c’était chose courante par le passé), mais ce serait dommage de ne pas profiter de sa facilité d’utilisation et de sa souplesse.
Apprenez la syntaxe de Twig
La première chose à savoir, c’est que Twig ne s’utilise pas seul, mais en supplément d’un autre langage. Cet autre langage est habituellement HTML, ce qui veut dire que vos fichiers contiendront un mélange de HTML et de Twig.
Mais c’est pas un peu bizarre ça ? Les fichiers doivent être illisibles pour les humains !
Pas du tout, les deux syntaxes se mélangent assez facilement, et on prend vite l’habitude. De plus, grâce à Twig, nous pouvons découper nos pages et les composer, ce qui nous permet d’avoir plusieurs petits fichiers assez lisibles. Par exemple, si vous avez créé au chapitre précédent un MainController , ouvrez le fichier templates/main/index.html.twig .
Vous pouvez voir au passage comment la syntaxe de Twig fonctionne. On peut résumer la base de cette manière :
{# commenter quelque chose #}
{% faire quelque chose %}
{{ afficher quelque chose }}Par exemple, dans le fichier que vous avez ouvert, vous pouvez voir qu’une variable controller_name est affichée, et que des balises {% block %} semblent délimiter du code HTML.
{% extends 'base.html.twig' %}
{% block title %}Hello MainController!{% endblock %}
{% block body %}
<style>
.example-wrapper { margin: 1em auto; max-width: 800px; width: 95%; font: 18px/1.5 sans-serif; }
.example-wrapper code { background: #F5F5F5; padding: 2px 6px; }
</style>
<div class="example-wrapper">
<h1>Hello {{ controller_name }}! ✅</h1>
This friendly message is coming from:
<ul>
<li>Your controller at <code><a href="{{ '/home/benjamin/Dev/sl/biblios/src/Controller/MainController.php'|file_link(0) }}">src/Controller/MainController.php</a></code></li>
<li>Your template at <code><a href="{{ '/home/benjamin/Dev/sl/biblios/templates/main/index.html.twig'|file_link(0) }}">templates/main/index.html.twig</a></code></li>
</ul>
</div>
{% endblock %}D’accord, mais puisque vous en parlez, c’est quoi exactement ?
Ce système, c’est la base de l’héritage de templates dans Twig, ce que nous allons voir tout de suite.
Gérez des templates de page et de fragment
Regardez la première ligne du fichier.
{% extends 'base.html.twig' %}Cette ligne indique que notre template en étend un autre. Vous n’avez pas manqué de remarquer que beaucoup de choses manquent dans ce fichier pour en faire une page HTML complète. C’est dans le fichier base.html.twig que vous trouverez toutes ces informations, qui seront donc communes à toutes les pages.
Et comment ça se passe, du coup ?
Regardez dans le fichier base.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}Welcome!{% endblock %}</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text></svg>">
{% block stylesheets %}
{% endblock %}
{% block javascripts %}
{% block importmap %}{{ importmap('app') }}{% endblock %}
{% endblock %}
</head>
<body>
{% block body %}{% endblock %}
</body>
</html>Il comporte toutes les balises HTML standard et la structure de vos pages. Et au milieu, des balises {% block %} , vides pour la plupart. Chaque bloc a un nom, et vous trouverez certains blocs portant le même nom dans votre fichier index.html.twig .
À chaque fois que vous demanderez l’affichage d’un template qui étend base.html.twig , Twig ira chercher cette base, et remplacera les blocs qui s’y trouvent par le contenu des blocs portant le même nom.
Ce fonctionnement va vous permettre de créer un layout, c'est-à-dire une base de design unique pour tout votre site. Vous pouvez en profiter pour mettre dans votre base tout le CSS qui sera utilisé sur votre site. Le fichier CSS par défaut se trouve dans assets/styles/app.css , il a été créé automatiquement lors de l’installation. N’hésitez pas à faire des tests en changeant la couleur de background, par exemple.
Gérez vos fichiers de ressources avec les ImportMaps
Si vous le souhaitez, vous pouvez laisser un nouveau composant de Symfony gérer pour vous l’import des fichiers JavaScript et CSS. Ce composant s’appelle AssetMapper. Ce composant vous permet de faire le lien entre vos fichiers et vos templates Twig, très facilement. Il tire parti d’un nouveau type HTML introduit récemment, les importmaps.
Ces dernières ont été ajoutées à HTML pour permettre aux développeurs d’inclure des librairies JavaScript complètes dans leurs pages sans s’encombrer des outils habituels comme Webpack, et sans la lourdeur qui va parfois avec. Ajoutez simplement l’adresse d’une dépendance, et elle est ajoutée à votre page !
Concernant AssetMapper, ce composant est installé par défaut avec Symfony lorsque vous utilisez l’option --webapp (ce que nous avons fait), vous n’avez donc rien de plus à faire à part ajouter des dépendances. Une commande spécifique existe pour ça, et elle fait tout à votre place.
Par exemple, si vous souhaitez ajouter Bootstrap (qui sera utilisé dans ce cours), ouvrez un terminal dans le dossier racine de votre application et tapez la commande suivante :
symfony console importmap:require bootstrap
Cette commande va ajouter Bootstrap à la liste de vos imports JavaScript qui seront ajoutés dans votre template de base, et gérer la dépendance pour vous. Pour ajouter le CSS associé et pouvoir l’utiliser dans vos pages, allez dans le fichier assets/app.js et ajoutez la ligne suivante juste avant import ‘./styles/app.css’; :
import './vendor/bootstrap/dist/css/bootstrap.min.css';Allez dans le navigateur recharger votre page, vous noterez un changement instantané !
Renvoyez un template depuis un controller
Et une fois que j’ai préparé mes templates, que j’ai fait mon héritage et tout, je fais quoi ?
Regardez de nouveau vos controllers. Il est temps de revenir sur la méthode $this->render() . Cette méthode est un des raccourcis qui sont fournis par la classe AbstractController . Le premier argument que vous lui passez est le chemin d’un template (relatif au dossier templates ), le second, optionnel, est un tableau des variables que vous souhaitez rendre disponibles dans ce template (comme controller_name dans nos premiers controllers).
À vous de jouer
Contexte
Maintenant que vous connaissez tout ça, il est temps de mettre en pratique. La page d'accueil du site mérite un peu mieux que le template par défaut fourni par MakerBundle, et nous allons donc la changer.
Consignes
Vous allez reprendre vos fichiers templates/base.html.twig et templates/main/index.html.twig . Il est temps de leur offrir un ravalement de façade !
Utilisez ce template Bootstrap pour refaire le design de notre application.
Enfin, vous devez garder les blocs Twig. Gardez à l’esprit que la barre de navigation doit se trouver sur toutes les pages.
Vous mettrez le contenu textuel suivant dans votre page :
Biblios
Catalogue en ligne de la médiathèque de Trifouillis-les-Oies
Biblios: qu'est-ce que c'est ?
Biblios est la plateforme officielle de consultation du catalogue de la médiathèque de Trifouillis-les-Oies. Explorez notre collection avec une recherche efficace, vérifiez la disponibilité des ouvrages en temps réel, et effectuez des réservations en toute simplicité. Biblios s'engage pour faciliter l'accès à la culture et promouvoir la richesse de notre patrimoine littéraire.
Fonctionnalités clés :
Recherche avancée de livres
Consultation en temps réel du statut des ouvrages (disponible, emprunté, indisponible)
Affichage détaillé des informations sur les livres
Processus de réservation simplifiéUne fois que vous avez terminé, l’application devrait ressembler à ça :
En résumé
Un moteur de template nous permet de dynamiser nos pages et de les composer plus facilement.
Twig est le moteur de template officiel de Symfony.
Grâce à une syntaxe simple, Twig nous permet de bénéficier d’un système d’héritage performant pour mutualiser notre design.
Le composant AssetMapper et les importmaps HTML nous permettent de gérer nos assets JavaScript et CSS sans s’encombrer des outils habituels.
Vous avez désormais un site statique, même s’il ne dispose pas de beaucoup de pages. Il est donc temps de dynamiser un peu tout ça avec des données ! Mais avant cela, je vous invite à tester vos connaissances dans le quiz clôturant cette première partie !
