How to Create Resources in FilamentPHP - FilamentPHP for Beginners

what's up developers is Dory here and welcome back to a new video where we're going to continue on with the fourth episode of our filament PHP Series where we're going to build our first resource 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 crot 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 now 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 product research directory and a product 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 Local Host 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 products 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 form method right here and we have the table method now the formatted defines the fields that will be displayed in the 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 the 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 product 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 a 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 text 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 Project 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 dari1234 then I have my database name which is hostinger underscore filaments once I click on apply and okay 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 this log 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 stable 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 of random numbers the image will be skipped for now the description is VPS hosting 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 so 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 defined our first product and it only shows the columns that we have specifically defined inside the columns methods 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.e 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 Forum methods which like I mentioned before focuses on the views of forms so basically the field set 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 underline 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 to 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 we're 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 a markdown 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 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 '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 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 let'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 the 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 fields 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 enum 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 that's 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 now let's get rid of collapsible alright 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 product through filament PHP the cool thing about using the form Builder well if we navigate 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 for now I want to wrap up this video where we have created our first filament PHP table overview followed with the create and update Pages we're definitely not done since in the next video we're going to have a look at resource modifiers and resource filters now this was it for today's video If you enjoyed the content and you want to see more leave this video a thumbs up and if you're new to this channel don't forget to hit the Subscribe button

Channel: Code With Dary

Views: 7,407

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, learn filament step by step, resources in laravel, resources in filamentphp, how to create resources filamentphp, how to build tables in filament

Id: j-d3TLlvQp4

Length: 25min 36sec (1536 seconds)

Published: Mon Aug 21 2023