Welcome back in this lesson we're going to tackle the comment creation functionality.
So we have three main objectives.
I'll highlight those first we need to start by talking about something called nested routes.
So we'll get to that then we need to make our two routes in order to create comets.
We need a route for the form which is new and then we need a post route where we actually create the
actual comment which is called create new and create and then we need the new comment form.
Let's begin by discussing what we have so far.
So I'm running this server.
We have three campgrounds that we've seen in the database and I can click on one and we have a comment
.
What we would like to do is ALSO have a button that says add new comment or leave her for you or something
like that.
We click on it and then we go to a new page that shows a form and then on that form we could submit
a new comment with an author's name and some text and hit submit and take us back here and we'll see
our new comment.
So that's the end goal to get there.
I want to start by talking about something called nested routes.
And before I do that I'll just highlight I'm now on VIF for because we are going to be moving some files
around to changing the structure a little bit.
So I want to make it into a new version just so that you can compare those changes.
So again version 4.
OK.
So let's begin by doing a review of the restful routes that we've seen so far.
So we've talked about index which displays a list of all dogs and the route is slash dogs or whatever
our resources slash comments slash campgrounds slash users.
And it's the get request.
Then we have new uncreate which are kind of paired together where all that new does is it shows us a
form and then we submit the form and the form sends the data to create ad which is flash dogs the same
path as the index except it's a post request.
And then we have a show which is a little bit different because there is a path parameter inside the
route the ID and we need that because the whole point of show is that it shows information and details
about one particular entity.
So this works just fine.
This is what we have so far.
We have our Index for campgrounds which is slash campgrounds.
We have new and create and show for campgrounds.
So we have Slash campgrounds and then we have Slash campgrounds slash new and then we have Slash campgrounds
as a post for create and slash campgrounds slash ID for show.
But now we need to add in some comment routes because we want to be able to add a comment again when
we click a button right here.
It should take us to a route to add a comment to this particular campground and that's the important
part.
So our route isn't actually going to look like this.
We're not going to have new uncreate for comments that look like this where we have Slash comments slash
new and slash comments as opposed to actually create.
That's not what we're going to have because this you know has no information about the particular campground
that we're adding the comment to.
So this would work if we were just arbitrarily creating comments.
But if we actually want them to be associated to a particular campground which we do we need to have
the campground ID in the URL.
So this gets to the first topic I want to bring up which is nested wraps.
So what we can do is take these restful routes and combine them and we can nest the comment routes on
top of for after the campground routes.
So our comment new is actually going to look like campground slash ID slash comments slash new and or
create.
It's going to be campgrounds.
Slash ID slash comments.
So what we've done is we've taken the campground in the ID and just put it before all of the routes
that have to do with comments.
And that's because a comment is dependent on a campground.
We don't have comments that exist away from campgrounds.
They are inherently linked.
And inside the create for instance we're not just going to make a comment we're going to make a comment
and then we're going to associate it with the campground.
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
and then we're going to have to connect them and save them both.
So we need this idea in the wrap so all of that's to say we're going to use nested routes.
These are the two new routes we're adding so new and create for comments.
All right.
So let's get started.
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
.
Just like that.
And then I'm going to open up after Yes.
And this is where we'll be doing most of our work and we're going to start by adding in the new route
which looks like this right here.
Campgrounds slash ID slash comments slash new as a get request and it should show a form for us to create
a new comment.
And we have a lot of routes which again and we will be moving very shortly.
But I'm going to start by just adding a little divider here just to make it clear duplicate that and
then I'll just say comments routes.
Okay.
And we're going to add an apt get slash campground slash and Id slash comments slash new.
And then our callback and in here we want our request and our response.
And then inside we're going to start by doing a redstart send.
This will be a comment form just to make sure that our route is hooked up correctly and if we now start
the server node mapped out J us and then we go to the campground page refresh and let's click on one
of these and to get to the new comment route.
Need to add slash comments slash new.
And there we go.
It says this will be the common form.
Now let's go back.
Instead of sending back this response let's render a template and that should be new.
That's the name of the template new that E.J..
Yes.
But there is a problem which is we have a new form already existing for our campground new right here
so we can have another template called new and must we make a small change and that's what we're going
to do.
We're going to split up the views this directory here we're going to add in two new directories campground
and we're going to add in comment.
So we'll do that now.
Make a directory instead of use called comments and make another one called campgrounds and you can
see those two new directories here and underscore to drag the files over to where I need them to go
.
So index is for campground new is for campgrounds show is for campground and then we'll need to make
our new.
US instead of comments.
So let's do that now.
Will do touch views slash comments slash new each Yes and then we'll do the same thing but open it up
and we'll open that file up and let's add our H-1 that just says new comment form and save that.
So what we want to do is see that when we go to this you are well.
So we have our redstart render new but we need to change it.
It should now be redstart render comments slash new.
It's not just new in the route of views.
It's now instead of comments you can see there.
And we'll also need to change over all of the other routes as well.
So this needs to be campground slash.
This needs to be campgrounds as well and we don't need the dam.
E.J. Yes and then we have one more
here.
This one can stay the same but index needs to be campgrounds slash index.
Okay.
And landing is on its own because it doesn't belong to campgrounds.
It doesn't belong to comments it's its own thing.
We'll just leave it where it is and it's really pretty much empty still.
We haven't actually filled out most of the landing page so let's try running this code now node abduct
us and we'll go to the campground page and we have a problem.
You might be thinking that the problem is that express didn't find the file we just created the campground
slash index but that's not actually the issue with the issue is if we if we read closely here it can't
find the file.
No such file or directory.
Yup camp version for views campgrounds.
Parshall's header.
Each Yes.
So it's not finding the parcels that we're including if we open up the index.
This right here.
And that's because we changed where this file was.
So we need to change how we're linking to Parshall's because we used to be in the same directory as
Parshall's like lending each.
Yes.
But now this file is nested inside of campgrounds.
So we need to go back one folder first which will take us from here up to here and then into Parshall's
and then heterodoxy J us.
So dot dot slash Parshall's dot dot represents one level back one folder back just like when we do see
the dot dot.
All right and we'll do the same thing for the footer dot dot slash.
And if we save now and refresh this works just fine.
But if we try and go to the show page we have the same problem.
So we need to go to those different templates campgrounds new Let's do dot dot slash slash and also
show will do dot dot slash again.
And one more and save now this template should work for us.
So we have show she can go back at a new campground.
This works just fine.
Great.
Now let's try out the comment new template.
So let's click on any show page and add on slash comments slash new.
And we're getting the correct each time out.
So now let's actually add the form in here and I'm going to steal from our other new template which
is the new campground was going to take all of this actually and copy it and now go over to comment
new and paste that in and we'll need to change a few things.
Well keep the same Parshall's the head or the footer and we'll change this to be add new comments and
save that and then we need to change the you are out here.
Are you are needs to be slashed campgrounds.
Slash and we need the ID of the campground which we don't have yet.
We don't have it in this template.
What we need to do is actually pass it through to this template and we could just pass the idea itself
through as a variable and display it here.
But I actually want to use the title or the name of the campground as well so that we can say add new
comment to.
And then here we could do campground name which right now we can't because campground isn't defined
so we'll do that.
And then here we'll just pre-filled the code we want to work rather than campground name will add in
campground dot ID and then we need the rest of the route which is sashed comments because remember this
is the post route to create a comment.
So we have this route right now.
That's the template we're looking at and the form on that template the new template needs to send a
request submit the form data as a post to this you know.
OK.
So we've written this it's not going to work right now because campground is not defined in the template
.
So what we need to do is go to the route the new route that we have the very bottom here and we need
to find camp ground by id and then we want to send that through when we render.
So that's going to be a campground that we all do find by id and the ID is request harams that Id whatever
we named here.
And the standard name is ID.
And then when that's done we'll have a callback error and then campground and we'll just check if there's
an error we'll cancel that log for now.
Otherwise we're going to render the comments new.
And we're going to pass in campground so campground will be equal to the value of this campground coming
back from the database.
So we'll save this and we can try taking a look at that template now if we restart CheckFree of any
syntax errors.
Looks good.
We can't just refresh because every timer app loads up we're actually generating new campgrounds and
they'll have different ideas.
So what we need to do is go back to camp grounds and then click on one of these and then go to slash
comments slash new.
And we're getting a forum here.
Let's inspect the form.
But the first thing that looks good to me is that it's telling me add new comment to clads rest.
So let's inspect and let's take a look at the URL that the form is submitting to.
So the form action is set to slash campground slash.
This giant ID slash comments as a post which is exactly what we need.
Now we need to make this form have the correct attributes.
So we'll go back and we want this form to have comment text so we'll just call it text for now.
And an author.
And that's all we need.
So we don't need the description that we had to delete that.
And then we'll also change the names here.
And I'm going to show you another strategy for setting the names up rather than doing them separate
.
Like author and then appear doing text.
What we can do is group them together like this comment and then square brackets around author and then
comment square brackets and text and then when we submit this form it will all be nested inside of comment
.
So inside of my objects in the route I'll be able to extract comment request up body duck comment and
it will already have text and author inside of it so I'll show you that in just a second.
Let's just make sure the form looks OK now.
Refresh the page.
All right so we have two inputs text an author we can submit it