0 1 00:00:01,600 --> 00:00:07,910 Now here's a question. What exactly happens when I press on this Calculate button? 1 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. 2 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 3 4 00:00:20,920 --> 00:00:25,320 make sure that down here you've got the All tab selected as well, 4 5 00:00:25,360 --> 00:00:28,050 we're going to test our form out. 5 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 6 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. 7 8 00:00:41,560 --> 00:00:46,480 But we get this code 404, and everything's in red, 8 9 00:00:46,480 --> 00:00:48,760 which seems kind of like it's bad, 9 10 00:00:48,820 --> 00:00:55,540 and then we get this error up here saying, “Cannot POST to /index.html”. 10 11 00:00:55,540 --> 00:00:57,700 Now where does that come from? 11 12 00:00:57,700 --> 00: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 13 00:01:05,020 --> 00:01:06,310 a method. 13 14 00:01:06,310 --> 00:01:09,030 Now the method is the post method, 14 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. 15 16 00:01:15,850 --> 00:01:18,440 So we’re sending it to something called index.html, 16 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, 17 18 00:01:26,830 --> 00:01:29,960 so it's just the forward slash. 18 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 19 20 00:01:36,730 --> 00:01:41,740 form will simply send the data to the current page where it's on, 20 21 00:01:41,740 --> 00:01:45,050 so that will be the equivalent of this. 21 22 00:01:45,220 --> 00:01:48,610 But let's just have it in there for clarity’s sake. 22 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 23 24 00:01:55,420 --> 00:02:00,660 inputs to a location that is our home route. 24 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 25 26 00:02:07,660 --> 00:02:09,350 that Calculate button. 26 27 00:02:09,730 --> 00:02:14,440 Now this time, we're still getting a 404 and a “Cannot POST”, 27 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 28 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 29 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 30 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 31 32 00:02:47,300 --> 00:02:50,760 has a value of 3. 32 33 00:02:51,010 --> 00:02:58,020 But we have a problem, because the status code is ‘404 Not Found’. 33 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 34 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 35 36 00:03:10,420 --> 00:03:13,290 goes to show how often this happens. 36 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 37 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, 38 39 00:03:25,510 --> 00:03:27,390 the 200 means ‘here you go’, 39 40 00:03:27,390 --> 00:03:32,620 this is usually a successful request code, 300 means go away, 40 41 00:03:32,620 --> 00:03:39,160 there’s some security involved, 400s means you screwed up, 500s means I screwed up. 41 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 42 43 00:03:43,900 --> 00:03:46,600 a list of all of those status codes. 43 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 44 45 00:03:53,410 --> 00:03:54,640 to be client errors, 45 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. 46 47 00:04:00,430 --> 00:04:03,070 Well, what's actually going on in our case? 47 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, 48 49 00:04:12,100 --> 00:04:18,430 so we're basically not accepting anybody to post to our home route. 49 50 00:04:18,430 --> 00:04:20,470 So let's go ahead and fix that. 50 51 00:04:20,530 --> 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 51 52 00:04:28,300 --> 00:04:34,130 going to have a callback with, again, req and res, request and response. 52 53 00:04:34,690 --> 00:04:38,670 And we're just going to send back, 53 54 00:04:39,190 --> 00:04:41,920 “Thanks for posting that!” 54 55 00:04:42,250 --> 00:04:45,480 And then we're going to go back to our localhost:3000, 55 56 00:04:45,490 --> 00:04:49,150 I'm going to put in two numbers and press Calculate. 56 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, 57 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.’ 58 59 00:05:01,470 --> 00:05:03,280 Now there's just one problem. 59 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, 60 61 00:05:09,360 --> 00:05:09,650 right? 61 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, 62 63 00:05:17,040 --> 00:05:20,630 and then send the result back to the browser. 63 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 64 65 00:05:28,050 --> 00:05:29,170 Body Parser. 65 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 66 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 67 68 00:05:48,020 --> 00:05:50,560 that we get sent from the post request. 68 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 69 70 00:05:56,420 --> 00:06:01,920 we have access to properties and variables, so we can do our calculations. 70 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, 71 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 72 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 73 74 00:06:25,580 --> 00:06:30,350 body-parser package that we just installed. 74 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, 75 76 00:06:36,350 --> 00:06:37,820 namely camel casing. 76 77 00:06:38,000 --> 00:06:39,400 But the actual package 77 78 00:06:39,420 --> 00:06:40,270 I can't change, 78 79 00:06:40,310 --> 00:06:42,400 and it's called body-parser. 79 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. 80 81 00:06:50,120 --> 00:06:56,560 And Body Parser works with Express, so we can say app.use, 81 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, 82 83 00:07:04,130 --> 00:07:07,850 if you will. There is, for example, bodyParser.text, 83 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, 84 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 85 86 00:07:21,520 --> 00:07:23,870 bodyParser.urlencoded. 86 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. 87 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 88 89 00:07:36,680 --> 00:07:39,340 going to be using urlencoded. 89 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 90 91 00:07:45,050 --> 00:07:45,700 ‘true’. 91 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 92 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 93 94 00:07:57,290 --> 00:07:59,030 to explicitly declare. 94 95 00:07:59,060 --> 00:08:02,020 So this is basically the code that you need to write 95 96 00:08:02,060 --> 00:08:04,950 every single time you want to use Body Parser. 96 97 00:08:05,010 --> 00:08:07,730 Now why would you want to use Body Parser? 97 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, 98 99 00:08:15,290 --> 00:08:21,150 and this is the parsed version of the HTTP request. 99 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. 100 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 101 102 00:08:37,070 --> 00:08:39,270 going to hit Calculate. 102 103 00:08:39,530 --> 00:08:41,110 So we get sent back, 103 104 00:08:41,120 --> 00:08:44,510 “Thanks for posting that!” from the res.send, 104 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 105 106 00:08:54,320 --> 00:08:59,150 that we saw over here, which is the form data. 106 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, 107 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 108 109 00:09:15,650 --> 00:09:19,260 as if they were just properties of the object body. 109 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 110 111 00:09:27,620 --> 00:09:29,870 attribute of your input. 111 112 00:09:30,230 --> 00:09:35,030 So now we're only logging the value of the first input. 112 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, 113 114 00:09:41,240 --> 00:09:45,450 then when we press Calculate, we get 5 logged in here, 114 115 00:09:45,620 --> 00:09:48,860 so that value gets stored inside 115 116 00:09:48,860 --> 00:09:52,020 this request.body.num1. 116 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, 117 118 00:09:58,550 --> 00:09:59,070 right? 118 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 119 120 00:10:04,430 --> 00:10:07,620 to request.body.num1. 120 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 121 122 00:10:12,620 --> 00:10:14,860 request.body.num2. 122 123 00:10:15,140 --> 00:10:19,370 And then we can calculate the result, which is going to be num1 123 124 00:10:19,400 --> 00:10:23,830 + num2, which is making a really simple calculator that adds two numbers. 124 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 125 126 00:10:32,660 --> 00:10:38,820 is “, and then we're going to append that variable result onto the end. 126 127 00:10:39,320 --> 00:10:41,180 So now let's hit save, 127 128 00:10:41,180 --> 00:10:42,560 update our server, 128 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, 129 130 00:10:48,080 --> 00:10:53,450 press Calculate, the result of the calculation is 45. 130 131 00:10:53,480 --> 00:10:55,290 So what's going on here? 131 132 00:10:55,550 --> 00:11:01,210 Well, this num1 and num2 that we're getting back from bodyParser, 132 133 00:11:01,400 --> 00:11:04,230 it gets parsed as text, 133 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. 134 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 135 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. 136 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 137 138 00:11:35,480 --> 00:11:37,090 to num2. 138 139 00:11:37,100 --> 00:11:39,500 So let's try this again. 139 140 00:11:39,730 --> 00:11:43,000 The first number is 4, second number is 5. 140 141 00:11:43,200 --> 00:11:46,080 And now we get 9. 141 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 142 143 00:11:52,400 --> 00:11:55,500 into your index.html and changing the name here. 143 144 00:11:55,520 --> 00:11:59,230 Let's call it n1 and n2 instead. 144 145 00:11:59,480 --> 00:12:03,820 And now we can tap into it through n1 and n2. 145 146 00:12:04,070 --> 00:12:09,290 So the body is everything that we got after we parsed the request, 146 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. 147 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. 148 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 149 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 150 151 00:12:37,070 --> 00:12:39,660 to get to send back the result. 151 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 152 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 153 154 00:12:53,420 --> 00:12:55,310 for all of this to make sense. 154 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. 155 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 156 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 157 158 00:13:14,150 --> 00:13:15,340 go to this web site 158 159 00:13:15,650 --> 00:13:19,760 is just a plain and simple HTML web site. 159 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. 160 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. 161 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 162 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 163 164 00:13:49,580 --> 00:13:50,490 to take away. 164 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 165 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 166 167 00:14:05,090 --> 00:14:07,890 end. Now in the next lesson, 167 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 168 169 00:14:13,490 --> 00:14:14,600 few lessons. 169 170 00:14:14,750 --> 00:14:17,830 So head over there and try and give it a go.