WEBVTT 0 00:00.770 --> 00:01.080 All right. 1 00:01.110 --> 00:09.660 So once you have downloaded and extracted these starting files then you should have a folder structure 2 00:09.720 --> 00:11.340 that looks like this. 3 00:11.460 --> 00:14.520 And this will include all of the starting files. 4 00:14.940 --> 00:16.650 So let us first take a look at it. 5 00:16.830 --> 00:22.000 So we're going to be using EJS to template and layout our website. 6 00:22.020 --> 00:27.280 So we've got a header and a footer. And in the header all you have are just some style sheets. 7 00:27.390 --> 00:29.880 We're going to be using font awesome 8 00:30.330 --> 00:35.820 and we're going to be using Bootstrap. And then I've got a link towards the custom style sheet which 9 00:35.820 --> 00:42.960 is over there and all it does is it sets the body and set certain things centred and also gives the 10 00:43.020 --> 00:46.390 secret text a little bit of formatting. 11 00:46.440 --> 00:51.650 Now on our home page we've got a jumbotron so that comes from Bootstrap. 12 00:51.660 --> 01:00.870 If you've got it, take a look at the documentation and it's centred using our custom CSS over here. Inside 13 01:00.930 --> 01:10.950 the jumbotron I've got a icon of a key and an h1 and a paragraph. And then there are two buttons down 14 01:10.950 --> 01:17.850 here: one that says register and one that says login and these buttons each hit up their respective 15 01:18.000 --> 01:22.660 routes which we will set up in our app.js. very shortly. 16 01:23.190 --> 01:31.320 Now on the login page it's laid out using Bootstrap so our logging form takes up a third of the width 17 01:31.410 --> 01:32.540 of the website 18 01:32.760 --> 01:38.070 and this uses Bootstrap grids and we covered that in detail in the Bootstrap section 19 01:38.100 --> 01:43.260 so I'm just gonna go ahead and show you the most important part of this page which is our form over 20 01:43.260 --> 01:43.510 here. 21 01:44.070 --> 01:51.900 And this form makes a post request to our login route and it sends over a username which is going 22 01:51.900 --> 01:57.610 to be the user's email and also a password which is gonna be set by the user. 23 01:58.170 --> 02:04.440 And finally there's a submit button which is going to read log in and that's going to send the post 24 02:04.440 --> 02:09.520 request to our login route and it's going to be caught in our server. 25 02:09.840 --> 02:13.500 Now on our register site it's pretty much identical 26 02:13.500 --> 02:19.380 other than the fact that this keeps up the register route making the POST request and the button says 27 02:19.470 --> 02:20.640 register. 28 02:20.910 --> 02:24.800 So it's a very very simple registration form. 29 02:25.080 --> 02:33.270 And then once they have registered or logged in successfully they're able to finally access this secret 30 02:33.270 --> 02:40.350 page. And this page is going to be the one that requires authentication to access and we're going to 31 02:40.350 --> 02:45.960 make sure that there's no way of accessing it unless the user is logged in. 32 02:45.960 --> 02:51.330 And finally there's a Submit page which we're going to look at a little bit later on when we want our 33 02:51.330 --> 02:59.550 users to start submitting their own secrets. And this form is going to send a POST request to the submit 34 02:59.550 --> 03:05.100 route and it's going to send over the secret that the user types into the text field 35 03:05.100 --> 03:07.560 and this is all that there is. 36 03:07.590 --> 03:14.250 Now finally if you take a look inside our app.js you can see that we've just got the very basic 37 03:14.640 --> 03:23.670 modules that we always use express, body-parser and ejs. And we're adding our public folder as a static 38 03:23.670 --> 03:24.510 resource, 39 03:24.690 --> 03:26.990 we're setting our view engine to be ejs 40 03:27.060 --> 03:29.560 and we've also set up body-parser. 41 03:29.610 --> 03:35.510 And at the very bottom we've just got some code to start our server on port 3000. 42 03:35.580 --> 03:38.670 So this should be intimately familiar to you by now. 43 03:38.700 --> 03:44.220 But if not, make sure you have a look back at the beginning of the Node module where we covered this 44 03:44.370 --> 03:45.630 in detail. 45 03:45.720 --> 03:52.800 Now in our code we're requiring all of these packages. But you'll notice that in your project folder 46 03:53.040 --> 03:56.680 we don't yet have a packages.json 47 03:56.700 --> 04:02.580 and that is because we haven't installed these packages. Now we're going to open up our hyper terminal 48 04:02.670 --> 04:07.070 and you're going to cd over to wherever your project folder is. 49 04:07.080 --> 04:11.870 So in my case the project files for the secrets project is on my desktop 50 04:11.970 --> 04:13.770 so I'm going to cd into them. 51 04:13.770 --> 04:16.540 Yours might be in download or wherever it may be. 52 04:16.620 --> 04:22.980 Once we're there, we're going to run npm init and I'm going to set the y flag to answer yes to everything 53 04:23.280 --> 04:29.730 as usual and then I'm going to install some packages. And the packages that we pretty much always need 54 04:29.790 --> 04:35.260 are express and ejs and body-parser. 55 04:35.370 --> 04:40.310 So let's go ahead and install all three of those packages. 56 04:40.380 --> 04:48.690 So once it's completed doing that then we should now have our package.json updated with our three dependencies: 57 04:48.720 --> 04:51.660 body-parser, ejs and express. 58 04:51.960 --> 04:54.990 So we're ready to go and build out our server 59 04:54.990 --> 05:00.670 now. First things first, we want to be able to view some of these websites. So we're going to have 60 05:00.670 --> 05:02.470 to add some app.get in here. 61 05:02.950 --> 05:13.270 So I'm going to target the home route or the root route and here I'm going to render my home page. So 62 05:13.330 --> 05:20.010 I'm going to just use res.render and we're going to render the page that is called home.ejs. 63 05:20.230 --> 05:22.580 And then we're going to do the same 64 05:22.600 --> 05:23.980 and I'm just gonna copy and paste it 65 05:23.980 --> 05:33.190 so you doing it bored watching this. And we're going to change it to the login route, the register route 66 05:34.620 --> 05:41.940 and we're gonna change the render to the login page and the register page and that's it. 67 05:41.940 --> 05:49.230 So now let's go ahead and just double check our code that we don't have any forward slashes in the res. 68 05:49.230 --> 05:57.640 renders and we saved our file and we can go ahead and start nodemon app.js and you can see our service 69 05:57.650 --> 05:59.250 start on port 3000. 70 05:59.340 --> 06:08.620 So let's go ahead and check it out. So here is our home page rendered and you can see that's where our 71 06:08.650 --> 06:11.790 little font awesome icon comes from, 72 06:11.880 --> 06:19.290 h1, our little title there and we've got our register and login buttons. 73 06:19.380 --> 06:23.990 So if I click on register, it should take me to /register. 74 06:24.060 --> 06:30.380 And that's because that button makes a GET request to that route which we target in here 75 06:30.420 --> 06:37.230 and it renders the register page which looks something like this. Very simple, just two fields, email and 76 06:37.230 --> 06:46.470 password set up very simply using Bootstrap cards and Bootstrap forms. And if we go back and click on 77 06:46.470 --> 06:51.710 login then it takes us to the login page which looks pretty much identical. 78 06:51.720 --> 06:58.860 So now our website is pretty much set up and ready for us to start adding some authentication to it 79 06:59.220 --> 07:06.840 so that we can see if a user is registered or logged in before we allow them to view the secrets page. 80 07:07.380 --> 07:08.840 So in the next lesson 81 07:08.880 --> 07:10.550 that's exactly what we're gonna be doing. 82 07:10.560 --> 07:17.820 We're gonna be creating our user's account on a MongoDB database and we're going to be authenticating 83 07:17.820 --> 07:22.320 them using our level 1 security authentication. 84 07:22.410 --> 07:25.740 So for all of that and more, I'll see you on the next lesson.