Etape 3 : Développer les templates Twig pour l'affichage

Introduction à la création de templates Twig et organisation des fichiers

Après avoir défini nos routes et implémenté la logique dans le contrôleur qui prépare les données, l'étape suivante est de créer les vues qui présenteront ces données à l'utilisateur. Dans Symfony, la génération de HTML (ou d'autres formats) est généralement confiée au moteur de template Twig. Twig offre une syntaxe concise et puissante pour intégrer des données dynamiques dans des fichiers texte.

Par convention, les fichiers de template Twig sont stockés dans le répertoire templates/ à la racine de votre projet. Pour une meilleure organisation, il est courant de créer des sous-dossiers correspondant aux contrôleurs ou aux sections de votre application. Pour notre gestionnaire de tâches, nous allons créer un sous-dossier templates/task/. Dans ce dossier, nous aurons besoin de deux fichiers :

• index.html.twig : pour afficher la liste de toutes les tâches.
• show.html.twig : pour afficher les détails d'une tâche spécifique.

Chaque template Twig est un fichier texte, généralement avec une extension .html.twig pour les templates générant du HTML. Ils peuvent contenir du HTML standard ainsi que des constructions spécifiques à Twig pour l'affichage de variables, les structures de contrôle (boucles, conditions), l'héritage de templates, etc.

Création du template pour la liste des tâches (`index.html.twig`)

Commençons par le template qui affichera la liste de toutes les tâches. Créez le fichier templates/task/index.html.twig. Ce template recevra une variable tasks de notre TaskController (comme défini dans la méthode index() : return $this->render('task/index.html.twig', ['tasks' => $this->tasks]);). Cette variable tasks est un tableau contenant nos tâches (qui sont elles-mêmes des tableaux associatifs avec id, title, description, completed).

Un bon template commence souvent par étendre un template de base (layout) qui définit la structure commune de toutes les pages (entête, pied de page, navigation principale). Symfony fournit généralement un fichier templates/base.html.twig à cet effet. Nous allons l'utiliser. Ensuite, nous allons parcourir le tableau tasks avec une boucle for de Twig et afficher le titre de chaque tâche, ainsi qu'un lien vers sa page de détail.

{# templates/task/index.html.twig #}

{% extends 'base.html.twig' %} {# Hérite de la structure de base #}

{# Définit le titre de la page, qui sera utilisé dans le bloc 'title' du base.html.twig #}
{% block title %}Liste de mes Tâches{% endblock %}

{# Contenu principal de la page #}
{% block body %}
    <div class="container mt-4">
        <h1>Liste des tâches</h1>

        {# Vérifie si le tableau de tâches n'est pas vide #}
        {% if tasks is not empty %}
            <ul class="list-group">
                {# Boucle sur chaque tâche dans le tableau 'tasks' #}
                {% for task in tasks %}
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <a href="{{ path('app_task_show', {id: task.id}) }}">
                            {{ task.title }} {# Affiche le titre de la tâche #}
                        </a>
                        <span class="badge {{ task.completed ? 'bg-success' : 'bg-warning text-dark' }}">
                            {% if task.completed %}
                                Terminée
                            {% else %}
                                En cours
                            {% endif %}
                        </span>
                    </li>
                {% endfor %}
            </ul>
        {% else %}
            <p class="alert alert-info">Aucune tâche pour le moment. Vous pouvez en ajouter une !</p>
        {% endif %}

        {# Espace réservé pour un futur lien vers la création de tâche #}
        <p class="mt-3">
            <!-- <a href="{{ path('app_task_create') }}" class="btn btn-primary">Ajouter une nouvelle tâche</a> -->
        </p>
    </div>
{% endblock %}

Points clés de ce template :

• {% extends 'base.html.twig' %} : Indique que ce template hérite de base.html.twig.
• {% block title %}...{% endblock %} et {% block body %}...{% endblock %} : Définissent le contenu des blocs title et body (ou d'autres blocs que vous auriez définis) du template parent.
• {% if tasks is not empty %}...{% else %}...{% endif %} : Structure conditionnelle pour afficher un message si aucune tâche n'existe.
• {% for task in tasks %}...{% endfor %} : Boucle pour itérer sur chaque élément du tableau tasks.
• {{ task.title }} : Affiche la valeur de la clé title de l'élément task courant. Twig accède aux éléments d'un tableau associatif avec la notation pointée.
• {{ path('app_task_show', {id: task.id}) }} : Utilise la fonction Twig path() pour générer l'URL de la route nommée app_task_show, en passant l'id de la tâche courante comme paramètre. C'est la méthode recommandée pour créer des liens internes.

Développement du template pour l'affichage du détail d'une tâche (`show.html.twig`)

Ensuite, nous devons créer le template pour afficher les détails d'une tâche spécifique. Créez le fichier templates/task/show.html.twig. Ce template recevra une variable task de notre TaskController (comme défini dans la méthode show() : return $this->render('task/show.html.twig', ['task' => $foundTask]);). Cette variable task est un tableau associatif contenant les détails (id, title, description, completed) d'une seule tâche.

Comme pour le template précédent, nous allons étendre base.html.twig et remplir les blocs title et body. Nous afficherons les différentes propriétés de la tâche et un lien pour revenir à la liste des tâches.

{# templates/task/show.html.twig #}

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

{% block title %}Détail : {{ task.title }}{% endblock %}

{% block body %}
    <div class="container mt-4">
        <div class="card">
            <div class="card-header">
                <h1 class="card-title">{{ task.title }}</h1>
            </div>
            <div class="card-body">
                <p><strong>Description :</strong></p>
                <p>{{ task.description|nl2br }}</p> {# Le filtre nl2br convertit les sauts de ligne en <br> #}

                <p>
                    <strong>Statut :</strong> 
                    <span class="badge {{ task.completed ? 'bg-success' : 'bg-warning text-dark' }}">
                        {% if task.completed %}
                            Terminée
                        {% else %}
                            En cours
                        {% endif %}
                    </span>
                </p>
            </div>
            <div class="card-footer">
                <a href="{{ path('app_task_list') }}" class="btn btn-secondary">Retour à la liste des tâches</a>
                {# Espace pour de futurs boutons d'action (modifier, supprimer) #}
                <!-- <a href="#" class="btn btn-info">Modifier</a> -->
            </div>
        </div>
    </div>
{% endblock %}

Dans ce template :

• Nous affichons task.title, task.description, et le statut (task.completed).
• Le filtre Twig |nl2br est appliqué à task.description. Ce filtre convertit les sauts de ligne (\n) présents dans la chaîne de caractères en balises HTML
, ce qui permet de respecter la mise en forme du texte de la description s'il contient plusieurs lignes.
• Un lien utilisant path('app_task_list') permet de retourner à la page listant toutes les tâches.

Avec ces deux templates créés, votre application devrait maintenant être capable d'afficher la liste des tâches et le détail de chaque tâche. Assurez-vous que votre serveur de développement Symfony est lancé (symfony server:start) et testez les URLs /taches et /tache/{id} (en remplaçant {id} par un ID valide de vos données en dur) dans votre navigateur.