Know what I want to do is make our show template.
So I'm going to comment this out so that we're not constantly making new campground every time we start
the server.
So right now we only have one going on down here.
Let me add my label show shows more info about one campground.
So we need to find the campground.
We'll come back to that.
And when to render the show template.
So let's start with that dot render show and then we need to create that template.
So we're going to do touch views slash showed us and then C9 views showed that Ejay us and then add
in a very simple H-1.
This is the show template as we go and save let's make sure that that works are fresh.
Now if we try and get to where you are well that is a show route campground slash anything that isn't
new campground new is special because it takes us to the new form but any other ID and our IDs will
look like that.
And those are coming from Mongo.
So those ideas are automatically generated by Mongo and we save something.
And what we're going to start by doing is actually adding in the links to the show page that we have
a button here that we can click to view more information.
So we need to open up views slash campgrounds but E.J. us and technically we should rename this file
to be indexed Ejay us rather than campgrounds because we're following this convention.
So we have new we have show we should name this index rather than campgrounds.
So we can do that pretty quickly over here.
Just go to views ground and we can rename it indexed that E.J..
Yes.
There's also many ways to do this via the terminal but that will be fastest for now rather than showing
you another command.
So we'll do that and then we need to make sure apage yes is rendering the right template.
So this should render index now OK.
So now what we want to do is rather than just displaying for each campground an image and a name I'm
also going to add a paragraph in here and in that paragraph we're going to add an anchor tag and we'll
fix the ref in a second.
It can be an anchor tag that says more info and we'll give it a class.
Also will you use bootstrap and we'll do DTN and ETN primary just like that and save and let's just
see how that looks first.
So it won't work yet it won't go anywhere.
But if we were fresh.
All right that looks good enough for now.
We have a more info button with click on it.
Right now it refreshes the page but we want it to take us to the show page so to do that we need to
change our template and our eight draft needs to look like this slash campgrounds slash some ID and
that ID is stored inside of campground dot underscore ID.
So we need to use Ejay as here.
And here I'm going to direct campground dot underscore ID which is part of campground campground is
the name that we're giving each campground for each are printing out image and name.
There's also a description that we're not showing but there is an I.D. that we're going to use to create
the link.
So if I restart now and we take a look at what that gives us let's inspect this and you can see it's
campground slash.
That's crazy long hexadecimal automatically generated Mongo D-B ID.
And if we click on that link it takes us to the show template campground slash and that crazy idea.
Then what we need to do is use that ID instead of the show template or inside the show route which is
right here.
We want to capture that ID which is going to be inside of requests harams thought Id just like when
we did the farm animal thing with the pigs and oink and cow and moo where we had colon and then some
Raut program it stored inside request for EMFs.
What we're going to do is use a new method that mongoose gives us called find my ID.
And we're doing that on campground so campground up find by ID.
And there's two arguments who need to give it which is the ID and then the callback.
So the first one is easiest.
The ID is just request up harams ID and the callback looks just like our other ones where we have error
and then lets call it found campground which is the data coming back from this find by ID so there should
only be one item in the database with that ID which is the point of these IDs and Mangu their are unique
so that we won't have any issues with multiple conflicting campsites like we might if we were looking
things up by their title or their name or their image which we could do.
This doesnt have to be an ID.
It could be name and actually if we take a look at Reddit
Friday again is unique.
So it's much safer.
So this will hopefully find a campground and we'll do our simple error checking if there's an error
cancel that log it.
Otherwise if it worked what we're going to do is render the show template.
And that's a red dot render show.
But we're going to pass in the found campground and then we're going to use it inside that template
.
So redstart render show and then we're going to pass in under the name campgrounds.
We're going to pass our found campground.
So then inside our show template we can access campgrounds and it will have the value of whatever we
found with this ID.
So we'll save go to showdown E.J..
Yes.
And let's do something very simple we just add a paragraph in that paragraph.
We're going to add in campground dot name and we'll just leave it at that and then we'll add some other
stuff in just a moment.
Well let's make sure it works.
So we'll go back refresh and if we click on this link we get a rather dramatic error that says has no
method.
Find by ID.
And that's a pretty silly one because we don't want to capitalize that f there.
So if we go back and just fix this very briefly so it's fine to a lower case f.
Remember all methods start with a lower case.
Now if we call it restart the server and refresh we get this is the show template Graniteville.
Of course we want to show more than Grant Hill but it's the same process.
We now are taking this I.D. and we're trying to find a campground with that I.D. and then we're rendering
this template.
So let's quickly we're not going to style it.
But let's quickly go back to show and we'll add in an image again and the source is going to be equal
to campground that image and then will also add in at the bottom another paragraph.
And this one is going to have campground dot description just like that and we'll save that.
Let's take the name here and move that up so that our H-1 says just the campground name just like that
.
We are fresh now.
We get granite hill and we see this here our image and then this is a huge granite Hill.
No bathrooms no water beautiful grant.
And we should add in our lay out as well just with our quick includes.
So include and let's just copy it from another template here just to save time.
So we'll copy that in and then do the same thing for our footer.
And now we should see some bootstrap.
There we go we the nav bar.
We get our font change.
We still have to style this which will be coming soon.
So everything appears to be working well except for one small thing which is if I add in a new campground
it still is only name and image.
So let's refactor that and she go back to the form which is in New.
So let's close out of here and let's open up views slash new.
And instead of there we need another input which I'll just put at the bottom right before the button
.
And our input is going to have a placeholder of description and eventually we'll want to make this a
bigger input.
For now it's just a text input and then we'll change the name to be description and we'll save and we
can now go back to our Apalachee us in here instead of the Create will also grab the description so
far description and all just do DSC equals request up body dot description which is what the name attribute
was set to right here.
There we go.
And we're going to take that and then pass it in to our new object where a description is equal to this
variable that we're grabbing from the form DGSE and resave everything else should work exactly the same
.
We're now just adding this extra piece of data in from the form.
Let's test it out.
Start the server up or refresh the form.
We now have three inputs.
So I have an image you arole that I've copied from here and I'm going to pass that in and we'll call
this campground with trees and here will say this place has lots of trees and also lots of other stuff
.
All right click submit we now get to campgrounds and the true test is to see if this one has a description
.
So let's click on More info and it does.
You can see that this page contains all the information we have about one campground that has this ID
and if we go back this show page has all the information about this campground.
OK.
So we got the show page working.
Let's quickly wrap everything up so we talked about restful routes.
There are four now that we've covered.
The index will show all of a given resource like dogs or campground.
The new route shows the form to create a new resource create is the post route where we actually do
the creation of the resource and show is a route that's a get request and it has an ID and there you
go.
And that's really important because it shows information about one resource.
In our case one dog or in our app one campground and the new command that we saw to do that to interact
with Mongo is find by id and then a quick side note I also showed D-B duck collection drop which we
use to delete all the existing campgrounds in our database with one command