Pagination d'articles avec Laravel et Bootstrap 5

Vous avez du mal à gérer l’affichage des articles sur votre site Laravel?

Une mauvaise gestion peut entraîner une navigation difficile, frustrant vos utilisateurs.

Découvrez comment paginer efficacement vos articles avec Laravel et Bootstrap 5 dans cet article.

Table de matière

Configurer résultats page Laravel Utiliser paginate() dans contrôleur Afficher articles paginés Laravel Personnaliser pagination Bootstrap 5 FAQ Conclusion

Formation Laravel : Le Guide Complet du Débutant

Initiez-vous à Laravel et réalisez votre première application en toute confiance.

Dans cet axe, nous allons aborder comment paginer les résultats d’une requête et personnaliser l’affichage de la pagination en utilisant Bootstrap 5.

Configurer résultats page Laravel

Pour paginer les résultats, vous devez définir un nombre de résultats par page directement dans le modèle Article. Cette configuration vous permet de contrôler combien d’articles seront affichés sur chaque page.

				
					
 protected $perPage =5;

Cette propriété permet de spécifier que, par défaut, chaque page affichera 5 articles.

Utiliser paginate() dans contrôleur

Ensuite, vous devez modifier la méthode index() dans votre contrôleur ArticleController pour utiliser la pagination.

Code à insérer dans ArticleController :

				
					
 public function index() {
// Récupérer les articles en les triant par ordre décroissant selon l'ID et en paginant
$articles = Article::orderByDesc('id')->paginate($this->perPage);

// Préparer les données à envoyer à la vue
$data = [
'title' => 'Les articles du blog - ' . config('app.name'),
'description' => 'Retrouvez tous les articles de - ' . config('app.name'),
'articles' => $articles,
];

// Retourner la vue avec les données
return view('article.index', $data);
}

orderByDesc(‘id’) :Trie les articles du plus récent au plus ancien.
paginate($this->perPage) :Paginer les articles selon la valeur de $perPage définie dans le modèle Article.
$data :Un tableau associatif contenant le titre de la page, la description et la liste des articles paginés.

Afficher articles paginés Laravel

Une fois que vous avez récupéré les articles paginés, vous devez les afficher dans la vue index.blade.php. Ajoutez la pagination sous la liste des articles.

Code à ajouter dans index.blade.php :

				
					
 <!-- Affichage de la pagination -->
<div class="pagination mt-4">
{{ $articles->links() }}
</div>

La directive @foreach parcourt chaque article et génère une carte pour l’afficher.
{{ Str ::words($article->content, 5) }} : Affiche uniquement les cinq premiers mots du contenu de l’article.
{{ $articles->links() }} :Génère automatiquement les liens de pagination pour naviguer entre les pages d’articles.

Astuce Pratique : Pour ajouter des options de personnalisation, vous pouvez utiliser la méthode links() avec un argument de vue personnalisé : {{ $articles->links(‘custom-pagination-view’) }}.

Personnaliser pagination Bootstrap 5

Laravel propose des outils pour personnaliser facilement la pagination. Pour utiliser Bootstrap 5 et styliser la pagination, vous devez configurer votre application.

Code à ajouter dans AppServiceProvider :

				
					
 public function boot(): void
{
// Définit la longueur par défaut des colonnes string à 191 caractères
Schema::defaultStringLength(191);
Paginator::useBootstrapFive();
}

La méthode Paginator::useBootstrapFive() permet de rendre les composants de pagination compatibles avec le style Bootstrap 5, assurant une apparence cohérente avec le reste de votre interface.

Infos : Paginator::useBootstrapFive() assure que la pagination utilise les classes CSS de Bootstrap 5, améliorant l’apparence sans besoin de styles personnalisés.

Résultat affiché

Lorsque tout est bien configuré, la page affichera :

Une liste de 5 articles par page avec leurs titres, contenus abrégés, auteurs et dates de publication.
Un composant de pagination stylisé en bas de la liste pour naviguer entre les différentes pages.

Exemple de rendu visuel de la pagination :

Erreur Courante : Omettre Paginator::useBootstrapFive() dans AppServiceProvider peut entraîner un affichage non stylisé de la pagination.

Formez-vous gratuitement avec Alphorm !

Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.

FAQ

Comment paginer les résultats d'une requête dans Laravel?

Pour paginer les résultats d’une requête dans Laravel, vous devez définir le nombre de résultats par page dans votre modèle, par exemple, en utilisant la propriété protected $perPage = 5;. Ensuite, dans le contrôleur, utilisez la méthode paginate() pour diviser les articles en pages distinctes. Enfin, affichez ces articles paginés dans votre vue avec la directive {{ $articles->links() }} pour naviguer facilement entre les pages.

Comment personnaliser la pagination avec Bootstrap 5 dans Laravel?

Pour personnaliser la pagination avec Bootstrap 5 dans Laravel, configurez votre application pour utiliser Bootstrap en appelant Paginator::useBootstrapFive() dans la méthode boot() de AppServiceProvider. Cela permet d’appliquer automatiquement les styles Bootstrap 5 à la pagination, assurant une apparence cohérente avec le reste de votre interface sans nécessiter de styles CSS personnalisés.

Comment définir le nombre de résultats par page dans Laravel?

Dans Laravel, pour définir le nombre de résultats par page lors de la pagination, vous pouvez utiliser la propriété protected $perPage dans votre modèle. Par exemple, en définissant protected $perPage = 5;, chaque page affichera 5 résultats. Cette configuration est essentielle pour contrôler l’affichage des éléments sur vos pages web.

Comment afficher les liens de pagination dans une vue Laravel?

Pour afficher les liens de pagination dans une vue Laravel, utilisez la directive {{ $articles->links() }} dans votre fichier Blade. Cette directive génère automatiquement les liens de pagination nécessaires pour naviguer entre les pages d’articles, facilitant ainsi l’expérience utilisateur lors de la consultation des contenus paginés.

Quels sont les avantages de la pagination avec Bootstrap 5?

L’utilisation de Bootstrap 5 pour la pagination offre un style moderne et cohérent avec le reste de l’interface utilisateur, simplifiant le design grâce à ses classes CSS intégrées. En Laravel, l’intégration via Paginator::useBootstrapFive() permet d’adopter facilement ces styles, améliorant l’accessibilité et l’esthétique sans nécessiter de personnalisations supplémentaires.

Conclusion

En maîtrisant la pagination avec Laravel et Bootstrap 5, vous améliorez l’expérience utilisateur sur votre site. Quelles autres fonctionnalités de Laravel souhaitez-vous explorer?

Pagination d’articles avec Laravel et Bootstrap 5