Laravel Blade Components Tutorial with example - All about components in laravel 10

hey guys welcome back so guys we are continuing our level 10 tutorial so now guys in previous video we have seen about how to create the layout using component so which we have seen in previous video and now guys in this video we are going to continue the same topic about blade template using components okay so guys we will be seeing how to create the component rendering the component pass the data to your component and what are the component attributes and slot and inline component view Dynamic components okay so guys now let's get started so first we are going to start with the component creating a component so you just click on this component and it redirects you below so guys here you see a command that is how to create a component so now guys let's get started so let's move to our editor and let me close everything so yep and arrange the files so now guys first step we are going to create the component PHP artisan make colon component space and then your component name so I will take as alert message so alert a l e r t m SS a g e alert message hit enter perfect so our component is created so you can find that in app views and here you see alert message and now guys here you'll be see about a render function so now guys let me just show you that resource views and components inside that component you see that alert message perfect so we have got the file guys and now either you can just control and click and go to this file so now guys let me just type a message here let's remove this and type in a H4 tag hello I am alert message component okay so now guys let's render this component so let me just show you here we have seen that how to create a component and now let's begin with rendering the component so rendering the component is nothing but about just using this component somewhere else so guys let me just show you on my homepage so what we have to do get back to your routes so let's go to routes web.php and here is a get method of homepage which is opening the index page of front end so here is my page and now guys let us use that alert message component so you have to use a x string value so this is a prefix before using any component so this is mandatory guys if you want to use any component and now let's tell alert hyphen me S AG message forward slash and end okay so now if you get back and refresh so here you'll see hello I am alert message component and now this is all about rendering the component and now guys um let us see with the next uh topic here passing the data to component so you will be having some data and you have to pass the data inside this component and which should be accessible inside this file your component file okay so guys there are two methods that is using the props also you can access the data Direct you can declare a props here like sending a message value so message equal to double Cotes here and you can give dollar message or whatever success message you get okay or if you do want to give a variable direct you want to send the message just remove this colon and it becomes a string okay so hello success you can send in this way so if you want to pass a variable like you are sending a success response from your controller and you want to show here so what you can do just create a PHP and PHP and create the variable equal to here example let's still saved successfully okay and now you can send this variable insert this and you can alert insert this and now guys let us copy this props and go to your alert message component so here is my alert message component so that is resource views component alert message and directly you can use a prop at prop function and inside that array you can pass and pass a number of properties you want so now you can copy this and use at this place so open and close crace dollar message and now guys this is a alert message so let me use a bootstrap class to show in a alert type so alert alert of success I'm am sending here and instead of H let's make it to H5 tag let's save and now guys let's see the output so refresh perfect so here you you see guys that we have sent the message as saved successfully from your properties so this is how you pass the data to your component so this is a attribute like property and you're sending that and accessing as a props over here so now guys if you don't want to use this property here okay you don't want to use this props so how can you achieve this message part so guys let's get back to our index blade where we have used the component and now guys let's copy this property property that is message and go to the alert message component class you have created so as we see that we have created the component using Artisan command which goes to app views component and you have a alert message component okay so inside this we will be telling like I'm getting a public variable that is dollar message and you have to pass this dollar message inside your construct method and then dollar this of message okay so now guys let us get back and see the output so here you see the message showing is successful and now let's get back and go to your index blade file so now let me just change the variable here success message new let's copy and paste here and see what is the difference so there is no difference guys so everything works fine and if I try to change this property okay from message to let me keep a shortcut as MSG so let's save and you refresh here you will get a error so which is a required message here it's telling inside your alert message component so what you have to do let's copy this property and paste here paste paste and change this change here okay and now guys let's get back to our component file and change this variable MSG so now you'll be able to access the correct data so we have given the name but it is not able to recognize so we can do one more thing guys like try to if you are passing a string value then we can directly send like this uh let me just see see now what happens here you see whatever we have printed it's coming so it's just a catch issue guys so you just need to clear that catch of this component and it will work fine so if you're using a then success message of new it's going to now give the correct output so it's just a cach issue okay so now guys we have seen about how to use how to pass the data inside your component okay so let me keep back as message itself as we follow a correct structure so let me just replace and go back here and again give the correct value that's it and now guys let's come back here and here you see component attributes so what is this component attributes in larl so let's go here and you see that um there is a global variable called attributes dollar attributes so you can utilize this in many methods so larel gives for class and merging so we have two functions one is merge and one more is having that is about the class okay so with this help of merge you can merge any type of attribute as shown here so guys let me just copy this and let me give an example for this inside this alert message itself so let's get back and get back to your component and paste here so inad of this class you can directly paste this variable okay so now guys let us see what happens here so now I don't want this dollar type right now so let me remove this we will be seeing how to use that now let me show you the output refresh everything works fine and now guys let's see what is this if you try to put as warning so you'll be getting in different color that it's a warning alert so let us try to access this first so what we can do get back to your index blade. PHP where you have rendered the component and just pass the attribute called type equal to double quotes and you mention your alert type here warning or success anything okay so if you want to keep in a variable format you can pass that dollar type let's copy this and paste here equal to and let's tell it's going to be a success type so it will send here okay so it is going to send the success or warning error whatever type you want to send and now guys let's copy this you can utilize as a prop also as I have told you in the beginning of the video and if you don't want to use a properties then you can directly mention as a public property here so public I want to get this as a string dollar type okay and this type you can be directly using here comma type and copy and paste and just change the variable names dollar type and now you'll be able to access this variable inside your alert component and here just concatenate using dot dollar type done guys and now you can remove this and now guys let's save and get back so refresh perfect so here you see guys that we have a success alert message and let's get back to our blade so if you want to change the type just make it to warning so it will give a warning type alert message and if you want different let's make it to Danger so refresh done and you have a alert message and you have a class declared here here right so inside this class you have two classes and now you want to merge more classes like I want to give a padding top and bottom so something like this padding top five and it will spread that area so refresh so here you see it spreads right so if you want this class to be accessed inside your component you can just add a class and py5 that's it so it is going to merge in that component okay so as simple and if you just remove this so it will ignore it okay so guys this is a benefit of merge over here and if you want to just work on the class you can just use this function like as shown here guys dollar attribute of class and just use this format of showing inside array like for each class you can just declare in single codes and give comma and then again for each class you have a um logic and here you see one example with the button also so if you want to add a class and merge also you can use here with the type so now guys yep let's uh go top and here we are going to see with the slots so what is slots in this so let's click on here and here it's showing with an example of alert so guys we have already done with an example of alert let me explain you with the example called labels okay and now guys let's give a horizontal row so it will be clear to understand what we are working on so now let's take a label so this is a label guys and tell my first my first name let's save it and refresh so here you see the label so now let let's make this as a component and utilize as a component in our blade templates so yep let's get back let me close everything here go to Resource views component so inside this components let's create a folder called form so inside this form we are going to create our label input field buttons all the form requirements we will keep it so I have created the form folder so now guys let's create a label do blade PHP let me open and close div and here our label part comes so let's take the label and we do not require this and here our dollar label name will be coming and now guys we don't have a component we did not create so let's ignore that and let's use a props and you can Define the label name here so I will tell my property will be as a label name or you can mention as value also not a problem so just mention as a value Here and Now guys let's get back to our blade and instead of this label let's use our component label okay to get the component so you have to use x hyphen and then your component name so where is my component file first let me just show you so it's goes under resource views component so by default we are inside the component and now guys you have to tell I'm inside the form and then label so form and use a DOT notation to continue with the blade file so add a label and close this tag okay so now guys here you see one is open and close tag let me comment out this and let's create one more form. label I will tell why I have done like this so now guys as you see inside the label blade component now we have a given a props here property value so let's mention that value equal to and this is my first name okay done and now guys you'll be seeing that we get the variable my first name okay so we were understanding why are we using slot here so let's copy this slot and get back go inside the component and use that slot variable let's mention as slot here and let me comment this out now get back to your index let me comment this and open this component and here I'm going to tell uh ABC so whatever your my first name you can tell let me copy and paste here let's save and refresh so here you see that ABC my first name okay so this is how the slot works now so you don't have to get any props or anything just mention that inside this component uh whatever I paste or whatever I design is just going inside this component and appending it done so now guys in some cases what we do like I might use in this format or I might use in this format so you can utilize in both format also so what we'll do let me comment this and let's uncomment this and what you have to do just get back and UNC commmand this and now you have to use a value here dollar value colon colon dollar slot so which means if value is provided then work with value if value is not provid provided then work with slot so let's see here so first we'll check with this label component and refresh so here you see my first name and let's use this slot part oh my slot first name now let's save refresh so here you see that both works so this is how our slot works okay so as we have seen already with the creating the layout in previous video so while creating the layout we are using the slot so the same logic work here also okay and now let's get back to our documentation and move up to the components we have seen this component attributes then slots and reserved keywords are nothing but just a functions which is already reserved you cannot use those functions okay and now guys inline compon component views so what is this let me just show you here so this is how it looks in line component so basically it's nothing but um instead of using this component okay or your blade label component so instead of using here you'll be directly using this div tags inside your class component itself okay instead of using this view you are going to use directly so which is nothing but about this so you have to just copy this and paste here or when you generate you have a specific command to generate it let me just contrl Zed and let me just show you that command over here so you can create a PHP Artis and make component alert and hyphen hyphen inline so this is the main tag pass for creating the inline class component okay so it's works the same process however you are using this so guys we have understood the basic concepts of our blade template components in laravel so guys in this video that's it and let's continue in next video with the new topic in LL 10 so guys thank you for watching this video please subscribe like and share

Channel: Funda Of Web IT

Views: 2,229

Keywords: fundaofwebit, Laravel Blade Components Tutorial with example, Laravel Blade Components Tutorial with example - All about components, laravel components rendering, pass data to component in laravel, component attributes in laravel, laravel component tutorial for beginners, laravel component step by step tutorial, blade components tutorial, blade component, laravel essentials, laravel blade view component

Id: IzsqMOQDu-I

Length: 20min 11sec (1211 seconds)

Published: Thu Nov 23 2023