Use layouts for shared templates - Ruby on Rails Tutorial

- [Instructor] If you want all of the pages in your web application to have a similar look and feel, then layouts are an indispensable tool. All you need to use layouts is to define a layout and then tell your application to use it. In order to define a layout, all we need to do is have a file that has all of the information we want to happen before the template renders. And then all of the information that should be after the template with an ERB tag that says yield to indicate where the template should go. Now what's actually happening, when Rails goes to render things, it realizes it has a layout so it starts rendering the layout first. Then when it gets to that ERB tag that says yield, it yields control over the rendering to the template. The template then does its thing and then when it's done, the control comes back to the layout to finish things up. The way that we tell our application to use a layout is by simply putting layout and then the name of the layout that we want to use inside one of our controllers. By default, when we create a new Rails application, rails creates a default layout for us called application and puts it in the views layouts folder. That's typically the directory where you're going to put your layouts as well And you don't have to stick with the one that rails has. You can define your own. For example, you might have one for the public facing side of your website and another layout for admins and the admin area. Those might have different color schemes, they may have different style sheets and JavaScripts that get loaded. All of those aspects could be different in each of these layouts. And if you don't want to use the layout at all, then you can simply declare layout false, and it won't use a layout for the entire controller and anything that inherits from it. You can also opt out of the layouts on her action basis by passing in the layout false option to any render that you do. Let's take a look at the default layout Rails gives us. As I said, that layout is going to be in the views directory inside a directory called layouts and it's called application dot HTML dot ERB. It does have that ERB after it so we can include ERB tags in here. And you can see there already a few. Rails has included some helpful bits for you. We talked about the security protection that the CSRF meta-tags gives us, CSP meta-tag works the same way. It also goes ahead and gives us some default links to Style sheets and JavaScripts. Don't worry about any of these for now. You want to keep them, but I just wanted to hide them for a second and remove them. So you can see that really it's just a basic HTML template that has this yield ERB tag in the middle of it. All right, let's restore them all and let's save it. In order to use this, we just need to go to one of our controllers and tell it to use it. I'm actually going to go to my application controller and tell all of my controllers that they should use it. Layout application. And I can override that setting in any of the controllers that inherit from it by just setting a different layout. It's not a big deal. So if you have one controller that doesn't need the application one, you can change it. Now my controllers know to use this layout. Let's test it out. Let's go back to application dot HTML dot ERB. And before we use it, let's actually just add a div here, ID content and close up our div. And let's see if we see that now all around our page. Let's fire up the Rail server, and then let's come back over here. I've got our login page. And then if we take a look at it, inside the Inspector, you'll see that we get all of this HTML around it, including Div ID content, right there. See that line? Div class access new is where the template starts. I can fold that up and then you can see, then it closes this tag and finishes out the HTML. So everything here is the template. That's where the yield is. And the rest of it is the layout. It's that easy. Let's add a bit more to our application layout. So let's go right here and let's add a header tag and let's just say Simple CMS. And then let's also give it some styling. So we'll say the style is going to be height 1EM, padding 1EM. We'll do margin bottom also 1EM and we'll change the background color as well. You can pick anything you want. I'm going to pick 0099CC. And then I'm going to take all of that and copy it. Let's come down here to the bottom. Instead of the header though, we're going to make this the footer. And we'll keep the same styling, but it won't be margin bottom, it'll be margin top. And instead of Simple CMS, let's put in Copyright. And Time now dot that year to return the current year to us. Okay, so now we've got a header and a footer on our page. Let's go back and reload it. And there you go. Now I think we can make one more improvement here, which is on the content. Let's add style min-height of 400 pixels. That should be good. All right, let's come back here and that'll kind of drop it down to the bottom. Now we log in, we go to the menu page. Look at that, they're still there. We go to manage subjects, still there. So now we have a place where we can put navigation items, right? We can have links that should show up all the time. Maybe a contact us link. All those things are visible and can be visible on every single one of our pages. We have a consistent layout to all of the templates.