In this section we will see laravel 9 Filament crud (create read update and delete) app. Filament is a collection of tools for rapidly building beautiful TALL stack apps, designed for humans.
#Requirements
Filament has a few requirements to run:
PHP 8.0+
Laravel v8.0+
Livewire v2.0+
Step 1: Install Laravel & Connect Database
Installing a fresh new laravel 9 application, so head over to the terminal, type the command, and create a new laravel app.
composer create-project laravel/laravel crud
Now, you have to connect the laravel app to the database, hence open the .env configuration file and add the database credentials as suggested below.
.env
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database_name
DB_USERNAME=database_user_name
DB_PASSWORD=database_password
Step 2: Install Laravel Filament
Run below command install filament.
composer require filament/filament:"^2.0"
Create a filament user for admin.
php artisan make:filament-user
Give username, email and password.
Name:
> admin
Email address:
> admin@admin.com
Password:
>
Success! admin@admin.com may now log in at http://localhost/admin/login.
Step 3: Login Filament admin
http://localhost:8000/admin/login
Step 4: Create Post Model and Migration
Run below command to create post modal and migration.
php artisan make:model Post -m
create_posts_table.php
public function up()
{
Schema::create('posts', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->string('slug')->unique();
$table->text('content');
$table->text('image')->nullable();
$table->boolean('is_published')->default(false);
$table->timestamps();
});
}
App/Modal/Post.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Post extends Model
{
use HasFactory;
protected $fillable = [
'title',
'slug',
'content',
'image',
'is_published'
];
}
run migration
php artisan migrate
Step 5: Create a Post Resource
Run below to command post resource
php artisan make:filament-resource PostResource
Step 6: Create a Post Filament CRUD
Filament/Resources/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\Resources\Form;
use Filament\Resources\Resource;
use Filament\Resources\Table;
use Filament\Tables;
use Illuminate\Database\Eloquent\Builder;
use Illuminate\Database\Eloquent\SoftDeletingScope;
use Filament\Forms\Components\TextInput;
use Illuminate\Support\Str;
use Closure;
use Filament\Forms\Components\Card;
use Filament\Tables\Columns\TextColumn;
use Filament\Forms\Components\Select;
use Filament\Forms\Components\RichEditor;
use Filament\Forms\Components\Toggle;
use Filament\Tables\Columns\BooleanColumn;
use Filament\Forms\Components\FileUpload;
use Filament\Tables\Columns\ImageColumn;
use Filament\Tables\Filters\Filter;
use Filament\Tables\Filters\SelectFilter;
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()->schema([
TextInput::make('title')
->reactive()
->afterStateUpdated(function (Closure $set, $state) {
$set('slug', Str::slug($state));
})->required(),
TextInput::make('slug')->required(),
FileUpload::make('image')->image(),
RichEditor::make('content')->required(),
Toggle::make('is_published')
])
]);
}
public static function table(Table $table): Table
{
return $table
->columns([
TextColumn::make('id')->sortable()->searchable(),
TextColumn::make('title')->limit(20)->sortable()->searchable(),
TextColumn::make('slug')->limit(50)->sortable()->searchable(),
ImageColumn::make('image'),
BooleanColumn::make('is_published')->searchable(),
])
->filters([
//
])
->actions([
Tables\Actions\EditAction::make(),
])
->bulkActions([
Tables\Actions\DeleteBulkAction::make(),
]);
}
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'),
];
}
}
Read Also
Laravel 9 Add Simple Sidebar with Tailwind CSS Example
How to Use Carousel Slider in Laravel 9 Example
Laravel 9 Posts with Tags Many to Many Relationships Example
Laravel 9 Insert Category in Posts CRUD Example
How to Use Ckeditor 5 in Laravel 9 Vite with Tailwind CSS
Laravel 9 Simple Image Upload in Ckeditor 5 Example
Laravel 9 Flash Message Timeout and Hide Message Example
Install & Setup Markdown Editor in Laravel 9
Nuxt 3 Data Fetching Using Laravel 9 Api Example
Laravel 9 Image Upload with Preview using Tailwind CSS & Alpine JS
Laravel 9 with Tailwind CSS Form Validation Example
Laravel 9 Backend Api Connect with Vue 3 Using Axios Example
Laravel 9 Authentication with Next js Example
Laravel 9 Sanctum Authentication with Nuxt JS Example
Laravel 9 Simple Search with Pagination Example
Laravel 9 Install Setup TALL(Tailwind, Alpinejs, Livewire) Admin Panel
How to Fix and Clean Code Style in laravel 9
Laravel 9 Image File Upload Example
3 Way to Create Slug in Laravel 9 without Package
How to Add Dark Mode in Laravel 9 with Tailwind CSS