Pourquoi utiliser un moteur de templates comme Twig ?

Dans l'étape précédente, nous avons généré du HTML directement depuis notre contrôleur PHP. Bien que cela fonctionne pour des pages très simples, cette approche devient rapidement ingérable et difficile à maintenir pour des applications plus complexes. Le code PHP se mélange au HTML, rendant la lecture, la modification et la collaboration (par exemple, avec des intégrateurs web) compliquées.

C'est là qu intervient un moteur de templates. Symfony intègre par défaut Twig, un moteur de templates puissant, flexible et sécurisé pour PHP. Twig permet de séparer clairement la logique applicative (dans les contrôleurs PHP) de la logique de présentation (dans les fichiers templates Twig).

Les principaux avantages de l'utilisation de Twig sont :

• Clarté et maintenabilité : Le code HTML est plus propre et plus facile à lire car il n'est pas entremêlé de blocs PHP complexes.
• Sécurité : Twig inclut par défaut un échappement automatique des variables, ce qui aide à prévenir les failles de sécurité XSS (Cross-Site Scripting).
• Fonctionnalités puissantes : Twig offre des structures de contrôle (boucles, conditions), l'héritage de templates, l'inclusion de fragments, des filtres et des fonctions pour manipuler les données, et bien plus encore.
• Concision : La syntaxe de Twig est souvent plus concise que l'équivalent en PHP pur pour les tâches de templating.
• Cache : Twig compile les templates en code PHP optimisé pour de meilleures performances.

Utiliser Twig est une bonne pratique fondamentale dans le développement Symfony. Il permet de construire des interfaces utilisateur riches et dynamiques de manière structurée et efficace.

Créer votre premier fichier template Twig

Les fichiers templates Twig sont généralement stockés dans le répertoire templates/ à la racine de votre projet Symfony. Il est courant d'organiser ces templates dans des sous-dossiers correspondant aux contrôleurs ou aux sections de votre site.

Pour notre page "A Propos", qui est gérée par StaticPageController, créons un sous-dossier static_page/ dans templates/. Ensuite, à l'intérieur de templates/static_page/, créez un nouveau fichier nommé about.html.twig.

Le chemin complet de notre template sera donc : templates/static_page/about.html.twig.

Voici le contenu que nous pouvons mettre dans ce fichier about.html.twig pour commencer :

{# templates/static_page/about.html.twig #}




    
     {# Utilisation d'une variable Twig #}


    
{{ page_title }}

    
{{ description }}

    
Site créé le: {{ creation_date|date('d/m/Y') }}
 {# Utilisation d'une variable et d'un filtre Twig #}

    

    
Ceci est un template Twig !

Analysons ce template :

• {# ... #} : C'est un commentaire Twig. Il ne sera pas affiché dans le HTML final.
• ... : C'est une structure HTML standard.
• {{ ... }} : C'est la syntaxe Twig pour afficher une variable ou le résultat d'une expression. Par exemple, {{ page_title }} affichera la valeur de la variable page_title que nous passerons depuis le contrôleur.
• page_title, description, creation_date : Ce sont les noms des variables que notre contrôleur devra fournir au template.
• |date('d/m/Y') : C'est un filtre Twig. Les filtres modifient la sortie des variables. Ici, le filtre date formate l'objet DateTime (que nous attendons pour creation_date) en une chaîne de caractères au format jour/mois/année. Twig propose de nombreux filtres utiles (upper, lower, length, json_encode, etc.).

Modifier le contrôleur pour utiliser le template Twig

Maintenant que notre template est créé, nous devons modifier notre StaticPageController pour qu'il l'utilise au lieu de générer du HTML manuellement.

Puisque notre contrôleur hérite de AbstractController, nous avons accès à la méthode render(). Cette méthode prend deux arguments principaux :

1. Le chemin du fichier template Twig (relatif au répertoire templates/).
2. Un tableau associatif optionnel contenant les variables à passer au template. Les clés du tableau deviennent les noms des variables accessibles dans Twig.

Voici comment modifier la méthode about() de StaticPageController.php :

render('static_page/about.html.twig', [
            'page_title' => $pageTitle,
            'description' => $description,
            'creation_date' => $creationDate,
            // Vous pouvez ajouter d'autres variables ici si besoin
            'current_year' => date('Y'),
        ]);
    }
}

Points importants :

• Nous avons supprimé la construction manuelle de la chaîne $htmlContent.
• L'appel à $this->render() se charge de trouver le template templates/static_page/about.html.twig, de lui fournir les variables page_title, description, creation_date et current_year, et de générer l'objet Response final avec le HTML rendu.
• Assurez-vous que les clés du tableau passé à render() ('page_title', 'description', etc.) correspondent exactement aux noms de variables que vous utilisez dans votre template Twig ({{ page_title }}, {{ description }}).

Si vous rechargez la page http://localhost:8000/a-propos dans votre navigateur, vous devriez voir le même contenu qu'auparavant (ou légèrement modifié avec les nouveaux textes), mais cette fois, il est généré par Twig ! Si vous affichez le code source de la page dans votre navigateur, vous verrez le HTML pur, sans aucune trace de la syntaxe Twig.

Introduction à l'héritage de templates avec Twig (base.html.twig)

Actuellement, notre template about.html.twig contient toute la structure HTML (, , ). Dans une application réelle, la plupart des pages partagent une structure commune (en-tête, pied de page, menu de navigation, inclusion de fichiers CSS et JavaScript). Répéter cette structure dans chaque template serait fastidieux et source d'erreurs.

Twig résout ce problème grâce à l'héritage de templates. L'idée est de créer un template de base (souvent appelé base.html.twig) qui définit la structure globale et des "blocs" que les templates enfants pourront surcharger.

Par défaut, lorsque vous créez un projet Symfony, un fichier templates/base.html.twig est souvent généré. Il pourrait ressembler à ceci (version simplifiée) :

{# templates/base.html.twig #}


    
        
        
        {# Inclusion des CSS, par exemple avec Webpack Encore ou AssetMapper #}
        {% block stylesheets %}
            {# {{ encore_entry_link_tags('app') }} #}
        {% endblock %}
    
    
        

            
Ceci est l'en-tête commun à toutes les pages.
            
        

        

            {% block body %}{% endblock %}
        

        

        {% block javascripts %}
            {# {{ encore_entry_script_tags('app') }} #}
        {% endblock %}
    

Les éléments clés ici sont les balises {% block nom_du_bloc %} ... {% endblock %}. Ces blocs définissent des sections que les templates enfants peuvent redéfinir.

• {% block title %}Bienvenue !{% endblock %} : Définit le titre de la page, avec une valeur par défaut.
• {% block body %}{% endblock %} : Définit la zone où le contenu principal de chaque page sera inséré.
• {{ path('nom_de_la_route') }} : C'est une fonction Twig très importante fournie par Symfony pour générer des URLs à partir du nom des routes. C'est la manière correcte de créer des liens internes.

Maintenant, modifions notre templates/static_page/about.html.twig pour qu'il hérite de base.html.twig :

{# templates/static_page/about.html.twig #}
{% extends 'base.html.twig' %} {# Indique que ce template hérite de base.html.twig #}

{% block title %}{{ page_title }}{% endblock %} {# Surcharge le bloc 'title' #}

{% block body %} {# Surcharge le bloc 'body' #}
    &tt;h1>{{ page_title }}&tt;/h1>

    &tt;p>{{ description }}&tt;/p>

    &tt;p>Site créé le: {{ creation_date|date('d/m/Y') }}&tt;/p>

    &tt;p>L'année en cours est : {{ current_year }}.&tt;/p>

    &tt;hr>
    &tt;p>Le contenu spécifique de la page A Propos est ici.&tt;/p>
{% endblock %}

Avec {% extends 'base.html.twig' %}, notre template about.html.twig n'a plus besoin de définir toute la structure HTML. Il se contente de surcharger les blocs title et body avec son contenu spécifique. Le reste (doctype, header, footer, etc.) sera hérité de base.html.twig.

Si vous rechargez votre page "A Propos", vous devriez maintenant voir l'en-tête et le pied de page définis dans base.html.twig, avec le contenu spécifique de la page "A Propos" inséré dans le bloc body, et le titre de l'onglet du navigateur mis à jour.

L'utilisation de l'héritage de templates est une technique fondamentale pour construire des sites web cohérents et faciles à maintenir avec Twig et Symfony.

Vous avez maintenant appris à créer un template Twig, à lui passer des données depuis un contrôleur, et à utiliser l'héritage pour structurer vos pages. C'est une compétence essentielle pour tout développeur Symfony ! La dernière étape sera de tester et déboguer notre page.