Creating a Blade Layout 0:00Now that you've learned how to pass variables to your Vues, why don't we move on and talk just a little bit more about Blade. If I bring back the sidebar, do you remember in the last lesson I talked about how pasting in a big chunk of HTML for every Vue very quickly begins to break down? Instead, we want to share as much of this stuff as possible. So here's what we could do. Within my Vues directory, I'm going to create a new master or layout file,Within my Vues directory, I'm going to create a new master or layout file, whatever you want to call it. Let's just stick with app.blade.php. Okay, so here is where we'll have all of our wrapping HTML, so to speak. And then I'm going to use Blade here. Yield the content section. Notice how well that reads. Here's our HTML, and between these two tags is where I want to yield my content.Here's our HTML, and between these two tags is where I want to yield my content. Or more accurately, maybe you have some kind of container div, and you're also pulling in Bootstrap. Okay, well now we declare all of this stuff once, and then all of your Vues will simply create little sections that will be inserted right here. Here's how. Back within the about file, Extending Layout in Views 1:11Here's how. Back within the about file, I can remove all of this crap now, and instead say I'm going to extend my app master page. Okay? But now, how do I specify where my little section is? Well, we use this key, section, and then we reference the name. We called it content. All right, let's see if it worked. Adding a Contact Page 1:31We called it content. All right, let's see if it worked. And you know what, I'll get rid of this variable that we removed. So if we switch back to Chrome, refresh, there we go. But now we're not repeating all of that HTML. So why don't we add that contact page like we were talking about before? Okay, well, we're going to switch back to our routes file. Routes, and when the user makes a GET request to the contact page, I want to load PagesController at contact. Now don't forget, you can always manually open these files,I want to load PagesController at contact. Now don't forget, you can always manually open these files, but instead, really try to use your code editor or your IDE to very quickly switch to these names. In this case, I'm going to PagesController, so I don't need to switch over here and open up all of these folders. I can just go to PagesController, and nearly all IDEs these days will have a shortcut to do that, so just research yours. Anyhow, we're going to quickly add a contact page,so just research yours. Anyhow, we're going to quickly add a contact page, return a view, pages.contact, and now if we switch back, we created this view a while ago, so we can just update it. Extends our app file, and now a new section for the content area, like so. Alright, we have a new page, so let's go and check it out. Contact, and now that one works too. But now, what if we want to insert things in different parts of our master page? Yielding Multiple Sections 2:51Contact, and now that one works too. But now, what if we want to insert things in different parts of our master page? For example, maybe some views need some special JavaScript or something like that. Well, just yield another section. Yield Footer. Think of this as your way of saying, hey, anyone who wants to insert some content here, just create a section and you're good to go. So maybe the contact page will have some special JavaScript. So Section, Footer,So maybe the contact page will have some special JavaScript. So Section, Footer, and now we're just going to represent that with a quick alert. Contact Form, Scripts. The key thing to understand here is with this approach, your alert will, of course, only display on the contact page, but not the About page. Because here, we didn't have a section for the footer, so that will remain empty. Alright, one more time.so that will remain empty. Alright, one more time. Refresh. We have our alert, but if we go to About, of course, we don't. And really, for our current skill level, that's all we need to know about master pages. But why don't we do a quick little bit of extra credit and talk about a few more things related to Blade. Now, you've learned about extending master pages and sections, and you also learned about how to echo data in the last lesson. Blade Conditionals and Loops 4:05Now, you've learned about extending master pages and sections, and you also learned about how to echo data in the last lesson. But what about general things, like what if I want to do a quick if statement? Well, again, with regular vanilla PHP, you would have to open up a PHP block, right? Instead, we're just going to use an at symbol and then if. If our condition, and then we close that out with end if. So maybe our quick check will be if first name equals John. This is ridiculous, but we'll say hi, John,So maybe our quick check will be if first name equals John. This is ridiculous, but we'll say hi, John, just to show you that we have a conditional. Otherwise, we'll do something else, else. Alright, let's go back and refresh. And that's how you do easy conditionals within your views. And you'll find yourself doing this sort of thing a lot, especially when you are filtering through collections. So for example, like if, you also have the opposite, which would be unless, and in the PHP world,So for example, like if, you also have the opposite, which would be unless, and in the PHP world, just think of that as if not. It's the opposite. But we also have things like for each, or for some custom ones, like for else, which means if you have some content for each one, do this. Otherwise, if you have none, then do that. And that can be useful if you want to filter through a collection, but it's possible that there's no items in that collection. Looping Through Passed Data 5:26And that can be useful if you want to filter through a collection, but it's possible that there's no items in that collection. And in those cases, you want to tell the user, sorry, nothing was returned. Well, you can use for else for that, or you could always do an if, and then a nested for each within it. So why don't we try this? We'll bring it back to about, and then we'll do a heading, people I like. And all we want to do here is accept an array from our controller.and then we'll do a heading, people I like. And all we want to do here is accept an array from our controller. It'll come from some kind of data store, and we want to filter through those items and display them here. Well, we're going to have an unordered list, and we'll say for each people as person. In those cases, we'll just echo out the person's name. Finally, we're done, so we'll do an end for each. All right, we're not quite ready, of course, because we need to pass a people view.All right, we're not quite ready, of course, because we need to pass a people view. So let's do that right here. People I like, and we'll do the Laravel community. How about, of course, Taylor Otwell, and then maybe good old Dale and Eric Barnes, and let's just leave it at that. It doesn't matter. So now I'm going to pass through that people variable, and let's see if it worked.So now I'm going to pass through that people variable, and let's see if it worked. We'll come back, refresh, and we're now filtering through that array and displaying the results on the page. However, remember, this would probably come from a database or something, so it's possible that people would be equal to an empty array or an empty collection, as we might think of them in Laravel. So in those situations, we'll notice, not only do we, of course, see nothing,So in those situations, we'll notice, not only do we, of course, see nothing, but also, if we inspect this, on the Mac, I will hit Shift-Command-C to open this up, by the way, but we still have the unordered list. So really, if we don't have any people returned, I don't want to open up some HTML that doesn't get used, right? So instead, let's come back here. So why don't we do this? If count people, if we have any people to work with,So why don't we do this? If count people, if we have any people to work with, then filter through them. Otherwise, don't do anything at all. And that's it. So if we come back and refresh, now we see nothing, which means we're not cluttering our HTML up. Okay, but if we were to come back and bring it up like we had before, now we do have data, so we filter through them. All right, so good job.now we do have data, so we filter through them. All right, so good job. You've now learned just a little bit about Blade. There's, of course, more to learn, but in our current state, that's going to take us a long way. So in the next video, let's move on to something else.
