Now here's a question. What exactly happens when I press on this Calculate button? 1
Well currently, I've got my server running on port 3000, and I'm running my calculator.js file. 2
So if I go to Chrome, and I open up my Chrome Developer Tools, then I head over to the Network tab, and 3
make sure that down here you've got the All tab selected as well, 4
we're going to test our form out. 5
So I'm going to put in a first number and a second number, and then I'm going to press Calculate. Now 6
a whole bunch of things happen, and all of these networking requests get logged down here. 7
But we get this code 404, and everything's in red, 8
which seems kind of like it's bad, 9
and then we get this error up here saying, “Cannot POST to /index.html”. 10
Now where does that come from? 11
Well, if we have a look inside our index.html, then you can see that our form has an action and 12
a method. 13
Now the method is the post method, 14
so we're sending this data somewhere, and that somewhere is what's defined by the action attribute. 15
So we’re sending it to something called index.html, 16
which is not what we want. We want to send it to our server, which is at the home route location, 17
so it's just the forward slash. 18
Now, if you don't have an action attribute, that's fine as well. By default, if it doesn't exist, then the 19
form will simply send the data to the current page where it's on, 20
so that will be the equivalent of this. 21
But let's just have it in there for clarity’s sake. 22
So our form has a post method, which means it's going to try and send the data that is entered into the 23
inputs to a location that is our home route. 24
So now, if we hit save, and we go back to our localhost:3000, our home page, and let's try again pressing 25
that Calculate button. 26
Now this time, we're still getting a 404 and a “Cannot POST”, 27
but if you click on it, and you go over to the Headers tab, and you scroll down, you can see that we've 28
got a bunch of information, including some form data, and the data that we're getting access to is the 29
parameter num1, which remember is bound to our first input using the name attribute, and then that 30
has a value of 2, which is what we entered into the form previously, and the input with a name of num2 31
has a value of 3. 32
But we have a problem, because the status code is ‘404 Not Found’. 33
Now, you might have already come across the error code 404 while you're browsing web sites, and in fact 34
a lot of companies and web sites pride themselves on how they design their 404 site, and that just 35
goes to show how often this happens. 36
Now, if you're interested in a redacted but slightly rude version of how HTTP return codes work, then it's 37
basically if it's in the 100s it means hold on, something's going to happen, 38
the 200 means ‘here you go’, 39
this is usually a successful request code, 300 means go away, 40
there’s some security involved, 400s means you screwed up, 500s means I screwed up. 41
Now if you want to see the full list, then you can head over to trusty old Wikipedia, and you can see 42
a list of all of those status codes. 43
So the two most often codes you'll see is 200, which means everything was successful. 400s tend 44
to be client errors, 45
so the user who's using a browser to request something that doesn't exist, for example. 46
Well, what's actually going on in our case? 47
Well, the problem is that our server does not have a way of processing any post requests, 48
so we're basically not accepting anybody to post to our home route. 49
So let's go ahead and fix that. 50
Let's add an app.post method to handle any post requests that come to our home route, and then we're 51
going to have a callback with, again, req and res, request and response. 52
And we're just going to send back, 53
“Thanks for posting that!” 54
And then we're going to go back to our localhost:3000, 55
I'm going to put in two numbers and press Calculate. 56
You can see now, when we look at our localhost, we’re getting a message back, 57
and also we're getting the status code 200, which is ‘OK, everything's great, everything's working great.’ 58
Now there's just one problem. 59
How do we tap into these pieces of form data? Because that's essentially what we need, 60
right? 61
We need to be able to get that data into here, into this callback function, so we can calculate the output, 62
and then send the result back to the browser. 63
Now, in order to tap into those pieces of data, we have to install another NPM package, which is called 64
Body Parser. 65
So let's head over to our command line, and Command C to exit our server, and then we're going to npm 66
install body-parser. And what this is going to do is it's going to allow us to pass the information 67
that we get sent from the post request. 68
So it might look something like this, a whole load of mumbojumbo data, and we're going to parse it so that 69
we have access to properties and variables, so we can do our calculations. 70
So now that we've installed body-parser and it's now inside our package.json as one of our dependencies, 71
we can head over to our calculator.js, we can require it, so that we incorporate that package into 72
our current project. So we can create a new const that's called bodyParser, and it's going to be requiring 73
body-parser package that we just installed. 74
So you can see that by naming constants, I'm still following the rules of how we named variables in Javascript, 75
namely camel casing. 76
But the actual package 77
I can't change, 78
and it's called body-parser. 79
So now that we've incorporated Body Parser into our project, the next step is to get our app to use it. 80
And Body Parser works with Express, so we can say app.use, 81
and we're going to specify the thing we wanted to use, which is bodyParser. Now Body Parser has a few modes, 82
if you will. There is, for example, bodyParser.text, 83
so parse all the requests into text, or bodyParser.json, which is that special format that we saw before, 84
which kind of looks a bit like Javascript objects, or the one that we're going to be using is 85
bodyParser.urlencoded. 86
And this is the special one that we use when we're trying to parse data that comes from an HTML form. 87
So whenever you're trying to grab the information that gets posted to your server from an HTML form, you're 88
going to be using urlencoded. 89
And in addition to that, we're going to add an option called ‘extended’, and we're going to set it to be 90
‘true’. 91
And by setting that extended option to true, that basically just allows us to post nested objects. And 92
it's not something that we're going to be using, but it's something that bodyParser is requiring you 93
to explicitly declare. 94
So this is basically the code that you need to write 95
every single time you want to use Body Parser. 96
Now why would you want to use Body Parser? 97
Well, it allows you to go into any of your routes, and you can tap into something called request.body, 98
and this is the parsed version of the HTTP request. 99
So let's go ahead and log this and see what we get when we try to make a post request. 100
So let's restart our server and reload our web site, and let's put in two numbers, 2 and 3, and I'm 101
going to hit Calculate. 102
So we get sent back, 103
“Thanks for posting that!” from the res.send, 104
but we also execute the console.log, where we log the request.body, and that logs in here as everything 105
that we saw over here, which is the form data. 106
So, by using Body Parser, we're able to parse the HTTP request that we get, 107
and by using urlencoded we can get access to the form data, and we can then tap into each of these 108
as if they were just properties of the object body. 109
So we can, for example, log request.body.num1. And remember that naming comes from the name 110
attribute of your input. 111
So now we're only logging the value of the first input. 112
So if we go back to our web site and put in a number in here, say 5 and 6, 113
then when we press Calculate, we get 5 logged in here, 114
so that value gets stored inside 115
this request.body.num1. 116
So now that we know how we can tap into these values, then making our calculator is super duper simple, 117
right? 118
All we need to do is create a variable that's going to hold our num1, and that's going to be equal 119
to request.body.num1. 120
And then we're going to create another one called num2, and this is going to be equal to 121
request.body.num2. 122
And then we can calculate the result, which is going to be num1 123
+ num2, which is making a really simple calculator that adds two numbers. 124
And then we're going to send back, instead of “Thanks for posting that!”, we'll say, “The result of the calculation 125
is “, and then we're going to append that variable result onto the end. 126
So now let's hit save, 127
update our server, 128
go over to our home page, and let's try and add 4 and 5 together, 129
press Calculate, the result of the calculation is 45. 130
So what's going on here? 131
Well, this num1 and num2 that we're getting back from bodyParser, 132
it gets parsed as text, 133
so if we want this to be a number, then we need to explicitly turn this into a number. 134
And, if you remember from earlier lessons on Javascript, we do that by simply writing Number, with a capital 135
N, and inside the parentheses we put in the piece of text that we want to turn into a number. 136
And so now, when we're calculating results, instead of appending num1 to num2, we can add num1 137
to num2. 138
So let's try this again. 139
The first number is 4, second number is 5. 140
And now we get 9. 141
So if you're wondering how we got these words num1 and num2, then it's as simple as going 142
into your index.html and changing the name here. 143
Let's call it n1 and n2 instead. 144
And now we can tap into it through n1 and n2. 145
So the body is everything that we got after we parsed the request, 146
and then the n1 is the value of the item in the form that has a name of n1. 147
So our web site still works exactly the same. 1 plus 2 is equal to 3. 148
And it's using these name attributes to grab the value inside that input, and then we're parsing that 149
information using request.body, we're turning it into a number, and we're adding the two numbers together 150
to get to send back the result. 151
So I've kept this project super duper simple, because there's a lot of other things going on, especially 152
using Body Parser, and getting hold of our post request through the post route, and it will take some time 153
for all of this to make sense. 154
But we're going to be doing plenty of repetition on this so that you really get it. 155
The important thing to take away from this is when you look at our web site and I right click and say 156
View Page Source, you can see that all the client gets to see, all my browser gets to see, when I try to 157
go to this web site 158
is just a plain and simple HTML web site. 159
I am not privy to any of that Javascript code that was executed to calculate the numbers. 160
All of that is hidden and taken away from the client side because we're doing it on our server. 161
And this is all because we built a backend that is doing the code execution instead of having all of 162
that Javascript run on the front end, which is on the client browser. And that is the most important thing 163
to take away. 164
We now have a web application because our code is running on the backend as opposed to just simply having 165
static files being rendered and loaded up, and having our Javascript run on the client side, or the front 166
end. Now in the next lesson, 167
I've got a challenge for you to try and solidify all of this knowledge that we learned in these past 168
few lessons. 169
So head over there and try and give it a go.