1
00:00:00,200 --> 00:00:01,160
OK we'll come back.

2
00:00:01,230 --> 00:00:04,020
So we're going to get started on editing campgrounds.

3
00:00:04,200 --> 00:00:10,080
So this is a little bit of review from the rest to unit where we made that blog up with semantic UI

4
00:00:10,740 --> 00:00:13,460
but we're going to add some new concepts on top of that as well.

5
00:00:13,470 --> 00:00:19,050
In particular when we get to comments to start though we're working on editing campgrounds so that when

6
00:00:19,050 --> 00:00:22,320
I go to the campground show page first off to start the server

7
00:00:25,320 --> 00:00:32,610
I should be able to see a button that says edit I can click that edit button takes me to a form I fill

8
00:00:32,610 --> 00:00:38,490
it out that forms submit to the update campground route and then that will redirect me back to the show

9
00:00:38,490 --> 00:00:38,900
page.

10
00:00:38,910 --> 00:00:40,340
And we should see those changes.

11
00:00:40,500 --> 00:00:42,220
And anyone can do this to start.

12
00:00:42,300 --> 00:00:44,410
No permissions no authorization.

13
00:00:44,430 --> 00:00:46,740
We'll talk about what that means in just a few videos.

14
00:00:46,770 --> 00:00:49,360
Once we cover the leading campgrounds as well.

15
00:00:49,380 --> 00:00:49,620
Great.

16
00:00:49,620 --> 00:00:51,030
So let's get started.

17
00:00:51,060 --> 00:00:54,800
First thing that we need to do is add in method override.

18
00:00:54,810 --> 00:01:02,220
And I'm going to pull up the restful routing chart that I made just so that we can remind ourselves

19
00:01:03,360 --> 00:01:04,890
the routes that we need.

20
00:01:04,890 --> 00:01:08,860
So let me just add this as another file in the same window.

21
00:01:09,270 --> 00:01:18,510
Remember that it is slash campground slash ID slash at it and update is sashed campground slash ID as

22
00:01:18,570 --> 00:01:19,630
a put request.

23
00:01:19,740 --> 00:01:28,800
So we need method override for that put request so we can start there NPM install method Dasch override

24
00:01:28,800 --> 00:01:29,020
.

25
00:01:29,160 --> 00:01:30,760
And I mentioned this in the last video.

26
00:01:30,810 --> 00:01:33,930
But just to remind you I'm working in V 10.

27
00:01:34,140 --> 00:01:35,540
So it's a new version.

28
00:01:35,910 --> 00:01:36,370
OK.

29
00:01:36,540 --> 00:01:40,800
Method over I'd dash dash save make sure that works.

30
00:01:40,860 --> 00:01:44,800
While that's going on closed this down and will open up.

31
00:01:44,800 --> 00:01:55,350
Actually yes and will also open up campground J s wraps and we're going to add a spot in after show

32
00:01:56,130 --> 00:01:58,750
for at campground row.

33
00:01:59,880 --> 00:02:03,440
And another one for update campground.

34
00:02:04,260 --> 00:02:09,640
And if you're forgetting why we need both of them you can review that restful route's video of that

35
00:02:09,640 --> 00:02:16,110
unit we went into a lot of detail but again it's just we need a form on it and the form has to submit

36
00:02:16,110 --> 00:02:17,870
somewhere which is update.

37
00:02:18,300 --> 00:02:23,580
OK so inside actress let's now configure it to use method overhead.

38
00:02:23,730 --> 00:02:26,630
So we first need to require it.

39
00:02:26,640 --> 00:02:30,300
So that's going to be method override.

40
00:02:30,300 --> 00:02:35,690
We can call it whatever we want of course but this matters method Dasch override.

41
00:02:36,660 --> 00:02:47,010
And then we have to do an apt use use method override and then we have to tell it what to look for and

42
00:02:47,010 --> 00:02:48,590
we want underscore method.

43
00:02:48,960 --> 00:02:51,260
That's the conventional thing that you'll see all the time.

44
00:02:51,270 --> 00:02:54,900
I think that's actually what they recommend on the method to override documentation.

45
00:02:55,140 --> 00:02:56,400
So underscore method.

46
00:02:56,400 --> 00:02:57,250
Great.

47
00:02:57,330 --> 00:03:02,160
Now we're going to actually take a step back and work on the Edit Raben so that we can get the form

48
00:03:02,160 --> 00:03:02,900
to show.

49
00:03:03,300 --> 00:03:06,500
So let's start there in our campground J.S. routes.

50
00:03:06,900 --> 00:03:12,890
The route is a get request and rather than app we're actually working on router.

51
00:03:12,990 --> 00:03:17,760
You can see so router get slash.

52
00:03:17,760 --> 00:03:25,860
And we don't need to say campgrounds slash ID slash at it because remember interrupts Yes we're requiring

53
00:03:25,860 --> 00:03:27,520
the route's right here.

54
00:03:27,960 --> 00:03:31,830
We're adding all of the campground routes after sosh campgrounds.

55
00:03:31,890 --> 00:03:32,940
So we don't need that.

56
00:03:33,030 --> 00:03:41,770
So we just need slash ID slash at it and then our requests and our response and the callback.

57
00:03:42,000 --> 00:03:48,820
And as always it's to arrest us and at that campground route and just make sure we see that.

58
00:03:49,610 --> 00:03:51,520
OK but start things up.

59
00:03:51,720 --> 00:03:54,100
Make sure we don't have any problems.

60
00:03:55,230 --> 00:03:59,960
Let's refresh and then just add on slash at it.

61
00:04:00,180 --> 00:04:00,740
Great.

62
00:04:00,810 --> 00:04:02,740
We see it at campground right.

63
00:04:02,880 --> 00:04:04,370
That's all we needed.

64
00:04:04,380 --> 00:04:07,230
Now let's go back and actually render a form.

65
00:04:07,230 --> 00:04:15,510
So rez render it needs to be campgrounds which is our views directory here.

66
00:04:15,510 --> 00:04:19,080
Slash at it which doesn't exist yet.

67
00:04:19,440 --> 00:04:21,600
So let's make that file now.

68
00:04:21,600 --> 00:04:26,440
So we want to do a touch fuse slash campgrounds slash at it.

69
00:04:26,460 --> 00:04:26,730
E.J..

70
00:04:26,730 --> 00:04:27,480
Yes.

71
00:04:27,810 --> 00:04:32,090
And then C9 that file again.

72
00:04:32,130 --> 00:04:39,840
Tab completion is your friend there and we'll start simple with just edit form and then let's add in

73
00:04:40,140 --> 00:04:45,550
another line just paragraph form goes here just so that we know for sure we're getting the right age

74
00:04:45,550 --> 00:04:45,570
.

75
00:04:45,580 --> 00:04:51,920
Tim I'll start the server again refresh and receive your template.

76
00:04:52,110 --> 00:04:52,860
Great.

77
00:04:52,920 --> 00:04:59,100
So now we're going to add a form here and rather than creating our own form from scratch I'm going to

78
00:04:59,100 --> 00:05:06,480
take the new form for campground just right here and copy this over because it's really similar to what

79
00:05:06,480 --> 00:05:14,530
we need so really the only difference between new and edit is where the form is going.

80
00:05:14,530 --> 00:05:18,100
That's one difference and the type of requests that we're making.

81
00:05:18,490 --> 00:05:24,430
So let's start by specifying the action and we can do what we need to do just yet because it needs to

82
00:05:24,430 --> 00:05:25,200
be campgrounds.

83
00:05:25,270 --> 00:05:31,500
Slash and Id like something like that slash at it but we need to get that ID.

84
00:05:31,660 --> 00:05:35,550
And right now we don't have that particular campground that we're editing.

85
00:05:35,770 --> 00:05:42,160
So inside that edit route not only do we render a template but we need to pass in a campground that

86
00:05:42,160 --> 00:05:43,280
we're editing.

87
00:05:43,300 --> 00:05:47,950
We haven't found that campground yet but I'm going to give it a variable name found campground that

88
00:05:47,950 --> 00:05:48,860
doesn't exist.

89
00:05:48,920 --> 00:05:52,050
You see we're getting complaints from cloud nine.

90
00:05:52,120 --> 00:06:02,080
Now we need to do a campground find by id and then the ID is right here request harams ID and then our

91
00:06:02,080 --> 00:06:12,310
callback error and otherwise we'll call it found campground just like that if there's an error.

92
00:06:12,820 --> 00:06:14,340
Let's do a rest.

93
00:06:14,830 --> 00:06:19,040
Redirect and we'll just go back to slash campgrounds.

94
00:06:19,300 --> 00:06:27,540
Otherwise we'll render the edit form and pass in found campground under the name campground.

95
00:06:28,000 --> 00:06:28,810
Great.

96
00:06:28,810 --> 00:06:34,990
Now instead of our template we'll use campground to set up the link for update route.

97
00:06:35,020 --> 00:06:40,870
So it's campgrounds slash campground down underscore ID Ejay Yes.

98
00:06:40,990 --> 00:06:47,170
So this is the value of the campground to ID the campground that we're passing to this template slash

99
00:06:47,170 --> 00:06:48,250
at it.

100
00:06:48,850 --> 00:06:54,640
And then the other tricky thing is that remember this needs to be a put request that we're making and

101
00:06:54,640 --> 00:07:02,350
to do that we actually have to send a question mark underscore method equals put and then we leave method

102
00:07:02,470 --> 00:07:03,510
as post.

103
00:07:03,940 --> 00:07:05,490
So that's one change we'll make.

104
00:07:05,500 --> 00:07:07,240
We'll also update what we say here.

105
00:07:07,360 --> 00:07:15,180
So I'll do it and then the name of the campground campground name and see what we get.

106
00:07:15,190 --> 00:07:24,040
So if we go restart refresh the page we get edit desert high that's named at the campground and we're

107
00:07:24,040 --> 00:07:25,090
close.

108
00:07:25,210 --> 00:07:30,850
We have a form that will submit if I if I click submit though we don't have the routes set up so it's

109
00:07:30,850 --> 00:07:34,000
telling me cannot put slash campgrounds.

110
00:07:34,740 --> 00:07:40,570
But to start let's fill in the data here so that when I edit a campground I see the data that I'm editing

111
00:07:40,600 --> 00:07:43,050
and or have to type it all from scratch.

112
00:07:43,240 --> 00:07:50,020
So that's simple if you remember back to the first video on it and update with the blog site rather

113
00:07:50,020 --> 00:07:51,530
than giving it a placeholder.

114
00:07:51,880 --> 00:07:57,820
We're going to give it a value and the value just needs to be campground and whatever the property is

115
00:07:57,850 --> 00:08:03,130
a campground name and I'll copy this down for the image you throw.

116
00:08:03,190 --> 00:08:05,740
So campground that image.

117
00:08:06,520 --> 00:08:14,130
And then finally campground that description I make sure I spelt that right.

118
00:08:14,410 --> 00:08:21,100
So remember what we're doing is looking up a campground in the route based off of the ID then rendering

119
00:08:21,100 --> 00:08:22,210
this template.

120
00:08:22,210 --> 00:08:28,760
And if I refresh you'll see that we're taking the data we found from our find by id passing that campground

121
00:08:28,760 --> 00:08:33,010
to the template and then displaying the information as the inputs values.

122
00:08:33,310 --> 00:08:34,700
So we have that done now.

123
00:08:34,930 --> 00:08:37,570
Now we need to work on when I actually submit this.

124
00:08:37,570 --> 00:08:39,070
So let's change this.

125
00:08:39,340 --> 00:08:44,180
So we see some changes add some extra symbols and hit submit.

126
00:08:44,290 --> 00:08:47,490
And of course I have this problem where we don't have the update route.

127
00:08:47,800 --> 00:08:49,410
So let's do that next.

128
00:08:49,960 --> 00:08:55,300
We can close out of our new I'll keep at it open for a little bit but we need to add in our update route

129
00:08:56,080 --> 00:08:59,550
which is just going to be a router dot put.

130
00:09:00,570 --> 00:09:06,550
And if you forget what it is update it's a put request to slash campgrounds slash.

131
00:09:06,550 --> 00:09:12,130
Id just like the show page except it to put request not a get request.

132
00:09:12,610 --> 00:09:16,850
So slash colon ID and that's it.

133
00:09:17,540 --> 00:09:20,760
Request in response and then we save.

134
00:09:20,960 --> 00:09:30,010
And inside of here what we need to do remember is we need to find and update the correct campground

135
00:09:31,120 --> 00:09:36,790
and then redirect somewhere usually the show page is what makes sense once you update an item you don't

136
00:09:36,790 --> 00:09:40,900
want to just go back to the whole list of campgrounds but you want to see your changes actually on the

137
00:09:40,900 --> 00:09:42,000
show page.

138
00:09:42,040 --> 00:09:46,330
So we'll begin with finding an updating which we could do separately.

139
00:09:46,360 --> 00:09:51,000
You could do a find by id and then do an update afterwards.

140
00:09:51,270 --> 00:09:58,510
But remember remember mongoose has that nice combination which is campground.

141
00:09:58,770 --> 00:10:05,160
Find by id and update and it takes in a few arguments.

142
00:10:05,160 --> 00:10:12,710
The first one is what we're finding what ID are looking for which is just request up harams ID from

143
00:10:12,720 --> 00:10:13,880
right here.

144
00:10:14,430 --> 00:10:22,650
Next is the data that we want to update and if we look at our form our data is name image and description

145
00:10:22,650 --> 00:10:23,520
.

146
00:10:23,520 --> 00:10:32,820
So what we could do is build a new object in here that looks like var data equals and then we'd say

147
00:10:32,940 --> 00:10:41,060
name is requests that body that name image is request body image.

148
00:10:41,280 --> 00:10:42,810
But that's a little bit of a pain.

149
00:10:43,110 --> 00:10:44,620
And I've shown this to you before.

150
00:10:44,750 --> 00:10:52,350
What we can do is wrap them all together inside of campground or whatever you want to call it.

151
00:10:52,530 --> 00:10:53,580
But I'll do campground.

152
00:10:53,730 --> 00:10:59,460
I'll just copy this down here and here at the closing bracket.

153
00:10:59,630 --> 00:11:01,820
Now if group these three things together.

154
00:11:01,880 --> 00:11:08,250
So if my Access Request up bodycam campground I now get name image and description all nested inside

155
00:11:08,250 --> 00:11:10,170
of a single object.

156
00:11:10,170 --> 00:11:16,750
So all I have to do now is pass in request of body campground just like that.

157
00:11:16,880 --> 00:11:25,030
And then my callback with error and then we'll call it updated campground.

158
00:11:26,750 --> 00:11:30,780
For now if there's an error we'll just do our standard.

159
00:11:30,840 --> 00:11:35,400
Not very usable but an easy fix for now is just to redirect back to campgrounds.

160
00:11:35,430 --> 00:11:40,300
Once we implement flash messages we'll be able to specify what the problem is and we can redirect somewhere

161
00:11:40,320 --> 00:11:42,150
else that makes a little more sense.

162
00:11:42,420 --> 00:11:47,880
But we won't really have any cause for an error just yet unless our database is turned off or something

163
00:11:47,890 --> 00:11:48,220
.

164
00:11:48,600 --> 00:11:57,760
And then if it works what we'll do is redstart redirect to the show page which needs to be sosh campgrounds

165
00:11:57,770 --> 00:11:57,940
.

166
00:11:58,170 --> 00:12:05,250
And the idea here which we need to add in the plus sign and we have a few ways of getting that ID we

167
00:12:05,250 --> 00:12:12,960
could do updated campground dot underscore ID or we can do requests dot parameters ID that's what we

168
00:12:12,960 --> 00:12:17,400
have right here in this wrap and will save.

169
00:12:17,390 --> 00:12:19,650
Now let's see what happens if I restart the server

170
00:12:22,880 --> 00:12:26,710
go back to the edit form refresh.

171
00:12:27,050 --> 00:12:35,360
Add in some noticeable data here submit and we have a small issue which is our route is still not quite

172
00:12:35,370 --> 00:12:38,210
working and it's actually that our route works fine.

173
00:12:38,220 --> 00:12:41,000
It's the form is submitting to the wrong place.

174
00:12:41,070 --> 00:12:45,200
Notice our request is campground slash ID slash at it.

175
00:12:45,330 --> 00:12:47,010
We don't want that slash at it.

176
00:12:47,190 --> 00:12:52,680
That's supposed to be the form has slash at it but where the form submit is supposed to be campground

177
00:12:52,680 --> 00:12:55,070
slash ID as a request.

178
00:12:55,920 --> 00:12:58,210
So we need to get rid of this.

179
00:12:58,620 --> 00:13:09,470
Now if we try that again refresh add some data and submit it works.

180
00:13:09,630 --> 00:13:14,850
It updated the campground it found it first and updated it and then redirected me back to the show page

181
00:13:14,890 --> 00:13:16,890
and I see my changes.

182
00:13:16,880 --> 00:13:20,810
The last thing that will do in this video is add in a button that says edit.

183
00:13:20,970 --> 00:13:27,290
So I can click on that button and go to that edit page without having to type slash edit manually.

184
00:13:27,660 --> 00:13:28,410
So that's simple.

185
00:13:28,410 --> 00:13:33,220
It's just a link that needs to go to this route and we'll do that on the show page.

186
00:13:33,360 --> 00:13:39,000
So campground show will do it just underneath everything else to start.

187
00:13:39,210 --> 00:13:48,050
So inside of the image responsive caption for not in the comment section but inside of the column medium

188
00:13:48,060 --> 00:13:50,200
nine inside the thumbnail.

189
00:13:50,550 --> 00:14:01,460
After are submitted by all this add in a button which will be an anchor tag ref needs to be slash campgrounds

190
00:14:02,340 --> 00:14:14,070
slash and then the ID with Aegeus campground dot underscore ID and then we need slash at it and then

191
00:14:14,070 --> 00:14:19,250
we'll just have a text be added but we also need a class to make it look a little nicer with bootstrap

192
00:14:20,150 --> 00:14:23,540
and we'll just do PTEN ETN.

193
00:14:23,550 --> 00:14:31,350
And I think a color that might make sense might be warning rather than danger will reserve danger for

194
00:14:31,350 --> 00:14:32,660
that delete button.

195
00:14:32,660 --> 00:14:34,340
So let's take a look now.

196
00:14:35,140 --> 00:14:37,680
I go back I refresh.

197
00:14:37,980 --> 00:14:43,050
We have an edit button which is actually a link I click and I get to the edit form.

198
00:14:43,230 --> 00:14:47,710
So let's take this back to normal submit.

199
00:14:47,850 --> 00:14:48,180
Great.

200
00:14:48,240 --> 00:14:49,080
So it's working.

201
00:14:49,130 --> 00:14:51,410
Let's go back and just update one other one.

202
00:14:51,480 --> 00:14:53,300
So we'll go back to sash campgrounds.

203
00:14:53,430 --> 00:14:55,420
Make sure that it works well.

204
00:14:55,440 --> 00:14:57,960
Update granite or lowly creek.

205
00:14:58,450 --> 00:15:04,590
What how did this change the image to be this image here.

206
00:15:05,110 --> 00:15:10,420
Pay set in submit and add up it's perfect in the next video.

207
00:15:10,440 --> 00:15:12,210
We'll focus on deleting campgrounds