1 00:00:02,230 --> 00:00:05,620 So let's work on that added post feature. 2 00:00:05,620 --> 00:00:08,980 First of all, we need to link to the added post page again, 3 00:00:08,980 --> 00:00:11,220 then we need to load and render that page 4 00:00:11,220 --> 00:00:13,130 and pre-populate the form there 5 00:00:13,130 --> 00:00:15,700 with the currently entered post data 6 00:00:15,700 --> 00:00:18,160 so that we don't start from a blank form, 7 00:00:18,160 --> 00:00:20,200 but we have the existing data filled 8 00:00:20,200 --> 00:00:22,210 into the form fields already. 9 00:00:22,210 --> 00:00:24,790 And we can then just tweak the fields who want to tweak, 10 00:00:24,790 --> 00:00:26,773 and then we have to handle submission. 11 00:00:28,200 --> 00:00:29,840 So for making the link work, 12 00:00:29,840 --> 00:00:32,850 let's go back to the post-item.ejs file 13 00:00:32,850 --> 00:00:35,250 and let's work on this link. 14 00:00:35,250 --> 00:00:37,670 It's up to you, how the path should look like, 15 00:00:37,670 --> 00:00:40,950 but it could be slash posts then the ID, 16 00:00:40,950 --> 00:00:43,873 which is post dot underscore ID, 17 00:00:44,840 --> 00:00:47,720 just as we have it down there for viewing a post 18 00:00:47,720 --> 00:00:50,020 and then slash edit. 19 00:00:50,020 --> 00:00:52,420 So it's not the same path as for a viewing 20 00:00:52,420 --> 00:00:56,400 it just starts with the same, well start, I guess, 21 00:00:56,400 --> 00:00:58,163 but it's still a different path. 22 00:00:59,520 --> 00:01:03,460 Now we can go to block.js and register and you get route 23 00:01:03,460 --> 00:01:05,300 for this new path. 24 00:01:05,300 --> 00:01:06,680 So here at the bottom, 25 00:01:06,680 --> 00:01:11,590 I'll register a get route for slash posts, some ID. 26 00:01:11,590 --> 00:01:14,550 So we have a dynamic route here again slash edit 27 00:01:15,950 --> 00:01:19,033 that's the path we justified a couple of seconds ago. 28 00:01:20,200 --> 00:01:22,740 And then we can define our function here, 29 00:01:22,740 --> 00:01:27,270 which gets a request and a response separated by a comma 30 00:01:27,270 --> 00:01:31,173 though, where we then handle incoming requests here. 31 00:01:32,270 --> 00:01:34,180 Now, what does handling mean? 32 00:01:34,180 --> 00:01:37,510 It means I wanna render this added page here, 33 00:01:37,510 --> 00:01:39,000 this added post page 34 00:01:39,000 --> 00:01:42,630 and we wanna pre-populate that page with the data 35 00:01:42,630 --> 00:01:44,420 for data loaded posts. 36 00:01:44,420 --> 00:01:46,470 So that we don't start with a blank form, 37 00:01:46,470 --> 00:01:48,263 which would be very inconvenient. 38 00:01:49,380 --> 00:01:51,620 Hence here as a first step, 39 00:01:51,620 --> 00:01:54,860 we can turn this into an async function 40 00:01:54,860 --> 00:01:57,063 so that we can then use DB, getDB 41 00:01:58,500 --> 00:02:01,490 connect to the posts collection, 42 00:02:01,490 --> 00:02:06,490 and then find that one post that has this ID. 43 00:02:06,730 --> 00:02:11,080 So it's in the same logic as I had it here 44 00:02:11,080 --> 00:02:13,220 for getting data for the detail page. 45 00:02:13,220 --> 00:02:16,963 Hence, of course we can copy this code here, 46 00:02:18,230 --> 00:02:19,830 actually this code here, 47 00:02:19,830 --> 00:02:22,120 including the extraction of the post ID 48 00:02:23,240 --> 00:02:25,293 and replace that code with it. 49 00:02:27,050 --> 00:02:29,510 Now, however, I don't wanna exclude the summary, 50 00:02:29,510 --> 00:02:31,670 I need the summary, 51 00:02:31,670 --> 00:02:34,800 but I can exclude the other data 52 00:02:34,800 --> 00:02:36,290 because here in this example, 53 00:02:36,290 --> 00:02:38,483 you won't be able to change the author. 54 00:02:39,710 --> 00:02:42,820 Hence I do wanna get the title, 55 00:02:42,820 --> 00:02:46,940 I do also want to get the summary, of course, 56 00:02:46,940 --> 00:02:51,940 and I do also want to get the body, so the full text, 57 00:02:52,660 --> 00:02:54,350 I don't want to get the author 58 00:02:54,350 --> 00:02:56,270 and I don't need the date here 59 00:02:56,270 --> 00:02:58,080 because we're not able to add it 60 00:02:58,080 --> 00:03:00,370 the date through the form anyways. 61 00:03:00,370 --> 00:03:03,130 Instead we could consider updating the data later, 62 00:03:03,130 --> 00:03:07,110 once the update is sent to the server 63 00:03:07,110 --> 00:03:10,460 so that we don't just set the date when a post is created, 64 00:03:10,460 --> 00:03:13,330 but also when it's changed, that's up to you, 65 00:03:13,330 --> 00:03:15,470 whether you want that behavior or not, 66 00:03:15,470 --> 00:03:17,293 but we'll worry about that later. 67 00:03:18,480 --> 00:03:22,050 This will now find us this one post with this ID 68 00:03:22,050 --> 00:03:25,060 and just as before we also wanna handle the case 69 00:03:25,060 --> 00:03:27,640 that this post doesn't exist. 70 00:03:27,640 --> 00:03:29,920 So we wanna check for its non-existence 71 00:03:29,920 --> 00:03:32,693 and rendered a 404 template in this case, 72 00:03:34,440 --> 00:03:36,920 if it does exist though then 73 00:03:36,920 --> 00:03:41,920 I wanna render this update post template here. 74 00:03:43,980 --> 00:03:48,980 So update that post and pass my post data into that template 75 00:03:53,290 --> 00:03:56,250 and that therefore the logic for rendering 76 00:03:56,250 --> 00:03:59,550 that added post page and for getting the data 77 00:03:59,550 --> 00:04:00,793 we need for this page. 78 00:04:01,880 --> 00:04:04,170 Now we need to work in the template 79 00:04:04,170 --> 00:04:06,850 in this update, post EJS file 80 00:04:07,980 --> 00:04:10,020 here we got all these form fields. 81 00:04:10,020 --> 00:04:10,853 And as I said, 82 00:04:10,853 --> 00:04:14,100 I want to pre-populate them with some values 83 00:04:14,100 --> 00:04:16,480 so that we don't start with an empty form 84 00:04:17,760 --> 00:04:21,690 for this we can add the value HTML attributes here 85 00:04:22,650 --> 00:04:27,500 and set the value here for the title to post the dot title 86 00:04:28,370 --> 00:04:30,180 so that we initialized as input 87 00:04:30,180 --> 00:04:32,393 with the already saved title. 88 00:04:33,260 --> 00:04:35,430 We will still be able to add it and change it 89 00:04:35,430 --> 00:04:38,953 but we have a starting value, which is what I want here. 90 00:04:40,270 --> 00:04:41,860 Same for the summary, 91 00:04:41,860 --> 00:04:45,433 we wanna initialize this with post doc summary here. 92 00:04:46,730 --> 00:04:50,100 And of course all this here for the text area 93 00:04:50,100 --> 00:04:54,410 there we wanna pre-initialize this with posts dot body 94 00:04:54,410 --> 00:04:57,270 that's the key under which the body text is stored 95 00:04:57,270 --> 00:04:58,863 in the database documents. 96 00:05:00,220 --> 00:05:01,330 Very important here, 97 00:05:01,330 --> 00:05:04,240 don't add a line break because text areas 98 00:05:04,240 --> 00:05:07,600 are one of the few elements in HTML 99 00:05:07,600 --> 00:05:12,600 that do actually not ignore white space or line breaks. 100 00:05:13,320 --> 00:05:15,550 And therefore if you add a line break here, 101 00:05:15,550 --> 00:05:18,440 it would be part of the text area output, 102 00:05:18,440 --> 00:05:20,050 which we don't want. 103 00:05:20,050 --> 00:05:21,630 So here, that should be one line 104 00:05:21,630 --> 00:05:24,910 without any extra white space or line breaks 105 00:05:24,910 --> 00:05:26,793 between the text area text. 106 00:05:29,230 --> 00:05:32,560 So that should pre-populate our form fields. 107 00:05:32,560 --> 00:05:35,693 Now we also need to work on the form element here. 108 00:05:36,600 --> 00:05:38,240 The method again, should be post 109 00:05:38,240 --> 00:05:40,230 because we're storing some data, 110 00:05:40,230 --> 00:05:43,320 we're changing some data in our database 111 00:05:43,320 --> 00:05:46,690 and for the post that's of course, up to you, 112 00:05:46,690 --> 00:05:50,840 it could be posts slash the ID and then edit again, 113 00:05:50,840 --> 00:05:52,940 but this time with a post request 114 00:05:52,940 --> 00:05:54,823 and that's indeed what I'll go for. 115 00:05:55,750 --> 00:05:59,660 So here I'll then insert post dot underscore ID 116 00:05:59,660 --> 00:06:01,083 slash edit again. 117 00:06:02,040 --> 00:06:05,360 So the same path as we had it for loading this page, 118 00:06:05,360 --> 00:06:08,910 but now with a post method, opposed to HTTP method, 119 00:06:08,910 --> 00:06:12,100 instead of a get method and therefore it will technically 120 00:06:12,100 --> 00:06:14,893 be a different route, which is what we want here. 121 00:06:17,170 --> 00:06:19,090 Hence, we now prepared this page, 122 00:06:19,090 --> 00:06:20,690 now we can handle the submission 123 00:06:21,830 --> 00:06:24,820 to handle the submission we need to register a route, 124 00:06:24,820 --> 00:06:29,110 a post route for this path and hence back in block.js. 125 00:06:29,110 --> 00:06:33,180 Here we can now register such a post route 126 00:06:33,180 --> 00:06:37,013 for posts slash some ID slash edit, 127 00:06:38,170 --> 00:06:41,910 and then add our function with request and response here 128 00:06:42,770 --> 00:06:45,700 and already converted into an async function, 129 00:06:45,700 --> 00:06:48,140 because we're also going to talk to the database 130 00:06:48,140 --> 00:06:48,973 from in there 131 00:06:48,973 --> 00:06:51,573 and hence we'll have asynchronous code in there. 132 00:06:52,690 --> 00:06:55,970 Now what's our goal in this function here now, 133 00:06:55,970 --> 00:06:57,510 what do we wanna do? 134 00:06:57,510 --> 00:06:59,530 Well, we noted we do get some data here 135 00:06:59,530 --> 00:07:01,210 as part of the request, 136 00:07:01,210 --> 00:07:03,630 and therefore we can extract the data from there 137 00:07:03,630 --> 00:07:07,810 and then update our posts with that ID in the database, 138 00:07:07,810 --> 00:07:08,933 with that data. 139 00:07:10,730 --> 00:07:14,500 For this again, we get access to our database here 140 00:07:14,500 --> 00:07:17,083 and there to the posts collection. 141 00:07:18,240 --> 00:07:21,010 And then there, we can use the update one method 142 00:07:21,010 --> 00:07:23,613 to update one specific post as you learned. 143 00:07:25,510 --> 00:07:27,970 Now for this we'll need the post ID 144 00:07:27,970 --> 00:07:30,783 and actually we can get this just as we got it here, 145 00:07:33,820 --> 00:07:36,170 by extracting it from parants. 146 00:07:36,170 --> 00:07:39,800 We can also turn this into such an object ID here 147 00:07:39,800 --> 00:07:42,410 by passing the params request params ID 148 00:07:42,410 --> 00:07:46,420 to the new object ID constructor function here. 149 00:07:46,420 --> 00:07:48,170 So by instantiating this object, 150 00:07:48,170 --> 00:07:50,300 the object with that clause here 151 00:07:50,300 --> 00:07:52,223 by passing the params ID to it. 152 00:07:53,690 --> 00:07:55,380 And then we can, first of all, 153 00:07:55,380 --> 00:07:57,840 pass this first object to update one, 154 00:07:57,840 --> 00:08:01,370 to filter for the post we do wanna update. 155 00:08:01,370 --> 00:08:04,130 And in this case, that the post where underscore ID 156 00:08:04,130 --> 00:08:06,003 is equal to our post ID, 157 00:08:07,750 --> 00:08:11,790 then we pass a second value to update one as you learned 158 00:08:11,790 --> 00:08:14,680 where we describe how to update the post 159 00:08:15,930 --> 00:08:19,190 and here we use this special dollar sign set property name, 160 00:08:19,190 --> 00:08:20,680 as you learned, 161 00:08:20,680 --> 00:08:22,870 which then takes another object, 162 00:08:22,870 --> 00:08:25,550 which describes the exact operations, 163 00:08:25,550 --> 00:08:27,970 the exact fields that should be changed 164 00:08:27,970 --> 00:08:30,433 and the new values they should assume. 165 00:08:32,520 --> 00:08:33,520 So here, for example, 166 00:08:33,520 --> 00:08:36,409 we know that we possibly got a new title, 167 00:08:36,409 --> 00:08:39,073 a new summary text and a new body text. 168 00:08:39,909 --> 00:08:42,400 So they for here I'll set title equal 169 00:08:42,400 --> 00:08:45,160 to request body dot title. 170 00:08:45,160 --> 00:08:47,950 So to the title that was submitted with the form 171 00:08:49,010 --> 00:08:52,130 set summary equal to request body dot summary 172 00:08:53,140 --> 00:08:58,140 and set body equal request dot body dot content 173 00:08:59,090 --> 00:09:02,400 dot content, because an update post EJS, 174 00:09:02,400 --> 00:09:05,393 this text area has a name of content. 175 00:09:06,410 --> 00:09:08,973 So that's the key we have to access there, 176 00:09:11,320 --> 00:09:13,430 let me reform it this to make it more readable. 177 00:09:13,430 --> 00:09:16,240 And with that, this is the kind of query, 178 00:09:16,240 --> 00:09:19,980 the kind of command we wanna send to the MongoDB server 179 00:09:19,980 --> 00:09:23,760 for updating the post with this ID like that. 180 00:09:23,760 --> 00:09:27,053 So by setting these properties to new values, 181 00:09:28,320 --> 00:09:30,360 again, that's asynchronous operation, 182 00:09:30,360 --> 00:09:33,980 so we can await this and we'll get some result back here, 183 00:09:33,980 --> 00:09:37,970 which we could use log or inspect, 184 00:09:37,970 --> 00:09:40,640 but here in the end, once we're done, 185 00:09:40,640 --> 00:09:45,640 I'll ignore the result and simply just return a response 186 00:09:45,870 --> 00:09:48,350 or handle my response here 187 00:09:48,350 --> 00:09:50,500 and here since it's a post route, 188 00:09:50,500 --> 00:09:54,440 I wanna redirect and redirect back to slash posts 189 00:09:54,440 --> 00:09:57,130 so that we see that list of all posts again, 190 00:09:57,130 --> 00:09:58,823 after updating a post. 191 00:10:02,040 --> 00:10:05,020 And that should be it let's save it all 192 00:10:05,020 --> 00:10:07,130 and see whether it works. 193 00:10:07,130 --> 00:10:10,620 We can reload this first page click on added post 194 00:10:10,620 --> 00:10:12,760 and we can see the update post page 195 00:10:12,760 --> 00:10:15,720 and that form is pre-filled. 196 00:10:15,720 --> 00:10:18,300 And now I'll add a couple of exclamation marks here 197 00:10:19,890 --> 00:10:23,150 and add more text here does updating work 198 00:10:24,540 --> 00:10:27,039 and click update post. 199 00:10:27,039 --> 00:10:28,910 And I can see the exclamation marks here 200 00:10:28,910 --> 00:10:30,880 so it seems like that worked. 201 00:10:30,880 --> 00:10:35,290 And if I click on view post, I also see my new text here. 202 00:10:35,290 --> 00:10:39,320 So updating worked, I also got no error here in the log, 203 00:10:39,320 --> 00:10:41,070 so that's all looking good 204 00:10:41,070 --> 00:10:45,060 and for completeness sake in my terminal here 205 00:10:45,060 --> 00:10:49,740 in the MongoDB shell if I do have a look at my posts there, 206 00:10:49,740 --> 00:10:52,263 of course, I also see the updated data there. 207 00:10:53,970 --> 00:10:56,500 Now, what I did not update is the date though 208 00:10:56,500 --> 00:11:00,060 and we could of course considered doing this here as well. 209 00:11:00,060 --> 00:11:02,720 We could set the date to a new value as well, 210 00:11:02,720 --> 00:11:06,090 and simply set it to the current date snapshot 211 00:11:06,090 --> 00:11:10,570 so that when we update a post, the date is also updated. 212 00:11:10,570 --> 00:11:11,940 Now this comes down to you 213 00:11:11,940 --> 00:11:14,720 and how your website should behave though. 214 00:11:14,720 --> 00:11:18,140 Should the date of a post be the date when it was created 215 00:11:18,140 --> 00:11:19,940 or when it was updated. 216 00:11:19,940 --> 00:11:22,020 You could also store different dates, 217 00:11:22,020 --> 00:11:24,540 one for the creation which you never change 218 00:11:24,540 --> 00:11:27,630 and one for the latest time it was updated, 219 00:11:27,630 --> 00:11:31,460 which you do change whenever the post gets updated. 220 00:11:31,460 --> 00:11:35,680 It's up to you here I'll not update the date. 221 00:11:35,680 --> 00:11:38,990 So I'll comment this out, but that is a line you could add 222 00:11:38,990 --> 00:11:40,980 if you do want to update a date, 223 00:11:40,980 --> 00:11:42,943 whenever the post gets updated. 224 00:11:44,010 --> 00:11:44,850 And then for now, 225 00:11:44,850 --> 00:11:48,360 the last thing that's left to be implemented is the feature 226 00:11:48,360 --> 00:11:51,100 that allows us to delete posts. 227 00:11:51,100 --> 00:11:53,870 Again, it is something you can try implementing on your own. 228 00:11:53,870 --> 00:11:56,143 We'll do it together in the next lecture.