18 - Afficher le contenu des articles (Symfony 7)

Série : Symfony 7

Fichiers : https://github.com/NouvelleTechno/OpenBlog

Dans ce tutoriel, nous allons apprendre à afficher le détail des articles dans notre projet OpenBlog sous Symfony 7. Nous verrons comment :

1. Créer une route et un contrôleur pour afficher un article spécifique.
2. Relier la page de détail à la page d’accueil avec des liens dynamiques.
3. Utiliser Twig pour afficher le contenu des articles avec une mise en page adaptée.

Étape 1 : Mise en place du contrôleur des articles

Nous commençons par créer un fichier PostsController qui sera chargé de gérer les articles.

1. Créez un fichier PostsController.php dans le dossier src/Controller.
2. Implémentez le contrôleur comme suit :

namespace App\Controller;



use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;

use Symfony\Component\HttpFoundation\Response;

use Symfony\Component\Routing\Attribute\Route;

use App\Repository\PostsRepository;



#[Route('/articles', name: 'app_posts_')]

class PostController extends AbstractController

{

    #[Route('/details/{slug}', name: 'details')]

    public function details(string $slug, PostsRepository $postsRepository): Response

    {

        $post = $postsRepository->findOneBy(['slug' => $slug]);



        if (!$post) {

            throw $this->createNotFoundException("Cet article n'existe pas.");

        }



        return $this->render('posts/details.html.twig', compact('post'));

    }

}

Étape 2 : Ajout de liens dynamiques dans la page d’accueil

Pour permettre la navigation entre la liste des articles et leur détail :

1. Ouvrez le fichier Twig de la page d’accueil (par exemple, templates/main/index.html.twig).
2. Modifiez la balise H2 ou H3 de chaque article pour y ajouter un lien vers sa page de détail :

<h3>

    <a href="{{ path('app_posts_details', { slug: post.slug }) }}">

        {{ post.title }}

    </a>

</h3>

Étape 3 : Création de la vue pour les détails des articles

1. Créez un dossier templates/post si ce n’est pas déjà fait.
2. Ajoutez un fichier details.html.twig et implémentez une structure de base :

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



{% block title %}{{ post.title }}{% endblock %}



{% block body %}

<header class="post-details-header">

    <img src="{{ asset('uploads/articles/') ~ post.featuredImage }}" alt="{{ post.title }}">

	<div class="hero-content">

		{% for category in post.categories %}

			<span class="badge badge-primary badge-lg">{{ category.name }}</span>

		{% endfor %}

	    <h1>{{ post.title }}</h1>

    	<p>{{ post.users.nickname }}</p>

</header>

		

<main class="container">

	<div class="post-content">

	    {{ post.content|raw }}

	</div>

</main>

{% endblock %}

Étape 4 : Gestion des erreurs

Si un utilisateur tente d’accéder à un article inexistant, un message d’erreur est généré automatiquement grâce à :

throw $this->createNotFoundException("Cet article n'existe pas.");

Cela déclenche une page d’erreur 404 que vous pouvez personnaliser en créant le fichier templates/bundles/TwigBundle/Exception/error404.html.twig.

Étape 5 : Ajout de styles CSS

Ajoutez des styles spécifiques pour la page des articles dans votre fichier SCSS/CSS (par exemple, assets/styles/app.scss), plus de détails dans la vidéo :

.post-details-header {

    position: relative;

    width: 100%;

    text-align: center;

    img {

        width: 100%;

        object-fit: cover;

        border-radius: 15px;

    }

}



.post-content {

    margin: 20px auto;

    max-width: 800px;

    font-size: 1.2em;

    line-height: 1.6;

}

Conclusion

Nous avons vu comment afficher les détails des articles dans un projet Symfony 7. Grâce à l’utilisation des routes dynamiques, des contrôleurs, et de Twig, nous avons créé une page fonctionnelle et stylisée.

Pour aller plus loin, vous pourriez :

• Ajouter un système de pagination pour vos articles.
• Permettre aux utilisateurs de commenter les articles.
• Optimiser le référencement des pages grâce à des métadonnées dynamiques.

Obtenir de l'aide

Pour obtenir de l'aide, vous pouvez accéder au serveur Discord pour une entraide par chat.