Building Robust Admin Panels with Filament and Laravel: A Step-by-Step Guide

Laravel is a powerful PHP framework that provides a solid foundation for developing web applications. Filament is an open-source, elegant admin panel and form builder for Laravel that simplifies creating admin interfaces. This guide will walk you through building a robust admin panel using the latest versions of Filament and Laravel.

Laravel SaaS Starter - Start your next Saas in a day not weeks
Kickstart your next Laravel Saas project in just a day not weeks! With already build features every saas needs
www.laravelsaas.store

Prerequisites
Before we begin, ensure you have the following installed on your development machine:

PHP >= 8.0
Composer
Node.js and NPM
MySQL or any other database supported by Laravel

Step 1: Setting Up a New Laravel Project

First, create a new Laravel project using Composer:

composer create-project --prefer-dist laravel/laravel filament-admin
cd filament-admin

Next, set up your environment variables. Rename the .env.example file to .env and update the database configuration with your credentials:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=filament_db
DB_USERNAME=root
DB_PASSWORD=your_password

Run the following command to generate an application key and migrate the default Laravel tables:

php artisan key:generate
php artisan migrate

Step 2: Installing Filament

To install Filament, use Composer:

composer require filament/filament

Next, publish the Filament assets and configuration:

php artisan filament:install

Step 3: Setting Up Authentication

Filament requires authentication to manage access to the admin panel. Laravel provides built-in authentication scaffolding. Let’s use Laravel Breeze for simplicity:

composer require laravel/breeze --dev
php artisan breeze:install

Follow the prompts to select your preferred frontend option (Blade, Vue, React). For this example, we’ll use Blade:

php artisan migrate
npm install
npm run dev

Ensure you have a user to log in with. You can use Laravel Tinker to create one:

php artisan tinker

>>> \App\Models\User::factory()->create(['email' => 'admin@example.com']);

Step 4: Configuring Filament

Update the User model to implement the Filament HasFilamentRoles contract if you're using roles or permissions. For now, we will ensure any authenticated user can access Filament.

In app/Providers/FilamentServiceProvider.php, define the authorization logic:

use Filament\Facades\Filament;

public function boot()
{
    Filament::serving(function () {
        Filament::registerUserMenuItems([
            'account' => MenuItem::make()
                ->label('My Account')
                ->url(route('filament.resources.users.edit', ['record' => auth()->user()]))
                ->icon('heroicon-o-user'),
        ]);
    });

    Filament::registerPages([
        // Register your custom pages here
    ]);

    Filament::registerResources([
        // Register your custom resources here
    ]);
}

protected function gate()
{
    Gate::define('viewFilament', function ($user) {
        return in_array($user->email, [
            'admin@example.com',
        ]);
    });
}

Step 5: Creating Resources

Filament resources are Eloquent models with CRUD interfaces. Let’s create a resource for managing a Post model.

Generate the model, migration, and factory:

php artisan make:model Post -mf

Define the fields in the migration file:

public function up()
{
    Schema::create('posts', function (Blueprint $table) {
        $table->id();
        $table->string('title');
        $table->text('content');
        $table->timestamps();
    });
}

Run the migration:

php artisan migrate

Next, generate a Filament resource:

php artisan make:filament-resource Post

This command creates the necessary files for the resource. Open app/Filament/Resources/PostResource.php and define the resource fields:

use Filament\Resources\Pages\Page;
use Filament\Resources\Pages\CreateRecord;
use Filament\Resources\Pages\EditRecord;
use Filament\Resources\Pages\ListRecords;
use Filament\Resources\Forms;
use Filament\Resources\Tables;
use Filament\Resources\Forms\Components\TextInput;
use Filament\Resources\Forms\Components\Textarea;
use Filament\Resources\Tables\Columns\TextColumn;

class PostResource extends Resource
{
    protected static ?string $model = Post::class;

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

    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                TextInput::make('title')
                    ->required()
                    ->maxLength(255),
                Textarea::make('content')
                    ->required(),
            ]);
    }

    public static function table(Table $table): Table
    {
        return $table
            ->columns([
                TextColumn::make('title'),
                TextColumn::make('content')
                    ->limit(50),
                TextColumn::make('created_at')
                    ->dateTime(),
            ]);
    }

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

Step 6: Adding Navigation

Add the resource to the Filament sidebar. Open app/Providers/FilamentServiceProvider.php and register the resource:

use App\Filament\Resources\PostResource;

public function register()
{
    Filament::registerResources([
        PostResource::class,
    ]);
}

Step 7: Customizing Filament

Filament is highly customizable. You can change the theme, components, and more. For example, to customize the primary color, update the config/filament.php file:

'brand' => [
    'primary' => '#1d4ed8',
],

You can also create custom pages, widgets, and form components by following the documentation: Filament Documentation.

Laravel SaaS Starter - Start your next Saas in a day not weeks
Kickstart your next Laravel Saas project in just a day not weeks! With already build features every saas needs
www.laravelsaas.store

Conclusion

In this guide, we’ve walked through setting up a new Laravel project, installing Filament, setting up authentication, creating resources, and customizing the Filament admin panel. This should give you a solid foundation for building robust admin panels using Filament and Laravel. For more advanced features and customizations, refer to the official documentation and explore the capabilities of Filament.

Happy coding!

The above is the detailed content of Building Robust Admin Panels with Filament and Laravel: A Step-by-Step Guide. For more information, please follow other related articles on the PHP Chinese website!