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