Become a PRO at Using Components in Laravel

[Music] what's up developers and welcome back to a new video where we will be covering every single aspect you need to know when working with components in laravel quick pause do you want to support the channel only to continue on creating content well you can support the channel on patreon right now where you get benefits just as a private Discord group where you can share your coding issues and other developers who will help you out if you are interested to join the link can be found in the description down below since larva 5.4 larva introduced a very popular patent which are components and Slots when it comes to Applications you don't want to copy paste every single item you're going to use on your front end with the usage of components Largo allows you to make reusable independent and decoupled components within your base templating engine an example might be our header right here named latest article do you want to copy paste the H1 with its classes every single time you need one or do you rather create a component that you could reuse well my answer would be to create a component I have created a new repository for this tutorial where I have already created a front end of my larva application I will link it in the description down below now within the repository you'll also find a readme right here where all steps have been written down that you need to perform in order to get the same output as I have besides that I quickly want to show you the models that I've created so you can get a better understanding of what we're going to work with so let's navigate to iterm and let's run the PHP Artisan model colon show and we're going to show the post model now keep in mind that you need to import the doctrine d-ball so let's say yes all right now let's run our Command one more time and right here we have a post model with a couple attributes ID user ID title excerpt and so on basic stuff with one relationship which is the tax model where it has it belongs to many relationship defined let's quickly output the attributes and relationships of our tag by running PHP Artisan model colon show and what we're going to show is the tag which has a default slog name and the timestamps besides that it also has a relationship with a post table finally I have also defined a post tag model which we can output by saying PHP Artisan model colon show name post tag right here you can see that our post tag is a pivot table with two attributes it has the post ID and it has the tag ID where both of them are foreign keys I'm not going to dive into the controller factories or blades since it's basic stuff which you should be familiar with we will be converting most of our HTML into components which has to be done right inside of blade if we navigate back to Google Chrome and open our Local Host you'll see a lot of pieces of code that we could transform into a component since we can't reuse it on different pages and I want to start out with a simple component and make it more difficult step by step and the easiest example will be the latest article H1 that we have right here so let's navigate back to visual studio code open the resources folder views folder what we have an indexablade.php file right here you'll see in H1 but if we open the contact.blade.php file you'll see that we pretty much use the same H1 which is overkill to create it twice if we create more pages we do have to keep repeating them now whenever you want to create a component you need to use an artisan command for it and well guess the command let's navigate back to item it's the PHP artisan make me something called in component followed with the component class name in our case we're going to call it header with a capital h a we'd enter you'll see that Artisan prompted us with an info message saying that the component has been created successfully right now two new directories have been created for us so let's navigate back to visual studio code and let's start at the top of our app directory let's open the app directory where you'll see a new directory created named View and if we open that you'll see a components directory within header.php class inside of it next to our components header class larva also created a view template that you could use obviously views can be found inside the resource directory where it has created a components directory with the header.blade.php file inside of it keep in mind that there is no requirement of using the header components class at larval generated for us inside the app directory so let me show you what I mean if we copy well let's open the index.blade.php file and we copy our H1 open our header.blade.php file and paste it right here inside of our header component then we need to navigate back to the index.blade.php file since we need to render our first component inside of an H1 tag and whenever you want to replace so let's say the H1 tag that we just deleted with our component tag we need to start off with the Last Stand sign followed with a required x dash to tell blade that we're going to call a component right here then we need to follow it up with a component cast name and Kebab case which will be header once we have finished the class name we need to close it off by adding a forward slash greater than sign if we save it navigate back to Google Chrome refresh it you'll see that our latest article H1 is still visible with the use of components now you might wonder where the uses of the component class is since our component Works without doing anything inside of it so let's navigate back to visual studio code and let's open our header class now the namespace should make sense the U statement as well we have a default class called header which is extending the component class it has a default Constructor which you should be familiar with followed with one method named render right at the bottom now the render method is an abstract method inside the components class meaning that the render method needs to be implemented in any class that extends the component class you're seeing that it's returning a simple view to the components folder where it will search for a header.blade.php file this class can be seen as a invokable controller class in laravel whenever you want to access a service out of the service container and process data through your component you'll be using the component class right here inside the header.blade.php file you'll see that we added our H1 which is fine but if we render it right now in other Pages we have a static latest article which you actually don't want to have so we need to make sure that we pass data right here and the best example might even be larval its own example under official documentation now whenever you use an alert that pops up you can obviously have different types of alerts it can be a success message info warning or even an error by adding a Constructor parameter to our view component class larva knows which data is required so let's do that let's navigate back to our header class and write under the class name let's say that we want to define a new property and the property needs to be public so larval knows that it needs to be available on our or component views now for our header we're simply going to deal with a property called title I recommend you to always use camo case for your component Constructor argument so if we make a camel case of it it will be title of header so something like this now this might be confusing but you will get used to it since the Constructor argument should be used in camel case while your reference to your property using Kebab case but for now let's just undo it and stick to title now we obviously need to make sure that we use our property title which can be done right inside of the Constructor so let's pass it in as a parameter and then inside the Constructor we're going to say that this title so our property is equal to the title that's being passed through if we save it navigate to the browser refresh it you'll see that we have run into our first error message since we've got a dependency error the header class component accepts one required parameter right here called title so let's navigate back to the index.blade.php file since we need to pass in an argument inside our header component right here now this can be done by setting a new property type of title equal to a string of the title that you want to pass in now in our case let's say latest article we're not done yet because we can render our component right now but the data will be static from a component class whenever you want to Output the argument inside a header class you simply need to Echo it as a variable inside the header component so let's open the header.blade.php file and let's replace latest article with a variable named title which is coming from the title argument that we're passing in right here so let me save both files navigate back to Google Chrome refresh the page and as you could see latest article has been printed out so let's put it in using one more time to show you how we could save ourselves some lines of codes if we click on contact in the top right corner you'll see that we have been redirected to the contact page where we have our H1 named contact so let's replace this with the header component that we have created now we need to navigate to the contact.blade.php file remove our H1 call our component by saying x dash header pass in a title of contact and finally we need to close it off if we save it navigate back to Google Chrome refresh the page you'll see that contact has still been printed out now up until now we simply worked with passing static data to our component so let's see how this works whenever you want to pass in PHP expressions and variables into your component we first need to make sure that we create our component class first so let's do that let's navigate back to the CLI and let's create a new component but we're going to do a little bit more difference since we don't want to store all our components inside the components directory of either our view or component class we rather want to split it up into different directories so everything related to the block into a block subdirectory while everything related to forms inside a form subdirectory luckily larva allows you to do that through the Artisan command line we simply need to perform the PHP artisan make column component commands then we need to define a subdirectory so let's name it block forward slash follow to the class name so let's say block item if we hit enter you'll see that we have been prompted with the message saying that our component has been created successfully so let's navigate back to visual studio code and right inside the review components directory you'll see that a block subdirectory has been created with a block item class inside of it now inside our block item class we're going to Define one property which is once again public and we're going to define a singular post right here since we're not going to add the loop of our posts inside our components but only the styling of one single post let's set the property inside the Constructor as well so let's say one single post property post is equal to that specific post now let's save it let's navigate back to the index.blade.php file and let's copy everything that we have to find inside there for each Loop right here so let's copy it let's scroll down let's remove it because we will be refactoring it in a bit as well let's open the blog directory inside our components directory where we have a block item blade file let's base what we just copied let's save it and let's navigate back to the index.blade.php file since we need to call our component this can be done in the same exact way less than x dash and since we're using a nested directory structure we do have to use the dot character to indicate the subdirectory first so let's say blog for a subdirectory DOT block Dash item now let's close it off whenever you want to pass in PHP variables to your component you need to pretty much use the same syntax as we did before with our title but we do need to add on column character in front of it as a prefix so let's say Colin post is equal to a string and inside our string we need to pass in dollar sign post so variable post and don't forget to add the dollar sign right here since we're going to pass in a variable and not a simple string of post let's save it let's navigate back to Google Chrome and let's click on components in the top left corner and as you can see our posts are still visible and we made our index.blade.php file a lot shorter by using components now we could even Place components inside components if we navigate to our block item component you'll see that we're printing out attacks right here in a for each Loop personally I would create a component for attack item as well so let's create a new component by saying PHP artisan make me a new component inside a subdirectory recall tag and name it tag item let's hit enter let's navigate back to our class component all right let's define a new property it's going to be singular as well so public tag plus added inside the Constructor by saying this tag is equal to dollar sign tag then we need to make sure that we navigate back to our block item copy our entire list item so not the for each Loop or the unordered list open our text directory inside our views tag item and paste it right here now let's make sure that we call our component instead of our list item so let's say tag directory dot tag Dash item we're going to pass in a single tag so call it tag is equal to and we're not going to pass in the attack that we have right here but we're simply going to pass in the attack name because we're printing that out here as well so what we could do is basically saying well get me the tag name then Insider attack item component we could replace our tag name here with a simple tag that we're passing in through our component which looks a little bit cleaner in my opinion let's save it navigate back refresh it and as you can see our tags are still visible when it comes to components you'll be hearing the terms Lots quite a lot in the same sentence there might be a case and actually a lot of cases where you do want to add additional data to your components now Largo provides a slot variable where you could use this for let's look at how it works let's start off by navigating back to our index.blade.php file where we have a small paragraph right here right under our header component the syntax of a component will be a little bit different when working with slots since you do need to have an opening and closing tag so let's refactor our header component a little bit let's close off our opening tag by saying X header and don't forget the forward slash and let's place our paragraph right inside of our header component in order to make use of slot variables you have to navigate to the component so let's say our header.blade.php and add a slot where you would like to Output it now we obviously want to keep the same structure so we want to Output our paragraph right under our H1 and this can be done by calling the slot variable which is a variable created by blades now the slot variable that we're using right here will be replaced with everything that's placed between the opening header component attack and closing tag if we save it navigate to Google Chrome refresh the page and right here you'll see that our paragraph is still visible now the interesting part comes here if we navigate back to the forward slash contact endpoint you'll see that our fill in the form to get in touch is still visible because it's static now let's navigate back to the contact.play.php file if we copy our paragraph and remove it save it navigate back to Google Chrome refresh it you'll see that it's obviously deleted if we navigate back to visual studio code and refactor our header component all right if we save it and navigate back as well refresh it you'll see that our page is still visible and even though a paragraph has been deleted we're not getting an error message and this is happening because the variable slot is optional so it's up to you whether you want to add it or not if we paste what we just copied navigate back refresh it you'll see that fill in the form to get in touch because blade recognizes that a slot has been added all right now let's talk about component attributes let's navigate back to visual studio code and let's actually close off all tabs and let's open our header.blade.php file right here you're seeing that we're passing in the class directly inside our H1 tag now it's not required to add them right here since you could add them inside the component slot here as well personally I don't recommend adding the entire class that we have so this entire class insert the component tag because your component will get clustered and I'm a fan of components because you could keep it compact but it does allow you to merge multiple class attributes together so let's say that we want to keep our current styling of classes that we got but we simply want to add an additional one so let's navigate back to the index.blade.php file and let's add a class attribute inside our header component so let's say class is equal to a string for demonstration purposes let's just pass in a class of padding left which is equal to 10. now if we save it and navigate back go to our forward slash endpoint you'll see that our padding 10 has not been added yet now in order to make it work we need to navigate back to visual studio code go to our header.blade.php file and right after a class add a variable called attributes and the attributes variable can be seen as a big bag of attributes that have been added to your component what we need to do is simply outputting this variable so if we save it and navigate back to the browser refresh it you'll see once again that our styling hasn't been added right here the reason why is because we already got a class attribute defined inside our H1 if we remove our entire class save it refresh the browser you'll see that the Paddington has been added but obviously the other styling has been removed so something is still going wrong right here blade basically detects that it already has a class attribute and you can't have two inside a tag so what blade allows us to do is merging both attributes this can be done by chaining the merge method write to our attributes variable now our merge attribute accepts an array where the key value pair the key will be the class so basically the attribute while the value will be all classes that we have so let's copy what we have inside our class and paste it as a value now we don't need the class attribute in our H1 so let's complete it delete it all right if we save it navigate back to the browser refresh it you'll see that the default styling has been implemented that we added right here inside our H1 but it has also added the additional styling that we have passed through as an attribute inside our index.blade.php file right here if we remove our class right here of styling navigate back refresh it and you'll see that it still accepts The Styling that we have inside the header.blade.php file now a fun thing that you need to remember is that it also runs without errors we just deleted our class but the attributes variable didn't give as an error so it still makes sure that even though you haven't added a class attribute inside your component it still works I got to say that using this on classes is the most easiest example but this can also be done for input Fields buttons and so on so let's test it out inside the button that we have on our contacts form right here the submit message button let's first create a new component inside our forms so let's say PHP artisan make me a component inside a form subdirectory named primary button if we hit enter you'll see that our component has been created successfully so let's now get back to visual studio code open the contact.blade.php file and let's copy our button that we have paste it inside the form subdirectory where we have our primary button file we're gonna change up a couple things right here we're first going to replace our submit message string with a slot and we don't always want our primary button to be aligned in the middle so the margin Auto and the block so what we could do is basically merging It Again by saying attributes merge we're going to pass in an array of class with a value of all classes that we have right here and we don't need the class attribute anymore we're going to remove the MX Auto and the block styling which we will be adding later on inside the primary button component now buttons needs to be submitted now since we're using a key value pair inside our merge class we could provide a default submit type on our form as well so let me actually align it first let's go on the line below right here and here as well all right let's add a new key value pair where the key is type and the value is equal to submit now keep in mind that the type on button doesn't work in the same way as class attributes the type attribute will not be merged but it will be overwritten once you pass a different type of value inside your primary button attributes now let's fix it inside our contact update.php file let's remove the button that we have a let's call our component by saying X forms primary dash button and let's close it off as well then we need to make sure that we pass in a slot of submit message so pretty much what we had before we need to make sure that we add the two classes that we removed from our button tag which will only work on this particular button so let's say that we want to pass in the class of AMEX Auto and block if we save it navigate back to Google Chrome refresh it you'll see that our button is still visible right here but let's inspect the page for a minute this might be difficult for you to read but you'll see that the type is equal to submit which is the second key value pair that we added inside our merge methods now let's overwrite the submit type to let's say button let's navigate back let's say that the type is equal to button if we save it navigate back to the browser and refresh it you'll see that it hasn't added an extra type but it simply has overwritten the type submit to the type button now there are a couple other methods available that you could Implement on your attribute variables which we won't cover but I will add the documentation in the description down below the core idea behind it and the usage is exactly the same as we've done right here so we will be repeating ourselves if we cover them all now let's close over inspector and if we navigate back to our contact.blade.php form you'll see that we could definitely create a component for our input field right here since we're using three input Fields right below each other if we even take a better look you can see that they all use a type and a name which both are actually required so whenever you need to add a property that all input field should be implemented you should make use of props and before we make use of it let's quickly create a new component but right now I do want to show you a different way of creating components which is manually inside the components directory right here so inside our form subdirectory let's create a new file let's name it text input.blades.php now let's navigate back to our contact form let's copy the first input field and let's paste it in our text input blade us our line is all right and this is pretty interesting if you don't need the component class but simply needs a component View now let me actually show you the output so you know that it works as well so let's call it by saying xforms.txt Dash input save it navigate back to Google Chrome refresh the page and as you can see it has added our component right here even though we didn't use the make component command through the CLI I can't help it to change the class again and I know that we've done that before as well but let's quickly remove the height and which from the text input field right here so let's copy the width full and the height go right in front of our class attributes and call our attributes variable merge and what we're going to merge is the class single quotes and let's copy or move our entire styling inside of it now we don't need the class that we have defined right here now this looks fine and inside our context form let's add the class of what we just copied now the next step is declaring the properties and this isn't an attribute that you could pass in as property or whatever we need to define a props function that accepts an array and this needs to be done right inside of your component right above our input fields and not below so let's add a couple enters right here all right now the reason why it should be above our input field is because our values will be used inside of our input Fields so we can declare an input field and then the props whenever you want to Define props you need to start off with the at sign followed with the keyword props it's a function which means that we need to add parentheses now inside the parentheses we're going to pass in an array and hit enter what we need to Define keys that are required for the input Fields now in our case let's say the type let's say the name and let's say the placeholder now the props function will basically create three new variables for us type name and placeholder which we could replace with the value of text name and the placeholder value so let's start at the top let's replace text with dollar sign type we have our name which should be replaced with our variable name and then our placeholder which should be placeholder now keep in mind that it also allows you to add a default most input Fields have a type of text right you obviously have a lot of emails and phone number input tools as well this is a good habit to pass in a default for those this can be done by making a key value pair inside your props function and in our case it will be the type so let's add a key value pair where we will add a default of text right now we need to make sure that we pass these inside our component tag of the contact.blade.php file and let me actually align it on the line below all right now actually before we add them let's save them and navigate to the browser and let's see what error message will be prompted To Us by laravel you'll see that we have been prompted with an undefined variable dollar sign name so we do need to set these when calling our text input Fields so let's do that let's say that the name is equal to name and let's add a placeholder of name dot dot dot keep in mind that the type is equal to text so we don't need to add it right here if we save it navigate back to Google Chrome refresh it you'll see that our input field is still visible with a placeholder of name and there is no need to pass in a type since the name uses the default type of text but we do need to add it inside our second input field which is our email so we need to overwrite our default type so what we could do is basically copy what we have above place it down below let me outline it now the name will be email keep in mind that we have a type of email as well so let's add that and the placeholder will be email now we can remove our input tag save it refresh the browser and right here you'll see our email input fields if we inspect it you'll see that the type is equal to email which has overwritten the default type of text that has been added in our first input field where you'll see type is equal to text now let's replace our last inputs field real quick which can be done with the first one the name will be equal to subject we once again do not need to pass in a type because it's text and the placeholder of subject if we save it and navigate back if we refresh it you'll see that our subject is still visible now the last thing that I want to show you is inlining components at the moment you'll see that we only have our text area left right here and inlining components isn't something that I usually do but I do have to show you how it works now whenever you want to work with very small components you don't want to create a component class or even a component view template for it therefore Artisan allows you to add an inline flag when creating your component so let's navigate back to the CLI and let's perform the PHP Artisan May column component command inside a form subdirectory forward slash text area we're not done yet because we need to add a flag of Double Dash inline now the Double Dash inline flag doesn't create in component view for you but it does create a component class at the top inside our forms directory we have our text area right here now the render method isn't returning a view but simply a div now the syntax might look weird to you but the text area or the content needs to be placed inside the blade directories instead of the div right here so if you paste it align it and delete as well so let's save it and then instead of the text area inside our contact.blade.php file we could simply add our components tag of our text area so let's say x dash forms dot text area even though our form subdirectory hasn't been created in our view we did add it inside our main column component command so we do need to add our forms subdirectory right here if we save it and navigate to the browser refresh it you'll see that our text area is still visible now this was it for this crash course where we dived into the most important topics related to components lrvel I'll try to build the entire application out of components and I'll add it in the GitHub repository down below if you want an exercise do it too so you could compare how you did it versus me 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 foreign

Channel: Code With Dary

Views: 26,316

Keywords: become a pro at using components in laravel, laravel 9 tutorial for beginners step by step, laravel 9 tutorial 2022, laravel components tutorial, what are components laravel 9, components laravel, how to use components laravel 9, what are components laravel, learn laravel 9 for beginners, laravel blade tutorial, components php, components php laravel, laravel blade php, how to use views laravel, what are components, how to use components laravel

Id: 7E76PPoIVW4

Length: 32min 50sec (1970 seconds)

Published: Mon Sep 26 2022