1 00:00:02,029 --> 00:00:04,480 So it's time to add a couple of views. 2 00:00:04,480 --> 00:00:08,150 And for this, I will again use the EJS view engine, 3 00:00:08,150 --> 00:00:10,134 which is the view engine we've been using 4 00:00:10,134 --> 00:00:11,730 throughout this course, 5 00:00:11,730 --> 00:00:13,890 which is one of the supported view engines 6 00:00:13,890 --> 00:00:16,730 you can use in your Node Express apps. 7 00:00:16,730 --> 00:00:18,990 It's an extra package that allows us 8 00:00:18,990 --> 00:00:22,900 to write HTML code with extra features 9 00:00:22,900 --> 00:00:24,240 and placeholders, 10 00:00:24,240 --> 00:00:27,130 which will be evaluated on the server site 11 00:00:27,130 --> 00:00:31,630 before the finished HTML code is served to our visitors 12 00:00:31,630 --> 00:00:33,180 and which therefore allow us 13 00:00:33,180 --> 00:00:37,890 to enrich our HTML pages with dynamic content. 14 00:00:37,890 --> 00:00:39,759 Hence, I'll open the terminal again 15 00:00:39,759 --> 00:00:44,759 and run NPM Install EJS to install this EJS package, 16 00:00:45,640 --> 00:00:48,683 this template engine package into this project. 17 00:00:49,840 --> 00:00:50,880 And then app.js, 18 00:00:50,880 --> 00:00:53,400 we now need to activate this package. 19 00:00:53,400 --> 00:00:56,430 We need to make Express.js aware of the fact 20 00:00:56,430 --> 00:00:59,773 that we wanna use EJS for handling our templates. 21 00:01:00,810 --> 00:01:03,106 For this in-app JS, here, 22 00:01:03,106 --> 00:01:06,110 after defining this app object, 23 00:01:06,110 --> 00:01:10,080 we can call app.set to set some options 24 00:01:10,080 --> 00:01:12,190 for this express app. 25 00:01:12,190 --> 00:01:14,480 And here I wanna set two options. 26 00:01:14,480 --> 00:01:17,690 The first option is the view engine option, 27 00:01:17,690 --> 00:01:20,560 and that's a string you have to use here. 28 00:01:20,560 --> 00:01:23,990 That is a option express we'll look for, 29 00:01:23,990 --> 00:01:25,770 and I'll set it to EJS 30 00:01:25,770 --> 00:01:29,140 to tell Express that I wanna use the EJS package 31 00:01:29,140 --> 00:01:31,233 for rendering my views. 32 00:01:32,510 --> 00:01:34,890 The second option I will set here is, 33 00:01:34,890 --> 00:01:39,890 the option to tell Express where to find my views. 34 00:01:40,140 --> 00:01:43,010 So that option's named views. 35 00:01:43,010 --> 00:01:45,140 And the value for this option, 36 00:01:45,140 --> 00:01:48,690 so the second parameter value I pass to set here 37 00:01:48,690 --> 00:01:51,163 is a path to my views. 38 00:01:52,090 --> 00:01:53,880 Now for constructing this path, 39 00:01:53,880 --> 00:01:57,610 it is recommended that you use the built-in path package. 40 00:01:57,610 --> 00:01:59,130 We don't need to install that 41 00:01:59,130 --> 00:02:01,820 because it's built into Node.js already, 42 00:02:01,820 --> 00:02:04,150 because this allows us to create a path 43 00:02:04,150 --> 00:02:07,743 that will be recognized on all operating systems. 44 00:02:09,070 --> 00:02:11,990 And on this path package which I'm now importing. 45 00:02:11,990 --> 00:02:16,340 We can call the join method to create an absolute path, 46 00:02:16,340 --> 00:02:18,310 which will be correctly formatted 47 00:02:18,310 --> 00:02:20,950 for different operating systems 48 00:02:20,950 --> 00:02:24,740 to a folder in this project of our choice. 49 00:02:24,740 --> 00:02:25,573 And for this, 50 00:02:25,573 --> 00:02:28,890 I wanna start with a path to the overall project folder 51 00:02:28,890 --> 00:02:33,010 and NodeJS has a built in global variable for that, 52 00:02:33,010 --> 00:02:36,350 the __dirname variable, 53 00:02:36,350 --> 00:02:39,770 which is simply a path to this project folder. 54 00:02:39,770 --> 00:02:43,180 And then as a second parameter value to join 55 00:02:43,180 --> 00:02:45,180 I'll pass in views. 56 00:02:45,180 --> 00:02:47,860 To construct an absolute path to 57 00:02:47,860 --> 00:02:50,723 this views folder in this project. 58 00:02:52,750 --> 00:02:54,630 And with that, we make express aware 59 00:02:54,630 --> 00:02:56,040 off that views folder 60 00:02:56,040 --> 00:02:57,580 and that the views in there 61 00:02:57,580 --> 00:03:01,143 should be handled by EJS templating package. 62 00:03:02,250 --> 00:03:06,920 So therefore now as a next step here in the views auth, 63 00:03:06,920 --> 00:03:08,640 I'll add two files, 64 00:03:08,640 --> 00:03:10,967 a signup.ejs file, 65 00:03:10,967 --> 00:03:13,840 .ejs since that is the extension. 66 00:03:13,840 --> 00:03:16,430 the EJS package we'll look for 67 00:03:16,430 --> 00:03:17,633 and login.ejs. 68 00:03:19,650 --> 00:03:23,000 Now these files should display different forums 69 00:03:23,000 --> 00:03:25,890 for allowing users to create accounts 70 00:03:25,890 --> 00:03:28,300 and allowing users to log in, 71 00:03:28,300 --> 00:03:31,850 but they will also have some parts in common. 72 00:03:31,850 --> 00:03:35,910 Now for example, the main navigation bar should be the same. 73 00:03:35,910 --> 00:03:38,710 Also the head metadata should be the same, 74 00:03:38,710 --> 00:03:40,693 at least partially the same. 75 00:03:41,570 --> 00:03:42,790 And you'll learn before 76 00:03:42,790 --> 00:03:45,760 that we can leverage a feature called Includes 77 00:03:45,760 --> 00:03:47,660 when working with EJS, 78 00:03:47,660 --> 00:03:49,670 to reuse code 79 00:03:49,670 --> 00:03:52,510 or to outsource code into different files, 80 00:03:52,510 --> 00:03:57,350 and then use it in as many other EJS files as we want to. 81 00:03:57,350 --> 00:04:01,600 And I will create such commonly shared EJS includes, 82 00:04:01,600 --> 00:04:05,890 but I will not just use them in sign up and log in, 83 00:04:05,890 --> 00:04:08,220 but instead, also later in my cart 84 00:04:08,220 --> 00:04:11,340 and products related views. 85 00:04:11,340 --> 00:04:13,410 And therefore I will create a new folder 86 00:04:13,410 --> 00:04:14,692 in the views folder, 87 00:04:14,692 --> 00:04:18,060 which I'll name customer, 88 00:04:18,060 --> 00:04:21,390 and in there I wanna have some general views 89 00:04:21,390 --> 00:04:23,410 or includes that will be used 90 00:04:23,410 --> 00:04:28,380 in all the customer facing parts off this site. 91 00:04:28,380 --> 00:04:30,210 I already have an admin folder 92 00:04:30,210 --> 00:04:33,050 for the admin specific views we'll need later. 93 00:04:33,050 --> 00:04:36,460 Here I wanna have customer specific views 94 00:04:36,460 --> 00:04:39,850 and in customer I'll add a includes folder. 95 00:04:39,850 --> 00:04:42,360 And in there I wanna have all the includes 96 00:04:42,360 --> 00:04:47,180 that will be used in my different customer facing views. 97 00:04:47,180 --> 00:04:48,090 And now with that, 98 00:04:48,090 --> 00:04:51,220 it also makes sense to take the auth, cart 99 00:04:51,220 --> 00:04:52,430 and products folders 100 00:04:52,430 --> 00:04:54,933 and move those into the customer folder, 101 00:04:56,160 --> 00:04:58,740 so that we now actually have admin and customer 102 00:04:58,740 --> 00:05:01,520 as a root folders in the views folder. 103 00:05:01,520 --> 00:05:05,640 And then we have the feature sub folders in customer, 104 00:05:05,640 --> 00:05:09,063 and we have the includes folder for any shared views 105 00:05:09,063 --> 00:05:12,600 that we wanna use in different features. 106 00:05:12,600 --> 00:05:15,920 And in this includes folder in the customer folder, 107 00:05:15,920 --> 00:05:19,990 I will now add my shared templates 108 00:05:19,990 --> 00:05:23,850 and that will be the head EJS file for the head element 109 00:05:23,850 --> 00:05:25,970 and some shared metadata 110 00:05:25,970 --> 00:05:29,660 and header.ejs for the shared header, 111 00:05:29,660 --> 00:05:31,933 which will also hold the navigation. 112 00:05:33,710 --> 00:05:37,520 And let's now maybe start with head.ejs. 113 00:05:37,520 --> 00:05:42,060 In head.ejs I wanna set up a base skeleton. 114 00:05:42,060 --> 00:05:44,420 For this all type exclamation mark here. 115 00:05:44,420 --> 00:05:46,480 And I get the built in all the completion 116 00:05:46,480 --> 00:05:47,860 and visuals to do code, 117 00:05:47,860 --> 00:05:50,423 to get this base HTML skeleton. 118 00:05:51,410 --> 00:05:54,010 Now, I don't wanna have the full skeleton in here, 119 00:05:54,010 --> 00:05:59,010 just the doc type and the opening HTML and head text. 120 00:05:59,430 --> 00:06:01,337 I will remove the closing head tag 121 00:06:01,337 --> 00:06:03,440 and all the other part below that 122 00:06:03,440 --> 00:06:05,710 because I just wanna use this here 123 00:06:05,710 --> 00:06:08,940 as a part of my other main views, 124 00:06:08,940 --> 00:06:13,490 so that here we have some shared meta setup logic. 125 00:06:13,490 --> 00:06:16,250 Now we can leave the default setup here. 126 00:06:16,250 --> 00:06:19,130 I just wanna make the title dynamic 127 00:06:19,130 --> 00:06:22,320 and for this all use a EJS feature, 128 00:06:22,320 --> 00:06:24,090 a EJS tag, 129 00:06:24,090 --> 00:06:26,190 and you learned that you create those tags 130 00:06:26,190 --> 00:06:28,710 with the smaller than percentage 131 00:06:28,710 --> 00:06:32,120 and percentage greater sign symbols. 132 00:06:32,120 --> 00:06:34,860 And I wanna output the page title here 133 00:06:34,860 --> 00:06:36,610 and there with the equal sign, 134 00:06:36,610 --> 00:06:39,320 that is the EJS tag we can use 135 00:06:39,320 --> 00:06:41,960 for straight outputting values 136 00:06:41,960 --> 00:06:44,733 in the finished rendered HTML coat. 137 00:06:45,710 --> 00:06:46,810 And the idea is, 138 00:06:46,810 --> 00:06:48,850 that we can then set the page title 139 00:06:48,850 --> 00:06:50,660 from inside other views, 140 00:06:50,660 --> 00:06:53,600 which include this head the view here, 141 00:06:53,600 --> 00:06:56,063 or this head template to be precise. 142 00:06:57,320 --> 00:06:59,980 Now we are going to add more things 143 00:06:59,980 --> 00:07:01,690 to this head EJS file, 144 00:07:01,690 --> 00:07:03,600 for example, some Google funds, 145 00:07:03,600 --> 00:07:06,010 but for the moment I'll save it and close it. 146 00:07:06,010 --> 00:07:08,490 And instead work on header.ejs 147 00:07:08,490 --> 00:07:10,700 and in there all create a header, 148 00:07:10,700 --> 00:07:14,010 so the header HTML element like this. 149 00:07:14,010 --> 00:07:14,843 And in there, 150 00:07:14,843 --> 00:07:16,760 we can then set up the different parts 151 00:07:16,760 --> 00:07:18,430 that should make up this header, 152 00:07:18,430 --> 00:07:20,180 and we'll add styling later. 153 00:07:20,180 --> 00:07:21,013 But for the moment, 154 00:07:21,013 --> 00:07:24,490 I'll just add a div in here with my logo 155 00:07:24,490 --> 00:07:25,470 and I'll name it 156 00:07:25,470 --> 00:07:29,120 WDE for web developer essentials. 157 00:07:29,120 --> 00:07:30,090 That's my shop. 158 00:07:30,090 --> 00:07:32,560 I'm selling web developer essentials. 159 00:07:32,560 --> 00:07:34,080 So that's my shop name. 160 00:07:34,080 --> 00:07:36,440 Of course feel free to pick any name you want 161 00:07:37,580 --> 00:07:40,490 and actually I'll make it a link. 162 00:07:40,490 --> 00:07:45,100 So I typed a here and hit tap to use this auto completion 163 00:07:45,100 --> 00:07:48,540 and then put WDE between the link tags. 164 00:07:48,540 --> 00:07:49,470 And then here, 165 00:07:49,470 --> 00:07:51,860 the link will lead back to the starting page 166 00:07:51,860 --> 00:07:53,793 with just slash nothing. 167 00:07:55,110 --> 00:07:57,100 So that's the logo so to say, 168 00:07:57,100 --> 00:07:59,020 which I'll have in the header. 169 00:07:59,020 --> 00:08:02,060 I then also of course wanna have some navigation items 170 00:08:02,060 --> 00:08:04,580 and for this I'll add a NAV element, 171 00:08:04,580 --> 00:08:07,100 type NAV and hit tap to auto complete it. 172 00:08:07,100 --> 00:08:08,670 And then there we'll then set up 173 00:08:08,670 --> 00:08:10,890 the different navigation links 174 00:08:10,890 --> 00:08:12,630 and we'll come back to that later. 175 00:08:12,630 --> 00:08:15,540 For the moment I'll just set up the empty shell 176 00:08:15,540 --> 00:08:17,600 and that's it for now. 177 00:08:17,600 --> 00:08:19,370 This is not the final header. 178 00:08:19,370 --> 00:08:21,350 We'll add way more to it. 179 00:08:21,350 --> 00:08:24,510 Also a responsive mobile menu 180 00:08:24,510 --> 00:08:26,060 but it's just a, 181 00:08:26,060 --> 00:08:27,823 it's a first start, I would say. 182 00:08:28,750 --> 00:08:30,800 Because now with that set up 183 00:08:30,800 --> 00:08:33,320 with head EJS and header EJS, 184 00:08:33,320 --> 00:08:35,690 we can go back to signup EJS 185 00:08:35,690 --> 00:08:39,110 and start by including head and header. 186 00:08:39,110 --> 00:08:42,163 And then by setting up the signup form here. 187 00:08:43,510 --> 00:08:46,550 Now we include with our EJS tags. 188 00:08:46,550 --> 00:08:47,930 The only special thing here, 189 00:08:47,930 --> 00:08:50,360 is that we don't use the equal sign here, 190 00:08:50,360 --> 00:08:52,180 but the dash. 191 00:08:52,180 --> 00:08:53,957 This as you learned, 192 00:08:53,957 --> 00:08:58,400 does take some code and not escape it. 193 00:08:58,400 --> 00:09:00,020 And that's exactly what I want here. 194 00:09:00,020 --> 00:09:03,340 I wanna take this a raw HTML code I just wrote 195 00:09:03,340 --> 00:09:07,000 and include it and parse it as HTML. 196 00:09:07,000 --> 00:09:09,830 The browser should treat it as HTML. 197 00:09:09,830 --> 00:09:11,550 So I don't wanna escape it. 198 00:09:11,550 --> 00:09:13,940 Hence I use the dash. 199 00:09:13,940 --> 00:09:15,810 This is not a security issue 200 00:09:15,810 --> 00:09:18,610 because this is HTML code written by us. 201 00:09:18,610 --> 00:09:21,310 It's not user-generated content. 202 00:09:21,310 --> 00:09:23,490 It's always a user-generated content 203 00:09:23,490 --> 00:09:25,173 where you wanna be careful. 204 00:09:26,330 --> 00:09:29,130 Now here we can then include, 205 00:09:29,130 --> 00:09:32,460 and now between quotes actually construct a path 206 00:09:32,460 --> 00:09:35,580 to the file we wanna include. 207 00:09:35,580 --> 00:09:36,540 And here at the moment, 208 00:09:36,540 --> 00:09:38,180 I'm in the signup EJS file, 209 00:09:38,180 --> 00:09:43,180 in auth I'd wanna include the head EJS fall in includes. 210 00:09:43,400 --> 00:09:44,630 So therefore for first of all, 211 00:09:44,630 --> 00:09:46,350 I need to go up one level, 212 00:09:46,350 --> 00:09:48,090 so that I'm inside customer. 213 00:09:48,090 --> 00:09:51,673 And then I can dive into includes and point at head EJS. 214 00:09:52,530 --> 00:09:54,370 And this works just as it does 215 00:09:54,370 --> 00:09:58,290 for the imports in the JavaScript files. 216 00:09:58,290 --> 00:10:01,099 We go up one level with ../, 217 00:10:01,099 --> 00:10:04,590 then we can dive into the includes folder 218 00:10:04,590 --> 00:10:06,850 and then we can point at head 219 00:10:06,850 --> 00:10:09,030 and you don't need the extension here, 220 00:10:09,030 --> 00:10:12,363 EJS will automatically look for EJS files. 221 00:10:13,980 --> 00:10:15,710 What I do need here though, 222 00:10:15,710 --> 00:10:18,760 is a value for this variable I'm expecting 223 00:10:18,760 --> 00:10:21,093 and head EJS page title. 224 00:10:22,630 --> 00:10:25,280 So therefore here in signup EJS, 225 00:10:25,280 --> 00:10:28,920 as a second parameter value after the path 226 00:10:28,920 --> 00:10:32,250 I'll pass in curly braces, 227 00:10:32,250 --> 00:10:33,540 opening and closing. 228 00:10:33,540 --> 00:10:36,340 So a JavaScript object in the end, 229 00:10:36,340 --> 00:10:38,934 and set a value for the page title key. 230 00:10:38,934 --> 00:10:42,030 And this can be any value of your choice. 231 00:10:42,030 --> 00:10:44,160 It could be coming from a controller 232 00:10:44,160 --> 00:10:46,350 that is rendering this template 233 00:10:46,350 --> 00:10:47,934 but here I'll just hardcode it 234 00:10:47,934 --> 00:10:49,533 and say, sign up. 235 00:10:51,980 --> 00:10:55,610 Now then keep in mind that we include this head part, 236 00:10:55,610 --> 00:10:58,770 which does not have a closing head section tag. 237 00:10:58,770 --> 00:11:03,250 Therefore then after adding this include here, 238 00:11:03,250 --> 00:11:06,340 I will close head and then actually 239 00:11:06,340 --> 00:11:09,400 add body opening and closing tags. 240 00:11:09,400 --> 00:11:12,660 And then at the end also close HTML. 241 00:11:12,660 --> 00:11:15,123 So that we have a valid skeleton again. 242 00:11:16,960 --> 00:11:19,990 Now, since we always wanna close body and HTML, 243 00:11:19,990 --> 00:11:21,770 I'll also cut this here 244 00:11:21,770 --> 00:11:24,740 and add a new footer.ejs file. 245 00:11:24,740 --> 00:11:27,330 Something we haven't done before in this course 246 00:11:27,330 --> 00:11:29,800 but a simple utility view, 247 00:11:29,800 --> 00:11:33,310 which holds the closing body and HTML tags 248 00:11:33,310 --> 00:11:36,690 and any other footer logic you might wanna add, 249 00:11:36,690 --> 00:11:40,530 so that in signup EJS I can actually include, 250 00:11:40,530 --> 00:11:43,900 going up includes footer 251 00:11:43,900 --> 00:11:48,180 and I don't have to manually add the closing tags. 252 00:11:48,180 --> 00:11:51,220 Of course here we're just saving two tags 253 00:11:51,220 --> 00:11:53,230 that we would have to write otherwise 254 00:11:53,230 --> 00:11:55,310 but if you have more footer logic, 255 00:11:55,310 --> 00:11:57,313 this would be even more useful. 256 00:11:58,470 --> 00:11:59,390 And now with that, 257 00:11:59,390 --> 00:12:00,980 we got the body here. 258 00:12:00,980 --> 00:12:03,970 Now we can start working on our form here 259 00:12:03,970 --> 00:12:05,453 on the signup page. 260 00:12:06,410 --> 00:12:08,220 Actually I'll not add it like this, 261 00:12:08,220 --> 00:12:11,820 but instead start by adding the main HTML element 262 00:12:11,820 --> 00:12:15,070 to mark the main area of this page. 263 00:12:15,070 --> 00:12:16,620 And before I do that, 264 00:12:16,620 --> 00:12:21,350 I want to include, going up, includes header 265 00:12:21,350 --> 00:12:24,960 so that this main navigation bar is included first 266 00:12:24,960 --> 00:12:27,160 in the body of this HTML document. 267 00:12:27,160 --> 00:12:29,250 And then I have the main element 268 00:12:29,250 --> 00:12:31,123 with the main page content. 269 00:12:32,520 --> 00:12:36,720 And in here I just wanna add a h1 element 270 00:12:36,720 --> 00:12:40,120 where I say create new account 271 00:12:40,120 --> 00:12:44,130 and below that I then want to have my form 272 00:12:44,130 --> 00:12:45,943 for creating that account. 273 00:12:46,970 --> 00:12:51,260 Now I'll come back to action and method later. 274 00:12:51,260 --> 00:12:54,410 These are the attributes we add to form elements 275 00:12:54,410 --> 00:12:55,710 to configure the form 276 00:12:55,710 --> 00:12:59,220 and what it should do once it's submitted as you learned. 277 00:12:59,220 --> 00:13:02,470 For the moment I'll not configure it yet though 278 00:13:02,470 --> 00:13:04,600 because we don't have any backend logic 279 00:13:04,600 --> 00:13:06,800 for handling the form submission anyways. 280 00:13:06,800 --> 00:13:10,230 Instead at the moment, the goal is to add all the fields 281 00:13:10,230 --> 00:13:12,350 we need in that form. 282 00:13:12,350 --> 00:13:15,010 And we'll need quite a lot of fields here 283 00:13:15,010 --> 00:13:17,550 because we will need to get the email address 284 00:13:17,550 --> 00:13:19,580 and password of a new user 285 00:13:19,580 --> 00:13:21,347 and confirm that email address 286 00:13:21,347 --> 00:13:24,150 but we'll also need the real address. 287 00:13:24,150 --> 00:13:25,720 So the name of the user, 288 00:13:25,720 --> 00:13:26,553 the street, 289 00:13:26,553 --> 00:13:27,700 the postal code, 290 00:13:27,700 --> 00:13:28,930 the city. 291 00:13:28,930 --> 00:13:31,200 And these are all extra pieces of data, 292 00:13:31,200 --> 00:13:32,380 which I wanna fetch. 293 00:13:32,380 --> 00:13:35,640 So we'll continue working on that in the next lecture. 294 00:13:35,640 --> 00:13:36,473 Of course, 295 00:13:36,473 --> 00:13:39,510 as always feel free to get started on this on your own 296 00:13:39,510 --> 00:13:42,623 and start working on this form on your own already.