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!
Top comments (0)