Laravel Filament Admin Panel Package Tutorial

Laravel Filament Admin Panel Package Tutorial
Laravel Filament Admin Panel Package Tutorial

This video tutorial will show you how to install and use the Laravel filament admin panel. We are going to create a Post model and migrations, and also create filament resources for the post. Laravel Filament admin panel is a TALL (Tailwind, Alpinejs, Laravel, Livewire) package.

Steps for Laravel Filament Admin Panel

Learn more about Laravel Livewire.

1 Create Laravel Project

First, we need to create a Laravel project. Here I’m using the Laravel installer and Laravel valet.

laravel new filament-test

and is creating a project on the filament-test directory.

Master Laravel with full free courses at laraveller.

2 Create Models and Migrations

In this step, we need to create models and migrations to work with filament resources. So we are going to create a Post model and migration.

php artisan make:model Post -m

Now we have the post model and posts migration let’s add the title and description to the posts table.

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

3 Install Filament

Here we are going to install filament and create the user.

composer require filament/filament:"^2.0"
php artisan make:filament-user

4 Create Filament Resources

We need to create a Filament resource for posts. and after we need to modify the resource form and table method.

php artisan make:filament-resource Post

PostResource.php

<?php

namespace App\Filament\Resources;

use App\Filament\Resources\PostResource\Pages;
use App\Filament\Resources\PostResource\RelationManagers;
use App\Models\Post;
use Filament\Forms;
use Filament\Forms\Components\Card;
use Filament\Resources\Form;
use Filament\Resources\Resource;
use Filament\Resources\Table;
use Filament\Tables;

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(
                Card::make()->columns(1)->schema([
                    Forms\Components\TextInput::make('title')->required(),
                    Forms\Components\RichEditor::make('body')->required(),
                ])
            );
    }

    public static function table(Table $table): Table
    {
        return $table
            ->columns([
                Tables\Columns\TextColumn::make('title'),
                Tables\Columns\TextColumn::make('body')->html(),
            ])
            ->filters([
                //
            ]);
    }

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

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

That’s it now we have our first Laravel Filament Resource, so we can create edit, and delete posts.

Admin Panel

Laravel Filament admin panel
Laravel Filament admin panel

Post Resource

post resource
Post resource

Post Form

post form
Post form

Watch the video tutorial.

Leave a Reply

Your email address will not be published.