How To Create A Sidebar And Simple Crud In Laravel Filament V3 Step By Step Guide

image
image
image
image
image
image
image
image
How to Create a Sidebar and Simple CRUD in Laravel Filament v3 (Step-by-Step Guide)

How to Create a Sidebar and Simple CRUD in Laravel Filament v3 (Step-by-Step Guide)

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:

  1. Fast setup
  2. Customizable UI with Tailwind
  3. Supports Laravel 10+
  4. Easy form & table building
  5. Clean sidebar navigation
  6. Livewire-powered interactivity

🚀 Prerequisites

Before you begin, make sure you have:

  1. Laravel 10+ installed
  2. Composer installed
  3. MySQL or SQLite database configured
  4. Node.js and NPM (optional for compiling assets)
  5. At least one User in your users table

📦 Step 1: Install Laravel Filament v3

If you're starting fresh, create a Laravel project:

composer create-project laravel/laravel filament-crud-demo
cd filament-crud-demo

Now install Filament:

composer require filament/filament:"^3.0"

Then publish Filament's assets and panel:

php artisan filament:install

It will ask for the admin panel path (you can press Enter to accept /admin).

Create a super admin user:

php artisan make:filament-user

Enter the name, email, and password.

Now you can log in at:

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:

php artisan make:model Project -m

Edit the generated migration:

public function up(): void
{
Schema::create('projects', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->text('description')->nullable();
$table->timestamps();
});
}

Run the migration:

php artisan migrate

🛠️ Step 3: Generate the Filament Resource (CRUD)

Now generate the CRUD automatically with:

php artisan make:filament-resource Project

This will generate:

  1. ProjectResource.php
  2. CreateProject.php
  3. EditProject.php
  4. ListProjects.php
  5. Navigation entry (automatically added to sidebar)

Now visit:

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:

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:

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.

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:

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:

bash
CopyEdit
php artisan make:filament-widget ProjectStats

Then customize the widget layout in ProjectStats.php.

🧠 SEO Benefits of Using Filament

  1. Fast admin dashboard creation – build complete panels in minutes
  2. Optimized UI – responsive, accessible, and fast-loading
  3. Developer-focused – use Laravel concepts (Eloquent, policies, routes)
  4. Extendable – integrate with 3rd party tools like Spatie Roles, Inertia, etc.
  5. Tailwind-powered – easily match your design system

🧪 Testing Your CRUD

Run the server:

php artisan serve

Then go to:

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:

  1. Create, edit, delete projects
  2. See all entries in a sortable, searchable table
  3. Enjoy sidebar navigation and dark mode

🔐 Securing Filament with Policies

To restrict access, generate a policy:

php artisan make:policy ProjectPolicy --model=Project

Then register it in AuthServiceProvider.php and use Filament’s can() methods in your resource.

📌 Final Thoughts

Laravel Filament v3 is the go-to admin panel solution for modern Laravel apps. With this guide, you’ve learned:

  1. How to set up Filament from scratch
  2. Create a simple CRUD for a Project model
  3. Customize the sidebar, form, and table
  4. Enhance usability with sidebar groups and UI tweaks

You now have a solid foundation for building admin panels, CRMs, dashboards, CMS platforms, and more — without the bloat.


You can Download the boilerplate of the code from the below link

https://github.com/codehunger-team/how-to-create-a-simple-crud-in-laravel-filament-2-step-by-step-guide