Laravel 10 Filament CRUD Operation Tutorials

Laravel 10 Filament CRUD Operation Tutorials

Laravel Filament makes it remarkably simple to build rich, customizable admin interfaces. In this article, we'll walk through creating a blog management panel powered by Laravel 10 and Filament. This setup will provide all CRUD (Create, Read, Update, Delete) functionalities and will support features like image uploads, SEO-friendly slugs, rich text content, and publication scheduling.
 

Requirements

 
Before you begin, make sure the following tools and dependencies are available:
 

  • PHP 8.0 or newer
  • Composer
  • Laravel version 10 or higher
  • Filament Admin
  • Spatie Sluggable Package
  • Livewire and Alpine.js


Step 1: Initialize Laravel Project

 
Start by creating a fresh Laravel installation:
 

composer create-project --prefer-dist laravel/laravel blog-panel "10.*"
cd blog-panel


Next, configure your .env with appropriate DB credentials:
 

DB_DATABASE=laravel_blog
DB_USERNAME=root
DB_PASSWORD=root


Run the initial migrations:
 

php artisan migrate


Step 2: Setup Filament Admin

 
Install Filament via Composer:
 

composer require filament/filament
php artisan filament:install --panels


Create an admin user account:
 

php artisan make:filament-user

HkcjMmKCfS7xf6Z3gokUAx6o159KFCw8MJ2uUe8p.jpg 10.97 KB

Step 3: Create Blog Model and Migration

 
Run the following command to generate both the model and its migration:
 

php artisan make:model Blog -m


Modify the migration to structure the blog posts table:
 

Schema::create('blogs', function (Blueprint $table) {
    $table->id();
    $table->string('title');
    $table->string('slug')->unique();
    $table->text('description');
    $table->string('image')->nullable();
    $table->date('published_at')->nullable();
    $table->boolean('active')->default(true);
    $table->timestamps();
});


Apply the changes:
 

php artisan migrate


Step 4: Integrate Slug Generation

 
Add Spatie’s Sluggable package:
 

composer require spatie/laravel-sluggable


Update Blog.php Model to use the slug generator:
 

use Spatie\Sluggable\HasSlug;
use Spatie\Sluggable\SlugOptions;

class Blog extends Model
{
    use HasSlug;

    protected $fillable = ['title', 'slug', 'description', 'image', 'published_at'];

    public function getSlugOptions(): SlugOptions
    {
        return SlugOptions::create()
            ->generateSlugsFrom('title')
            ->saveSlugsTo('slug');
    }
}


Step 5: Generate the Filament Resource

 

php artisan make:filament-resource Blog


Step 6: Configure the Blog Resource Form & Table

Open the BlogResource.php file, typically found at:

app/Filament/Resources/BlogResource.php

Inside the form() method, define the fields you want to manage, such as the blog title, content, and publication status. Here’s a basic example:

<?php

namespace App\Filament\Resources;

use App\Filament\Resources\BlogResource\Pages;
use App\Models\Blog;
use Filament\Forms;
use Filament\Forms\Components\DatePicker;
use Filament\Forms\Components\FileUpload;
use Filament\Forms\Components\RichEditor;
use Filament\Forms\Components\TextInput;
use Filament\Forms\Form;
use Filament\Resources\Resource;
use Filament\Tables;
use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Columns\ImageColumn;
use Filament\Tables\Table;
use Illuminate\Support\Str;

class BlogResource extends Resource
{
    protected static ?string $model = Blog::class;

    protected static ?string $navigationIcon = 'heroicon-o-rectangle-stack';

    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                TextInput::make('title')
                    ->required()
                    ->live(debounce: 500)
                    ->afterStateUpdated(fn ($state, $set) => $set('slug', Str::slug($state))),

                TextInput::make('slug')->disabled()->unique(),

                RichEditor::make('description')->required(),

                FileUpload::make('image')
                    ->directory('blog-images')
                    ->image(),
                Forms\Components\Toggle::make('active'),

                DatePicker::make('published_at')->required(),
            ]);
    }

    public static function table(Table $table): Table
    {
        return $table
            ->columns([
                ImageColumn::make('image')
                ->circular()
                ->label('Image'),
                TextColumn::make('title')
                    ->searchable()
                    ->sortable(),

                TextColumn::make('slug')
                    ->searchable(),

                Tables\Columns\IconColumn::make('active')
                ->sortable()
                ->boolean(),

                TextColumn::make('published_at')
                    ->label('Published At')
                    ->date('F j, Y') // Formats the date as "March 3, 2025"
                    ->sortable(),
            ])
            ->filters([
                //
            ])
            ->actions([
                Tables\Actions\EditAction::make(),
            ])
            ->bulkActions([
                Tables\Actions\BulkActionGroup::make([
                    Tables\Actions\DeleteBulkAction::make(),
                ]),
            ]);
    }

    public static function getRelations(): array
    {
        return [
            //
        ];
    }

    public static function getPages(): array
    {
        return [
            'index' => Pages\ListBlogs::route('/'),
            'create' => Pages\CreateBlog::route('/create'),
            'edit' => Pages\EditBlog::route('/{record}/edit'),
        ];
    }
}


Step 7: Make Uploads Publicly Accessible

 
Run this command to enable file access:
 

php artisan storage:link


Ensure the APP_URL in .env is set correctly:
 

APP_URL=http://localhost:8000


Step 8: Launch Your Application

 
Start the local server:
 

php artisan serve


Visit /admin in your browser and login using the admin credentials to access the blog management panel.
 

Final Thoughts

 
With Laravel 10 and Filament, you've constructed a clean, modern blog management dashboard featuring all essential CRUD operations, image handling, WYSIWYG editing, and slug support. This base is easily extendable with relationships, filters, roles, and custom widgets.
 
This setup works well for solo bloggers, internal CMS tools, or even a content-heavy application.
 
Start customizing it further to match your specific content needs!


0 Comments