1 00:00:02,330 --> 00:00:04,210 Now that we got our files 2 00:00:04,210 --> 00:00:05,710 and routes migrated, 3 00:00:05,710 --> 00:00:07,850 let's start handling user input 4 00:00:07,850 --> 00:00:10,550 when that form here is submitted. 5 00:00:10,550 --> 00:00:13,903 And for that, we need what in our server-side code? 6 00:00:14,920 --> 00:00:16,810 We want a POST route. 7 00:00:16,810 --> 00:00:18,950 We want to handle incoming POST requests 8 00:00:18,950 --> 00:00:20,180 because as we learned, 9 00:00:20,180 --> 00:00:22,880 if a form is submitted with the intention 10 00:00:22,880 --> 00:00:25,740 of that data to be stored on the server, 11 00:00:25,740 --> 00:00:28,300 we wanna send a POST request 12 00:00:28,300 --> 00:00:31,500 so that the data can also neatly be merged 13 00:00:31,500 --> 00:00:33,510 with the request body. 14 00:00:33,510 --> 00:00:36,580 And therefore, somewhere here in app.js, 15 00:00:36,580 --> 00:00:38,650 the exact position does not matter, 16 00:00:38,650 --> 00:00:40,400 I will add another route 17 00:00:40,400 --> 00:00:42,870 but this time for incoming post requests 18 00:00:42,870 --> 00:00:45,550 by using the post method on app. 19 00:00:45,550 --> 00:00:48,390 Now, the path which we expect here 20 00:00:48,390 --> 00:00:49,900 is totally up to you 21 00:00:49,900 --> 00:00:54,140 but I will actually use recommend again, 22 00:00:54,140 --> 00:00:57,010 which I did already use up here for get. 23 00:00:57,010 --> 00:00:58,800 Now I'll use it again here for post, 24 00:00:58,800 --> 00:01:01,350 and therefore, I'll actually grab this post route 25 00:01:01,350 --> 00:01:04,010 and move its definition close to the get route, 26 00:01:04,010 --> 00:01:05,990 not because it's required 27 00:01:05,990 --> 00:01:08,500 but because it shows us as the developer 28 00:01:08,500 --> 00:01:10,803 that the two routes are kind of connected. 29 00:01:11,690 --> 00:01:13,270 And you might wonder here 30 00:01:13,270 --> 00:01:15,750 if it's allowed to use the same path 31 00:01:15,750 --> 00:01:17,910 for two different routes? 32 00:01:17,910 --> 00:01:19,400 And the answer is yes 33 00:01:19,400 --> 00:01:24,250 if you use different HTTP methods, GET and POST. 34 00:01:24,250 --> 00:01:28,150 It would not be valid to define another get route here. 35 00:01:28,150 --> 00:01:29,530 I mean, you could do that 36 00:01:29,530 --> 00:01:32,740 but this code here would actually never execute 37 00:01:32,740 --> 00:01:36,030 because this route already handles the incoming request 38 00:01:36,030 --> 00:01:37,690 and sends back a file. 39 00:01:37,690 --> 00:01:40,140 So this here would be redundant. 40 00:01:40,140 --> 00:01:43,550 Your routes are evaluated from top to bottom 41 00:01:43,550 --> 00:01:46,263 in that file, and hence, this would be skipped. 42 00:01:47,240 --> 00:01:49,080 But for a post request, 43 00:01:49,080 --> 00:01:52,090 this get route will not become active 44 00:01:52,090 --> 00:01:54,250 and hence, this handler here 45 00:01:54,250 --> 00:01:57,480 would actually then handle this incoming request. 46 00:01:57,480 --> 00:01:59,593 So yes, this is something we can do. 47 00:02:00,970 --> 00:02:02,610 And therefore now here, 48 00:02:02,610 --> 00:02:06,100 we again wanna parse the incoming request data 49 00:02:06,100 --> 00:02:07,680 and then store it. 50 00:02:07,680 --> 00:02:10,020 And for the moment, I'll again store it 51 00:02:10,020 --> 00:02:12,920 in a file because we don't know yet 52 00:02:12,920 --> 00:02:15,310 how to work with databases. 53 00:02:15,310 --> 00:02:19,410 Now, you did learn that in order to use incoming data, 54 00:02:19,410 --> 00:02:22,907 we got this body property on the request object, 55 00:02:22,907 --> 00:02:26,810 but you also learned that it will only be populated 56 00:02:26,810 --> 00:02:30,270 if we added some middleware to this Express app 57 00:02:30,270 --> 00:02:32,590 that actually tells Express to look 58 00:02:32,590 --> 00:02:34,190 into incoming requests 59 00:02:34,190 --> 00:02:37,190 and try to extract incoming data. 60 00:02:37,190 --> 00:02:39,590 And therefore, we should add that middleware. 61 00:02:39,590 --> 00:02:42,190 We typically do that at the beginning of this file, 62 00:02:42,190 --> 00:02:44,177 just as we do it for the static files. 63 00:02:44,177 --> 00:02:46,470 And then hereafter, 64 00:02:46,470 --> 00:02:48,960 or in front of the static file middleware, 65 00:02:48,960 --> 00:02:50,290 it doesn't matter, 66 00:02:50,290 --> 00:02:53,670 you can use express.urlencoded 67 00:02:53,670 --> 00:02:56,550 and pass this object, this configuration object 68 00:02:56,550 --> 00:02:59,670 to it where you set extended to false, 69 00:02:59,670 --> 00:03:01,393 just as we did it before. 70 00:03:02,670 --> 00:03:04,480 Now, with that, the incoming request data 71 00:03:04,480 --> 00:03:05,450 should be parsed, 72 00:03:05,450 --> 00:03:08,243 and in this post route, we now have access to it. 73 00:03:09,080 --> 00:03:12,760 Now, if we have a look at recommend.html 74 00:03:12,760 --> 00:03:15,450 at the form we find there, 75 00:03:15,450 --> 00:03:18,520 then we see that in there, we got a couple of inputs, 76 00:03:18,520 --> 00:03:21,990 and that they all already have a name attribute, 77 00:03:21,990 --> 00:03:26,820 name, address, cuisine, website, and description, 78 00:03:29,890 --> 00:03:34,260 and we can extract the data by these keys therefore 79 00:03:34,260 --> 00:03:36,113 in our backend code. 80 00:03:36,970 --> 00:03:39,020 We'll also have to come back to the form element 81 00:03:39,020 --> 00:03:40,730 and configure this correctly 82 00:03:40,730 --> 00:03:43,010 but for the moment, let's go back to app.js 83 00:03:43,010 --> 00:03:45,233 and extract that data correctly. 84 00:03:46,090 --> 00:03:50,010 For example, the name, which was the first field we have 85 00:03:50,010 --> 00:03:53,110 in there for the restaurant name. 86 00:03:53,110 --> 00:03:55,280 I'll store the data stored in that field 87 00:03:55,280 --> 00:03:57,963 in a constant named restaurantName. 88 00:03:59,140 --> 00:04:03,150 And then I'll continue like this for my other fields as well 89 00:04:03,150 --> 00:04:05,183 to also store the address and so on. 90 00:04:06,040 --> 00:04:07,830 Or do I? 91 00:04:07,830 --> 00:04:09,980 Let's think about this again. 92 00:04:09,980 --> 00:04:12,910 We, in the end, wanna extract all that data 93 00:04:12,910 --> 00:04:16,160 to then store it together as one piece of data 94 00:04:16,160 --> 00:04:18,180 in a JSON file let's say, 95 00:04:18,180 --> 00:04:20,550 as we did it in the previous section. 96 00:04:20,550 --> 00:04:22,120 Now, if that is our goal 97 00:04:22,120 --> 00:04:24,690 to store the data as a whole somewhere, 98 00:04:24,690 --> 00:04:25,800 then we don't even need 99 00:04:25,800 --> 00:04:29,250 to extract all those different keys here. 100 00:04:29,250 --> 00:04:32,410 Instead, we could just store request.body as a whole, 101 00:04:32,410 --> 00:04:33,680 and that's what I'll do here. 102 00:04:33,680 --> 00:04:37,010 I'll add a restaurant constant 103 00:04:37,010 --> 00:04:39,690 and just store request.body in it, 104 00:04:39,690 --> 00:04:42,790 and then I wanna store this restaurant value, 105 00:04:42,790 --> 00:04:45,260 so this body object which we have here, 106 00:04:45,260 --> 00:04:48,123 in a JSON file, which we have yet to create. 107 00:04:49,140 --> 00:04:50,490 So that's what I'll do next. 108 00:04:50,490 --> 00:04:52,600 I'll create this file, 109 00:04:52,600 --> 00:04:55,670 and I'll store it in a data folder as I did before, 110 00:04:55,670 --> 00:04:57,620 and name it restaurants.json. 111 00:04:59,910 --> 00:05:02,940 Again, in there, I'll add this empty array, 112 00:05:02,940 --> 00:05:04,964 the empty square brackets 113 00:05:04,964 --> 00:05:06,980 so that we can then read that file 114 00:05:06,980 --> 00:05:10,540 and add stored or submitted restaurants into this array, 115 00:05:10,540 --> 00:05:13,990 and store the updated array back into this JSON file. 116 00:05:13,990 --> 00:05:17,710 So therefore here back in this post recommend route, 117 00:05:17,710 --> 00:05:20,350 I now wanna open that file, 118 00:05:20,350 --> 00:05:22,750 edit the data and store it back. 119 00:05:22,750 --> 00:05:26,970 For that, we first of all need our filePath again 120 00:05:26,970 --> 00:05:30,060 with path.join as we did it before 121 00:05:30,060 --> 00:05:34,340 with __dirname, then the data folder 122 00:05:34,340 --> 00:05:35,340 and then the file name, 123 00:05:35,340 --> 00:05:38,860 which was restaurants.json. 124 00:05:38,860 --> 00:05:39,693 Like this. 125 00:05:40,870 --> 00:05:42,500 And with that filePath, 126 00:05:42,500 --> 00:05:44,453 we can open that file and read it. 127 00:05:46,250 --> 00:05:49,570 For this, we need this file system package, 128 00:05:49,570 --> 00:05:50,930 which is built into NodeJS, 129 00:05:50,930 --> 00:05:53,023 which we also used before already. 130 00:05:53,920 --> 00:05:55,570 Require it like that. 131 00:05:55,570 --> 00:05:58,940 And then here in this post route, 132 00:05:58,940 --> 00:06:02,090 we can now use this file system to read the content 133 00:06:02,090 --> 00:06:02,990 with readFileSync. 134 00:06:04,490 --> 00:06:07,430 Again, the sync part is important for now. 135 00:06:07,430 --> 00:06:10,120 And then we pass filePath to that, 136 00:06:10,120 --> 00:06:12,683 and this will then give us our fileData. 137 00:06:14,240 --> 00:06:17,080 Now, as mentioned, even though that data might look 138 00:06:17,080 --> 00:06:18,250 like an array to us, 139 00:06:18,250 --> 00:06:20,120 technically, it's just some text, 140 00:06:20,120 --> 00:06:23,370 and we need to translate this into a JavaScript array 141 00:06:23,370 --> 00:06:25,750 with help of this JSON.parse helper, 142 00:06:25,750 --> 00:06:27,490 which we also used before. 143 00:06:27,490 --> 00:06:31,960 So we got our storedRestaurants here, 144 00:06:31,960 --> 00:06:34,980 which we can get by using JSON.parse 145 00:06:34,980 --> 00:06:36,893 on that raw fileData. 146 00:06:38,600 --> 00:06:40,620 And then we can use the storedRestaurants 147 00:06:40,620 --> 00:06:43,963 to add this new restaurant that was submitted here. 148 00:06:45,420 --> 00:06:48,880 So for that, we can use storedRestaurants 149 00:06:48,880 --> 00:06:53,620 and push this new restaurant into this array. 150 00:06:53,620 --> 00:06:57,280 And then we wanna save this restaurants array. 151 00:06:57,280 --> 00:07:02,040 So for that, we want to again use the file system package. 152 00:07:02,040 --> 00:07:04,020 This time with writeFileSync. 153 00:07:05,200 --> 00:07:07,830 Again, use the filePath from before 154 00:07:07,830 --> 00:07:09,630 but the data which I now wanna store 155 00:07:09,630 --> 00:07:12,230 is this storedRestaurants array, 156 00:07:12,230 --> 00:07:15,970 again converted back to text in that JSON format 157 00:07:15,970 --> 00:07:18,930 by using JSON.stringify here. 158 00:07:18,930 --> 00:07:21,600 And then we pass storedRestaurants 159 00:07:21,600 --> 00:07:23,847 as a value to stringify. 160 00:07:24,800 --> 00:07:27,280 Now, that should store the data in the JSON file. 161 00:07:27,280 --> 00:07:30,688 We, of course, still wanna send back a response as well. 162 00:07:30,688 --> 00:07:33,749 And for this, of course, we use the response object 163 00:07:33,749 --> 00:07:37,250 but the question is what do we now send back? 164 00:07:37,250 --> 00:07:40,140 In the end, I wanna send back this confirm page 165 00:07:40,140 --> 00:07:43,610 but we're now going to do something new. 166 00:07:43,610 --> 00:07:45,990 Before, in the previous course section, 167 00:07:45,990 --> 00:07:50,990 I did, indeed, just send back a HTML response. 168 00:07:51,050 --> 00:07:52,910 But this had one disadvantage. 169 00:07:52,910 --> 00:07:55,110 It meant that if the user ever tried 170 00:07:55,110 --> 00:07:58,320 to reload the confirmation page, 171 00:07:58,320 --> 00:08:00,910 he or she would get this warning 172 00:08:00,910 --> 00:08:03,910 or this question whether that form data 173 00:08:03,910 --> 00:08:05,860 should be submitted again. 174 00:08:05,860 --> 00:08:08,900 And that's not the behavior I wanna have here, 175 00:08:08,900 --> 00:08:11,070 also because I don't want users 176 00:08:11,070 --> 00:08:14,010 to accidentally click on yes in this prompt 177 00:08:14,010 --> 00:08:16,160 and submit the same data again, 178 00:08:16,160 --> 00:08:20,210 which would cause the same restaurant to be stored again. 179 00:08:20,210 --> 00:08:23,810 Therefore, instead of sending back some HTML content here 180 00:08:23,810 --> 00:08:25,660 as part of the post route, 181 00:08:25,660 --> 00:08:28,190 I'd like to redirect users 182 00:08:28,190 --> 00:08:31,990 so that once this post request was sent and handled, 183 00:08:31,990 --> 00:08:34,870 I tell the browser that the browser should switch 184 00:08:34,870 --> 00:08:36,710 to a different page. 185 00:08:36,710 --> 00:08:39,200 And we can send such a instruction 186 00:08:39,200 --> 00:08:41,470 to the browser from the server 187 00:08:41,470 --> 00:08:46,010 by using the built-in redirect method, 188 00:08:46,010 --> 00:08:50,053 which is offered by Express on this response object. 189 00:08:51,260 --> 00:08:53,010 And redirect takes a string, 190 00:08:53,010 --> 00:08:56,440 which simply contains the path we wanna redirect to. 191 00:08:56,440 --> 00:08:58,870 And in my case, that's /confirm 192 00:08:58,870 --> 00:09:02,083 so that I do redirect to this path down there. 193 00:09:04,740 --> 00:09:06,580 So that's now how we can redirect 194 00:09:06,580 --> 00:09:08,520 once the data was submitted. 195 00:09:08,520 --> 00:09:10,150 And with all of that, 196 00:09:10,150 --> 00:09:13,230 we now just have to go to the recommend.html file 197 00:09:13,230 --> 00:09:15,870 and configure this form correctly. 198 00:09:15,870 --> 00:09:19,270 And you learned that we do this on this from element 199 00:09:19,270 --> 00:09:22,973 with help of the action and the method attributes. 200 00:09:24,000 --> 00:09:27,060 Action is the path, method is get or post, 201 00:09:27,060 --> 00:09:29,370 and of course, here we wanna enter the data 202 00:09:29,370 --> 00:09:32,040 that we did now configure in app.js. 203 00:09:32,040 --> 00:09:36,530 The path is /recommend, so that's our action here. 204 00:09:37,810 --> 00:09:39,713 And the method, of course, is POST. 205 00:09:41,230 --> 00:09:44,760 With that, if we now save everything again, 206 00:09:44,760 --> 00:09:47,900 if I reload this recommend page here in the browser, 207 00:09:47,900 --> 00:09:49,670 let's try submitting this. 208 00:09:49,670 --> 00:09:51,960 Now, for this, we first of all have to enter something 209 00:09:51,960 --> 00:09:56,230 because I added some validation HTML attributes 210 00:09:56,230 --> 00:09:59,980 and therefore, I'll add some data here like Test. 211 00:09:59,980 --> 00:10:03,633 Teststreet 5, Testcity. 212 00:10:04,730 --> 00:10:07,770 Now let's say this is Italian cuisine. 213 00:10:07,770 --> 00:10:12,770 The website is https://mytest.com, 214 00:10:13,260 --> 00:10:14,710 which probably exists 215 00:10:14,710 --> 00:10:16,120 but I haven't looked it up. 216 00:10:16,120 --> 00:10:18,150 It's just some dummy data, of course. 217 00:10:18,150 --> 00:10:20,173 And here I'll say it's awesome. 218 00:10:21,770 --> 00:10:25,090 With that, if I now click share restaurant, 219 00:10:25,090 --> 00:10:27,120 we go to this confirm page, 220 00:10:27,120 --> 00:10:28,610 we can now also reload this page 221 00:10:28,610 --> 00:10:29,940 without getting this warning 222 00:10:29,940 --> 00:10:31,870 because we redirected, 223 00:10:31,870 --> 00:10:33,460 and you'll see that we redirected 224 00:10:33,460 --> 00:10:36,463 because the path here changed in the URL bar. 225 00:10:37,490 --> 00:10:39,430 And if we have a look at restaurants.json, 226 00:10:39,430 --> 00:10:42,280 we see the data was stored there. 227 00:10:42,280 --> 00:10:45,210 You can also press the auto format shortcut here 228 00:10:45,210 --> 00:10:47,780 to have that in a more readable way. 229 00:10:47,780 --> 00:10:49,240 So that's the data I entered. 230 00:10:49,240 --> 00:10:51,950 It was submitted and stored succeeded, 231 00:10:51,950 --> 00:10:54,163 and that's therefore, all looking great. 232 00:10:55,010 --> 00:10:57,770 Now, let's try another restaurant just to be safe. 233 00:10:57,770 --> 00:11:02,770 Here I'll name this Test 2 in Teststreet 10, Testcity 2. 234 00:11:04,780 --> 00:11:07,170 This is Indian let's say. 235 00:11:07,170 --> 00:11:12,170 And then here I have mygreattest.com. 236 00:11:12,270 --> 00:11:16,370 It's also amazing 237 00:11:16,370 --> 00:11:17,780 is what I'll enter here. 238 00:11:17,780 --> 00:11:19,300 Share this restaurant. 239 00:11:19,300 --> 00:11:20,490 It works. 240 00:11:20,490 --> 00:11:23,130 And now if I reformat this again, 241 00:11:23,130 --> 00:11:26,053 we see that second restaurant was stored as well. 242 00:11:27,220 --> 00:11:29,560 So that is all working. 243 00:11:29,560 --> 00:11:31,270 Now, of course, the next step 244 00:11:31,270 --> 00:11:34,830 is to load that data and present it 245 00:11:34,830 --> 00:11:37,400 when we visit browse restaurants. 246 00:11:37,400 --> 00:11:39,900 And that will now be a major step forward 247 00:11:39,900 --> 00:11:43,650 because that will now introduce a brand new topic, 248 00:11:43,650 --> 00:11:46,565 generating HTML code dynamically 249 00:11:46,565 --> 00:11:49,823 with help of so-called template files.