Organiser et afficher les articles par catégorie dans une application Laravel peut être complexe sans une structure appropriée.
Sans une approche claire, les utilisateurs peuvent avoir du mal à naviguer entre les catégories, ce qui pourrait nuire à l’expérience utilisateur.
Cet article vous guide à travers les étapes nécessaires pour structurer et afficher les articles par catégorie, en utilisant des outils et techniques de Laravel.
Initiez-vous à Laravel et réalisez votre première application en toute confiance.
Dans cette documentation, nous allons détailler les étapes pour afficher les articles par catégorie, y compris l’ajout des catégories dans la barre latérale, la création du contrôleur CategoryController, et l’affichage des articles dans la vue dédiée. Chaque partie du processus sera expliquée de manière claire et structurée.
Bloc catégories Sidebar Laravel
Dans cette étape, nous allons ajouter un bloc de catégories dans la barre latérale afin d’afficher toutes les catégories qui ont des articles associés. Ce bloc permettra à l’utilisateur de naviguer entre les différentes catégories.
Voici le code à ajouter dans sidebar.blade.php :
<div class="my-4">Catégories</div>
<div class="list-group">
@foreach(App\Models\Category::has('articles')->get() as $category)
<a href="{{ route('category.show', ['category'=" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer">$category->slug]) }}" class="list-group-item {{ Request::is('category/'.$category->slug) ? 'active' : '' }}">{{ $category->name }}</a>
@endforeach
</div>
Pour bien comprendre voici l’explications :
- Affichage des catégories avec des articles associés :La méthode App\Models\Category::has(‘articles’)->get() permet de récupérer toutes les catégories qui contiennent des articles.
- Mise en surbrillance de la catégorie active :La condition Request::is(‘category/’.$category->slug) est utilisée pour vérifier si l’utilisateur est actuellement sur la page d’une catégorie donnée. Si c’est le cas, la classe CSS active sera ajoutée au lien, ce qui permet de souligner la catégorie active.
- Lien vers la page de la catégorie :Le lien utilise la fonction route(‘category.show’, [‘category’=>$category->slug]) pour générer l’URL de la page de la catégorie en fonction de son slug. Cela permet de naviguer vers la page d’une catégorie spécifique.
Créer CategoryController Laravel
Ensuite, nous allons créer un contrôleur CategoryController pour gérer l’affichage des articles associés à chaque catégorie. Le contrôleur sera responsable de la récupération des articles d’une catégorie spécifique et de leur passage à la vue.
Voici le code à ajouter dans le contrôleur CategoryController.php :
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Category;
class CategoryController extends Controller
{
public function show(Category $category) //les article de la categorie
{
$articles = $category->articles()->withCount('comments')->latest()->paginate(5);
$data = [
'title' => $category->name,
'description' => 'Les articles de la categorie '.$category->name,
'category' => $category,
'articles' => $articles,
];
return view('category.show', $data);
}
}
Pour bien comprendre voici l’explications :
- Route model binding :La déclaration Category $category utilise leRoute Model Bindingde Laravel pour récupérer automatiquement l’instance de la catégorie correspondant au slug passé dans l’URL.
- Récupération des articles :La méthode $category->articles() récupère les articles associés à cette catégorie. Nous utilisons également la méthode withCount(‘comments’) pour inclure un comptage des commentaires pour chaque article, et latest() pour trier les articles par date de création (les plus récents en premier).
Vue Laravel pour articles par catégorie
Maintenant, créons la vue category.show.blade.php qui va afficher le titre de la catégorie et la liste des articles associés. Cette vue inclut également la pagination pour naviguer entre les pages d’articles.
Voici le code à ajouter dans category.show.blade.php :
@extends('layouts.main')
@section('content')
<div class="row">
<div class="col-lg-3">
@include('includes.sidebar')
</div>
<!-- /.col-lg-3 -->
<div class="col-lg-9">
<h1 class="text-muted">{{ $category->name }}</h1>
{{-- début du post --}}
@forelse($articles as $article)
<div class="card mt-4">
<div class="card-body">
<h2 id="%c2%a0articletitle" class="rb-heading-index-5 card-title"><a href="{{ route('articles.show', ['article'=" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer">$article->slug]) }}">{{ $article->title }}</a></h2>
<p class="card-text">{{ Str::words($article->content, 5) }}</p>
<span class="auhtor">Par <a href="{{ route('user.profile', ['user'=" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer">$article->user->id]) }}">{{ $article->user->name }}</a> inscrit le {{ $article->user->created_at->format('d/m/Y') }}</span> <br>
<span class="time">Posté {{ $article->created_at->diffForHumans() }}</span>
<div class="text-right">{{ $article->comments_count }} Commentaire(s)</div>
@if(Auth::check() && Auth::user()->id == $article->user_id)
<div class="author mt-4">
<a href="{{ route('articles.edit', ['article'=" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer">$article->slug]) }}" class="btn btn-info">Modifier</a>
<form style="display: inline;" action="{{ route('articles.destroy', ['article'=>$article->slug]) }}" method="post">
@method('DELETE')
@csrf
<button type="submit" class="btn btn-danger">X</button>
</form>
</div>
@endif
</div>
</div>
@empty
<div class="card mt-4">
<div class="card-body">
<p>Aucun article</p>
</div>
</div>
@endforelse
{{-- fin du post --}}
{{-- Pagination --}}
<div class="pagination mt-5">
{{ $articles->links() }}
</div>
<!-- /.card -->
</div>
<!-- /.col-lg-9 -->
</div>
@stop
Pour bien comprendre voici l’explications :
- Affichage du titre de la catégorie :Le titre de la catégorie est affiché avec la variable {{ $category->name }}.
- Affichage des articles :La boucle @forelse est utilisée pour afficher les articles de la catégorie. Si aucun article n’est trouvé, le message « Aucun article » est affiché.
- Pagination :La pagination est gérée avec {{ $articles->links() }}, qui génère les liens de navigation pour permettre à l’utilisateur de passer d’une page d’articles à l’autre.
Route Model Binding pour catégories
Pour que l’URL de la page de catégorie fonctionne, nous devons définir une route dans le fichier web.php qui associe le slug de la catégorie à l’action du contrôleur.
Voici le code à ajouter dans routes/web.php :
Route::get('category/{category}', [CategoryController::class, 'show'])->name('category.show');
Voilà l’explications :
- Route Model Binding avec slug :La syntaxe {category:slug} permet à Laravel de lier automatiquement la valeur du slug dans l’URL à un modèle Category. Cela évite d’avoir à rechercher manuellement la catégorie dans la base de données.
En suivant ces étapes, vous avez ajouté la fonctionnalité permettant de lister les articles d’une catégorie. Vous avez créé la vue pour afficher les articles, ajouté la logique dans le contrôleur, et configuré la route pour associer l’URL aux actions du contrôleur. Cela vous permettra de mieux organiser les articles dans votre application et d’offrir une expérience utilisateur fluide pour la navigation entre les catégories.
Voici l’affichage la liste des catégories :
Si en clique sur une sous-catégorie il s’affiche des articles pour ce catégorie voici affichage :
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 afficher les articles par catégorie dans Laravel ?
Comment ajouter un bloc de catégories dans la barre latérale ?
Comment créer un CategoryController dans Laravel ?
Quel est le rôle de la pagination dans l'affichage des articles ?
Comment définir une route pour afficher les articles d'une catégorie ?
Conclusion
En suivant ces étapes, vous pouvez organiser efficacement vos articles par catégorie dans Laravel, améliorant ainsi la navigation et la structure de votre application. Quel autre aspect de Laravel souhaitez-vous explorer pour optimiser vos projets ?
