WEBVTT 0 00:01.600 --> 00:07.910 Now here's a question. What exactly happens when I press on this Calculate button? 1 00:08.260 --> 00:14.340 Well currently, I've got my server running on port 3000, and I'm running my calculator.js file. 2 00:14.410 --> 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 3 00:20.920 --> 00:25.320 make sure that down here you've got the All tab selected as well, 4 00:25.360 --> 00:28.050 we're going to test our form out. 5 00:28.090 --> 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 6 00:35.200 --> 00:41.360 a whole bunch of things happen, and all of these networking requests get logged down here. 7 00:41.560 --> 00:46.480 But we get this code 404, and everything's in red, 8 00:46.480 --> 00:48.760 which seems kind of like it's bad, 9 00:48.820 --> 00:55.540 and then we get this error up here saying, “Cannot POST to /index.html”. 10 00:55.540 --> 00:57.700 Now where does that come from? 11 00:57.700 --> 01:04.960 Well, if we have a look inside our index.html, then you can see that our form has an action and 12 01:05.020 --> 01:06.310 a method. 13 01:06.310 --> 01:09.030 Now the method is the post method, 14 01:09.040 --> 01:15.690 so we're sending this data somewhere, and that somewhere is what's defined by the action attribute. 15 01:15.850 --> 01:18.440 So we’re sending it to something called index.html, 16 01:18.470 --> 01:26.790 which is not what we want. We want to send it to our server, which is at the home route location, 17 01:26.830 --> 01:29.960 so it's just the forward slash. 18 01:30.250 --> 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 19 01:36.730 --> 01:41.740 form will simply send the data to the current page where it's on, 20 01:41.740 --> 01:45.050 so that will be the equivalent of this. 21 01:45.220 --> 01:48.610 But let's just have it in there for clarity’s sake. 22 01:48.610 --> 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 23 01:55.420 --> 02:00.660 inputs to a location that is our home route. 24 02:00.670 --> 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 25 02:07.660 --> 02:09.350 that Calculate button. 26 02:09.730 --> 02:14.440 Now this time, we're still getting a 404 and a “Cannot POST”, 27 02:14.710 --> 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 28 02:21.850 --> 02:30.760 got a bunch of information, including some form data, and the data that we're getting access to is the 29 02:30.910 --> 02:40.120 parameter num1, which remember is bound to our first input using the name attribute, and then that 30 02:40.120 --> 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 31 02:47.300 --> 02:50.760 has a value of 3. 32 02:51.010 --> 02:58.020 But we have a problem, because the status code is ‘404 Not Found’. 33 02:58.030 --> 03:04.060 Now, you might have already come across the error code 404 while you're browsing web sites, and in fact 34 03:04.150 --> 03:10.420 a lot of companies and web sites pride themselves on how they design their 404 site, and that just 35 03:10.420 --> 03:13.290 goes to show how often this happens. 36 03:13.300 --> 03:20.230 Now, if you're interested in a redacted but slightly rude version of how HTTP return codes work, then it's 37 03:20.230 --> 03:25.300 basically if it's in the 100s it means hold on, something's going to happen, 38 03:25.510 --> 03:27.390 the 200 means ‘here you go’, 39 03:27.390 --> 03:32.620 this is usually a successful request code, 300 means go away, 40 03:32.620 --> 03:39.160 there’s some security involved, 400s means you screwed up, 500s means I screwed up. 41 03:39.160 --> 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 42 03:43.900 --> 03:46.600 a list of all of those status codes. 43 03:46.600 --> 03:53.410 So the two most often codes you'll see is 200, which means everything was successful. 400s tend 44 03:53.410 --> 03:54.640 to be client errors, 45 03:54.670 --> 04:00.380 so the user who's using a browser to request something that doesn't exist, for example. 46 04:00.430 --> 04:03.070 Well, what's actually going on in our case? 47 04:03.190 --> 04:12.100 Well, the problem is that our server does not have a way of processing any post requests, 48 04:12.100 --> 04:18.430 so we're basically not accepting anybody to post to our home route. 49 04:18.430 --> 04:20.470 So let's go ahead and fix that. 50 04:20.530 --> 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 51 04:28.300 --> 04:34.130 going to have a callback with, again, req and res, request and response. 52 04:34.690 --> 04:38.670 And we're just going to send back, 53 04:39.190 --> 04:41.920 “Thanks for posting that!” 54 04:42.250 --> 04:45.480 And then we're going to go back to our localhost:3000, 55 04:45.490 --> 04:49.150 I'm going to put in two numbers and press Calculate. 56 04:49.150 --> 04:54.550 You can see now, when we look at our localhost, we’re getting a message back, 57 04:54.580 --> 05:01.220 and also we're getting the status code 200, which is ‘OK, everything's great, everything's working great.’ 58 05:01.470 --> 05:03.280 Now there's just one problem. 59 05:03.300 --> 05:09.360 How do we tap into these pieces of form data? Because that's essentially what we need, 60 05:09.360 --> 05:09.650 right? 61 05:09.660 --> 05:16.710 We need to be able to get that data into here, into this callback function, so we can calculate the output, 62 05:17.040 --> 05:20.630 and then send the result back to the browser. 63 05:20.880 --> 05:27.870 Now, in order to tap into those pieces of data, we have to install another NPM package, which is called 64 05:28.050 --> 05:29.170 Body Parser. 65 05:29.400 --> 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 66 05:36.690 --> 05:48.020 install body-parser. And what this is going to do is it's going to allow us to pass the information 67 05:48.020 --> 05:50.560 that we get sent from the post request. 68 05:50.600 --> 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 69 05:56.420 --> 06:01.920 we have access to properties and variables, so we can do our calculations. 70 06:01.940 --> 06:08.960 So now that we've installed body-parser and it's now inside our package.json as one of our dependencies, 71 06:09.380 --> 06:16.250 we can head over to our calculator.js, we can require it, so that we incorporate that package into 72 06:16.250 --> 06:24.890 our current project. So we can create a new const that's called bodyParser, and it's going to be requiring 73 06:25.580 --> 06:30.350 body-parser package that we just installed. 74 06:30.350 --> 06:36.050 So you can see that by naming constants, I'm still following the rules of how we named variables in Javascript, 75 06:36.350 --> 06:37.820 namely camel casing. 76 06:38.000 --> 06:39.400 But the actual package 77 06:39.420 --> 06:40.270 I can't change, 78 06:40.310 --> 06:42.400 and it's called body-parser. 79 06:42.710 --> 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. 80 06:50.120 --> 06:56.560 And Body Parser works with Express, so we can say app.use, 81 06:56.900 --> 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, 82 07:04.130 --> 07:07.850 if you will. There is, for example, bodyParser.text, 83 07:07.910 --> 07:14.800 so parse all the requests into text, or bodyParser.json, which is that special format that we saw before, 84 07:15.350 --> 07:21.440 which kind of looks a bit like Javascript objects, or the one that we're going to be using is 85 07:21.520 --> 07:23.870 bodyParser.urlencoded. 86 07:24.020 --> 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. 87 07:30.560 --> 07:36.680 So whenever you're trying to grab the information that gets posted to your server from an HTML form, you're 88 07:36.680 --> 07:39.340 going to be using urlencoded. 89 07:39.560 --> 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 90 07:45.050 --> 07:45.700 ‘true’. 91 07:45.860 --> 07:52.970 And by setting that extended option to true, that basically just allows us to post nested objects. And 92 07:53.030 --> 07:57.290 it's not something that we're going to be using, but it's something that bodyParser is requiring you 93 07:57.290 --> 07:59.030 to explicitly declare. 94 07:59.060 --> 08:02.020 So this is basically the code that you need to write 95 08:02.060 --> 08:04.950 every single time you want to use Body Parser. 96 08:05.010 --> 08:07.730 Now why would you want to use Body Parser? 97 08:07.910 --> 08:14.960 Well, it allows you to go into any of your routes, and you can tap into something called request.body, 98 08:15.290 --> 08:21.150 and this is the parsed version of the HTTP request. 99 08:21.380 --> 08:27.280 So let's go ahead and log this and see what we get when we try to make a post request. 100 08:27.320 --> 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 101 08:37.070 --> 08:39.270 going to hit Calculate. 102 08:39.530 --> 08:41.110 So we get sent back, 103 08:41.120 --> 08:44.510 “Thanks for posting that!” from the res.send, 104 08:44.510 --> 08:54.320 but we also execute the console.log, where we log the request.body, and that logs in here as everything 105 08:54.320 --> 08:59.150 that we saw over here, which is the form data. 106 08:59.150 --> 09:06.540 So, by using Body Parser, we're able to parse the HTTP request that we get, 107 09:07.280 --> 09:15.530 and by using urlencoded we can get access to the form data, and we can then tap into each of these 108 09:15.650 --> 09:19.260 as if they were just properties of the object body. 109 09:19.400 --> 09:27.590 So we can, for example, log request.body.num1. And remember that naming comes from the name 110 09:27.620 --> 09:29.870 attribute of your input. 111 09:30.230 --> 09:35.030 So now we're only logging the value of the first input. 112 09:35.030 --> 09:41.070 So if we go back to our web site and put in a number in here, say 5 and 6, 113 09:41.240 --> 09:45.450 then when we press Calculate, we get 5 logged in here, 114 09:45.620 --> 09:48.860 so that value gets stored inside 115 09:48.860 --> 09:52.020 this request.body.num1. 116 09:52.130 --> 09:58.540 So now that we know how we can tap into these values, then making our calculator is super duper simple, 117 09:58.550 --> 09:59.070 right? 118 09:59.300 --> 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 119 10:04.430 --> 10:07.620 to request.body.num1. 120 10:07.700 --> 10:12.480 And then we're going to create another one called num2, and this is going to be equal to 121 10:12.620 --> 10:14.860 request.body.num2. 122 10:15.140 --> 10:19.370 And then we can calculate the result, which is going to be num1 123 10:19.400 --> 10:23.830 + num2, which is making a really simple calculator that adds two numbers. 124 10:24.230 --> 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 125 10:32.660 --> 10:38.820 is “, and then we're going to append that variable result onto the end. 126 10:39.320 --> 10:41.180 So now let's hit save, 127 10:41.180 --> 10:42.560 update our server, 128 10:42.800 --> 10:47.940 go over to our home page, and let's try and add 4 and 5 together, 129 10:48.080 --> 10:53.450 press Calculate, the result of the calculation is 45. 130 10:53.480 --> 10:55.290 So what's going on here? 131 10:55.550 --> 11:01.210 Well, this num1 and num2 that we're getting back from bodyParser, 132 11:01.400 --> 11:04.230 it gets parsed as text, 133 11:04.340 --> 11:10.890 so if we want this to be a number, then we need to explicitly turn this into a number. 134 11:11.180 --> 11:17.220 And, if you remember from earlier lessons on Javascript, we do that by simply writing Number, with a capital 135 11:17.280 --> 11:25.830 N, and inside the parentheses we put in the piece of text that we want to turn into a number. 136 11:26.030 --> 11:35.470 And so now, when we're calculating results, instead of appending num1 to num2, we can add num1 137 11:35.480 --> 11:37.090 to num2. 138 11:37.100 --> 11:39.500 So let's try this again. 139 11:39.730 --> 11:43.000 The first number is 4, second number is 5. 140 11:43.200 --> 11:46.080 And now we get 9. 141 11:46.130 --> 11:52.400 So if you're wondering how we got these words num1 and num2, then it's as simple as going 142 11:52.400 --> 11:55.500 into your index.html and changing the name here. 143 11:55.520 --> 11:59.230 Let's call it n1 and n2 instead. 144 11:59.480 --> 12:03.820 And now we can tap into it through n1 and n2. 145 12:04.070 --> 12:09.290 So the body is everything that we got after we parsed the request, 146 12:09.500 --> 12:16.210 and then the n1 is the value of the item in the form that has a name of n1. 147 12:16.340 --> 12:22.250 So our web site still works exactly the same. 1 plus 2 is equal to 3. 148 12:22.520 --> 12:30.020 And it's using these name attributes to grab the value inside that input, and then we're parsing that 149 12:30.020 --> 12:36.770 information using request.body, we're turning it into a number, and we're adding the two numbers together 150 12:37.070 --> 12:39.660 to get to send back the result. 151 12:39.860 --> 12:45.680 So I've kept this project super duper simple, because there's a lot of other things going on, especially 152 12:45.680 --> 12:53.420 using Body Parser, and getting hold of our post request through the post route, and it will take some time 153 12:53.420 --> 12:55.310 for all of this to make sense. 154 12:55.310 --> 12:59.410 But we're going to be doing plenty of repetition on this so that you really get it. 155 12:59.420 --> 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 156 13:07.290 --> 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 157 13:14.150 --> 13:15.340 go to this web site 158 13:15.650 --> 13:19.760 is just a plain and simple HTML web site. 159 13:20.030 --> 13:28.040 I am not privy to any of that Javascript code that was executed to calculate the numbers. 160 13:28.040 --> 13:35.500 All of that is hidden and taken away from the client side because we're doing it on our server. 161 13:35.660 --> 13:42.320 And this is all because we built a backend that is doing the code execution instead of having all of 162 13:42.320 --> 13:49.580 that Javascript run on the front end, which is on the client browser. And that is the most important thing 163 13:49.580 --> 13:50.490 to take away. 164 13:50.630 --> 13:58.700 We now have a web application because our code is running on the backend as opposed to just simply having 165 13:58.700 --> 14:05.090 static files being rendered and loaded up, and having our Javascript run on the client side, or the front 166 14:05.090 --> 14:07.890 end. Now in the next lesson, 167 14:07.970 --> 14:13.490 I've got a challenge for you to try and solidify all of this knowledge that we learned in these past 168 14:13.490 --> 14:14.600 few lessons. 169 14:14.750 --> 14:17.830 So head over there and try and give it a go.