Okay, so first thing's first, we need to make that page prettier.

We need to let the browser do what it does best, render a nicer looking page.

And the way that we're going to do that is to send down things in a language that

the browser understands, Hyper Text Markup Language, or HTML.

If you're new to this web application world,

this HTML language might be new to you as well.

Now, chances are you've heard of this before, and

if you've done any JavaFX programming, you've probably toyed around with FXML.

Now the good news here is that although this is a new language,

it's not that challenging to pick up.

I mean, you already know Java this should be a walk in the park.

I'm not gonna go too far in depth with HTML, so

if you'd like to know more please check the teacher's notes.

We'll go over what we need to know to build this project.

But as always, there's much more to learn out there and

we've got a ton of awesome resources here on Treehouse.

So we're going to need to send down data to the client.

Are we just gonna have to concatenate a bunch of strings in our method?

That would work, but man it sure would be hard to maintain all those plus signs and

new lines.

So there is a way around this, and a way to make very nice,

maintainable design code.

It's a thing that frameworks usually provide that we talked about earlier.

That's right, templating.

So Spark allows you to plug in several different templating languages.

Let's go take a look at how to do that.

So back here on the Spark documentation, if we scroll down over here,

we can see that there's Views and Templates.

As you can see, there's a handful of them.

And your choice here will usually depend on whatever your

team is most comfortable with or whatever you might feel like learning.

They all have similar feature sets.

Now most of them have silly names.

This Mustache library here

Is named after the way it declares the dynamic bits using curly braces.

If you look at a curly brace sideways,

just kind of turn your head, they kind of looks like mustaches, right?

Pretty silly, I know.

Well, it gets sillier.

There's an offshoot called handlebars, like a style of mustache.

Now personally, this is one of my favorites, and

not just because of the silly joke.

I really like how you can use the same templating language in both Java and

on the client side in JavaScript.

Like I said though, it's totally up to you and your team.

Well, except for now, cuz we're gonna use Handlebars.

So, check the teacher's notes if you'd like to dive deeper.

Okay, so this Maven dependency is very similar to the one that we have here.

Except it is spark-template-handlebars, everything else is the same.

So I duplicated that with command d.

Okay, so let's refresh our Gradle dependency.

Open up our Gradle window over here.

Here we go.

Perfect, and now it's over here.

Here's the handlebars library.

Okay, now before we take off and start coding,

let's install a handlebars plugin to the IntelliJ IDEA editor.

Now there are lots of nice plugins available for editor.

So, if you choose IntelliJ Preferences or

command-comma as it says here, you will see a Plugins section here.

And if we start typing up here, start typing handlebars.

Let's choose, Browse search for non-bundled plugins.

Again, Handlebars/Mustache, here it is.

Okay, and then we'll click install.

Cool. Now when we create a file type with

the extension of HBS or Handlebars, it'll color code for us.

Okay, so now what?

Let's flip back to that documentation that we had.

Sorry, actually I'm gonna go ahead, I'm gonna restart this.

When you install a new Plugin, obviously you need to restart.

While we're doing that let's flip back over to the documentation here.

And let's click on the Handlebars and

you'll see that there's an example here in source and example on GitHub.

So let's click over there, we'll take a look at some of the shared code over here.

Okay, so it looks like this comment here,

this hello.hbs file is in the resources/templates directory.

And see how it, here it says it's passing in the name of the hello.hbs., so

that's where it's at.

So let's go ahead and let's flip back over.

And let's add to our resources directory here.

Let's make a template directory, templates.

And in the templates directory let's make a file.

And we are going to call this index.hbs.

Now, index is the standard way to talk about a non-named resource,

that forward slash, right?

It's the index for that page.

Now, Web servers typically look for index.html if the file is not specified.

So if we follow that, our team will know where to look.

Okay, see the cute little mustache on the icon there?

So, one nice thing about our editor is we can just pop out a really

quick wrapper for HTML, cuz all the HTML needs to be in a single place.

So we're gonna html:5.

And now when I press Tab, it will automatically float up,

which is pretty cool.

And if I press Tab, and I jump to different things,

now I jump to where the title is.

So, this where you wanna say, Hello Students.

And that's the title of the webpage, right?

When you're mousing over a website, that has a title.

This is HTML, you might not have seen this before and like I said,

learning this is a little bit out of scope.

But notice how there is opening tags and then there's these closing tags, right?

There's that forward slash and

then this, and then this head here, it has a child tag, right?

It has this meta tag and it has the title tag then it closes the head.

So it's opening and closing of tags.

Okay, so let's add a new tag here.

Again with the editor, if we press h1 and then press tab,

it will automatically do the closing for you, so h1 is for a heading.

And there's different levels of them, so

the biggest one on the page is an h1, the next heading is an h2, and h3.

It's kind of a semantic way of explaining a page.

So let's say Welcome Students in the biggest heading possible.

And this here is called inner text, right?

So I added a value inside between these two, inner text.

Okay, so let's make our route use our new template.

Okay, so let's go back in here.

This static-get-method here has quite a few overloaded counterparts.

So let's pop back to that GitHub example one more time.

And notice here how it's passing a new,

third parameter called the HandlebarsTemplateEngine.

It's also returning, instead of returning a string,

it's returning this ModelAndView thing, and it's coming from Spark.

So, the first parameter is is the model which we don't have yet, so

let's not worry about it.

But the second parameter is the name of the template, and so

ours would be index.hbs.

And then there's this new parameter here that's the template.

So let's go ahead and let's grab that TemplateEngine bit.

And then let's flip back over to our code.

And let's make our Lambda be a new line.

Style Lambda and then I'm gonna drop in what I copy and pasted from that get.

So, HandlebarsTemplateEngine, and

it knows what we're talking about cuz we imported that, so that fixed that.

And this needs, this is now expecting us to return a new ModelAndView.

There, that's that, Autocorrected, this word.

And we're gonna pass in a null.

And in the string that we wanna pass in, we wanna pass in index.hbs.

Okay, so this reads,

when something comes in matching the path of forward slash, run this route.

Which at this moment, builds a new ModelAndView object.

And only has the view portion, or

template name, which exists in our resources templates index directory.

And it renders it using the HandlebarsTemplateEngine.

Power packed little function call, isn't it?

Okay, so let's kill this hello method, we don't need this anymore.

And let's go and run this.

Restart the server if you have it running,

I did not, because I had to restart after I installed the plugin.

Okay, so let's go and look at what slash forward slash does.

Nice, it feels a bit like the early 90s up in here.

But hey, it's retro these days, it's like a 90s dance party.

Okay, so now we wanna make this a little bit more personal.

We wanna ask for their name, right?

So, why don't we present them with a form?

So if we go back to our template.

And right under this h1 here, I'm gonna type form and then do a tab.

And we're gonna do an action and

we're gonna make it go to a place called sign-in, okay?

It's yet to be defined and we wanna make sure that when somebody does this,

that they POST to it, they use an HTTP POST, right?

Because remember, those are the verbs.

So we're gonna say method="post", okay?

And we need a field, we need an input field, and

the type is definitely gonna be text.

And let's put some placeholder text in there, and

that's what will be in the field before they type it.

So, we'll say what's your name?

And we're gonna name the field username.

Let's ask specifically for their username.

Now I am using HTML5, right?

We defined this as HTML5, so we don't need to close this tag.

But if you might see something like this, this is self-closed tag.

Because there's not a child, we can say that this is auto-closed here.

We used HTML5, we don't need to,

I just wanted to show you that in case you come across it.

Okay, and then we're gonna add a button, and we're gonna make it say sign-in,

that's all our form does.

Okay? So, if we restart the server,

do not forget to restart the server.

Let's go over and take a look now at our page.

Awesome, there it is.

And if we fill this in, my username is craigsdennis, and I click Sign In.

Of course,

we're gonna get a 404 Not found, which is what happens when a page can't be found.

So, let's leave ourselves a TODO to fix that.

So a comment in HTML looks like this.

I'm gonna put the comment up above the form.

And we'll say, TODO.

We need to add the sign in.

Awesome!

We got our route rendering our Handlebars template.

We've yet to explore the power of the templating language, so

let's get to that here in a bit.

One thing I wanted to reiterate is that we just completed the Request-Response Loop.

We requested the forward slash resource, and the response was made.

While the page appears to be sitting in there waiting for

a response, the server couldn't care less.

Let's build a route that handles that post from the sign in form.

Now remember, this handling of the POST, it could be coming from anywhere.

This concept of leaving a page that the user can interact with to

continue their journey, is just one way to keep things moving seemingly forward.

It's a common pattern in website user experience or UX.

Let's keep things moving by handling that form submission.