Setup laravel admin panel in few minutes with laravel filament
Fazail Alam Tue Jul 05 2022

Setup laravel admin panel in few minutes with laravel filament

Getting started

Skip to #Livewire-installation

If you have already created a laravel project, then skip this section.

Create a fresh new laravel project by running the following command:

composer create-project laravel/laravel my-filament-laravel

This will take time depending on your internet connection and machine speed. my-filament-laravel is our project name. After the installation is complete open .env file and comment all the db related variables after DB_CONNECTION. We are doing this because we are going to use sqlite database. Now create a sqlite file under database/database.sqlite. Now install the node packages by running npm i.

DB_CONNECTION=sqlite
# DB_HOST=127.0.0.1
# DB_PORT=3306
# DB_DATABASE=laravel
# DB_USERNAME=root
# DB_PASSWORD=

Livewire installation

Run the following command to install livewire:

composer require livewire/livewire

Then add livewire directives to the welcome.blade.php or app.blade.php file.

<html>
<head>
...
    @livewireStyles
</head>
<body>
    ...

    @livewireScripts
</body>
</html>

Filament installation

Run the following to install filament, current version is ^2.1:

composer require filament/filament

After that you can create user by running php artisan make:filament-user and fill the details in terminal, but i am going use seeder to seed database.

Model and migration

There are two ways of CRUD operation in filament, first is by page, this can useful when you have many fields to enter which doesn’t make to put in a modal and second is by modal when you have less fields for entry. You can use either one. it’s your choice. I will be showing both ways. Below command makes the model and migration(-m flag for migration).

php artisan make:model Customer -m
php artisan make:model Currency -m

Filament Full Page CRUD

Filament Modal CRUD

Fillable and database fields

Lets create a fillable field in our model and fields for database in migration files. Since we are going to use soft delete, we need to add use SoftDeletes; trait to our model.

  1. Models
    ...
	use Illuminate\Database\Eloquent\SoftDeletes;
	...
	use SoftDeletes;

    protected $fillable = [
		'name',
		'email',
		'phone',
		'address',
		'city',
		'state',
		'zip',
		'country',
		'company',
		'website',
		'notes'
	];
	...
	use Illuminate\Database\Eloquent\SoftDeletes;
	...
	use SoftDeletes;

	protected $fillable = [
		'name',
		'code',
		'rate',
		'notes'
	];
  1. Database fields
Schema::create('customers', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('email')->unique();
            $table->string('phone');
            $table->string('address');
            $table->string('city');
            $table->string('state');
            $table->string('zip');
            $table->string('country');
            $table->string('company');
            $table->string('website');
            $table->string('notes');
            $table->date('deleted_at')->nullable(); // for soft-deletes
            $table->timestamps();
        });
Schema::create('currencies', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('code');
            $table->string('symbol');
            $table->float('rate');
            $table->date('deleted_at')->nullable(); // for soft-deletes
            $table->timestamps();
        });

Seeding user

use App\Models\User;
use Illuminate\Support\Facades\Hash;

User::factory()
	->create([
		'name' => 'Fazail Alam',
		'email' => 'fazailalam898@gmail.com',
		'password' => Hash::make('12345678'),
    ]);

Then migrate and seed the database with fresh.

php artisan migrate:fresh --seed

Filament resource creation

This will create a resource for Customer with pages.

php artisan make:filament-resource Customer --soft-deletes

--simple flag will create the resource for modal only.

php artisan make:filament-resource Currency --soft-deletes --simple

Form building

In form method return form schema with those fields which are going to be filled.

return $form
		->schema([
			TextInput::make('name')->autofocus()->required(),
			TextInput::make('email')->email()->required(),
			TextInput::make('phone')->required(),
			TextInput::make('address')->required(),
			TextInput::make('city')->required(),
			TextInput::make('state')->required(),
			TextInput::make('zip')->required(),
			Select::make('country')
				->placeholder('Select Country')
				->options([
					'india' => 'India',
					'usa' => 'USA',
				])->required(),
			TextInput::make('company')->required(),
			TextInput::make('website')->required(),
			TextInput::make('notes')->required(),
		]);
return $form
		->schema([
			TextInput::make('name'),
			TextInput::make('code'),
			TextInput::make('symbol'),
			TextInput::make('rate'),
		]);

Table building

In the table method return table columns with those fields which are going to be displayed.

	$table
		->columns([
			TextColumn::make('name'),
			TextColumn::make('email'),
			TextColumn::make('country'),
		])
	$table
		->columns([
			TextColumn::make('name'),
			TextColumn::make('code'),
			TextColumn::make('symbol'),
			TextColumn::make('rate'),
		])

Thats it, now you can run php artisan serve and go to http://localhost:8000/admin and you will be redirected to login page. Then login in with the credentials that you created. After login you will be redirected to the admin panel. You can see in sidebar there are 3 items dashboard, customers and currencies.

Filament Login Page

Want frameworks news and updates?

Sign up for our newsletter to stay up to date.