 Hello, this is Christian. In this episode, we're going to look at views and a lot of our project. So views are stored inside the resources folder under the views directory here. So there's one by default. I'm going to create a view in here. Call it index.blade.php. Okay, so this is a blade template. I also want to create another one in a minute, but let's go ahead and populate this first. So here is the index page. The title, I'll just call it homepage. And we'll give it a, yeah, something here for now. Each one, home. Okay, so this is the blade template here. I'm going to create another one here. Call it about.php. This is a template as well. And I want to show you the difference between the two. Okay, so this is about me. And put here again, each one about me. Okay, so this is a PHP file. You can also use just play HTML, I'll show you another one. So we call this one here contact.html, okay? Not that useful, I guess, but you can certainly, absolutely. This is contact me and we'll put one here, contact me. Okay, so three different templates here. Of course, this HTML, you cannot put any PHP or other code in here. Well, I guess you could try it, but I don't think so. Now, let's go back to the routes page. It's almost impossible to create templates without routes. So I want to try not to go too much into routes, but it's going to run in here using just these things here. So I'm going to create three routes in here and we'll learn routes later in the next video. And they'll follow this very similar rules here. I'm going to go ahead and delete all these comments. I don't need this anymore, okay? So give us some more space. Someone copy this and put down here three. And this is going to go to the route of the home page. Well, you know what, this is the home already. So I'm going to change it to welcome. I'm not going to use that anymore. I'll use the index for that one, okay? So notice again, the view function takes the name of the view as the first argument here, okay? The name of the view is called index. I do not include that dot blade in here. If you put index dot blade, it's going to have a really different result. And we'll talk about that later when we'll talk about nested templates, okay? So at the route level, it's called the index. This one here is going to go to the about page. So this is the URL pattern. And then the callback function to load the about view. Again, this is the same thing here about PHP, even though I did not use blade. And we'll try the contact here, see if this one loads. So this is the contact. I have an extra one, I'm going to delete this one. Okay, so let's save this and make sure again, your application is running. If it's not, make sure you run it. And so let's go to the site. And as you can see, this is the home page, right? Looks good, make it big and see. Go to the about page. And here is the about me and go to contact. Okay, so you can see, I can load three different types of templates. Just play HTML, a regular PHP file and a blade template. So what's the difference? Why and when do you, what should you use it? Well, my recommendation is not to use HTML at all, okay? Totally not, not cool. The about page here is, okay, if you use this, you are kind of like getting away from the blade templates because you are not using blade syntax. What I mean is in here, you're not allowed to put blade syntax in here. So let's say I put here a blade syntax desktop like this, one plus one or two plus two. I expected to get a four here, all right? So I'm going to save this. I'll copy this same thing and put inside the index blade down here. You can see the difference. You can see the syntax here is different. I'll show you in a minute how to get the syntax here. So go back to the webpage again. And we're not going to do with the contact here. Go to the about page, refresh it. You will see that because this is not a blade template, the blade syntax is not rendered, it's not parsed. And you can see the actual code in here. So really not safe because if you have some, you know, sensitive code, you can actually reveal your code to the public, which is not cool. And then the index page, as you can see, you just get the result of that, right? That's what you want because it's not rendered by blade. You don't see that is only the interpolated result. So the blade view can, this blade here, you can include both PHP and blade syntax. This is blade, I can do one here. I can do here. It says equal to, I don't know, it's just something, okay? I'll do something equal to the PHP syntax, you know, two plus two, same thing, right? This is the short syntax. So it can take both PHP and blade syntax. So let's go back to the browser and refresh our page. You should get a four equal four, okay? So that's pretty cool. Now, my recommendation, again, is not to include a lot of PHP code in here, because again, that's defeating the purpose of the blade syntax, the blade template system. So try not to use them at all if you can, right? Anything that is in PHP code, you should, you know, pass it to the template as opposed to pull your code here. You want to, you know, prevent that from happening because you don't want to put too much code in here. And if you do that, you go back to just the regular PHP code. Okay, so with that said, I'm going to modify this index page. Actually, some of these here, and I have some of these actual information on the sides. I'm just going to copy and paste it in here because I like to have sort of things here. So in my index page, I'm going to have a ID of, I call it title. And I'm going to have a variable called title here. So I'll call it title and that can go in here. So this will be like homepage or something, okay? And below that, I'm going to have a, maybe I put here, what should I put? I want to make sure it looks kind of nice. I'm going to use the CSS as well. So let's put here the div container here and a container is what I call it. Cause I have a CSS here. I'll share this with you as well. Not here, the public folder. Okay, I'll use the main container. Okay, so the main container in the class is for that one. So I'm going to put here main container and that is going to be, this is a class, I think, right? Yeah, that sounds like class. Okay. And under this one here, we'll have a div. So this is my entire container, okay? And the top of that have my h1 and then actually no, let's move this to the top, let's go up here. I have a header here. You know, I don't like this because it doesn't give me the completion here. I have to type like that. So the header, inside the header, I'm going to have a logo, okay? Image, as I see here, logo will go to somewhere else. So put here alt, logo, something, I'll fill that later. And right below that is what my image one is, okay? Yeah, I put here, not ID, but put here the model. Okay, I call the model, the title here. And then underneath that, I'm going to have a div container of my stuff. Up here also my navigation, I'll put here the nav. Again, I don't like this nav. And then I use a UL, LI, and then for each of these, I'm going to have navigation links, okay? So I'm going to pause this and I'll just come back in really quickly to fill you up. Okay, so I'm sorry for Gini, I'll provide this code if you need it. So I fill up here. I added the style sheet as well. It's coming from the public folder, CSS main.css. As you can see here, I put the asset function as opposed to just directly linked to that. You can also use a URL function as well. Either one will be fine or it can be moved completely just, you know, slash CSS in main CSS, that's fine too. Now I guess the advantage of using the asset here is that maybe later on in the future, they might change some way or you can actually, you know, load this content so you use the function as opposed to just the regular CSS link. But it doesn't matter. So that one there, I add a logo here. Just basically grab this logo from a lot of our website, just a regular plain logo with that image logo. And then also have a model here about black ninja or like ninja. So I'll put that here. And then my navigation will have four links to the homepage about page contact page and portfolio page, okay? And also put a halo greeting message that goes to the guest, welcome to the guest. Down in the main body of the content, I have a diff container I created earlier. I have a main section and the bottom I have a footer. So I put here just a footer, some information here. As you can see, this one here is not gonna work. Actually, I don't have that one there. I should probably load that from this as well. I think it's called, let me copy this. I think it should match that. And let me just go like that. We'll see if it works, okay? It should be the logo min type, the word Laravel. So the photo here, I put a JavaScript in here, print the current year. And then the name will be, and then where we can pass through this like my name for example, and then something like that. Okay, so now up here. So this is a, what would the page look like? The content, I just put some information about, you know, Black Ninja, I pulled that directly from the wiki page, and I put a title here. Again, it's a variable, you're gonna pass this to template here as well. And so I wanna save this and run in the browser and see what this page looks like. So let's go to the browser and refresh the homepage. And hopefully it comes in nice and clean. Okay, well, it has some variable, I'm thinking, okay, this is undefined. So if that's the case, then it's not gonna work, okay? So let's fix those for too big. Let's go back to a hundred percentage. Okay, so let's fix the title first, but without that, it's not going to work. So let's go back here. I need the title and the name down here as well. Okay, the name will be just like my name. You know, you can pass it here. You know what, I'm just gonna call it my name. I'm not gonna use the variable here. Just put here like that, okay? And the title here will be, yeah, whatever this title is, we'll give it a name. Okay, so let's go back to the browser. I mean, to the, where's that about the routes? Okay, this is the index one right here, right? So I'm passing some data to the index page. And index is gonna receive this data. So I'm using an array here. It's an associated array, the key value pair. So I have a title field that is gonna be mapped to a variable, the string of, I don't know, welcome to my page, just something like that. So the title will go there. About will be the same thing. You give it a title as well. I laid it on for now. I wanna make sure that's fixed first. And let me close this and let's go try again. See what happens. All right, so there you go, looks good. All right, okay, so here is the logo I mentioned about coming from Laravel site. And just the word Laravel here is the logo as well. And so this is the home page. And that's what it looks like, okay? I'm gonna go and go to that belt. As you can see, we had it earlier and the contact page, as you can see, it's already working. Okay, because we already put that in the code. I don't have the portfolio yet, but I'm gonna add that. Okay, so far so good. Now let's go back and finish up the other pages. So the about page, I'm gonna change this to the template, okay? And I don't like this one here. I'll just show you what it looks like, but I'm gonna change it back to blade. That PHP and the same thing with the contact as well. But change it to contact.blade.hp And we'll do one more for the portfolio. I'm just gonna save it for here. Portfolio.blade.hp Okay, so let's look at the about page first. So I'm gonna change this again. I have some content I wanna add to that one there. Well, actually you know before I do this, okay? So usually you want everything to look the same, right? You wanna have the logo, the navigation, everything on all those pages. And the traditional way is of course, you copy this as a regular HTML. But Laravel, you know, you don't have to do this. You want to split this up just like a PHP file. You include the header and the navigation, the full of the main content in your own separate files and then you merge them together, right? So in Laravel, you can do that using what's called a master page, you know, or a root page or root template. The same thing like in Express or the .NET or whatever, okay, and then using that method, then I can move all of these, you know, to a section. I can move the logo or navigation to a section or a partial because of partial view. I can do the main content in its own template. So this would be the index page has the main content and I move the navigation, I mean, the footer to its own area as well, okay? So I'm going to do that and you do that by creating sub-directories to hold your views. If you are from Express background, this will look very familiar when you use the handlebars template, right? There's a layout and then there's a partial view and then so forth. So I'm going to create two folders in the views folder, okay, one is called a layouts and have another one. Make sure it's in the views folder, call it partials. So for one for partial views, one for layouts, which is the root template. So inside here, I'm going to create a file called master.blade.php and this would be my master layout and I put some stuff inside this page. So what do I need? Well, if you look at this index page, what should go in there? That will be repeating across all your views. So I'm thinking about, so here's what I'm doing. Copy everything here, okay, copy everything here, put in the master blade file. Now, what things I don't need to be in here? So let me collapse this section and this photo area and so on. So what you can do is with this master page, you want to retain what's same, what's not. So the letter should be the same. The only thing that should be different is the main content here, okay? So what you can do is that you can then move all these out, okay? Move what is out and in its place, you're going to include them in to this area and you do that by using a directive called yield. The yield function and then you can pass in here an ID. ID really just a unique keyword. So I'm going to inject all the content or the unique or I guess different content to this area. So that means in the index page, I'm going to inject the content, I just delete it back in here, okay? And then this is the footer, so I can do the same thing. I can move this out to another view and I'll call it, you know, I include it back in. Okay, so this is to be unique. The title page also should be unique. So here I would do another yield writing here. So yield, this function takes two parameters. The first is the name of that variable. So we call it title. And the second parameter is the default value. So I call it homepage and just do that as fine. The default is homepage. And if I don't include anything to this variable, then it's going to be called homepage. If I change it like about or portfolio or contact, then the title will be changed to that particular value, okay? So the yield here means I can inject data dynamically to this area and same thing here as well. Okay, so now the header in the footer area, you can leave it as is, it's okay, but I want to use partials, all right? So inside the partials folder writing here, we're going to create two blades files. This is the nav.blade.php for my navigation. And I'm going to create another one here for the footer.blade.php, okay? So back into the master blade here, I'm going to copy, I'll actually move the footer area, all this footer contact can exit out, cut it and paste into the blade file in here for the footer, okay? So this is now done and in its place, I'm not going to go yield, okay? Yield is only used when you navigate to that particular view. What I want to do is like the include, like the regular including PHP. So I'm going to use the directive called include, which is very similar to PHP. Inside here is the name of that content or partial view. It's called footer. So again, you want to make sure you navigate to the right place. If you just put footer here, I'm looking at the root directory of the views folder. So I'm not going to find a tender called footer. Where is it at? It's inside the partials folder. So therefore, you have to say, I have to write partials and blade syntax use the dot. So separate a directory, okay? Which is kind of odd because, you know, from PHP standpoint, you're also used to the arrow here, right? When you call objects or sub objects data fields. But they do use the dot notation here to signify that it's a directory called partials. And then inside the partials folder, there is a footer template. Okay, so that's why I mentioned earlier that if you put like welcome dot blade, you got to get something really different because you're referring to a subdirectory. Okay, so the same thing with the header area. So this is the entire footer and the header. So when I move all these out, cut it, put inside the navigation up here and just save this file. Yeah, I can close actually. And then back in here again, we use the include. Same thing, partials dot map. Okay, if you want to pass any data to this, you can. And my navigation, I don't think I have any data here. Yeah, if I have any data, I want to pass this to this template. I can do so in here as well. Maybe we'll do that later. Okay, so I'm thinking, I don't know if my navigation go above or before the main container. Maybe I should put it inside here, okay? So to be consistent, let's move it down right in here. So they're all nice and clean. Okay, so my navigation and my content and the footer. Now my master page, as you can see, is really clean. All right. So this content here and this ID here, title here, are two key values. So that when I inject data, it needs to find that particular area. So this is the template, say that. Now in the index page, and here is how I'm gonna do. So all of these are already taken, right? It's from here all the way to the container here. The only thing that is unique is really just what's inside the main tag inside here. So let me, yeah, it's inside here, okay? So this is unique for every template. So what you can do is you can do what's called a template inheritance. So that I wanna use the extends, like, you know, like a class. When extends the main layout called the master's layout, it's inside the layouts folder. It's called master, right? Okay. That means you use the master layout and then inject this content in the main area. Okay. Where does it go? It's gonna go into a section. So you put this section here. The section is called content. And now close down here the section. So I think you just call it the end of the section. Okay. So that's what it means. Inject these content inside this section here and use the layouts called master. And this should go inside a ID called content. In this case, that's what we call it. We call it content. Okay. And if you call it something else, then you wanna make sure that matches that as well. So let me save this file. And in the routes, it would still be just called index. Okay. So I'm not calling the main or which is the master. I'm calling the actual template. In this case, it's almost like a partial view and sense the index template. And if thing works correctly, the page should still stick. Okay. As you can see, it worked just fine. Okay. So you can see how that works. We're gonna go and do the same thing for the other pages as well. And that should be fairly simple. Okay. So same thing. I'm gonna copy this, this is good. I'm gonna close this now. I'm gonna go to my blade here and copy everything here over. So just copy everything here over, copy whole thing, put into the about page and do like that. And so the title, I'm gonna change that, but I'm gonna change the content here in a minute. Let's see about. Again, this is just something I added over. So inside the section here, I'm gonna delete the whole section and replace it with just a regular paragraph about me, for example. Okay. So you put it here. Notice the H1 and title should be the same. I will copy the same thing. I put into the contact blade and then at the same thing for the portfolio. Okay. So the contact page, again, I'll use a form just to show that it more of like a contact page. But we'll see how this form may not work yet. Doesn't do anything here. The portfolio, I'll leave it as is for now and I'm gonna change it a little bit later. I'll just call the title of my project. Inside here, I'll leave it as out and we'll do that in a later. Okay. So for now, I wanna make sure it works. So let's go back to the browser and review the pages about. So here we go. Over the title, I didn't include it yet. Yep. I'm gonna fix that first. If that hasn't provided, it's not provided. It's not gonna work. So here, I need to do the same thing. So let me copy this and put it inside each of these routes. Here. Here, I also need a portfolio. Some reason I don't have that one there. So we'll put here portfolio template. Yep. So yeah, I would just call it my projects. Maybe not the exclamation mark. This'll be just contact me. And about me. Okay. So I think those are the views that I needed. Save that again. Go back to the browser and refresh. So here's the about me page. The contact page is a form. Nothing works here, as you can see. And then there's portfolio. We're gonna add some data to ask what we do with the data model. All right, so that is how you use view. So one last thing before we go. Now notice that when I navigate to these different tabs, the title reflects here, but it does not reflect in the tab, right? It still says homepage. I want this to also say about me, contact me, portfolio and so on. Okay, so that's one thing that we need to also include in the template. So if you go back to the code again, right inside the blade, each of these blade, not the navigation here, the blade here. So notice again, the master file, we have a yield title here, because we did not include that particular data. So it's gonna be called homepage every time. So what you wanna do is, and the index page is what we call home. So that's okay. We can ignore that. But in the about page, right up here, we're going to include a section called title, right? And then what's the title's gonna be? Well, it's gonna be the title that we pass to that particular page, which is this title here, which is coming from where, from here. So when I pass the title to the contact page or about page and so forth, I use it inside my template here, but I also wanna pass this along to the master page. So I'm gonna copy this and watching not the entire curly braces, you can't put it here, just the title variable, and you pass that as the second argument to replace the title of that page. So then I'm gonna copy this and put it in every other templates. So save that here, go to the contact page, put it here, and the portfolio index, right now we can do that too, index right here, okay? But if you do that, the index page, I have it, the title, which is welcome, maybe not the index, let's call it home, okay? So that's fine. Okay, so save that and review your page for this last time. So home to say home page about is now you can see about me, about me, contact, and portfolio of my projects in this case. Okay, so I hope this help clarifies how you can use a master page and a partial views to render your data. So again, notice that the partial views are rendered every time. The others are only when you navigate to that particular route. Okay, so thanks for watching and I'll see you in the next video.