All language subtitles for 004 Creating Your First EJS Templates_en

Now in the last lesson, we spoke about why we need to create templates when we're creating websites

that have very similar content to each other.

So the example we use is that if we checked whether if the current day was equal to a Saturday or a

Sunday then we could send different HTML files

so one that is weekend.html that says, 'It's the weekend!

Why are you working!'

And if it was not a Saturday or Sunday, then we would send the day file which says, 'It's a weekday!

Why are you not working!' Now

this works to some extent

if you only have say two of these if else statements. But say if you wanted to have a different file for each

day of the week

that said it's a Monday or it's a Tuesday, then you would need seven such of these HTML files and even

worse if you are creating a blog post or in our case we're creating a to do list.

If the user had a different to do list for example a work list, a home list, a grocery list, then you would

need to create a new HTML page for every single one of those lists

even though the actual content of each of the lists of really really similar.

So that's where we got up to in the last lesson.

So now hopefully you understand why we need to think about templates and templating.

But in this lesson we're going to tackle the how. How do we exactly go about making a template?

Well there's several tools that help you to do this but the one that we're going to talk about is something

called EJS or Embedded JavaScript Templating.

So if you head over--

So as always whenever you using a new piece of technology the best place to start with is the documentation.

So if you head over to ejs.co then you'll find this page that tells you how to get started, how

to use it and a whole bunch of documentation on how this templating software will help you.

Now in our case we need to scroll down to this part using EJS us with Express. That will be super relevant

to us because that's pretty much exactly what we're doing right?

We're using Express to build our app and our server and we're going to use EJS with it.

So if we head over to this GitHub wiki page then we'll get to see the more specific instructions on

how we can use EJS with Express.

So I recommend reading through this as well as the documentation on ejs.co and then we can get

started using it.

So the first step to using anything is of course to install it with NPM.

So let's head over to hyper.js, let's quit our server with Control + C and then we're going to NPM

install our brand new EJS module.

So now that's done

and if we check inside our package.json, you can see we're now using EJS, Express and body-parser.

So the next thing that we need to do is we need to set our apps view engine to ejs.

Now as I alluded to before, EJS is not the only module that can help us do this but it is one of the

easiest to work with

which is why I'm using it in this tutorial. And you'll find that it's one of the most popular ones that

Node developers will choose

so you're definitely in good company.

So the first thing we need to do is to tell our app to use EJS. So you can either copy this line

of code or write it out but just make sure that you've typed this exactly as you see here.

So there is a space between view and engine and they all lowercase.

This is really important for your app to work.

So I'm just going to go ahead and paste it in here.

So this line of code tells our app which is generated using Express to use EJS as its view engine.

And it's really important that you place this line of code below this one because if you try to place

it above then at this point app doesn't exist yet and you will get errors telling you that app was used

before it was declared so that a particular message that you can watch out for.

So the usual place to put it is just below where you declared your new app constant.

OK so let's check back here to see what else we need to do.

So we've already got our app.listen set up and we've already got a app.get on our home route.

And then inside the callback they're using a new method called res.render.

And this uses the view engine that we set up here to render a particular page.

So in this case we're rendering a page called index and that will be an index.ejs page.

So up here it says that this code assumes that a views directory exists and it contains a index.

ejs file.

So in order to use EJS or pretty much any of the engines then we need to first create a new folder

called views and it's all in lowercase.

And this is where the view engine by default will go and look for the files that you're trying to render.

So let's head over to our views folder and I'm going to create a new EJS file. Now instead of calling

it index.ejs,

I'm going to name it more relevant to our project, so I'm going to call that list.ejs.

So this is going to be the base template to create all of our to do lists.

So now inside this list.ejs file you're essentially writing HTML code.

So let's head over to our index.html which we had before and I'm just going to copy all of the

code into our list.ejs.

So anything that is valid HTML will be valid for an EJS file.

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.

Now my goal is to change this word here so that it will display the current day of the week.

So for example today is a Thursday, so my h1 should say it's a Thursday, but tomorrow when I load up

this page it should say it's a Friday.

So I need to be able to essentially pass some information from my app.js file which is remember

where all of the logic in the code gets executed and take the result of that logic to place it in here.

So I should be able to check for the current day of the week and then to send that information over

to my list.ejs and place that day of the week right here so that when I render this list.ejs,

this h1 gets completed with the day of the week.

So let's see how we can do that using EJS.

Now if you take a look at their example, you can see that they're passing over a variable called foo

and the value is just the word FOO

in all caps.

So we can do exactly the same thing.

Now inside our list.ejs we're going to add a marker that's going to tell the file that this is

where you should place a particular variable.

Now the marker for EJS us looks like this.

It's a angèle bracket, a percentage sign and then an equal sign

and then inside there you're going to place your variable name and you complete the tag with again a

percentage sign and a closing angle bracket.

So this is a marker that tells the file to replace whatever is inside here

with the value of the variable.

So if inside our App.js we check to see whether if the current day was a Saturday or a Sunday, so

we could create a variable called day that starts off being an empty string.

And then later on if the current day was equal to a Saturday or a Sunday, then we can change this day

into to say weekend but else if it's not a Saturday or Sunday then day will equal to weekday.

And what we want to do is we want to be able to send this variable day over to our lists.

ejs.

So let's first place a marker for that variable.

So as we saw before, we need to add a angle bracket and then a percentage sign and an equal sign and

then we're going to have a closing tag that's comprised of a percentage sign and a closing angle bracket.

And now inside here is where we can put in the variable name that we want to replace this marker with.

So in our case I'm going to call it kindOfDay as in the kind of day.

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

this information through.

So now instead of using res.send file, we're going to use the brand new method called res.

render. And the page that we're going to render is of course our list.

ejs

and the variable that we pass in is going to be a Javascript object,

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

we call res.render and we render the file that is list.

So when we write this, then Express is going to look inside a folder called views and it's going to look

for a file that's called list and it has the extension of ejs.

Now if you don't have this folder called views or if you don't have a file called list.ejs

inside of views, then this line of code is not going to work.

So this is a really important step, making that views folder.

So we're going to render list and then we'll get a pass in a Javascript object which has a key value

pair.

Now the key in this case has to match with whatever you put in here.

So you might as well go over here and COMMAND + C or CONTROL + C to copy that because it has to be written

exactly the same with no spelling differences and no difference in capitalisation.

So this is basically saying render a file called list

and we're going to pass that file a variable called kindOfDay

and the value is going to equal to whatever is the value of our current variable which is day.

So to reiterate the process, we're creating our response by rendering a file called list which has to

exist inside a views folder and has to have the extension.

ejs.

And then into that list file we're passing in a single variable that has the name of kindOfDay

and the value that we're giving it is the value of our variable, day.

So we can copy and paste this code so that exists in both the if and the else statement.

But actually if you think about it, we can leave the IF and ELSE statement to do on logic namely change

the variable day to whatever it is, weekend or weekday.

And then after that IF-ELSE statement, we can add it just before we end our app.get route. So we can

say res.render our list.ejs passing a variable called kindOfDay

the value of which is equal to the value of our variable day.

So that means that you can do a lot of logic and computation and processing and then only pass over

the result of all of that logic to your template file.

So let's hit save and let's go ahead and restart our server.

So now if I refresh my page, then you'll see that I'm getting this being passed over to kindOfDay and

which replaces this marker inside my template.

Now what you'll commonly see when you see people using EJS templating and express is that they'll

use the same name for the variable.

So for example they'll use the variable name day over here

and that means this also has to be day and you'll see day: day.

Now this I find personally to be quite confusing because when you first look at it, you don't know whether

this is equal to this or whether this is equal to this.

So just to be aware that this is what most people will use when they're coding with Express and a templating

engine,

but to start with I recommend actually to use different variable names just to make it really clear

to yourself what's actually going on.

And as a challenge so that you can try this out and see if you can make it work, instead of just saying

days equal to weekend or week day, I want you to write out the full seven days.

So once you're done when we render this page, if it's a Thursday than it should say it's a Thursday.

And if it's a Tuesday then it'll say it's a Tuesday.

So pause the video now and see if you can change this code that you've currently got to render the current

day of the week.

All right.

So this shouldn't be too difficult.

The first thing we need to do is to check what day of the week it is.

So you can see that with current day we only get a number and we have to turn that number into a piece

of text that we're going to store inside this variable called day.

Now some of you might have chosen to do this with IF and ELSE statements, others might have chosen to

use a Switch statement but both ways work. I think as a rule of thumb, if you have more than five IF-ELSE

statements, I tend to recommend to use a Switch statement and if you have less than five then it's probably

more efficient to use IF and ELSE statements.

So let's create our Switch statement and let's use our auto-complete to just add in all the parts that

we need.

So the expression that we're going to switch on is this variable called current day.

This is going to be the one that has the numbers right?

So we're going to switch on the value of current day

and in the case where current day is equal to zero, then we're going to change the value of our variable

day to the string

that is Sunday.

And then we have a break and that break will exit our switch statement.

And now we can add a whole bunch of cases.

So we should have seven in total.

And let me just use the beautify shortcut to just get that straightened out.

And now we can replace our cases.

All right, so now we have our complete switch statement and we finally and the final thing that we need

to do is to add a log statement or throw an error when our current day is not covered by any of these

cases.

Now this should never ever happen because there is no 8th day of the week.

So this should never ever be triggered. But just in case we want to know what on earth is going on.

So I'm going to say error current day is equal-- is equal to

plus the value of current day that triggered this default case.

So in most cases your default case should never ever be triggered.

But if it does then it's a good idea to log the expression that caused that default case so that you

can fix any bugs or anything that you overlooked.

So now that we have added the switch statement that will change the value of day to whatever day it is

and then we're going to pass the value of that over here and into this variable called kindOfDay which

has to match with the one that we add in here inside the EJS marker

and it will replace this entire marker with the value of day.

So now if we hit save and we go ahead and refresh our local host then you can see that we get rendered

the h1 which says it's a Thursday or some might know it as Thor's day,

that guy with the hammer's day.

So now you have created your very first template. And as you can imagine

our code gets more complicated.

We can pass over more and more variables which can-- which will flesh out our templates. In the next lesson

we're going to look at another feature of templating which is the ability to run code inside the

HTML file.

So for all of that and more, I'll see you on the next lesson.