0 1 00:00:01,140 --> 00:00:08,550 Now in the last lesson, we spoke about why we need to create templates when we're creating websites 1 2 00:00:08,730 --> 00:00:11,570 that have very similar content to each other. 2 3 00:00:11,670 --> 00: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 4 00:00:18,120 --> 00:00:22,460 Sunday then we could send different HTML files 4 5 00:00:22,590 --> 00:00:26,440 so one that is weekend.html that says, 'It's the weekend! 5 6 00:00:26,460 --> 00:00:27,830 Why are you working!' 6 7 00:00:28,050 --> 00: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 8 00:00:35,250 --> 00:00:38,340 Why are you not working!' Now 8 9 00:00:38,580 --> 00:00:40,800 this works to some extent 9 10 00:00:40,800 --> 00: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 11 00:00:46,980 --> 00:00:47,930 day of the week 11 12 00:00:47,970 --> 00: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 13 00:00:56,250 --> 00:01:01,820 worse if you are creating a blog post or in our case we're creating a to do list. 13 14 00:01:01,920 --> 00: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 15 00:01:09,630 --> 00:01:14,520 need to create a new HTML page for every single one of those lists 15 16 00:01:14,700 --> 00:01:20,390 even though the actual content of each of the lists of really really similar. 16 17 00:01:20,490 --> 00:01:22,840 So that's where we got up to in the last lesson. 17 18 00:01:22,860 --> 00:01:28,860 So now hopefully you understand why we need to think about templates and templating. 18 19 00:01:29,040 --> 00:01:35,080 But in this lesson we're going to tackle the how. How do we exactly go about making a template? 19 20 00:01:35,400 --> 00: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 21 00:01:40,470 --> 00:01:44,380 called EJS or Embedded JavaScript Templating. 21 22 00:01:44,580 --> 00:01:45,680 So if you head over-- 22 23 00:01:45,690 --> 00:01:52,840 So as always whenever you using a new piece of technology the best place to start with is the documentation. 23 24 00:01:52,890 --> 00: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 25 00:01:59,820 --> 00:02:07,350 to use it and a whole bunch of documentation on how this templating software will help you. 25 26 00:02:07,620 --> 00: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 27 00:02:15,570 --> 00:02:19,020 to us because that's pretty much exactly what we're doing right? 27 28 00:02:19,020 --> 00:02:26,020 We're using Express to build our app and our server and we're going to use EJS with it. 28 29 00:02:26,040 --> 00: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 30 00:02:33,210 --> 00:02:36,840 how we can use EJS with Express. 30 31 00:02:36,990 --> 00:02:44,460 So I recommend reading through this as well as the documentation on ejs.co and then we can get 31 32 00:02:44,460 --> 00:02:46,030 started using it. 32 33 00:02:46,230 --> 00:02:51,430 So the first step to using anything is of course to install it with NPM. 33 34 00:02:51,720 --> 00: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 35 00:02:59,220 --> 00:03:03,690 install our brand new EJS module. 35 36 00:03:03,690 --> 00:03:05,100 So now that's done 36 37 00:03:05,140 --> 00:03:12,220 and if we check inside our package.json, you can see we're now using EJS, Express and body-parser. 37 38 00:03:12,540 --> 00:03:20,950 So the next thing that we need to do is we need to set our apps view engine to ejs. 38 39 00:03:21,050 --> 00: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 40 00:03:28,470 --> 00:03:29,760 easiest to work with 40 41 00:03:29,790 --> 00: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 42 00:03:35,730 --> 00:03:37,670 Node developers will choose 42 43 00:03:37,680 --> 00:03:40,290 so you're definitely in good company. 43 44 00:03:40,320 --> 00: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 45 00:03:46,530 --> 00:03:52,960 of code or write it out but just make sure that you've typed this exactly as you see here. 45 46 00:03:52,980 --> 00:03:57,860 So there is a space between view and engine and they all lowercase. 46 47 00:03:57,870 --> 00:04:01,560 This is really important for your app to work. 47 48 00:04:01,560 --> 00:04:04,590 So I'm just going to go ahead and paste it in here. 48 49 00:04:04,860 --> 00:04:13,250 So this line of code tells our app which is generated using Express to use EJS as its view engine. 49 50 00:04:13,450 --> 00: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 51 00:04:19,530 --> 00: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 52 00:04:26,640 --> 00:04:32,390 before it was declared so that a particular message that you can watch out for. 52 53 00:04:32,640 --> 00:04:38,050 So the usual place to put it is just below where you declared your new app constant. 53 54 00:04:38,640 --> 00:04:42,160 OK so let's check back here to see what else we need to do. 54 55 00:04:42,540 --> 00: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 56 00:04:49,410 --> 00:04:55,490 And then inside the callback they're using a new method called res.render. 56 57 00:04:55,680 --> 00:05:02,290 And this uses the view engine that we set up here to render a particular page. 57 58 00:05:02,550 --> 00:05:10,940 So in this case we're rendering a page called index and that will be an index.ejs page. 58 59 00:05:11,280 --> 00:05:20,600 So up here it says that this code assumes that a views directory exists and it contains a index. 59 60 00:05:20,640 --> 00:05:22,510 ejs file. 60 61 00:05:22,530 --> 00: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 62 00:05:31,140 --> 00:05:34,590 called views and it's all in lowercase. 62 63 00:05:34,800 --> 00: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 64 00:05:42,750 --> 00: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 65 00:05:50,040 --> 00:05:51,360 it index.ejs, 65 66 00:05:51,390 --> 00:05:56,950 I'm going to name it more relevant to our project, so I'm going to call that list.ejs. 66 67 00:05:57,120 --> 00:06:02,290 So this is going to be the base template to create all of our to do lists. 67 68 00:06:02,310 --> 00:06:08,370 So now inside this list.ejs file you're essentially writing HTML code. 68 69 00:06:08,400 --> 00: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 70 00:06:13,770 --> 00:06:17,070 code into our list.ejs. 70 71 00:06:17,640 --> 00:06:22,750 So anything that is valid HTML will be valid for an EJS file. 71 72 00:06:22,770 --> 00: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 73 00:06:29,670 --> 00:06:39,750 Now my goal is to change this word here so that it will display the current day of the week. 73 74 00:06:39,960 --> 00: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 75 00:06:47,430 --> 00:06:50,610 this page it should say it's a Friday. 75 76 00:06:50,820 --> 00:06:57,600 So I need to be able to essentially pass some information from my app.js file which is remember 76 77 00:06:57,600 --> 00: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 78 00:07:06,240 --> 00: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 79 00:07:12,840 --> 00: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 80 00:07:21,080 --> 00:07:24,870 this h1 gets completed with the day of the week. 80 81 00:07:24,930 --> 00:07:28,740 So let's see how we can do that using EJS. 81 82 00:07:28,810 --> 00: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 83 00:07:36,270 --> 00:07:39,580 and the value is just the word FOO 83 84 00:07:39,630 --> 00:07:41,100 in all caps. 84 85 00:07:41,100 --> 00:07:43,740 So we can do exactly the same thing. 85 86 00:07:43,890 --> 00: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 87 00:07:50,820 --> 00:07:53,670 where you should place a particular variable. 87 88 00:07:53,670 --> 00:07:59,320 Now the marker for EJS us looks like this. 88 89 00:07:59,490 --> 00:08:04,770 It's a angèle bracket, a percentage sign and then an equal sign 89 90 00:08:04,770 --> 00:08:11,640 and then inside there you're going to place your variable name and you complete the tag with again a 90 91 00:08:11,880 --> 00:08:15,140 percentage sign and a closing angle bracket. 91 92 00:08:15,390 --> 00:08:21,940 So this is a marker that tells the file to replace whatever is inside here 92 93 00:08:22,080 --> 00:08:24,370 with the value of the variable. 93 94 00:08:24,450 --> 00: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 95 00:08:31,170 --> 00:08:36,270 we could create a variable called day that starts off being an empty string. 95 96 00:08:36,540 --> 00: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 97 00:08:43,260 --> 00:08:52,950 into to say weekend but else if it's not a Saturday or Sunday then day will equal to weekday. 97 98 00:08:53,640 --> 00: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 99 00:09:01,190 --> 00:09:02,000 ejs. 99 100 00:09:02,040 --> 00:09:05,950 So let's first place a marker for that variable. 100 101 00:09:06,210 --> 00: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 102 00:09:16,080 --> 00: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 103 00:09:23,430 --> 00: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 104 00:09:31,980 --> 00:09:37,500 So in our case I'm going to call it kindOfDay as in the kind of day. 104 105 00:09:37,650 --> 00: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 106 00:09:42,480 --> 00:09:44,090 this information through. 106 107 00:09:44,100 --> 00:09:50,500 So now instead of using res.send file, we're going to use the brand new method called res. 107 108 00:09:50,550 --> 00:09:55,040 render. And the page that we're going to render is of course our list. 108 109 00:09:55,190 --> 00:09:56,000 ejs 109 110 00:09:56,160 --> 00:09:59,670 and the variable that we pass in is going to be a Javascript object, 110 111 00:09:59,670 --> 00: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 112 00:10:08,230 --> 00:10:13,400 we call res.render and we render the file that is list. 112 113 00:10:13,450 --> 00: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 114 00:10:19,900 --> 00:10:24,890 for a file that's called list and it has the extension of ejs. 114 115 00:10:24,910 --> 00: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 116 00:10:30,100 --> 00:10:33,370 inside of views, then this line of code is not going to work. 116 117 00:10:33,370 --> 00:10:37,200 So this is a really important step, making that views folder. 117 118 00:10:37,480 --> 00: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 119 00:10:44,110 --> 00:10:44,790 pair. 119 120 00:10:44,800 --> 00:10:50,620 Now the key in this case has to match with whatever you put in here. 120 121 00:10:50,800 --> 00: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 122 00:10:57,760 --> 00:11:03,900 exactly the same with no spelling differences and no difference in capitalisation. 122 123 00:11:03,910 --> 00:11:08,470 So this is basically saying render a file called list 123 124 00:11:08,470 --> 00:11:13,420 and we're going to pass that file a variable called kindOfDay 124 125 00:11:13,690 --> 00:11:19,690 and the value is going to equal to whatever is the value of our current variable which is day. 125 126 00:11:19,870 --> 00:11:26,530 So to reiterate the process, we're creating our response by rendering a file called list which has to 126 127 00:11:26,530 --> 00:11:30,920 exist inside a views folder and has to have the extension. 127 128 00:11:31,090 --> 00:11:31,680 ejs. 128 129 00:11:32,110 --> 00:11:39,930 And then into that list file we're passing in a single variable that has the name of kindOfDay 129 130 00:11:40,240 --> 00:11:45,190 and the value that we're giving it is the value of our variable, day. 130 131 00:11:45,340 --> 00:11:52,040 So we can copy and paste this code so that exists in both the if and the else statement. 131 132 00:11:52,150 --> 00: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 133 00:11:58,870 --> 00:12:02,620 the variable day to whatever it is, weekend or weekday. 133 134 00:12:02,650 --> 00: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 135 00:12:09,910 --> 00:12:15,160 say res.render our list.ejs passing a variable called kindOfDay 135 136 00:12:15,430 --> 00:12:20,450 the value of which is equal to the value of our variable day. 136 137 00:12:20,470 --> 00:12:26,980 So that means that you can do a lot of logic and computation and processing and then only pass over 137 138 00:12:27,070 --> 00:12:31,950 the result of all of that logic to your template file. 138 139 00:12:31,960 --> 00:12:36,780 So let's hit save and let's go ahead and restart our server. 139 140 00:12:36,970 --> 00: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 141 00:12:45,520 --> 00:12:49,270 which replaces this marker inside my template. 141 142 00:12:49,270 --> 00:12:56,070 Now what you'll commonly see when you see people using EJS templating and express is that they'll 142 143 00:12:56,080 --> 00:12:58,640 use the same name for the variable. 143 144 00:12:58,690 --> 00:13:02,600 So for example they'll use the variable name day over here 144 145 00:13:02,860 --> 00:13:08,970 and that means this also has to be day and you'll see day: day. 145 146 00:13:08,980 --> 00: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 147 00:13:15,610 --> 00:13:20,030 this is equal to this or whether this is equal to this. 147 148 00:13:20,080 --> 00: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 149 00:13:27,040 --> 00:13:27,780 engine, 149 150 00:13:27,910 --> 00:13:35,050 but to start with I recommend actually to use different variable names just to make it really clear 150 151 00:13:35,050 --> 00:13:37,520 to yourself what's actually going on. 151 152 00:13:37,600 --> 00: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 153 00:13:43,840 --> 00:13:49,120 days equal to weekend or week day, I want you to write out the full seven days. 153 154 00:13:49,240 --> 00: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 155 00:13:55,810 --> 00:13:59,450 And if it's a Tuesday then it'll say it's a Tuesday. 155 156 00:13:59,680 --> 00: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 157 00:14:07,150 --> 00:14:08,610 day of the week. 157 158 00:14:10,860 --> 00:14:11,220 All right. 158 159 00:14:11,230 --> 00:14:13,250 So this shouldn't be too difficult. 159 160 00:14:13,270 --> 00:14:18,000 The first thing we need to do is to check what day of the week it is. 160 161 00:14:18,040 --> 00: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 162 00:14:24,070 --> 00:14:27,990 of text that we're going to store inside this variable called day. 162 163 00:14:28,210 --> 00:14:34,150 Now some of you might have chosen to do this with IF and ELSE statements, others might have chosen to 163 164 00:14:34,150 --> 00: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 165 00:14:42,310 --> 00: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 166 00:14:48,550 --> 00:14:51,880 more efficient to use IF and ELSE statements. 166 167 00:14:51,910 --> 00: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 168 00:14:58,990 --> 00:14:59,780 we need. 168 169 00:14:59,920 --> 00:15:04,760 So the expression that we're going to switch on is this variable called current day. 169 170 00:15:04,870 --> 00:15:07,760 This is going to be the one that has the numbers right? 170 171 00:15:07,780 --> 00:15:11,110 So we're going to switch on the value of current day 171 172 00:15:11,410 --> 00: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 173 00:15:19,180 --> 00:15:21,550 day to the string 173 174 00:15:21,580 --> 00:15:23,150 that is Sunday. 174 175 00:15:23,350 --> 00:15:28,350 And then we have a break and that break will exit our switch statement. 175 176 00:15:28,680 --> 00:15:31,330 And now we can add a whole bunch of cases. 176 177 00:15:31,750 --> 00:15:34,300 So we should have seven in total. 177 178 00:15:34,300 --> 00:15:39,080 And let me just use the beautify shortcut to just get that straightened out. 178 179 00:15:39,260 --> 00:15:43,780 And now we can replace our cases. 179 180 00:15:43,980 --> 00:15:51,240 All right, so now we have our complete switch statement and we finally and the final thing that we need 180 181 00:15:51,240 --> 00: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 182 00:15:58,590 --> 00:15:59,150 cases. 182 183 00:15:59,160 --> 00:16:05,320 Now this should never ever happen because there is no 8th day of the week. 183 184 00:16:05,490 --> 00: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 185 00:16:11,430 --> 00:16:22,000 So I'm going to say error current day is equal-- is equal to 185 186 00:16:25,510 --> 00:16:30,210 plus the value of current day that triggered this default case. 186 187 00:16:30,460 --> 00:16:34,490 So in most cases your default case should never ever be triggered. 187 188 00:16:34,660 --> 00: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 189 00:16:41,230 --> 00:16:44,990 can fix any bugs or anything that you overlooked. 189 190 00:16:45,220 --> 00: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 191 00:16:52,180 --> 00:17:00,160 and then we're going to pass the value of that over here and into this variable called kindOfDay which 191 192 00:17:00,160 --> 00:17:04,660 has to match with the one that we add in here inside the EJS marker 192 193 00:17:04,900 --> 00:17:09,600 and it will replace this entire marker with the value of day. 193 194 00:17:09,610 --> 00: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 195 00:17:16,270 --> 00:17:23,230 the h1 which says it's a Thursday or some might know it as Thor's day, 195 196 00:17:23,230 --> 00:17:24,690 that guy with the hammer's day. 196 197 00:17:25,000 --> 00:17:31,530 So now you have created your very first template. And as you can imagine 197 198 00:17:31,570 --> 00:17:33,610 our code gets more complicated. 198 199 00:17:33,610 --> 00:17:41,460 We can pass over more and more variables which can-- which will flesh out our templates. In the next lesson 199 200 00:17:41,500 --> 00:17:49,110 we're going to look at another feature of templating which is the ability to run code inside the 200 201 00:17:49,110 --> 00:17:50,630 HTML file. 201 202 00:17:50,650 --> 00:17:53,530 So for all of that and more, I'll see you on the next lesson.