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