hey guys welcome back today we're going to start off from the basic and create crowd Pages for our application so by default a lot of All Ships with a user's table and since you have already migrated our database we're going to start off by creating the crud operations which is create read update delete using filament in just a few lines of code and if you manage so let's get started with that now in order to First create these Pages uh we need to use PHP artisan and if you just go ahead and type in PHP arts and make just hit enter a lot of people would go ahead and actually give you the list of available commands if you just scroll down filament actually has added a few extra commands for us so we have filament page filament panel relationship manager resource team a user and widget now we're going to be covering I believe all of these throughout the course but for now we're going to be taking a look at a lot of will make filament resource and what this will do is basically it will create the basic crowd Pages for a model on our database so I'm going to go ahead and basically I have already copied it so I'm going to say PHP artisan make filament resource and then you need to give it a model on your application so by default we already have a model which is going to be the user model now you can go ahead and create your own migration and models but I'm going to be using this one for now so I'm just going to go ahead and give it user and hit enter and filament will go ahead and create some new files for us so let's take a look look under your app and filament there should be a new folder and then now we have a new folder of resources and inside that folder we have a user resource.php and here we're going to Define everything regarding our database schema and then we have a user the resource page we're not going to be touching that for now that's if you want to customize the individual crowd pages but let's hold on on the code first let's reload our page and now you should have a new section called users and we have a table here obviously it's empty we haven't defined our database table schema yet and then you can also see there is a new user so we have both read and create we also have the ability to edit obviously we don't have we do have one record which is the current admin so we also have edit and we also have the ability to delete them as you guys can see so we have the crowd operations but we can't see anything so let's start off by actually doing that so open up your user resource and these resource files basically it's going to be your model name let's say you have a category it's going to be category Source topic resource whatever your model name is resource this is going to be the main file where you define your database schema and it's going to control what you see on these crowd pages okay so let's start off by first taking a look at this file so this extends the resource class which is going to be the majority of the functionality columns here we are defining the model that is going to be controlling these operations so it's over here by default if you type the model name correctly you don't need to touch these here we are defining the navigation icon so it's going to be the icon at the left side okay top left I'll show you guys how you can edit that in a second but let's start off by first taking a look at these two methods which is going to be a form and table now the form is going to be used to define the schema for your create and update operations like right now if I do if I go to user create page we basically don't see anything so inside this form function and specifically under this schema is this is where you define what should be showed in this create page and then if you scroll down under the table function there are a few things here we have so we have columns filters actions for now ignore all of these this column section is where you actually Define what should be showed inside this table here okay so let's start off by defining these and see how it works in action so for the schema I I'm going to go ahead and open up our users migration here so we have a name we have an email we have email verified ad and a password now when we are creating a new user we only need the name email and a password so let's add those now filament comes in with a bunch of table resources so we can just go ahead and search for text input now my vs code is already recommending this to me but if you don't have it it's basically inside filament forms component text input if you like you can just go ahead and do it this way okay but I'm gonna be importing it because I don't want the text to be too long on the video and so that's the class and it comes with a make method and this will go ahead and create an input box for us so here inside this make you need to give it the column name on your database so for us for example I have name and email so I'm going to say name and you can go ahead and create as many of these as you would like so here I'm going to create another one for email and I will also create another one for password I'm just going to save it let's go back and take a look and I'm going to click on new user now we have name email and password shown on here so this is how you create basically forms using filament and this is using the form Builder under the hood now if you would like you can also go ahead and give it some additional things such as a require this will make it so is the required field so if I scroll back and I reload we can see this kind of red star here that tells us hey this is a required field now there are some additional helper methods you can call such as email this would make it so uh filament will ensure that is an email and do email validation so right now if I add this it says the email field must be a valid email address so we're the basic validation and you can do the exact same thing for the password as well so right now if I'm using the password we can obviously see it in plain text you can go ahead and give you these text inputs a method of password and this will make it so that's a password input okay very nice so now if I reload the page and we try again now you can see this is actually kind of hidden okay so we can't see what we are typing in which is very nice now there are a few more things we have inside this text input so for example you can also go ahead and give it a select if you would like and it's going to again be inside filament forms components so all of those are under the forms namespace and selects also work the exact same way you can go ahead and make a new select now right now I don't really have anything to select here so I'm just going to go ahead and add it for name just for testing purposes and then for the select you can go ahead and give it call a method of chain call emitted called options and these options accepts basically an associative array okay and you can give it all the options so here I can say test because test and then YouTube another one so let's go ahead and do a Reload and now we can see we have this name here which is a drop down okay very nice now the first one which is going to be uh the key here is going to be what's stored on your database okay so it's going to be test and then the second value is going to be what's shown to the user on the drop down as you guys can see so here I can say test as name and maybe here I go YouTube as a name and if I reload it should be able to exactly distinguish them right so here's we are seeing Tesla's name what's going to be stored on the database is going to be test same for YouTube so let's go ahead and test this out I'm going to try to create a new user Now by default if you're using php10 sorry a lot of all 10 you no longer need to handle uh user password hashing it's kind of already done as a hash inside cast so it will automatically hash the password so we don't need to worry about that so let's go ahead and test this out and see if we are actually able to create a new user okay I'm going to disable these options for now guys we're just going to be using text input so I'm going to go ahead say test user test at test.com and I'm going to give it a super simple password one two three till eight click on create and it's going to give us a success message of created and if I go back to the users now we have two rows now we still can't see these so let's go ahead and take a look at how we can actually add these tables so inside our table method okay so I'm gonna for now close this forms inside this column is actually where we Define what we show inside this table and it works very similar to the forms except the name for these classes are going to be different so instead of text input we have text column okay so you guys can see almost all of the same inputs that you have you should also have the column equivalent and you can go ahead and call make so it works exactly the same way and then you need to give it the column name inside your database okay and you can again have as many of these as you would like I'm going to go ahead and do the same for email I'm even also going to go ahead and do one for ID okay so if we go ahead and we do a quick reload now we should be able to see our ID name and email just like that we have created our basic crud pages so you can go ahead and edit these as well and if you go on edit you should be able to see the same form that we have defined over here okay and I do have I believe my table plus over here if I open up here as you guys can see I have two users on my table just like this and for some reason table plus doesn't have a zoom functionality if you guys know how to zoom please let me know in the comment section below but I have two users and again if I go back we can see these two users and my password was also hashed if you guys can take a look and that's because again because of the audible 10 new casting of password hashing casting so let's go ahead and I'm going to try to edit one of these users I'm going to edit user number two and instead of test user I'm going to say tutorial user we can even change the email now I can also go ahead and update the password so I'm going to say one two three four five six click on Save changes and it will go ahead and save the user for us as you guys can see it changed the tutorial user and Test 2 and the password hash should also change from whatever it is now and if I reload as you guys can see the password hash also changed now let's say guys you only want this a passwords field to be only visible on read only on so one thing you can do is you can go here on your password and go ahead and add a read-only method and if you basically make it by default this is going to be fall through so this will make it so it's read only and if you edit the reload the page I'm no longer able to actually type in here so I'm not sure if you guys can tell I'm trying to type I'm not able to do it as you can see it's just selects it but I'm not able to type the same is also true on the create page now maybe you only want it to be read only on a specific page you can also go ahead and do that this method accepts a set of a functions you need to read only on and then this read only on accepts the pages you want it to be read only on so here I can for example add in create and if I reload the page now I it's read only on the create page but if I only wanted to be read only on edit I change this to edit I reload now I'm able to type the password in if I go ahead and open up the edit page it's back to read only which is very nice now you also have another one called visibility so you can go ahead and also do visible okay to basically control if it's visible or not obviously now it is visible I can say false and now we lose the password so alternative you can say visible on and control which Pages this you know if form input is visible so let's say I only want to show the password on the create page I don't want to give the admin to ability to change the password on edit page so you can just go ahead and add create over here so if I go on the create page we can see my password if I go to the edit page I'll lose the ability to see the password which is very nice so we have covered the very basics of it guys now what if you for example want an image upload you want different types of columns now I'm going to be covering those slowly over the course of the series however if you go on the filament documentation and click on the form Builder you can see there are actually two sections one form Builder and one table Builder so these are separate packages or libraries so the form Builder which is actually used to display the you know create and edit forms and then the table Builder is the package or the stop package used to show these tables so if I click on the form Builder we can go ahead and do that yourself and you scroll down on the sidebar there is actually a section called fields and here we can see all the supported fields that you can have on your forms so so far you use the simplest which is going to be text input and here you can see the namespace for importing it and also how to use it and if you scroll down you can actually see all the available options so so far we've used email and password there is numeric there is tell there is URL and if you guys like I can make separate videos on each of these field lists you can just let me know in the comment section below and I'm going to be referring to them as we go throughout the series but let's say you know you want to use a key value pair okay so maybe you have a Json field or something well and I haven't covered this so you can just go ahead look at all the fields and maybe use the you know key value maybe you want a color picture okay you can go ahead come over here and take a look at the Color Picker and I'll just show you guys how it might work in practice maybe I want to have a color instead of my name I can just go ahead and add Color Picker I'm going to import it do make name just like that okay and I'm going to do a Reload over here open up edit and now we have a Color Picker all right so it's very easy to use all of these different fields now one thing you need to make sure guys is make sure you have your fillable set on your model so things are saving properly but other than that it's very easy to tell you guys last thing I want to cover is how to change this icon at the left sidebar over here so you guys I'm going to zoom in you see this user so I'm going to show you how you can change that let's go back to our user resource go ahead and find this file and if you remember I mentioned this Navigation icon right this is a property that controls this icon and here we have hero icon oh that's for original and then the icon name so in order to change this filament by default uses hero icons so go ahead on Google and just type in hero icon and the website is heroicons.com and so you should get something similar to this it's just a set of SVG icons and if you scroll down it has three types so it has a stroke outline version there is a solid version and then there is like a mini version so you can use any of these that you would like so if you guys notice here we are saying heroicon so it means use hero icons and then that O is for outline I said original right I don't know outline and then if you for example want solid do s and then if you want mini do M okay so I'm going to use outline here and then basically you can copy the name from any of these icons you like so here I'm going to say users and I'm going to copy these users here and then replace anything after that o dash okay so this is how you change the icon for D so I'm going to reload the page and then we get users so let's say I go ahead and I want so this is the outline right let's say I want the solid I'm going to go ahead and replace this o with an s let's do a Reload and we get the filled in version we can also do the exact same thing for the mini as well personally I have never used the Mini version but that's the Mini version okay it actually looks very nice so you can go ahead and use any of these icons I would like super easily let's say I want the battery icon just go ahead copy that boom and that's how you change icons inside filament guys so hope you enjoyed this video if you have any questions you can leave them in the comment section below I'll try to help you guys out or someone else from the community will do that and that's it guys so that's how we create basic quad operations with filament so as always don't forget to smash that like button and hit subscribe so you get notified of the latest videos that I upload and I see you guys on the next episode have a great day bye