All right. 1
It's time to put all of your knowledge together in using Node and Express and create the final project 2
for this section, which is a website full of secrets. 3
So in this video lesson, go ahead and download the course resources for this lesson, which will be 4
a zipped file called Secrets Project. 5
Once you've downloaded and extracted it, you should be able to open it and take a look at the structure 6
of the files that you have. 7
So there's an index.js, which is completely blank. 8
You're going to write all of your code in there, but there is a public folder that contains all of 9
the pre-built HTML code. 10
So there's two pages in this website. 11
One is the home page, which looks like this. 12
It has a h1 and a form. 13
Be careful and look at the different aspects of the form so that when you're writing your code you know 14
what's going on. 15
And then there's also a website called secrets.html, and this is the website that we're going to display 16
once the user type-in the correct password. 17
In order to know how you should build this project, I want you to exit out of any servers you're running. 18
Go ahead and cd over to this project and then you can use Node to run the solution.js and if 19
you get ERR_MODULE_NOT_FOUND, then make sure that you've run npm i to install all of the packages 20
that are in the list of dependencies here, which is just body-parser and Express. 21
So now if we hit up and run our solution.js it should be listening on port 3000 and if we go over 22
to the localhost:3000, you should see a website like this. 23
The password for this website in the solution is "ILoveProgramming" and it's spelt exactly like this. 24
So zoom in, take a look, make sure you got it right and then click submit. 25
It will let you through and give you some secrets, like when making chocolate desserts always add a 26
little bit of salt. 27
It makes the chocolate flavor more intense. 28
This is actually my own personal secret, and it is now yours because you too love programming. 29
Now, what happens if I type in something that's not the right password? 30
Then in this case, when I hit submit, you will see it goes back to the initial homepage, the index.html. 31
It doesn't let me through to the secrets. 32
That's the goal that you're trying to achieve and you should now have all of the information in your 33
brain, but 34
you might need to review some of the previous lessons in order to complete this challenge, but this 35
is essentially what we're going to do. 36
So pause the video and try to complete this challenge. 37
All right. 38
So let's take a look through the solution code together. 39
Hopefully you've actually given this a go because as I always say, it's the doing in programming that's 40
actually going to teach you, 41
it's not listening to me. 42
You're not going to learn anything by just listening to me, watching the videos or typing out the code 43
that I've already typed. 44
It's actually the thinking and the struggling and the hating yourself and the finally getting it right 45
and having the right solution and things working and getting these epiphanies, 46
that is how you learn programming. 47
But enough of that. 48
Let's walk through the solution together. 49
So firstly, I've imported Express and body-parser, the two modules that I'm going to need. 50
I've also imported from path and url to get this directory name, and I fully expect you to just simply 51
copy and paste this from your previous projects. 52
You don't need to memorize this, so I'll just say that one more time. 53
Programming is not about memorization, it's about figuring out solutions to problems and knowing where 54
to look for those solutions. 55
Next, 56
I've created my app and set my port, and then I've created this variable called userIsAuthorized, 57
which by default they are not. 58
Then I'm going to use my body-parser middleware, 59
so again, this should be a copy and paste job. 60
You're pretty much going to use the same thing every time you want to get hold of information from an 61
HTML form. 62
And then I've got my own middleware that I created, which you can or you don't have to. 63
But in this case it's kind of a middleware because we're effectively authorizing the request before 64
it gets handled. 65
So while it's acceptable to put this inside the app.post, I think it's actually better in this case 66
to have it as a middleware. 67
So I've created a middleware called passwordCheck, which takes the value that the user inputted into 68
the password field and the reason why I know it's going into the password field is one I console logged 69
the req.body, but also I looked inside the index.html and I saw that the input for the password 70
field has this particular name. 71
So that is what I needed to put right here. 72
I'm going to check if the password is equal to ILoveProgramming, or whatever password it is you want 73
to set, 74
and if that is the case, I'm going to set the user to authenticated. 75
And that all-important next() method is what allows my flow to continue through to the handlers. 76
So this middleware gets used first and then we have our two routes. 77
Our GET route to the home page sends the file that is our index.html. 78
So this particular HTML page and then the user can type something in here and then when they hit Submit, 79
that form is going to be submitted to the /check route using the POST method. 80
So I have to handle that in my server if I want anything to happen. 81
So I've got an app.post() with this route and when it comes through I'm going to check, 82
well, was that request coming from a user that's authenticated? 83
If so, let's send them the secret.html page, 84
otherwise let's send them back to the home page. 85
Now we haven't really talked about res.redirect, so this is how I expect you to have sent the user 86
back to the home page if they got the password wrong. 87
But there is also another method called res.redirect and you can simply put in the URL where you want 88
them to redirect to, which in our case is to go straight back to the home page so you don't have to 89
write out all of those lines of code if you wish. 90
But this is equally valid code and this is the form that I expected you to figure out. 91
Another thing to mention here is body-parser is now incorporated as a part of Express, so if you don't 92
want to install yet another module, you don't want to put in import body-parser, you can simply replace 93
it with express because it now has all of the functionality of body-parser included because it's such 94
a commonly needed functionality, but it does need to be added in as a middleware. 95
Now for me, when I'm actually going through my code, I actually prefer looking at it like this because 96
then I know what this middleware is doing and this is also most of the code that you're going to come 97
across on the Internet. 98
So I prefer this version, but I just wanted to let you know that there is an alternative as well. 99
Hopefully, you managed to get this project to work from your own steam and hopefully, you struggled a ton 100
with it. 101
That does not mean that you're not smart, 102
it means that you're super smart because you tried 103
really, really hard 104
and that's how you're going to get ahead of everyone. 105
But if something didn't work or you need to review the code, it's totally fine, 106
make sure that you go back and fix it and your project works. 107
Hopefully, you had fun with me in this module, learning all about Express. 108
In the next module we're going to learn about EJS. 109
So what is that? 110
Well, you have to find out in the next module. For all of that and more, I'll see you there.