Laravel - Personnalisation de la pagination

Bonjour, futurs développeurs ! Aujourd'hui, nous allons plonger dans le monde merveilleux des personnalisations de la pagination Laravel. En tant que votre enseignant bien-aimé de sciences informatiques, je suis excité de vous guider dans ce périple. Ne vous inquiétez pas si vous êtes nouveau dans la programmation - nous allons commencer par les bases et progresser pas à pas. Alors, prenez une tasse de café (ou de thé, si c'est votre truc), et mettons-nous en route !

Qu'est-ce que la pagination ?

Avant de nous lancer dans les personnalisations, comprenons ce qu'est la pagination. Imaginez que vous avez un livre avec des centaines de pages. Lire toutes les pages d'un coup serait écrasant, n'est-ce pas ? C'est là que rentre en jeu la pagination. Dans le développement web, la pagination est comme diviser votre livre en morceaux gérables, en affichant un nombre limité d'items par page.

Laravel, notre super framework, vient avec des fonctionnalités de pagination intégrées qui rendent notre vie plus facile. Mais parfois, nous voulons ajouter notre touche personnelle à ces résultats paginés. C'est là que les personnalisations deviennent utiles !

Pagination de base dans Laravel

Commençons par un exemple simple de la façon dont fonctionne la pagination dans Laravel :

$users = User::paginate(15);

Cette ligne de code récupère les utilisateurs de la base de données et les pagine, en affichant 15 utilisateurs par page. C'est comme de la magie, non ? Mais que faire si nous voulons rendre cette pagination plus jolie ? C'est là que commence notre voyage de personnalisation !

Personnalisation de la vue de pagination

Étape 1 : Publier les vues de pagination

Tout d'abord, nous devons publier les vues de pagination de Laravel. Ne vous inquiétez pas ; c'est plus simple qu'il n'y paraît ! Exécutez cette commande dans votre terminal :

php artisan vendor:publish --tag=laravel-pagination

Cette commande est comme dire à Laravel : "Hey, je veux voir ces fichiers de pagination afin que je puisse les retoucher !"

Étape 2 : Modifier la vue

Maintenant, naviguez vers resources/views/vendor/pagination. Vous trouverez plusieurs fichiers ici. Concentrons-nous sur default.blade.php. Ce fichier contrôle l'apparence de vos liens de pagination.

Voici une simple personnalisation :

@if ($paginator->hasPages())
<nav>
<ul class="pagination">
{{-- Lien vers la page précédente --}}
@if ($paginator->onFirstPage())
<li class="disabled"><span>&laquo;</span></li>
@else
<li><a href="{{ $paginator->previousPageUrl() }}" rel="prev">&laquo;</a></li>
@endif

{{-- Éléments de pagination --}}
@foreach ($elements as $element)
{{-- Séparateur "Trois points" --}}
@if (is_string($element))
<li class="disabled"><span>{{ $element }}</span></li>
@endif

{{-- Tableau de liens --}}
@if (is_array($element))
@foreach ($element as $page => $url)
@if ($page == $paginator->currentPage())
<li class="active"><span>{{ $page }}</span></li>
@else
<li><a href="{{ $url }}">{{ $page }}</a></li>
@endif
@endforeach
@endif
@endforeach

{{-- Lien vers la page suivante --}}
@if ($paginator->hasMorePages())
<li><a href="{{ $paginator->nextPageUrl() }}" rel="next">&raquo;</a></li>
@else
<li class="disabled"><span>&raquo;</span></li>
@endif
</ul>
</nav>
@endif

Ce code peut sembler intimidant au premier abord, mais analysons-le :

1. Nous vérifions si il y a plusieurs pages ($paginator->hasPages()).
2. Nous créons une navigation avec une liste ordonnée.
3. Nous ajoutons un lien "Précédent" si nous ne sommes pas sur la première page.
4. Nous bouclons sur les éléments de pagination, ajoutant des liens pour chaque page.
5. Nous ajoutons un lien "Suivant" si il y a plus de pages.

Styler votre pagination

Maintenant que nous avons personnalisé notre structure de pagination, rendons-la jolie ! Ajoutez un peu de CSS à votre feuille de style :

.pagination {
display: flex;
list-style: none;
padding: 0;
}

.pagination li {
margin: 0 5px;
}

.pagination li a {
text-decoration: none;
padding: 5px 10px;
border: 1px solid #ddd;
color: #333;
}

.pagination li.active span {
background-color: #007bff;
color: white;
padding: 5px 10px;
border: 1px solid #007bff;
}

.pagination li.disabled span {
color: #ccc;
padding: 5px 10px;
border: 1px solid #ddd;
}

Ce CSS donnera à votre pagination un aspect propre et moderne. C'est comme mettre un joli costume à votre code !

Personnalisations avancées

Pagination personnalisée en utilisant un Présenter

Pour des personnalisations plus avancées, Laravel nous permet de créer un presenter personnalisé. Créons-en un :

1. Créez un nouveau fichier app/Http/Presenters/CustomPaginationPresenter.php :

<?php

namespace App\Http\Presenters;

use Illuminate\Pagination\BootstrapPresenter;

class CustomPaginationPresenter extends BootstrapPresenter
{
public function render()
{
if (!$this->hasPages()) {
return '';
}

return sprintf(
'<div class="custom-pagination">%s %s %s</div>',
$this->getPreviousButton(),
$this->getLinks(),
$this->getNextButton()
);
}

protected function getAvailablePageWrapper($url, $page, $rel = null)
{
$rel = is_null($rel) ? '' : ' rel="' . $rel . '"';

return '<span class="page-item"><a class="page-link" href="' . $url . '"' . $rel . '>' . $page . '</a></span>';
}

protected function getDisabledTextWrapper($text)
{
return '<span class="page-item disabled"><span class="page-link">' . $text . '</span></span>';
}

protected function getActivePageWrapper($text)
{
return '<span class="page-item active"><span class="page-link">' . $text . '</span></span>';
}
}

2. Utilisez ce présentateur dans votre contrôleur :

use App\Http\Presenters\CustomPaginationPresenter;

public function index()
{
$users = User::paginate(15);
$presenter = new CustomPaginationPresenter($users);

return view('users.index', compact('users', 'presenter'));
}

3. Dans votre vue, utilisez le présentateur :

{!! $presenter->render() !!}

Conclusion

Félicitations ! Vous venez d'apprendre à personnaliser la pagination de Laravel. De la modification de base aux présentateurs avancés, vous avez maintenant le pouvoir de faire paraître vos résultats paginés exactement comme vous le souhaitez.

Souvenez-vous, la clé pour maîtriser ces concepts est la pratique. Essayez de créer différents styles, expérimentez avec le présentateur, et surtout, amusez-vous avec ça ! La pagination peut sembler un détail mineur, mais elle peut grandement améliorer l'expérience utilisateur de votre application.

Pour conclure, voici un tableau résumant les méthodes que nous avons couvertes :

Méthode	Description
paginate()	Méthode de pagination de base
vendor:publish	Publie les vues de pagination
hasPages()	Vérifie si il y a plusieurs pages
onFirstPage()	Vérifie si on est sur la première page
previousPageUrl()	Obtient l'URL pour la page précédente
nextPageUrl()	Obtient l'URL pour la page suivante
currentPage()	Obtient le numéro de la page actuelle
hasMorePages()	Vérifie si il y a plus de pages

Continuez à coder, continuez à apprendre, et souvenez-vous - chaque grand développeur a commencé comme un débutant. Vous êtes sur votre chemin pour devenir un pro de la pagination Laravel !

Credits: Image by storyset