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.

app.blade.php

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

    @livewireScripts
</body>
</html>

Filament installation

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

terminal

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).

terminal

php artisan make:model Customer -m

terminal

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.

Models

app/Models/Customer.php

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

    protected $fillable = [
		'name',
		'email',
		'phone',
		'address',
		'city',
		'state',
		'zip',
		'country',
		'company',
		'website',
		'notes'
	];

app/Models/Currency.php

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

	protected $fillable = [
		'name',
		'code',
		'rate',
		'notes'
	];

Database fields

database/migrations/...create_customers...table.php

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();
        });

database/migrations/...create_currencies...table.php

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

database/seeders/DatabaseSeeder.php

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.

terminal

php artisan migrate:fresh --seed

Filament resource creation

This will create a resource for Customer with pages.

terninal

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

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

terminal

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.

app/Filament/Resources/CustomerResource.php

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(),
		]);

app/Filament/Resources/CurrencyResource.php

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.

app/Filament/Resources/CustomerResource.php

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

app/Filament/Resources/CurrencyResource.php

	$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

Setup laravel admin panel in few minutes with laravel filament