Now in the last lesson, we spoke about why we need to create templates when we're creating websites 1
that have very similar content to each other. 2
So the example we use is that if we checked whether if the current day was equal to a Saturday or a 3
Sunday then we could send different HTML files 4
so one that is weekend.html that says, 'It's the weekend! 5
Why are you working!' 6
And if it was not a Saturday or Sunday, then we would send the day file which says, 'It's a weekday! 7
Why are you not working!' Now 8
this works to some extent 9
if you only have say two of these if else statements. But say if you wanted to have a different file for each 10
day of the week 11
that said it's a Monday or it's a Tuesday, then you would need seven such of these HTML files and even 12
worse if you are creating a blog post or in our case we're creating a to do list. 13
If the user had a different to do list for example a work list, a home list, a grocery list, then you would 14
need to create a new HTML page for every single one of those lists 15
even though the actual content of each of the lists of really really similar. 16
So that's where we got up to in the last lesson. 17
So now hopefully you understand why we need to think about templates and templating. 18
But in this lesson we're going to tackle the how. How do we exactly go about making a template? 19
Well there's several tools that help you to do this but the one that we're going to talk about is something 20
called EJS or Embedded JavaScript Templating. 21
So if you head over-- 22
So as always whenever you using a new piece of technology the best place to start with is the documentation. 23
So if you head over to ejs.co then you'll find this page that tells you how to get started, how 24
to use it and a whole bunch of documentation on how this templating software will help you. 25
Now in our case we need to scroll down to this part using EJS us with Express. That will be super relevant 26
to us because that's pretty much exactly what we're doing right? 27
We're using Express to build our app and our server and we're going to use EJS with it. 28
So if we head over to this GitHub wiki page then we'll get to see the more specific instructions on 29
how we can use EJS with Express. 30
So I recommend reading through this as well as the documentation on ejs.co and then we can get 31
started using it. 32
So the first step to using anything is of course to install it with NPM. 33
So let's head over to hyper.js, let's quit our server with Control + C and then we're going to NPM 34
install our brand new EJS module. 35
So now that's done 36
and if we check inside our package.json, you can see we're now using EJS, Express and body-parser. 37
So the next thing that we need to do is we need to set our apps view engine to ejs. 38
Now as I alluded to before, EJS is not the only module that can help us do this but it is one of the 39
easiest to work with 40
which is why I'm using it in this tutorial. And you'll find that it's one of the most popular ones that 41
Node developers will choose 42
so you're definitely in good company. 43
So the first thing we need to do is to tell our app to use EJS. So you can either copy this line 44
of code or write it out but just make sure that you've typed this exactly as you see here. 45
So there is a space between view and engine and they all lowercase. 46
This is really important for your app to work. 47
So I'm just going to go ahead and paste it in here. 48
So this line of code tells our app which is generated using Express to use EJS as its view engine. 49
And it's really important that you place this line of code below this one because if you try to place 50
it above then at this point app doesn't exist yet and you will get errors telling you that app was used 51
before it was declared so that a particular message that you can watch out for. 52
So the usual place to put it is just below where you declared your new app constant. 53
OK so let's check back here to see what else we need to do. 54
So we've already got our app.listen set up and we've already got a app.get on our home route. 55
And then inside the callback they're using a new method called res.render. 56
And this uses the view engine that we set up here to render a particular page. 57
So in this case we're rendering a page called index and that will be an index.ejs page. 58
So up here it says that this code assumes that a views directory exists and it contains a index. 59
ejs file. 60
So in order to use EJS or pretty much any of the engines then we need to first create a new folder 61
called views and it's all in lowercase. 62
And this is where the view engine by default will go and look for the files that you're trying to render. 63
So let's head over to our views folder and I'm going to create a new EJS file. Now instead of calling 64
it index.ejs, 65
I'm going to name it more relevant to our project, so I'm going to call that list.ejs. 66
So this is going to be the base template to create all of our to do lists. 67
So now inside this list.ejs file you're essentially writing HTML code. 68
So let's head over to our index.html which we had before and I'm just going to copy all of the 69
code into our list.ejs. 70
So anything that is valid HTML will be valid for an EJS file. 71
Now in our page I'm going to keep it simple so we only have a title which is called to do list and an h1. 72
Now my goal is to change this word here so that it will display the current day of the week. 73
So for example today is a Thursday, so my h1 should say it's a Thursday, but tomorrow when I load up 74
this page it should say it's a Friday. 75
So I need to be able to essentially pass some information from my app.js file which is remember 76
where all of the logic in the code gets executed and take the result of that logic to place it in here. 77
So I should be able to check for the current day of the week and then to send that information over 78
to my list.ejs and place that day of the week right here so that when I render this list.ejs, 79
this h1 gets completed with the day of the week. 80
So let's see how we can do that using EJS. 81
Now if you take a look at their example, you can see that they're passing over a variable called foo 82
and the value is just the word FOO 83
in all caps. 84
So we can do exactly the same thing. 85
Now inside our list.ejs we're going to add a marker that's going to tell the file that this is 86
where you should place a particular variable. 87
Now the marker for EJS us looks like this. 88
It's a angèle bracket, a percentage sign and then an equal sign 89
and then inside there you're going to place your variable name and you complete the tag with again a 90
percentage sign and a closing angle bracket. 91
So this is a marker that tells the file to replace whatever is inside here 92
with the value of the variable. 93
So if inside our App.js we check to see whether if the current day was a Saturday or a Sunday, so 94
we could create a variable called day that starts off being an empty string. 95
And then later on if the current day was equal to a Saturday or a Sunday, then we can change this day 96
into to say weekend but else if it's not a Saturday or Sunday then day will equal to weekday. 97
And what we want to do is we want to be able to send this variable day over to our lists. 98
ejs. 99
So let's first place a marker for that variable. 100
So as we saw before, we need to add a angle bracket and then a percentage sign and an equal sign and 101
then we're going to have a closing tag that's comprised of a percentage sign and a closing angle bracket. 102
And now inside here is where we can put in the variable name that we want to replace this marker with. 103
So in our case I'm going to call it kindOfDay as in the kind of day. 104
And the reason why I'm not calling it day is so that I can make it super clear for you how we're passing 105
this information through. 106
So now instead of using res.send file, we're going to use the brand new method called res. 107
render. And the page that we're going to render is of course our list. 108
ejs 109
and the variable that we pass in is going to be a Javascript object, 110
so inside a set of curly braces and we get to have a key and a value. So if we go into our IF statement and 111
we call res.render and we render the file that is list. 112
So when we write this, then Express is going to look inside a folder called views and it's going to look 113
for a file that's called list and it has the extension of ejs. 114
Now if you don't have this folder called views or if you don't have a file called list.ejs 115
inside of views, then this line of code is not going to work. 116
So this is a really important step, making that views folder. 117
So we're going to render list and then we'll get a pass in a Javascript object which has a key value 118
pair. 119
Now the key in this case has to match with whatever you put in here. 120
So you might as well go over here and COMMAND + C or CONTROL + C to copy that because it has to be written 121
exactly the same with no spelling differences and no difference in capitalisation. 122
So this is basically saying render a file called list 123
and we're going to pass that file a variable called kindOfDay 124
and the value is going to equal to whatever is the value of our current variable which is day. 125
So to reiterate the process, we're creating our response by rendering a file called list which has to 126
exist inside a views folder and has to have the extension. 127
ejs. 128
And then into that list file we're passing in a single variable that has the name of kindOfDay 129
and the value that we're giving it is the value of our variable, day. 130
So we can copy and paste this code so that exists in both the if and the else statement. 131
But actually if you think about it, we can leave the IF and ELSE statement to do on logic namely change 132
the variable day to whatever it is, weekend or weekday. 133
And then after that IF-ELSE statement, we can add it just before we end our app.get route. So we can 134
say res.render our list.ejs passing a variable called kindOfDay 135
the value of which is equal to the value of our variable day. 136
So that means that you can do a lot of logic and computation and processing and then only pass over 137
the result of all of that logic to your template file. 138
So let's hit save and let's go ahead and restart our server. 139
So now if I refresh my page, then you'll see that I'm getting this being passed over to kindOfDay and 140
which replaces this marker inside my template. 141
Now what you'll commonly see when you see people using EJS templating and express is that they'll 142
use the same name for the variable. 143
So for example they'll use the variable name day over here 144
and that means this also has to be day and you'll see day: day. 145
Now this I find personally to be quite confusing because when you first look at it, you don't know whether 146
this is equal to this or whether this is equal to this. 147
So just to be aware that this is what most people will use when they're coding with Express and a templating 148
engine, 149
but to start with I recommend actually to use different variable names just to make it really clear 150
to yourself what's actually going on. 151
And as a challenge so that you can try this out and see if you can make it work, instead of just saying 152
days equal to weekend or week day, I want you to write out the full seven days. 153
So once you're done when we render this page, if it's a Thursday than it should say it's a Thursday. 154
And if it's a Tuesday then it'll say it's a Tuesday. 155
So pause the video now and see if you can change this code that you've currently got to render the current 156
day of the week. 157
All right. 158
So this shouldn't be too difficult. 159
The first thing we need to do is to check what day of the week it is. 160
So you can see that with current day we only get a number and we have to turn that number into a piece 161
of text that we're going to store inside this variable called day. 162
Now some of you might have chosen to do this with IF and ELSE statements, others might have chosen to 163
use a Switch statement but both ways work. I think as a rule of thumb, if you have more than five IF-ELSE 164
statements, I tend to recommend to use a Switch statement and if you have less than five then it's probably 165
more efficient to use IF and ELSE statements. 166
So let's create our Switch statement and let's use our auto-complete to just add in all the parts that 167
we need. 168
So the expression that we're going to switch on is this variable called current day. 169
This is going to be the one that has the numbers right? 170
So we're going to switch on the value of current day 171
and in the case where current day is equal to zero, then we're going to change the value of our variable 172
day to the string 173
that is Sunday. 174
And then we have a break and that break will exit our switch statement. 175
And now we can add a whole bunch of cases. 176
So we should have seven in total. 177
And let me just use the beautify shortcut to just get that straightened out. 178
And now we can replace our cases. 179
All right, so now we have our complete switch statement and we finally and the final thing that we need 180
to do is to add a log statement or throw an error when our current day is not covered by any of these 181
cases. 182
Now this should never ever happen because there is no 8th day of the week. 183
So this should never ever be triggered. But just in case we want to know what on earth is going on. 184
So I'm going to say error current day is equal-- is equal to 185
plus the value of current day that triggered this default case. 186
So in most cases your default case should never ever be triggered. 187
But if it does then it's a good idea to log the expression that caused that default case so that you 188
can fix any bugs or anything that you overlooked. 189
So now that we have added the switch statement that will change the value of day to whatever day it is 190
and then we're going to pass the value of that over here and into this variable called kindOfDay which 191
has to match with the one that we add in here inside the EJS marker 192
and it will replace this entire marker with the value of day. 193
So now if we hit save and we go ahead and refresh our local host then you can see that we get rendered 194
the h1 which says it's a Thursday or some might know it as Thor's day, 195
that guy with the hammer's day. 196
So now you have created your very first template. And as you can imagine 197
our code gets more complicated. 198
We can pass over more and more variables which can-- which will flesh out our templates. In the next lesson 199
we're going to look at another feature of templating which is the ability to run code inside the 200
HTML file. 201
So for all of that and more, I'll see you on the next lesson.