WEBVTT 0 00:01.140 --> 00:08.550 Now in the last lesson, we spoke about why we need to create templates when we're creating websites 1 00:08.730 --> 00:11.570 that have very similar content to each other. 2 00:11.670 --> 00:18.120 So the example we use is that if we checked whether if the current day was equal to a Saturday or a 3 00:18.120 --> 00:22.460 Sunday then we could send different HTML files 4 00:22.590 --> 00:26.440 so one that is weekend.html that says, 'It's the weekend! 5 00:26.460 --> 00:27.830 Why are you working!' 6 00:28.050 --> 00:35.170 And if it was not a Saturday or Sunday, then we would send the day file which says, 'It's a weekday! 7 00:35.250 --> 00:38.340 Why are you not working!' Now 8 00:38.580 --> 00:40.800 this works to some extent 9 00:40.800 --> 00:46.980 if you only have say two of these if else statements. But say if you wanted to have a different file for each 10 00:46.980 --> 00:47.930 day of the week 11 00:47.970 --> 00:56.250 that said it's a Monday or it's a Tuesday, then you would need seven such of these HTML files and even 12 00:56.250 --> 01:01.820 worse if you are creating a blog post or in our case we're creating a to do list. 13 01:01.920 --> 01:09.630 If the user had a different to do list for example a work list, a home list, a grocery list, then you would 14 01:09.630 --> 01:14.520 need to create a new HTML page for every single one of those lists 15 01:14.700 --> 01:20.390 even though the actual content of each of the lists of really really similar. 16 01:20.490 --> 01:22.840 So that's where we got up to in the last lesson. 17 01:22.860 --> 01:28.860 So now hopefully you understand why we need to think about templates and templating. 18 01:29.040 --> 01:35.080 But in this lesson we're going to tackle the how. How do we exactly go about making a template? 19 01:35.400 --> 01:40.470 Well there's several tools that help you to do this but the one that we're going to talk about is something 20 01:40.470 --> 01:44.380 called EJS or Embedded JavaScript Templating. 21 01:44.580 --> 01:45.680 So if you head over-- 22 01:45.690 --> 01:52.840 So as always whenever you using a new piece of technology the best place to start with is the documentation. 23 01:52.890 --> 01:59.820 So if you head over to ejs.co then you'll find this page that tells you how to get started, how 24 01:59.820 --> 02:07.350 to use it and a whole bunch of documentation on how this templating software will help you. 25 02:07.620 --> 02:15.570 Now in our case we need to scroll down to this part using EJS us with Express. That will be super relevant 26 02:15.570 --> 02:19.020 to us because that's pretty much exactly what we're doing right? 27 02:19.020 --> 02:26.020 We're using Express to build our app and our server and we're going to use EJS with it. 28 02:26.040 --> 02:33.210 So if we head over to this GitHub wiki page then we'll get to see the more specific instructions on 29 02:33.210 --> 02:36.840 how we can use EJS with Express. 30 02:36.990 --> 02:44.460 So I recommend reading through this as well as the documentation on ejs.co and then we can get 31 02:44.460 --> 02:46.030 started using it. 32 02:46.230 --> 02:51.430 So the first step to using anything is of course to install it with NPM. 33 02:51.720 --> 02:59.160 So let's head over to hyper.js, let's quit our server with Control + C and then we're going to NPM 34 02:59.220 --> 03:03.690 install our brand new EJS module. 35 03:03.690 --> 03:05.100 So now that's done 36 03:05.140 --> 03:12.220 and if we check inside our package.json, you can see we're now using EJS, Express and body-parser. 37 03:12.540 --> 03:20.950 So the next thing that we need to do is we need to set our apps view engine to ejs. 38 03:21.050 --> 03:28.410 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 03:28.470 --> 03:29.760 easiest to work with 40 03:29.790 --> 03:35.640 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 03:35.730 --> 03:37.670 Node developers will choose 42 03:37.680 --> 03:40.290 so you're definitely in good company. 43 03:40.320 --> 03:46.530 So the first thing we need to do is to tell our app to use EJS. So you can either copy this line 44 03:46.530 --> 03:52.960 of code or write it out but just make sure that you've typed this exactly as you see here. 45 03:52.980 --> 03:57.860 So there is a space between view and engine and they all lowercase. 46 03:57.870 --> 04:01.560 This is really important for your app to work. 47 04:01.560 --> 04:04.590 So I'm just going to go ahead and paste it in here. 48 04:04.860 --> 04:13.250 So this line of code tells our app which is generated using Express to use EJS as its view engine. 49 04:13.450 --> 04:19.530 And it's really important that you place this line of code below this one because if you try to place 50 04:19.530 --> 04:26.610 it above then at this point app doesn't exist yet and you will get errors telling you that app was used 51 04:26.640 --> 04:32.390 before it was declared so that a particular message that you can watch out for. 52 04:32.640 --> 04:38.050 So the usual place to put it is just below where you declared your new app constant. 53 04:38.640 --> 04:42.160 OK so let's check back here to see what else we need to do. 54 04:42.540 --> 04:49.070 So we've already got our app.listen set up and we've already got a app.get on our home route. 55 04:49.410 --> 04:55.490 And then inside the callback they're using a new method called res.render. 56 04:55.680 --> 05:02.290 And this uses the view engine that we set up here to render a particular page. 57 05:02.550 --> 05:10.940 So in this case we're rendering a page called index and that will be an index.ejs page. 58 05:11.280 --> 05:20.600 So up here it says that this code assumes that a views directory exists and it contains a index. 59 05:20.640 --> 05:22.510 ejs file. 60 05:22.530 --> 05:31.020 So in order to use EJS or pretty much any of the engines then we need to first create a new folder 61 05:31.140 --> 05:34.590 called views and it's all in lowercase. 62 05:34.800 --> 05:42.500 And this is where the view engine by default will go and look for the files that you're trying to render. 63 05:42.750 --> 05:50.040 So let's head over to our views folder and I'm going to create a new EJS file. Now instead of calling 64 05:50.040 --> 05:51.360 it index.ejs, 65 05:51.390 --> 05:56.950 I'm going to name it more relevant to our project, so I'm going to call that list.ejs. 66 05:57.120 --> 06:02.290 So this is going to be the base template to create all of our to do lists. 67 06:02.310 --> 06:08.370 So now inside this list.ejs file you're essentially writing HTML code. 68 06:08.400 --> 06:13.770 So let's head over to our index.html which we had before and I'm just going to copy all of the 69 06:13.770 --> 06:17.070 code into our list.ejs. 70 06:17.640 --> 06:22.750 So anything that is valid HTML will be valid for an EJS file. 71 06:22.770 --> 06:29.650 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 06:29.670 --> 06:39.750 Now my goal is to change this word here so that it will display the current day of the week. 73 06:39.960 --> 06:47.430 So for example today is a Thursday, so my h1 should say it's a Thursday, but tomorrow when I load up 74 06:47.430 --> 06:50.610 this page it should say it's a Friday. 75 06:50.820 --> 06:57.600 So I need to be able to essentially pass some information from my app.js file which is remember 76 06:57.600 --> 07:06.100 where all of the logic in the code gets executed and take the result of that logic to place it in here. 77 07:06.240 --> 07:12.840 So I should be able to check for the current day of the week and then to send that information over 78 07:12.840 --> 07:20.880 to my list.ejs and place that day of the week right here so that when I render this list.ejs, 79 07:21.080 --> 07:24.870 this h1 gets completed with the day of the week. 80 07:24.930 --> 07:28.740 So let's see how we can do that using EJS. 81 07:28.810 --> 07:35.730 Now if you take a look at their example, you can see that they're passing over a variable called foo 82 07:36.270 --> 07:39.580 and the value is just the word FOO 83 07:39.630 --> 07:41.100 in all caps. 84 07:41.100 --> 07:43.740 So we can do exactly the same thing. 85 07:43.890 --> 07:50.820 Now inside our list.ejs we're going to add a marker that's going to tell the file that this is 86 07:50.820 --> 07:53.670 where you should place a particular variable. 87 07:53.670 --> 07:59.320 Now the marker for EJS us looks like this. 88 07:59.490 --> 08:04.770 It's a angèle bracket, a percentage sign and then an equal sign 89 08:04.770 --> 08:11.640 and then inside there you're going to place your variable name and you complete the tag with again a 90 08:11.880 --> 08:15.140 percentage sign and a closing angle bracket. 91 08:15.390 --> 08:21.940 So this is a marker that tells the file to replace whatever is inside here 92 08:22.080 --> 08:24.370 with the value of the variable. 93 08:24.450 --> 08:31.080 So if inside our App.js we check to see whether if the current day was a Saturday or a Sunday, so 94 08:31.170 --> 08:36.270 we could create a variable called day that starts off being an empty string. 95 08:36.540 --> 08:43.170 And then later on if the current day was equal to a Saturday or a Sunday, then we can change this day 96 08:43.260 --> 08:52.950 into to say weekend but else if it's not a Saturday or Sunday then day will equal to weekday. 97 08:53.640 --> 09:00.980 And what we want to do is we want to be able to send this variable day over to our lists. 98 09:01.190 --> 09:02.000 ejs. 99 09:02.040 --> 09:05.950 So let's first place a marker for that variable. 100 09:06.210 --> 09:16.080 So as we saw before, we need to add a angle bracket and then a percentage sign and an equal sign and 101 09:16.080 --> 09:23.430 then we're going to have a closing tag that's comprised of a percentage sign and a closing angle bracket. 102 09:23.430 --> 09:31.790 And now inside here is where we can put in the variable name that we want to replace this marker with. 103 09:31.980 --> 09:37.500 So in our case I'm going to call it kindOfDay as in the kind of day. 104 09:37.650 --> 09:42.480 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 09:42.480 --> 09:44.090 this information through. 106 09:44.100 --> 09:50.500 So now instead of using res.send file, we're going to use the brand new method called res. 107 09:50.550 --> 09:55.040 render. And the page that we're going to render is of course our list. 108 09:55.190 --> 09:56.000 ejs 109 09:56.160 --> 09:59.670 and the variable that we pass in is going to be a Javascript object, 110 09:59.670 --> 10:07.900 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 10:08.230 --> 10:13.400 we call res.render and we render the file that is list. 112 10:13.450 --> 10:19.900 So when we write this, then Express is going to look inside a folder called views and it's going to look 113 10:19.900 --> 10:24.890 for a file that's called list and it has the extension of ejs. 114 10:24.910 --> 10:30.020 Now if you don't have this folder called views or if you don't have a file called list.ejs 115 10:30.100 --> 10:33.370 inside of views, then this line of code is not going to work. 116 10:33.370 --> 10:37.200 So this is a really important step, making that views folder. 117 10:37.480 --> 10:44.110 So we're going to render list and then we'll get a pass in a Javascript object which has a key value 118 10:44.110 --> 10:44.790 pair. 119 10:44.800 --> 10:50.620 Now the key in this case has to match with whatever you put in here. 120 10:50.800 --> 10:57.700 So you might as well go over here and COMMAND + C or CONTROL + C to copy that because it has to be written 121 10:57.760 --> 11:03.900 exactly the same with no spelling differences and no difference in capitalisation. 122 11:03.910 --> 11:08.470 So this is basically saying render a file called list 123 11:08.470 --> 11:13.420 and we're going to pass that file a variable called kindOfDay 124 11:13.690 --> 11:19.690 and the value is going to equal to whatever is the value of our current variable which is day. 125 11:19.870 --> 11:26.530 So to reiterate the process, we're creating our response by rendering a file called list which has to 126 11:26.530 --> 11:30.920 exist inside a views folder and has to have the extension. 127 11:31.090 --> 11:31.680 ejs. 128 11:32.110 --> 11:39.930 And then into that list file we're passing in a single variable that has the name of kindOfDay 129 11:40.240 --> 11:45.190 and the value that we're giving it is the value of our variable, day. 130 11:45.340 --> 11:52.040 So we can copy and paste this code so that exists in both the if and the else statement. 131 11:52.150 --> 11:58.870 But actually if you think about it, we can leave the IF and ELSE statement to do on logic namely change 132 11:58.870 --> 12:02.620 the variable day to whatever it is, weekend or weekday. 133 12:02.650 --> 12:09.910 And then after that IF-ELSE statement, we can add it just before we end our app.get route. So we can 134 12:09.910 --> 12:15.160 say res.render our list.ejs passing a variable called kindOfDay 135 12:15.430 --> 12:20.450 the value of which is equal to the value of our variable day. 136 12:20.470 --> 12:26.980 So that means that you can do a lot of logic and computation and processing and then only pass over 137 12:27.070 --> 12:31.950 the result of all of that logic to your template file. 138 12:31.960 --> 12:36.780 So let's hit save and let's go ahead and restart our server. 139 12:36.970 --> 12:45.400 So now if I refresh my page, then you'll see that I'm getting this being passed over to kindOfDay and 140 12:45.520 --> 12:49.270 which replaces this marker inside my template. 141 12:49.270 --> 12:56.070 Now what you'll commonly see when you see people using EJS templating and express is that they'll 142 12:56.080 --> 12:58.640 use the same name for the variable. 143 12:58.690 --> 13:02.600 So for example they'll use the variable name day over here 144 13:02.860 --> 13:08.970 and that means this also has to be day and you'll see day: day. 145 13:08.980 --> 13:15.400 Now this I find personally to be quite confusing because when you first look at it, you don't know whether 146 13:15.610 --> 13:20.030 this is equal to this or whether this is equal to this. 147 13:20.080 --> 13:27.040 So just to be aware that this is what most people will use when they're coding with Express and a templating 148 13:27.040 --> 13:27.780 engine, 149 13:27.910 --> 13:35.050 but to start with I recommend actually to use different variable names just to make it really clear 150 13:35.050 --> 13:37.520 to yourself what's actually going on. 151 13:37.600 --> 13:43.780 And as a challenge so that you can try this out and see if you can make it work, instead of just saying 152 13:43.840 --> 13:49.120 days equal to weekend or week day, I want you to write out the full seven days. 153 13:49.240 --> 13:55.700 So once you're done when we render this page, if it's a Thursday than it should say it's a Thursday. 154 13:55.810 --> 13:59.450 And if it's a Tuesday then it'll say it's a Tuesday. 155 13:59.680 --> 14:07.150 So pause the video now and see if you can change this code that you've currently got to render the current 156 14:07.150 --> 14:08.610 day of the week. 157 14:10.860 --> 14:11.220 All right. 158 14:11.230 --> 14:13.250 So this shouldn't be too difficult. 159 14:13.270 --> 14:18.000 The first thing we need to do is to check what day of the week it is. 160 14:18.040 --> 14:24.070 So you can see that with current day we only get a number and we have to turn that number into a piece 161 14:24.070 --> 14:27.990 of text that we're going to store inside this variable called day. 162 14:28.210 --> 14:34.150 Now some of you might have chosen to do this with IF and ELSE statements, others might have chosen to 163 14:34.150 --> 14:42.290 use a Switch statement but both ways work. I think as a rule of thumb, if you have more than five IF-ELSE 164 14:42.310 --> 14:48.550 statements, I tend to recommend to use a Switch statement and if you have less than five then it's probably 165 14:48.550 --> 14:51.880 more efficient to use IF and ELSE statements. 166 14:51.910 --> 14:58.990 So let's create our Switch statement and let's use our auto-complete to just add in all the parts that 167 14:58.990 --> 14:59.780 we need. 168 14:59.920 --> 15:04.760 So the expression that we're going to switch on is this variable called current day. 169 15:04.870 --> 15:07.760 This is going to be the one that has the numbers right? 170 15:07.780 --> 15:11.110 So we're going to switch on the value of current day 171 15:11.410 --> 15:19.180 and in the case where current day is equal to zero, then we're going to change the value of our variable 172 15:19.180 --> 15:21.550 day to the string 173 15:21.580 --> 15:23.150 that is Sunday. 174 15:23.350 --> 15:28.350 And then we have a break and that break will exit our switch statement. 175 15:28.680 --> 15:31.330 And now we can add a whole bunch of cases. 176 15:31.750 --> 15:34.300 So we should have seven in total. 177 15:34.300 --> 15:39.080 And let me just use the beautify shortcut to just get that straightened out. 178 15:39.260 --> 15:43.780 And now we can replace our cases. 179 15:43.980 --> 15:51.240 All right, so now we have our complete switch statement and we finally and the final thing that we need 180 15:51.240 --> 15:58.590 to do is to add a log statement or throw an error when our current day is not covered by any of these 181 15:58.590 --> 15:59.150 cases. 182 15:59.160 --> 16:05.320 Now this should never ever happen because there is no 8th day of the week. 183 16:05.490 --> 16:11.270 So this should never ever be triggered. But just in case we want to know what on earth is going on. 184 16:11.430 --> 16:22.000 So I'm going to say error current day is equal-- is equal to 185 16:25.510 --> 16:30.210 plus the value of current day that triggered this default case. 186 16:30.460 --> 16:34.490 So in most cases your default case should never ever be triggered. 187 16:34.660 --> 16:41.230 But if it does then it's a good idea to log the expression that caused that default case so that you 188 16:41.230 --> 16:44.990 can fix any bugs or anything that you overlooked. 189 16:45.220 --> 16:51.730 So now that we have added the switch statement that will change the value of day to whatever day it is 190 16:52.180 --> 17:00.160 and then we're going to pass the value of that over here and into this variable called kindOfDay which 191 17:00.160 --> 17:04.660 has to match with the one that we add in here inside the EJS marker 192 17:04.900 --> 17:09.600 and it will replace this entire marker with the value of day. 193 17:09.610 --> 17:16.180 So now if we hit save and we go ahead and refresh our local host then you can see that we get rendered 194 17:16.270 --> 17:23.230 the h1 which says it's a Thursday or some might know it as Thor's day, 195 17:23.230 --> 17:24.690 that guy with the hammer's day. 196 17:25.000 --> 17:31.530 So now you have created your very first template. And as you can imagine 197 17:31.570 --> 17:33.610 our code gets more complicated. 198 17:33.610 --> 17:41.460 We can pass over more and more variables which can-- which will flesh out our templates. In the next lesson 199 17:41.500 --> 17:49.110 we're going to look at another feature of templating which is the ability to run code inside the 200 17:49.110 --> 17:50.630 HTML file. 201 17:50.650 --> 17:53.530 So for all of that and more, I'll see you on the next lesson.