HTML Form for Adding a Category

Now that we have our code in place to process the adding of a new category. 0:00 We need to make sure we have everything in place to render the form to 0:03 the user sending it as an HTTP response to be displayed to the user s that he or 0:07 she can enter data and submit. 0:11 Let's pop open the category form now. 0:14 You'll find that in source, main, resources and 0:16 in templates is where you'll find all the Thymeleaf templates. 0:20 And I have them separated into directories according to the entity that 0:23 they describe. 0:27 So here's the category form. 0:28 Let's recall the basic components of an HTML form. 0:32 First, there is a form tag, here it is for us right here. 0:35 But you'll notice that the form's opening tag is missing two important attributes, 0:39 the action and the method attributes. 0:44 Let's add those now using Thymeleaf attributes. 0:47 We'll say th:action= and then in quotes we'll have Thymeleaf process the URL here, 0:50 /categories and then the method is going to be post. 0:57 Again, as usual I'm having Thymeleaf process and generate the URL 1:04 right here for form submission using @ followed by curly braces. 1:08 The next important component of a form would be its data elements. 1:14 In our case, a text input right here and 1:17 a select element that renders as a drop down right here. 1:20 Recall from HTTP Basics, as well as any experience you have with HTML, 1:25 that these data elements need name attributes in order to be included 1:30 in the request payload for our post form submission. 1:34 We'll return to those name attributes in just a moment. 1:37 The last component of a form we're concerned about here is a way to submit. 1:40 And in our case, it's a submit button, which if you scroll down, 1:44 you'll see that we already have in place right here, button type= submit. 1:49 Now, back to that input and select element. 1:56 We could decide to add name attributes ourselves. 2:00 But actually, Thymeleaf has a better alternative for you. 2:04 Thymeleaf offers what's called object binding in which you take an object that's 2:07 been included as a model attribute from the controller and 2:12 bind it to an HTML element. 2:16 Then, any of the HTML elements, Child elements can easily access its properties. 2:18 Let me show you an example here and as you gain more experience with Thymeleaf, 2:24 you'll learn more about its capabilities. 2:28 We'll start by binding a category object to the form element using the th 2:31 object attribute, and here is how that looks. 2:35 Th colon object equals dollar sign and 2:38 curly braces we are going to put category. 2:42 Now, this means that a model attribute named category will have had to been 2:47 added to the model map by the controller method that renders this view. 2:52 Let's do that now. 2:57 I will flip to CategoryController. 2:58 If I scroll up in this controller here, I'll see the formNewCategory method which 3:02 is the one that handles the rendering of the view we're concerned with right now. 3:09 So under that comment for adding model attributes needed for a new form, 3:12 I'll add a new category object model.addAttribute. 3:17 I'll call it category, cuz that's the name I reference in the template and 3:23 I will add a new category object. 3:27 Notice that i'm not specifying any field values of the category object 3:32 since this will be a brand new category. 3:36 Well, at least this approach will suffice for now. 3:38 So we're good to go here. 3:41 Now, back to the form. 3:42 With our object bound to the form element, we can now use the th field attribute for 3:45 our data elements, as follows. 3:50 I'm going to go down to this text input and use the th field elements. 3:52 In here instead of starting with a dollar sign, I will start with an asterisk and 3:58 in the curly braces. 4:02 I will use the name property and 4:03 then I'll do something similar for the select element. 4:06 I'll use thfield and as the attribute value I'll use an asterisk and 4:10 in curly braces, I will refer to the color code property. 4:17 Notice that when you're referencing a field name, you use the asterisk and 4:22 you indicate only the name of the property of the bound object. 4:26 Instead of using the object name which is in our case category. 4:29 Category.colorcode with object binding, you only use the property name here. 4:33 And the asterisk tells Thymeleaf that this 4:40 is in reference to the bound object of a parent element. 4:43 In our case, bound object is on the form element, TH object equals category. 4:46 That's the object whose properties we are referencing 4:52 in here with the asterisk in curly braces. 4:55 Now this Thymeleaf object binding actually gives us several benefits and 4:59 i'll mention a couple here. 5:03 One benefit is that in binding the object and using these TH field attributes if 5:05 that category object happens to have any property values for a name and color code. 5:10 Those will be dropped in as value attributes by Thymeleaf. 5:17 In addition, name attributes for each of these fields but 5:21 the input in the select, will be included and I referenced those earlier. 5:26 Those name attributes will need to be present in order for 5:30 the form submission to include those values in its request. 5:34 Payload, Thymeleaf will take care of that because we've used object binding. 5:39 And the second benefit I wanna highlight is that object binding will allow us to 5:45 easily use the same HTML template for editing an existing category. 5:49 Here, we're using it for adding a new category. 5:54 We can reuse this same file for editing an existing category. 5:57 And for redirecting back here, should a user try to submit this form with invalid 6:01 or missing data which we will cover in the next stage. 6:05 Okay, one more thing before we test this app. 6:10 Currently, our color code select element has only one option here, and 6:13 that is Aqua. 6:18 But we actually have a color enum in the web package offering a handful of options. 6:21 To remind you, that is right here. 6:25 We have six colors at our disposal here. 6:28 So I'd like Thymeleaf to populate this select element with those six options. 6:32 And we just need to do two things in order to make that happen. 6:38 First, we need to add the colors to the model from the controller method. 6:41 And second, will need to tell Thymeleaf to iterate over those colors in this 6:45 template and generate option elements for each one of those colors. 6:49 And since we're already in the Thymeleaf template, 6:53 let's take care of that part first. 6:55 So, to generate an option element for 6:57 each of the colors, we'll include a th each element. 6:59 So I'll leave this first option intact that will be what is displayed when no 7:05 color is selected and to the second option I'll include a th each attribute. 7:09 And the name I'll give to each object that we integrate over, will be color and 7:15 that will come from an attribute that has been added to the model map called colors. 7:19 Then, we'll need to specify the options value with the th value attribute, so 7:26 let's do that here. 7:30 The th value attribute will have the value coming from that color object. 7:31 Specifically, coming from the color object's hex code property. 7:37 So that will be the value that's passed along with the request payload when 7:43 the form is submitted. 7:46 But the text I'd like to display comes from the text. 7:48 The th text attribute so let's add that as well and 7:52 this line is getting quite long let me scroll over a little bit. 7:55 And the value is also going to come from that color object. 7:59 Specifically, from its name property. 8:03 And finally, much like we did with the category index page, 8:06 let's change this style attribute. 8:10 It's hidden now, but if we click on it, IntelliJ will display that. 8:12 Let's change this to match the current colors hexCode. 8:17 So like we did in the index, let's trigger some Thymeleaf concatenation. 8:22 So I'm going to surround that with vertical bars an d then in place of this 8:29 static Hex value I am going to drop color.hexCode. 8:34 Now this is all great but in order for Thymeleaf to process this attribute, 8:42 we better prefix this attribute name with th colon. 8:45 There we go. 8:50 Now everything I just did here with colors all depends on this 8:51 colors entry right here, so I forgot the s here. 8:56 This colors entry being present in the model map that 9:00 has to have been added by the controller method that will render this view. 9:04 Let's switch back to category controller and do that now. 9:09 So we'll add that model attribute here, 9:14 model.addAttribute we said we want to call it colors. 9:16 And fortunately, 9:20 there is a built in values method to the Java enum returns an array of in our case, 9:21 color objects in the way that looks it's a static method on the enum Color.values. 9:27 And we'll just need to make sure that we import that enum. 9:36 So make sure you import that enum from this project and 9:40 not something that's from another library. 9:44 That's our first one right here. 9:46 Beautiful, now that was some crazy coding and bouncing around. 9:48 Shall we reboot this thing and test our category add? 9:52 Let's do it. 9:55 Now the first thing I wanna do is I wanna make sure that I have a database server 9:57 up and running. 10:01 So in my terminal, as we've done in previous videos. 10:01 I'm actually gonna arrow up to a previous command. 10:04 There it is right there, that starts the server. 10:08 Someone hit Enter, that should pop open the web console. 10:10 There it is. 10:13 And what you should see here is the JDBC URL that you last used. 10:14 And in this case, mine looks right. 10:20 I'm gonna click Connect. 10:21 I'll close my old one right there and I'll switch back to IntelliJ. 10:23 Now, with my database server running, 10:27 I'm going to run the boot run task, which is my last run task. 10:30 So I'm gonna click Rerun. 10:34 Looks like everything compiled. 10:38 Our application is now booting. 10:40 And wonderful. 10:44 Our application successfully started. 10:45 So let's switch to Chrome, and let's see what we have. 10:48 I'm gonna go back to my categories page. 10:52 I'll hit Refresh to make sure the category index is still working fine. 10:54 Looks great and now I'm going to click on this plus link right here, 10:58 which will actually take us to that category add form and now let's see here. 11:02 Let's enter, Yoga for the category name and let's drop this down, 11:08 [SOUND] all of our colors made it in there wonderful. 11:11 I'll choose Purple here and I will click, Add. 11:14 And great, there is our new category, looks like it worked. 11:19 We're really rock and roll and now! 11:24 Hey, great work on getting that category add to work! 11:26 Before moving on to the features of updating and 11:29 deleting categories, as well as crowd operations for GIFs. 11:32 We'll wanna make sure we're able to detect invalid data when making any changes and 11:35 in this case, adding a category. 11:40 So up next, data validation. 11:42