1
00:00:00,240 --> 00:00:01,050
Welcome back.

2
00:00:01,260 --> 00:00:02,870
So we're picking up where we left off.

3
00:00:02,880 --> 00:00:07,390
We've covered index we've covered create new We've covered show.

4
00:00:07,500 --> 00:00:12,300
Now we're doing edit and update and I'll be upfront with you in my opinion.

5
00:00:12,330 --> 00:00:18,630
These two are the most work and that's because if you think about what it slash update actually accomplishes

6
00:00:18,950 --> 00:00:25,560
it's sort of a hybrid between new and create and show where new uncreate can just create a new dog every

7
00:00:25,560 --> 00:00:27,410
time or new blog at it.

8
00:00:27,410 --> 00:00:30,810
An update have to first find the old one and then update it.

9
00:00:30,990 --> 00:00:32,060
So will start with it.

10
00:00:32,190 --> 00:00:37,030
Which is slash dogs slash ID slash EDID which shows the four.

11
00:00:37,410 --> 00:00:38,850
So let's begin there.

12
00:00:38,850 --> 00:00:41,990
Before we do that I'll just highlight some of the things you need to talk about.

13
00:00:42,330 --> 00:00:49,130
And it wrote it form update route update form and something called method override which I'll get to

14
00:00:49,320 --> 00:00:52,200
but it's a nice little issue that we have to deal with.

15
00:00:52,230 --> 00:00:53,920
So let's start with the edit route.

16
00:00:54,220 --> 00:00:55,150
And actually yes

17
00:00:58,020 --> 00:01:05,650
just after I get slash blogs slash ID slash at it.

18
00:01:05,910 --> 00:01:14,850
There we go at our callback request and response and all that we need to do in here to start is response

19
00:01:14,970 --> 00:01:19,880
got render the edit form that doesn't exist yet.

20
00:01:19,920 --> 00:01:20,620
Great.

21
00:01:20,640 --> 00:01:22,550
Now let's create that form.

22
00:01:22,620 --> 00:01:25,320
So touch use slash at it.

23
00:01:25,500 --> 00:01:26,300
Yes.

24
00:01:26,760 --> 00:01:29,700
And then open it up.

25
00:01:31,080 --> 00:01:38,670
Let's start nice and simple with just an H1 page and make sure we see that.

26
00:01:38,670 --> 00:01:47,070
So start the server node at J s and to get there.

27
00:01:47,140 --> 00:01:53,520
You take any of these and add on slash at it and it could just be anything such that it doesn't have

28
00:01:53,520 --> 00:01:54,700
to be a valid ID.

29
00:01:54,780 --> 00:01:56,690
We still see the edit page.

30
00:01:56,880 --> 00:01:57,870
Great.

31
00:01:57,880 --> 00:02:03,320
Now let's get a of that and to do that we can just take the form from new.

32
00:02:03,540 --> 00:02:09,160
So I'm actually going to copy everything from this page over and then we'll update a few things.

33
00:02:09,180 --> 00:02:11,570
First one is rather than new blog.

34
00:02:11,690 --> 00:02:13,580
I'll change it to be added.

35
00:02:14,490 --> 00:02:18,240
We also need to change where this post goes or where the form goes.

36
00:02:18,240 --> 00:02:19,920
So it's not slash blogs anymore.

37
00:02:20,100 --> 00:02:26,400
We need to send this to the update route which is Doug's slash ID but we don't have the ID here yet

38
00:02:26,400 --> 00:02:26,660
.

39
00:02:26,700 --> 00:02:31,590
We have to look it up first in the template so I'll leave it as sashed blogs for now and I'll leave

40
00:02:31,590 --> 00:02:35,910
methodis post as well and we'll leave everything else as it is to start.

41
00:02:36,000 --> 00:02:44,600
Let's make sure that when we open this up we see a nice form that says at it and we it next that are

42
00:02:44,600 --> 00:02:46,350
two features that are linked.

43
00:02:46,440 --> 00:02:47,970
Basically we'll get them both for free.

44
00:02:47,970 --> 00:02:51,470
By doing one thing those two features are one.

45
00:02:51,540 --> 00:02:56,710
We need the form to submit to the correct you Arel which is slash blogs slash ID.

46
00:02:56,760 --> 00:02:58,600
So we need that ID.

47
00:02:58,680 --> 00:03:02,290
The other thing is that we want this form to be prefilled with the data.

48
00:03:02,610 --> 00:03:07,740
Otherwise you're not really editing or just typing stuff over so it should show the title of the blog

49
00:03:07,740 --> 00:03:10,590
that I'm editing the image and the content.

50
00:03:10,590 --> 00:03:16,400
Both of those require us to first look up the actual blog inside of our edit route.

51
00:03:16,950 --> 00:03:22,740
So this is what I was saying sort of like a combination of new and show because we have to first use

52
00:03:22,740 --> 00:03:26,070
this ID to find the correct block.

53
00:03:26,190 --> 00:03:35,790
So just like show its blogged out find by id and the ID is request that parameter ID then we have our

54
00:03:35,880 --> 00:03:46,770
callback called this found log again if there is an error let's just do our same redstart redirect to

55
00:03:46,770 --> 00:03:52,530
slash blogs else rest that render at it.

56
00:03:52,590 --> 00:04:00,980
Except we're going to pass in a little bit of data and that will be log is equal to found blog.

57
00:04:01,560 --> 00:04:02,600
Perfect.

58
00:04:02,610 --> 00:04:04,560
Now we have blog in our template.

59
00:04:04,620 --> 00:04:06,070
Everything went well.

60
00:04:06,120 --> 00:04:14,630
So inside of it let's start simple by saying edit and then put the title here so that will just be log

61
00:04:14,640 --> 00:04:14,710
.

62
00:04:14,740 --> 00:04:23,680
The title is Ejay us if we refresh now we will have to restart refresh this page.

63
00:04:24,450 --> 00:04:29,160
Actually this one's a terrible example because we don't have a title so let's pick one of the early

64
00:04:29,160 --> 00:04:34,420
ones like this one here first post or go to slash at it.

65
00:04:34,680 --> 00:04:36,750
We see it first post.

66
00:04:36,810 --> 00:04:37,520
Great.

67
00:04:37,950 --> 00:04:40,570
So now we need to add in the data into the form.

68
00:04:40,740 --> 00:04:42,220
And that's also really easy.

69
00:04:42,360 --> 00:04:49,080
Remember that we specify the value of the form whatever is inside of the input using the value attribute

70
00:04:49,100 --> 00:04:49,290
.

71
00:04:49,500 --> 00:04:56,920
So rather than placeholder we want value and we can start by just saying value is equal to a low.

72
00:04:57,150 --> 00:05:02,470
And I'll show you what we end up with there it's prefilled with a low.

73
00:05:02,830 --> 00:05:09,730
So of course we don't want Hello we want a variable and the value we want there is just blog that title

74
00:05:09,750 --> 00:05:10,010
.

75
00:05:10,270 --> 00:05:16,690
So run our javascript to get the blog title and then put that inside the value and we'll do the same

76
00:05:16,690 --> 00:05:23,350
thing for image except blog that image.

77
00:05:23,590 --> 00:05:24,090
Check it out.

78
00:05:24,090 --> 00:05:32,280
Now if we are fresh We have a title and the image pre-filled the text area it's a little different texture

79
00:05:32,370 --> 00:05:39,730
don't have a value attribute instead whatever is in between the tags the inner content is what is pre-filled

80
00:05:39,730 --> 00:05:40,390
.

81
00:05:40,390 --> 00:05:41,760
So it's actually simpler.

82
00:05:42,000 --> 00:05:52,150
All we need to do is copy this huge yes in between the tags and do blogged out body refresh.

83
00:05:52,380 --> 00:05:54,470
You can see we now have a blog post.

84
00:05:54,820 --> 00:05:58,810
So if we added some more data this is updated now.

85
00:05:59,440 --> 00:06:00,390
And I hit submit.

86
00:06:00,430 --> 00:06:04,490
We still have a problem which is that this form doesn't go to the right place.

87
00:06:04,540 --> 00:06:06,980
Now we need to focus on the update route.

88
00:06:07,840 --> 00:06:12,780
So update sashed dog slash ID as a put request.

89
00:06:12,820 --> 00:06:17,850
So let's start in our app yes an add in the route.

90
00:06:18,490 --> 00:06:22,250
So update route app dot.

91
00:06:22,510 --> 00:06:28,750
This time it's put because it's a pote request and remember that the whole point of HTP requests these

92
00:06:28,750 --> 00:06:32,680
different verbs is really just to make things meaningful.

93
00:06:32,680 --> 00:06:38,560
Did To add divisions to functionality so that if we see there's a put request we know that it's supposed

94
00:06:38,560 --> 00:06:42,510
to be updating something but you could do everything with post requests only.

95
00:06:42,520 --> 00:06:47,600
So it's not a deal breaker at all but if we're following a restful routing we need to do a put request

96
00:06:48,460 --> 00:07:00,190
so apt put and the URL is slash logs slash ID just to refresh right here dog sosh ID blogs slash ID

97
00:07:00,880 --> 00:07:07,240
and we'll have a really simple thing in here that just sends back red dots and

98
00:07:10,480 --> 00:07:11,800
update wrap.

99
00:07:12,010 --> 00:07:15,750
Just so if we see this message we know that it will work.

100
00:07:16,330 --> 00:07:24,830
And if I go and now update our form so that it submits to the right place and need to go into it if

101
00:07:24,830 --> 00:07:32,050
it changes to be put and change this to be blogs it has to be slash ID so I could just put anything

102
00:07:32,050 --> 00:07:32,610
there.

103
00:07:32,950 --> 00:07:35,930
But to actually put the ID there I need.

104
00:07:36,040 --> 00:07:45,190
Yes just like this show wrote blog dot underscore ID and say Now I hate to break it to you but this

105
00:07:45,190 --> 00:07:46,410
wont actually work.

106
00:07:46,630 --> 00:07:54,020
So if I submit this let's call it first post updated so we can see it and I click submit.

107
00:07:54,490 --> 00:08:00,880
You'll see that it takes us to the show page and not only does it take it to the show page but it adds

108
00:08:00,940 --> 00:08:04,340
all of our form data into the route appear.

109
00:08:04,340 --> 00:08:11,290
So I don't know if you can read this but it says title is first post updated the image is the image

110
00:08:11,290 --> 00:08:11,860
you are around.

111
00:08:11,980 --> 00:08:16,420
So it took the form data and put it in the you or row as a query string which remember that happens

112
00:08:16,420 --> 00:08:18,420
when you make a get request.

113
00:08:18,670 --> 00:08:19,890
So we have a problem.

114
00:08:20,110 --> 00:08:21,600
And the problem comes down to this.

115
00:08:21,790 --> 00:08:27,410
If Tim forms don't support requests they only support get and post requests right now.

116
00:08:27,730 --> 00:08:32,820
And the reason behind that is it's really hard to get a clear answer on at one point.

117
00:08:32,860 --> 00:08:37,870
It was supposed to be included as part of the amount of forms that we're able to make requests and delete

118
00:08:37,870 --> 00:08:38,980
requests.

119
00:08:39,010 --> 00:08:41,980
And then apparently they found it too difficult.

120
00:08:41,980 --> 00:08:43,200
I was just reading about it.

121
00:08:43,210 --> 00:08:47,620
I've included a link in the description for this video but you can read about it.

122
00:08:47,620 --> 00:08:49,780
There is no conclusive answer.

123
00:08:49,780 --> 00:08:55,060
The only conclusion people have come to now is that it's way too late for them not to have implemented

124
00:08:55,060 --> 00:08:55,430
it.

125
00:08:55,570 --> 00:09:00,740
And it's a little surprising that you still can't send to put requests using a form.

126
00:09:00,760 --> 00:09:03,200
So with that said there is a workaround.

127
00:09:03,700 --> 00:09:07,900
And that's where this little line comes in method override.

128
00:09:08,140 --> 00:09:13,720
So what method override let's just do it's a simple package we install we tell express to use it and

129
00:09:13,720 --> 00:09:22,020
then we go to our form and we add in a little bit of a cheat where we send a post request.

130
00:09:22,360 --> 00:09:29,080
And by the way when you try and send a port request it will default as a get request which is why this

131
00:09:29,080 --> 00:09:35,560
happened and that's why it took us to the show page because we made a request to blog slash ID which

132
00:09:35,560 --> 00:09:36,490
is our show.

133
00:09:36,880 --> 00:09:37,180
OK.

134
00:09:37,180 --> 00:09:45,580
So if we change just to post and we add this little cittie thing at the end of our you Arel question

135
00:09:45,580 --> 00:09:53,010
mark underscore method equals put this will send a regular poster requests.

136
00:09:53,460 --> 00:09:59,640
But it has in the query string underscore method equals put and method override will configure it instead

137
00:09:59,640 --> 00:10:00,770
of actually yes.

138
00:10:00,870 --> 00:10:06,210
So that it looks for this underscore method and if it sees underscore method equal to put or underscore

139
00:10:06,210 --> 00:10:12,810
method equal to delete it will treat it as put request or as a delete request and to name method to

140
00:10:12,810 --> 00:10:18,930
override it overrides the fact that it's a post request you know treat it as a put or whatever we specify

141
00:10:18,930 --> 00:10:19,230
here.

142
00:10:19,230 --> 00:10:25,470
You could specify a get request or delete which we will do in just a little bit but for now we're going

143
00:10:25,470 --> 00:10:28,500
to go with it.

144
00:10:28,760 --> 00:10:31,860
So underscore method equals put which doesn't do anything on its own.

145
00:10:31,930 --> 00:10:33,450
It's just a query string.

146
00:10:33,630 --> 00:10:34,360
Nothing changes.

147
00:10:34,360 --> 00:10:44,910
Quintel we do this and PM install method override dash dash save while that's going you might be wondering

148
00:10:45,090 --> 00:10:48,900
if it's worth going through all this effort because we don't have to do this.

149
00:10:48,900 --> 00:10:56,060
Remember we could just have another route called blogs update and we don't need any of this.

150
00:10:56,070 --> 00:10:57,610
We can make it a post request.

151
00:10:57,660 --> 00:10:59,910
It's totally up to us to define our own routes.

152
00:11:00,180 --> 00:11:04,640
But yes it is worth it to have this convention to have this pattern that we follow.

153
00:11:04,830 --> 00:11:11,550
We want our edit requests we want every part that's involved in updating to be a put you want or destroy

154
00:11:11,550 --> 00:11:14,250
or delete information to be a delete request.

155
00:11:14,250 --> 00:11:16,590
It's just a matter of following a pattern.

156
00:11:17,040 --> 00:11:20,230
OK we have that done now in our Abdus.

157
00:11:20,310 --> 00:11:24,710
All we have to do is require method override.

158
00:11:24,720 --> 00:11:26,260
I'll do that here.

159
00:11:26,310 --> 00:11:38,730
Method override equals require method Desch overwrite save add or comma in and then we need to tell

160
00:11:39,150 --> 00:11:41,750
our app to use method overwrite.

161
00:11:41,940 --> 00:11:50,380
So after I use method override and we need to pass an argument what it should look for in the you are

162
00:11:50,380 --> 00:11:50,740
now.

163
00:11:50,970 --> 00:11:52,650
Arse's underscore method.

164
00:11:52,650 --> 00:11:57,660
It can be anything but that typically is what your see underscore method.

165
00:11:57,660 --> 00:12:04,130
So now we've told our app whenever you get a request that has underscore method as a parameter.

166
00:12:04,410 --> 00:12:10,410
Take whatever it's equal to put get post patch delete whatever it is for us it will be put and delete

167
00:12:10,860 --> 00:12:14,970
and treat that request as a put request or as the delete request.

168
00:12:14,970 --> 00:12:21,960
So now our route down here where are you you up output should now be executed and we should see this

169
00:12:22,080 --> 00:12:22,740
hopefully.

170
00:12:22,950 --> 00:12:25,200
So let's try to.

171
00:12:25,230 --> 00:12:27,110
No problem so far.

172
00:12:27,750 --> 00:12:31,440
OK let's go back at it form.

173
00:12:31,440 --> 00:12:33,880
So let's change it to say updated.

174
00:12:34,170 --> 00:12:39,670
Some exclamation points submit and we now get update route.

175
00:12:39,700 --> 00:12:42,440
So notice the request that was made has underscore method equal.

176
00:12:42,450 --> 00:12:48,690
Put in the URL which tricks our app doesn't really trick it but method overwrite is listening for that

177
00:12:48,930 --> 00:12:51,690
and it says OK this actually isn't a post request.

178
00:12:51,690 --> 00:12:55,670
They want us to treat it as a put request so it triggers are put out.

179
00:12:56,190 --> 00:12:58,590
So now we need to update what happens in here.

180
00:12:58,830 --> 00:13:05,160
It should take the ID in the will find the existing post the existing blog and update it with the new

181
00:13:05,160 --> 00:13:15,600
data and we can do that in one fell swoop using a method of the log that bind by id and update and it

182
00:13:15,600 --> 00:13:17,440
takes three arguments.

183
00:13:17,640 --> 00:13:23,100
The ID defined by the new data and the callback.

184
00:13:23,790 --> 00:13:25,370
So this is a really nice method.

185
00:13:25,380 --> 00:13:34,770
The ID is nice and simple request Paramjit out ID the data from the form is whatever we called it inside

186
00:13:34,770 --> 00:13:36,770
of our form log.

187
00:13:37,320 --> 00:13:39,780
So request body up log

188
00:13:43,260 --> 00:13:44,960
and callback is recovery.

189
00:13:44,970 --> 00:13:45,480
We want to run

190
00:13:48,240 --> 00:13:53,150
error and we'll call this sound logic again or actually to be a little clearer.

191
00:13:53,150 --> 00:13:57,860
Let's do updated blog save.

192
00:13:58,470 --> 00:14:03,960
If there's an error Let's redirect you back to the index for now.

193
00:14:04,080 --> 00:14:10,830
It's not the best user flow but it's fine for us redstart redirect Sache blogs.

194
00:14:11,350 --> 00:14:12,300
Otherwise.

195
00:14:12,840 --> 00:14:15,550
What we want to do if you've successfully updated.

196
00:14:15,660 --> 00:14:20,820
We could either take you back to the index or we could take you to the show page and let's do the show

197
00:14:20,820 --> 00:14:21,330
page.

198
00:14:21,390 --> 00:14:22,970
So redstart redirect.

199
00:14:23,490 --> 00:14:30,660
And that needs to be slash blogs slash in ID and the ID is in a few places we could find it in updated

200
00:14:30,660 --> 00:14:36,660
blog or the simple so on is to use request at tramstop Id just like that.

201
00:14:36,660 --> 00:14:43,140
So we need to plus request up for amstaff ID so that it redirects us to the right show page because

202
00:14:43,140 --> 00:14:45,040
we have to have the ID.

203
00:14:45,300 --> 00:14:49,960
Lets test it out now see what happens.

204
00:14:51,900 --> 00:14:58,220
OK lets add this one that it says really updated now.

205
00:14:58,770 --> 00:15:02,030
Submit and it worked.

206
00:15:02,400 --> 00:15:08,640
You can see that it found it Id had updated it and then it redirected us to the show page and now our

207
00:15:08,640 --> 00:15:13,260
new title is there and if we go back you can see that.

208
00:15:13,260 --> 00:15:16,040
Where are you at the bottom here.

209
00:15:16,050 --> 00:15:22,200
First post really updated now is still updated so it persisted in the database so it's a lot of work

210
00:15:22,200 --> 00:15:23,730
to get update to work.

211
00:15:23,730 --> 00:15:29,550
The new code was adding method overwrite in which again it's it's a little bit weird why we have to

212
00:15:29,550 --> 00:15:30,080
do that.

213
00:15:30,090 --> 00:15:34,930
Basically HDMI forms just don't support anything other than a get or post request.

214
00:15:35,250 --> 00:15:41,160
So every framework out there most frameworks at least something like Rails has its own particular way

215
00:15:41,430 --> 00:15:48,390
of faking a request or delete request and the whole point is just so that on the server side we can

216
00:15:48,390 --> 00:15:54,870
write code to listen for a put request or listen for a patch request or delete request rather than having

217
00:15:54,870 --> 00:16:05,700
to define another route like APT not post update blog slash ID is we could just do this but the idea

218
00:16:05,700 --> 00:16:07,040
is that you don't have to.

219
00:16:07,080 --> 00:16:13,940
We can keep it as blogsite ID but make it a put request and we already have another blog slash idea

220
00:16:13,950 --> 00:16:20,420
of course for our show as a get request so it's a way of just separating things out while keeping you

221
00:16:20,430 --> 00:16:21,830
or else the same.

222
00:16:21,960 --> 00:16:22,480
All right.

223
00:16:22,650 --> 00:16:29,970
So method over I'd listen underscore method which is what we configured it to do right here.

224
00:16:30,900 --> 00:16:31,260
Great.

225
00:16:31,260 --> 00:16:32,740
So we have an update.

226
00:16:32,760 --> 00:16:38,070
The last thing we have left to do now is destroy it and destroy it luckily is nice and simple.