Création d'un Blog

Vous voulez apprendre à créer un blog complet avec Laravel et Filament ? Ce projet vous guide pas à pas dans la mise en place d'un blog moderne avec un dashboard administrateur, un frontend dynamique et une gestion avancée des articles.

📌 Note : Cet article présente un extrait du tutoriel complet. Le code officiel contient plus de fonctionnalités et d'optimisations.

Installation et configuration de Filament Dashboard

Nous installons Filament, un tableau de bord puissant pour gérer notre application Laravel.

composer require filament/filament:"^3.2" -W
php artisan filament:install --panels
php artisan make:filament-user

Mise en place du modèle et migration des posts

Nous ajoutons une table posts avec des champs utiles :

php artisan make:model Post --migration

Dans la migration :

Schema::create('posts', function (Blueprint $table) {
    $table->id();
    $table->string('title');
    $table->string('slug')->unique();
    $table->text('excerpt')->nullable();
    $table->text('content')->nullable();
    $table->string('type');  // 'tutoriel', 'article'
    $table->string('thumbnail')->nullable();
    $table->string('youtube_link')->nullable();
    $table->boolean('is_published')->default(false);
    $table->timestamps();
});

Création de la ressource Filament pour gérer les articles 📝

Nous générons une ressource Filament pour gérer nos articles directement depuis l'interface administrateur.

php artisan make:filament-resource Post

Cela nous permet de créer, modifier et supprimer des articles facilement.

Contrôleur Laravel pour les articles 🎛️

Nous créons un contrôleur PostController pour gérer l'affichage :

php artisan make:controller PostController

Dans PostController.php :

public function index() {
    $posts = Post::where('is_published', true)->get();
    return view('posts.index', compact('posts'));
}

public function show(Post $post) {
    return view('posts.show', compact('post'));
}

Création du frontend avec Blade 🎨

Nous mettons en place des vues Blade pour afficher les articles sur le site :

• resources/views/posts/index.blade.php (liste des articles)
• resources/views/posts/show.blade.php (détail d'un article)

Exemple d'affichage :

@foreach($posts as $post)
    <h2>{{ $post->title }}</h2>
    <p>{!! Str::markdown($post->excerpt) !!}</p>
    <a href="/posts/{{ $post->slug }}">Lire la suite</a>
@endforeach

Affichage des articles en Markdown ✍️

Les articles sont enregistrés au format Markdown et convertis en HTML.

{!! Str::markdown($post->content) !!}

Cela permet d'écrire des articles enrichis facilement.

Création d'un composant Livewire pour les badges 🏷️

Nous générons un composant Livewire pour afficher un badge en fonction du type d'article.

php artisan make:livewire BadgeType

Dans BadgeType.php :

public $type;
public function render() {
    return view('livewire.badge-type');
}

Dans resources/views/livewire/badge-type.blade.php :

<span class="badge {{ $type == 'tutoriel' ? 'badge-success' : 'badge-info' }}">
    {{ ucfirst($type) }}
</span>