1 00:00:02,120 --> 00:00:03,910 Now, with Express installed, 2 00:00:03,910 --> 00:00:05,980 let's finally get to the point 3 00:00:05,980 --> 00:00:08,420 to write more useful server-side code 4 00:00:08,420 --> 00:00:11,370 and do something we couldn't do before. 5 00:00:11,370 --> 00:00:13,680 Because just outputting a date snapshot, 6 00:00:13,680 --> 00:00:14,840 we could have done that 7 00:00:14,840 --> 00:00:17,680 with browser-side JavaScript as well. 8 00:00:17,680 --> 00:00:19,520 We could have manipulated the DOM 9 00:00:19,520 --> 00:00:23,230 and just output the current date snapshot there. 10 00:00:23,230 --> 00:00:25,260 But now I wanna output a form 11 00:00:25,260 --> 00:00:29,800 where users can enter some data, let's say simply a name, 12 00:00:29,800 --> 00:00:32,740 and then I wanna store that data 13 00:00:32,740 --> 00:00:36,710 in a file on my server, so on this remote machine, 14 00:00:36,710 --> 00:00:41,150 a file not accessible by my clients, by my users therefore, 15 00:00:41,150 --> 00:00:43,690 because it's stored on my machine, 16 00:00:43,690 --> 00:00:48,690 and I then, as a last step, also want to set up a route, 17 00:00:49,580 --> 00:00:52,150 so a path that we handle here, 18 00:00:52,150 --> 00:00:55,140 where we list all the submitted names. 19 00:00:55,140 --> 00:00:58,210 This might not be too useful as a website right now, 20 00:00:58,210 --> 00:01:01,970 but it allows us to practice all these key functionalities 21 00:01:01,970 --> 00:01:05,620 which we can then combine into a more useful example 22 00:01:05,620 --> 00:01:07,660 in a second step. 23 00:01:07,660 --> 00:01:10,950 And therefore, let's stick to this example here, 24 00:01:10,950 --> 00:01:13,340 and let's say for just slash nothing, 25 00:01:13,340 --> 00:01:17,283 instead of returning Hello World, I wanna return a form. 26 00:01:18,310 --> 00:01:23,310 Now, we might in reality return a correct HTML skeleton here 27 00:01:24,560 --> 00:01:29,370 with the DOCTYPE and the HTML element and so on, 28 00:01:29,370 --> 00:01:32,110 but for the moment I'll just return the form 29 00:01:32,110 --> 00:01:35,370 and let the browser add those missing elements. 30 00:01:35,370 --> 00:01:39,760 We will soon get back to better HTML structures, 31 00:01:39,760 --> 00:01:43,250 and we will soon get back to HTML files again, 32 00:01:43,250 --> 00:01:44,190 but for the moment, 33 00:01:44,190 --> 00:01:48,963 let's stick to this string-based, simple HTML content. 34 00:01:50,120 --> 00:01:55,120 Now, in this form, I will add a label, a label element, 35 00:01:55,190 --> 00:01:57,060 and we don't get out a completion here, 36 00:01:57,060 --> 00:02:00,480 so make sure you don't introduce any typos, 37 00:02:00,480 --> 00:02:02,290 and I'll say Your Name. 38 00:02:02,290 --> 00:02:03,960 And then after this label, 39 00:02:03,960 --> 00:02:07,290 I'll add the input element of type text 40 00:02:07,290 --> 00:02:10,282 where the user should then enter his or her name. 41 00:02:11,400 --> 00:02:13,970 Now, we could improve this with styling. 42 00:02:13,970 --> 00:02:17,350 We should normally add an id here. 43 00:02:17,350 --> 00:02:20,830 But for demo purposes, since this is all in one string 44 00:02:20,830 --> 00:02:23,090 and therefore already a bit hard to read, 45 00:02:23,090 --> 00:02:25,750 I'll keep this very short and concise, 46 00:02:25,750 --> 00:02:27,763 and just add the bare minimum. 47 00:02:28,940 --> 00:02:31,570 With that, if you save this file, 48 00:02:31,570 --> 00:02:34,323 and you restart your server, 49 00:02:36,330 --> 00:02:38,700 if you go back to just slash nothing, 50 00:02:38,700 --> 00:02:40,163 you see this form here. 51 00:02:41,350 --> 00:02:45,030 As a side note, if you did not stop your server before, 52 00:02:45,030 --> 00:02:48,160 if it was already running, and you reload it, 53 00:02:48,160 --> 00:02:51,820 you might not see that updated element. 54 00:02:51,820 --> 00:02:53,990 You might not see that form. 55 00:02:53,990 --> 00:02:55,020 The reason for that 56 00:02:55,020 --> 00:02:58,760 is that whenever you change your Node.js code, 57 00:02:58,760 --> 00:03:01,030 you need to quit your running server, 58 00:03:01,030 --> 00:03:05,949 which was started based on the old code, and restart it. 59 00:03:05,949 --> 00:03:09,490 Otherwise, you won't see your latest changes. 60 00:03:09,490 --> 00:03:11,560 This can be a bit cumbersome and annoying, 61 00:03:11,560 --> 00:03:13,970 and we'll find a workaround for that soon, 62 00:03:13,970 --> 00:03:16,270 but for the moment we'll just keep on stopping 63 00:03:16,270 --> 00:03:19,713 and restarting whenever we change and save our code. 64 00:03:21,070 --> 00:03:24,700 Now, I'll keep that open here, just shrink this a bit 65 00:03:24,700 --> 00:03:27,340 so that we still have that running server here, 66 00:03:27,340 --> 00:03:29,560 we can now continue our work 67 00:03:29,560 --> 00:03:33,123 because the idea now is that that form gets submittable. 68 00:03:34,090 --> 00:03:36,200 For this, I'll also add a button here 69 00:03:36,200 --> 00:03:40,210 with the button element, opening and closing tags, 70 00:03:40,210 --> 00:03:42,383 where I say Submit as a caption. 71 00:03:43,740 --> 00:03:46,920 And now you learned in that Forms course section 72 00:03:46,920 --> 00:03:50,370 that such a button by default will submit the form 73 00:03:50,370 --> 00:03:52,030 in which it sits, 74 00:03:52,030 --> 00:03:55,610 and hence on this form, on this form element, 75 00:03:55,610 --> 00:04:00,600 we can define the path the request should be sent to 76 00:04:00,600 --> 00:04:04,550 and the method that should be used for that request. 77 00:04:04,550 --> 00:04:06,090 If that's brand new to you, 78 00:04:06,090 --> 00:04:08,450 definitely go back to that Forms section 79 00:04:08,450 --> 00:04:11,560 because I do talk about it there. 80 00:04:11,560 --> 00:04:13,910 And here I now can set the path 81 00:04:13,910 --> 00:04:17,800 by adding the action attribute with double quotes, 82 00:04:17,800 --> 00:04:21,600 and I wanna set this to store-user. 83 00:04:21,600 --> 00:04:25,710 Now, this path is up to you, but I'll choose store-user, 84 00:04:25,710 --> 00:04:28,643 and I'll set the method to POST here, 85 00:04:29,510 --> 00:04:32,250 all caps between double quotes. 86 00:04:32,250 --> 00:04:34,460 The alternative would be GET, 87 00:04:34,460 --> 00:04:37,370 and we could make both approaches work, 88 00:04:37,370 --> 00:04:40,350 but the default is to use a POST method 89 00:04:40,350 --> 00:04:44,170 for sending data from the browser to the server 90 00:04:44,170 --> 00:04:47,230 if the server should then store that data. 91 00:04:47,230 --> 00:04:49,670 Now, what actually happens will depend 92 00:04:49,670 --> 00:04:51,560 on the server-side code you write, 93 00:04:51,560 --> 00:04:53,470 and that's what we'll do next, 94 00:04:53,470 --> 00:04:55,570 but the convention is to use POST 95 00:04:55,570 --> 00:04:59,000 if you wanna indicate that the data that is submitted 96 00:04:59,000 --> 00:05:01,740 should be stored on the server. 97 00:05:01,740 --> 00:05:03,570 And that is what I wanna achieve here, 98 00:05:03,570 --> 00:05:05,363 so I will go for POST. 99 00:05:06,490 --> 00:05:08,820 And now with that, we have a way 100 00:05:08,820 --> 00:05:12,130 of submitting the form and sending such a request. 101 00:05:12,130 --> 00:05:13,230 As a next step, 102 00:05:13,230 --> 00:05:18,110 we need a way of handling a POST request to this path. 103 00:05:18,110 --> 00:05:20,580 And at the moment, we only have two handlers 104 00:05:20,580 --> 00:05:23,843 for GET requests to these paths here. 105 00:05:24,860 --> 00:05:27,280 So we need to add a brand new handler. 106 00:05:27,280 --> 00:05:29,380 Doesn't matter where you add it, 107 00:05:29,380 --> 00:05:32,580 in front of the other handlers or after it. 108 00:05:32,580 --> 00:05:35,450 Here I'll add it after the other handlers, 109 00:05:35,450 --> 00:05:38,543 and now we don't need get but post. 110 00:05:39,450 --> 00:05:43,270 Express.js offers different methods on this app object 111 00:05:43,270 --> 00:05:47,620 for different kinds of HTTP requests that can be sent. 112 00:05:47,620 --> 00:05:50,610 And thus far, we handled GET requests. 113 00:05:50,610 --> 00:05:53,333 Now, with post, we'll handle a POST request. 114 00:05:54,460 --> 00:05:58,960 Now, still as a first argument, as a first-parameter value, 115 00:05:58,960 --> 00:06:02,390 we now define the path that should be used, 116 00:06:02,390 --> 00:06:04,520 and here that's store-user 117 00:06:04,520 --> 00:06:07,033 because that's the path I'm defining here. 118 00:06:08,220 --> 00:06:11,393 So you should make sure that these paths are equal. 119 00:06:12,930 --> 00:06:17,930 Then, again, the second parameter is a handler function 120 00:06:17,970 --> 00:06:21,533 which works just as before, with request and response. 121 00:06:23,170 --> 00:06:27,410 And now we still also want to send back a response, 122 00:06:27,410 --> 00:06:32,410 but I now also wanna extract the data that's submitted 123 00:06:32,650 --> 00:06:37,440 because that's the great thing about this form HTML element. 124 00:06:37,440 --> 00:06:41,090 When used in a browser with the POST method, 125 00:06:41,090 --> 00:06:42,730 once this form is submitted, 126 00:06:42,730 --> 00:06:46,980 the browser will automatically send a POST HTTP request 127 00:06:46,980 --> 00:06:50,070 to this path on the current URL, 128 00:06:50,070 --> 00:06:54,340 and it will take all the fields that are in the form 129 00:06:54,340 --> 00:06:59,103 and add them as data to that outgoing request. 130 00:06:59,970 --> 00:07:03,280 The only addition we need to make to this input element 131 00:07:03,280 --> 00:07:04,610 to make that work 132 00:07:04,610 --> 00:07:08,160 is an extra attribute which should be called name, 133 00:07:08,160 --> 00:07:11,713 and here I'll then choose username as a name. 134 00:07:12,850 --> 00:07:15,460 This will then give us a key which we can use 135 00:07:15,460 --> 00:07:19,360 to extract the data inserted into this input. 136 00:07:19,360 --> 00:07:22,950 Otherwise, that input data would not be submitted. 137 00:07:22,950 --> 00:07:25,400 But with that name set, it will be submitted, 138 00:07:25,400 --> 00:07:29,220 and we will be able to use this username name, 139 00:07:29,220 --> 00:07:31,863 which it shows here, to extract the data. 140 00:07:33,280 --> 00:07:37,010 And therefore, now here in this function, 141 00:07:37,010 --> 00:07:41,580 we can now use request body, a special property 142 00:07:41,580 --> 00:07:46,250 which is exposed on this incoming request object by Express, 143 00:07:46,250 --> 00:07:50,650 to get access to the data that was attached to the request, 144 00:07:50,650 --> 00:07:54,240 and in case if a POST request will have that data, 145 00:07:54,240 --> 00:07:58,260 and on body we can then, again, use the dot notation 146 00:07:58,260 --> 00:08:00,590 to access different fields. 147 00:08:00,590 --> 00:08:04,090 Body will basically be a JavaScript object 148 00:08:04,090 --> 00:08:09,080 where keys that we chose here with that name attribute 149 00:08:09,080 --> 00:08:12,150 will be properties on that object. 150 00:08:12,150 --> 00:08:14,440 And the values of those properties 151 00:08:14,440 --> 00:08:16,640 will be the values entered by the user, 152 00:08:16,640 --> 00:08:19,373 in this case the username entered by the user. 153 00:08:20,370 --> 00:08:24,950 So on request body, we can access .username 154 00:08:24,950 --> 00:08:28,573 since we chose username as a name on our input. 155 00:08:29,540 --> 00:08:32,650 And we can store that in a new constant, 156 00:08:32,650 --> 00:08:33,863 maybe named username, 157 00:08:34,760 --> 00:08:37,472 and that will then be the data the user entered. 158 00:08:38,440 --> 00:08:41,440 Now, storing it in a file will be the next step. 159 00:08:41,440 --> 00:08:46,200 For the moment, I just wanna console.log username here 160 00:08:47,770 --> 00:08:50,890 and then also send back a response. 161 00:08:50,890 --> 00:08:53,180 For that, we can use the response again, 162 00:08:53,180 --> 00:08:57,180 and before, we used send to send back a response. 163 00:08:57,180 --> 00:08:58,770 So I'll do that here again 164 00:08:58,770 --> 00:09:02,180 and maybe just again create a h1 element 165 00:09:02,180 --> 00:09:05,530 where we say Username stored 166 00:09:05,530 --> 00:09:07,503 as a success message. 167 00:09:09,790 --> 00:09:14,020 If we do all of that, we can try if that works. 168 00:09:14,020 --> 00:09:17,490 For this, quit that running server with Control + C 169 00:09:17,490 --> 00:09:19,340 since we changed the code, 170 00:09:19,340 --> 00:09:22,200 and make sure that you save your code changes, 171 00:09:22,200 --> 00:09:26,583 and then run this code, this app.js file again. 172 00:09:28,810 --> 00:09:31,270 If we now reload localhost:3000, 173 00:09:31,270 --> 00:09:34,420 we got this input form here with a button. 174 00:09:34,420 --> 00:09:39,420 And if I now enter Max Schwarzmueller here, 175 00:09:41,310 --> 00:09:44,460 and I submit this, you see this crashes. 176 00:09:44,460 --> 00:09:46,053 You see we get an error here. 177 00:09:48,430 --> 00:09:50,620 We also get this error here 178 00:09:50,620 --> 00:09:53,763 in this command prompt where we started our server. 179 00:09:54,600 --> 00:09:57,680 So something's going wrong here, and I'll quit the server 180 00:09:57,680 --> 00:10:00,173 by running, by hitting Control + C again. 181 00:10:01,060 --> 00:10:02,870 But what is the issue here? 182 00:10:02,870 --> 00:10:05,260 Well, Express.js is a library 183 00:10:05,260 --> 00:10:09,830 that mostly deals with routing incoming requests. 184 00:10:09,830 --> 00:10:13,160 So it allows us to define which request to which path 185 00:10:13,160 --> 00:10:16,550 with which method should be handled by which function. 186 00:10:16,550 --> 00:10:19,020 That's what we're doing thus far. 187 00:10:19,020 --> 00:10:22,270 Now, it also gives us easy access to request body, 188 00:10:22,270 --> 00:10:23,900 but there is one crucial step 189 00:10:23,900 --> 00:10:27,720 which it is not doing out of the box like that. 190 00:10:27,720 --> 00:10:31,990 It's not parsing the actual request data. 191 00:10:31,990 --> 00:10:36,080 It gets a request, and it might see that there is data, 192 00:10:36,080 --> 00:10:38,340 but it's not translating that data 193 00:10:38,340 --> 00:10:41,783 to such a JavaScript object automatically. 194 00:10:42,720 --> 00:10:45,120 And here it might help to see 195 00:10:45,120 --> 00:10:48,893 how that request actually looks like that's being sent. 196 00:10:49,740 --> 00:10:52,320 For this, I'm back here in this form. 197 00:10:52,320 --> 00:10:53,840 And if I now submit this again, 198 00:10:53,840 --> 00:10:56,700 maybe with Manu entered here, doesn't matter, 199 00:10:56,700 --> 00:11:00,840 and I do open my browser Developer Tools here in Chrome, 200 00:11:00,840 --> 00:11:04,060 and I do go to the Network tab here, 201 00:11:04,060 --> 00:11:08,620 so this is the tab we wanna go to, then if I click Submit, 202 00:11:08,620 --> 00:11:13,620 you see one failing request down there, the red request. 203 00:11:13,810 --> 00:11:15,260 Here you basically see 204 00:11:15,260 --> 00:11:19,290 all the network requests your site is making. 205 00:11:19,290 --> 00:11:22,710 And here you see one failing request. 206 00:11:22,710 --> 00:11:25,490 Now, you can click on that request to learn more about it, 207 00:11:25,490 --> 00:11:27,480 and you see, for example, the Response. 208 00:11:27,480 --> 00:11:30,320 That was what we inspected before already. 209 00:11:30,320 --> 00:11:31,870 But if you click on Headers, 210 00:11:31,870 --> 00:11:35,170 you see some metadata about this request. 211 00:11:35,170 --> 00:11:37,710 And here in this Headers area, 212 00:11:37,710 --> 00:11:40,580 you see the Request Method: POST, 213 00:11:40,580 --> 00:11:43,270 you see the Status Code sent back by the server, 214 00:11:43,270 --> 00:11:45,150 and you see that here Node and Express 215 00:11:45,150 --> 00:11:49,120 automatically send back 500 as a Status Code 216 00:11:49,120 --> 00:11:51,750 since something went wrong on the server. 217 00:11:51,750 --> 00:11:53,360 We had an error on the server, 218 00:11:53,360 --> 00:11:55,233 and the application crashed here. 219 00:11:56,440 --> 00:11:58,860 And if you scroll down, 220 00:11:58,860 --> 00:12:03,860 you find the Request Headers and also the Request Data. 221 00:12:04,630 --> 00:12:06,260 You can ignore the headers for now. 222 00:12:06,260 --> 00:12:09,240 There are a bunch of headers here, a bunch of metadata 223 00:12:09,240 --> 00:12:13,120 which was added automatically by your browser. 224 00:12:13,120 --> 00:12:14,920 But as you scroll down further, 225 00:12:14,920 --> 00:12:18,990 you find this Form Data part here at the very bottom, 226 00:12:18,990 --> 00:12:22,150 and that is the extra data that was attached 227 00:12:22,150 --> 00:12:25,740 to the request automatically by the browser 228 00:12:25,740 --> 00:12:28,680 because it is a POST request sent 229 00:12:28,680 --> 00:12:31,050 because a form was submitted. 230 00:12:31,050 --> 00:12:34,100 And if you submit a form with the POST method, 231 00:12:34,100 --> 00:12:35,590 which is what we are doing, 232 00:12:35,590 --> 00:12:37,720 then the browser automatically reads 233 00:12:37,720 --> 00:12:40,610 all the form inputs that have a name attribute 234 00:12:40,610 --> 00:12:45,610 and adds their data to this request as so-called Form Data. 235 00:12:46,520 --> 00:12:51,520 And the thing here is that this is not JavaScript code. 236 00:12:51,960 --> 00:12:53,970 It might look kind of similar, 237 00:12:53,970 --> 00:12:55,860 but this is really just some text 238 00:12:55,860 --> 00:12:58,320 that's being attached to the request. 239 00:12:58,320 --> 00:13:01,880 It's not JavaScript code, not a JavaScript object, 240 00:13:01,880 --> 00:13:04,630 instead just some raw text 241 00:13:04,630 --> 00:13:07,240 that needs to be parsed by the server 242 00:13:07,240 --> 00:13:09,520 in order to use it there. 243 00:13:09,520 --> 00:13:12,440 And that's the step that's missing here. 244 00:13:12,440 --> 00:13:14,690 We are sending that request, 245 00:13:14,690 --> 00:13:19,330 and we are ready to handle that request on our server side, 246 00:13:19,330 --> 00:13:22,690 but we are not really parsing the request data 247 00:13:22,690 --> 00:13:25,890 before we try to use it in JavaScript code. 248 00:13:25,890 --> 00:13:29,050 And that's a missing step which we have to add here. 249 00:13:29,050 --> 00:13:31,800 We have to tell Express that it should do that, 250 00:13:31,800 --> 00:13:35,160 and thankfully that is fairly easy. 251 00:13:35,160 --> 00:13:40,160 For this, at the top, right after we created the app object, 252 00:13:40,560 --> 00:13:43,333 we should use it and use the use method. 253 00:13:44,480 --> 00:13:46,780 Before, we saw get and post. 254 00:13:46,780 --> 00:13:50,450 Use also allows us to handle incoming requests, 255 00:13:50,450 --> 00:13:51,950 but unlike get and post, 256 00:13:51,950 --> 00:13:55,623 it simply doesn't care about the kind of request that it is. 257 00:13:56,540 --> 00:13:59,670 It will be applied to all requests. 258 00:13:59,670 --> 00:14:02,360 And hence we also don't necessarily need 259 00:14:02,360 --> 00:14:06,050 to define a path here, though we could do that, 260 00:14:06,050 --> 00:14:09,890 but instead we can also directly just add an extra handler 261 00:14:09,890 --> 00:14:14,210 that should be executed on all incoming requests. 262 00:14:14,210 --> 00:14:17,180 And such general handler functions 263 00:14:17,180 --> 00:14:20,470 which apply to more than one type of request 264 00:14:20,470 --> 00:14:23,510 are typically called middleware function 265 00:14:23,510 --> 00:14:25,430 because they are in the middle 266 00:14:25,430 --> 00:14:28,710 between Express seeing that request 267 00:14:28,710 --> 00:14:32,340 and our code handling that request. 268 00:14:32,340 --> 00:14:34,680 And here we need a middleware function 269 00:14:34,680 --> 00:14:38,260 that will look if the request, the incoming request, 270 00:14:38,260 --> 00:14:40,150 has any kind of data 271 00:14:40,150 --> 00:14:43,660 and which will then extract that data. 272 00:14:43,660 --> 00:14:47,310 Now, as a middleware, we will now use Express, 273 00:14:47,310 --> 00:14:49,410 so not the app but Express itself, 274 00:14:49,410 --> 00:14:53,900 and on that access to urlencoded method 275 00:14:53,900 --> 00:14:55,163 which it actually is. 276 00:14:56,580 --> 00:15:01,580 Now, urlencoded is a method that will set up a body parser, 277 00:15:02,530 --> 00:15:06,560 so a incoming request data parser, 278 00:15:06,560 --> 00:15:09,150 that will look at all the incoming requests. 279 00:15:09,150 --> 00:15:11,260 And if they carry form data, 280 00:15:11,260 --> 00:15:13,980 that's what urlencoded will look for, 281 00:15:13,980 --> 00:15:17,570 it will parse that included data 282 00:15:17,570 --> 00:15:21,430 and translate it into a JavaScript object. 283 00:15:21,430 --> 00:15:23,720 Now, the only thing we should also do here 284 00:15:23,720 --> 00:15:27,950 is, to urlencoded, to this method, we should pass 285 00:15:27,950 --> 00:15:31,070 a JavaScript object as an argument 286 00:15:31,070 --> 00:15:34,600 and set extended equal to false here. 287 00:15:34,600 --> 00:15:36,980 This option doesn't matter too much right now, 288 00:15:36,980 --> 00:15:40,893 but we should explicitly set it to avoid getting warnings. 289 00:15:41,930 --> 00:15:44,060 And once you did all of that, 290 00:15:44,060 --> 00:15:47,260 you can open up your command line again 291 00:15:47,260 --> 00:15:52,240 and now execute this server file again, app.js, 292 00:15:52,240 --> 00:15:55,943 and then go back to just localhost:3000/, 293 00:15:58,000 --> 00:16:00,780 and again enter your name like Max Schwarzmueller, 294 00:16:00,780 --> 00:16:02,180 and click Submit. 295 00:16:02,180 --> 00:16:04,760 And now you should get Username stored! here 296 00:16:04,760 --> 00:16:09,130 and the URL changed to /store-user. 297 00:16:09,130 --> 00:16:09,963 The reason for that 298 00:16:09,963 --> 00:16:13,083 is that this request was sent automatically. 299 00:16:14,470 --> 00:16:18,630 Also here, in the command line where you started the server, 300 00:16:18,630 --> 00:16:23,200 you see that console.log output from this line here 301 00:16:23,200 --> 00:16:26,290 where we are logging the username. 302 00:16:26,290 --> 00:16:28,370 So here we see that the incoming data 303 00:16:28,370 --> 00:16:32,693 was extracted correctly and is being output correctly. 304 00:16:34,048 --> 00:16:35,540 If you wanna try this again, 305 00:16:35,540 --> 00:16:37,810 reloading this page won't do the trick. 306 00:16:37,810 --> 00:16:39,610 Indeed, you would get a warning 307 00:16:39,610 --> 00:16:40,990 which you might have seen before 308 00:16:40,990 --> 00:16:43,510 on other pages as well from time to time 309 00:16:43,510 --> 00:16:47,310 because that is a URL that was only loaded 310 00:16:47,310 --> 00:16:50,590 because a POST request was sent. 311 00:16:50,590 --> 00:16:51,960 Whenever you enter something 312 00:16:51,960 --> 00:16:53,830 in the address bar of a browser, 313 00:16:53,830 --> 00:16:55,840 or you click the Reload icon, 314 00:16:55,840 --> 00:16:57,960 you actually do send a GET request, 315 00:16:57,960 --> 00:17:01,040 and the browser actually recognizes that this page 316 00:17:01,040 --> 00:17:04,079 was originally loaded through a POST request 317 00:17:04,079 --> 00:17:07,099 and hence warns you if you maybe want to send 318 00:17:07,099 --> 00:17:08,650 a POST request again 319 00:17:08,650 --> 00:17:11,510 and therefore submit the old form data again. 320 00:17:11,510 --> 00:17:13,900 That's what this error tells you. 321 00:17:13,900 --> 00:17:15,460 Here I don't wanna do that, 322 00:17:15,460 --> 00:17:20,082 so I will cancel and instead manually go back to just /. 323 00:17:20,082 --> 00:17:24,440 And then you could enter the data again or a different name, 324 00:17:24,440 --> 00:17:28,990 submit it again, and you would again see the output here. 325 00:17:28,990 --> 00:17:32,330 So now we are parsing that data successfully. 326 00:17:32,330 --> 00:17:36,580 Now we also wanna store it and then use that stored data 327 00:17:36,580 --> 00:17:39,900 to return a dynamic HTML page 328 00:17:39,900 --> 00:17:42,610 to the visitors of our website. 329 00:17:42,610 --> 00:17:45,183 For the moment, I'll just quit that server again.