1
00:00:00,420 --> 00:00:01,800
OK welcome back.

2
00:00:01,860 --> 00:00:07,140
It's time that we take what we've learned about Mongo D.B and about mongoose and we add that into our

3
00:00:07,380 --> 00:00:10,520
camp application so that we can add some data persistence.

4
00:00:10,980 --> 00:00:17,220
So the three main steps are installing and configuring mongoose and then we have to set up the model

5
00:00:17,460 --> 00:00:19,600
the schema and the model for the campground.

6
00:00:20,040 --> 00:00:23,220
And then we need to use the campground model instead of our routes.

7
00:00:23,310 --> 00:00:29,220
Before we go any further I want to point out that I'm using the V-2 of camp so I made another copy of

8
00:00:29,310 --> 00:00:33,080
V-1 and I'll be working inside of this for the next few videos.

9
00:00:33,270 --> 00:00:35,800
And that's because we're going to start making some bigger changes.

10
00:00:35,820 --> 00:00:40,130
Some files are going to move around but I still want you to be able to look at the V-1 code.

11
00:00:40,200 --> 00:00:44,520
So V-2 and I'll be sure to let you know when we start working instead of v3.

12
00:00:44,580 --> 00:00:46,110
So let's see what we have for now.

13
00:00:46,200 --> 00:00:48,850
Let's run after Yes.

14
00:00:49,320 --> 00:00:50,640
And refresh.

15
00:00:51,210 --> 00:00:51,530
OK.

16
00:00:51,540 --> 00:00:57,690
So we have our campground we can add a new campground but of course we have the problem where as soon

17
00:00:57,690 --> 00:01:02,030
as I restart the server and the new campgrounds that we add are going to disappear.

18
00:01:02,400 --> 00:01:03,730
So let's address that.

19
00:01:04,080 --> 00:01:09,530
Let's open everything up that we need which is really just the app Jasc file for now.

20
00:01:10,440 --> 00:01:13,380
And the first thing that we want to do is install mongoose.

21
00:01:13,380 --> 00:01:21,660
So NPM install mongoose dash dash save and while that's going we want to make sure we have our process

22
00:01:21,660 --> 00:01:22,890
running in the background.

23
00:01:22,890 --> 00:01:27,970
Man-God OK that's done now and we could look at the package.

24
00:01:28,030 --> 00:01:31,760
Jason double check that we have mongoose here.

25
00:01:31,890 --> 00:01:33,790
There we go.

26
00:01:34,080 --> 00:01:35,030
It's now up here.

27
00:01:35,040 --> 00:01:39,150
We're going to require mongoose save it to a variable called mongoose

28
00:01:44,850 --> 00:01:45,910
just like that.

29
00:01:45,960 --> 00:01:51,480
And one quick side note what you will see quite often when we have a lot of required statements up top

30
00:01:52,140 --> 00:01:59,010
is something like this where we can actually get rid of the Varsity the declarations and do this if

31
00:01:59,010 --> 00:02:01,800
we have multiple variable declarations in a row.

32
00:02:02,100 --> 00:02:04,650
We can separate them by commas.

33
00:02:04,650 --> 00:02:06,100
There we go.

34
00:02:06,510 --> 00:02:10,980
And this will make a variable named expression other one called at body parser and Mongoose it will

35
00:02:10,980 --> 00:02:12,190
work just the same.

36
00:02:12,260 --> 00:02:14,230
We don't have to write far over and over.

37
00:02:14,520 --> 00:02:23,580
And what you'll also see sometimes is that people will line these up so it looks like this.

38
00:02:23,700 --> 00:02:25,760
And that's really a matter of personal preference.

39
00:02:25,770 --> 00:02:27,890
I'll leave it here for now just so that you see it.

40
00:02:28,110 --> 00:02:29,340
But you'll see it both ways.

41
00:02:29,370 --> 00:02:31,540
It doesn't impact the way that the code works.

42
00:02:31,830 --> 00:02:34,040
It's just a small stylistic change.

43
00:02:34,320 --> 00:02:40,140
OK so let's save and run Knode after Jesus make sure we don't get any errors.

44
00:02:40,140 --> 00:02:41,090
Great.

45
00:02:41,130 --> 00:02:43,410
Now what we want to do is connect mongoose.

46
00:02:43,410 --> 00:02:50,400
So we're going to do mongoose connect and we don't have a database yet in our Mongar TV for this so

47
00:02:50,400 --> 00:02:59,340
we can just make one dynamically and we need to connect to Mongo D-B colon slash slash localhost slash

48
00:02:59,370 --> 00:03:02,570
and then the name for a database which doesn't exist yet.

49
00:03:02,610 --> 00:03:06,980
So let's just call it Yelp camp just like that and save.

50
00:03:07,530 --> 00:03:13,530
And this will create the Yelp camp database for us instead of Mangu D-B and we can just test that out

51
00:03:13,660 --> 00:03:18,240
if we run the app great no problems at all.

52
00:03:18,270 --> 00:03:23,230
The next thing we need to do is set up our schema and I'm going to do that down here.

53
00:03:24,120 --> 00:03:26,430
So I'll add a little comment here.

54
00:03:26,430 --> 00:03:33,630
Schema set up and this file is going to get a little bit long and in the future video we're going to

55
00:03:33,630 --> 00:03:34,550
refactor it.

56
00:03:34,560 --> 00:03:38,040
So this is not the way that you would do this in a real production app.

57
00:03:38,070 --> 00:03:43,560
If you had 10 different models and different schemas it would get really crazy very fast especially

58
00:03:43,560 --> 00:03:44,840
if you had a lot of routes.

59
00:03:44,850 --> 00:03:49,860
So we'll be breaking this into separate files later but for now we're just doing one schema.

60
00:03:49,980 --> 00:04:02,310
So let's call it var campground schema and then we'll set that equal to new mongoose schema to capital

61
00:04:02,340 --> 00:04:04,030
us.

62
00:04:04,050 --> 00:04:10,570
And for now a campground just has a name that's a string and an image.

63
00:04:10,600 --> 00:04:17,130
That's also a string and we're just using what we already have here and we'll save then the last thing

64
00:04:17,130 --> 00:04:27,780
we need to do is compile that into a model var campground equals mongoose top model and then here again

65
00:04:27,810 --> 00:04:29,910
campground in quotes.

66
00:04:29,910 --> 00:04:35,180
And then lastly the schema which is camp ground schema.

67
00:04:35,930 --> 00:04:43,050
Okay so what that should do is make us a model now that uses this schema and has a bunch of methods

68
00:04:43,050 --> 00:04:47,060
on it so we can do things like campground stuff find.

69
00:04:47,760 --> 00:04:51,430
And the first thing we want to do is add in a simple campground.

70
00:04:51,600 --> 00:04:57,930
So let's just take one of these and we'll just do a camp down campground create to start.

71
00:04:58,380 --> 00:05:00,400
So that looks like this.

72
00:05:00,630 --> 00:05:05,760
And this is just a temporary thing just to make sure that things work we're going to delete it as soon

73
00:05:05,760 --> 00:05:07,030
as we try it out.

74
00:05:07,050 --> 00:05:12,620
So campground create and then remember we pass in the object that we want to create.

75
00:05:12,880 --> 00:05:17,180
I'm going to format this a little bit nicer just like this.

76
00:05:17,250 --> 00:05:23,100
So we're creating the object first and then we have that callback function afterwards.

77
00:05:24,480 --> 00:05:28,580
First thing is the error and then second would be the campground.

78
00:05:29,160 --> 00:05:31,610
And we'll just do a simple constant log.

79
00:05:31,710 --> 00:05:35,040
So if error cancels that log error

80
00:05:40,410 --> 00:05:47,020
else cancel the log newly created campground.

81
00:05:47,460 --> 00:05:48,820
Just like that.

82
00:05:49,120 --> 00:05:51,590
And then on the next line we'll do cons..

83
00:05:51,630 --> 00:05:52,510
Ugh.

84
00:05:52,920 --> 00:05:54,990
Campground.

85
00:05:55,920 --> 00:05:56,360
OK.

86
00:05:56,380 --> 00:05:57,780
So yes it's a lot of code.

87
00:05:58,000 --> 00:06:03,520
But what we're doing is creating a campground with this data and then I've just spaced it out rather

88
00:06:03,510 --> 00:06:05,870
than doing it all on one gigantic line.

89
00:06:05,940 --> 00:06:10,690
I've spaced it out so we have the callback function that will run once this is done.

90
00:06:10,830 --> 00:06:16,140
Whether it succeeds or doesn't we have a callback function and we're processing the error handling it

91
00:06:16,730 --> 00:06:17,120
fairly.

92
00:06:17,130 --> 00:06:18,690
So we're just printing out an error.

93
00:06:18,940 --> 00:06:21,850
And if there's not an error then we're going to print out the campground.

94
00:06:21,850 --> 00:06:22,520
All right.

95
00:06:22,710 --> 00:06:26,590
So what we can do now is test this out just by running node.

96
00:06:28,590 --> 00:06:29,250
There we go.

97
00:06:29,250 --> 00:06:30,580
Newly created campground.

98
00:06:30,720 --> 00:06:33,680
So that create worked.

99
00:06:33,840 --> 00:06:35,680
There was no error nothing printed out.

100
00:06:35,700 --> 00:06:39,160
So we got this and it looks like image and name.

101
00:06:39,390 --> 00:06:46,200
And also to verify that it can open the Mongo Council and we can do a show TBS.

102
00:06:46,200 --> 00:06:53,110
Here's our new Joachim's database and we can do use Yelp cam just like that.

103
00:06:53,760 --> 00:07:01,140
And then what we can do is show collections and we have campgrounds which is generated because the name

104
00:07:01,240 --> 00:07:05,640
of our model Cingular is campground and it pluralized it for us.

105
00:07:05,640 --> 00:07:13,220
And then what we can do is D-B campgrounds hopes campgrounds that find.

106
00:07:13,650 --> 00:07:19,840
And there we go one campground it has an ID automatically assigned name and image.

107
00:07:20,190 --> 00:07:21,080
Awesome.

108
00:07:21,120 --> 00:07:26,880
So let's exit out and then add in one more campground going to get rid of this one.

109
00:07:27,090 --> 00:07:33,540
And rather than Semin Creek we'll do granite hill and I just want us to have some starter data to work

110
00:07:33,540 --> 00:07:35,480
with.

111
00:07:35,550 --> 00:07:39,200
So name image just like that.

112
00:07:39,450 --> 00:07:45,510
And then we can run this again save node.

113
00:07:45,630 --> 00:07:52,310
Yes there's our second campground that we created granite Hill and that's enough for now.

114
00:07:52,560 --> 00:07:55,830
The next thing we want to do is replace all of this code here.

115
00:07:55,950 --> 00:08:01,490
We can get rid of all this code but we also want to replace all the code where we're using that campground

116
00:08:01,490 --> 00:08:04,550
to array rather than using a hard coded array.

117
00:08:04,560 --> 00:08:09,550
What we're going to do here when we're getting all the campgrounds and showing them on the list this

118
00:08:09,540 --> 00:08:15,130
page here we're going to retrieve all the campgrounds from the database so we can do that first.

119
00:08:15,270 --> 00:08:17,310
I'm going to comment this line out for now.

120
00:08:17,820 --> 00:08:25,190
We need to get all campgrounds from the D-B and then we want to render that file.

121
00:08:25,620 --> 00:08:32,370
And the way that we get all the campgrounds is with campground find and we're looking for everything

122
00:08:32,380 --> 00:08:32,800
.

123
00:08:33,580 --> 00:08:40,770
And then we need a callback function and it takes the error first and then our parameter will be called

124
00:08:40,790 --> 00:08:49,370
campgrounds and will always check if there was an error if error.

125
00:08:49,500 --> 00:08:52,150
And we'll just do a constant log error.

126
00:08:52,140 --> 00:08:58,090
For now we will have better error handling later where we're actually showing a message to a user.

127
00:08:58,120 --> 00:08:59,640
For now we're just printing it out.

128
00:09:00,140 --> 00:09:08,110
And then here what we're going to do is do a red dot render like we have here and we can actually leave

129
00:09:08,110 --> 00:09:09,440
it how it is.

130
00:09:09,610 --> 00:09:14,530
And the reason for that is that we still want to render the campgrounds file and in the campgrounds

131
00:09:14,520 --> 00:09:18,630
file We're expecting it to be called campgrounds.

132
00:09:18,720 --> 00:09:24,990
The difference is the source of the campground is no longer the array that we had up here campground

133
00:09:25,090 --> 00:09:26,640
is defined right here.

134
00:09:26,670 --> 00:09:28,440
So let's make it a little clearer.

135
00:09:28,530 --> 00:09:33,900
I'll call this all campgrounds like that.

136
00:09:34,500 --> 00:09:35,910
And then here I'll change this.

137
00:09:35,940 --> 00:09:39,100
All campgrounds so that you can see the connection.

138
00:09:39,420 --> 00:09:43,570
So we're doing a campground to find all campgrounds in the collection.

139
00:09:43,570 --> 00:09:45,230
When that's done run this code.

140
00:09:45,270 --> 00:09:46,110
The callback.

141
00:09:46,360 --> 00:09:48,450
If there's an error print out the error.

142
00:09:48,580 --> 00:09:50,610
Otherwise take all the campgrounds.

143
00:09:50,620 --> 00:09:56,460
It just came back and send them through to the campground that E.J. has filed.

144
00:09:56,460 --> 00:10:05,800
Now if we save and we restart the server and I'm going to get rid of this for now commented out otherwise

145
00:10:05,790 --> 00:10:09,460
we'll end up with another granite hill in our database.

146
00:10:09,450 --> 00:10:17,510
So now we'll start the server and refresh the page we only see two campgrounds which is exactly what

147
00:10:17,510 --> 00:10:19,360
we want.

148
00:10:19,460 --> 00:10:24,900
These two are both in the database and we're no longer dealing with that campgrounds array that's hard

149
00:10:24,900 --> 00:10:25,520
coded.

150
00:10:25,520 --> 00:10:28,100
These will always be in the database until we delete them.

151
00:10:28,130 --> 00:10:33,230
But at least if the server restarts or we have any trouble there they still persist.

152
00:10:33,230 --> 00:10:38,150
So now it's focus on getting this to work so that when a user adds new campground it works.

153
00:10:38,150 --> 00:10:39,970
And right now we have a small problem.

154
00:10:40,040 --> 00:10:44,380
If I just type jibberish in here and hit submit I get an error.

155
00:10:44,570 --> 00:10:52,580
Campground is not defined and it's telling me that's on actually yes line 54 which is right here where

156
00:10:52,580 --> 00:10:55,250
we're pushing the new campground into campgrounds.

157
00:10:55,460 --> 00:10:58,610
But that campground tray is undefined because we deleted it.

158
00:10:58,610 --> 00:11:03,410
It used to be a pier and we got rid of it to make this work the way that we want it to.

159
00:11:03,710 --> 00:11:05,480
We don't need this line anymore.

160
00:11:05,820 --> 00:11:15,190
And instead what we want to do is create a new campground and save to database.

161
00:11:15,620 --> 00:11:22,490
So this will remain the same where we need to grab the name and the image and this will stay the same

162
00:11:22,490 --> 00:11:24,510
as well where we're making this object.

163
00:11:24,560 --> 00:11:31,280
And then what we can do is just save that to the database and we can either create it with campground

164
00:11:32,200 --> 00:11:38,900
that create and then the first argument there is the new thing we want to create which we already have

165
00:11:38,900 --> 00:11:45,590
conveniently stored in an object called new campground so we can pass that in and then we need the callback

166
00:11:45,590 --> 00:11:48,620
function just like that.

167
00:11:49,280 --> 00:11:57,830
And remember our two arguments error and we'll call this newly created just like that and we'll do our

168
00:11:57,830 --> 00:12:04,530
if there's an error and if there is an error if there's a problem with the form data that the user enters

169
00:12:04,530 --> 00:12:07,640
then we would have to think about what we actually want to happen.

170
00:12:07,790 --> 00:12:13,100
And eventually what we'll do is send the user back to the form again and show them a message that says

171
00:12:13,100 --> 00:12:18,700
something like photo Caffey blank or name Campi blank or name Campeon number or whatever it is.

172
00:12:18,710 --> 00:12:20,250
But we can show them a message.

173
00:12:20,300 --> 00:12:29,300
For now we're sticking with our tried and true constant alt log of the error and then Otherwise if it

174
00:12:29,310 --> 00:12:36,350
worked although we need to do is go back to campgrounds just like that.

175
00:12:37,250 --> 00:12:39,500
Redirect back to campgrounds.

176
00:12:39,540 --> 00:12:40,560
There we go.

177
00:12:41,030 --> 00:12:47,270
And then that will run this route again up here which you'll find all the campgrounds including the

178
00:12:47,270 --> 00:12:54,060
brand new one that was just added and then it will show us this template again.

179
00:12:54,080 --> 00:12:55,290
So let's test it out.

180
00:12:55,370 --> 00:13:04,100
I'm going to restart the server and I'm also going to grab an image to use and I'll use this one here

181
00:13:04,100 --> 00:13:04,800
.

182
00:13:04,910 --> 00:13:12,260
Copy that you Aro then I'm going to open up the app here and refresh OK and then we'll try and add a

183
00:13:12,260 --> 00:13:13,490
new campground.

184
00:13:13,820 --> 00:13:22,440
And this one will be called Cloud's rest place that in hit submit and it appears that it worked.

185
00:13:22,510 --> 00:13:23,370
You go back here.

186
00:13:23,390 --> 00:13:24,990
We don't get any errors.

187
00:13:25,340 --> 00:13:33,560
And if we refresh the page it still shows up and if we restart the server this is the true test.

188
00:13:33,890 --> 00:13:34,820
It's still there.

189
00:13:35,060 --> 00:13:35,330
OK.

190
00:13:35,330 --> 00:13:38,210
So we've introduced data persistence to our campgrounds.

191
00:13:38,210 --> 00:13:42,310
The server can stop that power can go out whatever calamity can occur.

192
00:13:42,470 --> 00:13:44,930
And our data will still persist.

193
00:13:45,650 --> 00:13:50,160
So let me go back to cloud 9 and I'll do a quick summary of what we did.

194
00:13:50,390 --> 00:13:52,480
So we added mongoose in up here.

195
00:13:52,910 --> 00:13:58,970
We connected to a yelp camp database which didn't exist at the time when we first ran this code but

196
00:13:58,970 --> 00:14:05,690
every subsequent time it was using the initially created camp database and then we set up the campground

197
00:14:05,690 --> 00:14:09,590
schema that for now has a name and an image and that's it.

198
00:14:09,590 --> 00:14:11,480
But if we want to add more things in.

199
00:14:11,480 --> 00:14:13,160
It's very easy and flexible.

200
00:14:13,430 --> 00:14:20,690
And then this infamous line where we're compiling the schema into a model where we're taking this blueprint

201
00:14:21,020 --> 00:14:25,670
for what a campground should look like and we're turning it into some code that we can use that has

202
00:14:25,670 --> 00:14:30,530
a bunch of methods including find which is important.

203
00:14:30,530 --> 00:14:35,630
We're using it inside of our slash campground to get where we are retrieving all of the campgrounds

204
00:14:35,630 --> 00:14:37,340
and showing them all.

205
00:14:38,270 --> 00:14:43,610
And then also create great here where we're taking data from the form.

206
00:14:43,910 --> 00:14:46,740
And this is a little confusing because there's so many variables.

207
00:14:46,940 --> 00:14:49,760
We're grabbing the name and the body from the form.

208
00:14:50,090 --> 00:14:53,240
We're making a new object as a separate step.

209
00:14:53,360 --> 00:14:56,330
We could have just taken this code and pasted it right here.

210
00:14:56,570 --> 00:14:59,620
But I like to make a new very well that just shows what we're doing.

211
00:14:59,620 --> 00:15:06,830
So new campground is an object name an image coming from the form than we create with that cover callback

212
00:15:06,830 --> 00:15:11,190
function that will run once the Create is done whether it succeeds or not.

213
00:15:11,300 --> 00:15:13,160
And then we handle the error in here.

214
00:15:13,160 --> 00:15:16,180
Right now we have very very basic error handling.

215
00:15:16,270 --> 00:15:20,840
Now you aren't really handling It's just error acknowledging where we're just printing out the error

216
00:15:21,530 --> 00:15:27,620
and then otherwise if it does work we go back to the campgrounds page which takes us back here.

217
00:15:27,650 --> 00:15:29,440
All right so we now have mongoose connected.

218
00:15:29,450 --> 00:15:31,160
We have our database set up.

219
00:15:31,160 --> 00:15:36,520
We're going to keep using this and soon we're going to see another model and another schema for users

220
00:15:36,530 --> 00:15:41,860
when we have user authentication for comments when we add comments in and some other fun things.