Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Most web applications follow the same design pattern, there is a list of items and a more detailed view of each item. Let’s ensure you can access a specific item from your list by using what is known as a slug.
Directions
- 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.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
In just about every web
application you end up working on
0:00
you're going to encounter
a couple of recurring patterns.
0:04
Most notably you're going to show a list
of things just like we did with ideas, and
0:07
then you're going to show each of those
items on a separate, more detailed page.
0:11
Now, what this means is you'll need a way
to uniquely identify each of those items.
0:16
Now, you've probably seen
some ugly URLs in your time,
0:20
cruising around the interwebs.
0:23
While we don't have one,
most web apps are using a database, and
0:25
they usually provide a way to
uniquely identify an item,
0:29
by what is known as an ID,
which is short for identifier.
0:32
Well, those are usually numeric, and
some sites just pop them in their URL.
0:36
But what does 231 mean to you?
0:41
A better solution and best practice is to
use what is known as a slug whose origin
0:44
isn't from that gross creature that hates
salt, but comes from the newspaper world.
0:49
There's more info in the teacher's notes.
0:54
Now since URLs can only
contain certain characters,
0:56
you need to remove the unallowed ones,
yet still want things to be legible.
1:00
Most search engines give heavy
weight to turns in the URL,
1:04
meaning they will be more
likely to rise to the top.
1:07
Also, for users who might want to share or
bookmark this,
1:11
what makes more sense to you,
item number 231 or yoda-pez-dispensers?
1:14
Which are you more likely to search for?
1:19
In order for
1:21
us to be able to vote on a specific idea,
we're going to need a way to identify it.
1:22
Now, since we don't have a database, and
1:27
this item doesn't have a unique
identifier, let's take the slug approach.
1:28
Creating slugs is a part
of the Spark framework, but
1:33
we can easily plugin an open source
library that will take care of it for us.
1:36
Okay, so let's add our dependency.
1:41
I searched for Java slug,
and I found slugify.
1:43
The main independency information is here,
so let's grab this group ID
1:48
and let's flip back over to our code,
and we'll go to Gradle file.
1:54
Here we're gonna add, we're gonna say,
compile, add our dependency,
2:02
calling it slugify, and
it's slugify, and it was 2.1.4.
2:07
Okay, then we'll refresh
our Gradle dependencies.
2:13
And now that we have that, let's head
over to our model so that we can use it.
2:18
So our course ID, our model, is here.
2:22
Go ahead and close the Gradle window,
create some more space.
2:27
Okay, so what we want to do,
is in the constructor here,
2:30
let's take what they pushed into
the title and just make a new slug.
2:35
So we'll say Slugify
slugify equals new Slugify.
2:38
Now this Slugify throws
an unhandled exception.
2:45
It throws an I/O exception,
we're probably not gonna run into that.
2:51
And let's not worry about being
too defensive about this.
2:54
We'll just write something out to
the screen with this printStackTrace.
2:58
Not really the best practice.
3:03
We probably want to do
something deeper than that,
3:04
but we're just working
through this right now.
3:07
So we'll do slugify.slugify.
3:11
Here we're gonna pass on the title there,
and we're gonna store that slug.
3:13
And we'll store that in a new field,
right, this new field here.
3:17
We'll make a new create field slug.
3:22
We'll make it a string called slug.
3:26
And.
3:32
SInce we have a slug here,
we'll add a new getter for it, right?
3:37
So we'll generate a new getter.
Since the title is not updatable,
3:41
right, we can't set the title,
only getters are here.
3:47
We don't need to worry about the slug and
the title getting out of sync.
3:51
If we added one, we'd have to
make sure that that had it, but
3:55
we don't have that right now.
3:57
So let's not worry about that, all right?
3:58
And we wanna be able to find
one of these course ideas,
3:59
by this new slug that we just added,
right?
4:03
So let's pop over to the interface,
our CourseIdeaDAO here,
4:05
and we're going to add
the ability to find one by slug.
4:11
So we'll say findBySlug.
4:16
And then what will happen is
the user will pass in a slug.
4:18
And if we go to our simple
don't do this at home model
4:21
we can have it implement that new method,
which now it's complaining about.
4:25
All right, it's complaining
that it doesn't implement, so
4:30
select implement methods findBySlug.
4:33
Okay, this is an excellent place
to show off the power of streams.
4:36
If you haven't seen these before,
this might blow your mind, but
4:41
I just want to show you
here how powerful this is.
4:44
Now we know that we're using Java 8,
cuz of all the lambdas and
4:46
everything that we've seen so far.
4:49
So one of the really powerful things
in Java 8 is this idea of streams.
4:51
And what happens is, you kinda chain.
4:55
So for each one of the ideas,
4:57
what we'll do is we'll pick out
everything that doesn't match.
5:00
We'll only keep ones
that do match this slug.
5:03
So we'll say filter (idea
5:06
-> idea.getSlug().equals(slug))
5:09
Cool.
5:19
And whichever the first one is that
we find, there's what we want.
5:21
So there's actually
a method called findFirst.
5:27
So it's gonna go through that filter.
5:30
The first one that matches
is what's gonna come here.
5:31
Now if it doesn't find one,
what happens is,
5:34
what's returned is what's
known as an optional.
5:40
And an optional is a way of
protecting against nulls.
5:42
So they offer a great form of protection.
5:47
Now what we want to return is
we want to return a CourseIdea.
5:50
So if we do orElseThrow, this is what
we're gonna do if we didn't find one,
5:53
we want an exception to happen, okay?
5:59
So we're gonna say NotFoundException.
6:00
This is a new class that we're
gonna make here in a second.
6:03
And this is a method reference,
if you remember from the workshop.
6:06
So this will throw this NotFoundException.
6:11
And we'll say here,
we'll say Create Class NotFoundException.
6:13
And we want it in the model package.
6:19
And we'll gonna just go ahead and say
that this extends a RunTimeException,
6:21
right, because we don't know until
runtime that this is a bug.
6:26
Okay, awesome, so
we will try to find the slug.
6:30
And if it doesn't happen,
we're gonna throw this NotFoundException.
6:33
It's pretty succinct, right?
6:38
So we're going to stream,
we're going to look at each idea.
6:39
And if the idea, if its slug equals
the slug that we're looking for,
6:43
we're going to get it back, or
else we're going to throw a new exception.
6:47
So we could've written that
in the imperative way,
6:51
but I wanted to show off
streams a little bit here.
6:54
Okay, so where were we,
sorry I got distracted, nerd-sniped.
6:56
All right, so
let's add a way to store our voters.
7:00
Since you're only allowed to vote once
per idea, let's use a set of user names.
7:04
That'll take care of the problem
by ensuring uniqueness, right?
7:09
So, let's flip back to our
CourseIdea model here.
7:12
And we're going to add a new sets of
strings, so it's a set of user names,
7:18
of strings that are,
we'll call voters, sorry.
7:25
And it is definitely Java Set, and
7:33
we need to initialize
that when it comes in.
7:38
So, we'll say voters = new HashSet.
7:44
All right, so.
7:51
Let's add a convenience method
that will allow us to add a voter.
8:00
So we'll say public, and when we add it,
we want to let them know whether or
8:05
not it was added successfully.
8:09
So we'll say voterUserName, and
8:11
we'll just return voters dot add,
which is voterUserName.
8:16
Cool, that makes sense?
8:24
Sets, when you call add on Sets,
it will return a true or false.
8:27
So, that's what we want.
8:30
And let's do a count of how
many times it's been voted for.
8:32
So let's say, public int getVoteCount.
8:35
That's probably some data that
we'll want to show, right?
8:44
How popular is this?
8:48
Okay, now let's add a handler
that will track the vote.
8:50
So we want to put the dynamic
slug right into the URL.
8:55
So how do we define that path?
8:59
Let's go to Main here.
9:00
So we know that we want it to be a post,
right, because they're posting a new vote.
9:03
So it's ideas.
9:09
And how do we add the slug?
9:10
Well, the good news is,
it's super straight forward.
9:11
All you need to do is put a colon
9:14
followed by the name of the parameter
that you'd like to refer to later.
9:17
So we're gonna say slug/vote.
9:21
And then, of course,
we're gonna take a request and response.
9:27
We're gonna open up that route.
9:31
Okay, and in here,
9:35
what we wanna do is, let's go find
a CourseIdea, should it exist.
9:36
We'll do dao.
9:41
our new method, findBySlug().
9:42
And we're going to pull that
parameter off of the request, and
9:44
that is just like you might
think on a thing called params.
9:47
So that's pulling whatever was in the URL
9:50
at this place in between these
two slashes, slug and slug here.
9:55
Nice, right?
10:00
So now let's add the user as a voter.
10:02
So we're gonna do idea.addVoter, and
10:08
we're gonna do req.attribute.
10:11
Remember we're using
the attributes username.
10:15
Okay, we've now added the voter.
10:25
And let's pop them back
to the idea list so
10:29
that they can see the vote count pop up.
10:31
Okay, that looks like a good design there,
so
10:40
they'll vote and we'll add a voter
to the CourseIdea, should it exist.
10:43
Okay, so now what we need to do is
we need to modify that template so
10:48
that we have a place to
send those requests.
10:51
So let's go to our ideas template.
10:54
Okay, so let's,
inside each one of these list items,
10:57
why don't we make each one
of these a form, okay?
11:00
So I'm gonna come in and
I'm gonna add a new form, and
11:03
that's gonna go to our new page.
11:07
So we're gonna say ideas.
11:08
And remember,
we added that getter for get slug.
11:09
And it's gonna make a vote.
11:14
And that was a method of post.
11:17
Okay, let's move this
title up inside the form.
11:23
So each list item is gonna have a form.
11:26
That form is gonna show the title,
and then let's show the vote count.
11:30
Remember, we created that method
called getVoteCount, but
11:35
it's called voteCount
here in this section, and
11:39
we need to give everybody
a button that says Vote.
11:46
Okay, so let's reboot that server and
let's go add a few.
11:51
So I'm going to view all course ideas.
11:56
Let's add Spark Testing.
11:58
And let's add the Ninja Framework.
12:01
All right, so let's vote.
12:06
Okay, so I'm gonna vote for
this Spark Test thing.
12:10
Boom.
Awesome.
12:12
It's up to 1.
Now what if I do it again?
12:13
Nothing.
12:16
Hm.
12:18
That's right.
12:18
We made it a set so there can only be one.
12:19
We really should be showing
them an error message.
12:21
Hm.
12:24
Let's make sure that this was working for
different users as well.
12:25
So I'm gonna erase my cookie,
I'm gonna refresh this page, and
12:27
it should have us go back to login.
12:31
Let's log in as the thought leader,
chalkers.
12:32
Let's go and view all course ideas,
and let's have him vote here.
12:36
Great, there's two votes.
12:38
You know what would be cool?
12:40
What if we add a detail page that was just
for this one idea, right, like you click
12:41
this and it went to a detail page, and
it listed all the voters who voted on it?
12:46
That's actually a great way for
12:50
you to recall a lot of what you've
learned through this course.
12:51
Why don't you take that on?
12:53
In the next video,
I'll show you how I did it, but
12:55
why don't you give it a spin first?
12:57
I've put some directions
in the teacher's notes.
12:59
Have fun, you got this.
13:01
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up