All right, so why don't we jump right in and solve the homework challenge from the previous episode. So we mentioned we need a contact page, right? So why don't we duplicate a bounce? We'll call it contact, and we'll set the title, contact, notice all the duplication we have here, contact us. And of course, here is ultimately where you would have your form. And I promise we're gonna talk about forms

where you would have your form. And I promise we're gonna talk about forms in just a few episodes. So this can say placeholder for the contact form just for now. Alright, so yeah, we have this page, but now we need to link to it from the homepage, right? So we could go back to welcome and yeah, here, maybe this could become a nav section and we would have three links, right?

and yeah, here, maybe this could become a nav section and we would have three links, right? The first one will go to the homepage, the second one will go to abouts, and then the final one will be contact. Alright? And maybe, uh, let's just leave it like that for now. So let's have a look in the browser and yep, as expected we have our links. So now I can go to the about page,

and yep, as expected we have our links. So now I can go to the about page, but hmm, there's just a link to return home. All right, I wish I could have that navigation on every page. Next I can click on about, but of course in this case, it's going to give us a 4 0 4. So don't forget this step. We've created a view for the contact page, but we haven't registered a route that responds

We've created a view for the contact page, but we haven't registered a route that responds and loads that contact page. So this is where you need to return to your routes file. And let's duplicate this and say, when the user gets the contact endpoint, then we will load the contact view. All right, so now if I come back and give this a refresh, we can see the contacts page. All right, so now I'm gonna show you a little tip.

and give this a refresh, we can see the contacts page. All right, so now I'm gonna show you a little tip. In many situations, you will basically listen for a URI and then load a view directly. You're especially gonna do this for simple, um, mostly static websites. So if you want, there is a bit of shorthand, we could instead rewrite what you see here as route view. So we register our URI and then we reference the name

So we register our URI and then we reference the name of the view that should be loaded. All right? So this is just a, a little bit of sugar effectively, uh, to shorten what you have here since it's such a common, uh, pattern. So if I delete that entirely and come back, you'll notice even if I click on it again, we still get the exact same thing. So in this case, this is what I would do.

we still get the exact same thing. So in this case, this is what I would do. I would create one for about to load the about view, and then I would have another one, uh, for the home page. Yeah, and, and again, this is great for very, very simple stuff where you're not, uh, fetching a bunch of data, you're not querying anything. Um, this will do, this will do the trick. Just fine. All right, so once again, if we were to come back and get this a refresh, we have our homepage

All right, so once again, if we were to come back and get this a refresh, we have our homepage about page and contact. But yeah, now as you can see, we have the same issue once again where the only way that I can get back to the homepage is to literally click back. So we have a lot of duplication here that I'd like to solve using a layout file. So check this out. Within my views directory,

to solve using a layout file. So check this out. Within my views directory, we're gonna add a new folder here called components. I'm gonna add a layout component. And yet, for now, just think of a blade component as basically like a fragment, an HTML fragments that can be reused wherever you need to. You could have a component for a card that gets duplicated. You could have a component for a layout file, you could have a component

You could have a component for a layout file, you could have a component for a footer or something like that. Whatever makes sense for you. Okay, so within here I'm gonna add a component for our layout, layout that blade, that PHP. So all I'm gonna do here is return to my homepage and I'm gonna take everything in here and paste it in like so. And now I'm gonna take anything that is unique

and paste it in like so. And now I'm gonna take anything that is unique to a single page, like the homepage or the about page, uh, that doesn't belong in our layout file. So I'm gonna cut that out entirely and that leaves us just this. Okay, so now check this out. Within my body tag, I'm gonna open up these braces. And this is effectively blade's way

Within my body tag, I'm gonna open up these braces. And this is effectively blade's way of doing something like this. Now it's doing a little bit more. It's escaping and providing a bit of security, but it's effectively the same thing. So I'm going to echo this slot variable. All right, so what is slot? Well, think of it like this. We have this layout file that we want to use for all of our views, but all of the view specific sections.

We have this layout file that we want to use for all of our views, but all of the view specific sections. For example, right here, the specific parts or the unique parts would be this. I wanna slot that in, but where do I slot it in within this layout file? Well, I wanna slot that unique portion in right here where I declare the slot variable. Alright? So let's come back and give it a shot. So within my homepage I can reference any blade component

Alright? So let's come back and give it a shot. So within my homepage I can reference any blade component or a layout file in this case by saying X dash, and then the name of the file. In this case, the file is layout. So we interact with it almost as if it were an HTML tag. And now I can paste in the unique portion. Alright, so much cleaner, don't you think. So check this out, let's go back to the browser and if we give it a refresh,

So check this out, let's go back to the browser and if we give it a refresh, we still get the exact same thing, but now we are avoiding that horrible duplication and if I open up the dev tools, sure enough I can see all of that markup from our layout file. Okay, so check this out. Now let's do the exact same thing for the about page. So we get rid of all of this, all of this and replace this with X layout.

So we get rid of all of this, all of this and replace this with X layout. And then I'm gonna do the exact same thing for contact. And in this case, uh, yeah, we'll just do this. We'll say contact us and then placeholder for the contact form. Alright, so now yeah, notice we don't have any global navigation within the contact page. It doesn't make sense and we don't have it in the about

within the contact page. It doesn't make sense and we don't have it in the about page, but we do still have it in the welcome page. So let's get rid of that and move it into our layout file. And once again, I can just put it right up here to start. This can then be our main section as you see here. And yeah, this is what you're gonna do in most situations. So let's come back, we refresh and yeah, now we have a reusable layout file that includes the head tag, any JavaScript references,

and yeah, now we have a reusable layout file that includes the head tag, any JavaScript references, any styling, and of course the navigation that you see here. Here's about us, here's contact and we can return home. So yeah, now imagine that we need to add a bit of, uh, styling. We'll do it really quickly. So within my head tag, of course we can reference a style sheet, but for now we'll do it in line and maybe something like grab all anchor tags

but for now we'll do it in line and maybe something like grab all anchor tags and make the color blue just as an example. So now if we come back and refresh, once again they're blue. And again, that is repeated of course for every single file because we declared that CSS within our layout file rather than a single view, which would not make sense. All right, makes sense. So now I wanna finish with one little, one little quirk that we need to deal with.

All right, makes sense. So now I wanna finish with one little, one little quirk that we need to deal with. If I were to come back to my browser, I want you to notice if I open up dev tools that the title is hardcoded to document and if I click on contact, it's still hardcoded to document. So, hmm, let's see if we can fix that. If I open my layout file, yep, sure enough, we're hard coding document, which doesn't make any sense, but yeah, I can't do anything specific, right?

we're hard coding document, which doesn't make any sense, but yeah, I can't do anything specific, right? I can't hard code homepage or about, because again, this should be generic, it should be reusable. So it's almost like this should be dynamic. It should be something like this. Alright, so now our layout file or our component needs access to a title variable. So if I switch to any one of these views, yeah,

or our component needs access to a title variable. So if I switch to any one of these views, yeah, it would be cool if I could do something like this. Title equals about us and then I can do the same thing here for contact. Alright, so we're sending through a prop effectively and then we'll do the same thing for the homepage. Title is home, that's fine. Alright, so now if we have a look in the browser, here's one thing you're gonna notice.

Alright, so now if we have a look in the browser, here's one thing you're gonna notice. This will just work, refresh the page and notice that the title sure enough is set to contact. And if I go to about us, same thing. And of course for homepage we see home. Alright, so yeah, that's kind of a, a little bit of Laravel magic. And yet that being said, generally it's, it's better to be explicit for a number of reasons.

And yet that being said, generally it's, it's better to be explicit for a number of reasons. So what I would recommend doing is returning to your layout file. And by the way, in many editors you should be able to command click on the component like this. Alright, so yeah, right up here, let's be explicit that this component expects a title prop in order to do its job. All right, so at the very top of the file,

in order to do its job. All right, so at the very top of the file, I'm gonna use this magic at simple props and I'm gonna pass an array. This will consist of all of the props that this, uh, component requires, basically. So in this case I can say, uh, title. So yeah, now we're just being a little bit more explicit and it does come with a couple advantages. First, we can declare a default value.

and it does come with a couple advantages. First, we can declare a default value. So if we wanna say the default value is layer cast or something like that, then you can do so here. Now, in the event that we don't pass a title to the component, well it's going to default to mekas. It would almost be the same as doing something like this. All right, next, it, it basically informs Laravel about what our prop is versus what a simple attributes that we might wanna pass to the component is such as the ID

what our prop is versus what a simple attributes that we might wanna pass to the component is such as the ID or a class, uh, default HTML attributes that we wanna send to the component. Alright? So yeah. Now if we were to return to our homepage, notice if I did not include this here, it will default to s refresh, click on home, have a look here and it should say, yep, layer cast, it's using the default, but of course the others we are explicit. So it uses that name and this is how you can pass values

but of course the others we are explicit. So it uses that name and this is how you can pass values and prompts to your components. Okay, so now let's wrap up by very quickly discussing attributes versus prompts. Imagine we have a new component here and this will be maybe something for a card. Uh, at layer cast, this might represent one of those series rectangular cards that you see on the site. We'll call it card. All right, so a card consists

of those series rectangular cards that you see on the site. We'll call it card. All right, so a card consists of a diviv and within here we will have our slots. So yeah, right here maybe you'll have any kind of, um, markup that is required. Um, in this case, I'm not pulling in uh, something like tailwinds, so I'm just gonna add this as a style tag and we'll say the background color is kind of a gray-ish and we'll have some padding all around. Uh, you get the idea, maybe center the

of a gray-ish and we'll have some padding all around. Uh, you get the idea, maybe center the text, stuff like that. Okay, so now I have a new card component that maybe I wanna reference, uh, within our contact page. All right, so right here, let's swap this up with X card. So now on the contact page, we've basically created sort of our own H TM L fragment or block card card will take this section right here and insert it there.

or block card card will take this section right here and insert it there. And this is ultimately what we will end up with. So we'll have a gray, uh, square background with some padding with the text aligned. All right, so come back and let's have a look in the browser. Let's go to contact and sure enough, we have a very long square, but sure enough, it is working as we'd expect.

and sure enough, we have a very long square, but sure enough, it is working as we'd expect. Okay, so now imagine in certain situations, uh, you want to override the styles that we have here. Well, one thing we could do is this. Let's say I wanna pass through my own class and once again, we're not using any kinda library. So I'm gonna make something we'll say Max W 400 and that will be our utility class. That means max width is 400 pixels.

and that will be our utility class. That means max width is 400 pixels. So if I were to define this within my layout file, we'll say right up here, let's get rid of this max width 400, we'll literally have a maximum width of 400 pixels and maybe, uh, we'll just, uh, align that to the center or set the margins to equal. However, if I were to come back refresh, hmm, it doesn't work. So that's a shame, right? If I go back to contact,

hmm, it doesn't work. So that's a shame, right? If I go back to contact, I was hoping that would just work, right? I'm gonna pass through an HTML class and I just sort of wanted that attribute to be merged in here, but that's not working. And in fact, if I were to open up dev tools and we inspect this, there's no reference whatsoever, uh, to what you see here. So let's do this. Um,

uh, to what you see here. So let's do this. Um, before we solve it quickly, let's take that. And within my layout file, I'm gonna add our own card styling. Once again, in real life this would go into a dedicated CSS file, alright, that way I can come back here and replace it blank. So just to clean things up a little bit, and now I still get the exact same thing.

So just to clean things up a little bit, and now I still get the exact same thing. Okay? So here's what we can do. As it turns out, anything we pass to a component that is not explicitly registered as a prop will be considered an attribute. So in this case, we were explicit that title is a prop. And that means if I were to send, uh, an ID or class to the layout component, well that will be treated as an attribute, not a prop

or class to the layout component, well that will be treated as an attribute, not a prop because we do need to distinguish between them because they are handled differently. Alright? So now let's do this. Within my card file, I'm gonna reference the attributes. So I'm gonna echo attributes. And again, Laravel provides this variable to us and it is populated with all of the non-pro attributes that you pass to the component.

and it is populated with all of the non-pro attributes that you pass to the component. In this case, of course, just class, okay? But now we already declared a class, so we're trying to include another class and we can't do that, right? So in many situations you wanna merge, uh, a default set of values with anything that is passed in. So in these cases, we literally use the merge method. I can say merge in and I'm gonna set a default class, name of card,

I can say merge in and I'm gonna set a default class, name of card, but you can merge in anything you want as well. And this is what we end up with, okay? So check this out, we come back to the browser, we give it a refresh, and sure enough it includes the default card class name, but it also appends or merges in anything that we provide from the outside. And again, this is a very common convention

or merges in anything that we provide from the outside. And again, this is a very common convention that you will reach for. Alright, so we're gonna wrap it up right there. I will warn you there's quite a bit more to blade components, but I think at this stage of our learning, this is all you need to know. You can create a component by adding a file to the components directory. This file can be anything

to the components directory. This file can be anything that you anticipate reusing from file to file. Next, if this file requires some kind of dynamic data, if it makes sense, you can declare a prop. You can also research slots on your own if you wish. Finally, you need to specify where any view that uses that component should or can insert its own unique, uh, HTML. And we do that via the slot variable.

or can insert its own unique, uh, HTML. And we do that via the slot variable. And again, if it helps you just think slot all of the unique content right here. All right, so anywhere we use it, we're gonna slot the unique content in right here. And the same is true for our card component. All right, here's our card. Anything unique should be slotted right there. So now when we use the card, all

Anything unique should be slotted right there. So now when we use the card, all of the unique stuff are slotted there and I'm repeating myself. Okay? Make sure you get comfortable with this. Ask any questions below the video if you need to, and then let's move.