19 - Liste des articles avec pagination (Symfony 7)

Série : Symfony 7

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

Dans ce tutoriel, nous allons apprendre à créer une page dédiée à l'affichage de tous les articles dans le projet OpenBlog, avec un système de pagination pour améliorer la navigation.

Objectifs du tutoriel

1. Ajouter une route pour la liste des articles.
2. Afficher tous les articles dans une page.
3. Mettre en place un système de pagination.
4. Ajouter une navigation entre les pages avec un design adapté.

Étape 1 : Ajouter une route pour la liste des articles

Dans le fichier PostsController.php, créez une nouvelle méthode index pour gérer la liste des articles. Cette méthode récupère le numéro de page puis interroge le “repository” pour récupérer les articles correspondant à la page en question.

#[Route(path:'', name:'index')]

public function index(PostsRepository $postsRepository, Request $request): Response

{

    // On récupère le numéro de page

    $page = $request->query->get('page',1);

    $data = $postsRepository->getAllPaginated($page, 2);

        

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

}

Étape 2 : Implémenter la pagination dans le Repository

Dans le fichier PostsRepository.php, ajoutez une méthode pour récupérer les articles paginés :

public function getAllPaginated(int $page = 1, int $limit = 10): array

{

    $offset = ($page - 1) * $limit;

    $query = $this->createQueryBuilder('p')

        ->orderBy('p.id', 'DESC')

        ->setFirstResult($offset)

        ->setMaxResults($limit);

            

    $paginator = new Paginator($query);

    $data = $paginator->getQuery()->getResult();

    $result['posts'] = $data;

    $result['pages'] = ceil($paginator->count() / $limit);

    $result['current'] = $page;

    return $result;

}

Étape 3 : Créer la vue pour afficher les articles

Dans le dossier templates/posts, créez un fichier index.html.twig :

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

{% block title %}Tous les articles{% endblock %}

{% block body %}

    <main class="container">

        <section>

            <h2 class="text-center my-5">Tous les articles</h2>

            <div class="grid">

                {% for post in data.posts %}

                    <article class="card">

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

                        <div class="card-body">

                            {% for category in post.categories %}

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

                            {% endfor %}

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

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

                        </div>

                    </article>

                {% else %}

                    <p>Il n'y a pas d'article sur cette page</p>

                {% endfor %}                

            </div>

            {% if data.pages > 1 %}

                {{ include('_partials/_pagination.html.twig', {

                    currentPage: data.current,

                    maxPage: data.pages,

                    path: 'app_posts_index'

                }) }}

            {% endif %}

        </section>

    </main>

{% endblock %}

Étape 4 : Ajouter le composant de pagination

Dans le dossier templates/_partials, créez un fichier _pagination.html.twig :

<nav>

    <ul class="pagination">

        {% if currentPage > 1 %}

            <li class="pagination-item">

                <a href="{{ path(path, {page: currentPage - 1}) }}" class="pagination-link">&lt;</a>

            </li>

        {% endif %}

        {% for page in 1..maxPage %}

            <li class="pagination-item {{ page == currentPage ? 'active' : '' }}">

                <a href="{{ path(path, {page: page}) }}" class="pagination-link">{{ page }}</a>

            </li>

        {% endfor %}

        {% if currentPage < maxPage %}

            <li class="pagination-item">

                <a href="{{ path(path, {page: currentPage + 1}) }}" class="pagination-link">&gt;</a>

            </li>

        {% endif %}

    </ul>

</nav>

Étape 5 : Ajouter des styles CSS

Dans le fichier SCSS principal (par exemple, assets/styles/app.scss), ajoutez :

@import 'pagination';

Créer un fichier SCSS assets/styles/_pagination.scss, et ajoutez :

nav{

    .pagination{

        display: flex;

        list-style: none;

        padding: 0;

        gap: 5px;

        .pagination-item{

            border: 1px solid $light;

            padding: 5px;

            .pagination-link{

                text-decoration: none;

                color: black;

            }

            &.active{

                background-color: $primary;

                .pagination-link{

                    color: white;

                }

            }

        }

    }

}

Étape 6 : Tester la pagination

• Accédez à la route /article.
• Vérifiez que les articles s’affichent correctement avec une pagination fonctionnelle.
• Modifiez la limite dans le contrôleur ou la requête pour tester différents comportements.

Conclusion

Avec ces étapes, vous avez mis en place une page d'affichage des articles avec pagination dans Symfony 7. Ce tutoriel couvre :

• La création d’une route dédiée.
• L’utilisation de Doctrine pour gérer la pagination.
• L’ajout d’un design réutilisable pour naviguer entre les pages.

Obtenir de l'aide

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