1
00:00:00,540 --> 00:00:05,140
Welcome back in this lesson we're going to tackle the comment creation functionality.

2
00:00:05,400 --> 00:00:06,830
So we have three main objectives.

3
00:00:06,870 --> 00:00:11,660
I'll highlight those first we need to start by talking about something called nested routes.

4
00:00:11,820 --> 00:00:16,340
So we'll get to that then we need to make our two routes in order to create comets.

5
00:00:16,380 --> 00:00:21,630
We need a route for the form which is new and then we need a post route where we actually create the

6
00:00:21,630 --> 00:00:27,880
actual comment which is called create new and create and then we need the new comment form.

7
00:00:27,900 --> 00:00:30,270
Let's begin by discussing what we have so far.

8
00:00:30,300 --> 00:00:31,720
So I'm running this server.

9
00:00:31,740 --> 00:00:36,850
We have three campgrounds that we've seen in the database and I can click on one and we have a comment

10
00:00:36,860 --> 00:00:37,080
.

11
00:00:37,380 --> 00:00:42,720
What we would like to do is ALSO have a button that says add new comment or leave her for you or something

12
00:00:42,720 --> 00:00:43,350
like that.

13
00:00:43,500 --> 00:00:49,440
We click on it and then we go to a new page that shows a form and then on that form we could submit

14
00:00:49,620 --> 00:00:55,850
a new comment with an author's name and some text and hit submit and take us back here and we'll see

15
00:00:55,850 --> 00:00:56,810
our new comment.

16
00:00:57,180 --> 00:01:00,170
So that's the end goal to get there.

17
00:01:00,180 --> 00:01:02,930
I want to start by talking about something called nested routes.

18
00:01:03,090 --> 00:01:08,640
And before I do that I'll just highlight I'm now on VIF for because we are going to be moving some files

19
00:01:08,640 --> 00:01:11,040
around to changing the structure a little bit.

20
00:01:11,040 --> 00:01:14,620
So I want to make it into a new version just so that you can compare those changes.

21
00:01:14,700 --> 00:01:16,570
So again version 4.

22
00:01:16,940 --> 00:01:17,280
OK.

23
00:01:17,280 --> 00:01:21,890
So let's begin by doing a review of the restful routes that we've seen so far.

24
00:01:22,170 --> 00:01:29,370
So we've talked about index which displays a list of all dogs and the route is slash dogs or whatever

25
00:01:29,370 --> 00:01:34,020
our resources slash comments slash campgrounds slash users.

26
00:01:34,050 --> 00:01:35,390
And it's the get request.

27
00:01:35,670 --> 00:01:41,430
Then we have new uncreate which are kind of paired together where all that new does is it shows us a

28
00:01:41,450 --> 00:01:48,450
form and then we submit the form and the form sends the data to create ad which is flash dogs the same

29
00:01:48,450 --> 00:01:52,450
path as the index except it's a post request.

30
00:01:52,950 --> 00:01:57,720
And then we have a show which is a little bit different because there is a path parameter inside the

31
00:01:57,720 --> 00:02:04,140
route the ID and we need that because the whole point of show is that it shows information and details

32
00:02:04,140 --> 00:02:06,770
about one particular entity.

33
00:02:06,780 --> 00:02:08,010
So this works just fine.

34
00:02:08,010 --> 00:02:09,500
This is what we have so far.

35
00:02:09,630 --> 00:02:14,430
We have our Index for campgrounds which is slash campgrounds.

36
00:02:14,430 --> 00:02:19,470
We have new and create and show for campgrounds.

37
00:02:19,470 --> 00:02:26,840
So we have Slash campgrounds and then we have Slash campgrounds slash new and then we have Slash campgrounds

38
00:02:28,230 --> 00:02:35,300
as a post for create and slash campgrounds slash ID for show.

39
00:02:35,580 --> 00:02:40,650
But now we need to add in some comment routes because we want to be able to add a comment again when

40
00:02:40,650 --> 00:02:42,210
we click a button right here.

41
00:02:42,210 --> 00:02:47,760
It should take us to a route to add a comment to this particular campground and that's the important

42
00:02:47,760 --> 00:02:48,490
part.

43
00:02:48,510 --> 00:02:51,090
So our route isn't actually going to look like this.

44
00:02:51,090 --> 00:02:57,570
We're not going to have new uncreate for comments that look like this where we have Slash comments slash

45
00:02:57,570 --> 00:03:03,490
new and slash comments as opposed to actually create.

46
00:03:04,200 --> 00:03:10,530
That's not what we're going to have because this you know has no information about the particular campground

47
00:03:10,590 --> 00:03:12,480
that we're adding the comment to.

48
00:03:12,480 --> 00:03:15,550
So this would work if we were just arbitrarily creating comments.

49
00:03:15,720 --> 00:03:20,980
But if we actually want them to be associated to a particular campground which we do we need to have

50
00:03:20,980 --> 00:03:23,330
the campground ID in the URL.

51
00:03:23,610 --> 00:03:27,620
So this gets to the first topic I want to bring up which is nested wraps.

52
00:03:28,110 --> 00:03:34,140
So what we can do is take these restful routes and combine them and we can nest the comment routes on

53
00:03:34,140 --> 00:03:36,410
top of for after the campground routes.

54
00:03:36,690 --> 00:03:47,760
So our comment new is actually going to look like campground slash ID slash comments slash new and or

55
00:03:47,760 --> 00:03:48,430
create.

56
00:03:48,480 --> 00:03:50,700
It's going to be campgrounds.

57
00:03:50,820 --> 00:03:53,530
Slash ID slash comments.

58
00:03:53,850 --> 00:03:59,490
So what we've done is we've taken the campground in the ID and just put it before all of the routes

59
00:03:59,490 --> 00:04:01,020
that have to do with comments.

60
00:04:01,020 --> 00:04:04,320
And that's because a comment is dependent on a campground.

61
00:04:04,500 --> 00:04:07,550
We don't have comments that exist away from campgrounds.

62
00:04:07,560 --> 00:04:09,210
They are inherently linked.

63
00:04:09,480 --> 00:04:14,070
And inside the create for instance we're not just going to make a comment we're going to make a comment

64
00:04:14,100 --> 00:04:16,830
and then we're going to associate it with the campground.

65
00:04:16,890 --> 00:04:21,660
So we're going to have to do a find by ID for camp ground and then we're going to have to create a comment

66
00:04:21,990 --> 00:04:24,720
and then we're going to have to connect them and save them both.

67
00:04:24,720 --> 00:04:29,600
So we need this idea in the wrap so all of that's to say we're going to use nested routes.

68
00:04:29,790 --> 00:04:33,720
These are the two new routes we're adding so new and create for comments.

69
00:04:33,720 --> 00:04:34,200
All right.

70
00:04:34,440 --> 00:04:35,820
So let's get started.

71
00:04:35,820 --> 00:04:42,670
I'm going to change over to V for right now I'm in v3 so I'm going to C.D out and then CD into before

72
00:04:42,680 --> 00:04:43,050
.

73
00:04:43,320 --> 00:04:44,220
Just like that.

74
00:04:44,340 --> 00:04:47,280
And then I'm going to open up after Yes.

75
00:04:47,310 --> 00:04:51,780
And this is where we'll be doing most of our work and we're going to start by adding in the new route

76
00:04:52,290 --> 00:04:53,710
which looks like this right here.

77
00:04:53,730 --> 00:05:01,590
Campgrounds slash ID slash comments slash new as a get request and it should show a form for us to create

78
00:05:01,620 --> 00:05:02,520
a new comment.

79
00:05:03,060 --> 00:05:06,740
And we have a lot of routes which again and we will be moving very shortly.

80
00:05:07,010 --> 00:05:13,500
But I'm going to start by just adding a little divider here just to make it clear duplicate that and

81
00:05:13,500 --> 00:05:16,220
then I'll just say comments routes.

82
00:05:16,470 --> 00:05:17,180
Okay.

83
00:05:17,610 --> 00:05:27,410
And we're going to add an apt get slash campground slash and Id slash comments slash new.

84
00:05:27,780 --> 00:05:35,110
And then our callback and in here we want our request and our response.

85
00:05:35,120 --> 00:05:40,090
And then inside we're going to start by doing a redstart send.

86
00:05:40,270 --> 00:05:47,590
This will be a comment form just to make sure that our route is hooked up correctly and if we now start

87
00:05:47,590 --> 00:05:56,260
the server node mapped out J us and then we go to the campground page refresh and let's click on one

88
00:05:56,260 --> 00:06:00,160
of these and to get to the new comment route.

89
00:06:00,230 --> 00:06:03,110
Need to add slash comments slash new.

90
00:06:03,970 --> 00:06:04,990
And there we go.

91
00:06:05,020 --> 00:06:07,990
It says this will be the common form.

92
00:06:08,000 --> 00:06:09,890
Now let's go back.

93
00:06:09,880 --> 00:06:15,860
Instead of sending back this response let's render a template and that should be new.

94
00:06:16,030 --> 00:06:18,020
That's the name of the template new that E.J..

95
00:06:18,070 --> 00:06:18,690
Yes.

96
00:06:19,060 --> 00:06:26,050
But there is a problem which is we have a new form already existing for our campground new right here

97
00:06:27,400 --> 00:06:31,630
so we can have another template called new and must we make a small change and that's what we're going

98
00:06:31,630 --> 00:06:32,270
to do.

99
00:06:32,290 --> 00:06:37,990
We're going to split up the views this directory here we're going to add in two new directories campground

100
00:06:38,290 --> 00:06:40,370
and we're going to add in comment.

101
00:06:40,750 --> 00:06:42,220
So we'll do that now.

102
00:06:42,640 --> 00:06:51,770
Make a directory instead of use called comments and make another one called campgrounds and you can

103
00:06:51,760 --> 00:06:56,740
see those two new directories here and underscore to drag the files over to where I need them to go

104
00:06:56,750 --> 00:06:56,780
.

105
00:06:56,770 --> 00:07:05,140
So index is for campground new is for campgrounds show is for campground and then we'll need to make

106
00:07:05,260 --> 00:07:06,110
our new.

107
00:07:06,320 --> 00:07:08,040
US instead of comments.

108
00:07:08,350 --> 00:07:09,530
So let's do that now.

109
00:07:09,620 --> 00:07:19,420
Will do touch views slash comments slash new each Yes and then we'll do the same thing but open it up

110
00:07:22,750 --> 00:07:31,930
and we'll open that file up and let's add our H-1 that just says new comment form and save that.

111
00:07:32,530 --> 00:07:36,270
So what we want to do is see that when we go to this you are well.

112
00:07:36,340 --> 00:07:40,350
So we have our redstart render new but we need to change it.

113
00:07:40,390 --> 00:07:44,920
It should now be redstart render comments slash new.

114
00:07:45,070 --> 00:07:47,750
It's not just new in the route of views.

115
00:07:47,760 --> 00:07:51,070
It's now instead of comments you can see there.

116
00:07:51,620 --> 00:07:54,650
And we'll also need to change over all of the other routes as well.

117
00:07:54,670 --> 00:08:00,230
So this needs to be campground slash.

118
00:08:01,330 --> 00:08:04,870
This needs to be campgrounds as well and we don't need the dam.

119
00:08:04,880 --> 00:08:09,040
E.J. Yes and then we have one more

120
00:08:12,300 --> 00:08:12,770
here.

121
00:08:12,790 --> 00:08:19,820
This one can stay the same but index needs to be campgrounds slash index.

122
00:08:19,820 --> 00:08:20,280
Okay.

123
00:08:20,290 --> 00:08:23,470
And landing is on its own because it doesn't belong to campgrounds.

124
00:08:23,480 --> 00:08:26,440
It doesn't belong to comments it's its own thing.

125
00:08:26,460 --> 00:08:29,680
We'll just leave it where it is and it's really pretty much empty still.

126
00:08:29,680 --> 00:08:36,970
We haven't actually filled out most of the landing page so let's try running this code now node abduct

127
00:08:37,190 --> 00:08:44,320
us and we'll go to the campground page and we have a problem.

128
00:08:44,440 --> 00:08:49,300
You might be thinking that the problem is that express didn't find the file we just created the campground

129
00:08:49,300 --> 00:08:55,660
slash index but that's not actually the issue with the issue is if we if we read closely here it can't

130
00:08:55,660 --> 00:08:56,450
find the file.

131
00:08:56,480 --> 00:08:58,290
No such file or directory.

132
00:08:58,530 --> 00:09:01,550
Yup camp version for views campgrounds.

133
00:09:01,780 --> 00:09:03,180
Parshall's header.

134
00:09:03,240 --> 00:09:04,220
Each Yes.

135
00:09:04,270 --> 00:09:08,990
So it's not finding the parcels that we're including if we open up the index.

136
00:09:09,110 --> 00:09:10,180
This right here.

137
00:09:10,610 --> 00:09:13,300
And that's because we changed where this file was.

138
00:09:13,420 --> 00:09:19,340
So we need to change how we're linking to Parshall's because we used to be in the same directory as

139
00:09:19,340 --> 00:09:21,060
Parshall's like lending each.

140
00:09:21,080 --> 00:09:21,570
Yes.

141
00:09:21,670 --> 00:09:24,980
But now this file is nested inside of campgrounds.

142
00:09:25,270 --> 00:09:33,280
So we need to go back one folder first which will take us from here up to here and then into Parshall's

143
00:09:33,500 --> 00:09:35,460
and then heterodoxy J us.

144
00:09:35,590 --> 00:09:42,410
So dot dot slash Parshall's dot dot represents one level back one folder back just like when we do see

145
00:09:42,410 --> 00:09:43,780
the dot dot.

146
00:09:44,260 --> 00:09:48,540
All right and we'll do the same thing for the footer dot dot slash.

147
00:09:48,760 --> 00:09:52,900
And if we save now and refresh this works just fine.

148
00:09:53,000 --> 00:09:56,530
But if we try and go to the show page we have the same problem.

149
00:09:56,650 --> 00:10:07,090
So we need to go to those different templates campgrounds new Let's do dot dot slash slash and also

150
00:10:07,100 --> 00:10:10,540
show will do dot dot slash again.

151
00:10:10,880 --> 00:10:15,150
And one more and save now this template should work for us.

152
00:10:15,160 --> 00:10:19,170
So we have show she can go back at a new campground.

153
00:10:19,250 --> 00:10:20,830
This works just fine.

154
00:10:20,870 --> 00:10:21,960
Great.

155
00:10:21,970 --> 00:10:24,260
Now let's try out the comment new template.

156
00:10:24,480 --> 00:10:29,720
So let's click on any show page and add on slash comments slash new.

157
00:10:30,380 --> 00:10:32,360
And we're getting the correct each time out.

158
00:10:32,750 --> 00:10:39,050
So now let's actually add the form in here and I'm going to steal from our other new template which

159
00:10:39,040 --> 00:10:46,010
is the new campground was going to take all of this actually and copy it and now go over to comment

160
00:10:46,030 --> 00:10:50,710
new and paste that in and we'll need to change a few things.

161
00:10:50,870 --> 00:10:59,230
Well keep the same Parshall's the head or the footer and we'll change this to be add new comments and

162
00:10:59,230 --> 00:11:03,410
save that and then we need to change the you are out here.

163
00:11:03,770 --> 00:11:06,290
Are you are needs to be slashed campgrounds.

164
00:11:06,430 --> 00:11:10,920
Slash and we need the ID of the campground which we don't have yet.

165
00:11:11,090 --> 00:11:12,550
We don't have it in this template.

166
00:11:12,860 --> 00:11:18,260
What we need to do is actually pass it through to this template and we could just pass the idea itself

167
00:11:18,250 --> 00:11:20,800
through as a variable and display it here.

168
00:11:21,080 --> 00:11:26,120
But I actually want to use the title or the name of the campground as well so that we can say add new

169
00:11:26,120 --> 00:11:27,840
comment to.

170
00:11:28,070 --> 00:11:35,870
And then here we could do campground name which right now we can't because campground isn't defined

171
00:11:36,560 --> 00:11:37,580
so we'll do that.

172
00:11:37,630 --> 00:11:44,090
And then here we'll just pre-filled the code we want to work rather than campground name will add in

173
00:11:44,170 --> 00:11:52,040
campground dot ID and then we need the rest of the route which is sashed comments because remember this

174
00:11:52,030 --> 00:11:54,870
is the post route to create a comment.

175
00:11:55,150 --> 00:11:56,670
So we have this route right now.

176
00:11:56,680 --> 00:12:02,200
That's the template we're looking at and the form on that template the new template needs to send a

177
00:12:02,200 --> 00:12:07,010
request submit the form data as a post to this you know.

178
00:12:07,340 --> 00:12:08,280
OK.

179
00:12:08,620 --> 00:12:12,950
So we've written this it's not going to work right now because campground is not defined in the template

180
00:12:12,960 --> 00:12:13,220
.

181
00:12:13,420 --> 00:12:20,180
So what we need to do is go to the route the new route that we have the very bottom here and we need

182
00:12:20,170 --> 00:12:26,110
to find camp ground by id and then we want to send that through when we render.

183
00:12:26,530 --> 00:12:36,940
So that's going to be a campground that we all do find by id and the ID is request harams that Id whatever

184
00:12:36,940 --> 00:12:37,990
we named here.

185
00:12:38,170 --> 00:12:40,230
And the standard name is ID.

186
00:12:40,630 --> 00:12:48,460
And then when that's done we'll have a callback error and then campground and we'll just check if there's

187
00:12:48,460 --> 00:12:53,810
an error we'll cancel that log for now.

188
00:12:53,810 --> 00:12:59,120
Otherwise we're going to render the comments new.

189
00:12:59,530 --> 00:13:07,640
And we're going to pass in campground so campground will be equal to the value of this campground coming

190
00:13:07,630 --> 00:13:09,860
back from the database.

191
00:13:10,150 --> 00:13:16,540
So we'll save this and we can try taking a look at that template now if we restart CheckFree of any

192
00:13:16,540 --> 00:13:17,550
syntax errors.

193
00:13:17,590 --> 00:13:19,260
Looks good.

194
00:13:19,750 --> 00:13:24,820
We can't just refresh because every timer app loads up we're actually generating new campgrounds and

195
00:13:24,830 --> 00:13:26,330
they'll have different ideas.

196
00:13:26,570 --> 00:13:32,450
So what we need to do is go back to camp grounds and then click on one of these and then go to slash

197
00:13:32,440 --> 00:13:35,050
comments slash new.

198
00:13:36,130 --> 00:13:37,620
And we're getting a forum here.

199
00:13:37,780 --> 00:13:39,000
Let's inspect the form.

200
00:13:39,110 --> 00:13:43,950
But the first thing that looks good to me is that it's telling me add new comment to clads rest.

201
00:13:44,140 --> 00:13:49,020
So let's inspect and let's take a look at the URL that the form is submitting to.

202
00:13:49,590 --> 00:13:53,160
So the form action is set to slash campground slash.

203
00:13:53,170 --> 00:13:58,070
This giant ID slash comments as a post which is exactly what we need.

204
00:13:58,340 --> 00:14:01,380
Now we need to make this form have the correct attributes.

205
00:14:01,610 --> 00:14:08,700
So we'll go back and we want this form to have comment text so we'll just call it text for now.

206
00:14:08,870 --> 00:14:09,730
And an author.

207
00:14:09,760 --> 00:14:11,250
And that's all we need.

208
00:14:11,650 --> 00:14:15,940
So we don't need the description that we had to delete that.

209
00:14:16,730 --> 00:14:19,030
And then we'll also change the names here.

210
00:14:19,370 --> 00:14:24,380
And I'm going to show you another strategy for setting the names up rather than doing them separate

211
00:14:24,380 --> 00:14:24,480
.

212
00:14:24,550 --> 00:14:27,980
Like author and then appear doing text.

213
00:14:28,030 --> 00:14:34,600
What we can do is group them together like this comment and then square brackets around author and then

214
00:14:34,610 --> 00:14:41,480
comment square brackets and text and then when we submit this form it will all be nested inside of comment

215
00:14:41,480 --> 00:14:41,740
.

216
00:14:41,750 --> 00:14:48,310
So inside of my objects in the route I'll be able to extract comment request up body duck comment and

217
00:14:48,310 --> 00:14:52,820
it will already have text and author inside of it so I'll show you that in just a second.

218
00:14:53,090 --> 00:14:56,050
Let's just make sure the form looks OK now.

219
00:14:56,170 --> 00:14:57,760
Refresh the page.

220
00:14:57,760 --> 00:15:01,440
All right so we have two inputs text an author we can submit it