OK welcome back.
It's time that we take what we've learned about Mongo D.B and about mongoose and we add that into our
camp application so that we can add some data persistence.
So the three main steps are installing and configuring mongoose and then we have to set up the model
the schema and the model for the campground.
And then we need to use the campground model instead of our routes.
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
V-1 and I'll be working inside of this for the next few videos.
And that's because we're going to start making some bigger changes.
Some files are going to move around but I still want you to be able to look at the V-1 code.
So V-2 and I'll be sure to let you know when we start working instead of v3.
So let's see what we have for now.
Let's run after Yes.
And refresh.
OK.
So we have our campground we can add a new campground but of course we have the problem where as soon
as I restart the server and the new campgrounds that we add are going to disappear.
So let's address that.
Let's open everything up that we need which is really just the app Jasc file for now.
And the first thing that we want to do is install mongoose.
So NPM install mongoose dash dash save and while that's going we want to make sure we have our process
running in the background.
Man-God OK that's done now and we could look at the package.
Jason double check that we have mongoose here.
There we go.
It's now up here.
We're going to require mongoose save it to a variable called mongoose
just like that.
And one quick side note what you will see quite often when we have a lot of required statements up top
is something like this where we can actually get rid of the Varsity the declarations and do this if
we have multiple variable declarations in a row.
We can separate them by commas.
There we go.
And this will make a variable named expression other one called at body parser and Mongoose it will
work just the same.
We don't have to write far over and over.
And what you'll also see sometimes is that people will line these up so it looks like this.
And that's really a matter of personal preference.
I'll leave it here for now just so that you see it.
But you'll see it both ways.
It doesn't impact the way that the code works.
It's just a small stylistic change.
OK so let's save and run Knode after Jesus make sure we don't get any errors.
Great.
Now what we want to do is connect mongoose.
So we're going to do mongoose connect and we don't have a database yet in our Mongar TV for this so
we can just make one dynamically and we need to connect to Mongo D-B colon slash slash localhost slash
and then the name for a database which doesn't exist yet.
So let's just call it Yelp camp just like that and save.
And this will create the Yelp camp database for us instead of Mangu D-B and we can just test that out
if we run the app great no problems at all.
The next thing we need to do is set up our schema and I'm going to do that down here.
So I'll add a little comment here.
Schema set up and this file is going to get a little bit long and in the future video we're going to
refactor it.
So this is not the way that you would do this in a real production app.
If you had 10 different models and different schemas it would get really crazy very fast especially
if you had a lot of routes.
So we'll be breaking this into separate files later but for now we're just doing one schema.
So let's call it var campground schema and then we'll set that equal to new mongoose schema to capital
us.
And for now a campground just has a name that's a string and an image.
That's also a string and we're just using what we already have here and we'll save then the last thing
we need to do is compile that into a model var campground equals mongoose top model and then here again
campground in quotes.
And then lastly the schema which is camp ground schema.
Okay so what that should do is make us a model now that uses this schema and has a bunch of methods
on it so we can do things like campground stuff find.
And the first thing we want to do is add in a simple campground.
So let's just take one of these and we'll just do a camp down campground create to start.
So that looks like this.
And this is just a temporary thing just to make sure that things work we're going to delete it as soon
as we try it out.
So campground create and then remember we pass in the object that we want to create.
I'm going to format this a little bit nicer just like this.
So we're creating the object first and then we have that callback function afterwards.
First thing is the error and then second would be the campground.
And we'll just do a simple constant log.
So if error cancels that log error
else cancel the log newly created campground.
Just like that.
And then on the next line we'll do cons..
Ugh.
Campground.
OK.
So yes it's a lot of code.
But what we're doing is creating a campground with this data and then I've just spaced it out rather
than doing it all on one gigantic line.
I've spaced it out so we have the callback function that will run once this is done.
Whether it succeeds or doesn't we have a callback function and we're processing the error handling it
fairly.
So we're just printing out an error.
And if there's not an error then we're going to print out the campground.
All right.
So what we can do now is test this out just by running node.
There we go.
Newly created campground.
So that create worked.
There was no error nothing printed out.
So we got this and it looks like image and name.
And also to verify that it can open the Mongo Council and we can do a show TBS.
Here's our new Joachim's database and we can do use Yelp cam just like that.
And then what we can do is show collections and we have campgrounds which is generated because the name
of our model Cingular is campground and it pluralized it for us.
And then what we can do is D-B campgrounds hopes campgrounds that find.
And there we go one campground it has an ID automatically assigned name and image.
Awesome.
So let's exit out and then add in one more campground going to get rid of this one.
And rather than Semin Creek we'll do granite hill and I just want us to have some starter data to work
with.
So name image just like that.
And then we can run this again save node.
Yes there's our second campground that we created granite Hill and that's enough for now.
The next thing we want to do is replace all of this code here.
We can get rid of all this code but we also want to replace all the code where we're using that campground
to array rather than using a hard coded array.
What we're going to do here when we're getting all the campgrounds and showing them on the list this
page here we're going to retrieve all the campgrounds from the database so we can do that first.
I'm going to comment this line out for now.
We need to get all campgrounds from the D-B and then we want to render that file.
And the way that we get all the campgrounds is with campground find and we're looking for everything
.
And then we need a callback function and it takes the error first and then our parameter will be called
campgrounds and will always check if there was an error if error.
And we'll just do a constant log error.
For now we will have better error handling later where we're actually showing a message to a user.
For now we're just printing it out.
And then here what we're going to do is do a red dot render like we have here and we can actually leave
it how it is.
And the reason for that is that we still want to render the campgrounds file and in the campgrounds
file We're expecting it to be called campgrounds.
The difference is the source of the campground is no longer the array that we had up here campground
is defined right here.
So let's make it a little clearer.
I'll call this all campgrounds like that.
And then here I'll change this.
All campgrounds so that you can see the connection.
So we're doing a campground to find all campgrounds in the collection.
When that's done run this code.
The callback.
If there's an error print out the error.
Otherwise take all the campgrounds.
It just came back and send them through to the campground that E.J. has filed.
Now if we save and we restart the server and I'm going to get rid of this for now commented out otherwise
we'll end up with another granite hill in our database.
So now we'll start the server and refresh the page we only see two campgrounds which is exactly what
we want.
These two are both in the database and we're no longer dealing with that campgrounds array that's hard
coded.
These will always be in the database until we delete them.
But at least if the server restarts or we have any trouble there they still persist.
So now it's focus on getting this to work so that when a user adds new campground it works.
And right now we have a small problem.
If I just type jibberish in here and hit submit I get an error.
Campground is not defined and it's telling me that's on actually yes line 54 which is right here where
we're pushing the new campground into campgrounds.
But that campground tray is undefined because we deleted it.
It used to be a pier and we got rid of it to make this work the way that we want it to.
We don't need this line anymore.
And instead what we want to do is create a new campground and save to database.
So this will remain the same where we need to grab the name and the image and this will stay the same
as well where we're making this object.
And then what we can do is just save that to the database and we can either create it with campground
that create and then the first argument there is the new thing we want to create which we already have
conveniently stored in an object called new campground so we can pass that in and then we need the callback
function just like that.
And remember our two arguments error and we'll call this newly created just like that and we'll do our
if there's an error and if there is an error if there's a problem with the form data that the user enters
then we would have to think about what we actually want to happen.
And eventually what we'll do is send the user back to the form again and show them a message that says
something like photo Caffey blank or name Campi blank or name Campeon number or whatever it is.
But we can show them a message.
For now we're sticking with our tried and true constant alt log of the error and then Otherwise if it
worked although we need to do is go back to campgrounds just like that.
Redirect back to campgrounds.
There we go.
And then that will run this route again up here which you'll find all the campgrounds including the
brand new one that was just added and then it will show us this template again.
So let's test it out.
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
.
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
new campground.
And this one will be called Cloud's rest place that in hit submit and it appears that it worked.
You go back here.
We don't get any errors.
And if we refresh the page it still shows up and if we restart the server this is the true test.
It's still there.
OK.
So we've introduced data persistence to our campgrounds.
The server can stop that power can go out whatever calamity can occur.
And our data will still persist.
So let me go back to cloud 9 and I'll do a quick summary of what we did.
So we added mongoose in up here.
We connected to a yelp camp database which didn't exist at the time when we first ran this code but
every subsequent time it was using the initially created camp database and then we set up the campground
schema that for now has a name and an image and that's it.
But if we want to add more things in.
It's very easy and flexible.
And then this infamous line where we're compiling the schema into a model where we're taking this blueprint
for what a campground should look like and we're turning it into some code that we can use that has
a bunch of methods including find which is important.
We're using it inside of our slash campground to get where we are retrieving all of the campgrounds
and showing them all.
And then also create great here where we're taking data from the form.
And this is a little confusing because there's so many variables.
We're grabbing the name and the body from the form.
We're making a new object as a separate step.
We could have just taken this code and pasted it right here.
But I like to make a new very well that just shows what we're doing.
So new campground is an object name an image coming from the form than we create with that cover callback
function that will run once the Create is done whether it succeeds or not.
And then we handle the error in here.
Right now we have very very basic error handling.
Now you aren't really handling It's just error acknowledging where we're just printing out the error
and then otherwise if it does work we go back to the campgrounds page which takes us back here.
All right so we now have mongoose connected.
We have our database set up.
We're going to keep using this and soon we're going to see another model and another schema for users
when we have user authentication for comments when we add comments in and some other fun things.