This course will be retired on January 8, 2022.
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
As part 1 of 2 in updating categories, here we add variables to our category form template so that we can use the template for both adding new categories and updating existing categories.
Git Command to Sync Your Code to the Start of this Video
git checkout -f s5v5
Using Github With This Course
You can complete this course entirely using code created by you on your local machine. However, if you choose to use the code I've made available to you, you have two options:
- Use the project files linked at the bottom of this page, or
- Use the Github repository I've made available (recommended)
If you choose the recommended option of using the Github repository, it can be found at
https://github.com/treehouse/giflib-hibernate
To utilize Github with this course, you can download the Github desktop client for your system or use the command line interface provided with Git.
Clone this repository to your machine using the Github desktop client, or using the following command:
git clone git@github.com:treehouse/giflib-hibernate.git
To update your local repository to match a video's starting point, you can use the git checkout command in combination with the stage and video number. For example, to update your local repository to match the starting point of Stage 5, Video 4, you'd use the following:
git checkout -f s5v4
Notice the use of the -f option. This forces Git to override all local changes, so be aware: this will cause any changes you made to be lost.
At this point we've successfully
implemented the adding of new
0:00
entities including categories and gifs.
0:03
By doing this we've addressed one of
the three change operations in crud,
0:06
the create operation.
0:10
Moving right through the read operation,
let's now focus on the update operation.
0:12
In implementing this for categories, we'll
have to revisit the Thymeleaf view we used
0:17
to render a category form and
the controller to capture URL requests for
0:21
both the update form and
the update submission.
0:26
In implementing the category update
let's first visit the controller method
0:29
that's used to render the update form.
0:32
So I'll will open
the CategoryController now.
0:34
The method we're looking for
is called formEditCategory.
0:39
I'll use this Structure tab here.
0:43
There it is, formEditCategory,
this method here.
0:45
Actually, the code in here will be almost
identical to the formNewCategory method,
0:49
so I'll start by copying and
pasting code from there.
0:54
And that method is right above this one,
so I will copy this and paste here.
0:57
Now there's one change
we'll need to make for now.
1:04
Since this method is being used to edit an
existing category, instead of adding a new
1:07
category to the model here, we need to
grab the existing one from the database
1:12
according to the ID of the category
that was passed into the method.
1:17
Let's use the category services
find by ID method to do that.
1:22
So in place of the code
I have highlighted here,
1:26
that call to the default constructor.
1:28
I will use the categoryService,
and call it's findById method,
1:30
passing it the categoryId that
was passed into this method.
1:36
Now you may have gone back to
your category DAO in-service
1:40
to implement the findById method,
but I have not.
1:44
So I'll do that now.
1:47
I'll start with the DaoImpl,
so I'll open that.
1:48
That is the CategoryDaoImpl.
1:51
And here is my findById method, cool.
1:54
So, instead of copying and paste code
here from another method, let's just walk
1:58
through this again as a good reminder and
review of how this looks.
2:02
So, I'll start by opening the hibernate
session, SessionFactory.openSession.
2:06
Cool, the next thing I’m going
to do is create a category
2:13
object which will be our
eventual return value.
2:17
And I will store into it the results of
the call to the session that get method.
2:20
And this will be a category objects, so
2:26
I want to get it according to the category
entity and here is the ID we received.
2:29
All right, the next thing I wanna
do is close that session and
2:35
finally I want to return
that category object.
2:39
Let's not forget our semicolon in there,
sweet.
2:44
The next thing I wanna to
hit is the ServiceImpl.
2:49
Let's make sure I've fully
implemented things there.
2:52
So let's go to the CategoryServiceImpl and
2:55
it looks like I'm still returning
null on that findByID method.
2:57
Now what I can do is call upon that
categoryDao's findById method,
3:02
passing it the ID that this
service method received, cool.
3:08
Now at this point we should be able to
see the edit form, so let's test it.
3:12
Let me open this here, I'm gonna stop
my currently running instance of
3:18
a giflib and then i'm in a rerun,
the bootRun task.
3:23
Everything compiled correctly.
3:31
And we've got a running application.
3:33
So let's switch to Chrome.
3:37
And let's check out the category index
page, and there are all of our categories.
3:40
Now, this little icon here is what
will bring up the category edit form.
3:45
You can see the URL at the bottom there,
3:49
where it says
localhost:8080/categories/1/edit and
3:51
I'll click on that and looks like I do
indeed see the categories editform.
3:56
But there are a few UI elements
here that we need to address.
4:02
When we want to update a category,
it doesn't make much sense for
4:05
this heading to say New Category.
4:08
It should say something more like,
edit categories, so
4:12
we should say, edit here instead of new.
4:15
In addition, it also doesn't make much
sense for the submit button to say, add.
4:17
The action associated with it is updating
so, maybe it would make more sense for
4:23
this to say, update here, instead of add.
4:27
The third item is not so apparent.
4:30
But if we inspect the page we'll see
another item that needs attention.
4:32
Let me inspect this form.
4:36
Now looking closely at this form element,
here, and
4:41
I can zoom in to make that clear,
the action attribute is listed
4:44
as /categories which means this form's
submission willl be sent to the same
4:48
URI as adding a new category,
which is not true.
4:53
That's not how we were accepting our URI,
mapping our URIs in our controllers.
4:58
So we'll need to fix that as well.
5:04
Let's address each one
of these in intelliJ.
5:07
Here I'm going to open
the category form template.
5:12
Let me collapse this here and
we'll find that category form template
5:15
under resources, templates,
category and form.
5:19
Now the three changes I mentioned
certainly don't warrant the creation of
5:25
a brand new template.
5:28
Almost all of this is going
to look identical, so
5:29
let's make some of these
UI elements variable.
5:32
We'll start with the form's
action attribute right here.
5:35
This action attribute,
let's make this thing variable.
5:39
Let's assume this has been added to the
model from the controller as an attribute
5:43
named action.
5:47
So, instead of /categories here,
5:49
let's assume that there is
a model attribute named action.
5:51
Of course,
we'll need to go back to the controller to
5:56
add a model attribute name action.
5:58
We'll do that in just a bit.
6:00
Next, let's assume that the heading
has been added to the model
6:02
as an attribute named heading.
6:06
So here I could say th:text=${heading}.
6:08
Next let's assume that the submit button's
text has been added as an attribute
6:15
named submit.
6:19
So down where you see
the submit button right here,
6:21
let's change this to variable text.
6:24
Let's have Thymeleaf
generate the name of this.
6:26
So here I'll say th:text= and then submit.
6:29
Just like that.
6:35
Now the final change we'll need to make
here, is ensuring that our category's
6:37
ID is preserved across the http
request response cycle.
6:41
When the form is submitted,
6:45
we want to make sure that
the category is indeed updated,
6:47
instead of a new one being created with
the next available integer as an ID.
6:50
And to do that we'll stick a hidden input
in the form with the categories ID.
6:55
So I'll do that just below
the opening form tag.
6:59
And we'll say input[type=hidden].
7:02
This is a little shortcut
here in IntelliJ.
7:06
I'll hit tab, the type is hidden.
7:10
Make sure that's XHTML compliant, and
7:13
I'll bind it to the id
property using that asterisk.
7:16
Now that's the id property
of the bound object,
7:22
which will be category you see that th
object that we were talking about earlier.
7:25
Okay so this ID won't be displayed but
it will be present and
7:30
will be included as form data
when this form is submitted.
7:35
And don't worry about this ID field being
present when this template is used for
7:41
a new category, it won't have
a value when the form is rendered.
7:45
And now,
with all these template changes made, next
7:50
we'll flip back to the controller, and
add those three attributes to the model.
7:53
You need to sign up for Treehouse in order to download course files.
Sign up