Filament is an open-source, modern, feature-rich admin panel developed using the TALL stack. Its main goal is to make the web application development and management process much simpler. If you want to create a robust and intuitive admin dashboard for your Laravel application then Filament is here to help. In this guide, we will show you how to set up an admin dashboard using Filament.

What is Filament?

Before setting up the admin dashboard using Filament, let us tell you that Filament is a popular, open-source admin dashboard for Laravel. It provides a simple and friendly interface for managing complex data. By simplifying complex admin tasks and providing a modular architecture, Filament enables developers to focus on building exceptional applications. Let's take a look at how to set up an admin dashboard using Filament.

Filament Admin Dashboard Setup: A Comprehensive Guide

Step 1: Setting Up Authentication

Filament requires authentication to manage access to the admin panel. Follow the prompts to choose your preferred frontend option.

composer requires Laravel/breeze --dev

php artisan breeze: install

php artisan migrate

npm install

npm run dev

php artisan tinker

>>> \App\Models\User::factory()->

Step 2: Configuring Filament

If you are using any permissions then use Filament HasFilamentRoles. Apart from this, you can define custom resources using API in Filament.

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 3: Creating Resources

Creating resources in Filament allows you to interact with your application's data simply. Filament resources are Eloquent models with a CRUD interface. Let's create a resource to manage the Post model.

public function up()

{

Schema::create('posts', function (Blueprint $table) {

$table->id();

$table->string('title');

$table->text('content');

$table->timestamps();

});

}

Step 4: Adding Navigation

Add resources to the sidebar to enhance the usability of your Filament admin dashboard.

use App\Filament\Resources\PostResource;

public function register()

{

Filament::registerResources([

PostResource::class,

]);

Filament Installation Step-by-step Guide:

To install the Laravel Filament panel builder, we need to run these commands in our Laravel project.

composer require filament/filament:"^3.2" -W

php artisan filament: install --panels

Once you have installed it, try to redirect to /admin/login to open the admin panel login page. You will see a new file created at app/Providers/Filament/AdminPanelProvider.php. Ensure it is added to the provider's array in the config/app.php file. If it is not there, you may have to add it manually.

Accessing The Panel:

After deploying to production, it would be recommended that the users who can have access to the admin panel be defined. This can be achieved by implementing the FilamentUser contract on the model class and defining the 'canAccessPanel' method within it.

<?php

namespace App\Models;

use Filament\Models\Contracts\FilamentUser;

use Filament\Panel;

use Illuminate\Foundation\Auth\User as Authenticatable;

class User extends Authenticatable implements FilamentUser

{

// ...

public function canAccessPanel(Panel $panel): bool

{

return str_ends_with($this->email, '@yourdomain.com') && $this->hasVerifiedEmail();

}

}

Main Concepts:

Panels Filament is a container that allows the creation of admin panels. It contains tables, notifications, pages, and actions. After package installation, a default panel is set up for you by the AdminPanelProvider located in Providers Filament and resides in the /admin path. However, Filament allows you to create as many panels as you need.

Conclusion

How to set up an admin dashboard using Filament? It is a straightforward and efficient process that can substantially enhance the manageability of your Laravel application. It will provide you with a solid foundation for building a robust admin panel using Filament and Laravel. You can also get help from a popular Laravel web development company for further information on this.

How to Setup Admin Dashboard Using Filament?

Table of contents

Tags

No Tags Available

Share Your Thought