Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
This is how I added the Detail page to our application? How did you do?
Directions from previous step
- Add a new page that responds to
/ideas/:slug/
. The controller should get the model by the slug passed in the url and pass it as the model for the template created in step 2.
- Add a new template for the idea detail page. Make it inherit from our base template.
- The content of the new idea detail page should list everyone who voted. You might need a new keyword.
- Add a form that allows voting for this specific idea. Route it to the existing vote route.
-
0:00
So if you haven't done it yet, please try to do what is described in the teachers'
-
0:05
notes on this video, but this is the solution how I solved.
-
0:08
How'd you do?
-
0:10
First, I exposed a property on our CourseIdea model that returns the voters.
-
0:14
Now, since I am making a copy of this set of voters anyway, I decided to use a list.
-
0:21
No need to show them how the users of this API, how I'm keeping things unique.
-
0:27
So I'm just gonna give a list just like everything else.
-
0:30
Everything else out of here will return a list.
-
0:32
So and we're gonna get the voters.
-
0:36
It's asking if it's a java.util.List.
-
0:38
It indeed is.
-
0:40
And I am gonna do the same trick that we did before where I'm gonna make
-
0:44
an ArrayList.
-
0:46
And I am going to have that take the set of voters and
-
0:50
make a brand new list so it's a copy.
-
0:54
So anytime they try to mutate that, it won't actually mutate the original voters.
-
0:59
And next, I added a route to our main method, and main over here.
-
1:04
That's a get.
-
1:05
So we wanted to get where the ideas slug, so
-
1:09
we want them to be able to go ideas slash whatever the slug was,
-
1:15
and that's gonna give us a request and a response.
-
1:22
And inside of the body of our method here,
-
1:26
we are going to have a new Map that is a String and
-
1:32
Object key and value of a new HashMap.
-
1:42
I don't know why that doesn't auto-complete.
-
1:44
If somebody could figure that out and let everybody know,
-
1:46
I'm sure they'd love you for it.
-
1:48
So we're gonna do model.put.
-
1:50
I'm gonna put in there, put in idea.
-
1:53
We're gonna do find
-
1:56
BySLUG(req.params("slug")).
-
2:07
And then, we're going to return new ModelAndView.
-
2:13
And we're gonna pass it in our model, and
-
2:16
we're gonna give it a new template name that we have not yet created.
-
2:21
I'm gonna call it idea.hbs because it's a singular idea as opposed to the ideas page
-
2:26
that we had.
-
2:27
And of course that's the HandleBarsTemplateEngine there.
-
2:31
So let's go make our idea.hbs file.
-
2:36
So New> File> idea.hbs.
-
2:40
And we are going to extend base.
-
2:46
I always like to put that first here.
-
2:52
Next, we are going to override the partial for content.
-
3:02
And we are gonna make a heading of
-
3:08
idea.title, let's wrap that.
-
3:16
So remember, I passed idea in.
-
3:18
And so, idea has properties.
-
3:22
So it's doing idea.get title.
-
3:24
And then, we're gonna do another one here.
-
3:26
We'll say idea.voteCount.
-
3:29
So this is an h2, so it's like the second header, Voters,
-
3:36
and four of that will make a new unordered list,
-
3:42
and I am going to loop each of these idea.voters.
-
3:48
We're just gonna use our get voters.
-
3:50
So I looked up in the documentation on Handlebars.java of how to access
-
3:55
the current item.
-
3:57
Now, since voters was just a string and not an object of ours,
-
4:02
what you can do is you can just use this as the keyword.
-
4:05
So we're gonna say,
- {{ this }}.
-
4:08
That is how you reference the current scope.
-
4:11
So the current scope in there is this string.
-
4:14
Which is the username, so it's this.
-
4:16
Cool.
-
4:17
And then, I also added a form that's gonna go to the same place.
-
4:21
So we're gonna say ideas.
-
4:22
And we want that to go to the {{ ideas.slug }}.
-
4:30
We want that to be able to vote, and
-
4:35
we'll add a button for voting.
-
4:38
And we don't wanna forget that it's a post.
-
4:42
So we wanna do method = "post">.
-
4:47
You know what, while we're in here, why don't we also change the title, so
-
4:51
we'll do {{#partial "title" }}.
-
4:59
Two partials there accidentally.
-
5:02
I forgot to close that out, partial title.
-
5:05
And we want the title here to be,
-
5:10
{{ idea.title }}.
-
5:14
So that will change the page title to be whatever the course idea is.
-
5:19
Guess we could pre fix it with something like this.
-
5:23
And then, made the ideas that hbs page,
-
5:27
you wanna make these all links, we wanna make sure that anything
-
5:30
that has this title is showing up here that it's a link so.
-
5:34
Wanna do an a tab, and we're gonna go to ideas.
-
5:39
And this one, we have the idea in context so we can do vote.
-
5:46
Or we wanna go not vote, we wanna go right to the page,
-
5:49
to the new detail page that we made.
-
5:52
So that links to the detail page.
-
5:56
Awesome.
-
5:58
And I think that should do it.
-
6:00
Let's restart our server and give it a go.
-
6:02
Let's see what happens.
-
6:07
So let's log in.
-
6:14
So let's do Spark Testing.
-
6:18
Let's make, you know what we should do?
-
6:20
We should make a REST API with spark.
-
6:23
How about the Ninja Framework.
-
6:29
So what happens if we come in here, there's zero voters,
-
6:32
what happens if I come in and I vote?
-
6:35
There we go, there's one voter, and if I choose Vote, uh-oh, ideas//vote.
-
6:41
So we're missing that page.
-
6:44
So for some reason, the slug that I wrote out, on this vote page here is wrong.
-
6:49
Let's go, and see if we can't figure out why that is.
-
6:53
So on the idea page in the vote, the partial,
-
6:58
I said ideas.slug, it's not ideas, it's idea.slug.
-
7:10
Restart the server.
-
7:12
This should make us,
-
7:16
refresh the page here.
-
7:20
So we'll view all course ideas.
-
7:24
Spark Testing, boy we need that course.
-
7:26
And if I come in and I vote, boom there we go.
-
7:29
Got it.
-
7:30
One voters.
-
7:33
That's a little goofy, but that's fixable.
-
7:36
But there it is.
-
7:37
When I click this Vote button through, it really should tell me a message that I
-
7:41
already voted, so we don't expect that number to go up.
-
7:44
Let's go ahead and also make sure that we can get two voters in there.
-
7:48
That's the other part of the test.
-
7:50
So I'm gonna go back to this ideas page.
-
7:52
It should give me the boot.
-
7:54
I'm gonna log in as chalkers again.
-
7:57
Let's have chalkers come in here and vote.
-
7:59
And we can look, and we can see we have me and chalkers voting for that.
-
8:03
Awesome!
-
8:04
This is really starting to feel like an app.
-
8:06
Great job, Slugger!
-
8:08
See what I did there?
-
8:09
Slugs and Slugger?
-
8:10
It's all right.
-
8:11
I feel like we have a really interactive app.
-
8:15
But I think we should challenge ourselves to do a little bit better.
-
8:19
When we do those redirects, they can be a little jarring.
-
8:21
And if we don't inform our users of what's going on, they might not notice.
-
8:25
Or worse yet, assume that their action worked when in fact it failed.
-
8:28
Also, we now have some exceptions that our app can throw, and
-
8:31
like we saw, they aren't pretty.
-
8:33
Let's take care of that.
You need to sign up for Treehouse in order to download course files.
Sign up