In this article, I’m going to introduce you to a powerful and incredibly easy-to-use tool and how it can make your web development much faster and more efficient with just a few commands. With it, you can create your complete project, with a beautiful and intuitive interface in very little time. Shall we go?
Topics
What is FilamentPHP?
What are the advantages of using FilamentPHP?
What do I need to use FilamentPHP?
Installing Filament
Demonstration of using FilamentPHP in practice
Conclusion
References
What is FilamentPHP?
FilamentPHP is a full-stack web development tool, also called TALLKit, as it brings together the 4 knights of TALLStack (Tailwind, Alpine.js, Laravel, Livewire).
With rich and clear documentation, using Filament’s features holds no secrets, you can implement each of them in your project without much effort, thus being a great productivity ally, all this with a beautiful and intuitive interface that you can shape however you prefer.
In the current version (v3.2) Filament provide 8 modules available for use that are: PanelBuilder, Form Builder, Table Builder, Notifications, Actions, Widgets, Infolist Builder and Core Concepts. Each of them sustaining different needs of your application.
What are the advantages of using FilamentPHP?
Ease of use: With FilamentPHP several lines get simplified into a single one. You can easily implement features like filters and search fields in seconds. Just one command can assemble a ready to use form available for customization of your business logic.
Decoupling: Filament modules can also be used independently, without an need to install your entire ecosystem. So, if you want to use just the Form Builder or the Table Builder, you can install them without having to install everything else.
Productivity: With the various facilities that this tool offers, your development becomes much faster. A function that would typically take you hours to complete can now be done in just minutes.
Customizable: No boundaries here. Even if the focus here is on Filament being in manageable panels, we can also use it to create websites for example. With it we are free to use our imagination.
Open-source: That’s right, on GitHub you can clone the Filament repository and add your contribution, in the project’s readme you will find instructions on how to run the project on your device.
Free: We can’t forget the best of all, right? The FilamentPHP is completely free
What do I need to use FilamentPHP?
To use FilamentPHP you need to meet the following requirements:
PHP 8.1+
Laravel v10.0+
Livewire v3.0+
These requirements refer to FilamentPHP v3.2, you can see the requirements for other versions by visiting the Installation tab within documentation. It’s recommended to use the most current version, as it came with many more features than the previous ones and in even more simplified way. However, if you choose a lower version, be aware that some features may not be present or the way they are implemented has changed.
For development in FilamentPHP, it is very important that you have a good understanding of PHP + Laravel, as this way, in addition to making better use of the tool, by understanding this, you can decouple the functionalities more easily, thus enjoying all the advantages of using it.
Installing Filament
To install FilamentPHP, within your Laravel project, run the following command:
After that, run the following command. This will install the Panel:
And finally, to create your panel user, use the command:
And that’s it, now you can access your Filament panel, just run php artisan serve and access the URL localhost:8000/admin and log in with the email and password of the user you created.
Demonstration of using FilamentPHP in practice
In the video above, I demonstrate the creation of a resource using Filament. The Filament resource already comes with the complete and functional CRUD, with its form and tables already assembled.
To create this resource we can follow the following steps:
Firstly, before creating the resource, you will only need 3 things:
Your table in your Laravel project database must be created.
In your Model, the $fillable variable must contain all the fields in your table.
And obviously, have FilamentPHP installed in your project. (Step by step in the previous topic)
You can easily do this as follows:
Use the command below with the name of the model model you want (in this case, my models’s name is Product) with the -m tag so that the migration is already be created together:
In the migration you just created, place the fields you want to add to your table, it should look something like this:
use IlluminateDatabaseMigrationsMigration;
use IlluminateDatabaseSchemaBlueprint;
use IlluminateSupportFacadesSchema;
return new class extends Migration
{
/**
* Run the migrations.
*/
public function up(): void
{
Schema::create(‘products’, function (Blueprint $table) {
$table->id();
$table->string(‘name’);
$table->longText(‘description’);
$table->decimal(‘price’, 8, 2);
$table->timestamps();
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::dropIfExists(‘products’);
}
};
After adding your fields, run php artisan migrate to create the table in your database.
After creating the table, declare the fields of your table in the variable $fillable within your Model as in the example below:
namespace AppModels;
use IlluminateDatabaseEloquentFactoriesHasFactory;
use IlluminateDatabaseEloquentModel;
class Product extends Model
{
use HasFactory;
protected $fillable = [
‘name’,
‘description’,
‘price’,
];
}
And that’s it, now just run for the hug! To create your resource, you will only need the following command (where Product is the name of your model):
// The –generate flag will generate your form
// The –view flag will create the view page
// You can also use the –simple flag so that your resource is based on modals, this is all explained clearly in the documentation
Conclusion
You can get a taste of FilamentPHP’s features by visiting demo, it shows in a pratical way an example of how the components can be used and organized on screen in your project. Filament also has a community on Discord that is always ready to help you and answer your questions.
Furthermore, legend has it that version 4 comes later this year with even more new features.
“Oh, but you are advertising the tool”, I think what is good needs to be shown, right?
So, let’s go to Filament?
References
Thank you very much to @cherryramatis and @clintonrocha98 for all your help with this article, you are awesome 💜🩷
