Okay, so first thing's first, we need to make that page prettier. 0:00 We need to let the browser do what it does best, render a nicer looking page. 0:04 And the way that we're going to do that is to send down things in a language that 0:08 the browser understands, Hyper Text Markup Language, or HTML. 0:12 If you're new to this web application world, 0:17 this HTML language might be new to you as well. 0:19 Now, chances are you've heard of this before, and 0:22 if you've done any JavaFX programming, you've probably toyed around with FXML. 0:24 Now the good news here is that although this is a new language, 0:29 it's not that challenging to pick up. 0:33 I mean, you already know Java this should be a walk in the park. 0:35 I'm not gonna go too far in depth with HTML, so 0:38 if you'd like to know more please check the teacher's notes. 0:41 We'll go over what we need to know to build this project. 0:44 But as always, there's much more to learn out there and 0:46 we've got a ton of awesome resources here on Treehouse. 0:49 So we're going to need to send down data to the client. 0:52 Are we just gonna have to concatenate a bunch of strings in our method? 0:55 That would work, but man it sure would be hard to maintain all those plus signs and 0:59 new lines. 1:03 So there is a way around this, and a way to make very nice, 1:03 maintainable design code. 1:07 It's a thing that frameworks usually provide that we talked about earlier. 1:09 That's right, templating. 1:11 So Spark allows you to plug in several different templating languages. 1:13 Let's go take a look at how to do that. 1:17 So back here on the Spark documentation, if we scroll down over here, 1:20 we can see that there's Views and Templates. 1:23 As you can see, there's a handful of them. 1:28 And your choice here will usually depend on whatever your 1:30 team is most comfortable with or whatever you might feel like learning. 1:33 They all have similar feature sets. 1:36 Now most of them have silly names. 1:39 This Mustache library here 1:40 Is named after the way it declares the dynamic bits using curly braces. 1:44 If you look at a curly brace sideways, 1:49 just kind of turn your head, they kind of looks like mustaches, right? 1:51 Pretty silly, I know. 1:55 Well, it gets sillier. 1:56 There's an offshoot called handlebars, like a style of mustache. 1:57 Now personally, this is one of my favorites, and 2:02 not just because of the silly joke. 2:04 I really like how you can use the same templating language in both Java and 2:06 on the client side in JavaScript. 2:10 Like I said though, it's totally up to you and your team. 2:12 Well, except for now, cuz we're gonna use Handlebars. 2:15 So, check the teacher's notes if you'd like to dive deeper. 2:18 Okay, so this Maven dependency is very similar to the one that we have here. 2:21 Except it is spark-template-handlebars, everything else is the same. 2:28 So I duplicated that with command d. 2:37 Okay, so let's refresh our Gradle dependency. 2:40 Open up our Gradle window over here. 2:42 Here we go. 2:44 Perfect, and now it's over here. 2:47 Here's the handlebars library. 2:49 Okay, now before we take off and start coding, 2:51 let's install a handlebars plugin to the IntelliJ IDEA editor. 2:54 Now there are lots of nice plugins available for editor. 2:58 So, if you choose IntelliJ Preferences or 3:01 command-comma as it says here, you will see a Plugins section here. 3:05 And if we start typing up here, start typing handlebars. 3:10 Let's choose, Browse search for non-bundled plugins. 3:16 Again, Handlebars/Mustache, here it is. 3:21 Okay, and then we'll click install. 3:26 Cool. Now when we create a file type with 3:28 the extension of HBS or Handlebars, it'll color code for us. 3:30 Okay, so now what? 3:35 Let's flip back to that documentation that we had. 3:38 Sorry, actually I'm gonna go ahead, I'm gonna restart this. 3:43 When you install a new Plugin, obviously you need to restart. 3:46 While we're doing that let's flip back over to the documentation here. 3:50 And let's click on the Handlebars and 3:54 you'll see that there's an example here in source and example on GitHub. 3:58 So let's click over there, we'll take a look at some of the shared code over here. 4:02 Okay, so it looks like this comment here, 4:07 this hello.hbs file is in the resources/templates directory. 4:10 And see how it, here it says it's passing in the name of the hello.hbs., so 4:15 that's where it's at. 4:20 So let's go ahead and let's flip back over. 4:22 And let's add to our resources directory here. 4:25 Let's make a template directory, templates. 4:32 And in the templates directory let's make a file. 4:39 And we are going to call this index.hbs. 4:44 Now, index is the standard way to talk about a non-named resource, 4:48 that forward slash, right? 4:53 It's the index for that page. 4:56 Now, Web servers typically look for index.html if the file is not specified. 4:58 So if we follow that, our team will know where to look. 5:02 Okay, see the cute little mustache on the icon there? 5:07 So, one nice thing about our editor is we can just pop out a really 5:10 quick wrapper for HTML, cuz all the HTML needs to be in a single place. 5:15 So we're gonna html:5. 5:19 And now when I press Tab, it will automatically float up, 5:23 which is pretty cool. 5:26 And if I press Tab, and I jump to different things, 5:27 now I jump to where the title is. 5:29 So, this where you wanna say, Hello Students. 5:30 And that's the title of the webpage, right? 5:34 When you're mousing over a website, that has a title. 5:35 This is HTML, you might not have seen this before and like I said, 5:41 learning this is a little bit out of scope. 5:44 But notice how there is opening tags and then there's these closing tags, right? 5:47 There's that forward slash and 5:51 then this, and then this head here, it has a child tag, right? 5:52 It has this meta tag and it has the title tag then it closes the head. 5:55 So it's opening and closing of tags. 6:00 Okay, so let's add a new tag here. 6:04 Again with the editor, if we press h1 and then press tab, 6:07 it will automatically do the closing for you, so h1 is for a heading. 6:11 And there's different levels of them, so 6:15 the biggest one on the page is an h1, the next heading is an h2, and h3. 6:17 It's kind of a semantic way of explaining a page. 6:20 So let's say Welcome Students in the biggest heading possible. 6:25 And this here is called inner text, right? 6:29 So I added a value inside between these two, inner text. 6:30 Okay, so let's make our route use our new template. 6:35 Okay, so let's go back in here. 6:38 This static-get-method here has quite a few overloaded counterparts. 6:41 So let's pop back to that GitHub example one more time. 6:45 And notice here how it's passing a new, 6:49 third parameter called the HandlebarsTemplateEngine. 6:51 It's also returning, instead of returning a string, 6:54 it's returning this ModelAndView thing, and it's coming from Spark. 6:57 So, the first parameter is is the model which we don't have yet, so 7:00 let's not worry about it. 7:04 But the second parameter is the name of the template, and so 7:05 ours would be index.hbs. 7:07 And then there's this new parameter here that's the template. 7:09 So let's go ahead and let's grab that TemplateEngine bit. 7:12 And then let's flip back over to our code. 7:15 And let's make our Lambda be a new line. 7:21 Style Lambda and then I'm gonna drop in what I copy and pasted from that get. 7:25 So, HandlebarsTemplateEngine, and 7:30 it knows what we're talking about cuz we imported that, so that fixed that. 7:32 And this needs, this is now expecting us to return a new ModelAndView. 7:37 There, that's that, Autocorrected, this word. 7:44 And we're gonna pass in a null. 7:47 And in the string that we wanna pass in, we wanna pass in index.hbs. 7:49 Okay, so this reads, 7:55 when something comes in matching the path of forward slash, run this route. 7:57 Which at this moment, builds a new ModelAndView object. 8:03 And only has the view portion, or 8:07 template name, which exists in our resources templates index directory. 8:09 And it renders it using the HandlebarsTemplateEngine. 8:12 Power packed little function call, isn't it? 8:18 Okay, so let's kill this hello method, we don't need this anymore. 8:20 And let's go and run this. 8:24 Restart the server if you have it running, 8:27 I did not, because I had to restart after I installed the plugin. 8:29 Okay, so let's go and look at what slash forward slash does. 8:32 Nice, it feels a bit like the early 90s up in here. 8:38 But hey, it's retro these days, it's like a 90s dance party. 8:41 Okay, so now we wanna make this a little bit more personal. 8:45 We wanna ask for their name, right? 8:48 So, why don't we present them with a form? 8:50 So if we go back to our template. 8:53 And right under this h1 here, I'm gonna type form and then do a tab. 8:58 And we're gonna do an action and 9:04 we're gonna make it go to a place called sign-in, okay? 9:06 It's yet to be defined and we wanna make sure that when somebody does this, 9:11 that they POST to it, they use an HTTP POST, right? 9:16 Because remember, those are the verbs. 9:19 So we're gonna say method="post", okay? 9:21 And we need a field, we need an input field, and 9:30 the type is definitely gonna be text. 9:34 And let's put some placeholder text in there, and 9:36 that's what will be in the field before they type it. 9:39 So, we'll say what's your name? 9:42 And we're gonna name the field username. 9:46 Let's ask specifically for their username. 9:52 Now I am using HTML5, right? 9:57 We defined this as HTML5, so we don't need to close this tag. 9:59 But if you might see something like this, this is self-closed tag. 10:02 Because there's not a child, we can say that this is auto-closed here. 10:07 We used HTML5, we don't need to, 10:10 I just wanted to show you that in case you come across it. 10:11 Okay, and then we're gonna add a button, and we're gonna make it say sign-in, 10:14 that's all our form does. 10:19 Okay? So, if we restart the server, 10:24 do not forget to restart the server. 10:27 Let's go over and take a look now at our page. 10:30 Awesome, there it is. 10:34 And if we fill this in, my username is craigsdennis, and I click Sign In. 10:36 Of course, 10:40 we're gonna get a 404 Not found, which is what happens when a page can't be found. 10:41 So, let's leave ourselves a TODO to fix that. 10:45 So a comment in HTML looks like this. 10:50 I'm gonna put the comment up above the form. 10:54 And we'll say, TODO. 10:59 We need to add the sign in. 11:05 Awesome! 11:08 We got our route rendering our Handlebars template. 11:09 We've yet to explore the power of the templating language, so 11:13 let's get to that here in a bit. 11:15 One thing I wanted to reiterate is that we just completed the Request-Response Loop. 11:17 We requested the forward slash resource, and the response was made. 11:23 While the page appears to be sitting in there waiting for 11:27 a response, the server couldn't care less. 11:29 Let's build a route that handles that post from the sign in form. 11:33 Now remember, this handling of the POST, it could be coming from anywhere. 11:36 This concept of leaving a page that the user can interact with to 11:41 continue their journey, is just one way to keep things moving seemingly forward. 11:44 It's a common pattern in website user experience or UX. 11:49 Let's keep things moving by handling that form submission. 11:53