Etape 4 : Ajouter des liens de navigation entre les pages

L'importance d'une navigation intuitive dans une application web

Une application web, même simple, devient rapidement inutilisable sans une navigation claire et cohérente entre ses différentes pages ou fonctionnalités. Les utilisateurs s'attendent à pouvoir se déplacer facilement d'une section à une autre, revenir en arrière, ou accéder à des actions contextuelles. Dans notre mini-projet de gestionnaire de tâches, il est essentiel de permettre à l'utilisateur de passer de la liste générale des tâches au détail d'une tâche spécifique, et vice-versa.

Symfony, à travers son moteur de template Twig, offre des outils robustes pour construire ces liens de navigation de manière dynamique et maintenable. Plutôt que de coder en dur les URLs dans vos templates (ce qui serait une mauvaise pratique car les URLs peuvent changer), nous utilisons les noms des routes que nous avons préalablement définis.

Utilisation de la fonction `path()` de Twig pour générer des URLs

La fonction Twig path() est l'outil central pour générer des URLs dans les templates Symfony. Elle prend au minimum un argument : le nom de la route pour laquelle on souhaite générer l'URL. Si la route attend des paramètres (comme notre route `app_task_show` qui attend un `id`), ces paramètres sont passés en second argument sous forme d'un tableau associatif.

L'avantage principal de cette approche est la décorrélation entre la structure de vos URLs et les liens dans vos templates. Si vous décidez de modifier le chemin d'une route (par exemple, changer /taches en /mes-taches dans la définition de la route app_task_list), vous n'aurez qu'à modifier la définition de la route dans le contrôleur. Tous les liens générés avec path('app_task_list') dans vos templates seront automatiquement mis à jour sans aucune intervention manuelle, évitant ainsi les liens cassés.

Implémentation du lien de la liste vers le détail d'une tâche

Dans notre template templates/task/index.html.twig, qui affiche la liste de toutes les tâches, nous souhaitons que chaque titre de tâche soit cliquable et mène à la page de détail de cette tâche. Nous avons déjà esquissé cela lors de la création du template à l'étape 3. Voici le rappel du code pertinent :

{# Extrait de templates/task/index.html.twig #}
{% for task in tasks %}
    <li class="list-group-item d-flex justify-content-between align-items-center">
        <!-- Le lien important est ici -->
        <a href="{{ path('app_task_show', {id: task.id}) }}">
            {{ task.title }}
        </a>
        <span class="badge {{ task.completed ? 'bg-success' : 'bg-warning text-dark' }}">
            {% if task.completed %}Terminée{% else %}En cours{% endif %}
        </span>
    </li>
{% endfor %}

Analysons la partie :

• 'app_task_show' : C'est le nom de la route que nous avons définie dans TaskController pour afficher le détail d'une tâche. Rappelez-vous de #[Route('/tache/{id}', name: 'app_task_show', ...)].
• {id: task.id} : C'est le second argument de la fonction path(). Il s'agit d'un objet (ou tableau associatif en Twig) où chaque clé correspond à un nom de paramètre attendu par la route, et sa valeur est la valeur à utiliser pour ce paramètre. Dans notre cas, la route app_task_show attend un paramètre nommé id. La valeur task.id provient de la boucle for, où task est l'élément courant du tableau tasks, et task.id est l'identifiant de cette tâche spécifique.

Ainsi, pour chaque tâche dans la liste, Twig générera une URL correcte pointant vers, par exemple, /tache/1, /tache/2, etc., en fonction de l'ID de la tâche.

Implémentation du lien de retour du détail vers la liste des tâches

Inversement, lorsque l'utilisateur consulte la page de détail d'une tâche (templates/task/show.html.twig), il est courant de proposer un lien pour revenir facilement à la liste principale. Nous avons également déjà inclus ce lien :

{# Extrait de templates/task/show.html.twig #}
<div class="card-footer">
    <!-- Le lien important est ici -->
    <a href="{{ path('app_task_list') }}" class="btn btn-secondary">Retour à la liste des tâches</a>
</div>

Ici, l'utilisation de path() est plus simple :

• 'app_task_list' : C'est le nom de la route que nous avons définie pour afficher la liste de toutes les tâches (#[Route('/taches', name: 'app_task_list', ...)]).
• Comme cette route n'attend aucun paramètre variable dans son chemin, le second argument de la fonction path() est omis.

Ce lien générera toujours l'URL correcte pour la liste des tâches, typiquement /taches.

Vérification du fonctionnement de la navigation

Après avoir mis en place ces liens, il est crucial de tester la navigation de votre application :

1. Assurez-vous que votre serveur de développement Symfony est en cours d'exécution (symfony server:start).
2. Ouvrez votre navigateur et accédez à l'URL de la liste des tâches (par exemple, http://localhost:8000/taches).
3. Vérifiez que chaque titre de tâche est un lien. Survolez ces liens pour voir si l'URL affichée par le navigateur en bas de la fenêtre correspond à ce que vous attendez (par exemple, http://localhost:8000/tache/1).
4. Cliquez sur l'un des liens. Vous devriez être redirigé vers la page de détail de la tâche correspondante.
5. Sur la page de détail, trouvez le lien "Retour à la liste des tâches". Vérifiez son URL en la survolant.
6. Cliquez sur ce lien de retour. Vous devriez revenir à la page listant toutes les tâches.

Si tous ces tests sont concluants, cela signifie que votre système de routage, vos contrôleurs, vos templates et la navigation entre les pages fonctionnent harmonieusement. Vous avez maintenant une base solide pour la structure de votre mini-application de gestion de tâches.