Symfony 4 - Créer un blog pas à pas - Naviguer entre les pages

19 août 2019 - : MVC Tutoriel Symfony - : 0 commentaire - : 264 - Tutoriel Controllers Framework MVC Views Symfony

Visualisez les fichiers de cette série sur GitHub

Lors de la création d'une application web, nous avons, généralement, à créer plusieurs pages. Ceci nécessite donc de mettre en place une navigation interne entre ces pages.

Nous allons voir plusieurs façons de créer les liens de navigation.

La base sera dans la majeure partie des cas, l'utilisation d'une balise html "a".

Petit rappel concernant sa syntaxe

<a href="url">Nom du lien</a>

Nous mettrons donc ces liens (url) de façon dynamique en évitant soigneusement d'utiliser des éléments fixes.

En effet, il arrive souvent d'avoir à modifier la structure de l'application et donc ses liens internes.

Twig nous donne la possibilité d'afficher les liens en fonction des routes que nous aurons définies.

Les liens "simples"

Dans les articles précédents, nous avons créé un contrôleur "ArticlesController" dans lequel nous avons défini une route appelée "articles" qui mène vers "/actualités".

Nous allons créer un lien sur la page d'accueil qui nous permettra d'afficher cette page.

Dans le code ci-dessous, correspondant au fichier "templates/main/index.html.twig", figurent deux exemples, l'un déconseillé, l'autre étant une bonne pratique.

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

{% block title %}Mon Blog{% endblock %}

{% block body %}
    <h1>Mon Blog</h1>
    <p>Ceci est la page d'accueil</p>

    {# Les deux liens ci-dessous fonctionneront, le 2ème est la meilleure pratique #}
    {# Ce lien fonctionnera mais devra être modifié en cas de modification des routes #}  
    <p><a href="/actualites">Liste des articles</a></p>

    {# Ce lien changera automatiquement en cas de modification des routes #}  
    <p><a href="{{ path('actualites_articles') }}">Liste des articles</a></p>
{% endblock %}

Dans le 2ème lien, nous allons chercher la route dont le nom est "actualites_articles".

Vous remarquerez ici que le nom est la concaténation du nom dans l'annotation du contrôleur "actualites_" et du nom dans l'annotation de la méthode "articles" pour donner "actualites_articles"

Les liens avec paramètres

Dans certains cas, nous aurons des routes qui contiennent des paramètres. C'est le cas de la route permettant d'accéder à un article. Cette route attend un paramètre qui est le "slug" de l'article.

Nous utiliserons également "path" mais nous lui ajouterons le slug de l'article.

La route en question s'appellera "actualites_article" et sera utilisée pour créer un lien pour rendre le titre des articles cliquable dans la vue qui affiche la liste des articles, dans le fichier "templates/articles/index.html.twig".

Ce lien sera rédigé comme suit

<h2><a href="{{ path('actualites_article', {'slug': article.slug}) }}">{{ article.titre }}</a></h2>

Nous passerons le "slug" comme paramètre dans le "path". Ceci va automatiquement créer le lien en respectant la forme précisée dans l'annotation.

Dans un prochain article nous regarderons comment générer automatiquement ces slugs, ainsi que les dates de création et mise à jour des articles.

Obtenir de l'aide

Pour obtenir de l'aide, vous pouvez accéder aux forums de Nouvelle-Techno.fr ou au serveur Discord pour une entraide par chat

Visualisez les fichiers de cette série sur GitHub

Partager

Partager sur Facebook Partager sur Twitter Partager sur LinkedIn

Commentaires

Ecrire un commentaire

Pas encore de commentaire

Ecrire un commentaire