• 12 heures
  • Difficile

Ce cours est visible gratuitement en ligne.

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 26/08/2024

Créez des pages dynamiques réutilisables avec Twig

 

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.

Exemple d'utilisation de Twig
Exemple d'utilisation de Twig

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 :

Affichage de l'application
Affichage de l'application

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 !

Et si vous obteniez un diplôme OpenClassrooms ?
  • Formations jusqu’à 100 % financées
  • Date de début flexible
  • Projets professionnalisants
  • Mentorat individuel
Trouvez la formation et le financement faits pour vous
Exemple de certificat de réussite
Exemple de certificat de réussite