All language subtitles for 009 Understanding Templating vs. Layouts_en

Now so far we've been using EJS to create templates that lets us create lots of pages that are very

similar to each of them.

For example lists with different titles.

So every time that we open up our list on a different day we get a different title up here.

Now we can change this also

so that say if I were to go to our website say www.checklist and then I go to /work then

I can make it such that we get a list that has a title that says work right?

And we can do this really easily using our templates.

So let's first go into our list and change this placeholder from kindOfDay to list title just so that

it makes a little bit more sense when we're giving it a title such as work or home or something like that.

And of course if we change it there we have to change it over here,

so it's called a listTitle.

Make sure that there's no typos. And we're passing in the current date when the user tries to access

our lists in the home route.

Now let's add another route. Let's say app.get and we're targeting the work route just so that we

can provide a work to do list.

So let's create our callback function and inside our callback function we're going to res.render

our list.ejs page and then we're going to pass in a list title that is just going to be equal to

work list.

And then of course we have to pass in the second parameter as well which is called newListItems.

And for our worklist you'll need a separate data store,

so let's call it workItems and it's just going to start off being empty.

So let's pass that along this workItems array and let's add our semicolons and then let's add our

app.post route targets our work route.

And inside here we're going to create a item that is going to capture the request.body.newItem.

Then we're going to say workItems.push.

We're going to push this newItem that the user added and then we're going to say res.redirect to

our work route so that we go over to here.

So let's hit save and let's give this a go.

So we're going to head over to localhost:3000/work to access the work route and you can

see that we've successfully managed to change the title to work list and we've got a brand new list

that is currently completely empty.

But there is a slight problem and this will occur when I add a new item.

So let's say, 'Write essay' to add to our work list.

Now when I press this Submit button, that 'Write essay' somehow gets added to our home list that's based

off the date.

And the reason is because when I pressed that submit button, my form makes a post request to the home

route, so that then enters over here in the post route and we add an item in fact to our items array

and we redirect to the home route and we render this page instead.

So no matter

we can change this quite easily by getting some information back from our post request.

So at the moment inside this post request if you insert a console log which logs our request.body

and we go ahead and go back over to our work list and we try to add a new item.

And I press the submit button.

Now if we take a look at the console you can see that what we've logged is a key called newItem that

has the value of the item that we just added. But there's also this key called button and that relates to

the name that we gave our submit button.

It has a name of button.

Now we can also give it a value.

And if I give it a value let's just call it 'a value',

if I go through this process again of adding a new item, you can see that what gets printed in our console

is there is a key code button and it has a value of 'a value' which is what we added in here.

So what we can do then is we can change the name of our submit button to list and we can change the

value to something dynamic using EJS.

So we can say the value is equal to something dynamic that we're going to insert here

and we can change this to the list title.

That's the thing that we're getting from the server that we're going to put at the top of our list as

the title.

So now when I hit save and we try this again, we go over to /work,

we add a new item

then you can see that we can tap into something that's called list and we can get it's valued to figure

out whether if our newItem was added in the work list or whether it was added in our default list.

So now going back to our server, we can instead of console logging what we're getting from the request

.body, we can create an IF statement. So we can say if request.body.list

so remember that's the key over here so that we can tap into this value.

If this is equal to the word work then in that case instead of pushing our items into the array items

we're going to push it into our new array which is called to workItems.

So let's first place this above our IF statement so we grab the item from the post request and if that

request came from our work list then we're going to say workItems.push and we're going to push

the item to that list instead.

Now else, if it wasn't from the worklist, then we're going to push it to our normal items array and we'll

going into res.redirect to our home route.

But if it was in fact from the workList then we're going to res.redirect to our work route.

So now in our app.post method we've got some logic in here that checks to see if the list that the

new item came from was from the worklist and if it was then we're going to at that data item to the

work items array

and we're going to redirect to over here for the work route where we're going to render our list

that is the work list from the work items.

So now if we hit save and we head over to the worklist and we add a new item say 'Write essay', now it gets

added to our worklist and we have two separate lists now that operate independently from each other

because we were able to implement some logic on our server that separates out the data.

Now this is all very well and good and allows us to reuse a list.ejs template for as many different

lists as we want to create.

But the problem arises when we want to create pages that look dramatically different from this, when

we don't really want a list and we don't want checkboxes we don't want submit button. Say if for our

website we wanted to add a About page or a Contact Me page.

Well that's not going to have the same content right?

It's not going to have checkboxes or a submit buttons. But I still want it to have the same style.

So I don't want to rewrite all of these parts and create separate pages.

Well one way of doing this is we create a new file called about.html and then we go ahead

and copy some of these parts

for example the boilerplate and the CSS style sheet links and we copy the footer and we add some custom

content.

And now we have an About page. But would if we had more things that were repeated?

So for example what if we had a footer that we wanted on every single page and this footer was going

to have some copyright text for example.

So let's say, 'Copyright 2018 The App Brewery'. Let's hit save and now you can see we've got that rendered down

here.

But we want it over here as well so we have to go ahead and copy it and paste it over and we might forget

it for some pages.

So this is not a great way of implementing it.

So in fact I'm going to delete our about.html page that we just created and I'm going to show

you a better way of doing this.

So EJS allows to create something called layouts or partials and you can see that if you scroll

down to the layouts section.

So it says that layouts can be implemented by including headers and footers like so.

So we're basically saying here is the body of our content of the page and the top and the bottom part

are going to stay consistent across our website.

Now this is very very common behavior because in most sites, you have a standardized look and feel, you

have the same sort of styles applied everywhere the same background colors etc.

So let's see how we can implement these layouts. Now

let's go into our views folder and we're going to create a new file called header.ejs

and also one called footer.

ejs.

Now these two files are going to be added to all the new files that we create.

So instead of having all of this part which is going to be repeated across all of our websites, I'm

simply going to cut it and paste it into header.ejs. And then I'm going to cut all of this and I'm

going to paste it into footer.ejs.

So now I have a header and footer that

I'm going to apply across all of my web pages and I can do that exactly as they've specified over here.

So let's go ahead and add that code at the top here.

So the keyword is include

and then we have some parentheses to tell it what to include.

And in our case the file is called header.

So all we need to do is put the word header in between some quotation marks. And then we close this off

with a hyphen, percentage sign and a closing angle bracket and we can do the same thing down here for

our footer.

And instead just change the file to the footer.ejs.

So now if you refreshed the To Do list, you can see that absolutely nothing has changed.

But if I go ahead and create a new view and let's call this about.ejs. And I'm simply going to

have an h2 in here that says, 'This is the about page' and then I'm going to have a paragraph with lots

and lots of text.

And let's create a get route: app.get/ targeting the about route and then we have our callback function.

And here we're going res.render our About page. And this about page takes no parameters

so that's all we need to add.

And now if I hit save and I head over to the About page then you can see that this is completely un

styled and this is what my page would look like if I didn't add any of those layouts.

So now it's time to add those layouts and you've seen how we did it inside list.ejs.

So I want you to pause the video and add the header and footer to the about.ejs page as well.

All right so this is pretty simple.

We're just going to use the tag that is open

angle bracket, percentage sign, hyphen and then we're going to say include and then we're going to

tell it what to include which is the file called header.

And then we're going to close off this tag and we're going to do the same thing down here for our footer.

So now when we refresh our page, bam! it's got the same styling that we're used to from our previous pages

and we didn't have to repeat very much code at all.

And so now every time we create a new page even if it looks dramatically different from our To Do List,

we can use our header and footer layouts to style up our website and include our Javascript or j

Query, all our assets or anything like that.

And this makes it super easy to create a large website with many different pages.