Introducing Blade Layouts 0:00Let's move on and talk about layout files using Blade. So up until this point, in our Vue's directory, for every file we create, we spit out a huge block of HTML. And in a real project, this makes no sense. I mean, imagine something as simple as linking to an asset. Well, for every single Vue, you'd have to remember to include this. But then, if you change the file name, well, you'd have to go to every other Vue and update it. You definitely don't want this. So here's what we can do instead. Creating Layout and Yield 0:28You definitely don't want this. So here's what we can do instead. I'm going to delete this file, and we'll start from scratch. Within my resources, Vue's directory, I'm going to create a layout.blade.php file. Think of this as your wrapping HTML, where we will nest all of our individual Vues. So here is where our HTML will be. Next, we can specify where we want to yield additional content. So this way, if we load a post Vue, the post can specify a section for the content, and then that content, once it's compiled, will immediately be pasted right here. So that way, you have exactly one place for your wrapping HTML, for your assets, for your Setting Up Blog Routes 0:59then that content, once it's compiled, will immediately be pasted right here. So that way, you have exactly one place for your wrapping HTML, for your assets, for your scripts that you might put at the bottom. Okay, so let's try this out. Let's go to my routes web file. I have a fresh install of Laravel 5.4. So we had this name of blog, so why don't we work with that? That's always a good initial introduction to a framework. So we'll say, when you visit the homepage, we're going to load maybe all of our posts. So we may have a post controller here, and I'm going to load an index method.So we'll say, when you visit the homepage, we're going to load maybe all of our posts. So we may have a post controller here, and I'm going to load an index method. Okay, but what you're going to find is, for resources like this, you will typically need a controller, an associated Eloquent model, and then finally, a migration. That will take the shape of something like create post table, because we need to have some place to store and fetch these posts. The Eloquent model, as we've discussed, will be the singular form. So often, it will be a noun, but it doesn't have to be. Post is good there. And then controller, I like to be plural.Post is good there. And then controller, I like to be plural. So post controller. Having said that, some people do singular controller. It's just preference. It doesn't matter either way. Now, how do we make these? Well, we could do it in two ways. One, we could individually create these, as we've learned. So we could run that. Generating Model Controller Migration 2:14One, we could individually create these, as we've learned. So we could run that. I'm not going to trigger it. But we could also do make model post, and then finally, make migration create post table. And you might say create equals post, which is the name of the table. So you could run all three of those. Or you may remember that when you make a model, there are a couple flags here. Dash M will also create a migration file, and dash C will also create a controller. So that means when we create a model, we can have it also create the controller and the migration.So that means when we create a model, we can have it also create the controller and the migration. Let's give it a shot. PhpArtisan, make me a model called post, and I would like a migration and a controller. All right. You get your model. You get your migration. You get your controller. So let's see. Let's go into app, and here's our post model.So let's see. Let's go into app, and here's our post model. We go into controllers, and there's our post controller. And then finally, down to database, migrations, and there's our migration. OK. Very, very cool. That's useful. So a post will consist, to start, with a title, and then also a text section for the body. Later, we'll add a user ID and maybe a number of things here.body. Later, we'll add a user ID and maybe a number of things here. Let's go ahead and migrate my database now. And let's take a look in SQL Pro, give this a refresh, and there we go. Here's our post table. So now let's switch back. We'll go back. Oh, whoops. I told you it should be plural, and then I didn't do that very thing. So we'll update the file name and also the class name.I told you it should be plural, and then I didn't do that very thing. So we'll update the file name and also the class name. So now in our routes slash web file, where once again, you can go there manually, we specified that the home page should link to an index method. Now following conventions, we can have this load of view that will be in a post folder, and it will have a name that typically corresponds to the action, and we call this an action. It's a controller action. OK. So that's going to go in our resources views directory, resources, views, posts, index.blade.php. So yeah, in the past, we were spitting all of this into a single file, but we're not Extending Layout and Sections 4:15So that's going to go in our resources views directory, resources, views, posts, index.blade.php. So yeah, in the past, we were spitting all of this into a single file, but we're not going to do that anymore. We have our layout file here. So all I'm going to do, if we switch back, is specify that I want to extend that layout file. It's nice and readable. But now where do I put my content here? For example, let's just see what this looks like in the browser. So yes, we see the content, but a bit misleading, because if I view the source, we spit it rightFor example, let's just see what this looks like in the browser. So yes, we see the content, but a bit misleading, because if I view the source, we spit it right out the top. So we can see that with Blade, everything kind of works from the bottom up. So it loads this view. It has our content, but then it also extracts the layout file, and you see that here. This isn't what we want. Well, if we switch back, our layout file specified that we wanted to yield any section called content. So let's create one, section content, and then end section.content. So let's create one, section content, and then end section. Okay. Now, if we give that a refresh, exactly what we want. So what you can imagine is, you could have multiple sections. Like maybe at the very bottom, you'll have a section for your scripts or maybe your footer. And then maybe you'll wrap this within a container, something along these lines. Okay. If we give this a refresh, we have our container. But now imagine that some views, not all, but some views need a special script.If we give this a refresh, we have our container. But now imagine that some views, not all, but some views need a special script. Maybe they're pulling in some kind of tiling JavaScript file that's only relevant for a single page. Okay. Here, you'd create a new section, like so, and we're going to give it the same name, footer. And this is where I would link to something. All right. We come back, give it a refresh, and now it's there.All right. We come back, give it a refresh, and now it's there. However, it will only be there for this specific view. Once you load a different page, well, it won't declare a footer section, presumably, so you won't see it there. That's how this works. So let's do this. Let's close a few of these out, and let's switch to Get Bootstrap just to have some example layouts here. We'll use Bootstrap 4, Examples. Applying Bootstrap Template 6:14example layouts here. We'll use Bootstrap 4, Examples. What do we want? Why don't we grab this one right here? And actually, let me switch to Chrome to do that. Okay. So here's all of the source. I will grab it all, switch back to Sublime, and we'll place it within our layout file to start. Okay.to start. Okay. And cleaning up a handful of things here. We're not going to use Holder. A lot of this stuff is specific for some of the JavaScript's behavior, so we're going to get rid of that entirely. Keep it very simple. Let's grab the Bootstrap CSS. So I'm going to switch back. We'll go to Documentation, Download, and maybe we have it on a CDN.So I'm going to switch back. We'll go to Documentation, Download, and maybe we have it on a CDN. We do. Great. So I will grab that and then paste it in. Next, for the album-specific CSS, let's grab that as well. Now, for the time being, I'm going to place this within my public CSS directory, and we'll call it album. But later, we'll talk about some other ways to construct your front end. Okay.But later, we'll talk about some other ways to construct your front end. Okay. So we'll save that and then reference it, like so. Okay. So let's switch back now, blog.dev, and here's what we get. Now, we got rid of that holder library, which creates placeholders, but that's fine. We have our basic layout in place here. Looks good. So now, let's figure out how we might structure things. Now, it stands to reason that this navigation section at the top will be pressing on everySo now, let's figure out how we might structure things. Now, it stands to reason that this navigation section at the top will be pressing on every page. So, that is a good candidate for the layout file. You know what? Maybe we can extract it just to keep things a bit more clear. So this section right here is our nav bar. If we get rid of it, it disappears. Okay. So let's get rid of it, and instead, I'm going to say Include, and let's clean this up a Extracting Nav and Footer Partials 7:49Okay. So let's get rid of it, and instead, I'm going to say Include, and let's clean this up a little bit. How about partials.nav? Now, the naming convention, again, anything you want. Everybody does it a bit differently. Sometimes I will put partials within a layouts folder. So layouts.nav, layouts.footer. Sound good? Okay.Sound good? Okay. So Resources, Views, Layouts, nav.blade.php, and I'll paste that in here. So the include directive is very simple. It's exactly like PHP. Just fetch that file and include it here. So if I give it a refresh, it's back, but yeah, now, if I ever need to edit my navigation section, it's a little more easy to consume versus some massive thousand-line long HTML file. Now, next, we can presume this is the homepage, so this kind of stuff, it's probably uniquefile. Now, next, we can presume this is the homepage, so this kind of stuff, it's probably unique to the homepage, but the footer section, well, it stands to reason that that will be pressing on every page. So here's our footer. I'm going to do the same thing here. Include layouts.footer. Okay. Same thing. Resources, Views, Layouts, footer, and I'll paste that in.Same thing. Resources, Views, Layouts, footer, and I'll paste that in. Okay. So if we give it a refresh, we still see the same thing, but we are now cleaning up our layout file. So it stands to reason at this point that all of this HTML, it's a lot to take in, but all of this just represents the homepage. So if we get rid of it, we have our header or navigation section and the footer. So maybe I could say here, yield the content, come back, give it a refresh. There's the content dummy placeholder that we had.So maybe I could say here, yield the content, come back, give it a refresh. There's the content dummy placeholder that we had. I'm also going to wrap that within a container div, and that should center it using Twitter Bootstrap. Okay. So now that I have my layout file, what we could do is go back to Posts, Index, and then within here, I will spit out that initial HTML. Let's give it a refresh. There we go. So now we could say album example, change that to my blog or whatever it happens toThere we go. So now we could say album example, change that to my blog or whatever it happens to be. I'd probably clean up this HTML too. I don't like tags being right next to each other like that. I don't know. It gives me anxiety. I like space. Room to breathe is good. But anyways, think about this. Adding Show Page Route 10:02Room to breathe is good. But anyways, think about this. The benefit is now if you were to click on a link or something along these lines, well, you could create a new view, resources, views, posts, show. You're going to extend your layout file again, and now your section content for the content area can be a place to show the post. Okay. Let's register another route. So if you visit posts slash and then a specific post, we will show the post. Let's go to Post Controller.So if you visit posts slash and then a specific post, we will show the post. Let's go to Post Controller. We have a new method here called show, and that will load a show view. Okay. So we have our homepage, but next we'll visit post slash some ID, and now we've moved on to a new page. But we're still referencing the layouts navigation area as well as the footer. So that is the long form illustration of layout files. And like I said, what you might want to do is take your layout file and just put it directly within the layouts folder like so. Supporting Multiple Layouts 11:02And like I said, what you might want to do is take your layout file and just put it directly within the layouts folder like so. And then sometimes what I will do is, this is just an old habit from other languages and frameworks, the convention was to call it master. So you could do that as well. Now this will extend layouts dot master, and yeah, the benefit to this is sometimes you'll have more than one layout file. You can imagine a layout for your main website, but also a separate layout file for your forum or a separate layout file for your administration area that is completely unique. So you can have multiple layout files.or a separate layout file for your administration area that is completely unique. So you can have multiple layout files. Okay. Keep playing around with this, try to get comfortable, and then continue on.
