WEBVTT 0 00:01.360 --> 00:09.340 Now so far we've been using EJS to create templates that lets us create lots of pages that are very 1 00:09.340 --> 00:10.650 similar to each of them. 2 00:10.810 --> 00:13.300 For example lists with different titles. 3 00:13.360 --> 00:19.720 So every time that we open up our list on a different day we get a different title up here. 4 00:19.900 --> 00:21.410 Now we can change this also 5 00:21.580 --> 00:29.380 so that say if I were to go to our website say www.checklist and then I go to /work then 6 00:29.380 --> 00:34.590 I can make it such that we get a list that has a title that says work right? 7 00:34.810 --> 00:37.930 And we can do this really easily using our templates. 8 00:37.930 --> 00:45.610 So let's first go into our list and change this placeholder from kindOfDay to list title just so that 9 00:45.610 --> 00:51.700 it makes a little bit more sense when we're giving it a title such as work or home or something like that. 10 00:51.790 --> 00:54.930 And of course if we change it there we have to change it over here, 11 00:55.030 --> 00:56.910 so it's called a listTitle. 12 00:56.920 --> 01:03.610 Make sure that there's no typos. And we're passing in the current date when the user tries to access 13 01:03.880 --> 01:06.310 our lists in the home route. 14 01:06.310 --> 01:13.930 Now let's add another route. Let's say app.get and we're targeting the work route just so that we 15 01:13.930 --> 01:16.850 can provide a work to do list. 16 01:17.050 --> 01:24.250 So let's create our callback function and inside our callback function we're going to res.render 17 01:24.460 --> 01:32.800 our list.ejs page and then we're going to pass in a list title that is just going to be equal to 18 01:33.250 --> 01:35.200 work list. 19 01:35.590 --> 01:42.630 And then of course we have to pass in the second parameter as well which is called newListItems. 20 01:42.910 --> 01:46.490 And for our worklist you'll need a separate data store, 21 01:46.690 --> 01:51.860 so let's call it workItems and it's just going to start off being empty. 22 01:53.050 --> 02:01.870 So let's pass that along this workItems array and let's add our semicolons and then let's add our 23 02:01.950 --> 02:06.330 app.post route targets our work route. 24 02:06.580 --> 02:16.090 And inside here we're going to create a item that is going to capture the request.body.newItem. 25 02:16.180 --> 02:19.590 Then we're going to say workItems.push. 26 02:19.660 --> 02:26.560 We're going to push this newItem that the user added and then we're going to say res.redirect to 27 02:26.620 --> 02:31.140 our work route so that we go over to here. 28 02:31.390 --> 02:34.080 So let's hit save and let's give this a go. 29 02:34.420 --> 02:41.740 So we're going to head over to localhost:3000/work to access the work route and you can 30 02:41.740 --> 02:47.830 see that we've successfully managed to change the title to work list and we've got a brand new list 31 02:47.890 --> 02:49.920 that is currently completely empty. 32 02:50.230 --> 02:55.710 But there is a slight problem and this will occur when I add a new item. 33 02:55.720 --> 03:00.750 So let's say, 'Write essay' to add to our work list. 34 03:00.820 --> 03:10.660 Now when I press this Submit button, that 'Write essay' somehow gets added to our home list that's based 35 03:10.660 --> 03:11.950 off the date. 36 03:11.950 --> 03:19.720 And the reason is because when I pressed that submit button, my form makes a post request to the home 37 03:19.720 --> 03:28.790 route, so that then enters over here in the post route and we add an item in fact to our items array 38 03:29.140 --> 03:34.890 and we redirect to the home route and we render this page instead. 39 03:34.900 --> 03:35.920 So no matter 40 03:35.920 --> 03:43.590 we can change this quite easily by getting some information back from our post request. 41 03:43.660 --> 03:50.770 So at the moment inside this post request if you insert a console log which logs our request.body 42 03:51.400 --> 03:59.470 and we go ahead and go back over to our work list and we try to add a new item. 43 04:04.090 --> 04:06.210 And I press the submit button. 44 04:06.490 --> 04:14.620 Now if we take a look at the console you can see that what we've logged is a key called newItem that 45 04:14.620 --> 04:23.140 has the value of the item that we just added. But there's also this key called button and that relates to 46 04:23.200 --> 04:26.830 the name that we gave our submit button. 47 04:26.890 --> 04:29.880 It has a name of button. 48 04:30.100 --> 04:33.700 Now we can also give it a value. 49 04:33.790 --> 04:37.570 And if I give it a value let's just call it 'a value', 50 04:37.570 --> 04:44.620 if I go through this process again of adding a new item, you can see that what gets printed in our console 51 04:44.740 --> 04:52.900 is there is a key code button and it has a value of 'a value' which is what we added in here. 52 04:53.350 --> 05:00.490 So what we can do then is we can change the name of our submit button to list and we can change the 53 05:00.490 --> 05:04.490 value to something dynamic using EJS. 54 05:04.720 --> 05:09.660 So we can say the value is equal to something dynamic that we're going to insert here 55 05:09.880 --> 05:13.370 and we can change this to the list title. 56 05:13.540 --> 05:18.760 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 05:18.760 --> 05:20.190 the title. 58 05:20.200 --> 05:27.130 So now when I hit save and we try this again, we go over to /work, 59 05:27.130 --> 05:28.790 we add a new item 60 05:28.990 --> 05:34.780 then you can see that we can tap into something that's called list and we can get it's valued to figure 61 05:34.780 --> 05:41.620 out whether if our newItem was added in the work list or whether it was added in our default list. 62 05:41.620 --> 05:47.920 So now going back to our server, we can instead of console logging what we're getting from the request 63 05:47.920 --> 05:57.450 .body, we can create an IF statement. So we can say if request.body.list 64 05:57.490 --> 06:02.060 so remember that's the key over here so that we can tap into this value. 65 06:02.320 --> 06:09.700 If this is equal to the word work then in that case instead of pushing our items into the array items 66 06:10.040 --> 06:14.260 we're going to push it into our new array which is called to workItems. 67 06:14.530 --> 06:23.500 So let's first place this above our IF statement so we grab the item from the post request and if that 68 06:23.680 --> 06:31.000 request came from our work list then we're going to say workItems.push and we're going to push 69 06:31.120 --> 06:34.380 the item to that list instead. 70 06:34.660 --> 06:44.230 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 06:44.230 --> 06:47.650 going into res.redirect to our home route. 72 06:47.980 --> 06:57.430 But if it was in fact from the workList then we're going to res.redirect to our work route. 73 06:57.470 --> 07:05.150 So now in our app.post method we've got some logic in here that checks to see if the list that the 74 07:05.150 --> 07:11.840 new item came from was from the worklist and if it was then we're going to at that data item to the 75 07:11.840 --> 07:13.140 work items array 76 07:13.400 --> 07:19.820 and we're going to redirect to over here for the work route where we're going to render our list 77 07:19.850 --> 07:22.870 that is the work list from the work items. 78 07:22.880 --> 07:31.730 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 07:31.790 --> 07:38.720 added to our worklist and we have two separate lists now that operate independently from each other 80 07:38.900 --> 07:44.120 because we were able to implement some logic on our server that separates out the data. 81 07:44.120 --> 07:50.930 Now this is all very well and good and allows us to reuse a list.ejs template for as many different 82 07:50.930 --> 07:53.040 lists as we want to create. 83 07:53.330 --> 07:59.480 But the problem arises when we want to create pages that look dramatically different from this, when 84 07:59.480 --> 08:05.000 we don't really want a list and we don't want checkboxes we don't want submit button. Say if for our 85 08:05.000 --> 08:10.180 website we wanted to add a About page or a Contact Me page. 86 08:10.310 --> 08:12.350 Well that's not going to have the same content right? 87 08:12.350 --> 08:17.820 It's not going to have checkboxes or a submit buttons. But I still want it to have the same style. 88 08:18.020 --> 08:23.630 So I don't want to rewrite all of these parts and create separate pages. 89 08:23.630 --> 08:31.490 Well one way of doing this is we create a new file called about.html and then we go ahead 90 08:31.520 --> 08:33.940 and copy some of these parts 91 08:33.950 --> 08:42.770 for example the boilerplate and the CSS style sheet links and we copy the footer and we add some custom 92 08:42.770 --> 08:47.490 content. 93 08:47.720 --> 08:52.220 And now we have an About page. But would if we had more things that were repeated? 94 08:52.230 --> 08:58.380 So for example what if we had a footer that we wanted on every single page and this footer was going 95 08:58.380 --> 09:01.170 to have some copyright text for example. 96 09:01.170 --> 09:10.620 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 09:10.620 --> 09:11.270 here. 98 09:11.400 --> 09:18.930 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 09:18.930 --> 09:20.370 it for some pages. 100 09:20.370 --> 09:23.440 So this is not a great way of implementing it. 101 09:23.640 --> 09:29.670 So in fact I'm going to delete our about.html page that we just created and I'm going to show 102 09:29.670 --> 09:31.660 you a better way of doing this. 103 09:31.670 --> 09:38.250 So EJS allows to create something called layouts or partials and you can see that if you scroll 104 09:38.250 --> 09:41.510 down to the layouts section. 105 09:41.790 --> 09:48.320 So it says that layouts can be implemented by including headers and footers like so. 106 09:48.540 --> 09:56.190 So we're basically saying here is the body of our content of the page and the top and the bottom part 107 09:56.280 --> 09:59.850 are going to stay consistent across our website. 108 10:00.060 --> 10:06.720 Now this is very very common behavior because in most sites, you have a standardized look and feel, you 109 10:06.720 --> 10:11.570 have the same sort of styles applied everywhere the same background colors etc. 110 10:11.790 --> 10:15.010 So let's see how we can implement these layouts. Now 111 10:15.060 --> 10:21.110 let's go into our views folder and we're going to create a new file called header.ejs 112 10:21.390 --> 10:23.500 and also one called footer. 113 10:23.560 --> 10:24.160 ejs. 114 10:26.770 --> 10:32.510 Now these two files are going to be added to all the new files that we create. 115 10:32.530 --> 10:37.990 So instead of having all of this part which is going to be repeated across all of our websites, I'm 116 10:37.990 --> 10:43.840 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 10:43.840 --> 10:46.400 going to paste it into footer.ejs. 118 10:46.750 --> 10:48.800 So now I have a header and footer that 119 10:48.820 --> 10:56.420 I'm going to apply across all of my web pages and I can do that exactly as they've specified over here. 120 10:56.560 --> 11:00.270 So let's go ahead and add that code at the top here. 121 11:00.460 --> 11:02.470 So the keyword is include 122 11:02.590 --> 11:06.790 and then we have some parentheses to tell it what to include. 123 11:07.000 --> 11:09.660 And in our case the file is called header. 124 11:09.730 --> 11:16.660 So all we need to do is put the word header in between some quotation marks. And then we close this off 125 11:16.750 --> 11:24.290 with a hyphen, percentage sign and a closing angle bracket and we can do the same thing down here for 126 11:24.300 --> 11:25.300 our footer. 127 11:25.430 --> 11:29.520 And instead just change the file to the footer.ejs. 128 11:29.530 --> 11:34.950 So now if you refreshed the To Do list, you can see that absolutely nothing has changed. 129 11:35.050 --> 11:42.100 But if I go ahead and create a new view and let's call this about.ejs. And I'm simply going to 130 11:42.100 --> 11:49.570 have an h2 in here that says, 'This is the about page' and then I'm going to have a paragraph with lots 131 11:49.570 --> 11:50.420 and lots of text. 132 11:53.350 --> 12:02.330 And let's create a get route: app.get/ targeting the about route and then we have our callback function. 133 12:02.440 --> 12:09.590 And here we're going res.render our About page. And this about page takes no parameters 134 12:09.700 --> 12:12.020 so that's all we need to add. 135 12:12.210 --> 12:19.200 And now if I hit save and I head over to the About page then you can see that this is completely un 136 12:19.240 --> 12:24.660 styled and this is what my page would look like if I didn't add any of those layouts. 137 12:24.790 --> 12:30.140 So now it's time to add those layouts and you've seen how we did it inside list.ejs. 138 12:30.340 --> 12:38.320 So I want you to pause the video and add the header and footer to the about.ejs page as well. 139 12:38.320 --> 12:40.140 All right so this is pretty simple. 140 12:40.150 --> 12:43.090 We're just going to use the tag that is open 141 12:43.090 --> 12:48.160 angle bracket, percentage sign, hyphen and then we're going to say include and then we're going to 142 12:48.160 --> 12:51.220 tell it what to include which is the file called header. 143 12:51.580 --> 12:59.410 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 13:00.370 --> 13:07.420 So now when we refresh our page, bam! it's got the same styling that we're used to from our previous pages 145 13:07.870 --> 13:11.510 and we didn't have to repeat very much code at all. 146 13:11.530 --> 13:17.800 And so now every time we create a new page even if it looks dramatically different from our To Do List, 147 13:18.220 --> 13:25.980 we can use our header and footer layouts to style up our website and include our Javascript or j 148 13:26.070 --> 13:29.330 Query, all our assets or anything like that. 149 13:29.500 --> 13:35.020 And this makes it super easy to create a large website with many different pages.