1 00:00:02,100 --> 00:00:06,360 Now I will continue with editing my posts 2 00:00:06,360 --> 00:00:09,340 and that will actually be a two-step process. 3 00:00:09,340 --> 00:00:12,470 The first step is to make this link clickable, 4 00:00:12,470 --> 00:00:15,110 so to assign a concrete path to it, 5 00:00:15,110 --> 00:00:18,570 and to then add a route for this path in blog JS, 6 00:00:18,570 --> 00:00:21,570 and to then render the correct template that allows us 7 00:00:21,570 --> 00:00:23,270 to edit a post. 8 00:00:23,270 --> 00:00:26,330 For this here, we have the update post template, 9 00:00:26,330 --> 00:00:27,473 which I prepared for you 10 00:00:27,473 --> 00:00:30,863 where we still have to fill in some blanks, though. 11 00:00:31,950 --> 00:00:34,440 And then the second step will be to make this form 12 00:00:34,440 --> 00:00:38,290 submittable and add another route, a post route, 13 00:00:38,290 --> 00:00:41,920 probably, that handles the submission where we then send 14 00:00:41,920 --> 00:00:45,100 a database query to update a post. 15 00:00:45,100 --> 00:00:47,023 But let's start with the first step. 16 00:00:48,029 --> 00:00:51,140 For this, in the post item EJS file, 17 00:00:51,140 --> 00:00:55,693 We want to connect this link here and add a real link here. 18 00:00:56,650 --> 00:00:59,400 Now it's up to you. How does path should look like. 19 00:00:59,400 --> 00:01:04,400 But I will go for a /posts, then the post ID 20 00:01:04,467 --> 00:01:07,570 just as I have it here for viewing the post. 21 00:01:07,570 --> 00:01:09,530 So I'll copy that over, 22 00:01:09,530 --> 00:01:12,983 but then I'll also add /edit. 23 00:01:14,220 --> 00:01:16,970 So that's not the same path as down there. 24 00:01:16,970 --> 00:01:19,750 Down there We don't have /edit, here we do, 25 00:01:19,750 --> 00:01:22,420 because here I want to load the edit page 26 00:01:22,420 --> 00:01:24,060 for a specific post 27 00:01:24,060 --> 00:01:26,200 with a specific ID. 28 00:01:26,200 --> 00:01:27,680 So a dynamic route 29 00:01:27,680 --> 00:01:29,670 with an extra segment thereafter, 30 00:01:29,670 --> 00:01:32,310 which is absolutely fine and something you can do 31 00:01:32,310 --> 00:01:33,493 with express. 32 00:01:35,440 --> 00:01:38,900 So now we can go to the blog JS file, 33 00:01:38,900 --> 00:01:39,780 and in there, 34 00:01:39,780 --> 00:01:42,200 add a new route again, 35 00:01:42,200 --> 00:01:44,490 and this will be a get route because 36 00:01:44,490 --> 00:01:45,323 that should be a route 37 00:01:45,323 --> 00:01:47,310 that handles a click on that button. 38 00:01:47,310 --> 00:01:48,277 So it's not a route that deals 39 00:01:48,277 --> 00:01:51,330 with the submission of data yet, 40 00:01:51,330 --> 00:01:53,143 but just to click on that link. 41 00:01:54,230 --> 00:01:59,230 So there, for here, it's /posts /a placeholder, 42 00:01:59,230 --> 00:02:04,230 so :ID or any identifier of your choice /edit. 43 00:02:04,274 --> 00:02:08,660 So the same path as I just defined it in the template, 44 00:02:08,660 --> 00:02:10,823 just with this placeholder in there. 45 00:02:12,940 --> 00:02:13,960 And then again, of course, 46 00:02:13,960 --> 00:02:18,330 we have our function here for handling the request. 47 00:02:18,330 --> 00:02:19,596 And then in here, 48 00:02:19,596 --> 00:02:21,490 ultimately, I, of course, 49 00:02:21,490 --> 00:02:23,303 want our render a template. 50 00:02:24,340 --> 00:02:26,370 And to the template I do want to render, 51 00:02:26,370 --> 00:02:28,885 is this update post template. 52 00:02:28,885 --> 00:02:31,003 So update-post, 53 00:02:32,080 --> 00:02:35,860 but this template, in order to work correctly, 54 00:02:35,860 --> 00:02:39,410 needs data about the post that will be updated 55 00:02:40,260 --> 00:02:42,730 because in that update posts template, 56 00:02:42,730 --> 00:02:44,320 when the form is submitted, 57 00:02:44,320 --> 00:02:47,090 I want to know which post we're editing. 58 00:02:47,090 --> 00:02:50,630 So what the idea of that post is that we want to edit, 59 00:02:50,630 --> 00:02:53,600 and we also might want to pre-populate 60 00:02:53,600 --> 00:02:57,850 all those input fields with the concrete post data 61 00:02:57,850 --> 00:03:00,420 so that we don't have to re-enter everything, 62 00:03:00,420 --> 00:03:03,010 but we can edit some selected fields 63 00:03:03,010 --> 00:03:05,340 instead of presenting an empty form 64 00:03:05,340 --> 00:03:07,763 for editing a post, showing an empty form 65 00:03:07,763 --> 00:03:09,303 doesn't make a lot of sense. 66 00:03:10,880 --> 00:03:14,490 So therefore we need to post data now to keep things a bit 67 00:03:14,490 --> 00:03:18,710 simpler here, we'll not show the author data, again. 68 00:03:18,710 --> 00:03:21,080 You could also add this as a feature, 69 00:03:21,080 --> 00:03:24,350 but here I'll focus on the Abra data and just assume that 70 00:03:24,350 --> 00:03:26,990 the author can't be changed, 71 00:03:26,990 --> 00:03:29,270 but we can change all the Abra data and there, 72 00:03:29,270 --> 00:03:32,810 for first of all, when we present this edit page, 73 00:03:32,810 --> 00:03:36,743 I want to select all the data about a specific post. 74 00:03:38,060 --> 00:03:40,960 So let's again, write a query then. 75 00:03:40,960 --> 00:03:41,793 All again, 76 00:03:41,793 --> 00:03:43,590 do it as a standalone constant, 77 00:03:43,590 --> 00:03:46,250 just for readability reasons. 78 00:03:46,250 --> 00:03:48,260 And we want to select all the data 79 00:03:48,260 --> 00:03:51,830 from posts for a specific post. 80 00:03:51,830 --> 00:03:53,110 So just as before 81 00:03:53,110 --> 00:03:55,577 when we fetched data about a specific post, 82 00:03:55,577 --> 00:03:57,327 we need a where clause 83 00:03:57,327 --> 00:03:59,910 to select the post where ID is equal 84 00:03:59,910 --> 00:04:03,203 to some ID, which will inject dynamically. 85 00:04:04,610 --> 00:04:06,920 Now I won't join the author data 86 00:04:06,920 --> 00:04:08,600 because as I just mentioned, 87 00:04:08,600 --> 00:04:12,400 we won't deal with the author data when editing the post. 88 00:04:12,400 --> 00:04:14,573 So we don't have to get it. 89 00:04:16,089 --> 00:04:18,572 They are for depths all ready to complete query. 90 00:04:19,649 --> 00:04:23,950 We can now again, run DB query and pass our query into it. 91 00:04:23,950 --> 00:04:25,990 And since we have a placeholder here, 92 00:04:25,990 --> 00:04:29,203 we also need to pass in that second parameter value, 93 00:04:30,340 --> 00:04:31,570 which is an array, 94 00:04:31,570 --> 00:04:33,210 which always is an array, 95 00:04:33,210 --> 00:04:34,920 with all the values that should 96 00:04:34,920 --> 00:04:38,160 be used for replacing those question marks. 97 00:04:38,160 --> 00:04:40,130 And here, we only have one question mark. 98 00:04:40,130 --> 00:04:43,190 So we only need one value in that array. 99 00:04:43,190 --> 00:04:45,733 And that here is req params ID. 100 00:04:46,590 --> 00:04:49,280 So the ID we get from the URL 101 00:04:49,280 --> 00:04:52,509 that will give us this specific post from the database. 102 00:04:52,509 --> 00:04:53,869 Just as before, 103 00:04:53,869 --> 00:04:56,073 it's an asynchronous operation. 104 00:04:56,073 --> 00:04:59,420 So we add 'async' in front of the function 105 00:04:59,420 --> 00:05:00,810 and 'await' here in 106 00:05:00,810 --> 00:05:01,823 front of query. 107 00:05:02,954 --> 00:05:06,010 And then what we get back here will be our posts. 108 00:05:06,010 --> 00:05:10,330 Again, I'm using array de-structuring to get my posts here. 109 00:05:10,330 --> 00:05:12,010 And again, it's posts, 110 00:05:12,010 --> 00:05:15,130 even though it's a single post, because the MySQL package 111 00:05:15,130 --> 00:05:16,273 doesn't know that. 112 00:05:17,902 --> 00:05:21,400 Just as before, I want to get 113 00:05:21,400 --> 00:05:24,170 to this if check and actually check 114 00:05:24,170 --> 00:05:27,473 if I did find this post here, 115 00:05:30,890 --> 00:05:32,583 and if we make it past this if check, 116 00:05:32,583 --> 00:05:33,590 we know that we do have a post. 117 00:05:33,590 --> 00:05:37,080 And then therefore I want to render this template 118 00:05:37,080 --> 00:05:39,043 with my post data. 119 00:05:40,070 --> 00:05:41,491 Now here, we don't need to deal 120 00:05:41,491 --> 00:05:45,220 with changing that date to a human 121 00:05:45,220 --> 00:05:46,870 or machine readable format, 122 00:05:46,870 --> 00:05:49,100 because it will not deal with that date. 123 00:05:49,100 --> 00:05:52,096 Anyways, it's managed for us by the database. 124 00:05:52,096 --> 00:05:52,931 And hence, 125 00:05:52,931 --> 00:05:55,810 I can now just prepare the data that will be passed 126 00:05:55,810 --> 00:05:58,940 into the template and add a post key. 127 00:05:58,940 --> 00:06:02,290 And the data for that will be posts 0. 128 00:06:02,290 --> 00:06:05,702 So the first item and the only item as we know 129 00:06:05,702 --> 00:06:07,823 in that post array. 130 00:06:09,360 --> 00:06:13,100 That will now expose the post's data to that template, 131 00:06:13,100 --> 00:06:14,940 to the update post template, 132 00:06:14,940 --> 00:06:16,490 and therefore in that template, 133 00:06:16,490 --> 00:06:20,630 we can now use that to prepare the form appropriately. 134 00:06:20,630 --> 00:06:21,510 And for that, 135 00:06:21,510 --> 00:06:24,132 we might want to pre-populate all those inputs 136 00:06:24,132 --> 00:06:27,030 for the reasons mentioned before. 137 00:06:27,030 --> 00:06:28,260 We can do that by adding 138 00:06:28,260 --> 00:06:30,270 the value attribute. 139 00:06:30,270 --> 00:06:32,140 Now we did see the value attribute 140 00:06:32,140 --> 00:06:34,540 before on those input fields, 141 00:06:34,540 --> 00:06:39,090 when I dealt with a hidden input earlier in the course. 142 00:06:39,090 --> 00:06:40,950 Here this input is not hidden, 143 00:06:40,950 --> 00:06:44,070 but still it should have a default input value, 144 00:06:44,070 --> 00:06:45,900 which could be changed by the user. 145 00:06:45,900 --> 00:06:48,200 But which I want to show right from the start. 146 00:06:48,200 --> 00:06:51,649 And that's the currently existing data that's saved 147 00:06:51,649 --> 00:06:54,653 as a title in this case, for the post. 148 00:06:55,580 --> 00:06:56,413 So therefore here, 149 00:06:56,413 --> 00:06:59,930 I'll output post title to pre-populate this input 150 00:06:59,930 --> 00:07:02,400 with the currently stored title, 151 00:07:02,400 --> 00:07:04,630 the user then may or may not change it, 152 00:07:04,630 --> 00:07:06,803 but we at least showed this as a default. 153 00:07:07,920 --> 00:07:11,070 Here I'll do the same on the second input 154 00:07:11,070 --> 00:07:16,070 and show the currently stored summary value. 155 00:07:17,510 --> 00:07:20,430 And then the text area I'll do the same 156 00:07:20,430 --> 00:07:25,430 and output post.body here. 157 00:07:25,530 --> 00:07:28,713 That's the name of the column in the database. 158 00:07:30,960 --> 00:07:33,700 Very important, by the way, here, 159 00:07:33,700 --> 00:07:37,170 you don't want to add a line break for readability reasons 160 00:07:37,170 --> 00:07:41,580 because a text area, by default has that line break, 161 00:07:41,580 --> 00:07:44,480 white space behavior we added manually 162 00:07:44,480 --> 00:07:48,793 with this white space CSS property before. 163 00:07:50,360 --> 00:07:51,870 This CSS property. 164 00:07:51,870 --> 00:07:55,090 We added this manually, for the body of the post 165 00:07:55,090 --> 00:07:56,930 on the post detail page. 166 00:07:56,930 --> 00:07:58,760 When it comes to text areas, 167 00:07:58,760 --> 00:08:02,930 these elements actually have this behavior out of the box. 168 00:08:02,930 --> 00:08:05,080 So here, this extra white space, 169 00:08:05,080 --> 00:08:07,826 which we have here to the left would actually be part 170 00:08:07,826 --> 00:08:10,740 of the text area content then. 171 00:08:10,740 --> 00:08:12,170 And I don't want that. 172 00:08:12,170 --> 00:08:15,610 So here, we don't want to split this across multiple times 173 00:08:15,610 --> 00:08:17,700 for readability reasons, 174 00:08:17,700 --> 00:08:19,842 but that's just a side note. 175 00:08:19,842 --> 00:08:20,970 With that though. 176 00:08:20,970 --> 00:08:23,740 We're pre-populating this form. 177 00:08:23,740 --> 00:08:27,640 And hence, if we, again, save all the files, 178 00:08:27,640 --> 00:08:32,474 if we reload this page and click on edit post here, 179 00:08:32,474 --> 00:08:34,340 that's looking good! 180 00:08:34,340 --> 00:08:37,679 We see that post and these fields are pre-populated. 181 00:08:37,679 --> 00:08:40,263 And of course, that also works for the second post.