Hello, friends I hope you are doing well, in this blog first we create project simple filament PHP crud, then we will create the task and task relationship part, so please do follow each and every step of it.
Are you tired of building admin panels from scratch? Want to create a powerful Laravel dashboard with built-in CRUD, sidebar navigation, dark mode, and more — all in minutes?
In this comprehensive tutorial, you’ll learn how to create a sidebar and a simple CRUD system using Laravel Filament v3 , the most modern admin panel for Laravel. This guide is beginner-friendly and SEO-rich — perfect for developers, freelancers, agencies, and startups.
🌟 What is Laravel Filament? Filament is a beautiful TALL stack (Tailwind CSS, Alpine.js, Laravel, Livewire) admin panel for Laravel applications. With Filament, you can quickly create CRUD operations , custom pages, forms, tables, dashboards, user permissions, and more — without writing tons of boilerplate code.
Why developers love Filament v3:
🚀 Prerequisites Before you begin, make sure you have:
User in your users table📦 Step 1: Install Laravel Filament v3 If you're starting fresh, create a Laravel project:
Plain Bash C++ C# CSS Diff HTML/XML Java JavaScript Markdown PHP Python Ruby SQL composer create-project laravel/laravel filament-crud-demo
cd filament-crud-demo
Now install Filament:
Plain Bash C++ C# CSS Diff HTML/XML Java JavaScript Markdown PHP Python Ruby SQL composer require filament/filament:"^3.0"
Then publish Filament's assets and panel:
Plain Bash C++ C# CSS Diff HTML/XML Java JavaScript Markdown PHP Python Ruby SQL php artisan filament:install
It will ask for the admin panel path (you can press Enter to accept /admin).
Create a super admin user:
Plain Bash C++ C# CSS Diff HTML/XML Java JavaScript Markdown PHP Python Ruby SQL php artisan make:filament-user
Enter the name, email, and password.
Now you can log in at:
Plain Bash C++ C# CSS Diff HTML/XML Java JavaScript Markdown PHP Python Ruby SQL http://localhost:8000/admin
🎉 You now have a clean admin panel with authentication, sidebar, and dark mode support.
🧱 Step 2: Create the Model and Migration We’ll create a simple Project CRUD.
Run:
Plain Bash C++ C# CSS Diff HTML/XML Java JavaScript Markdown PHP Python Ruby SQL php artisan make:model Project -m
Edit the generated migration:
Plain Bash C++ C# CSS Diff HTML/XML Java JavaScript Markdown PHP Python Ruby SQL public function up(): void
{
Schema ::create ('projects' , function (Blueprint $table ) {
$table ->id ();
$table ->string ('name' );
$table ->text ('description' )->nullable ();
$table ->timestamps ();
});
}
Run the migration:
Plain Bash C++ C# CSS Diff HTML/XML Java JavaScript Markdown PHP Python Ruby SQL php artisan migrate
🛠️ Step 3: Generate the Filament Resource (CRUD) Now generate the CRUD automatically with:
Plain Bash C++ C# CSS Diff HTML/XML Java JavaScript Markdown PHP Python Ruby SQL php artisan make:filament-resource Project
This will generate:
ProjectResource.phpCreateProject.phpEditProject.phpListProjects.phpNow visit:
Plain Bash C++ C# CSS Diff HTML/XML Java JavaScript Markdown PHP Python Ruby SQL http://localhost:8000/admin/projects
You’ll see the table, “Create Project” button, and default form.
🎨 Step 4: Customize the Form and Table Open app/Filament/Resources/ProjectResource.php.
Customize the form: Plain Bash C++ C# CSS Diff HTML/XML Java JavaScript Markdown PHP Python Ruby SQL use Filament \Forms \Components \TextInput ;
use Filament \Forms \Components \Textarea ;
public static function form(Form $form): Form
{
return $form ->schema ([
TextInput ::make ('name' )
->required ()
->maxLength (255 ),
Textarea ::make ('description' )
->rows (4 ),
]);
}
Customize the table: Plain Bash C++ C# CSS Diff HTML/XML Java JavaScript Markdown PHP Python Ruby SQL use Filament \Tables \Columns \TextColumn ;
use Filament \Tables \Actions \EditAction ;
use Filament \Tables \Actions \DeleteAction ;
public static function table(Table $table): Table
{
return $table
->columns ([
TextColumn ::make ('id' )->sortable (),
TextColumn ::make ('name' )->searchable (),
TextColumn ::make ('created_at' )->dateTime (),
])
->actions ([
EditAction ::make (),
DeleteAction ::make (),
]);
}
🧭 Step 5: Customize Sidebar Group and Icon You can change where the resource appears in the sidebar.
Plain Bash C++ C# CSS Diff HTML/XML Java JavaScript Markdown PHP Python Ruby SQL public static function getNavigationGroup(): string
{
return 'Project Management' ;
}
public static function getNavigationIcon(): string
{
return 'heroicon-o-folder' ;
}
Now your CRUD appears under a collapsible group in the sidebar.
✨ Optional Enhancements ✅ Bulk Actions You can allow bulk deletes:
Plain Bash C++ C# CSS Diff HTML/XML Java JavaScript Markdown PHP Python Ruby SQL php
CopyEdit
use Filament\Tables\Actions\BulkActionGroup;
use Filament\Tables\Actions\DeleteBulkAction;
->bulkActions([
BulkActionGroup::make([
DeleteBulkAction::make(),
]),
])
🖼️ Custom Dashboard Widgets Want custom widgets like stats, charts, or cards on the dashboard?
Run:
Plain Bash C++ C# CSS Diff HTML/XML Java JavaScript Markdown PHP Python Ruby SQL bash
CopyEdit
php artisan make:filament-widget ProjectStats
Then customize the widget layout in ProjectStats.php.
🧠 SEO Benefits of Using Filament Fast admin dashboard creation – build complete panels in minutesOptimized UI – responsive, accessible, and fast-loadingDeveloper-focused – use Laravel concepts (Eloquent, policies, routes)Extendable – integrate with 3rd party tools like Spatie Roles, Inertia, etc.Tailwind-powered – easily match your design system🧪 Testing Your CRUD Run the server:
Plain Bash C++ C# CSS Diff HTML/XML Java JavaScript Markdown PHP Python Ruby SQL php artisan serve
Then go to:
Plain Bash C++ C# CSS Diff HTML/XML Java JavaScript Markdown PHP Python Ruby SQL http://localhost:8000/admin
Your create page will looks like something below
Edit Page Looks like the below One
On the click of delete, you see the popup message like the one below
Log in and navigate to the Projects page. You can now:
🧱 Step 1: Create Task Migration and Model Plain Bash C++ C# CSS Diff HTML/XML Java JavaScript Markdown PHP Python Ruby SQL php artisan make:model Task -m
Update the migration file: Plain Bash C++ C# CSS Diff HTML/XML Java JavaScript Markdown PHP Python Ruby SQL
public function up(): void
{
Schema ::create ('tasks' , function (Blueprint $table ) {
$table ->id ();
$table ->foreignId ('project_id' )->constrained ()->onDelete ('cascade' );
$table ->string ('title' );
$table ->text ('description' )->nullable ();
$table ->boolean ('is_completed' )->default (false );
$table ->timestamps ();
});
}
Then run:
Plain Bash C++ C# CSS Diff HTML/XML Java JavaScript Markdown PHP Python Ruby SQL php artisan migrate
🔗 Step 2: Define Relationships in Models In Project.php model: Plain Bash C++ C# CSS Diff HTML/XML Java JavaScript Markdown PHP Python Ruby SQL public function tasks()
{
return $this ->hasMany (Task ::class );
}
In Task.php model: Plain Bash C++ C# CSS Diff HTML/XML Java JavaScript Markdown PHP Python Ruby SQL public function project()
{
return $this ->belongsTo (Project ::class );
}
🎨 Step 3: Create Task Filament Resource Plain Bash C++ C# CSS Diff HTML/XML Java JavaScript Markdown PHP Python Ruby SQL php artisan make:filament-resource Task
✏️ Step 4: Update Task Resource Edit app/Filament/Resources/TaskResource.php and define the form and table:
✅ Form: Plain Bash C++ C# CSS Diff HTML/XML Java JavaScript Markdown PHP Python Ruby SQL use Filament \Forms \Components \Select ;
public static function form(Form $form): Form
{
return $form
->schema ([
Select ::make ('project_id' )
->relationship ('project' , 'name' )
->required ()
->label ('Project' ),
TextInput ::make ('title' )->required (),
Textarea ::make ('description' ),
Toggle ::make ('is_completed' )->label ('Completed' ),
]);
}
✅ Table: Plain Bash C++ C# CSS Diff HTML/XML Java JavaScript Markdown PHP Python Ruby SQL use Filament \Tables \Columns \ToggleColumn ;
public static function table(Table $table): Table
{
return $table
->columns ([
TextColumn ::make ('id' )->sortable (),
TextColumn ::make ('title' )->searchable (),
TextColumn ::make ('project.name' )->label ('Project' ),
ToggleColumn ::make ('is_completed' )->label ('Completed' ),
TextColumn ::make ('created_at' )->dateTime ()->sortable (),
])
->actions ([
Tables\Actions\EditAction ::make (),
Tables\Actions\DeleteAction ::make (),
])
->bulkActions ([
Tables\Actions\DeleteBulkAction ::make (),
]);
}
You can also download the above guide by using below link
https://github.com/codehunger-team/How-to-Build-a-Project-Task-Relationship-with-Sidebar-Navigation-in-Laravel-Filament-v3
VIDEO
