Now so far we've been using EJS to create templates that lets us create lots of pages that are very 1
similar to each of them. 2
For example lists with different titles. 3
So every time that we open up our list on a different day we get a different title up here. 4
Now we can change this also 5
so that say if I were to go to our website say www.checklist and then I go to /work then 6
I can make it such that we get a list that has a title that says work right? 7
And we can do this really easily using our templates. 8
So let's first go into our list and change this placeholder from kindOfDay to list title just so that 9
it makes a little bit more sense when we're giving it a title such as work or home or something like that. 10
And of course if we change it there we have to change it over here, 11
so it's called a listTitle. 12
Make sure that there's no typos. And we're passing in the current date when the user tries to access 13
our lists in the home route. 14
Now let's add another route. Let's say app.get and we're targeting the work route just so that we 15
can provide a work to do list. 16
So let's create our callback function and inside our callback function we're going to res.render 17
our list.ejs page and then we're going to pass in a list title that is just going to be equal to 18
work list. 19
And then of course we have to pass in the second parameter as well which is called newListItems. 20
And for our worklist you'll need a separate data store, 21
so let's call it workItems and it's just going to start off being empty. 22
So let's pass that along this workItems array and let's add our semicolons and then let's add our 23
app.post route targets our work route. 24
And inside here we're going to create a item that is going to capture the request.body.newItem. 25
Then we're going to say workItems.push. 26
We're going to push this newItem that the user added and then we're going to say res.redirect to 27
our work route so that we go over to here. 28
So let's hit save and let's give this a go. 29
So we're going to head over to localhost:3000/work to access the work route and you can 30
see that we've successfully managed to change the title to work list and we've got a brand new list 31
that is currently completely empty. 32
But there is a slight problem and this will occur when I add a new item. 33
So let's say, 'Write essay' to add to our work list. 34
Now when I press this Submit button, that 'Write essay' somehow gets added to our home list that's based 35
off the date. 36
And the reason is because when I pressed that submit button, my form makes a post request to the home 37
route, so that then enters over here in the post route and we add an item in fact to our items array 38
and we redirect to the home route and we render this page instead. 39
So no matter 40
we can change this quite easily by getting some information back from our post request. 41
So at the moment inside this post request if you insert a console log which logs our request.body 42
and we go ahead and go back over to our work list and we try to add a new item. 43
And I press the submit button. 44
Now if we take a look at the console you can see that what we've logged is a key called newItem that 45
has the value of the item that we just added. But there's also this key called button and that relates to 46
the name that we gave our submit button. 47
It has a name of button. 48
Now we can also give it a value. 49
And if I give it a value let's just call it 'a value', 50
if I go through this process again of adding a new item, you can see that what gets printed in our console 51
is there is a key code button and it has a value of 'a value' which is what we added in here. 52
So what we can do then is we can change the name of our submit button to list and we can change the 53
value to something dynamic using EJS. 54
So we can say the value is equal to something dynamic that we're going to insert here 55
and we can change this to the list title. 56
That's the thing that we're getting from the server that we're going to put at the top of our list as 57
the title. 58
So now when I hit save and we try this again, we go over to /work, 59
we add a new item 60
then you can see that we can tap into something that's called list and we can get it's valued to figure 61
out whether if our newItem was added in the work list or whether it was added in our default list. 62
So now going back to our server, we can instead of console logging what we're getting from the request 63
.body, we can create an IF statement. So we can say if request.body.list 64
so remember that's the key over here so that we can tap into this value. 65
If this is equal to the word work then in that case instead of pushing our items into the array items 66
we're going to push it into our new array which is called to workItems. 67
So let's first place this above our IF statement so we grab the item from the post request and if that 68
request came from our work list then we're going to say workItems.push and we're going to push 69
the item to that list instead. 70
Now else, if it wasn't from the worklist, then we're going to push it to our normal items array and we'll 71
going into res.redirect to our home route. 72
But if it was in fact from the workList then we're going to res.redirect to our work route. 73
So now in our app.post method we've got some logic in here that checks to see if the list that the 74
new item came from was from the worklist and if it was then we're going to at that data item to the 75
work items array 76
and we're going to redirect to over here for the work route where we're going to render our list 77
that is the work list from the work items. 78
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 79
added to our worklist and we have two separate lists now that operate independently from each other 80
because we were able to implement some logic on our server that separates out the data. 81
Now this is all very well and good and allows us to reuse a list.ejs template for as many different 82
lists as we want to create. 83
But the problem arises when we want to create pages that look dramatically different from this, when 84
we don't really want a list and we don't want checkboxes we don't want submit button. Say if for our 85
website we wanted to add a About page or a Contact Me page. 86
Well that's not going to have the same content right? 87
It's not going to have checkboxes or a submit buttons. But I still want it to have the same style. 88
So I don't want to rewrite all of these parts and create separate pages. 89
Well one way of doing this is we create a new file called about.html and then we go ahead 90
and copy some of these parts 91
for example the boilerplate and the CSS style sheet links and we copy the footer and we add some custom 92
content. 93
And now we have an About page. But would if we had more things that were repeated? 94
So for example what if we had a footer that we wanted on every single page and this footer was going 95
to have some copyright text for example. 96
So let's say, 'Copyright 2018 The App Brewery'. Let's hit save and now you can see we've got that rendered down 97
here. 98
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 99
it for some pages. 100
So this is not a great way of implementing it. 101
So in fact I'm going to delete our about.html page that we just created and I'm going to show 102
you a better way of doing this. 103
So EJS allows to create something called layouts or partials and you can see that if you scroll 104
down to the layouts section. 105
So it says that layouts can be implemented by including headers and footers like so. 106
So we're basically saying here is the body of our content of the page and the top and the bottom part 107
are going to stay consistent across our website. 108
Now this is very very common behavior because in most sites, you have a standardized look and feel, you 109
have the same sort of styles applied everywhere the same background colors etc. 110
So let's see how we can implement these layouts. Now 111
let's go into our views folder and we're going to create a new file called header.ejs 112
and also one called footer. 113
ejs. 114
Now these two files are going to be added to all the new files that we create. 115
So instead of having all of this part which is going to be repeated across all of our websites, I'm 116
simply going to cut it and paste it into header.ejs. And then I'm going to cut all of this and I'm 117
going to paste it into footer.ejs. 118
So now I have a header and footer that 119
I'm going to apply across all of my web pages and I can do that exactly as they've specified over here. 120
So let's go ahead and add that code at the top here. 121
So the keyword is include 122
and then we have some parentheses to tell it what to include. 123
And in our case the file is called header. 124
So all we need to do is put the word header in between some quotation marks. And then we close this off 125
with a hyphen, percentage sign and a closing angle bracket and we can do the same thing down here for 126
our footer. 127
And instead just change the file to the footer.ejs. 128
So now if you refreshed the To Do list, you can see that absolutely nothing has changed. 129
But if I go ahead and create a new view and let's call this about.ejs. And I'm simply going to 130
have an h2 in here that says, 'This is the about page' and then I'm going to have a paragraph with lots 131
and lots of text. 132
And let's create a get route: app.get/ targeting the about route and then we have our callback function. 133
And here we're going res.render our About page. And this about page takes no parameters 134
so that's all we need to add. 135
And now if I hit save and I head over to the About page then you can see that this is completely un 136
styled and this is what my page would look like if I didn't add any of those layouts. 137
So now it's time to add those layouts and you've seen how we did it inside list.ejs. 138
So I want you to pause the video and add the header and footer to the about.ejs page as well. 139
All right so this is pretty simple. 140
We're just going to use the tag that is open 141
angle bracket, percentage sign, hyphen and then we're going to say include and then we're going to 142
tell it what to include which is the file called header. 143
And then we're going to close off this tag and we're going to do the same thing down here for our footer. 144
So now when we refresh our page, bam! it's got the same styling that we're used to from our previous pages 145
and we didn't have to repeat very much code at all. 146
And so now every time we create a new page even if it looks dramatically different from our To Do List, 147
we can use our header and footer layouts to style up our website and include our Javascript or j 148
Query, all our assets or anything like that. 149
And this makes it super easy to create a large website with many different pages.