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

Sign up for Treehouse

Updating GIFs

4:18 with Chris Ramacciotti

This video presents a code challenge of using your experience with updating categories to implement the update operation for GIFs.

Git Command to Sync Your Code to the Start of this Video

git checkout -f s5v7

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:

  1. Use the project files linked at the bottom of this page, or
  2. 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.

With experience implementing the update feature for 0:00
categories, it's now your turn to implement the update feature for gifs. 0:02
Here's what you'll need to do. 0:07
Change the timely view for the gif form to allow it to be used for updating as well. 0:09
Add new controller methods for capturing requests to the update form and 0:14
to the update submission. 0:18
But note, since updating only the description using the same form would 0:20
require advance controller logic and validation code that's outside the scope 0:24
of this course, for now we'll require that anytime users want to update a gif, 0:28
they'll need to upload a new photo as well. 0:33
Okay, when I say code, pause the video and craft your solution. 0:36
When you're done, un-pause, and I'll show you mine. 0:40
Ready, set, code! 0:43
All right, so you've taken a stab at your own update implementation and 0:46
maybe even succeeded. 0:50
Either way, let me show you how I did it. 0:52
Let's start with a Thymeleaf template which I'm in right now that is 0:55
the gifform.html file. 0:58
Up here in the h2 element I've added this th:text attribute 1:01
which references a heading model attribute. 1:06
This is so that I can have a variable heading here that either says edit or 1:10
upload, depending on the situation in which we're using it. 1:13
And if I scroll down a bit, 1:17
you can see that I did the same thing with the submit button. 1:18
I reference the model attribute I have named, submit. 1:22
Going back up there are two more things that I want to point out here. 1:26
First, is another variable item. 1:30
That is an action model attribute that will have to have been added and 1:33
that allows me to use different form actions depending on whether we want 1:37
to post to the URI that's used to add a new gif or update an existing gif. 1:42
And finally I added this hidden ID here so 1:49
that if we are editing an existing gif, that numeric value can be preserved. 1:52
Now, because all of these model attributes will have to have been added by 1:59
the controller, let me switch there now to show you how I did that part. 2:02
This is all very similar to what we did for updating categories so 2:08
it should look familiar. 2:11
Now, here in the formNewGif method and the formEditGif methods, 2:13
you can see where I've added those attributes. 2:17
One for action, one for heading, and one for submit. 2:21
Now moving on from the controller methods that render the gif form form, 2:26
let me quickly mention the listGifs method. 2:29
And that is up towards the top. 2:32
In fact it is the first method here. 2:34
If we'd even like to see the list of gifs without typing the URLs ourselves in 2:38
the browser we need to fetch the list of gifs. 2:41
Now notice how I replaced what was previously a new empty array list here. 2:44
I've replaced it with a call to the gif services, findAll method. 2:50
And just like that, the explorer link in the browser will work. 2:55
If I switch over here, I can look at the explorer link and 2:59
I see the one gif that I I've uploaded into my application. 3:03
Which then allows us to access the detail page by clicking on it and it's this page 3:08
that contains that Edit link which gives us the Edit form for our gifs. 3:13
Okay cool. 3:19
Now let me show you one other change that was needed. 3:20
So I'm going to go back to IntelliJ and I am going to open the GifDao|mp|. 3:23
Just like we saw with categories, if we had continued using the hibernateSessions 3:30
save method, we'd always get new entities when we called the Dao's 3:35
save method even when we were updating a gif entity. 3:40
So I've changed that here to be saveOrUpdate and there you have it. 3:45
If your solution wasn't quite working, go ahead and 3:51
bring yours up to speed before moving on. 3:54
I should note here that if you added JPA validation annotations to the give class, 3:56
you'd want to make sure that the gif parameter in the controller's add gif and 4:01
update gif methods were annotated with the valid annotation and that you check for 4:07
validation errors with a binding result object just like we did for categories. 4:13

You need to sign up for Treehouse in order to download course files.

Sign up