How to Become a PRO in FilamentPHP v3 in 4 hours - Complete FilamentPHP Tutorial for Beginners

what's up developer says Dory here and welcome back to a new video where we're going to start a mini series about filament PHP which is a larval package that allows you to quickly and easily build admin panels where you can then manage data and resources now one of the reasons that filament PHP got so popular is because of the stack it uses filament PHP has been completely built with a tall stack which stands for Tailwind CSS a utility for a CSS framework for quickly citing web apps alphine.js which is a lightweight JavaScript framework obviously it uses laravel which is a PHP web framework and finally it uses Livewire which is also a larval package which is useful when you want to build Dynamic web interfaces using server size rendering all these packages and Frameworks creates the tall stack and the tall stack is popular because it allows developers to quickly create modern dynamic web applications using familiar Technologies a while ago I created a larva Nova series which pretty much does the same as filament PHP unlike larval Nova which is a paid product filament PHP provides a similar solution at no cost the biggest difference between those stack wise well larva Nova uses Largo fujs and inertia for front ends other than that they both use Tailwind CSS and laravel now honestly I don't want to start a comparison between two admin panels both are amazing and deserve a complete course without mentioning their differences so this will basically be the last time larva novas mentioned one thing that I like about filament PHP is the fact that they have a free demo available if I navigate to the browser you will see that I have opened demo.filamentphp.com right here you will see an awesome demo of a filament PHP allows you to build so you might wonder what will we be doing well we're going to build pretty much the same admin panel with the same examples now quick note next to the demo they offer incredible documentation which you can find through the home page right here you can click on documentation in the navr get started and you can look up anything that you need take your time and pause the video for a moment go over the functionalities and features see how the documentation works if you want to and start a video when you're ready to start the installation process before you start with this tutorial I pretty much assume that you have created some kind of application before in larville so we're not going to spend too much time setting up a larval project setting up a database connection and so on since I store my demo projects in a workspace directory that I have stored on my desktop I simply need to install a larva project through composer or the larval installer tool so let's get started let's say composer create Dash project we're going to add the dash dash prefer Dash this option we're going to install laravel forward slash laravel and since this video is sponsored by hostinger I'm going to name my project hostinger Dash filament alright let's hit enter and let's create our Largo project the installation process has been done successfully we do need to change directories into our newly created project since filament PHP needs to be installed right inside of it so let's change directories through the CD command where we need to change directories into our hostinger Dash filament projects so let me write down clear all right at the moment of recording filament PHP just released the beta version of their version 3. a beta version is a pre-release version of software that is made available to users for testing purposes the reason why it's still in beta is because live fire versions reads beta version got released and filament PHP depends on Livewire honestly I've tested it before and it seems as stable as it could be which is also one of the reasons why I just wanted to start this video series so the first thing that we need to do is updating our Livewire version to version 3 which we can do by saying composer require Live Wire forward slash Livewire where we then need to define the version so let's say double quotes carrot 3.0 at beta double quotes once we hit enter you'll see that it's installing version 3. all right now filament PHP needs to be installed through composer so let's perform the composer require command the package has been created by filament forward slash filament we're not done yet because we do need to add a column right here double quotes well a set of double quotes and inside of it we need to specify to composer which version we want to use and the version is once again carrot 3.0 which basically means that any version of filament PHP equal or greater than 3.0 Dash stable needs to be installed one more thing outside of our double quotes we're going to add the dash capital W flag which is used to thread warnings as errors which can help prevent potential issues during installation alright let's hit enter and this should install filament PHP for us now one way of checking whether this has worked correctly or not is performing the PHP Artisan commands and let me zoom out a little bit all right now filament PHP will create a couple Artisan commands for you and if we scroll up a little bit to the F section now rare is it right here you will see that filament PHP has added four new artists and commands that we could perform the first command is useful when you want to set up your assets the second command is for translations the search command is to install filament quick notes we have only added filament PHP as a composer package so far we have not installed anything yet and finally it has a command to upgrade your filament PHP version to the latest one now the most obvious in our case is basically to perform the install command so let's give it a try let's say PHP Artisan filament colon install and we're going to add a dash dash panels option to it now let's hit enter all right this has done a couple things for us as it has mentioned right here it has published the assets which are obviously needed to show the admin panel it has cleared the configuration cache the route cache it has compiled the views and it was upgraded in case it was needed now right now it's prompting us asking if we want to start the repo I'm currently not going to do that but pause the video and show some love to filament PHP for now I'm going to say no I want to see whether filament PHP has added new routes that we could access since we have successfully installed it right now so let's say PHP Artisan route column list all right you will notice that it has added three new routes for us well a couple more by three important routes we have the admin route right here which is a get request which should give you access to the dashboard it has an admin forward slash login route which is also a get request which will obviously show a login screen then we have the admin forward slash logout routes which is a post request to log out a user now there are multiple ways on how you could open your projects in the browser I'm simply going to use my preferred method which is through Largo valet so I need to say valet link add my password right here all right it has created a symbolic link so I can navigate to the browser and open a new tab and open the hostinger dash filaments.test route that I have created once we hit enter you will see that it gives you access to the default larva welcome screen now if we change our endpoints to one of the routes that filament PHP has generated for us let's say forward slash admin you will see that we have been redirected to the forward slash admin forward slash login endpoint and this is happening because we haven't logged in yet now we obviously don't have an account well we don't even have a database connection to store users so let's set up our database connection before I show you how we could create a user to access the dashboard because it does not support anything to register a user all right in phpstorm I'm going to open the dot EMV file in the root over directory right here we need to change three environment variables the first environment variable is the DB underscore database which has been set equal to larval or we should set it equal to a database name that we want to use so in our case let's say hostinger underscore filament then we need to change the DB underscore username my username is root so I don't need to change it and finally we need to change the DB underscore password which should be the password of the user roots and in my case this is dari1234 now larval has added a pretty cool feature recently so let's navigate back to iterm and let's perform the PHP Artisan migrates commands even though we have not created our database yet once we hit enter you will see that Artisan prompted us with a message saying that the database hosting an underscore filament PHP does not exist on the MySQL connection would you like to create it let's say yes and as you can see it has created our database and it has a run our migrations now let's quickly perform the PHP Artisan command for a moment and let's scroll up to the filament section again right here you will see that it does not offer a command to create a user well it actually does but we're looking at the wrong commands I kind of lie to you since next to the filament colon commands it has created a set of commands under the make section right here I'm not going to cover these right now but we're going to use the make colon filament user Command right here so let's say PHP artisan make colon filament Dash user alright it has prompted us with a box asking us for a username so let's say code with Dory I need to add my email which is info codewordari.com and then my secret password which I won't share with you all right Artisan prompted us with a success message now with a user that we just created we should be able to log in on the login screen right here and honestly one thing I like about filament PHP is their incredible design so let's add our email so info at codewydra.com and my password and I'm gonna take the remember me check box and I'm gonna sign in as you can see we're logged in into our admin panel which out of the box comes with a dashboard page with two simple widgets right here next to the dashboard page it offers a drop down in the top right corner and if we click on it you can see that we can switch between light mode and dark mode or basically the system team but less toggle light mode for a moment and my eyes started to hurt but it does look kind of nice now the endpoint at filament PHP uses by default is the forward slash admin endpoint as you can see right here which is completely fine by me but keep in mind that it is super easy to customize this filament PHP comes with its own service provider where you can adjust the endpoint let's navigate back to phpstorm let's open the app directory the providers directory where you can see that filament PHP has created a filament subdirectory and in here you will find an admin panel provider once we open it you'll find one pretty important function which is the panel function right here it does a lot and we will cover a lot of the things along the way you will see that both in the ID and path methods that are changed right here on the panel object a string of admin have been configured and if we change this to let's say dashboards and let's change it for the path as well navigate to the browser and refresh our forward slash admin endpoint you will see that we have been prompted with a 404 because the route does not exist anymore and if we replace admin with let's say dashboard you will see that we have been redirected to our admin panel again and honestly I find dashboard more suiting so I'll stick to a dashboard for now now before we wrap up the video I want to quickly show you one more thing we most likely won't be using it but it is important to be aware of filament PHP while larva in general allows you to publish configurations which basically means that you can copy configuration files from a package or the framework itself into your own applications config directory this allows you to customize the default behavior of the package or framework to better suit your specific needs now to publish a configuration we need to navigate to the CLI because Artisan needs to help us and let me perform a clear right here now to publish a configuration you would use the PHP Artisan vendor column publish command since there are so many configurations you can publish a Largo prompt you with a message where you can choose your configuration file if we scroll down a little bit with our error up and down you will see a complete list of configurations you can publish with filament right here now you could either click on a configuration right here and publish it or you can copy the name so let's say that we want to publish a tag with the name of filament convict so let me quit the terminal for a moment and right here we can use the PHP Artisan vendor column publish we're going to add an option of a Double Dash tag which basically represents the tag that you see right here so if you want to publish a provider you need to use the provider option which we will set equal to filament Dash convict now once we hit enter you will see that it's prompted us with a message saying that it has copied the configuration file into config 4 slash filament.php which is completely fine currently the filament PHP dashboard appears empty but this is intentional and completely fine as it allows for easy customization to suit your preferences you can adjust the primary color fonts change the logo in the top left corner modify the flavicon and even disable dark modes for the entire admin panel let's start off with the most notable one which is the colors of the admin panel these needs to be changed inside the filament service provider luckily we got it open so if you look inside our panel you will see that it has a method named colors chain to it right here we need to define the color of the entire admin panel Now by default filament PHP shifts with six predefined colors and at the moment they have to find one which has been set equal to the color amber the amber color is coming from filament PHP its color class as you can see right here so let's click true on it where you will find tons of color constants which are the color options that Tailwind CSS has to offer now the values right here are all key value pairs where the key is the color tint and the value is the base color these things are created by adjusting the lightness and saturation of the base color with 50 being the lightest as you can see right here where the last one is 950 which is the darkest now let's take two as an example if the base color is still you can use bg-2-50 for a very light slate MBG death slates that's 950 for a very dark teal this allows you to easily create a consistent color palette with a range of Shadows and tints so let's close off the colors class now let's focus on our primary color let's replace the amber color that we have with let's say blue if we then navigate to the browser and refresh it will see that the primary color of our admin panel so basically the dashboard color and the icon has been changed to Blue obviously in most cases you want to use a different color than the colors that Tailwind CSS has to offer filament PHP allows you to generate your own palette based on a singular hex or RGB value if we navigate back to phpstorm you can see that we could basically remove the color class that they have pre-defined for us let's replace it with a spring or we could pass in a string of a hex value so let's say hashtag 674 cc4 once we navigate back to the browser and refresh it you will see that the primary color turned into a purple color we could also pass in an RGB value as a string so let's get rid of our hex code and let's pass in the RGB method or we need to pass in 103 comma 76 comma 196. once we navigate back to the browser and refresh it you'll see that the color has not been changed since we're already inside filament PHP at service provider let's actually have a look at how we can easily change the font family over admin panel we open the Resources directory the views directory you will see that filament PHP has not added any views right here the reason filament PHP does not add it is because it uses the vendor directories to store its views this is a common practice in PHP packages and libraries reviews assets and other resources are bundled together in the vendor directory for Easy distribution and installation now you can't make any changes inside the vendor directory because once you run the composer update commands all your changes will be gone and we could also not add a link tag of a new Google font inside a hat tag of our HTML document to change the font because we only have the welcome.blade.php file luckily we could chain a method to our panel object so let's say right below the color off you'll probably guessed it it font in case you want to change the font I recommend downloading it from Google fonts store it inside a newly created directory named fonts in either the public or Resources directory and use it right here quick note by default filament PHP uses the enter font if we navigate back to Google Chrome refresh it you will see that the font is still the same and let me actually zoom in a little bit if we navigate back to phpstorm and replace enter with let's say pop-ins navigate back to Google Chrome refresh it and right here you will see that the font has been changed and honestly I'm kind of a fan of this Poppins font so let's keep it as it is now when creating an admin panel you most likely want to replace a logo with your own as quickly as possible you might be wondering how you could do that since I just mentioned that filament PHP has a view stored inside the vendor directory now one advantage of using the vendor directory is the fact that you can easily override certain files so let's see how this works if we navigate back to phpstorm open the vendor directory for a moment scroll down and search for the filament directory inside of it open it now let's open the filament directory inside of it and in here you will find a couple directories which should sound familiar to you and one of them is the Resources directory where you will you guessed it store resources such as views JavaScript files styling and many more now let's open the views directory for a moment composer directory and scroll down again where right at the bottom you will find a logo.blaze.php file what we need to do right here is recreating this pass inside our own Resources directory where we could overwrite the particular logo.blade.php file so let's do that let's scroll up inside our views directory we're going to create a new directory let's say vendor and if you add a forward slash right here it will basically create a subdirectory for you so let's say filament dash panels forward slash components now in here we're going to create a new file with the name of logo.blade.php so whatever we add right here will overwrite the logo.blaze.php file inside the vendor directory it's not required to add an image right here which you obviously want but you could even add a string right here so let's say hostinger so if we navigate to the browser refresh it you will see that hostinger has been printed out now let's navigate back for a moment and let's create an image tag right here we do need to define the source just give me a moment let's define the alt tag where we're going to say logo hostinger now let's close off the image tag now there are two things that you could do right here for the source you could just pass in a URL which I have done right now and I will add it in the description down below navigate to the browser refresh it you'll see that it has added hosting or its logo or we could navigate back to phpstorm or what we could do is basically creating a new directory inside the public directory let's name it images what we could do then is basically adding the image inside of it so pause the video do that I will do that too and I'll see you back once that's done if your image is located inside a public directory we could get rid of our URL use curly brackets call the asset method and pass in the path from the public directory so let's say images forward slash hostinger Dash logo.png if we navigate back to the browser refresh it you will see that we have added a logo of hostinger in the top right corner now there's one thing that I want to change and that's the size and since we are using Tailwind CSS we can simply pass in a class right here of let's say height 16. if we navigate back to Google Chrome refresh it you will see that we have changed the size of our logo we could also change the fluffy comb which we need to do through the service provider again so let me open my admin panel provider now let's say right under my fonts method I'm going to chain a new method called favicon then we need to ask the image pass to it now once again I will sort a faficon inside the images directory I will also add a link to the description for the image so you could download it as well for now I'm going to add a path of images forward slash fluffycon.png if we navigate back to the browser refresh it you will see in the top left corner right next to dashboard Dash laravel the title of our page we have added our faficon icon now the final configuration that I would like to show you is disabling dark mode and personally a huge fan of dark mode so I would never disable it myself but I do think that it would be nice to show you how that's done right inside our filament PHP service provider we need to chain the dark mode methods to our panel object again where we need to pass in a Boolean by default dark mode has been enabled so there's no point of passing in true right here since it is the default value but what we could do is basically passing in the value of false which should turn it off so let's navigate back to Google Chrome let's refresh it toggle our icon in the top right corner where you will see that we can't enable dark mode anymore now like I said I love dark mode so I'm gonna enable It Again by removing the dark mode methods filament PHP currently operates solely as an admin panel this means that it does not handle migrations and models out of the box filament PHP uses the functionalities that larva provides we must first create migrations and models in laravel before we can use them in filament PHP I've mentioned that I simply want to recreate the demo app of filament PHP so if we navigate to the browser open the demo click on sign in you will find a couple relationships to the right we have a tab named products a tab name customers a customer can order a product which will be stored inside the orders tab where we have two additional tabs which is categories and I'm assuming that one product can have multiple categories and finally we have the brands which is associated to one product so let's navigate to the CLI for a moment now let's create our model and migrations the order of the migration does matter as migrations are executed in the order they were created if a migration depends on a table or column created in the previous migration it is important to ensure that the previous migration has been executed before running the dependent migration so for our example we have to start with the category model and migration so let's say PHP artisan make me a new model let's name it category and let's add a dash m flag to it let's hit enter let's hit the arrow up and let's replace the category model with the brand model the order migration needs to be created after the products and customers model because the relationship depends on those so let's say PHP artisan make me a new model let's name it product Dash M let's set the arrow up again and let's replace product with customer now let me perform a clear right here finally we need to create the order model and migration so let's hit the arrow up and let's replace products with order all right let's navigate back to phpstorm inside the side panel let's open the database directory migrations directory where we're going to start off with our first migration which is the categories table we're going to keep the primary key of ID as well as the timestamps and in between we're going to use our table object we're going to create a string so a far Char with the name of name then on the line below we're going to use our table object again we're going to create a string which will be the slug and the slug needs to be unique then we're going to create a column where the type method is a foreign ID so let's say table foreign ID which creates a new column in the table to store a forward key in our current example we're going to create a parent underscore ID column that references the ID column of the categories table we're going to chain a couple methods to it where the first one will be the nullable method which allows the column to be no then we're going to chain the constraints method to it which sets the foreign key constraint to reference the categories table so we need to pass in a string right here of the table name which will be categories finally we're going to chain one more method to it which will be the Cascade on the elite method which will specify that when a category is deleted all categories that reference it as a parent should also be deleted now let's add two more columns right here let's use our table object and let's create a Boolean with a column name of is underscore visible and it has a default value of let's say false we need one more which will be our table we're going to create a long text with a column name of description and this can be no as well this will be it for our category stable so let's open our Brand's migration and once again we're going to keep our ID and we're going to keep our timestamps and in between we're going to create a table string with the name of name we need a slug as well so let's say table string slug which needs to be unique then a brand has its own website URL so let's create a new string where we will pass in the name of URL and the URL can be nullable now I also want to save the color of a brand as a primary hex color MySQL does not support a field where you can store a hex color well it does as a string so let's create another string with the name of primary underscore hacks where we will simply add a string value this field can also be a nullable now I want to add a Boolean right here so that's a Boolean with a name of is underscore visible and this has a default value of false now a brand can have a description as well so let's create that one as well so let's say description and it can be nullable all right let's open the next migration which will be for the products table and I'm going to have an in-depth products table as the example of filament PHP since most of the fields are text fields and I will be repeating myself every single time in the demo the process on video should not take too long so I'm skipping Fields such as a compare at Price cost per item barcode Security Lock and so on right below our primary key we're going to define a foreign key with the column name of brand underscore ID we're going to constrain it on the table Brands and we're going to chain the Cascade on the lead methods to it and let me actually align it on the line below now what does a product have well a product obviously has a name and slug so that's a table string let's say name it has a string with the name of slug which should be once again unique then a product has a SKU which stands for stock keeping unit and the value can consist of letters and integers so let's say table string SKU just like the primary key unique then we need to add a description for our product so let's say table long text description with the value of nullable we need to add the quantity of a product which we will use the unsigned big integer method four with the name of quantity then we need to define the price of the products which will be a decimal then I want to add a table Boolean which will be the is visible column and it has a default value of false and I'm going to add one more Boolean so let's say table Boolean with a column name of is featured and I'm going to change the default value and obviously and not all products are featured by default so let's pass in a false value now the products in our application can have two types it can be a deliverable product or a downloadable product and the way I'm going to Define this is through my table object I'm going to create a new enum where the column name will be type where I'm going to pass a second argument of an array with the values for my type column so the first one will be deliverable while the second one will be downloadable I'm gonna add a default value right here of deliverable now the last column that I want to add is a dates column with a column name of published underscore ads all right now let's open our customers migration and in between the primary key and timestamps we're going to add a column which is a string with a column name of name we're going to use our table string again which will be the email of the customer which needs to be unique then I'm gonna use a string method again because I need a phone number of a user I'm going to use the table object to create a new date which will be the date of birth then I need the address of a user which will be a string I need the zip code of the user so that's a table string zip code and finally I need the city I actually forgot one thing and that was defining the enum that we have defined inside our products migration let's create a new directory inside our app directory and let's name it enums and inside our enums directory we're going to create a new file with the name of product type enum dot PHP now the first thing that we need to do inside a new PHP file is defining the opening tag we're going to define the namespace which will be app backslash enums then we're going to define the enum by defining the keyword enum followed with the name of our enum which will be the same as the file so let's say product type enum we're gonna type in it to a string where in here we need to Define two cases case number one will be deliverable in all capitals which is a string of deliverable and the second case is downloadable which will have a value of downloadable and lowercases all right now let's open our last migration which is for the orders table and we're going to define a foreign key constraint again which will be the customer underscore ID it is constrained on the table customers and we're gonna chain the Cascade on the lead method to it now the order has a unique number so let's define a table string with a column name of number and it needs to be unique it has a total price column which will be a decimal so let's say total price 10 and two it has another column which defines the status which is an enum of the values pending processing completed and declined so let's say table enum it is the status we're gonna pass in an array with the values of pending processing completed the clients and it has a default well let me align it on the line below of pending now we're almost done because we need a column for the shipping price so let's say table decimal the column name is shipping underscore price and it can be nullable because a product can be downloadable as well so two more columns we have a table a long text which will have a column name of notes and we have a table soft deletes there are two things that we need to do for the orders table we need to create our enum and we need to make sure that we enable the soft at least rate on our order model well I actually need to do three things because I have a small typo right here all right now let's scroll up let's create a new enumclass let's name it order status enum dot PHP let's create the opening PHP tag let's add a namespace of app backslash enums we're gonna Define our enum named order status enum and we're going to type into three string we have case number one which is pending which has a value of a string pending we have case number two which will be processing which has a value of a string processing case number three is called completed which is a value of a string completed and finally we have case number four which is the client which we need to set equal to a string of the clients all right now let's open our models directory and let's open our product model now let's open our order model so let's add a comma right after the hash Factory trade and let's name it soft deletes now we're obviously not done we still need to define the fillable property on all of our models and we need to Define all the relationships as well let's start off with the fillable properties on our models from top to bottom now quick note I know that you can use the guarded property as well but I personally prefer to use the available property over the guarded property because it provides more explicit control over which Fields can be Mass assigned with guarded any field not listed in the array can be Mass assigned which can lead to potential security vulnerabilities on the other hand with fillable only the listed fuels can be Mass assigned providing more security and control in case you want to use the guarded property it's completely up to you since it won't affect what we're going to do but for now let's open our brand model and right below our trade we're going to Define our protected fillable property which we're going to set equal to an array or we need to pass in a couple column names so that's a name we have the slug we have the URL we have the primary underscore hex we have the is visible Boolean and we have the description now let's move on to our second model which is the category model so let's define the protect its fillable again but we're going to pass in the columns name slug parent underscore ID is visible and the description then we have the customer model which has a protected fillable property defined again with quite a lot of values so let's say name email phone number well phone the date of birth we have the address we have the zip underscore code and we have the city let's open our order model which has a protected fillable property which you have guessed already with the values of customer underscore ID the number the total underscore price the status is shipping underscore price and the notes finally we have the product model so let's define the protected fillable property let's pass in the brand underscore ID the name the slug the SKU the description and I want to double check whether I forgot one column let's open the products table and I have actually forgot it which will be added right below the SKU which will be a table string of image which will be the image of the products so inside our let's say product model we're gonna add the image quantity the price is visible is featured the type and the published underscore ads all right the final configuration is the relationships between our models so let's close off all files that we have open and let's open our brand model so I'm going to work from top to bottom again since one product has one brand a brand can have multiple products right so let's define the first relationship let's say product function brands well let's type into 2A has many now that's return this has many and what it has is a product colon colon class and that's it now let's move on to our second model which is the category model well we said that it can have a relationship with itself right it has a parent ID column which can be nullable so let's define a public function parent let's return this belongs to and what it belongs to is a category class but we also need to define the foreign key which will be parent underscore IDE let's type in this to a belongs two and since a category can have a parent as well it should also have a child so let's define a public function child where the child needs to return this has many and it has many categories as well where the foreign key is parent underscore ID as well and let's type in it the way it has many now we're not done here because we need to Define one more relationship and since a product is associated with one category one category can have multiple products attached to it so let's define that relationship as well let's say public function products and let's return this belongs to many I made a typo and it belongs to the product model now let's type in this to a belongs to many all right now the customer model has no relationships for now but what about our order model well we have only defined one relationship in it which is the relationship with the customers table since one order is made by one user so let's define a new public function customer so singular and let's return this belongs to you and where it belongs to you is the customer class now let's type into it to a belongs to and that's it now do you think that we're ready oh well we actually missed one on purpose obviously one order can have many products while a product can only be attached to one order so we need to Define that one too many relationship so let's see how we need to Define it let's go right below our customer function and let's define a public function items method what we're going to do right here is basically return this has many now we have in the five what we need to pass in so let's type in this quickly to where it has many so what about the argument inside the has many methods what I recommend right here is making an order item model which will Define the order ID product ID the quantity and the unit price so let's navigate to the CLI and let's say PHP artisan make me a new model and let's name it order item and we're going to ask the dash m flag to it now let's navigate back to phpstorm let's open the recently created migration where we're going to define a foreign key so let's say table for an ID this for an ID you will have a name of order underscore ID we're going to chain the constraint method to it and it constraints the table orders and we're going to chain the Cascade on the lead methods then we need to define a second foreign key so let's say table foreign ID the foreign ID will be product underscore ID we're going to change the constraint method to width with the name of products and we're going to chain one more method named Cascade on delete now we need to add two more columns where the first one will be a table unsigned big integer of quantity and we're going to define a table decimal for the unit price now let's open our newly created order item model where we first need to Define our protected fillable property but we're going to set the order ID we're going to set the product ID we're going to set the quantity and the unit underscore price we don't need to define a relationship inside our order item model since the relationship needs to be defined inside the order module and well we have to find the method so the only thing we need to do right here is passing in the order item model and a class I think that we have one model left which is the product model so which relationships do we have right here well one product is associated with one particular brand so let's define a new public function brand so a singular brand where we're going to return this belongs to and it belongs to the brand model let's type into it belongs to all right now does it have more oh well it does have one more relationship which is between the product and category model where one product can have many categories but one category can have many products as well so we need to define a pivot table between the product and category model so let's navigate to the CLI for one more time and let's define a PHP artisan make me a new migration command let's name it create underscore category underscore products underscore table all right now let's define it by navigating back to phpstorm opening our migration and we don't need the primary key for our pivot table and we also don't need the timestamps so let's define two foreign keys for the category ID and the product ID so let's say table for an ID the foreign ID is the category underscore ID it is constrained on the table categories and it needs to be Cascade on delete now one more which is the name of product underscore ID it is constrained on the table products and it is also a Cascade one delete now let's define one more relationship inside our product model which is the public function categories like I've said this is a many-to-many relationship so let's return this belongs to many and it belongs to many categories let's type in this the way it belongs to many and I want to chain one more method to the belongs to many methods which is the width timestamps the with timestamps method as a created underscore at and the updated underscore add timestamps to the pivot table that connects the product and category model this allows for tracking when the relationship was created or updated now there's one more thing left and that's navigating to the CLI and Performing the PHP Artisan migrate command and as you can see it has migrated all the migrations that we have created in this episode when working with admin panels you will hear the term resources quite a lot and honestly you can pretty much see it as a resource controller where you can Define the crud operations and defining relationships between them resources and filament PHP is nothing different there are classes that Define the data model for a particular resource such as the product or a customer and provide the necessary functionalities to interact with the data all right let's get into creating our first resource and see what we can configure with it filament PHP has created a command for us which we can use to create a resource so let's navigate to the CLI and let's perform the PHP artisan make colon filament Dash resource command and then we should name our resource filament resource name should be in singular form and use Pascal case this means that the first letter of each word in the name should be capitalized and there should be no underscores or spaces between words also keep in mind that the resource name should be equal to your model name this is because their resource class is responsible for defining the data model for a specific resource such as a product or a customer personally I would always say that you should name it the same as the model it represents for clarity and consistency in the code base so in our case let's name it product now what this command does is creating a new filament directory in the app directory so let's navigate back to phpstorm and scroll up and let me actually close off all the tabs that I have open all right let's open the app directory where you will see that we have a new filament directory and once we open it you will find a Resources directory a project research directory and a project resource class now this class has been generated based on the command we just performed it provides the necessary functionalities to interact with the data such as listing creating editing viewing and deleting records this class also extends filament its resource class so how does this look behind the scenes well when a user interacts with the resource filament PHP uses the product resource class to handle the request and manage the data if we navigate to the browser for a moment and open our localhost let's refresh it you will see that filament PHP has created a product step for us once we open it you will see that it has created a list overview well we currently don't have any product so it can't really show anything and this is happening because we haven't really told our product resource what needs to be shown to the user when they either open the table overview or when they create a new product so let's get into it right away let's see what's going on inside our product resource class at the top you will see that filament PHP added two properties for us right here and I'm always quite happy when the naming of properties says a lot the first property right here basically defines the model class which is associated with the class this is also one of the reasons why I said that you should keep the name of your filament resource equal to the model itself because filament PHP will detect the model class then it has a second property right here which defines the hero icon in front of the products tab in the left sidebar now there are tons of other configurations you can set right here and there are too many to cover right now but if you want to check them out you can simply click true on the resource class where you will find all available properties right here now one cool thing about filament that I have to mention is that it works without necessarily covering all properties the question mark that you will see right in front of the data type right here basically indicates that a property can hold a value of either a string or null now there are a couple properties that I want to configure and in the demo app you saw that the tabs product categories orders were all grouped together so let's do that right here as well on the line below we simply need to overwrite the navigation group property so let's say Protect it static string navigation group is equal to let's say shop then I want to change the hero icon in front of the products tab right here to Hero icon Dash o dash bolts once we navigate back to Google Chrome refresh it you will see that we have grouped it under the tab shops now you can also change the navigation label right now its products and I'm completely fine by that but let me show you how you do that let's define a protected static string and it's called navigation label and let's set it equal to let's say test once we refresh it you will see that it has been changed to test so let's navigate back and let's change it to products and that was basically it for now I want to focus on the two most important methods we have the four method right here and we have the table method now the formatted defines the fields that will be displayed in a form used to create or edit a resource the format defines the fields that will be displayed in the form used to create or edit a resource then the table method right here this method is important because it allows developers to customize how the data is displayed in the table and control which columns are visible to the users now since the first view of a user is a table overview I want to start inside the table method right here you can see the same structure as with filament its service provider where it has a couple pre-chain methods on the table object through the table object we can Define The Columns and other aspects of the table view for a particular resource right inside of the columns method it does offer more which we will cover later on such as filters actions bulk actions and way more but for now let's stick with the column right here we basically need to return back an array with the fields now before I start off I've got to mention that you will see me and a lot of others use a text column quite a lot now text column is used as a default column type for all field types in filament PHP because it is a versatile column that can handle different data types such as strings integers and booleans so let's define it let's say text column we need to import filament the backslash tables backslash columns then we need to call the make method where we need to pass in the column name so let's say that the first value of my table overview needs to be the product name then we can add a comma right after it and basically Define our second column so let's say text column again and I want to make the brand dot name and I know that we haven't covered relationships and we will do that later on but for now this will basically look on the brand relationship and it will grab the name of the brand associated with the products the next field that I want to show is the visibility which is a Boolean but I don't want to show true or false to the user what we can do right here is call the icon column where we need to pull in filament backslash tables backslash columns and this is the last time mentioning it because they all come from the same class we need to make the is visible column and then we need to chain the Boolean methods to it now I also want to show the price of a product so let's say tax column again we're gonna make the price now I've got three more left because I also want to show the quantity on the table overview so let's say tax column again make me the quantity two more we have the text column again make me the published underscore ads and finally let's say text column again where we need to make the type now we're missing one which is the image and it's completely up to you whether you want to show it on the table overview I'll just edit so let's just go right above the name and let's say image column make me the image now if we navigate to the browser and let's refresh it you will see that we're still prompted with a no product screen so let's quickly navigate back to phpstorm and connect to our local database to create a product so I'll do that real quick let me connect to my or where is it mySQL database the user is root my password is Dari one two three four then I have my database name which is hostinger underscore filaments once I click on apply and ok you'll see that I have been connected with my database and let me close off this panel and let's open the products table and it's all right if you don't want to create a product we will create the input shields in a bit so we can create one true filament as well but for demonstration purposes it's a little bit easier to show products right now now before we can create our product you can see that we need to define the brand first because it needs a foreign key constraint so let's open the brands table let's create a new row let's say one the name is hostinger the slug is hostinger the URL is hostinger.com the primary hex is hashtag and I've just paste it the visibility is one the description is just hostinger and let's add the timestamps let's perform a query or let's close off the Brand's table and let's create a new product let's say ID is one the brand ID is one as well the name is VPS hosting slog is VPS Dash hosting the SKU is VPS Dash a couple random numbers the image will be skipped for now the description is VPS hosting the quantity is 100 the price is let's say 10 the visibility is true it is featured and the type is downloadable it is published right now and it has been created and updated right now once we perform a query you will see that the image column can't be no so let's basically add a test right here perform a request and you will see that we have inserted a new row now keep in mind that these are just test products an actual VPS hosting is a monthly fee that you have to pay or yearly and work on that functionality basically takes away learning filament PHP but that can be done in another tutorial if you're interested let's navigate back to the browser let's refresh it and right here you will see that we have to find our first product and it only shows the columns that we have specifically defined inside the columns method right here now even though we haven't added an image I do need to mention something real quick and that's because the image depends on the app underscore URL environment variable insider.emv file so if we open our energy file you will see that the app URL is just localhost in order to show images in filament PHP you need to set this equal to the URL you're using so in my case it will be hostinger Dash filament DOT test now even if I go to the browser right now I refresh it it won't show an image but it will do it once we create our actual product through the new product button we're going to cover filters in the next episode so what I want to do right now is working on the form method which like I mentioned before focuses on the views of forms so basically the fuse that will be displayed in the form used to create or edit a resource now if we hover over the row that we have right here you will see well probably not on my screen in the bottom left that it will redirect you to edit the row once we click on it you will see that this page is empty and if we navigate back and click on new product you will see that this page is empty as well and this is happening because in our editor if we scroll up in our product resource you'll see that the form object is empty so let's start building our form just like with a table overview we're going to start with a product name we're not going to define a text column this time but we need to define a text input where we need to pull in filament backslash forms backslash components we're once again gonna call the make method which accepts one argument of a string which is the column name and in our case it will be name if we navigate back to the browser and refresh it you will see that we have added our first input field but we somehow need to make sure that we group these so let's navigate back to phpstorm and let's remove our input field for a moment and the schema method right here is used to define the fields and sections that make up the form or table for a particular resource right but next to just simply adding an input field we could also use the group class where we also need to make a call to the make method where on the line below we need to chain the schema method again pass in an array where right here we can define a section so let's say section let's pull in the class we once again need to make a call to the make method and write on our section we can chain the schema method one more time where in here we can Define our input Fields so let's say text input make a name if we navigate back to the browser and refresh it now let me actually enable dark modes yeah I think this looks a little bit better you will see that it has added a background well basically a panel with the input field that we have defined inside our section so what other fields do we have next to the name well we have the slug which is also a text input so let's make it all right and we have one more which is the description now instead of using a text input right here I want to use the markdown editor of filament PHP with the name of description and I pretty much assume that we all know what a markdown editor is and Mark time editor is a text editor designed to simplify the process of writing in markdown syntax which can then be converted to HTML now let's navigate back to Google Chrome and refresh it and right here you will see that we have created a simple panel with three input fields now there is a small issue that I've got right here and that's because the input seals can be placed next to each other instead of below each other because it's taken quite a lot of space right now which is unnecessary now the schema in filament uses grid for its layout structure so what we could do in our schema method which is right here is basically chain The Columns method where we need to specify the number of columns inside of it so let's say two since we want the name and slog to be next to each other but we also need to chain one method on the markdown editor with the name of column span since the markdown should be spanned full meaning that it should span both columns so let's pass in a string of full and I'll show you right now what I mean let's navigate back refresh it you'll see that we have defined a grid system of two columns so column one is the name and column two is the slug and we've said that the description should span over both columns now let's create a new panel to the right this time since that one is empty at the moment so let's navigate back to phpstorm and right below our first group which ends I think right here we can define a new group well we could Define it ourselves but we could also copy the entire group paste it right below of it navigate back to Google Chrome and refresh it where you will see that we have added two panels next to each other now we don't want the same input Fields so let's navigate back to phpstorm that's delete whatever we have inside the schema method now it's also the list the columns that we have added on it now right now you will see that the section make method is empty but we could pass in a string right here which will basically Define the header so if we say status navigate back to Google Chrome and refresh it you will see that the section has a title of status which is pretty cool in my opinion so let's navigate back and let's define the fields inside of it so what do we want to have to the right Which is less important well we want a toggle for the column is underscore visible then we want another toggle 4D is underscore featured now let's define another one which is a date picker with a column name of published underscore at let's navigate back to Google Chrome and refresh it and honestly it's beginning to look pretty nice right we have created two panels where we have a couple input Fields toggles and a timestamp now we do need to add a couple more fields and I want to add a panel right below the first panel again so let's navigate back to phpstorm now we don't need to make it now we don't need to make a group right below the status because that part will be visible right here what we want to do is basically create it in a section where we have to find the name Slug and description so what we need to do is basically Define the entire section that we have right here inside the group schema so let's go right below the columns now let's paste it right here once we navigate back to Google Chrome and refresh it you will see that we have added the second panel rise below the first panel so let's navigate back to phpstorm let's delete the columns now that's the least the text input field that we have as well so I want to give my section a title of let's say pricing and inventory and I want to define a couple Fields right here the first one is a text input make me the SKU I have another text input which is for the price I have another text input again which is for the quantity but I also want to give the user the option to select the type which is either downloadable or deliverable so for that I'm going to use a select type I'm going to make the type and I'm going to chain the options to it through the options methods let's pass in an array right here because we do need to Define our options where the first option is downloadable and I'm going to keep the value empty for a moment and the second option is deliverable which is equal to an empty string as well now we could add the values static right here but we have to find the e m that we can use so let's say product type enum and let's say downloadable but I'm gonna get the value from it now let's do the same thing for deliverable let's say product type you know deliverable value now the essay that we have once again is if we navigate back to Google Chrome refresh it we have four big inputs fuels right below each other we could basically outline them next to each other and what I want to do right here is chain The Columns method to it and I want two columns next to each other if we refresh it you'll see that this looks a lot better let's add a new section right below our status right here where the user has the option to add an image associated with the products so let's navigate back to let's say phpstorm let's go right below our schema let's define a new section let's make a section with the name of image we're gonna chain the schema method again we're going to pass in an array where we're going to define the file upload and we're going to import it we're gonna make an image and I'm gonna chain one more method to it which is the collapsible method which I think is necessary because the panel would get way too big now let's navigate back to Google Chrome and refresh it where you will see that we have created a pretty cool panel where we can drag and drop our file we cannot create a product yet because we have not defined a brand ID column now this course has an episode on how to set up relationships but for now I just wanted to define the relationship simply as it depends on a value from the Brand's table so let's quickly Define the relationship without any additional options so let's navigate back to Google Chrome and let's copy the entire section of image I'll space it right below of it let's replace the heading with associations and let's get rid of the file input that we have and I'm simply going to create a select and I'm going to make a brand ID and then I'm going to chain a method that I want to cover later on but I have to cover it right now which is relationship now the relationship method accepts two arguments the first one is the relationship name which is brand while the second one is the column which in our case will be name and let's get rid of collapsible all right I think that we are ready to create our first products so let's give it a name of cloud hosting the slog is cloud underscore hosting the description is cloud hosting as well it is visible it is featured and I'm gonna publish it today the SKU is CLO and a couple numbers the price is 10. the quantity is 100 the type is downloadable I'm going to add a image all right and then I'm gonna select the brands now let's click on create and right here you will see that we have been prompted with the message saying that our product has been created pretty cool isn't it we have finally created our first router through filament PHP the cool thing about using the form Builder well if we navigate it back to our products click on edit on cloud hosting you will see that it has found the values from the database and it has added it on the fields we have defined and this is happening because we have passed in the column names to the make method for our components so let's change the name right here to Cloud hosting let's say two and the slug as well scroll down click on Save changes we have been prompted with the message saying saved click on products again where you will see that the name right here has been updated now so far we have to find the create read and update functionalities in cruds so what do we have left well the last operation is the delete operation let's click on a resource or let's say cloud hosting and in the top right corner you will see a delete button so let's confirm it all right we have been prompted with the message saying delete it and you can see that the row has been deleted from our list if we navigate to the browser and click on new products a couple things right here seems a bit off to me not design or functionality wise but I personally think that resource modifiers are missing resource modifiers and filament PHP or basically in any other admin panel are an important feature that allow developers to modify data in a resource before it is displayed this is useful for a variety of tasks such as formatting dates to make them more readable hiding sensitive data making Fields required or adding computed properties to a resource now keep in mind that filament PHP offers tons of resource modifiers and I know for a fact that I can't cover them all I basically don't even know them all but I do want to focus on a couple important ones let's navigate back to phpstorm and let's get started right at the top with the name now our entire project relies on the name of the products right this is the field that should be displayed to the user and definitely the field where a user decides whether he wants to buy the product or not now we can't have products with empty names so we got to make sure that the name is required a resource modifiers can be added on the form components and the form component right here is this line of codes so basically the text input column column make with the name now to make the code more readable I prefer to add my modifiers on the line below so let's chain the required method to it once we navigate to the browser and refresh it you will see that the required method has added right here an asterisk right after the label name indicating that the field is required if we try to click on create you will see that we have been prompted with a message saying that the field cannot be empty the second modifier that I want to cover is the live methods this method is used to enable or disable life validation for a form field when live validation is enabled the form field is validated as the user types instead of waiting until the form is submitted in case you want to re-render the form only after the user has finished using the fields you can use the unblur where you need to set it equal to true the unblurbed parameter determines whether the validation should occur when the field loses Focus or as the user types and true right here means that the validation will occur when the field loses Focus I made a typo right here because it should be on blur now I want to add one more resource modifier right here which is the unique method and I think that the name implies what it does it basically tells the column that well the product name that the user tries to enter should be unique now the second component field that we have is the slug and we do need to add a couple modifiers right here we don't want to give the user the option to add the slot themselves since this log is in most cases based on the name of a product so what we could do right here is chaining the disabled method which will disable a form field so that the user cannot interact with it the second method that I want to add right here is the dehydrated method dehydration is the process that gets data from the fields in your form and transforms it the slug just like the name should be required as well and the slog should be unique because in general it is used as a part of the URL for the specific resource and if there are duplicate slugs it can create confusion and lead to errors when trying to access the resource we're not going to keep the unique method empty since we're going to add a couple arguments to it the first argument is the class which will be product column column class then we need to define a column which is Slug and on top of that you can set the ignore record where you need to set the value equal to true this allows the current record to be ignored when checking for uniqueness now keep in mind that these arguments are optional I just wanted to show them to you now if we navigate back to Google Chrome and refresh it you will see that it has not added the value of the slug this needs to be done inside the name field since the slope will be generated based on the name to do so we need to now navigate back to phpstore right after unique we need to chain the after State updated methods which is a resource modifier that is used to modify the resource States after it has been updated it takes a callback function as an argument so let's say function parentheses curly braces it accepts a string of operation which represents the operation that triggered the state update it accepts a state which is an array contained in the current state of a resource and it has a forms backslash set object set which is used to modify the resource States let me close off the sidebar for a moment and in here we can basically do whatever we want let's say if the operation is not equal to create and the operation is basically the type of request you're trying to perform then outside of it we're going to use our set object then we're going to say set parentheses we're going to set this log equal to the Str facade now let's pull in the illuminate support slug because we're going to create a slog based on the state and the state in our case is the name let's navigate back to Google Chrome let's refresh it let's type in Cloud hosting let's click on well any part of your app where you will see that this fog has been generated based on the name let's see what the next field is we have to find the slug we don't need to add anything for the description but we do need to add a couple modifiers for the SKU now for the people who have worked with e-commerce's before most likely know what SKU is for the developers who haven't SKU stands for stock keeping unit it is a unique identifier for a product used in Inventory management it can be a combination of letters numbers or both and is used to track a product stock level and sales now I personally think that it's good to give some kind of description to the SKU now what filament allows us to do is basically chaining the label method to it which will replace the actual label and you might have already noticed the label right here is generated based on the column name but you can adjust it through the label method that we have defined right here so let's pass in a string of SKU parentheses and Insider parentheses we're going to add stock keeping unit once we navigate to the browser and refresh it you will see that we have replaced the label to SKU stock keeping units now next to the label we're gonna say that our SKU should be unique and it should be required now then we have the price and this is pretty cool because we need to change our text input to a numeric value if we navigate back to Google Chrome refresh it you will see that it has added the carried up and down and it basically has made it a number input fields then I want to add a pretty cool method right here which is the rules method now let's say that you want to Define custom validation rules for a form field in filament you can chain the rules Method Keep in mind that under the hood filament PHP uses larval's validation this means that you can use any larval validation form rule with filament php's rule methods this method takes an array of validation rules as its argument where these validation rules can be used to validate the data entered by the user in the form Fields so let's say that we're going to add a custom regex colon I'm not going to write it out but simply copy paste it and I'll add it in the description down below so you can copy paste it as well and finally we need to chain the required methods to it now the next field is the quantity Fields now this field should be numeric as well but instead of saying numeric we can use the rules method and say that this field should be an integer and it has a minimum value of zero and this is just to Showcase you the power of the rules methods but let's get rid of it I want to make it a numeric value and then I want to change the Min value to it which will basically do the same so let's say 0 and keep in mind that the same can be done for the maximum value so let's change max value of let's say 100 and let's change the required methods to it now for the types we're simply going to pass in the required method because I don't want to do anything special right here now let's move on to the next section which is the status we're going to add three modifiers for our is visible the first one is the label which is used to set the label of the form again so let's say visibility then we're going to chain the helper text method which is used to set a helper text for a form field and in our case we're going to pass in a string of enable or disable products visibility whoops I made a typo all right finally I want to change the default method to it which is used to set the default value of the form fields and in our case we're going to pass in a default value of true and there's no need to pass in a default value or false because that's the default Behavior so let's navigate back to Google Chrome and let's see how this looks you will see that we have added a string of enable or disabled product visibility and it has been enabled by default now let's add a couple modifiers for the is features as well let's say the label is featured the helper text is enable or disable products visibility of enable or disable products featured status all right we're getting price for the final field that I'm going to cover is the published underscore ads I'm gonna chain the label method to it again because I want a different label it needs to say availability I'm going to chain a default method to it where I'm going to use the now method inside of it and the now method is a PHP function that Returns the current date and time in the default time zone set on the server where PHP code is running now finally we have the image right here and there are tons of modifiers you can add right here so I will link the documentation down below but I want to cover four important ones the first one is the directory methods which is used to set the directory where uploaded files should be stored so let's say form Dash attachments the second method is The Preserve file names methods which is used to preserve the original file names of uploaded files by default filament PHP renames uploaded files to prevent file name collisions then I'm gonna chain the image methods to it which is used to indicate that the uploaded file is an image this basically allows filament PHP to perform additional validation such as checking the file's dimensions and mime type finally we have the coolest method in my opinion which is the image editor method which is used to enable the image editor for the uploaded image this allows users to crop resize rotate and so on if we navigate back to the browser refresh it and let's actually click on products let's upload an image and right here you will see an edit icon let's click on it and right here you will see a pretty cool panel opening up where we can do a lot of configurations to our image but for now I'm just going to close it off now these were the modifiers I wanted to cover related to the forms filament supports a couple additional modifiers for the table object right here the first method that I want to cover needs to be added on the name column so let's chain the searchable method to it and the searchable method is a table modifier that allows users to search for data within a table column when this method is applied to a column it creates a search box on the table overview let's refresh it right here that allows users to search for data within that column so if we say VPS you will see that it has created an active filter where it search for VPS and it has found one row the second method that I want to chain is the sortable methods the sourceable method is a table modifier that allows users to sort data within the table column when this method is applied to a column it creates a sort icon on the table overview that allows users to Source the data within that column and you can see the icon right here let's move on to the next column which is the brand name and right here I'm simply going to change the searchable method and the sortable methods but on top of these two I'm gonna ask the toggable method as well the toggable method is a table modifier that allows users to toggle values within a table column when this method is applied to a column it creates a toggle switch on the table overview so let's refresh it right here that allows users to quickly enable and disable columns on the table so if we click on brand you will see that the brand has been removed from the table overview which is pretty cool in my opinion but I do want to show it now you can add it for multiple rows so let's do it for the visibility as well so we have let's say sortable we have toggable and I also want to change the label to visibility once we navigate back to Google Chrome and refresh it click on our filters enable the column you will see that we have added the visibility again now let's navigate back and let's add both the toggable and the sourceable method on the price as well let's do the same thing for the quantity all right now there are different methods in how you can display a daytime and the one that filament supports out of the box is pretty fine right it outputs the dates but it even offers another option once we navigate back and on our published as column change the date method and let's actually also add the sortable method navigate back to Google Chrome and refresh it you will see that it has formatted the date in a human readable time you will see that it has four methods the date to a human readable date alright now the final topic that I want to cover are resource filters resource filters are used in a table which allows users to filter the data in a table based on specific criteria it's completely up to you on what type of filter you want to create but one example might be where users could filter the table to show only products with a certain price range or products that are currently in stock currently we only have one row so it does not really make sense to use filters but resource filters are useful with huge amounts of data because they allow users to quickly find the information they need without having to manually search through the table so let's navigate back to phpstorm and right here you will see that our table object has a filters method changed to it just like columns and fuel times filament supports tons of different filter types which I can't cover all so I just want to create two simple filters where the first one will be a ternary filter a ternary filter is a resource filter and filament PHP that allows users to filter data based on three possible values in most cases this will be true false or blank an example might be products that are visible so let's say is visible we're gonna chain the label method to it with the label of visibility then we're gonna chain the Boolean method to it followed with the true label which will be only visible products and on the line below we're going to define a false label as well which will be only hidden products and we're going to chain the native which is basically the default which is false I made a typo right here excuse me all right let's navigate back to the browser and refresh it and right next to our input field you will see that it has added a filter once we click on it you will see the label that we have added of visibility once we click on the drive down we can say Well only show visible products the final filter that I want to make is a select filter which is a resource filter and filament PHP that allows users to filter data based on a select box of options and this is useful for filtering data based on categorical data such as prototypes or categories for us we can use the relationship that we have defined based on the brands so let's pass in a brand right here now that's on the line below change the relationship method but we need to define the relationship that we have which is the name of brand followed with the column that we want to show which is name once we navigate back to the browser and refresh it you will see that we have created a new filter where we can choose between Brands we currently have one so if we click on it you will see that it filters based on the brands I don't want to make any changes to the product resource that we created since the only thing that we need to configure right here are the relationships which we will do in another episode and what I want to do right now is to basically navigate to the CLI and I want to create a new resource so let's say PHP artisan make me a filament Dash resource now let's name it brand all right let's navigate back to phpstorm let's open the sidebar again because we're gonna work in our brand resource class now just like the product resource I want to define a couple properties first so let's go right under our Navigation icon property and let's define a protected static string named navigation sorts in filament PHP a navigation sort is a property that defines the order in which a resource appears in the navigation menu Resources with a lower navigation Source value will appear higher in the menu and when two or more resources have the same navigation Source value they will be sorted alphabetically if I comment out as a line and navigate to the browser refresh it you will see that we have created a Brands tab which is fine but let's navigate back to PHP soon for a moment unless actually group it inside our shop tab so let's say Protect it static string navigation group is equal to shop if we navigate back to Google Chrome and refresh it you will see that brands have been placed above products but the actual products that you have in a shop are way more important than the brand so I rather want to place the products at the top of my list and that's what we can do through the navigation sort where we simply need to add an integer value of the sort and obviously this is not a string it is a int data navigation sort of our brand resource is one and then we navigate back to Google Chrome and refresh it you will see that brands have been placed down but I want my product step to be the first tab that user C so to fix that we can navigate back to phpstorm copy our navigation sort let's navigate to our product resource and let's paste it the right below our navigation group and let's change the source to zero alright now let's open our brand resource again now let's start off with our table method right here where we're going to define the columns the First Column that I want to show is the text column which is for the name column then I'm going to change the searchable method to it and I'm also going to change the sortable method to it then I have a second column which is also a text column the column name will be URL and I want to change the label because I want it to be mirror clearer to the user what type of URL is needed so let's add the label method and let's say website URL and now this value is sortable and it's also searchable then I want to add another column which is a color column because I want to show the primary hex color of a brand so let's add the column name which will be primary hex the primary hex has a label because it needs to be a bit more clearer than primary hacks of primary color we have an icon column which is for the is visible so basically the visibility which is a Boolean it is sortable and it has a label of visibility the final column that I want to add is the is a text column which is for the updated underscore ads so let's change the date methods to it and let's make it sortable as well all right if we navigate to the browser and refresh it click on the brands tab you will see that our brand stable has been defined and it looks pretty nice right let's move on to creating and updating a brand so let's click on new brands and we need to Define this page let's navigate back to phpstorm on that scroll up in our schema I want to create a group where I then want to chain another schema to it pass in an array where I want to define a section now the section will not have a name but we're simply going to define a couple Fields inside of it so let's say text input for our name column I'm going to chain a couple methods to it the first one is required well let's actually navigate to the product resource because it will have the same methods change to it as the name column right here and I don't want to rewrite all this code so let's chain it right here all right then we have our slug so let's make another text input named slug the slug will be disabled the slog will also be dehydrated and I've covered all these methods in the previous episodes which I will link in the description down below if you want to watch it the slug is also required obviously and it needs to be unique now then we need to define the URL so let's say text input let's make a URL we're going to change the label again to websites URL we're going to chain the required method to it because the website URL needs to be required it needs to be unique as well and it has a column span of full now there's one more field that I want to Define inside this section which is the markdown editor for the description and this one also needs to have a column span of full now we have added a column span for two of our Fields so what we need to do is basically chain The Columns methods of two on our section right here now if we navigate to the browser and refresh it you'll see that we have created pretty much the same panel of creating products which is all right now let's create a brand again all right because we're going to create a group right next to it so let's go right below the column span add a comma where we're going to define a new group where the name will be empty where we're going to chain the schema method on it pass in an array and hit enter now in here we're simply going to create a new section the section name will be status and we're going to change the schema method on it again what we're going to pass in an array same structure over and over again let's navigate back to Google Chrome and refresh it and you will see that the status section have in place right next to the first section that we have created now let's quickly Define two Fields right here the first one will be a toggle the toggle name will be is underscore visible we're gonna chain the label method to it for the visibility we have a helper text of enable or disable brand visibility and we're gonna chain the default method to it which is true and I made a typo right here we're going to create one more group and section right below of it but we're gonna chain the schema method array which will be a section the section name will be color but we're going to change the schema method to it and here we're going to create a Color Picker with the name of primary underscore hacks and then we're going to change the label meta to it to rename it to primary color all right now let's navigate back to the browser and refresh it and this looks pretty cool let's create a new brand let's say code with sorry the website URL will be www dot codeword.com the description as well and the primary color will be let's say red now let's click on create as you can see our product has been created so let's navigate back to the brands overview now up until this point we haven't really covered what we were supposed to do in this chapter what I want to do right now is focus on a couple actions and the first one is opening a view or a specific brand so let's navigate back to phpstorm and let's scroll down inside the table method where you will find a where you will find a actions method by default you will see that one action has been defined which is the edit action now this action is the button that you will see right here to the right of every single row once you click on it you will be redirected through an action to the edit page so let's add another action right here let's navigate to phpstorm and right above it we're going to create a view action and let's pull in filament backslash tables backslash actions or we're gonna use the make method again and add a comma right after it if we navigate back to the browser click on Brands again and refresh it you will see that we have added a view button right next to our edit button and once we click on one it will open a model where you can view the brand and you even have the option to toggle check boxes right here now next to the view and edit action it allows one more which honestly speaks for itself since you should also have the option to delete a resource so let's say delete action well that's once again pull in filament stable actions call the make method navigate back to Google Chrome refresh the page where you will see that it has added to the delete button right next to it that would delete our most recent brand and confirm it you will see that we have been prompted with the message saying that our row has been deleted now filament PHP wouldn't be filament PHP if it does not let you add tons of customizations to it by default the row axes are rendered at the final cell of each row it even allows you to add it to the left of the table so right after the array inside the action method we're going to add a comma where we're going to define the position which will be set equal to the actions position before columns so let's pull it in all right let's navigate back to Google Chrome and refresh it where you will see the attachment placed to the left side of the table now I don't see a world where I would use this but it is good to be aware of the customizations you can add so let's navigate back to phpstorm and let's get rid of it because I don't want to use it now having these options per row is actually pretty cool right view edit and delete but imagine a table with tons of data this can be quite annoying filament PHP allows you to group these actions together so let's see how this works on the product resource let's open it scroll to the bottom to our where is it actions methods let's get rid of our added action we're gonna call the Action Group pass in an array of the actions that we want to add right here so let's first say view action then we have the edit action and finally we have the delete action now let's navigate to the browser I'll just click on products and right here you will see that we have grouped the actions in a drop down which is pretty cool now before I wrap to this video I want to quickly copy the actions that we have navigate to our brand resource and replace it with the action method that we have to find right here and if you navigate back to Google Chrome click on Brands you will see that it has been replaced with a drop down as well up until this point we have to find the products and Brands resources I want to continue on with the customers orders and categories resources right now and I want to Define it relatively quickly since we should be able to define the table and forms on our resources now let's navigate back to the CLI because we need to make a new resource let's say PHP artisan make me a new filament Dash resource and let's name it customer all right let's navigate back to phpstorm let's open our customer resource now let's define a couple properties first the model property is fine the navigation icon I need to change it to Hero icon Dash o dash user Dash group then I want to define a protected static int which is for the navigation sort where I want to set the value equal to 2 and I want to define the navigation group so let's say protected static which is a string with the name of navigation group and the group is shop all right this should be enough for now so let's scroll down to the bottom right inside of the table methods we're going to define the columns or let's say text column for the name the name is obviously sortable and it's also searchable then we're going to add the second column which will also be a text column the column name will be email and we're going to chain the sortable and the searchable methods on it then we have the phone number of a customer so let's create a new text column for the phone we're going to once again change the sortable method and we're also going to change the searchable method to it two more because I want to add the city as well so let's create another text column for the city it's sortable and it is searchable now the last one is the date of birth of a user which will also be a text column the column name is date underscore of underscore birth I'm gonna change the date method to it and it's not searchable but it is sortable nothing fancy it will navigate back to Google Chrome refresh it and open a customers tab you'll see that we don't see any data so let's click on new customer and let's define our form so let's navigate back to phpstorm or let's scroll up a little bit right inside of the format it and there's one thing that I want to do different right here and that's not adding our input Fields into groups which I have done when we defined a project resource and the brand resource groups are used to configure multiple fields at once without affecting styling it basically gives you the ability to save all fields to a relationship or Json or set them all to use online labels so personally I would say that you should add the group when you add a second section to that column which we don't have in this case so right here we're gonna directly create a new section and we're going to change the schema method on our section and pass in an array and let's define a couple inputs views right here the first one will be a text input the name is for the name is going to have a maximum value of 50 characters and the name is obviously required then we're going to create another text input which will be for the email we're gonna give a label to it which will be email address we're gonna chain another method to it which is required another method which is the email method which will basically do the email validation part for you then we're gonna add the unique method to it which has an ignore record of true now we have a couple more views left so let's create another one which is a text input the text input is for the column phone and it is Max value of 50. now let's add a date picker because we obviously need to add the date of birth as well we have another field which is a text input for the city and the city is required we have one more which is a text input which will be for the zip code and that is required as well and finally we have the last text input which will be for the address and the address is required and we're going to add the column span right here so let's say column span full this only works when we add the columns methods on our section and we're going to pass in two columns if we navigate to the browser and refresh it you will see that we can create a new customer right here so let's say code with story let's add my email address right here I'm going to add a random phone number I'm going to add my real date of birth the city is Utrecht I'm not going to add my ZIP code and I'm not going to add my private address now let's quickly create one all right as you can see our resource has been created let's click on customer and right here you will see the table overview as well now there's one more thing that I want to do right here and that's navigating back to phpstorm scroll down to the table method now let's go right inside of the actions method or let's get rid of the added action let's define a new action group right here let's pass in an array and let's define three actions let's say view action all right let's say edit action all right and the last one will be the delete action let's navigate back to Google Chrome refresh it and right here you will see the three actions that we have defined now we have defined the customer stamp so let's move on by navigating to the CLI and let's define a new PHP artisan make me a filament Dash resource now let's name it order all right let's navigate back to phpstorm oh let's open our order resource and right here we don't need to change the model we're going to change the navigation icon to Hero icon Dash o dash shopping Dash bag we're gonna Define the navigation sort so let's say Protect it static int which is a navigation sort which will be equal to three then I want to define the navigation group as well so let's say Protect it static string which is for the navigation group which is equal to shop all right let's scroll to the bottom to the table method because I want to define the actions real quick and once again well let's actually navigate to the customer resource and let's copy the actions this is nothing special paste it inside of it all right now let's define the table Fields right inside of the columns method let's start off with the order number which is a text column so let's say number last chain The searchable Meta to it now let's also change the sortable method to it I want to add another column which is the customer name which is through a relationship so let's say text column it needs to look under relationship named customer and it needs to find the name and this needs to be searchable it needs to be sortable and it is optional so a user can toggle it then I want to add a text column of the status which is the enum that we have defined so let's say status it is searchable and it is also sortable all right let's add a column for the total price so let's say total underscore price let's change the searchable method to it the sortable method and we're going to chain a new method to it which is the summarize method in filament PHP the summarize method is used to display a summarized value for a column for example you can use the summarize method to display the total sum of a value in a column let's pass in an array inside of it and let me scroll down we're gonna call the sum methods we're going to pull it in from tables backslash columns backslash summarize and then we're gonna chain the Money Matters to it now there's one more column that I want to add which is a text caller the text column is for the created underscore ad we're going to change the label method to it which will be ordered 8. and it obviously needs to be a date all right now let's scroll up now let's define the form Fields as well now let's think about it for a moment we have a couple input fields that will enter data in a forms table but we also need to create a screen where we can add products to the order instead of creating a separate page for that functionality we can use a wizard which is a very cool feature that's filament PHP offers a wizard is basically a user interface that will break down complex tasks into smaller more manageable steps it guides the user through each step in a clear and concise manner making it easy for them to complete the task without feeling overwhelmed or confused so let's define our wizard right here let's remove our comment and let's say wizard now let's pull in the filament forms component we're gonna make a wizard where we're gonna pass in an array but we're going to define a wizard step so let's say step now let's pull in a filament backslide forms backslash components backslash Wizard and we're going to add a label to our first step of order details then we're gonna Define a schema on it passing an array where in here we need to Define our Fields but before we do that let's define the Second Step by basically calling the step we're gonna name it order items and we're gonna change the schema method to it the same stuff over and over where we're gonna pass in a comment now before I forget it I want to add the columns span full methods on our second step if we navigate back to the browser and refresh it open the orders Tab and click on New Order you will see that we have defined a wizard with Two Steps step number two is the order details and step number two is the order items once you click on next you will see that step number one has been completed and we're currently on step number two but something has gone wrong with the columns full and I needed to add it on the wizard itself excuse me refresh it and all right this is what you want to see now let's define the fields inside of it starting with the order details it has a text input with the name of number we're gonna chain a default value to it which will be a string of o r o order Dash and we're going to concatenate the random underscore int method which is the PHP method which should be a random number of 100 000 and let's say 9999999 and another nine we're gonna add a disabled method to it because the default value will be randomly generated so you don't want to give the user the option to add the order number we're going to add the dehydrated method to it and also the required methods then we're going to create the customer ID so let's say select for the customer underscore ID we're gonna change the relationship method to it because it is a relationship from the customer relationship and we're going to add a second argument which is the column that you want to show to the user which in our case will be name we're not done yet because we're gonna chain the searchable method to it and also the required methods now we have two more views left because we have the type of the order as well so let's say select we're gonna make a type and it has options obviously and the options are basically our enum options so let's say pending which will be order status enum pending and change the Value method now let's actually duplicate our line four times the second option will be processing we have completed and we have the client let's change the order type which will be processing completed and we have declined finally we need to add one more which is for the notes which will be added in a markdown editor and we're going to keep it as this and we're going to chain one method to it which will be the column span full again and write on our Wizards tab we're gonna chain The Columns method and it needs to be two columns next to each other all right let's navigate back to Google Chrome refresh it you'll see that this looks pretty dope but let's make the type full span as well so let's say column span full once we refresh it you'll see that this looks pretty good and every time we refresh it you will see a new order number which is pretty cool is there anything missing well let's actually make the type required as well and I think that we're done well let's continue on with the order items on step number two right here we need to define a relationship with the products table since the data that we will add right here needs to be inserted in the pivot table which was a many-to-many relationship so let's define a select the name will be project underscore ID which we won't show to the user so let's change the label method to it and let's name it product we're gonna chain the options method to it but we're not gonna pass in an array but we're gonna use our product model we're going to chain the query method to it and we're going to chain the plug method to it and what we're going to do right here is basically plug the name and the IDE now the plug method is useful here because it allows us to extract a list of values from a specific Columns of the products table in our database we're basically going to extract the name and ID columns which we then use to populate the options for our select input field in the form this basically makes it easier for users to select a product by name while the ID is still used to identify the products in the database so we have a couple more fuse right here the second field that I want to add is a text input for the quantity it is numeric it has a default value of one and it is required now finally I want to add the unit price which will be a text input unit underscore price it has a label of unit price it is disabled it is dehydrated it is a numeric value and it is required now right on our wizard we're gonna chain The Columns method which needs to show three items next to each other let's navigate back to Google Chrome and refresh it let's add a type right here the customer is Dari and let's add a note of text click on next and right here you will see our second step but I have a small issue right here in our model we have to find a many-to-many relationship meaning that one order has many items right now we only have the option to Define one product with filament PHP allows us to do right here is creating a repeater component and a repeater component is used to create a repeating set of form Fields it allows users to add and remove Fields as needed making it useful for situations where the number of fields required may vary so what we can do right here is basically navigating back scroll up to our schema on our where is it order items copy all the fields that we have inside of it remove it for a second and on the schema we're gonna create a repeater from filament backslash forms backslash components the repeater has a name of items and we're gonna chain the relationship method to it and the schema matters to it what we're going to pass in an array paste the fields that we just copied navigate back to Google Chrome refresh it add a customer again add the option endnote and right here you can see that we have the option to add new items which will add new boxes where we could select the product quantity and unit price of multiple products something went wrong with The Styling again so let's navigate back to PHP store and what we need to do right here is basically copying The Columns and adding it on the repeater once we navigate back to Google Chrome create a new order add a customer of diary again the type the nodes click on next and right here you will see that we have fixed or repeater if we click on add new item it will add it right below a bit pretty cool but we're not going to focus on the relationship right now because we will do that in the relationship chapter so for now I want to continue on with the categories resource which will be the simplest one so let's navigate back to the CLI let's perform the PHP artisan make me a filament Dash resource I'll ask name it category let's navigate back to phpstorm Let's close all all tabs that we have opened let's open our category resource now let's start off by defining the properties again we need the model the navigation icon will be hero icon Dash o dash tag we're going to define a protected static int for our navigation source which will be equal to 4 and finally we need to define the navigation group so let's say Protect it static string which is navigation group which will be set equal to shop now let's open our product resource let's copy the actions that we have open our category resource and scroll to the bottom and replace it inside our actions method we're going to define the columns right now which is pretty straightforward we have a text column for the category name which will be sortable and it's also searchable we need to add a text column because we added a parent relationship dot name because a category can have a parent category we're gonna chain the label method to it which will be parent we're going to change the searchable method to it and we're going to add the sortable method to it now a category can be visible or hidden so let's define a icon color for the is underscore visible column we're going to change the label method to it which will be visibility we're going to chain the Boolean method to it and it can be sortable the final table column will be a text column as well for the updated underscore ad it is obviously a date we're going to chain a new label to it which will be updated and finally it can be sort of all now we're almost done because we need to define the form as well all right let's first create a group right here we're gonna chain the schema method to it and pass in an array hit enter create a section right here do the same thing and I actually want to navigate to our project resource and scroll off and copy the slug and the name because it's quite a lot of code that we need to rewrite again so paste it right here and right below the slug we're going to define a markdown editor for the description and we're going to chain the column span full method to it and then on our section we're going to chain The Columns method where we're going to add two columns now right below our what is it group we're going to define a new group by adding a comma saying group we're going to make it chain a schema method to it pass in an array and right here we're going to define a new section for the status let's define the less schema and let's define a toggle the toggle will be for the is underscore visible column we're going to change the label method to it for the visibility we're gonna add a helper text of enable or disable category visibility and finally we're going to add a default value of true I want to add one more field right here where we're going to give the user the option to select a parent category so let's say select parent underscore ID we're gonna chain the relationship method to it which will be the parent relationship and the name column should be visible so let's navigate back to Google Chrome let's refresh it click on categories create a new category or let's name it hosting the description will be hosting it is visible and it has no parent because we're going to create our first category and right here you will see that we have been prompted with a message saying that it has been created let's click on categories and you will see that we have created our first category for now I want to wrap up this video where we have to find a customer order and category resources and filament PHP now this was it for today's video If you enjoyed the content and you want to see more please give this video a thumbs up and if you're new to this channel don't forget to hit that subscribe button foreign and use admin panels a global search is a must-have feature because it allows users to quickly and easily find specific information across multiple Pages or sections of the application this can greatly improve efficiency and productivity by reducing the time and effort requires to locate the desired information now most admin panels have two type of searches the first one is the global search which allows users to search for information across the entire application and the second type is a resource search which allows users to search for information within a specific resource or section of the application now we have already covered the resource search right here since inside any resource we set that certain columns should be searchable now this works fine but a global search would be nice too which allows you to search through all available models in your application so let's move on with our Global search now whenever you want to enable global search on your model you need to set a title attribute for the resource that you want to make globally searchable so let's close off our category resource and let's do that inside our product resource first so right below our navigation sort we're going to define a protected static string for the record title attribute and the value right here needs to be a name of the column on your model that can be used to identify it from others so in our case let's set it equal to the name column Now by setting this property filament PHP will know which columns to use when searching for records across the entire application so if we navigate back to Google Chrome click on Brands and in the top right corner you will see that an input field has been added which will now represent the global search so right here let's search for VPS and in a drop down you will see that it is showing our products of VPS hosting which is awesome but let's click on VPS hosting in our products tab change the description to let's say test scroll to the bottom save the changes all right now let's click on the products tab again click on our Global search write down test and right here you will see that it has prompted us with a message saying that no result has been found and this is correct because we simply set inside our let's scroll up product resource that it should search specifically on the name column in our products table and as you can see the value of our records title attribute can only be a string so we can simply replace it with an array pass in the name and pass in let's say the description now to do so we simply need to overwrite a method that filament PHP has to offer so let's define a new public static function and let's name it get globally searchable attributes we need to type in it to a array all right then inside of it we simply need to return an array you guessed it with the column names so let's say that the name the slug and the description it needs to be searchable if we navigate back to Google Chrome refresh it search for test and right inside of the drop down you will see that it has added the product because it has found the search phrase in the description table now quick note you can even add relationships right here in most cases I don't recommend doing this because it will kind of mess up the search but you can simply Define the relationship in the same way as we have done before when defining select Fields through the dot notation so let's say brand dot name now let's remove it for now now let's continue on by default the global search will output the value that you will have to find inside your records title attributes but once again the return value will be a string so you can't display more information but a filament PHP allows you to overwrite another method so let's go right below our guest globally searchable attributes and let's override the public static function named get Global search result details now let's type in it to an array so we could simply return an empty array right here and we need to add a parameter which needs to be an instance of the model that is being searched which will be model let's pull in records now this will be an instance of the model that is being searched this method allows you to overwrite the default behavior of the global search results and display additional information about a record in the search results so let's say that we're gonna return a key value pair and we want to add the brands to the search as well which will be the record the brand relationship of in our case the products model and we're gonna output the name if we navigate to the browser and refresh it now let's search for let's say VPS again you will see that we have added the VPS hosting title but we have also added a sub header of brand colon hostinger you could even add multiple rows where we simply need to add another key value pair of let's say description which will be record so once again our product model description Let's test it out or let's navigate back refresh it now let's search for VPS again where you will see that we have added the brand and the description now I'm personally not a huge fan of it so let's navigate back and let's remove the description and let's continue on now one thing I wasn't aware of and I learned through filament PHP is documentation is that the relationship that we have to find right here will be lazy loaded lazy loading is a technique in programming where data is loaded only when it is actually needed in our current example filament PHP is global search will be loaded only when they are needed which can lead to power performance now it is recommended to use eager loading right here and it even allows you to do so with eager loading data is simply loaded up front before it is actually needed in our current example it is recommended to use Eagle loading instead of lazy loading to optimize performance this means the relationship between models should be loaded up front where the search query is executed instead of waiting until they are actually needed so let's go right below our get Global search results detail let's define the public static function named cat Global search eloquent query which is used to modify the query used to search for records across the entire application we're going to type in it to the Builder all right then inside our get Global search eloquent query we're gonna return the parent colon colon get global search eloquent query where we're going to chain the width method to it where we're going to pass in one or multiple relationships so let's pass in an array of the brand now you won't see any differences in the browser so let's search for VPS again where you will see that the output is pretty much the same imagine an application where you have let's say 100 hosting surfaces realistically you don't want to load all 100 rows to the user right you basically want to add a limit to prevent a huge amount of queries and it's actually quite simple to do that because we simply need to overwrite a property that filament PHP has to find for us by default the global search will show 50 result per resource which I actually find quite a lot let's say that we want to limit it to 20. what we need to do is basically defining a new property so let's say Protect it static int which has a name of global search resource limit where we're going to set the value equal to 20. now we can test it out inside the browser because we only have a total of one product but this is good to be aware of the final configuration I would like to show you is adding search key bindings which I actually find a pretty awesome feature search key bindings are keyboard shortcuts or combinations of keys that trigger specific search related actions honestly they are useful because they allow users to quickly and easily perform common search tasks without having to navigate through menus or use a mouse to click on buttons now let's say that whenever a user hits the command K or Ctrl K on a keyboard the focus of the app will go towards the global search and the user can directly start the search now this needs to be configured inside filament it's service provider so let's open the providers directory the filament directory and the admin panel provider where right under the color we're gonna chain the global search key bindings method right here we need to pass in an array with our search key bindings so let's say that the first one is command plus okay while the second one is for Windows and Linux users which will be Ctrl for Control Plus k once we navigate to the browser refresh it and since I'm on a Mac I need to hit the command K buttons and you will see that we can directly start typing in our Global search honestly looking at the nav bar right now I would be completely fine leaving it as it is because you can configure quite a lot to the navigation group navigation sort and Navigation icon properties but filament PHP offers tons of more configurations that you can set now let's have a look at the most important ones let's navigate back to phpstorm and let's close off our admin panel provider and let's work inside our product resource right here I want to overwrite a new property named protected static string where the name is active Navigation icon which allows you to overwrite the default icon for the current navigation item in the nav bar so let's set the value equal to Hero icon Dash o dash check Dash batch if we navigate back to the browser and refresh it you will see that the active bash in front of products right here has been changed to the check batch if we click on another tab you will see that the value from our Navigation icon property will be used again now this isn't a feature that I want to use so let's remove it and continue on the next feature is one that I always use when building admin panels and that's the use of badges patches and admin panel menus are small visual indicators that provide additional information about a menu item they are typically used to display the count of items that require attention such as the number of unread messages or the number of incomplete tasks badges can be useful because they quickly draw the user's attention to important information and can help them to prioritize their tasks in filament PHP we need to overwrite the public static function named get navigation batch let's type in it 2A optional string and then right inside of our methods we're simply going to return a string of let's say new if we navigate back to the browser and refresh it you will see that we have added a pretty cool batch right next to the products tab named new now you could even perform queries right here so let's navigate back to phpstorm where we're going to remove our string we're then going to make a static call to the get model method which will return the model associated with this class which will be the product model and then we're gonna add the count methods to it which will basically count all the products that we have so once we navigate back to Google Chrome and refresh it you will see that the batch has been changed to 1 which is pretty useful now I want to add another batch but this one will be for the orders tab so let's open our order resource and the rights below our navigation group we're gonna Define a public static function named get navigation batch we're going to type into an optional string all right and right here we're simply going to return the static get model again but instead of counting it we're gonna add a where clause and then we're gonna count it and inside the work loss we're going to check where the state is is equal to processing which will basically add the count of the orders that are currently being processed because it doesn't really make sense to ask the count of the completed orders so once we navigate to the browser and refresh it you will see that account is currently zero and if we click on it you'll see that it is true because we have no orders the second method I want to cover is quite soothing for the order stab as well which is the let's go right below of it public static function named get navigation batch color we're going to type into an optional string as well now this method is used to set the color of the batch next to the navigation item it does not change the actual content but simply the color of it so let's say that if there are more than 10 orders being processed the color of the batch needs to be changed to Red because there are simply too many if it's less we're simply going to keep the primary color as it is so let's say return static column colon get model colon colon where and let's change the count method to it let's define the where Clause real quick where the state is is equal to processing if the count is greater than 10 on the line below as they turn the reoperator of let's say the warning batch and else at the primary batch pretty cool customization right let's navigate back to Google Chrome and refresh it and right here you'll see that we have less than 10 orders so the primary color has been printed out but if we navigate back and change greater than to less than refresh it you'll see that the primary color has been changed to warning which is a yellow color now for now let's make it greater than again all right now the next configuration is pretty cool as well and that's collapsing the sidebar allowing users to collapse the sidebar in an admin panel can be useful because it gives them more screen to focus on the content they are working on and it's actually pretty simple to do so because we need to configure it inside our admin panel provider so let's say right below our Global search key bindings we're going to chain the sidebar collapsible on desktop methods if we navigate to the browser and refresh it you will see that we have the option to collapse the sidebar right here which is pretty cool once we click on it you will see that the sidebar has been collapsed you could even make the collapse menu your default one by simply chaining the sidebar fully collapsible on desktop matter to it but whenever you want to make it work you simply need to delete the sidebar collapsible on desktop methods once we refresh it you will see that our menu has been fully collapsed I'm not a fan of it so let's delete it and let's move on now the sidebar has currently been built up based on links that have been defined within our application filament PHP allows you to add external links to it as well which is pretty cool external links needs to be added inside the admin service provider where you need to chain the navigation items method to it white hair we need to pass in an array where we need to define a navigation item colon colon and make in the make method we need to pass in the name of our navigation item so let's say block then on the navigation item you have tons of messages that you can chain on and we're going to start off with the URL methods which speaks for itself because you simply need to pass in the URL where you want to navigate to so let's say https colon backslash backslash block dot code with diary.com where we could add a second argument of open in a new tab where we need to set the value equal to true we could also Define an icon so let's change the icon method to it where we need to pass in a hero icon of let's say Dash o dash pencil Dash Square you can even group it just like the shop group so let's say that we want to group it in a tab named external and we can even sort it which will sort the entire group and I want to sort this right after the shop group so right here we can give it a short of let's say two once we navigate to the browser and refresh it you will see that it has added a complete new group named external with my blog inside of it now filament PHP also allows you to conditionally hide and show navigation items this only works when you define Gates we haven't done that so let me quickly show you how the code works that actually won't work so let's navigate back to our navigation item right here now let's chain the visible method to it what is used to conditionally show or hide a navigation item based on a Boolean value and here we're going to pass in an anonymous function through the FN method we're going to define a colon boo right here which is determined by the result of a callback function which will check if the authenticated user has permission to view the navigation item then we're going to set the value which will be through the art methods we're going to grab the user and we're going to chain the can method which is used to check if the user has a specific permission and in this case we're gonna check the view permission which we haven't defined so once we navigate back to Google Chrome and refresh it you will see that external has been removed but if we navigate back you can even replace the visible method with the hidden method which will do the opposite let's remove the entire line because we don't need it anymore now let's say that you don't want to show the categories tab inside the sidebar this needs to be defined on a specific resource so let's navigate back to phpstorm and let's open the category resource where we need to Define annual property so let's say Protect it static boo named shoot register navigation which has a default value of true because it's obviously visible so we need to set it equal to false once we navigate to Google Chrome and refresh it you will see that the categories tab has been deleted now let's navigate back and delete it all right now let's say that you want to add a navigation item but you don't want to add them in the left side panel because it belongs to a specific user and you simply want to add it right under the user icon in the top right corner to do so we need to navigate back to our admin service provider where we need to chain the user menu items methods right here we need to pass in an array with items that we want to add so let's say menu item make let's add a label to it which will be let's say settings I don't have a URL right now so let's add an empty string let's change the icon method which will be hero icon Dash o dash cog-6-2 once we navigate to the browser and refresh it click on CD in the top right corner and right here you will see that we have added a new menu items named settings you could even customize the text of the sign out button so let's navigate back to phpstorm and right after our icon add a comma and say a log out for the menu item make a new label named a log out let's navigate back and refresh it where you will see that sign out has been replaced with logout now the final configuration I would like to show you is disabling the branch crumbs right above the resource name you will always find the bread gum and even when you click on New Order right here you will see orders and then create now you can simply disable this using the breadcrumbs method on your panel object so right here let's say breadcrumbs all right we need to pass in a Boolean value the breadcrumbs are obviously shown by default which means that true is the default value right here and to disable it we simply need to pass in false if we navigate back to the browser and refresh it you will see that the breast cramps have been disabled but I love the breadcrumbs so let's navigate back now let's delete the breadcrumbs methods now we do have quite some relationships so I think that it would be best to once again start at the top of our resources and move our way down so right here you will see that we have to start with the products resource so let's navigate back to phpstorm let's close off all the tabs that we have opened let's open the product resource and let's also open the product model all right let me make the sidebar a little bit smaller now we have already defined one relationship right here which is the easiest one which is the relationship to the brand model which says it belongs to relationship where one product belongs to one brand we have done that right inside of our product resource let me show it to you where is it right here where we have set that it needs to show a select component for the column A brand underscore ID where we have changed the relationship method where the relationship name is brand as you could see right here and it needs to Output the name of the brand now the second relationship that we have is the categories relationship which is it belongs to many relationship with a category model now this needs to be defined in almost the same way as with the branch relationship so let's open our project resource again and right below our select component we're going to create another select component where we're gonna name it categories we're going to chain the relationship method on it as well where the relationship name is categories and the name column needs to be shown to the user we're not done yet because we're going to chain another method to it which is named multiple which allows the user to select multiple options from a list we're almost done because we're going to chain one more method to it which is the required method and I was actually added on the brand ID as well now this should do the trick for us or let's navigate back to the browser before we create a product let's quickly create two categories so we have a hosting category or let's create a cloud hosting the description is cloud hosting as well it is visible and apparent is hosting let's click on Create and create another now let's name this one web hosting and the description as well it is visible and the parent is hosting again let's click on create go to our categories overview where you will see that we have one parent category named hosting and two child categories which is cloud hosting and web hosting all right now let's create on products because we're going to create a new product well let's name it web hosting the description is web hosting as well it is visible it is feature it it is available from today the SKU is one the price is one and the quantity is one as well it doesn't really matter the type is downloadable I have just added the image we're going to select a brand of the hostinger and we're going to add two categories let's say web and let's say hosting which is the hosting parent category if we click on create you'll see that we run into a small error so let's navigate back to phpstorm now let's actually remove the with timestamps method that we have added right here no idea why we did now let's refresh it let's actually see if the product has been created it has let's delete it for a moment let's click on new products or let's name it web hosting again same description it is visible it is featured to SKU One Price one quantity one I've just added the image the brand is hostinger the category is web hosting and let's say hosting all right now let's click on Create and well let's first create a type click on create as you can see we've been prompted with a message saying that our row has been created if we click on products open our web hosting product scroll down you will see two categories hosting and web hosting let's navigate back to phpstorm for a moment let's open our database client and let's open the category underscore product table where right here you will see that two rows have been inserted with a product ID of the product that we just created and the two categories we selected alright let's move on to our second resource which is the brand resource now let me close off all the tabs that we have or let me open the brand resource and let me also open the brands.php model right inside of our model you will see that we have one relationship which is a has many relationship with a product model now let's think about it for a moment whenever you have a new brand you want to somehow show the products right below the edit page or even better have the option to create a new product directly from a specific brand so let me show it to you right here let's click on Brands so let's say that we have a hostinger brand but right at the bottom we want to show the associated products with it in filament PHP this needs to be configured through a feature we haven't covered yet named relation managers relation managers and filament PHP are a way to manage relationships between models they are useful because they allow you to easily Define and manage complex relationships between models without having to write a lot of custom code now whenever you want to create a relation manager you need to navigate to the CLI because right here we're going to perform the PHP artisan make colon filament Dash relation Dash manager or we need to pass entering arguments the first one is the name of the resource class for the parent model which in our case will be the brand resource then we need to add the name of the relationship that you want to manage which is products and we need to add the name of the attribute that will be used to identify the product which will be name now once we hit enter you'll see that our products relation manager has been created so let's navigate back to phpstorm and since we're already inside our brand resource right here let's register their relation manager and let's do that right at the bottom where you will find a get relations method which returns an array of relation managers for the resource now the relation manager can be found inside the brand resource directory because we just specified that where you will find a relation manager's directory with a products relation manager class inside of it before we open this let's quickly register it first so right here let's say products relation manager colon colon class all right if we navigate to the browser and refresh the edit of our brand scroll to the bottom you will see that the right below the form we have added a table which will show all products that are related to the brand that we have selected pretty cool isn't it we even have the option to create a product right here which will be directly Associated to the brand and once you click on it you will see that it will open a new model where you could create a new product we haven't defined the fuse right here which we will do in a bit but for now let's cancel it because we also have the option to edit a product which will open the same module and we can even delete an Associated products all in the same page now let's navigate back to phpstorm and let's open the products relation manager where you will find a pretty familiar class we have a method called form which will obviously show the form that you will see right here and if we scroll down you'll see a table method which is the table that is visible right below the form it has one property inside of it right at the top right here called relationship which is the relationship that is needed to make it work which obviously refers to the products relationship inside the brand model so let's start off inside the table methods and I honestly don't want to define the columns myself again so let's delete it let's open the products resource scroll to the bottom and let's copy all the columns that we have defined right here because we're basically going to show the same exact product right paste it right here navigate back to Google Chrome and refresh it and right here you will see that we can edit a brand but we could also show the same table that we have on the on the products resource now the one thing that's bothering me are the actions so I want to group it so let's navigate back to phpstorm and you can basically see that it has the same methods as the actual product resource so let's copy the two actions that we have let's say Action Group make pass in an array paste in the two actions that we have let's navigate back refresh it right here you will see that we have grouped to the two actions that we have now let's continue on with the what is it the form Builder and since we're showing a model and our products form Builder has tons of fields we can't fit them all inside a module because it will look quite ugly I do have a pretty cool solution for that well actually not me but filament PHP and that's the usage of tabs which is a way to group related form Fields into separate sections within a form they can be useful to organize large forms into more manageable chunks and make it easier for users to find the fields they need so let's define it well let's get rid of the form text input we're going to call the tabs component Pull It in call the make method pass in a name of let's say products and then we're going to chain the tabs method to it where right here we're going to pass in another array where we have one single tab now the tab has a name of information let's change the schema method to it all right then right outside of our tab we're going to add a comma because we're going to create a seconds tab with the name of pricing and inventory let's change the schema method to it again pass in an array create a tour tab which will be named additional information and let's change the schema matters to it that's it let's navigate back to Google Chrome let's refresh the page let's click on new product but right here you will see that we have three tabs where we can choose from to fix the styling we need to navigate back to phpstorm and write on our tabs we're gonna chain the column span formatted let's test it out one more time and right here you will see that we have a full width with three different tabs so let's define the fields inside of it well I don't want to define the fuse myself again since it will be the same as the product resource but just in a different order so I want to copy them from the products resource let's navigate back to phpstorm and let's open our product resource and scroll to the form method where right here we're gonna copy the text input name the slug and the description inside a product resource we're gonna paste it inside the first tab all right and then on our tab we're going to chain The Columns methods where it needs to show two columns next to each other if we navigate back to Google Chrome or refresh it click on new product you will see that in our first app we have the option to add the name slog and the description now let's do the same thing for our pricing and inventory so let's open product resource let's copy the SKU the pricing the quantity and the type let's navigate back to our projects relation manager all let's paste it inside the second tab that we have and let's chain The Columns method to it where we need to show two columns next to each other Let's test it out one more time click on pricing an inventory where you will see that we have added our text fields now let's navigate back because we need to copy a couple more fields for our additional information tab we're first going to add the visibility it is featured and the published underscore at paste it inside of it we're not done yet because we're going to navigate back to our products resource where we're going to copy the brand ID and the category ID paste it right below our published underscore ad and we're almost done because we're going to open it again we're going to scroll up because we still need to add the image so let's copy it now let's paste it right below our categories fields now on our tab we're going to chain The Columns method where we're going to pass into and on our image field we're going to chain the column span full method and I think that we're done let's navigate back to Google Chrome and refresh it let's click on new product let's click on additional information let's think about it do we actually need the brand ID well we're already located on the actual brand as you could see in the URI so there's no needs to have the brand input field because it will automatically detect which brand is associated to the product we're going to create so what we could do is navigate back to phpstorm the least the brand underscore ID select Fields navigate back to Google Chrome refresh it new product where you will see that we have finished our module now let's try to create a new product let's say test product it has a description of trust product the pricing all one the type is downloadable the additional information is the visibility the category is hosting all right I think that I made a small mistake because the SKU needs to be unique so let's say test one let's click on create I forgot to type click on create where you will see that we have created a product it has been shown inside the table right below our brand where you will see that we have added test product and the brand is equal to hostinger pretty cool isn't it now let's move on with the third resource we have which is the customer resource so let's navigate to phpstorm or let's close off all the tabs that we have or let's open the customer.php model right right here you will see that we don't have any relationships so we could move on to the order resource so let's open our order resource and let's say the order.php all right where you will see a couple relationships now we have already defined the customer relationship because inside our order resource right here we have set that's the customer ID is coming from the customer relationship because one customer is related to one order now let's navigate to the browser for a moment and click on orders I'll just click on New Order where we have created a wizard step so let's say the customer is Diary type is completed and notes is whatever but on the second wizard step you will see that we have three Fields two where the user needs to enter data so it needs to select a product and a quantity and one that is disabled which is the unit price whenever we select a product let's do it for a moment which has a price the unit price of a selected product should be shown to the user so let's navigate to phpstorm and let's start working on that functionality well let's scroll down to our second wizard which is right here and let me actually close off the sidebar where you will see that we have a select field for the product ID let's change another method to it which is required then we're going to use the reactive methods in most PHP applications forms are only reloaded when they are validated or submitted with a reactive method you may allow a form to be reloaded when a field is changed then we're gonna chain the after State update it where we're going to execute a callback function when the value of the product underscore idg feels changes so let's say FN parentheses we are going to pass in this state the forms backslice set object set and then we're going to add the arrow notation because on the line below our set objects the unit price of it will be equal to the product model colon colon find where it needs to find the state which is the product that has been selected if it can't find one print out the price otherwise zero now let's navigate back to the browser and test it out let's select our customer again the type and the notes if we then select a product you will see that the unit price of a product has been set based on the product that we have found right here I made a small mistake in one of the First episodes of the series and that's adding a total underscore price column on the order after investigating the database I think that it is a little bit cleaner to calculate this when the user makes a request for it rather than whenever the order is being made so let's quickly navigate to item now let's create a migration to delete the total price let's say PHP artisan make colon migration let's name it delete underscore total underscore price underscore from the orders table where we're going to specify the table name which is orders all right let's navigate back to phpstorm let's open our sidebar databases directory migrations now let's open the latest migration where right here we're going to Define our table where we're going to use the drop column method but we're going to drop the what is it total underscore price now let's navigate back to item and let's run the PHP Artisan migrate command where you will see that our migration has been migrated but I still want to show the total price to the user so what we could do is navigating to phpstorm opening our order resource and let's go right below our unit price where we're going to create a placeholder the placeholder name will be total on this whole price while the field doesn't exist obviously so let's label the total price where we're going to change the content method to it where we could basically output whatever we want so what we're going to do right here is create a callback function which accepts a get all right and we're going to return the get which will basically gets the values from the current row we're gonna get the quantity which we're going to multiply with the get unit underscore price all right now we have four columns right now let's change the integer inside the columns method to four let's navigate back to Google Chrome refresh it oh let's select a customer the type and the nodes all right you'll see that we have a column named total price so let's select our product where you will see that the unit price and the total price have been set there is a small issue right here because if we up the quantity you will see that the total price is not updating whenever we change the quantity and we have covered how we could do this in the previous episodes remember to update it whenever the quantity changes we need to add a live method on our quantity component so where is it right here let's change the life method and I'm also going to ask the dehydrated metas to it now we need to make one more change and that's for the unit price right here because it is disabled and disable filtering filament PHP will not be submitted into your database because users can eventually change the unit price as well so let's navigate to the browser let's refresh it let's select a type let's add a random node well let's select a product let's up the quantity Where you will see that the total price changes as well let's add a second item of let's say test products of the quantity as well now let's click on create where you will see that our order has been created if we click on our order Snap to see the form you will see that we have forgot to delete the total price column on our form which is right here all right navigate back to Google Chrome and refresh it where you will see that our order has been submitted into the database is there something missing or let's open our orders table where you will see that the shipping price has been set equal to null so let's open our order research for a moment let's scroll up right above our type which is right here where we're going to create a new text input the name is shipping underscore price we're gonna chain the label method to it where the label is shipping costs we're going to chain the dehydrated method to it we're gonna chain the numeric method to it and we're also going to chain the required methods to it now small change because we need to delete the column span full on our type let's navigate back to Google Chrome let's create a new order shipping price is 10. the customer is Dory the type is processing it has a note I'm gonna choose a random product where I'm gonna add five as a quantity and I'm going to create it click on orders where you will see that we have created our second order navigate to PHP swarm and let's refresh our orders table where you will see that the shipping price has been inserted as well now the final resource with a relationship is the category resource and the category model so let's close off all tabs and let's open our where is it category resource and the category.php model all right and right here and right here you will see that we have three relationships we have the parent and the child which I will skip for now because I want to focus on the products relationship and for this I want to create a relationship manager because it has a belongs to many relationships so let's navigate to the CLI let's run the PHP artisan make colon filament Dash relation Dash manager command it is for the category resource the relationship name is products and it needs to show the name column all right let's navigate back to phpstorm and let's register the relationship manager inside our category resource somewhere at the bottom right here what we're going to call our products relation manager from the category resource relationship now let's open our category resource directory relation managers product relation manager let's scroll to the bottom and let's copy our actions because we're going to group it inside an action group pass in an array and paste the two actions that we have and we can copy both the table and the four methods from the product relationship manager of the brand resource into the product relationship manager of the category resource since it's the same exact relationship so let's copy the product relation manager from the brand resource let's say that we want to copy the entire well let's copy the entire formatted actually it's a little bit easier with all the curly braces scroll up paste it inside the form method all right scroll down then we have our table then we have our table columns scroll down which is a little bit easier so let's copy these all right paste it inside the columns method navigate back to Google Chrome click on categories let's click on hosting scroll down where you will see the related products a dashboard is quite important in admin panels because it provides a quick and easy way to view relevant information and metrics in one place they basically help to identify Trends and patterns in data think about the average order price the total number of users and way more all of these things are mostly visually shown through widgets and charts any filament PHP project ships with a dashboard page where you will see two boxes these boxes are called widgets and by default filament PHP allows you to Define four types of widgets it has a stats overview which is a widget that displays any data of the numbers as stats in a row a chart widget which displays numeric data in a visual chart a table widget which displays a table on your dashboard as you can create custom widgets which we won't cover in this episode quick note widgets can also be placed right above your resource table we won't be covering that in this episode but it's good for you to know let's navigate to the CLI because we're going to create our first widget with the help of artisan which will be a stats widget so let's say PHP artisan make column filament Dash widget we're going to name it stats overview and we're going to add a dash dash stats option of overview it's asking us whether we want to add it inside a resource for now let's just hit enter Because this is an optional option and it will also prompt you with a question whether you want to create your widget in the dashboard panel or alongside other Livewire components we're going to choose the dashboard panel now this command has created a new directory and class for us so let's navigate back to phpstorm where you will see that a new widgets directory has been created inside the filament directory where right here you will find a stats overview class let me actually close off all the tabs that I have open all right now right inside of the class you will find a method named get stats which returns an array of stats to be displayed in a stats overview widget now we can pass in a key value pair right here of strings since we need to use the stat component so let's use our stat component and use the make method now it accepts a label and a value the label will basically be the title shown to you so let's say total customers and for the value we're simply going to pass in 10k once we navigate to the browser and refresh our dashboard endpoint you will see that we have created the simplest widgets which shows the total users which is 10K now we could navigate back and replace our second argument so the value with an eloquent query so let's say customer model colon colon counts once we navigate back to Google Chrome and refresh it you'll see that the total customers is equal to one now if we click on customers you will see that that is correct there are some additional information that you could pass into your stat components now let's see which ones you have we're gonna chain the first method which is the description method so let's say that the description is increase and customers we can add a description icon which will basically be a hero icon so let's say hero icon Dash M Dash Arrow Dash trending Dash up we can add a color of the hero icon so let's say color is success and we can pass in the chart methods the chart method on a stat component allows you to display a chart along with the numeric value of the stat the method takes an array of numeric values which will be used to populate the chart so let's pass in a couple random numbers so give me a moment all right once we navigate back to the browser and refresh it you will see that we have improved our stat component quite well now by default the stat will refresh every 5 seconds so if you quickly create a user and navigate to the browser within five seconds the counter will still be one now I personally think that with any huge applications where there are quite some queries this could be customized and refreshed to let's say every 15 seconds to update that we need to overwrite a property so let's navigate back to phpstorm now right above our getstat method we're going to define a protected static optional string named polling interfall where we're going to set the value equal to 15 s for seconds you could even disable it completely where you need to set the value equal to null but that's completely up to you and there's one more property that I want to cover which is the protected static bull named is lazy where I want to set the value equal to true by default widgets are being lazy loaded which you can disable with this property now you could even Place multiple widgets next to each other where you simply need to create a new stat right inside of the array so let's name this one total products where the value will be product model column column count we're going to change the description method to it which shows total products in app we have the description icon which will be hero icon Dash M Dash Arrow Dash trending Dash Down the color will be something else this time so let's say Danger and we have the charts which I will actually copy from above now let's actually create one more before we navigate to the browser and refresh it or let's say stat make pending orders where the query will be order model where the status is equal to our order status enum pending and we're going to change the Value method to it and let's actually copy paste the description description icon color and chart well I actually forgot to change the count method on our query navigate back to Google Chrome refresh it where you will see three charts the first one is the total customers we have the total products and we have depending orders now let's move on to the second widget that we can create which is a chart and once again a chart is a widget that displays numeric data in a visual chart it allows you to identify Trends and patterns in data making it a useful tool for analyzing information so let's navigate back to iterm now let's create a new widget by saying PHP artisan make me a new filament Dash widget named products chart and we're going to add a dash dash chart to it right here you will see that we have the option to create it inside a resource or let's just hit enter we're gonna place it inside a dashboard panel and right here you will see that we have the option to choose between five different types of shards for this example let's choose a line chart and you can modify this later on so don't worry about it let's navigate back to phpstorm let's open our newly created chart which is the products chart and right here you will see one additional method which is the get type method where you can change the type of the charts for now we're simply going to stick to a line chart so let's set it up inside the get data methods we're gonna Define a data sets which is equal to another array where we're going to pass in an array with data with key value pairs so let's say label is equal to blog posts created we have the data which is once again an array with random integers so let's add a couple values right here and then right outside of our data set we're gonna add the labels which is also equal to an array and the values right here are strings that represents the label for the x-axis of the charts which in this case are the months of the year so let's say January February March April May and let's actually add one more let's say June if we navigate to the browser and refresh it you will see that we have created a pretty cool chart isn't it the design has been messed up but we will cover that in a bit because I first want to show the data from the database so let's navigate to phpstorm now let's actually create a new method right below the gas type method let's say private function get products per month well let's type into it to an array and I'm going to do this relatively quickly because this is just larva code and it takes quite some time to cover all the steps that we're going to perform so we're first going to get the current time by defining a new variable named now and setting it equal to carbon colon colon now we're going to define a new array or let's say products per month which is equal to an empty array then we're gonna Define a new variable named months which is equal to the collect method it ranges from 1 to 12 and we're gonna map it we need to pass in a callback function so that's a function parentheses but we're going to use our variable now and our variable products per month we do need to pass in a variable inside a function which will be one single month variables that we're going to use we're going to add curly braces and hit enter so we're first going to get the count so let's say dollar sign count is equal to product the product model where months is created underscore at and we're then going to use carbon again we're going to parse the now month but we're going to pass in the month that we have defined per loop we're then going to format it where the format will be years Dash M and then we're going to chain the count methods to it then every time it Loops we need to add the month into the products per month I made a typo right here all right this looks better so what we can do is basically say well products per month brackets is equal to the count and we're going to return now month we're going to once again pass in our variable months and chain the format method to it where the format will be capital M for the month now on our months variable we're going to chain the two array method to it because we're simply going to use the array inside our get data methods so outside of it we're going to return an array where we have two key value pairs the first key is products per month where the value is products per month and we have the months itself which will be variable months then we need to update the get data method where we're first going to Define a variable names data which we're going to set equal to this get products per month we're going to replace the actual data right here the array with our variable data brackets products per month all right and then we're going to replace the labels with data brackets months once we navigate to the browser and refresh it you'll see that we have made a typo right here so let's scroll down for a moment because the where months needs to be a month with th let's navigate back to Google Chrome where you will see that it has defined a pretty nice chart well we actually created all the products in August and September but that doesn't matter just like the sword of the navigation items we have a source property that we could overwrite on our widgets so let's navigate back now let's open our stats overview scroll up now let's define a new property let's say Protect it static optional end named sort which is equal to two now let's copy it because we need to place it inside our products chart as well right above our gate data method we're gonna paste it but the integer value will be equal to 3. if we navigate back to Google Chrome and refresh it you'll see that the source of 2 has been placed right above the sort of tree now I want to create one more chart where I want to show the product status and a bar chart which is also pretty cool I think so let's navigate back to iterm now let's perform a clear right here and let's say PHP artisan make me a new filament Dash widget and let's name it orders chart dash dash chart I made a typo because it is chart with an H all right we're not going to create it inside a resource it is for the dashboard panel and this one will be a bar chart let's navigate back to Google Chrome or let's open our orders chart let's paste in the sort that we have which will be the same sort as our product sort because we want to place them next to each other right so let's navigate back and say three where if I refresh it you'll see that they have in place right next to each other let's navigate back because we need to focus on the get data methods where I want to show the order statuses in a bar chart format so let's define a new variable named data let's set it equal to the order model we're gonna select the status and we're going to perform a DB query which is a raw one where we want to get the count as count and then we're going to chain the group biometer to it because we're going to group it by the status and we're going to pluck the count and the status and we're going to chain the two array methods to it all right inside our return statement we're once again going to define a data sets which is equal to an array where we're going to pass in an array with a label of orders we have data which will come from array underscore values our variable data that we have defined right here and then we're gonna pass in the labels on the bar charts which will come from our order status you know cases pretty cool let's navigate back refresh it well right here you will see that we have two pending orders we've got one more left which is a table widget now let's say that we want to show the latest orders in a table format right below our charts let's navigate back to iterm let's perform a clear let's say PHP artisan make me a new filament Dash widget named latest orders and I'm going to add a dashed Ash table to it we're not going to create a page inside a resource page it is for the dashboard panel and as you can see it has been created successfully let's navigate back to phpstorm open our latest order we're first going to define the sort so let's say Protect it static and dollar sign sort is for and right here you will find the same table method as we have seen before within our resources now before we Define The Columns or let's define the query first which will set the query that will be used to populate a table which will come from our order resource and we're going to use the get eloquent query method right here then we're going to change the default pagination page options method which will set the number of items that will be displayed per page in our case we're simply going to pass N5 then we're gonna chain the default sort methods to it which sets the default sorting of the table we're gonna say look at the created underscore add column and sort it in a descending order and then we're going to focus on the columns methods which will take an array of column objects and I don't want to Define it myself so I'm going to open the order resource scroll down to the table methods and copy the text columns that we have navigate to my latest orders paste it right here navigate to the browser or refresh it scroll down where you will see that the styling got a little bit messed up but we can fix this by navigating back to our phpstorm inside our latest order Define another property so let's say Protect it int pipe string pipe array named column span where the value will be set equal to 4. if we navigate back refresh it scroll to the bottom you will indeed see that it has been full spanned and the latest orders are visible foreign is basically a component that asks a specific feature or functionality to an existing system or application filament PHP has tons of features and you most likely won't need any plugins when you want to build simple applications but sometimes you just want to extend the functionality of the framework one pretty cool feature that filament PHP has well let's open a new tab now let's say filamentphp.com is that they have a plugins tab on their official website right here you will find a total of 97 plugins that they offer now keep in mind that these are not all created by the developers of filament PHP itself since filament PHP is open source there are tons of packages that have been created by contributors now one package that I want to install is named Excel export which has been created by and I hope that I'm pronouncing his name right Dennis Koch when you open any package in filament PHP you will find tons of documentation on it from available methods installation custom stuff and way more for now I want to open the installation part which is true composer so let's copy it let's navigate to iterm let's paste it right here and hit enter all right and what I want to do is configuring an Excel export on my order resource since maybe a company might want to print out the orders which can be done through an Excel format so let's see how this works let's navigate to phpstorm let's close off all the files that we have open and open our order resource and you don't want to have the option to only select individual rows and Export them filament PHP allows you to perform an action on multiple records at once through the bulk action methods right here so what we simply need to do right here is right above to delete bulk action is use the export book action if we navigate to the browser and navigate to our Local Host click on orders you don't see any options where we could basically export it and that's because we need to select the rows first we could either select single rows or all rows right here you will see that a button popped up named bulk actions and once you click on it you will see the export option now once we click on export you'll see that it has exported a Excel formatted file of our orders now I've just got out the part where I've opened it in Google Drive and once I open it you'll see the result right here we have exported the number customer status and Order date you've got tons of other configurations which I recommend you could check out through the official documentation of the package itself the second package that I want to cover is named Spotlight and as you can see it has been created by the same author named Dennis Koch this package basically allows you to easily search through your applications actions so let's scroll down and let's copy the composer require navigate to iterm paste it right here this package does not work out of the box because we need to register it inside our panel configuration so let's open our where is it provide this directory admin panel provider and anywhere let's say right under the user menu items we're gonna chain the plugins method pass in an array where we could add multiple plugins the plugin that I want to add is called Spotlight plugin make now let's navigate to the browser let's open our Local Host and this package offers four commands that you can perform to open spotlights which I will show you on the screen right now if I press on command K you will see that Spotlight just opened so let's say that we want to search for products right here you will see that it has added a three crud operations of a product we can open the list we can open a create field and we can open an edit field so let's say create where you will see that we have been redirected to the page where we could create a new product a VPS stands for virtual private server which is a type of Hosting that uses virtualization technology to create several virtual servers on a single physical server each virtual server works independently with its own operating system CPU and ROM allowing users to have more control and customization over their server environment compared to Shared hosting now you might wonder what advantages hosting a larval application on a VPS hosting has since there are many different hosting options it includes greater control and customization over the server environment as each virtual server works independently with its own operating system CPU and ROM this allows for more efficient resource utilization and better performance compared to Shared hosting now as you might have noticed throughout this entire course we're going to use hostinger as our hosting provider hostinger is a web hosting provider but it even adds more to that you could set up a shared host doing Cloud hosting VPS hosting email hosting and SSL certificates but those aren't specifically the reason why you should choose hostinger since there are tons of other web hosting providers available on the web so let's talk about a couple advantages regarding the VPS hosting so in the browser let's go to hostinger and VPS hosting and if we scroll down you'll find a couple advantages right here and the first one in my opinion is the biggest one because it's regarding their storage and processors with The Cutting Edge technology that it offers you can experience Rock Solid performance for your Web projects and the best part is available in Industry leading hpe and Del servers spreader will cost four continents you also have full ownership of your Hardware resources thanks to the industry standard KVM virtualization platform so if you have an exciting project ID I think that this is incredible to have secondly hostinger offers lightning fast speed and reliable uptime with their fiber connected infrastructure hosting or offers a blazing fast 300 mb per second network speed this makes VPS hosting a pretty solid Choice when it comes to building e-commerce's gaming platforms streaming platforms or pretty much anyone who needs a lightning fast website loading speeds finally it's backup and snapshots at hostinger your data is safe with your automated weekly backups this means that you can rest assured that your data is protected in case of any unexpected errors or issue but what if you need to perform major changes to your system this is where manual snapshots come in with hostinger you can easily create a manual snapshot of your system at any time this gives you the ability to reverse to a previous version of your system within minutes in case anything goes wrong overall having backups on Snapshot is crucial when it comes to VPS hosting with hosting as a reliable and easy to use backup and snapshot features you can ensure that your data is always safe and secure now on this page if we scroll up you will find four different packages that hostinger has to offer regarding BPS hosting all packages have their own discounts ranging from 57 to 63 percent now looking at the prices I got to say that the prices are pretty affordable when it comes to hosting if you host a Largo project on cloud hosting you most likely will pay a little bit less or maybe even the same depending on where you're going to host your project if we look at the features that these have to offer you'll see that the bottom five are featured on all the packages it offers AI assistance it obviously offers full root access it offers a dedicated IP address which basically means that an IP address is assigned to a single virtual private server instead of being shared among multiple servers this has tons of advantages because it allows for greater control and customization over the server environment as well as increase security and flexibility and it offers a weekly backup now what about the advantages that will change depending on the price you will receive more bandwidth and bandwidth refers to the amount of data that can be transferred between your website and your visitors within a certain amount of time typically measured in gigabytes per month this completely depends on whatever you need for your application a website with low traffic and small files may be fine with 1GB of bandwidth but a website with low traffic and small files may be fine with 1GB of bandwidth but the website with higher traffic or larger files may require significantly more bandwidth to function properly secondly it offers nvme SSD storage which is a type of high performance storage technology that uses non-vital Memory Express so mvme protocols to communicate with a computer's processor it also provides faster data transfer speed and lower latency than traditional hard disk drives and even traditional solid state drives for smaller projects or websites 50 GB might be more than enough however for larger projects or websites with a lot of media files 15gb may not be sufficient it's important to consider your specific storage needs when choosing a hosting package they also offer a variable of from and ROM stands for random access memory which is a type of computer memory that allows data to be read and written correctly it is a crucial component for running applications and programs on a computer for smaller projects or websites 4GB might be sufficient however for larger projects or applications that require more resources 4GB might not be enough finally they offer different vcpu cores VCU stands for virtual Central Processing Unit it's a number of processing cores that are available to your virtual server the amount of vcpu cores that you'll need will depend on the specific requirement of your project such as the amount of traffic that you will expect and the complexity of your application that you will be running in my opinion a good starting point is to choose a hosting package that offers at least two fee CPU cores and then scale up as needed which brings us to a dubio right the filament PHP project we created can easily be hosted on a kvm1 package but personally I will choose using two vcpu cores so let's use the kvm2 package so let's add it to our cart right here you have two options you could either choose to pay for 12 months or you could pay for a single month which makes the price more expensive since it will be 18.99 quick note hosting your offers a 30-day money-back guarantee which allows you to test it out and see whether any type of Hosting social requirements honestly I love hosting providers that give me the option to host a project for a month you obviously need to host a project for longer but having the option to test out different hosting options is a huge Plus in my opinion because you can test out different types before you make a final decision personally I think that a 12 month plan is more profitable so I'm gonna stick to the 12 month deal and if we scroll down to step number two you will find an overview of the services you're going to purchase we have a plan which has a discount of 58 it is a total of 116 dollars and one cent but but there is always a but right under the total you'll find they have a coupon code to link and once we click on it you'll see that it opens a input field with a button where you can add a coupon code of code with Ari apply it where you will see that the discount has been changed to 62 because it will give you an additional 10 discount paying around 100 for 12 month VPS hosting is a great deal for now we're gonna ask the payment credentials right here and I'll see you back once you have created your account all right after purchasing my VPS hosting I've been redirected to this page where I can start the setup so let's click on start now and right here you will see that it's prompting us with a question asking us to select the location for our VPS hosting the location of a VPS hosting server can and will have impact on website loading speeds and overall performance this is because the physical distance between the server and the user can affect the amount of time it takes for data to travel back and forth so you basically have to select a location closer to your target audience so it will ensure faster loading time and better user experience since I'm currently located in the Netherlands I'm going to choose the Netherlands right here now let's click on continue all right and for the next step it's asking us to choose an operating system there are three options right here and one of them is an option that we're not going to use which is the one to the right because it's for WordPress so we're left with the OS with control panel and a plane operating system now come on we're developers I completely understand that you want an OS with control panel but I personally prefer to use a plain OS so I can use a VPS manager that I want to use to connect later on so in our case let's click on Plain OS the next step is for the type of control panel we would like to use and right here we need to select the operating system for our VPS hosting you will see three recommended options but you have a complete list of other options you have Debian Rocky and Ubuntu regarding Linux and Ubuntu they are both operating systems based on the Unix operating system Linux is an open source operating system that is available in many different distributions while Ubuntu is a specific distribution of Linux the choice between Linux and Ubuntu will depend on your specific needs and preferences as well as the compatibility of the control panel you choose I personally have always used with Ubuntu and I don't really have a specific reason for that so I just want to stick to that as well so let's click on Ubuntu let's click on continue for the next step we need to set up our VPS hostname our root password and we have the option to add an SSH key so we can change our VPS hostname we can do that later on let's create a secure root password and I'm going to leave the SSH key option open right now so let's click on Save and continue it's showing us an overview of what we have selected the VPS location is in the Netherlands the operating system is Ubuntu and the hostname is well generated by hostinger so let's finish our setup and this will take a moment or two so pause the video and I'll see you back once that's done alright as you could see we're located on our hpanel where you will see an overview of the server on the VPS information tab you will find your dedicated IP address right here the status of your VPS which is running which has not been set because our VPS has just been created the current operating system the location and the node in the SSH access tab you will find information on how you can access your application through SSH you will find your IP address the user the password the port the IPv6 and the terminal commands to access your SSH now on the final tab which is plan details you will find some information that we have covered before but one pretty cool feature about VPS that I want to show you is the manage VPS section right at the bottom where you can upgrade your VPS on the go in other words a scalable meaning that you can upgrade your plan without having any trouble in case you want to do that you simply need to click on upgrade VPS now I don't want to cover all the tabs to the left right here because we do need to continue on with the installation part which needs to be done through a VPS manager a VPS manager is a tool that allows you to manage your virtual private server through a graphical interface it provides an easy way to perform tasks such as installing software configuring settings and managing files now the VPS manager that I recommend is named server Avatar I'm not going to cover the setup part because it is pretty straightforward I'm simply going to log into my server Avatar and continue from there so pause the video and continue on when you're ready as you can see I'm currently logged into my server Avatar account where I can connect to a new VPS hosting so let's click on create now let's say server all right like I've just mentioned server Avatar is a VPS manager tool that allows you to manage your virtual private server through a graphical interface and I think that the screen right here should make a lot of sense for most developers you can connect to a custom server but you can also choose between Amazon digitalocean and a couple other options what we need to do is selecting the custom server because we have our hosting provider which is hostinger then we need to add the server name which we can find in our overview the VPS information right at the top which is the server name that has been Auto created for us so let's paste it right here then we need to add our IP address which we could also find inside our panel right here so let's copy it and paste it right here then we need to add our root passwords which we have created but in case you have forgot your password already you can navigate to SSH access and change it right here this will take up to 60 minutes so I'm not going to perform that I'm simply going to add the password that I have created the SSH Port is 22 by default and if we navigate to our overview you will see the default SSH Port is 22. then we need to select our Tech stack and I want to use Apache so I'm simply going to use the lamp option I want a database of my SQL and I want to install node.js make sense right the typical setup when you want to deploy a Largo application but this time on a VPS server let's click on connect now all right as you can see we're connected to our VPS and the installation part right here might take a bit so once again pause the video and I will see you back once this is done all right as you can see right here our environment has been set up and there are so many configurations you could see and configure right here from databases to server loads to memory usage to disk usage and even to application users I can cover these all so I want to continue on by setting up our project I want to deploy my project through git so let's quickly click on the Integrations tab in the sidebar where you can see that you can link your bitbucket GitHub and gitlab accounts I want to choose a link my GitHub account so give me a moment and as you can see my GitHub account has successfully been linked to my server Avatar so let's click on the servers tab now let's click on the server that we have created now the next step is creating an application so inside the sidebar you will see applications let's click on it or let's create a new application and I'm going to make a test project so I'm going to enter a basic application name or let's say hostinger filament PHP it will be on a test domain and the test domain will also be hosting our filament PHP now let's click on Next Step well apparently my subdomain has already been created so let's say hosting your filament Next Step all right for the second step we need to select a method and how we want to deploy our project into our application I have added my project into a GitHub repository which you will find right here so what I can do right here is click on get select the service provider which will be GitHub where you will see a couple options that we could add and here comes the tricky part whenever you are working with a private repository you need to add a deploy key to your project right now my repository right here is where is it private but once this video goes live I will change the visibility to public and if we navigate back to server Avatar and click on public you will see that we don't need to add the deploy key and you can simply use the https URL that you can find right here to clone this project now this is the easiest method but in 99 of the cases your repository will be private so let's set that up before we continue on in GitHub let's click on the settings tab where in the left sidebar right under security you will find a deploy Keys option and once you click on it you'll see a new option where you can add your deploy key right here we need to create a new title and add a deploy key through server Avatar so let's navigate back to server Avatar click on private say generate SSH key or let's copy it let's navigate back to GitHub or let's name it server Avatar let's paste our SSH key inside the key text area there's no need to add server Avatar write access so let's add our key all right as you can see it has been added all right as you can see right here our deploy key has been successfully added so let's navigate back to server Avatar because we need to select our account which will be info at codewydari.com let's select the repository which will be hosting our Dash filament now we need to select a branch which will be the master branch and then you have the option to add a deploy script now whenever you open my GitHub repository which I have Linked In the description down below you will find the deploy key as well but I will keep the steps right here relatively easily so let's add a couple commands right here let's say gitbull after the get full we need to clone the dot emv.example file so let's say cp.eav.example to a file name.emv we're going to run the PHP Artisan key column generate command we're going to install or update composer so let's say composer install dash dash no dash def dash dash optimize Dash Auto loader we're then going to run PHP Artisan route cache PHP Artisan cache clear and finally PHP Artisan migrate now let's click on next step then we need to choose our system user I don't recommend using admin right here so let's choose new user let's name it code with story and the password will be very secret click on next step then we need to select our PHP version for larval 10 plus I'm always going to use PHP 8.2 let's click on next step now let's review it for a moment and everything seems fine so let's say create application now there's one more setting that I want to update real quick so let's navigate to servers let's open our server now let's click on settings right here because I want to update the PHP CLI version to 8.2 as well now if we think about it for remembrance there are some steps that we have missed right we haven't created a database and we most definitely haven't set it up insider.emv file so let's click on databases and right here we're going to create a new database we're going to name it hosting or filament we're going to set up a custom username and password where the username will be coded with sorry and you will see my password in a bit which will be test one two three four explanation mark we're not going to add the remote IP so let's click on create a database and as you can see we have been prompted with a message saying that our database has been created successfully so what we could do right now is navigating to our applications open our hosting or filament PHP app where we have an option in the sidebar which says file manager once we open it you'll see a familiar structure so open the public.html file where we need to show hidden files and right here you will see the dot EMV file and once you open it you can edit it right here so I'm going to keep it simple right here I'm going to change the database name to hostinger filament the user is code with Dory and the password is test1234 explanation mark let's click on Save it takes five seconds so give it a moment click on yes I'm sure all right now if we navigate back to our application you'll see that somewhere if it shows up we'll open our project first it has a primary domain and once we click on it you'll see a forbidden which means that the error code is 403. this is happening because laravel doesn't really understand our project structure and we can create a new hidden file name HD access so let's navigate back and let's open our file manager again the public underscore HTML let's say create a new file let's name it dot HD access let's take the show hidden files checkbox let's open our DOT HD access file and I'll just add a piece of code right here as a comment since it's very easy to make mistakes right here so just follow along or copy the comments or from my Repository so I'm going to paste it right here I'm going to click on Save changes I'm gonna wait five more seconds all right yes I'm sure if I navigate back to my local host and refresh it you will see the second error which is a 500 error and this is happening because our deploy script couldn't be performed since we had no database connection so what we can do is two options change it in server Avatar or we could open our VPS copy our terminal command navigate to a terminal paste it right here and hit enter I do want to use a fingerprint so let's say yes my password is a password that I have added myself and as you can see I have been connected so what I need to do right here is change directories into my home directory if I perform an LS you will see a code with diary directory so let's say CD code with Ari if we perform another LS you will find the directory that we have created ourselves so let's say CD hostinger another LS open the public directory perform another LS where you will see a laravel project so pretty straightforward right here let's say composer update all right it's installing all packages that are required then we need to run the PHP Artisan key column generate command finally we can run the PHP Artisan optimize colon clear command once we navigate back to the browser open our localhost and refresh it will see that our Largo project is visible in the browser if we change the endpoint to dashboard you will see that our filament PHP project is available now this was it for the video of my freedom and PHP video series once again don't forget to use my discount code of codeword when you're going to subscribe to a plan of hostinger where you will get a 10 discount of any hosting plan and if you do like my content and you want to see more leave this video a thumbs up and if you're new to this Channel please hit that subscribe button

Channel: Code With Dary

Views: 31,975

Keywords: how to add admin panel in laravel, 10 create custom widgets - laravel filament tutorial, a winning combination for dynamic web apps in laravel filament, laravel filament packages dashboard, filament admin panel, introduction to laravel filament, how to setup filament laravel, how to build admin panels in laravel, filament for beginners, how to create filamentphp based admin panel, how to customize tables - filamentphp v3 tutorial, the key features of filamentphp

Id: wGu8lgaK_v8

Length: 227min 54sec (13674 seconds)

Published: Wed Sep 20 2023