How to Define Relationships in FilamentPHP - FilamentPHP for Beginners

what's up developers say Dar here and welcome back to a new video where we're going to continue on with the 10th episode of our filament PHP video series where we're going to Define all the relationships we have inside our application 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 PHP storm let's close off all the tabs that we have open 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 has a 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 said that it needs to show a select component for the column brandor 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 a belongs to many relationship with a category model now this needs to be defined in almost the same way as with the brand relationship so let's open our product resource again and right below our select component we're going to create another select component where we're going to 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 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 change one more method to it which is the required method and let's actually add it on the brand ID as well now this should do the trick for us 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 host hosting the description is cloud hosting as well it is visible and app parent 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 featured 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 D of Hosting ER and we're going to add two categor 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 PHP storm now let's actually remove the with time stamps 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 product or let's name it web hosting again same description it is visible it is featured the sku1 price one quantity one I've just added the image the brand is hosting here 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 could see we've been prompted with 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 PHP storm for a moment let's open our database client and let's open the category product table where right here you will see that two rows have been inserted with the product ID of the product that we just created and the two categories we select selected all right let's move on to our second resource which is the brand resource and let me close off all the tabs that we have or let me open the brand resource and let me also open the brand. PHP model right inside of our model you will see that we have one relationship which is a half many relationship with a products 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 manages in 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 Artis make colon filament Dash relation das manager or we need to pass in three 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 at enter you'll see that our products relation manager has been created so let's navigate back to PHP storm and since we're already inside our brand resource right here let's register the relation manager and let's do that right 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 directory with a products relation manager class inside of it before we open it let's quickly register it first so right here let's say products relation manager call 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 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 mod all where you could create create a new product we haven't defined the fs 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 model and we can even delete an Associated product all in the same page now let's navigate back to PHP storm 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 product's relationship inside the brand model so let's start off inside the table method 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 at brand but we could also show the same table that we have on the on the products resource now the one thing that is bothering me are the actions so I want to group it so let's navigate back to PHP storm 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 where right here you will see that we have grouped the two actions that we have now let's continue on with 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 modu 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 you users to find the fields who 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 change 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 second tab with the name of pricing and inventory let's change the schema meod to it again pass in an array create a t tab which will be named additional information and let's change the schema methods 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 PHP storm and right on our tabs we're going to change the column span full method 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 so let's define the fields inside of it well I don't want to define the fields myself again since it will be the same as the project resource but just in a different order so I want to copy them from the partex resource let's navigate back to PHP stor let's open our product resource and scroll to the form method where right here we're going to copy the text input name the slug and the description inside our product resource we're going to paste it inside of first tab all right and then on our tab we're going to chain The Columns method 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 stab we have the option to add the name Slug 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 or 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 and 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 product's resource where we're going to copy the brand ID and the category ID paste it right below our published uncore at 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 and let's paste it right below our categories field 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 change 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 need 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 PHP storm delete the brandor ID select field navigate back to Google Chrome refresh it new product where you will see that we have finished our model now let's try to create a new product let's say test product it has a description of test 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 or let's click on create I forgot the 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 PHP storm or let's close off all the tabs that we have or let's open the customer. PHP model where 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 at 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 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 let's click on New Order where we have created a wizard step so let's say the customer is Dari 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 PHP storm 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 sideb where you will see that we have a select field for the product ID let's chain 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 the reactive method you may allow a form to be reloaded when a field is changed then we're going to chain the after state of updated where we're going to execute a callback function when the value of the product underscore ID Fields changes so let's say FN parentheses we are going to pass in the state the forms backlash set object set and then we're going to add the arrow notation because on line below our set object 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 project 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 episode of the series and that's adding a total uncore 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 iter now let's create a migration to delete the total price let's say PHP Artis make call in migration let's name it delete underscore total underscore price underscore from the orders table or we're going to specify the table name which is orders all right let's navigate back to PHP storm 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 where we're going to to drop the what is it total underscore price now let's navigate back to iterm 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 PHP storm 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 uncore 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 get the values from the current row we're going to 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 notes all right you'll see that we have a column named total price so 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 episode remember to update it whenever the quantity changes we need to add a life method on our quantity component so where is it right here let's change the life method and I'm also going to add the dehydrated methods to it now we need to make one more change and that's for the unit price right here because it is disabled and disabled fields and 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 note 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 product up 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 let's open our orders table where you will see that the shipping price has been set equal to n so let's open our order research for a moment or 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 uncore price we're going to change the label method to it where the label is shipping costs we're going to change the dehydrated method to it we're going to change the numeric method to it and we're also going to change 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 going to choose a random product or I'm going to 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 storm 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 course and the category model so let's close off all tabs uh 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 relationship so let's navigate to the CLI let's run the PHP artisan make colon filament D relation D 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 PHP storm 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 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 form 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 form method 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 for now I want to wrap up this video where we have created all the relationships inside our application there are obviously a couple other relationships and polymorphic relationships as well but I can't cover them all this was it for today's video if you enjoy the content and 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

Channel: Code With Dary

Views: 6,279

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, relationships in filamentphp, many to many relationship filamentphp, how to define relationship

Id: f2hzXI4Af10

Length: 27min 20sec (1640 seconds)

Published: Tue Sep 05 2023