Introduction and Creating a Fresh Laravel Project
Hello everyone. This is Yamin and in this tutorial I'm going to show you how you can create an admin dashboard easily in Laravel using a package called Filament. So this package will automatically create your model, your table, and you will be able to edit or update those data. So I'll show you everything step by step how we can make an admin dashboard in Laravel from the very beginning. So first of all we'll just create a fresh Laravel project then we'll install Filament in our Laravel project. So first of all let me just go to my folder over here and I'll create a project over here. So let's over here CMD. Let me just zoom in and here I am going to say laravel new. Project name will be LaraFilament. Let's press enter. So it will create a Laravel project. So right now I'll just fast forward the video. So here you can see our project creation is complete and here is the project folder you can see. So let's just go to the app directory. In cmd over here CD LaraFilament. Let's press enter. So now in the project directory let's just run the project: PHP Artisan serve. So I did the spelling mistakes; let's over here PHP artisan. Let me just copy this and I'll go to my browser. Let me just close this and I am going to say about this and here you can see these are freshly created normal project.
Migrations and Preparing to Install Filament
First of all before we install the Filament package we need to migrate all the tables in the database. So right now let me just go to project directory again and let's just run the command over here. CMD we are going to serve here: PHP artisan migrate. Let's press enter. So it will ask would you like to create a database. I am going to serve here yes. So you can see a database is created, database and tables are created. So right now let me just go to the example over here. So right now if I just go around here you can see we have the database table over here LaraFilament over here and user table. So right now what we are going to do is that we will go to the filamentphp.com installation base. So here currently I mean the installation page and I'll give this link in the description so just check it out. So over here you can see installation. So in order to install Filament we need to write this command in our Command Prompt which is composer require filament/filament:^2.4. So let me just copy this and we'll just directly go to our Command Prompt over here and let's paste it over here and we'll press enter. So this will install Filament in our Laravel project. So here you can see the package is installed. So after installing the package you can update some part in the composer.json but it's not necessary right now. So we'll just directly come to this command: PHP artisan make:filament-user. So this command will let us create a user in the user level. So I'll just copy this command PHP artisan make:filament-user and I am going to paste it in the command prompt. If you now press enter it will ask for a name. Let's say the name will be admin. Let's press enter. Then the email will be [email protected] and let's also give a password will be one two three four five six seven eight then press enter. So the user is created. So would you like to show some love for Filament? No. So right now if we just refresh our user table over here you can see user table here you can see we have a user called [email protected] with the password. So right now in order to go to the Filament dashboard we need to go to /admin. So test enter and then it will take us to the Filament login page as you can see. So here I am going to say [email protected] and I will keep the password over here then now if I now click sign in it will take us to the Filament dashboard. So here you can see currently we're in the Filament dashboard and there is nothing over here as you can see.
Generating a User Resource and Displaying Table Columns
So right now you know to see that all the tables over here add. Also in order to make the update or delete for the specific table data we need to just write a command and a few lines of code. So for it let's go to the installation place and open here. Here you can see building resources. We'll just directly go to the building resources and if we now go down here you can see that creating a resource. To create resource obviously we first need to have a model and then for that model we need to write a command over here like this. So for now we only have user table over here so let me just show you for the user table first. So right now I'm just going to copy this command which is PHP artisan make:filament-resource Customers. So shop customer will say User. So resource it will be User and it will be a capital because we are writing this from the model. So let's press enter. And here you can see successfully created User resource. So right now if we just go back to our code over here you can see LaraFilament and if you go to the app then inside the app here you can see a folder called Filament and if I now click Filament resource and in the resource you can see UserResource and UserResource.php. So this is the important one UserResource.php. So since we run this command we sent it to make Filament resource user. So right now if we just refresh here you can see User option over here. If I now click User here you can see it is showing us the user data over here but there is no data basically. So in order to show the user data we need to make some changes over here in the UserResource.php. So over here you can see a return table columns over here. So in order to show the data we need to update this column. So how we can update this in order to update this you can just check out the getting started resource over here. If we just go down here you can see return table columns so here you can see table column name and email. So I'll just copy this then paste over here in the column option. Here you can see public static function table in the column we need to paste this. So in the user table we have name and email. So right now if we just save this then if we just refresh right now over here here you can see we can see that user over here. So right now what I am going to do is that I'm just going to create a fresh table called Customer and I'm going to show you everything how we can add delete edit update everything.
Creating the Customer Model, Migration, and Fillable Fields
Okay. So right now let me just create a model over here. We are going to, sorry here, PHP artisan make:model Customer and we also create the migration at the same time. Press enter. And here you get some model is created. So right now let's go back to our code and we'll just actually go to the database then migration and inside migration we have big customer table. So in this customer table we'll have name, email, and image field. So here I am going to say name. Okay let's just make it nullable. We just copy this name then it will be email and then image. So we'll say email and this will be image. So let's set this. And one more thing we must do and that is we need to go to the models and inside model we can see Customer.php. So here we need to must add the protected fillable over here. So let me just copy this from the User.php. So here you can see protected fillable. I'll just copy this and paste over here in the Customer so it will be name, email, and image. Okay. So if you do not add this protected fillable over here then you won't be able to upload or add the data. Okay. So we can just close this now and this as well. So right now we'll just write the command PHP artisan migrate. So data is migrated.
So right now if we just refresh over here here you can see we have customer table over here and there is nothing in the customer table. So right now let's just insert a random data over here from here. Let's say [email protected]. Let's keep the image field empty then click go. So right now in the customer table we have only one data over here. So right now if we just refresh over here obviously we don't see any customer option over here so in order to see the customer option we need to run this command: php artisan make:filament-resource Customer. So we'll just paste it over here, press enter. So right now if we now refresh there you can see the Customer option. If you now click Customer just like User it is empty right now. So right now let me just copy this from the UserResource. So we'll just go to the app then Filament and inside Filament here you can see CustomerResource.php. So let me just go down and here you can see table columns. So here we are going to say or we are going to paste this whatever we just copied from here in order to show that user data. So we just paste the same thing over here. So right now if we now refresh there you can see you can see that customer data. So right now can we add any customer? New customer here you can see New Customer button over here. If we now click over here, okay so there is no input field in order to add a customer so we need to have some input fields so that we can add some customer. So let's just click cancel over here. So in order to add the input field we need to go to the same page CustomerResource.php and here you can see public static function form return function schema. So inside this we need to mention the input field. So here let me just go to the getting started Filament.com and right now we'll just go down and here you can see form components. Here you can see this has form so from here you can see name record and email is required. So we are going to copy this form component here you can see TextInput::make('name')->required. So we are just going to copy this and we'll paste it over here. So here you can see TextInput it will let us take the input for name and this will let us take input for the email and type will be email. So right now if we save then right now if we just refresh over here and let's go to New Customer of this option and here you can see we have two fields over here. So right now we will be able to add any data from here. If we now give the name and email and if we click Create here you can see notification over here: Created.
Actions: Edit, Delete, and Adding Image Upload Field
So right now let's go to the Customer table and there you can see name and email over here. So right now we have the Edit option. Can you edit it? The thing is yes. Once you just do this part over here create customer it will automatically add the field for the edit option as well. So right now let me just show you can we edit anything. Let's change the customer on Phone: Customer 100A thousand and Customer thousand. Right now if you click Save Changes you can see Saved. So let's go back and over here you can see name and email. So right now we do not have any delete option over here. So in order to add the delete option that is super simple. Here if we just go to the CustomerResource.php and then if we just go down over here in the static function table over here you can see actions here you can see EditAction. So we can just add one more action and that is DeleteAction. So stop edit we are doing this over here: delete. If we now set this then refresh here and here you can see the delete button. If I now click Delete it will ask confirmation: Are you sure to delete this? If I click Confirm it will delete data. Here you can see. And now let me just show you the image option how we can add images or update image. So in order to add the image what you need to do is that here you can see that form schema. In the schema we are going to add the image field. So let me just copy this, paste it over here. So instead of TextInput we are going to show over here FileUpload::make('image') and stop. Image. We are going to serve here image and let's just remove the email option. So if this will be required. So one more thing that you need to do is that when you are using the FileUpload you need to add one more line. So let me just go over here Filament.com and here we have the search option. You can search anything from here. FileUpload let's say this one field and over here you can see when you are using the FileUpload you need to add this at the top: use Filament orms orm ields ileupload. So I'll just copy this and I'm going to paste it over here at the top. Okay. Let's save this and let's just refresh over here and here you can see we have an image upload option over here. So let's just give a name over here. Let's say John. [email protected] and let's just add the image over here. Let's just choose a random image from here and it will show us the preview. Then here you can see Create option. We'll just click Create and there you go. So right now images uploaded. Obviously here you can see the image name and if you now refresh our table here you can see the image field or image data over here. But right now if you go to the customer table there you can see there is no image field so we need to add the MSP. So for it we just need to go to the table column option and here it will just copy this and paste over here and here we are going to say TextColumn::make('image') and it will be image. So right now if we set this then if we now refresh over here we will not see the image over here properly. Here you can see we have a broken image. The thing is we uploaded all the data we upload in the Filament is stored in the storage folder. Over here you can see in the storage folder all the images will be stored. Okay let me just show you in the storage then app and here you can see public folder and here you can see the image that we just uploaded. So all the images will be uploaded in the storage folder. So what you need to do is that we need to connect this storage folder with our public folder. So in order to do that we need to write a command over here and we need to serve here PHP artisan storage:link. So this will add a link with our storage and public folder. So let's just press enter.
Completing Image Setup, Filament Features, Authentication, and Outro
And right now if we just go to the public folder here you can see a storage folder connection over here. So right now if we refresh over here we still not see the image even though the connection is made. The thing is here you can see APP_URL over here so whatever we have over here we need to have the same thing in the .env. So if we now go to the .env here you can see LOCALHOST. So instead of localhost we are going to serve here this value and you also need to remove this slash from here. Okay like this. So right now let's set this and right now if we refresh over here we can see the image over here. So you can increase the image length and you can even make it as round or any height and any width so you can just see the documentation to do that. And there is a lot more feature over here like you can even add filter option over here at the top of your table in order to search a specific data. So here you can see that in the CustomerResource we have the filter option over here so you can just search it in the documentation how we can add filter in the table. You can do everything over here. You can change the design of your admin dashboard if you want. You just need to check out the documentation place over here. You can see form builder, table builder, notification, admin panel — everything you will find in the documentation. And one more thing I would like to mention is that if you are using the user table for storing other user data then you need to make sure you have done the authentication part. So here if you go to the Users option over here and click the authentication access to admin panel you can just follow the process from here. And one more thing that you can do is that you can use middleware for login. What I mean is that you can have like user type over here: user type will be admin or user and you can verify the user by using middleware. So if you want to know how to add middleware in your Laravel project then you can check out the video on the channel. So I hope you like this tutorial. If you have any question you can always let me know in the comment section and if you want to suggest me a different kind of video to make you can do that as well. Make sure to subscribe and I hope to see you in the future tutorials.
