Updating Categories: Part 1

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