Now that we have our code in place to process the adding of a new category.

We need to make sure we have everything in place to render the form to

the user sending it as an HTTP response to be displayed to the user s that he or

she can enter data and submit.

Let's pop open the category form now.

You'll find that in source, main, resources and

in templates is where you'll find all the Thymeleaf templates.

And I have them separated into directories according to the entity that

they describe.

So here's the category form.

Let's recall the basic components of an HTML form.

First, there is a form tag, here it is for us right here.

But you'll notice that the form's opening tag is missing two important attributes,

the action and the method attributes.

Let's add those now using Thymeleaf attributes.

We'll say th:action= and then in quotes we'll have Thymeleaf process the URL here,

/categories and then the method is going to be post.

Again, as usual I'm having Thymeleaf process and generate the URL

right here for form submission using @ followed by curly braces.

The next important component of a form would be its data elements.

In our case, a text input right here and

a select element that renders as a drop down right here.

Recall from HTTP Basics, as well as any experience you have with HTML,

that these data elements need name attributes in order to be included

in the request payload for our post form submission.

We'll return to those name attributes in just a moment.

The last component of a form we're concerned about here is a way to submit.

And in our case, it's a submit button, which if you scroll down,

you'll see that we already have in place right here, button type= submit.

Now, back to that input and select element.

We could decide to add name attributes ourselves.

But actually, Thymeleaf has a better alternative for you.

Thymeleaf offers what's called object binding in which you take an object that's

been included as a model attribute from the controller and

bind it to an HTML element.

Then, any of the HTML elements, Child elements can easily access its properties.

Let me show you an example here and as you gain more experience with Thymeleaf,

you'll learn more about its capabilities.

We'll start by binding a category object to the form element using the th

object attribute, and here is how that looks.

Th colon object equals dollar sign and

curly braces we are going to put category.

Now, this means that a model attribute named category will have had to been

added to the model map by the controller method that renders this view.

Let's do that now.

I will flip to CategoryController.

If I scroll up in this controller here, I'll see the formNewCategory method which

is the one that handles the rendering of the view we're concerned with right now.

So under that comment for adding model attributes needed for a new form,

I'll add a new category object model.addAttribute.

I'll call it category, cuz that's the name I reference in the template and

I will add a new category object.

Notice that i'm not specifying any field values of the category object

since this will be a brand new category.

Well, at least this approach will suffice for now.

So we're good to go here.

Now, back to the form.

With our object bound to the form element, we can now use the th field attribute for

our data elements, as follows.

I'm going to go down to this text input and use the th field elements.

In here instead of starting with a dollar sign, I will start with an asterisk and

in the curly braces.

I will use the name property and

then I'll do something similar for the select element.

I'll use thfield and as the attribute value I'll use an asterisk and

in curly braces, I will refer to the color code property.

Notice that when you're referencing a field name, you use the asterisk and

you indicate only the name of the property of the bound object.

Instead of using the object name which is in our case category.

Category.colorcode with object binding, you only use the property name here.

And the asterisk tells Thymeleaf that this

is in reference to the bound object of a parent element.

In our case, bound object is on the form element, TH object equals category.

That's the object whose properties we are referencing

in here with the asterisk in curly braces.

Now this Thymeleaf object binding actually gives us several benefits and

i'll mention a couple here.

One benefit is that in binding the object and using these TH field attributes if

that category object happens to have any property values for a name and color code.

Those will be dropped in as value attributes by Thymeleaf.

In addition, name attributes for each of these fields but

the input in the select, will be included and I referenced those earlier.

Those name attributes will need to be present in order for

the form submission to include those values in its request.

Payload, Thymeleaf will take care of that because we've used object binding.

And the second benefit I wanna highlight is that object binding will allow us to

easily use the same HTML template for editing an existing category.

Here, we're using it for adding a new category.

We can reuse this same file for editing an existing category.

And for redirecting back here, should a user try to submit this form with invalid

or missing data which we will cover in the next stage.

Okay, one more thing before we test this app.

Currently, our color code select element has only one option here, and

that is Aqua.

But we actually have a color enum in the web package offering a handful of options.

To remind you, that is right here.

We have six colors at our disposal here.

So I'd like Thymeleaf to populate this select element with those six options.

And we just need to do two things in order to make that happen.

First, we need to add the colors to the model from the controller method.

And second, will need to tell Thymeleaf to iterate over those colors in this

template and generate option elements for each one of those colors.

And since we're already in the Thymeleaf template,

let's take care of that part first.

So, to generate an option element for

each of the colors, we'll include a th each element.

So I'll leave this first option intact that will be what is displayed when no

color is selected and to the second option I'll include a th each attribute.

And the name I'll give to each object that we integrate over, will be color and

that will come from an attribute that has been added to the model map called colors.

Then, we'll need to specify the options value with the th value attribute, so

let's do that here.

The th value attribute will have the value coming from that color object.

Specifically, coming from the color object's hex code property.

So that will be the value that's passed along with the request payload when

the form is submitted.

But the text I'd like to display comes from the text.

The th text attribute so let's add that as well and

this line is getting quite long let me scroll over a little bit.

And the value is also going to come from that color object.

Specifically, from its name property.

And finally, much like we did with the category index page,

let's change this style attribute.

It's hidden now, but if we click on it, IntelliJ will display that.

Let's change this to match the current colors hexCode.

So like we did in the index, let's trigger some Thymeleaf concatenation.

So I'm going to surround that with vertical bars an d then in place of this

static Hex value I am going to drop color.hexCode.

Now this is all great but in order for Thymeleaf to process this attribute,

we better prefix this attribute name with th colon.

There we go.

Now everything I just did here with colors all depends on this

colors entry right here, so I forgot the s here.

This colors entry being present in the model map that

has to have been added by the controller method that will render this view.

Let's switch back to category controller and do that now.

So we'll add that model attribute here,

model.addAttribute we said we want to call it colors.

And fortunately,

there is a built in values method to the Java enum returns an array of in our case,

color objects in the way that looks it's a static method on the enum Color.values.

And we'll just need to make sure that we import that enum.

So make sure you import that enum from this project and

not something that's from another library.

That's our first one right here.

Beautiful, now that was some crazy coding and bouncing around.

Shall we reboot this thing and test our category add?

Let's do it.

Now the first thing I wanna do is I wanna make sure that I have a database server

up and running.

So in my terminal, as we've done in previous videos.

I'm actually gonna arrow up to a previous command.

There it is right there, that starts the server.

Someone hit Enter, that should pop open the web console.

There it is.

And what you should see here is the JDBC URL that you last used.

And in this case, mine looks right.

I'm gonna click Connect.

I'll close my old one right there and I'll switch back to IntelliJ.

Now, with my database server running,

I'm going to run the boot run task, which is my last run task.

So I'm gonna click Rerun.

Looks like everything compiled.

Our application is now booting.

And wonderful.

Our application successfully started.

So let's switch to Chrome, and let's see what we have.

I'm gonna go back to my categories page.

I'll hit Refresh to make sure the category index is still working fine.

Looks great and now I'm going to click on this plus link right here,

which will actually take us to that category add form and now let's see here.

Let's enter, Yoga for the category name and let's drop this down,

[SOUND] all of our colors made it in there wonderful.

I'll choose Purple here and I will click, Add.

And great, there is our new category, looks like it worked.

We're really rock and roll and now!

Hey, great work on getting that category add to work!

Before moving on to the features of updating and

deleting categories, as well as crowd operations for GIFs.

We'll wanna make sure we're able to detect invalid data when making any changes and

in this case, adding a category.

So up next, data validation.