Le moteur de template Twig

Sommaire

1- Objectifs
2- Présentation
3- Symfony, Composer et environnement de travail
4- Qu’est-ce qu’un moteur de templates ?
5- Utilisation et syntaxe de Twig
6- Héritage avec Twig
7- Exemple
8- Activité
8.1.1- Sommaire du cours Symfony

Le moteur de template Twig

Objectifs

Connaitre Twig Templates

Présentation

Comme nous le savons, la plupart des applications Web suivent la même mise en page sur toutes les pages, la meilleure approche consiste donc à définir un modèle principal dans lequel nous pouvons placer tout le passe-partout.
Symfony propose un système de mise en page flexible et puissant grâce à son moteur de template par défaut, Twig.
Contrairement à d’autres moteurs de templates PHP populaires, Twig offre une syntaxe simple et expressive tout en permettant l’utilisation de PHP dans les vues de manière sécurisée.
Toutes les vues Twig sont compilées en code PHP simple et mises en cache jusqu’à ce qu’elles soient modifiées, ce qui signifie que Twig n’ajoute pratiquement aucune surcharge à votre application.
Contrairement aux layouts de contrôleurs, Twig est basé sur l’héritage et les blocs de templates.
Les fichiers de vue Twig utilisent l’extension .twig et sont généralement stockés dans le répertoire templates.
Un site web partage souvent des éléments en commun entre ses pages HTML :

un en-tête, un logo représentant la marque ou le service, des balises meta (charset, viewport, etc.)
un menu pour naviguer facilement entre les pages
un pied de page
une feuille de style, sous la forme d’une référence à un fichier ou d’un code CSS directement intégré en texte
des scripts variés pour tracer les utilisateurs ou améliorer l’expérience (Google Analytics, Intercom, Hotjar, etc.)
etc.

Symfony, Composer et environnement de travail

Avant de pouvoir s’atteler à comprendre ce qu’est un moteur de template et comment l’installer, il est important de comprendre qu’avec Symfony, il faut installer Composer.
Composer est un outil de gestion de dépendances qui permet aux développeurs de gérer les librairies et les dépendances de leur projet de manière simple et efficace.
Il a été créé pour résoudre les problèmes courants liés à la gestion des dépendances dans les projets PHP, et est devenu un outil incontournable pour les développeurs PHP.
Symfony a contribué à l’amélioration de Composer en ajoutant des recettes, qui sont des scripts PHP utilisés pour simplifier l’installation et l’intégration de certaines dépendances, comme Twig.
Si vous n’avez pas installé Composer, veuillez vous référer au site officiel de Composer afin de suivre la procédure d’installation car il vous sera nécessaire.
Vous pouvez choisir bien sûr l’IDE (environnement de développement intégré) que vous souhaitez. Par exemple, Visual Studio Basic vous permettra d’appeler facilement le terminal et de pointer immédiatement sur le bon dossier.

Qu’est-ce qu’un moteur de templates ?

Le rôle d’un moteur de templates est principalement de vous aider dans la lisibilité et la logique d’une application. Ce que fait précisément un moteur de templates, c’est de rassembler le code pour l’affichage (HTML, CSS et Javascript voir Sass) avec le code PHP de l’application.
Imaginez que vous avez un modèle de lettre standard que vous utilisez pour écrire des lettres à différentes personnes. Ce modèle contient des variables telles que le nom de la personne à qui la lettre est destinée, l’adresse de cette personne et le contenu de la lettre. Chaque fois que vous voulez écrire une lettre, vous remplissez ces variables avec les valeurs appropriées et le modèle génère une lettre personnalisée. C’est un peu comme si vous aviez un moteur de templates pour générer des lettres. En informatique, un moteur de templates fonctionne de manière similaire en remplaçant les variables prédéfinies dans un modèle de texte par leurs valeurs pour générer du contenu.
Ce que l’on souhaite, c’est de pouvoir à la fois séparer le HTML du code PHP, et à la fois pouvoir générer du code dynamique et insérer quelques conditions et variables issues de la base de données.
C’est tout l’intérêt d’un moteur de templates comme Twig qui va permettre de regrouper dans une page le HTML afin de ne pas avoir des centaines de balises HTML qui gêneraient la lisibilité du code PHP ainsi que l’architecture de la POO qui consiste à tout transformer en objet. Mais aussi de pouvoir intégrer grâce à une syntaxe simple, qui ne demande pas de connaître le PHP, quelques conditions et données.

Utilisation et syntaxe de Twig

Twig peut générer du texte de n’importe quel format textuel (HTML, XML, CSV, Latex, etc.). Dans ce cours, nous partirons sur des exemples basés sur le HTML, qui représentent la plus grande utilisation de Twig.
Comme nous l’avons vu précédemment, la force d’un moteur de templates comme Twig se situe dans le fait de pouvoir insérer des variables, des expressions et des conditions PHP dans du HTML. Notez la syntaxe particulière qui est nativement supportée par Twig afin de nous apporter cette puissance :

« {{ … }} » : permet l’affichage d’une expression
« {% … %} » : exécute une action
« {# … #} » : permet d’ajouter des commentaires

Héritage avec Twig

Lʼhéritage est une partie particulièrement intéressante de Twig. Il est possible de créer un modèle ou un squelette qui contient tous les éléments communs aux différentes pages de lʼapplication. Pour cela, il faut créer des blocs et leur donner un nom.

Blade Templates

Généralement, une vue peut étendre une autre, c’est un concept d’héritage. Par exemple, dans une application Symfony, nous avons un template de base.
Ce template définit la structure globale des pages et est déclaré comme parent par les autres vues : {% extends 'layouts/default.html.twig' %}
L’utilisation de {% extends %} vous permet d’étendre un template qui définit ses propres blocks. Un template que vous pouvez étendre définira ses propres blocks en utilisant {% block %}, dans lesquels vous pouvez ensuite insérer vos propres éléments dans votre fichier de vue.
Dans le template, nous réservons un emplacement ({% block %}) pour que les vues enfants puissent placer leur contenu :
Un autre avantage de l’utilisation de {% extends %} est l’héritage en cascade. Vous pouvez fournir un template de base, puis un autre template enfant qui étend le premier, produisant ensuite ses propres blocks. Vous pouvez ensuite étendre ce template enfant.

<main class="section">
    <div class="container">
        {% block content %}{% endblock %}
    </div>
</main>

Exemple

template.html.twig

<html>
    <body>
        {% block header %}{% endblock %}
        {% block content %}{% endblock %}
        {% block footer %}{% endblock %}
    </body>
</html>

view-one.html.twig

{% extends 'template.html.twig' %}

{% block header %}
    View one's header
{% endblock %}

{% block content %}
    View one's content
{% endblock %}

{% block footer %}
    View one's footer
{% endblock %}

Activité

Étape 1: Créez un nouveau dossier « layout » dans le répertoire /templates/.
Étape 2: Créez un nouveau fichier « master.html.twig » dans le répertoire /templates/layout/.
Étape 3: Copiez le code suivant dans le fichier « master.html.twig » que nous avons créé.

<html>
    <head>
        <title>App Name - {% block title %}{% endblock %}</title>
    </head>
    <body>
        {% block sidebar %}
            This is the master sidebar.
        {% endblock %}
        <div class="container">
            {% block content %}{% endblock %}
        </div>
    </body>
</html>

Ici, dans le modèle principal ci-dessus –

{% block title %}{% endblock %} est utilisé pour afficher la valeur du titre.
{% block sidebar %}{% endblock %} est utilisé pour définir une section nommée sidebar.
{% block content %}{% endblock %} est utilisé pour afficher le contenu principal.

Extension de la mise en page principale

Nous allons maintenant vous montrer comment étendre la mise en page principale que nous venons de créer.
Étape 1: Créez un nouveau fichier de vue page.html.twig dans /templates/
Étape 2: Copiez le code suivant dans le fichier page.html.twig

<!-- Chemin: /templates/page.html.twig -->
{% extends 'layout/master.html.twig' %}

{% block title %}Page Title{% endblock %}

{% block sidebar %}
    {{ parent() }}
    <p>This is appended to the master sidebar.</p>
{% endblock %}

{% block content %}
    <p>This is my body content.</p>
{% endblock %}

Ici, dans la page ci-dessus :

{% extends ‘layout/master.html.twig’ %} étend la mise en page principale.
{% block title %}Page Title{% endblock %} définit la valeur de la section de titre.
{% block sidebar %}{% endblock %} définit une section de barre latérale dans la page enfant de la disposition principale.
{{ parent() }} affiche le contenu de la section de barre latérale, définie dans la disposition principale.
{% block content %}{% endblock %} définit la section de contenu.

Étape 3: Ouvrez config/routes.yaml et configurez la route comme suit :

page:
    path: /page
    controller: App\Controller\PageController::index

Étape 4: Créez un contrôleur Symfony nommé PageController et ajoutez une méthode index qui rendra la vue :

namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;

class PageController extends AbstractController
{
    /**
     * @Route("/page", name="page")
     */
    public function index(): Response
    {
        return $this->render('page.html.twig');
    }
}

Étape 5: Ouvrez maintenant l’URL suivante dans le navigateur pour voir la sortie :
http://localhost:8000/page

Symfony

Le moteur de template Twig

Le moteur de template Twig

Objectifs

Présentation

Symfony, Composer et environnement de travail

Qu’est-ce qu’un moteur de templates ?

Utilisation et syntaxe de Twig

Héritage avec Twig

Exemple

Activité

Sommaire du cours Symfony

Créer une méthode de contrôleur Symfony

Comprendre le main.dart

Symfony

Le moteur de template Twig

Objectifs

Présentation

Symfony, Composer et environnement de travail

Qu’est-ce qu’un moteur de templates ?

Utilisation et syntaxe de Twig

Héritage avec Twig

Exemple

Activité

Sommaire du cours Symfony

Créer une méthode de contrôleur Symfony

Comprendre le main.dart

You may also like

Création d’un formulaire de recherche avec Symfony

Opérations CRUD dans Symfony 3-3

Opérations CRUD dans Symfony 2-3