
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
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