Vous avez du mal à afficher des articles de blog de manière dynamique avec Laravel.
Cela peut entraîner une mauvaise gestion des données et une expérience utilisateur inefficace.
Dans cet article, vous découvrirez comment utiliser Blade et Laravel pour afficher vos articles de manière structurée et efficace.
Initiez-vous à Laravel et réalisez votre première application en toute confiance.
Pour afficher des articles récupérés de la base de données à l’aide de Blade, il est nécessaire de préparer et de passer les données à la vue depuis le contrôleur, puis de les boucler dans la vue elle-même.
Préparer données avec Laravel Blade
Dans cette première étape, nous allons préparer et envoyer les données nécessaires à la vue. Le contrôleur joue un rôle essentiel dans la récupération des données depuis la base de données et leur passage à la vue.
Voici comment configurer votre contrôleur pour préparer et passer les données à la vue :
public function index() {
// Récupérer les articles en les triant par ordre décroissant selon l'ID
$articles = Article::orderByDesc('id')->get();
// 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);
}
Explication détaillée :
- Récupération des articles :
La méthode Article::orderByDesc(‘id’)->get(); récupère tous les articles de la base de données et les trie par ordre décroissant, en affichant d’abord les articles les plus récents.
- Préparation des données :
Le tableau associatif $data contient :
- title :le titre de la page avec le nom de l’application.
- description :une description pour la page qui inclut le nom de l’application.
- articles :une liste des articles récupérés de la base de données.
- Retour de la vue :
La méthode return view(‘article.index’, $data); envoie ces données à la vue article.index.
Afficher articles avec Blade dans Vue
Une fois les données préparées dans le contrôleur, la prochaine étape consiste à afficher ces articles dans la vue avec Blade. La vue doit boucler sur les articles et les afficher de manière structurée et lisible.
Code de article/index.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">
@foreach($articles as $article)
<div class="card mt-4">
<div class="card-body">
<h2 id="articletitle" class="rb-heading-index-3 card-title"><a href="{{route('articles.show',['article'=" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer">$article->id])}}">{{$article->title}}</a></h2>
<p class="card-text">{{Str::words($article->content,5)}}</p>
<span class="auhtor">Par <a href="" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer">Hamid</a></span> <br>
<span class="time">{{$article->created_at->diffForHumans()}}</span>
</div>
</div>
@endforeach
</div>
<!-- /.col-lg-9 -->
</div>
@stop
Explication détaillée :
- Boucle @foreach :
La directive @foreach($articles as $article) permet de parcourir tous les articles récupérés dans le contrôleur. Chaque article est affiché à l’intérieur d’une carte <div class= »card »>.
- Affichage du titre de l’article :
Le titre de l’article est affiché à l’intérieur de la balise <h2 class= »card-title »>. Il est également cliquable et redirige l’utilisateur vers la page de détails de l’article grâce à route(‘articles.show’, [‘article’ => $article->id]).
- Extrait du contenu de l’article :
Le contenu de l’article est abrégé à l’aide de la fonction Str::words($article->content, 5), qui ne montre que les cinq premiers mots de l’article. Cela permet d’avoir un aperçu du contenu sans tout afficher sur la page d’index.
- Affichage de l’auteur et de la date :
L’auteur est mentionné statiquement dans l’exemple ici (Par <a href= » »>Hamid</a>), mais cela peut être dynamique en récupérant l’auteur depuis la base de données.
La date de création est affichée sous la forme relative grâce à la méthode diffForHumans(), qui convertit la date en format « il y a X jours ».
Sur la page article/index.blade.php , l’affichage des articles sera structuré de la manière suivante :
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 préparer les données dans un contrôleur Laravel ?
Comment afficher des articles dans une vue Blade ?
Quelle est l'utilité de la fonction diffForHumans() en Laravel ?
Comment structurer un contrôleur pour passer des données à une vue ?
Comment créer un extrait d'article dans Blade ?
Conclusion
En utilisant Blade et Laravel, vous pouvez afficher efficacement des articles depuis votre base de données. Comment allez-vous intégrer ces techniques pour améliorer votre prochain projet Laravel?
