WEBVTT 0 00:01.750 --> 00:02.380 So there you go. 1 00:02.380 --> 00:03.070 That's PHP. 2 00:03.100 --> 00:04.630 I told you it's not that bad, right? 3 00:04.660 --> 00:07.390 And finally, I want to look at Node. 4 00:07.420 --> 00:09.280 The same process applies, right? 5 00:09.280 --> 00:15.070 The browser is going to be sending form data via the HTTP protocol to a server and then the server has 6 00:15.070 --> 00:16.160 to retrieve the data. 7 00:16.180 --> 00:21.100 But when we're dealing with Node, getting at the body of data in a POST request is a little bit more 8 00:21.100 --> 00:22.660 involved than with PHP. 9 00:22.870 --> 00:24.180 Why is it a bit more involved? 10 00:24.190 --> 00:26.140 Well, Node is just different to PHP. 11 00:26.350 --> 00:32.120 Specifically, the request object is going to implement the ReadableStream interface. 12 00:32.140 --> 00:34.870 In other words, it's going to be receiving it in chunks. 13 00:34.870 --> 00:39.100 And the good news with Node is that we can grab the data out of the stream by listening for the "data" 14 00:39.100 --> 00:40.510 and "end" events. 15 00:40.510 --> 00:43.990 So again, enough talk I don't even want to show you on the screen examples. 16 00:43.990 --> 00:46.540 Why don't we just hop over to the text editor. 17 00:46.840 --> 00:52.540 Let's start a Node server together, and let's look at how to process a form via using Node. 18 00:52.540 --> 00:53.650 Super, super excited. 19 00:53.650 --> 00:54.670 I'll see you now. 20 00:55.150 --> 00:56.770 We've looked at a PHP example. 21 00:56.770 --> 00:58.570 This is the one we've just done. 22 00:58.570 --> 01:02.840 But now as I mentioned, let's do an example using Node. 23 01:02.870 --> 01:03.290 I know, 24 01:03.290 --> 01:04.790 it's super super exciting, right? 25 01:05.210 --> 01:09.050 Firstly, this action attribute, let's define that later. 26 01:09.230 --> 01:13.850 We don't need that now. But in order to use Node, I want to create a new file. 27 01:13.850 --> 01:19.040 And the way that Node is built allows us to use JavaScript to write server side code. 28 01:19.070 --> 01:25.880 So instead of having this php-server-file.php, let's create a new file called test.js. 29 01:25.880 --> 01:28.910 And this test.js is going to allow us to do numerous things. 30 01:28.910 --> 01:35.300 It's going to allow us (a) to set up a server to listen on whatever port we define and (b) 31 01:35.330 --> 01:39.920 it's going to allow us to actually write the functions defining what we want to happen to that data. 32 01:40.070 --> 01:42.050 Let me just minimize this a bit. 33 01:42.570 --> 01:52.110 And let's now import some Node modules to help us work with HTTP requests. 34 01:52.440 --> 01:53.670 It's very, very easy. 35 01:53.670 --> 01:56.490 All we're going to do is we're going to define a variable called http. 36 01:56.700 --> 01:59.070 We're going to use the keyword require. 37 01:59.100 --> 02:02.490 This is built into Node, and this allows us to import modules. 38 02:02.490 --> 02:07.200 You can think of modules as a big object that has a whole lot of properties and methods straight out 39 02:07.200 --> 02:13.500 of the box that we can access. And the module we want to import from Node is this one called http. 40 02:13.620 --> 02:19.650 There's another one I want and when we send data via a form, remember we're going to be getting a whole 41 02:19.650 --> 02:24.810 lot of key value pairs and in order to work nicely with those key value pairs, I want to import another 42 02:24.810 --> 02:26.400 module called "querystring". 43 02:26.400 --> 02:29.760 So let's define a variable called querystring 44 02:29.760 --> 02:33.390 and of course import this module called querystring. 45 02:34.700 --> 02:35.240 Very simple. 46 02:35.240 --> 02:36.000 Very simple. 47 02:36.020 --> 02:41.540 The next thing I want to do is I want to define what happens with the response, and request objects. 48 02:41.540 --> 02:49.790 So in order to do that, let's define our own processPost function. 49 02:49.790 --> 02:51.230 I'm just going to call it processPost. 50 02:51.230 --> 02:52.250 That's a name I've given it. 51 02:52.250 --> 02:56.330 We could have called it anything we want. In order to do that in JavaScript, you know that we have to 52 02:56.330 --> 02:57.740 use the function keyword. 53 02:57.770 --> 03:04.520 We're going to call our function processPost and we're going to pass this function a request object, 54 03:04.520 --> 03:08.990 a response object, and then a callback function is going to be executed. 55 03:09.050 --> 03:09.310 All right. 56 03:09.330 --> 03:10.880 It's going to be very, very simple. 57 03:10.880 --> 03:14.960 And remember how I said in the lecture that getting at the body data is just a little bit more involved 58 03:14.960 --> 03:16.160 when it comes to Node? 59 03:16.160 --> 03:22.100 And the reason is, is that the request object, remember that the browser sends, is passed into a handler 60 03:22.100 --> 03:24.770 that implements the readable stream interface. 61 03:24.770 --> 03:25.580 Please don't worry 62 03:25.580 --> 03:30.050 with all these big words. All it means is that we've just got to get these pieces of data in chunks. 63 03:30.050 --> 03:34.530 So let's define a variable called queryData. 64 03:34.530 --> 03:36.660 And this is just going to be all our form data, right? 65 03:36.660 --> 03:39.660 And initially it's just going to be an empty string. 66 03:39.660 --> 03:49.050 But now on a POST request, we want to grab the data and put it in a variable and execute our callback. 67 03:49.970 --> 03:50.830 That's what we want to do. 68 03:50.840 --> 03:57.170 So if this request object, its method is POST, what do we want to happen? 69 03:57.660 --> 04:01.530 Well, in that instance, we want to listen for the data event. 70 04:01.530 --> 04:07.590 So every time we get a chunk of data, we want to listen to that, and then add it to our queryData variable. 71 04:07.590 --> 04:12.330 And then when it's finished, we're pretty much done and we want our callback function to execute. 72 04:12.630 --> 04:16.230 So all I want to do is we want to access this request object. 73 04:16.230 --> 04:21.570 This request object is given to us, by the way, when we create the server via Node, this isn't something 74 04:21.570 --> 04:28.140 we've created, so it has a method called on(), and we're going to be listening for the data event. 75 04:28.880 --> 04:32.960 And then what are we going to do is this data event gives us the data every time it's fired - that chunk 76 04:32.960 --> 04:33.680 of data - 77 04:34.070 --> 04:37.160 and then what we want to happen is we want to append it. 78 04:37.430 --> 04:39.800 We want to grab our variable that we defined, 79 04:39.800 --> 04:41.720 remember that queryData variable, 80 04:41.720 --> 04:46.360 and all we want to do is we want to keep appending each chunk of data to it. 81 04:46.370 --> 04:47.630 That's all we've done here. 82 04:47.630 --> 04:48.320 Very, very simple. 83 04:48.320 --> 04:50.840 And I don't want to get into JavaScript right now and the syntax. 84 04:50.840 --> 04:52.610 It'll take me a very, very long time. 85 04:52.610 --> 04:56.410 Just try and follow along at least the concept of what we're doing here. 86 04:56.420 --> 05:00.530 So we're listening for when the request method is set to POST. 87 05:00.560 --> 05:05.450 When that's done, every time a chunk of data is emitted on that request, we're just going to be appending 88 05:05.450 --> 05:11.690 it to this queryData variable that we've defined. When the data is finished being emitted, when all 89 05:11.690 --> 05:14.150 the form data reaches the server, then what? 90 05:14.180 --> 05:15.560 Well then 91 05:16.980 --> 05:20.370 a end event is going to be emitted. 92 05:20.370 --> 05:20.820 Right. 93 05:20.820 --> 05:21.840 Very, very simple. 94 05:22.230 --> 05:29.700 When that happens, all I want to do is I want to now access our request object. On here 95 05:29.700 --> 05:31.950 I want to access a property called post. 96 05:31.980 --> 05:39.330 We're going to use our querystring object that we've imported from Node, and we're going to parse this 97 05:39.330 --> 05:42.600 entire queryData variable. 98 05:42.870 --> 05:47.340 Basically, it's just going to put it into a very nice format that we can use, and that's pretty much 99 05:47.340 --> 05:47.820 it. 100 05:47.970 --> 05:53.970 Then I want to execute our callback function and this callback function we're going to define very shortly. 101 05:53.970 --> 05:55.320 You'll see how that works now. 102 05:55.620 --> 06:00.150 So now we've just defined our IF statement block when the method is set to POST. 103 06:00.180 --> 06:03.390 If it's not set to POST, we can execute this ELSE statement. 104 06:03.390 --> 06:05.250 And this is going to be very simple. 105 06:05.250 --> 06:10.260 All I want to do is access the writeHead() method, and here we're going to respond with an error, a 106 06:10.260 --> 06:14.130 405 error, basically saying that the method is not known or not found. 107 06:14.150 --> 06:14.820 Right. 108 06:14.850 --> 06:19.920 We can specify the content-type as text. 109 06:23.330 --> 06:26.930 And then we can put an end to this response. 110 06:27.290 --> 06:28.280 Makes a lot of sense. 111 06:28.670 --> 06:30.890 So that's our own custom function. 112 06:31.070 --> 06:35.150 But now, we haven't even defined or created our server, right? 113 06:35.180 --> 06:40.460 So let's create a server and define the callback function. 114 06:40.880 --> 06:43.010 Remember the callback function that we executing. 115 06:43.040 --> 06:44.030 Let me just scroll up. 116 06:44.030 --> 06:46.400 You know that callback function we're executing there in our code? 117 06:46.400 --> 06:47.720 We haven't defined that yet. 118 06:50.110 --> 06:51.820 So let's do that now. 119 06:51.850 --> 06:56.620 We're going to create our server by accessing this http variable. 120 06:56.990 --> 07:00.640 Remember, at the very top of our file, we imported this module from Node. 121 07:01.830 --> 07:02.250 Right. 122 07:02.340 --> 07:05.940 That gives us access to a property called createServer(). 123 07:05.970 --> 07:07.110 How convenient. 124 07:07.810 --> 07:14.650 And then we are going to execute a callback function when the server is created, and it gives us access 125 07:14.650 --> 07:19.510 automatically to the request object and the response object. 126 07:19.930 --> 07:21.680 It really, really is this simple. 127 07:21.700 --> 07:24.700 This is what the createServer() method gives us. 128 07:24.730 --> 07:28.990 And here I don't even want to deal with errors if it's a GET and all that kind of stuff. 129 07:28.990 --> 07:33.260 I just want to access our processPost function directly. 130 07:33.280 --> 07:38.460 We're going to execute our postPRO 🤣 ... our processPost function. 131 07:38.470 --> 07:43.960 If we scroll up, we've defined our processPost function as taking three arguments, a request, a 132 07:43.960 --> 07:45.280 response and the callback. 133 07:46.770 --> 07:48.960 Before I implement the callback 134 07:48.960 --> 07:54.930 we just want our request to be in the correct format, which is what this is doing. 135 07:55.020 --> 07:57.120 We are basically taking all the chunks, 136 07:57.150 --> 08:01.800 we then passing it into a nice query string and then we want to execute the callback. 137 08:01.800 --> 08:05.350 But it does take three arguments, the request, the response and the callback. 138 08:05.370 --> 08:11.220 So when we execute our processPost down here, we've got to give it, you guessed it, the request, 139 08:11.250 --> 08:13.560 the response and the callback. 140 08:13.560 --> 08:15.180 But why don't we define the callback now? 141 08:15.190 --> 08:16.560 Because we haven't defined it elsewhere. 142 08:16.590 --> 08:18.310 This is where we're going to put our meat. 143 08:18.330 --> 08:20.940 This is where our code is going to reside. 144 08:20.970 --> 08:24.360 The first thing I want to do is I want to define our food variable. 145 08:24.360 --> 08:25.440 So let's do that. 146 08:25.440 --> 08:30.690 And it's going to be in this request object, in a post property. 147 08:30.690 --> 08:34.970 And we know that the name we gave our variable was food, right? 148 08:34.980 --> 08:36.900 Does this make sense? If we scroll up, 149 08:38.010 --> 08:44.580 remember that on our request object, at the end of receiving all the data, we put our query string 150 08:44.580 --> 08:46.620 into a property called post. 151 08:46.860 --> 08:47.820 Can you see it? 152 08:48.180 --> 08:52.590 So that's all we're doing down here - I'm accessing that post object, 153 08:52.590 --> 08:57.560 and then we know we called that variable food right in our index.html. 154 08:57.570 --> 08:59.370 We've given it a name of food. 155 08:59.370 --> 09:00.780 So don't get lost in all the detail. 156 09:00.780 --> 09:01.980 That's all we've done. 157 09:02.010 --> 09:06.780 Then in order to display it to the browser, we're going to grab our response object, which is given 158 09:06.780 --> 09:09.540 to us directly by this http module. 159 09:09.720 --> 09:11.870 And here there's a method called write(). 160 09:11.880 --> 09:17.520 It's almost like when we use PHP echo, we just using write() here and we want to display to the screen 161 09:17.520 --> 09:18.150 food. 162 09:18.150 --> 09:22.490 And when this is done, we can end our entire response session, right? 163 09:22.500 --> 09:23.940 Very, very simple. 164 09:23.940 --> 09:30.210 And the last thing we have to do is we've created the server, but we need to define where it's listening. 165 09:30.210 --> 09:35.220 So why don't we say we want it to listen on Port 8000? 166 09:37.020 --> 09:37.440 I know. 167 09:37.440 --> 09:38.010 I know. 168 09:38.850 --> 09:39.690 Oh, wow. 169 09:39.720 --> 09:40.620 Very, very cool. 170 09:40.660 --> 09:42.380 So that's pretty much our test.js. 171 09:42.390 --> 09:43.110 I hope it all works. 172 09:43.110 --> 09:43.830 We'll see shortly. 173 09:43.830 --> 09:46.400 But right now we haven't defined an action, right? 174 09:46.410 --> 09:51.240 And remember, we said we're going to be listing here in our Node, we're going to be listening on Port 175 09:51.270 --> 09:52.130 8000. 176 09:52.140 --> 09:58.890 So let's go to our index here and let's just type http and basically our localhost. 177 10:00.080 --> 10:02.300 And we're going to be listening on Port 8000. 178 10:02.330 --> 10:03.680 It should work, my dear students. 179 10:03.680 --> 10:06.790 But now we haven't started our server yet. 180 10:06.800 --> 10:07.100 Right. 181 10:07.100 --> 10:08.300 This test.js server. 182 10:08.300 --> 10:09.920 In order to do that, it is so simple with 183 10:09.920 --> 10:14.450 Node. You type "node" in the terminal and let's start our server. 184 10:14.450 --> 10:18.470 So let's execute our test.js file. 185 10:19.010 --> 10:19.340 Right. 186 10:19.340 --> 10:22.670 We do that, and the server is now listening on port 8000. 187 10:22.700 --> 10:25.850 This is so cool because Node is listening on port 8000 188 10:25.850 --> 10:29.090 now. All we have to do now is start up this index file. 189 10:29.420 --> 10:31.730 So let's go to our browser, start this index file up here. 190 10:33.670 --> 10:34.060 Right. 191 10:34.090 --> 10:34.720 What do you find 192 10:34.750 --> 10:35.290 yum? 193 10:35.290 --> 10:36.010 Gross. 194 10:36.010 --> 10:37.120 Let's submit. 195 10:37.150 --> 10:38.530 And there we go 196 10:38.560 --> 10:42.400 my dear students, we've literally just done the same thing as we did in the PHP example. 197 10:42.400 --> 10:46.120 But now load ... is load ... load ... node 😂 ... 198 10:46.120 --> 10:53.230 but Node is now listening on this Port 8000 and we've used Node to grab our query string and display 199 10:53.230 --> 10:54.520 it back to the browser. 200 10:54.520 --> 10:55.690 How awesome. 201 10:55.690 --> 10:57.760 And don't get lost in all the detail. 202 10:57.760 --> 11:01.360 All we did was we imported some node modules to help us. 203 11:01.390 --> 11:04.660 We imported http and querystring modules. 204 11:04.810 --> 11:07.360 We then defined our own processPost function. 205 11:07.360 --> 11:14.650 I did this because I wanted to get our full request before we implemented our main callback function. 206 11:14.650 --> 11:14.970 Okay. 207 11:15.010 --> 11:16.890 I wanted to listen for all the chunks. 208 11:16.900 --> 11:21.550 I wanted to then parse the query string and only then execute our callback. 209 11:22.000 --> 11:27.910 So if we scroll down, this is our main meat of our code where we create a server, we set it up, we 210 11:27.910 --> 11:34.720 listen on Port 8000, and once the server has received the full request, we only then implement this 211 11:34.720 --> 11:39.970 callback function. And the callback function just grabs our food variable and it writes it back to the 212 11:39.970 --> 11:40.630 browser. 213 11:40.630 --> 11:42.060 And that is pretty much it 214 11:42.070 --> 11:47.260 my dear students. The HTML was very simple and you can see the browser couldn't get more simple than 215 11:47.260 --> 11:47.710 this. 216 11:48.850 --> 11:50.290 Hope you are learning a ton. 217 11:50.310 --> 11:52.710 I know server side code can be quite complex. 218 11:52.710 --> 11:56.030 This is just a very, very rudimentary example. 219 11:56.040 --> 11:57.450 It's not structured that properly. 220 11:57.450 --> 12:02.850 We haven't dealt with errors that well, but I just wanted to at least introduce you to server side 221 12:02.850 --> 12:08.070 code so you can kind of see how it's done and it will give you enough now to start exploring this further. 222 12:08.070 --> 12:08.430 Thank you. 223 12:08.430 --> 12:08.700 Thank you. 224 12:08.730 --> 12:09.420 Thank you. 225 12:09.450 --> 12:11.160 We are so close to ending this course. 226 12:11.160 --> 12:15.240 I'm so sad, but I guess the saying goes ... all good things come to an end. 227 12:15.270 --> 12:16.740 See you in the next lecture.