Once you’ve installed FilamentPHP and set up the admin panel, creating a CRUD resource is one of the most common tasks. In this tutorial, we’ll walk through building a CRUD interface for a blog post system, covering how to manage blog posts through Filament's admin panel.

Step 1: Scaffold the Blog Post Resource

Filament makes it easy to generate CRUD resources for any Laravel model. Use the following artisan command to scaffold a new resource for BlogPost:

php artisan make:filament-resource BlogPost

This command generates:

• A BlogPostResource class in App\Filament\Resources.
• Pre-defined methods for managing forms and tables.
• Default views for listing, creating, editing, and deleting records.

Step 2: Define the BlogPost Model

Before proceeding, ensure you have a BlogPost model and database migration set up. If it doesn’t exist, create it:

php artisan make:model BlogPost -m

Update the migration file (database/migrations/xxxx_xx_xx_create_blog_posts_table.php) to include the necessary fields:

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

Run the migration to create the blog_posts table:

php artisan migrate

Step 3: Configure the BlogPost Resource

Open the BlogPostResource class located in App\Filament\Resources\BlogPostResource.php. Customize the form() and table() methods to define how the data will be displayed and managed.

Define the Form Fields

The form() method specifies the input fields for creating and editing records:

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

Define the Table Columns

The table() method configures the columns displayed on the index page of the resource:

protected static function table(Table $table): Table
{
    return $table
        ->columns([
            TextColumn::make('title')->sortable()->searchable(),
            TextColumn::make('author')->sortable()->searchable(),
            TextColumn::make('created_at')->label('Published Date')->date(),
        ])
        ->filters([
            Filter::make('author'),
        ])
        ->actions([
            Tables\Actions\EditAction::make(),
        ])
        ->bulkActions([
            Tables\Actions\DeleteBulkAction::make(),
        ]);
}

Step 4: Add Resource Navigation

To make the BlogPostResource accessible in the admin panel, Filament automatically registers it in the sidebar. You can customize the navigation label and icon by modifying the BlogPostResource class:

protected static ?string $navigationIcon = 'heroicon-o-document-text';
protected static ?string $navigationGroup = 'Blog Management';

Step 5: Test the CRUD Resource

1. Access the Admin Panel
   Visit your admin panel URL (e.g., http://your-app-domain/admin).
2. Navigate to Blog Posts
   Click on the "Blog Posts" option under "Blog Management" in the sidebar.
3. Create a New Blog Post
   • Click the “Create” button in the top-right corner.
   • Fill out the fields (e.g., title, content, author).
   • Click “Save”.
4. Edit or Delete Blog Posts
   • From the Blog Posts list, click the “Edit” button next to a post to modify it.
   • Use the “Delete” button to remove a post.

Step 6: Enhance the Resource

Add Validation Rules

You can add Laravel validation rules to ensure data integrity:

TextInput::make('title')
    ->required()
    ->maxLength(255)
    ->rules('unique:blog_posts,title'),

Conclusion

With FilamentPHP, creating a CRUD resource like "Blog Posts" is straightforward and efficient. By following this tutorial, you’ve set up a functional admin interface for managing blog posts. You can further enhance it by adding custom features like advanced filters, dynamic widgets, or dashboard analytics to improve the user experience.