1
00:00:00,220 --> 00:00:05,490
Well come back soon the last video we made a little bit of a mess of things by adding in the seeds file

2
00:00:05,490 --> 00:00:05,610
.

3
00:00:05,700 --> 00:00:11,010
And that's the point we wanted to add into code that would see the database both with campgrounds and

4
00:00:11,010 --> 00:00:13,150
comments even though comments don't work.

5
00:00:13,320 --> 00:00:14,960
So we get some error messages.

6
00:00:14,970 --> 00:00:19,100
Now we're going to focus on going and making the comment model and making those errors go away.

7
00:00:19,320 --> 00:00:24,630
So the two main objectives are to make the errors go away by creating the comments file adding in the

8
00:00:24,630 --> 00:00:30,080
correct model code and then also displaying the comments that are associated with the given campground

9
00:00:30,480 --> 00:00:32,250
on that campground show page.

10
00:00:32,250 --> 00:00:37,770
So if I click here my server is not started but if I did I would want to see the show page that has

11
00:00:37,770 --> 00:00:41,450
the details about the campground and the associated comments.

12
00:00:41,890 --> 00:00:42,200
OK.

13
00:00:42,210 --> 00:00:46,720
So let's get started let's just refresh our memory on what happens when I run the server.

14
00:00:47,070 --> 00:00:50,600
I get an error now telling me cannot find module models.

15
00:00:50,610 --> 00:00:52,220
Slash comment.

16
00:00:52,260 --> 00:00:55,510
So we need to make that file touch models.

17
00:00:55,650 --> 00:00:57,600
Slash comment.

18
00:00:57,650 --> 00:00:58,810
Yes.

19
00:00:59,490 --> 00:01:00,750
And then we're going to open that up

20
00:01:04,650 --> 00:01:06,260
just like that.

21
00:01:06,390 --> 00:01:11,850
And then inside of here we know that at some point at the bottom we're going to have a module that exports

22
00:01:11,880 --> 00:01:13,790
equal something and up top.

23
00:01:13,800 --> 00:01:16,460
We're going to import mongoose so far.

24
00:01:16,680 --> 00:01:20,880
Mongoose equals require mongoose.

25
00:01:21,150 --> 00:01:22,450
Just like that.

26
00:01:22,620 --> 00:01:25,860
And then what we'll need to do is create our schema.

27
00:01:25,860 --> 00:01:27,560
So a comment has two things.

28
00:01:27,720 --> 00:01:33,000
Text which you've seen already here we decided text and author.

29
00:01:33,150 --> 00:01:36,210
Eventually Arthur will be a reference to a user model.

30
00:01:36,210 --> 00:01:40,730
Once we have these earth indication for now it's just a string with the name of the author.

31
00:01:40,740 --> 00:01:42,200
So text an author.

32
00:01:42,360 --> 00:01:43,690
Both of which are strings.

33
00:01:43,740 --> 00:01:51,740
So we're going to create this schema for comment schema and we don't need to uppercase that equals.

34
00:01:51,870 --> 00:01:55,130
And then this is mongoose schema.

35
00:01:56,010 --> 00:01:59,250
And then inside of here we're going to have text which is a string.

36
00:01:59,700 --> 00:02:03,690
And then we're also going to have author which is also a string.

37
00:02:03,990 --> 00:02:11,160
So that makes us the schema and then we need to compile that to the model what to do with Mongoose top

38
00:02:11,160 --> 00:02:19,830
model and the singular name of our model which is comment and then the schema which is a comment schema

39
00:02:19,830 --> 00:02:20,150
.

40
00:02:20,370 --> 00:02:22,600
And that's what we're going to export.

41
00:02:22,710 --> 00:02:27,360
So that's all we should need to do to make the comment model which we're then exporting out and we're

42
00:02:27,360 --> 00:02:31,680
using instead are seeds Jap's file or requiring it right here.

43
00:02:31,920 --> 00:02:35,280
So if all things go well we should have a different error message now.

44
00:02:35,430 --> 00:02:40,330
Let's clear and try running or app again.

45
00:02:41,570 --> 00:02:46,320
And it looks like it worked just fine and it did create the campgrounds for us and we can view a show

46
00:02:46,320 --> 00:02:51,960
page but if we look at the data that's stored in the database or if we just look at our models we don't

47
00:02:51,960 --> 00:02:54,080
actually have any associated data.

48
00:02:54,300 --> 00:03:00,920
So let me show you open up Mangu and the database that I'm using is the camp version 3.

49
00:03:01,320 --> 00:03:09,450
So I'm going to use the web cam the three and then I'm going to show the collections and we'll see what

50
00:03:09,450 --> 00:03:10,550
we have here.

51
00:03:10,590 --> 00:03:13,220
So we have two collections campgrounds and comments.

52
00:03:13,380 --> 00:03:14,850
And if I look at the campgrounds.

53
00:03:15,030 --> 00:03:25,680
So let's do D-B dot campgrounds that find everything you can see that we have three campgrounds but

54
00:03:25,680 --> 00:03:30,990
all that we're getting is the campground ID the name and the image and there's nothing about comments

55
00:03:30,990 --> 00:03:31,360
.

56
00:03:31,530 --> 00:03:38,490
And if we do the same thing for comments the comment stuff find all you'll see that we have text and

57
00:03:38,490 --> 00:03:41,080
author but we have nothing about campground.

58
00:03:41,310 --> 00:03:42,770
So we're part of the way there.

59
00:03:42,870 --> 00:03:44,830
Now we need to work on the association.

60
00:03:45,210 --> 00:03:52,050
So all Control-C out of there and what we want to do is associate a comment with the campground and

61
00:03:52,050 --> 00:03:56,310
we'll do that by adding a object of reference to the campground schema.

62
00:03:56,310 --> 00:04:02,010
So if we look at Seeds the way that I wrote it is that we should be able to do campground dumb comments

63
00:04:02,530 --> 00:04:03,820
and that doesn't exist yet.

64
00:04:03,870 --> 00:04:07,150
So we need to add the comments property to campground.

65
00:04:07,380 --> 00:04:14,040
So let's open up the campground Dryas file and add a property here called comments and it's going to

66
00:04:14,040 --> 00:04:14,870
be an array.

67
00:04:15,360 --> 00:04:22,380
And it's going to be an array just like we did with users in posts where we had an object inside that

68
00:04:22,410 --> 00:04:34,380
object had type which was mongoose that schema type dot object id just like that comma and then it had

69
00:04:34,380 --> 00:04:35,480
a ref.

70
00:04:35,550 --> 00:04:37,480
And this is going to be comments.

71
00:04:37,680 --> 00:04:38,960
That's the name of the model.

72
00:04:39,330 --> 00:04:44,370
So what we're saying is that the comments property should be an array of comment IDs.

73
00:04:44,580 --> 00:04:47,050
So we're not embedding the actual comments in here.

74
00:04:47,160 --> 00:04:50,310
We're just embedding an ID or a reference to the comments.

75
00:04:50,670 --> 00:04:55,240
So we'll save now and if we try and see the database again with Noad apt.

76
00:04:55,330 --> 00:04:59,650
Yes we now have a small issue which is a syntax error.

77
00:05:00,060 --> 00:05:03,340
We need to have types that object ID.

78
00:05:03,360 --> 00:05:04,790
So now if we run this again

79
00:05:07,740 --> 00:05:11,710
it tells us that it removed all campgrounds out of that campground added a campground added a campground

80
00:05:12,160 --> 00:05:15,690
created a new comic created a new comment and then created a new comic.

81
00:05:15,890 --> 00:05:17,470
Let's see what we're looking at.

82
00:05:17,510 --> 00:05:18,740
Refresh the page.

83
00:05:18,750 --> 00:05:20,240
This should look the same.

84
00:05:20,250 --> 00:05:32,130
Now let's dive into Mongo and let's use yo camp V3 and then we'll do divi campgrounds find.

85
00:05:33,250 --> 00:05:38,810
And if we make this a little bigger I can see that we have a comment object now or comments property

86
00:05:39,240 --> 00:05:44,730
where each one has a single comment and it's the same comment on all of them.

87
00:05:45,120 --> 00:05:49,640
Although the ideas are different it's the same text and author but it's technically a different entity

88
00:05:49,700 --> 00:05:54,310
because we created three different comments that just have the same content.

89
00:05:54,320 --> 00:05:56,160
All right so we have the association done.

90
00:05:56,310 --> 00:05:57,450
That's all we need to do.

91
00:05:57,470 --> 00:06:02,540
We can make a new comment and we can associate it with a campground by adding it to the comments array

92
00:06:02,660 --> 00:06:03,830
on each campground.

93
00:06:04,110 --> 00:06:07,690
What we want to do next is focus on displaying the comments.

94
00:06:07,940 --> 00:06:09,700
So we're going to do that on the show route.

95
00:06:09,870 --> 00:06:15,170
So we'll go back to actually yes and we can close out of our seats file for now and our comment in our

96
00:06:15,170 --> 00:06:15,870
campground.

97
00:06:16,110 --> 00:06:17,810
And we're just going to focus on this app.

98
00:06:17,940 --> 00:06:18,710
Yes.

99
00:06:19,070 --> 00:06:20,800
So I'm going to get rid of all of this now.

100
00:06:20,900 --> 00:06:27,970
That was sort of our all the data and then we did make some room in here and go down to our show route

101
00:06:28,000 --> 00:06:28,440
.

102
00:06:28,880 --> 00:06:33,370
So instead of show we're finding the right campground with the ID.

103
00:06:33,530 --> 00:06:35,830
But if we look at the campground that's coming back.

104
00:06:35,940 --> 00:06:42,170
Remember that it looks like this where we have comments but comments will be an array with object IDs

105
00:06:42,170 --> 00:06:42,690
in it.

106
00:06:42,910 --> 00:06:48,030
And if we want the actual comments which we do we want to pass the comments to the show template we

107
00:06:48,020 --> 00:06:54,250
need to use that dot populate dot exec so we can refactor this just a little bit.

108
00:06:54,290 --> 00:06:56,410
We're going to do find by ID.

109
00:06:56,660 --> 00:07:03,920
And we're going to close that off right there and then we're going to do a populate comments and then

110
00:07:03,920 --> 00:07:09,550
a dot exec and we passed this callback function into exec like this.

111
00:07:09,560 --> 00:07:15,290
Oh it's a little bit jarring to students but we're finding a campground still find by id and then we're

112
00:07:15,290 --> 00:07:17,690
populating the comments on that campground.

113
00:07:17,900 --> 00:07:23,510
And then with DOD exec we're actually executing this query that we made and then that comes back and

114
00:07:23,510 --> 00:07:25,310
we still have the found campground.

115
00:07:25,400 --> 00:07:31,250
But it should look different because inside a found campground should now be comments not just ideas

116
00:07:31,280 --> 00:07:36,740
but actual comments and we can prove that by printing it out before we render the template.

117
00:07:37,110 --> 00:07:40,970
So found camp ground counted log that and let's see what happens.

118
00:07:40,980 --> 00:07:47,800
Now I start the server and the only way I'm going to see this is if I go to a show route.

119
00:07:47,880 --> 00:07:53,040
So let's go to canyon floor and it doesn't look like anything has changed because we're not displaying

120
00:07:53,030 --> 00:07:53,720
anything.

121
00:07:53,850 --> 00:07:58,850
But if we go and look in the console what we're printing out found campground you can see that we've

122
00:07:58,860 --> 00:08:00,980
now populated the comment array.

123
00:08:01,190 --> 00:08:06,360
So inside the comments right there's a single comment by Homer that says This place is great but I wish

124
00:08:06,360 --> 00:08:08,050
there was Internet.

125
00:08:08,100 --> 00:08:13,430
Now all we have left to do is use the comments array in the template we're already passing in the entire

126
00:08:13,430 --> 00:08:19,800
found campground so we can just access campground comments inside the show template and we'll do that

127
00:08:19,790 --> 00:08:29,600
now will open up the template that C-9 views slash show and we'll start just at the very bottom doing

128
00:08:29,610 --> 00:08:32,680
a loop and we're going to loop through all the comments.

129
00:08:33,000 --> 00:08:37,770
So we'll do a for each and that's on campground dot comments.

130
00:08:37,760 --> 00:08:40,270
Remember that campground refers to this whole thing.

131
00:08:40,370 --> 00:08:41,440
It's a campground.

132
00:08:41,510 --> 00:08:50,210
Comments for each function and in here we'll just call it comment.

133
00:08:50,450 --> 00:08:52,280
Open that up and then add our.

134
00:08:52,280 --> 00:08:52,540
E.J..

135
00:08:52,550 --> 00:08:53,020
Yes.

136
00:08:53,120 --> 00:08:59,010
Closing bracket and do the same thing down here no equal sign remember that.

137
00:08:59,370 --> 00:09:02,780
And then we'll just make a simple paragraph for each comment to start.

138
00:09:02,780 --> 00:09:04,230
We will be styling this later.

139
00:09:04,380 --> 00:09:15,020
So a paragraph and it's just going to have the comment that author first just like that dash the comment

140
00:09:16,400 --> 00:09:18,030
text.

141
00:09:18,030 --> 00:09:20,220
And we need equal signs in both of those.

142
00:09:20,450 --> 00:09:22,110
And let's make the author bolded.

143
00:09:22,320 --> 00:09:27,320
So I'll put a strong tag around the author and let's indent to make this a little easier to see what's

144
00:09:27,330 --> 00:09:28,150
happening.

145
00:09:28,190 --> 00:09:33,760
So strong tag and then we'll put the author inside the strong tag just like that.

146
00:09:34,160 --> 00:09:35,560
And then we'll have a dash.

147
00:09:35,630 --> 00:09:38,470
The comment that text just like that.

148
00:09:39,170 --> 00:09:39,580
All right.

149
00:09:39,770 --> 00:09:44,840
So this will loop through all the comments on a given campground on the show page and it's going to

150
00:09:44,850 --> 00:09:47,150
make a paragraph for each one.

151
00:09:47,630 --> 00:09:53,570
And inside that paragraph we're going to print out the comments author folded and then a dash the comment

152
00:09:53,610 --> 00:09:54,440
text.

153
00:09:54,840 --> 00:09:56,370
So let's see if that works for us.

154
00:09:56,610 --> 00:10:02,440
Let's go ahead and stop the server or restart the server now visit the show page.

155
00:10:02,790 --> 00:10:07,820
Let's go back refresh let's do desert Mesa and there we go.

156
00:10:07,830 --> 00:10:09,860
We have our first comment down here.

157
00:10:09,870 --> 00:10:13,020
We only have one comment on each campground for now.

158
00:10:13,010 --> 00:10:14,140
Soon we'll have more.

159
00:10:14,150 --> 00:10:16,690
Once we add in the ability to add a new comment.

160
00:10:16,940 --> 00:10:21,480
So right here there will be a button that we're going to add in the next video that says add a comment

161
00:10:21,870 --> 00:10:26,340
and we click that it will take us to a form and then we can add a new comment and then come back to

162
00:10:26,340 --> 00:10:29,040
this page and see our new comment showing up.

163
00:10:29,510 --> 00:10:32,720
OK so that's all we needed to do in this video be confident a lot.

164
00:10:32,820 --> 00:10:37,770
Let's take a moment to go back and review everything that we did or the important parts at least.

165
00:10:37,760 --> 00:10:42,800
So we created the comment that she has file we added in our comment schema and we created the model

166
00:10:43,740 --> 00:10:48,220
and then we changed the campground a little bit so that the schema now has comments.

167
00:10:48,320 --> 00:10:53,990
That comment is an array not of entire comments but of the comment object IDs.

168
00:10:54,260 --> 00:10:58,330
And then we have our seats file that's still running just fine.

169
00:10:58,350 --> 00:10:59,610
The very top here.

170
00:10:59,820 --> 00:11:04,650
And stylistically it would make a little bit more sense for us to move this down.

171
00:11:04,740 --> 00:11:09,290
So I'm going to cut this out and just move it after we've done that configuration.

172
00:11:09,570 --> 00:11:10,710
But it really doesn't matter.

173
00:11:10,910 --> 00:11:14,700
So we're seeding the database that's adding in three different campgrounds.

174
00:11:14,720 --> 00:11:20,840
Each one with a comment by Homer and then what we're doing is when we visit a show route which we have

175
00:11:20,850 --> 00:11:26,760
here we're retrieving the campground to one campground with the right I.D. and then populating the comments

176
00:11:26,750 --> 00:11:32,390
array on it which is going to fill in this data here so that it's not just an I.D. and then we're able

177
00:11:32,390 --> 00:11:33,680
to send that to the template.

178
00:11:33,770 --> 00:11:38,990
And then in the template we're using it we're looping through it and displaying a paragraph for each

179
00:11:39,000 --> 00:11:39,570
comment.

180
00:11:39,810 --> 00:11:40,270
OK.

181
00:11:40,320 --> 00:11:44,660
So as I mentioned in the next video we're going to focus on making the new comment functionality