1 00:00:00,310 --> 00:00:04,290 Okay, so first thing's first, we need to make that page prettier. 2 00:00:04,290 --> 00:00:08,570 We need to let the browser do what it does best, render a nicer looking page. 3 00:00:08,570 --> 00:00:12,410 And the way that we're going to do that is to send down things in a language that 4 00:00:12,410 --> 00:00:16,430 the browser understands, Hyper Text Markup Language, or HTML. 5 00:00:17,600 --> 00:00:19,580 If you're new to this web application world, 6 00:00:19,580 --> 00:00:22,700 this HTML language might be new to you as well. 7 00:00:22,700 --> 00:00:24,870 Now, chances are you've heard of this before, and 8 00:00:24,870 --> 00:00:29,950 if you've done any JavaFX programming, you've probably toyed around with FXML. 9 00:00:29,950 --> 00:00:33,520 Now the good news here is that although this is a new language, 10 00:00:33,520 --> 00:00:35,630 it's not that challenging to pick up. 11 00:00:35,630 --> 00:00:38,278 I mean, you already know Java this should be a walk in the park. 12 00:00:38,278 --> 00:00:41,560 I'm not gonna go too far in depth with HTML, so 13 00:00:41,560 --> 00:00:44,870 if you'd like to know more please check the teacher's notes. 14 00:00:44,870 --> 00:00:46,810 We'll go over what we need to know to build this project. 15 00:00:46,810 --> 00:00:49,490 But as always, there's much more to learn out there and 16 00:00:49,490 --> 00:00:52,430 we've got a ton of awesome resources here on Treehouse. 17 00:00:52,430 --> 00:00:55,830 So we're going to need to send down data to the client. 18 00:00:55,830 --> 00:00:59,512 Are we just gonna have to concatenate a bunch of strings in our method? 19 00:00:59,512 --> 00:01:03,020 That would work, but man it sure would be hard to maintain all those plus signs and 20 00:01:03,020 --> 00:01:03,930 new lines. 21 00:01:03,930 --> 00:01:07,160 So there is a way around this, and a way to make very nice, 22 00:01:07,160 --> 00:01:09,050 maintainable design code. 23 00:01:09,050 --> 00:01:11,980 It's a thing that frameworks usually provide that we talked about earlier. 24 00:01:11,980 --> 00:01:13,730 That's right, templating. 25 00:01:13,730 --> 00:01:17,490 So Spark allows you to plug in several different templating languages. 26 00:01:17,490 --> 00:01:18,760 Let's go take a look at how to do that. 27 00:01:20,230 --> 00:01:23,650 So back here on the Spark documentation, if we scroll down over here, 28 00:01:23,650 --> 00:01:26,600 we can see that there's Views and Templates. 29 00:01:28,710 --> 00:01:30,320 As you can see, there's a handful of them. 30 00:01:30,320 --> 00:01:33,360 And your choice here will usually depend on whatever your 31 00:01:33,360 --> 00:01:36,800 team is most comfortable with or whatever you might feel like learning. 32 00:01:36,800 --> 00:01:39,250 They all have similar feature sets. 33 00:01:39,250 --> 00:01:40,950 Now most of them have silly names. 34 00:01:40,950 --> 00:01:44,620 This Mustache library here 35 00:01:44,620 --> 00:01:49,870 Is named after the way it declares the dynamic bits using curly braces. 36 00:01:49,870 --> 00:01:51,570 If you look at a curly brace sideways, 37 00:01:51,570 --> 00:01:55,220 just kind of turn your head, they kind of looks like mustaches, right? 38 00:01:55,220 --> 00:01:56,290 Pretty silly, I know. 39 00:01:56,290 --> 00:01:57,670 Well, it gets sillier. 40 00:01:57,670 --> 00:02:02,370 There's an offshoot called handlebars, like a style of mustache. 41 00:02:02,370 --> 00:02:04,880 Now personally, this is one of my favorites, and 42 00:02:04,880 --> 00:02:06,380 not just because of the silly joke. 43 00:02:06,380 --> 00:02:10,270 I really like how you can use the same templating language in both Java and 44 00:02:10,270 --> 00:02:12,780 on the client side in JavaScript. 45 00:02:12,780 --> 00:02:15,290 Like I said though, it's totally up to you and your team. 46 00:02:15,290 --> 00:02:18,220 Well, except for now, cuz we're gonna use Handlebars. 47 00:02:18,220 --> 00:02:21,140 So, check the teacher's notes if you'd like to dive deeper. 48 00:02:21,140 --> 00:02:28,800 Okay, so this Maven dependency is very similar to the one that we have here. 49 00:02:28,800 --> 00:02:37,000 Except it is spark-template-handlebars, everything else is the same. 50 00:02:37,000 --> 00:02:38,940 So I duplicated that with command d. 51 00:02:40,250 --> 00:02:42,590 Okay, so let's refresh our Gradle dependency. 52 00:02:42,590 --> 00:02:43,820 Open up our Gradle window over here. 53 00:02:44,830 --> 00:02:45,330 Here we go. 54 00:02:47,990 --> 00:02:49,058 Perfect, and now it's over here. 55 00:02:49,058 --> 00:02:50,060 Here's the handlebars library. 56 00:02:51,250 --> 00:02:54,450 Okay, now before we take off and start coding, 57 00:02:54,450 --> 00:02:58,770 let's install a handlebars plugin to the IntelliJ IDEA editor. 58 00:02:58,770 --> 00:03:01,530 Now there are lots of nice plugins available for editor. 59 00:03:01,530 --> 00:03:05,295 So, if you choose IntelliJ Preferences or 60 00:03:05,295 --> 00:03:10,740 command-comma as it says here, you will see a Plugins section here. 61 00:03:10,740 --> 00:03:16,964 And if we start typing up here, start typing handlebars. 62 00:03:16,964 --> 00:03:20,780 Let's choose, Browse search for non-bundled plugins. 63 00:03:21,890 --> 00:03:23,890 Again, Handlebars/Mustache, here it is. 64 00:03:26,240 --> 00:03:27,260 Okay, and then we'll click install. 65 00:03:28,310 --> 00:03:30,490 Cool. Now when we create a file type with 66 00:03:30,490 --> 00:03:35,380 the extension of HBS or Handlebars, it'll color code for us. 67 00:03:35,380 --> 00:03:36,420 Okay, so now what? 68 00:03:38,580 --> 00:03:41,950 Let's flip back to that documentation that we had. 69 00:03:43,870 --> 00:03:46,250 Sorry, actually I'm gonna go ahead, I'm gonna restart this. 70 00:03:46,250 --> 00:03:48,900 When you install a new Plugin, obviously you need to restart. 71 00:03:50,340 --> 00:03:54,100 While we're doing that let's flip back over to the documentation here. 72 00:03:54,100 --> 00:03:58,080 And let's click on the Handlebars and 73 00:03:58,080 --> 00:04:02,310 you'll see that there's an example here in source and example on GitHub. 74 00:04:02,310 --> 00:04:05,003 So let's click over there, we'll take a look at some of the shared code over here. 75 00:04:07,504 --> 00:04:10,725 Okay, so it looks like this comment here, 76 00:04:10,725 --> 00:04:15,740 this hello.hbs file is in the resources/templates directory. 77 00:04:15,740 --> 00:04:20,560 And see how it, here it says it's passing in the name of the hello.hbs., so 78 00:04:20,560 --> 00:04:22,000 that's where it's at. 79 00:04:22,000 --> 00:04:23,890 So let's go ahead and let's flip back over. 80 00:04:25,960 --> 00:04:31,310 And let's add to our resources directory here. 81 00:04:32,720 --> 00:04:38,070 Let's make a template directory, templates. 82 00:04:39,380 --> 00:04:42,290 And in the templates directory let's make a file. 83 00:04:44,160 --> 00:04:48,190 And we are going to call this index.hbs. 84 00:04:48,190 --> 00:04:53,355 Now, index is the standard way to talk about a non-named resource, 85 00:04:53,355 --> 00:04:56,010 that forward slash, right? 86 00:04:56,010 --> 00:04:58,680 It's the index for that page. 87 00:04:58,680 --> 00:05:02,940 Now, Web servers typically look for index.html if the file is not specified. 88 00:05:02,940 --> 00:05:05,300 So if we follow that, our team will know where to look. 89 00:05:07,200 --> 00:05:10,700 Okay, see the cute little mustache on the icon there? 90 00:05:10,700 --> 00:05:15,060 So, one nice thing about our editor is we can just pop out a really 91 00:05:15,060 --> 00:05:19,430 quick wrapper for HTML, cuz all the HTML needs to be in a single place. 92 00:05:19,430 --> 00:05:23,250 So we're gonna html:5. 93 00:05:23,250 --> 00:05:26,520 And now when I press Tab, it will automatically float up, 94 00:05:26,520 --> 00:05:27,270 which is pretty cool. 95 00:05:27,270 --> 00:05:29,730 And if I press Tab, and I jump to different things, 96 00:05:29,730 --> 00:05:30,900 now I jump to where the title is. 97 00:05:30,900 --> 00:05:34,380 So, this where you wanna say, Hello Students. 98 00:05:34,380 --> 00:05:35,930 And that's the title of the webpage, right? 99 00:05:35,930 --> 00:05:39,110 When you're mousing over a website, that has a title. 100 00:05:41,250 --> 00:05:44,180 This is HTML, you might not have seen this before and like I said, 101 00:05:44,180 --> 00:05:46,280 learning this is a little bit out of scope. 102 00:05:47,400 --> 00:05:51,171 But notice how there is opening tags and then there's these closing tags, right? 103 00:05:51,171 --> 00:05:52,570 There's that forward slash and 104 00:05:52,570 --> 00:05:55,380 then this, and then this head here, it has a child tag, right? 105 00:05:55,380 --> 00:06:00,490 It has this meta tag and it has the title tag then it closes the head. 106 00:06:00,490 --> 00:06:02,629 So it's opening and closing of tags. 107 00:06:04,671 --> 00:06:07,821 Okay, so let's add a new tag here. 108 00:06:07,821 --> 00:06:11,453 Again with the editor, if we press h1 and then press tab, 109 00:06:11,453 --> 00:06:15,850 it will automatically do the closing for you, so h1 is for a heading. 110 00:06:15,850 --> 00:06:17,430 And there's different levels of them, so 111 00:06:17,430 --> 00:06:20,820 the biggest one on the page is an h1, the next heading is an h2, and h3. 112 00:06:20,820 --> 00:06:25,020 It's kind of a semantic way of explaining a page. 113 00:06:25,020 --> 00:06:29,020 So let's say Welcome Students in the biggest heading possible. 114 00:06:29,020 --> 00:06:30,730 And this here is called inner text, right? 115 00:06:30,730 --> 00:06:35,010 So I added a value inside between these two, inner text. 116 00:06:35,010 --> 00:06:38,150 Okay, so let's make our route use our new template. 117 00:06:38,150 --> 00:06:41,054 Okay, so let's go back in here. 118 00:06:41,054 --> 00:06:45,570 This static-get-method here has quite a few overloaded counterparts. 119 00:06:45,570 --> 00:06:49,300 So let's pop back to that GitHub example one more time. 120 00:06:49,300 --> 00:06:51,730 And notice here how it's passing a new, 121 00:06:51,730 --> 00:06:54,690 third parameter called the HandlebarsTemplateEngine. 122 00:06:54,690 --> 00:06:57,040 It's also returning, instead of returning a string, 123 00:06:57,040 --> 00:07:00,890 it's returning this ModelAndView thing, and it's coming from Spark. 124 00:07:00,890 --> 00:07:04,300 So, the first parameter is is the model which we don't have yet, so 125 00:07:04,300 --> 00:07:05,030 let's not worry about it. 126 00:07:05,030 --> 00:07:07,940 But the second parameter is the name of the template, and so 127 00:07:07,940 --> 00:07:09,830 ours would be index.hbs. 128 00:07:09,830 --> 00:07:12,600 And then there's this new parameter here that's the template. 129 00:07:12,600 --> 00:07:15,210 So let's go ahead and let's grab that TemplateEngine bit. 130 00:07:15,210 --> 00:07:18,720 And then let's flip back over to our code. 131 00:07:21,230 --> 00:07:25,284 And let's make our Lambda be a new line. 132 00:07:25,284 --> 00:07:30,570 Style Lambda and then I'm gonna drop in what I copy and pasted from that get. 133 00:07:30,570 --> 00:07:32,470 So, HandlebarsTemplateEngine, and 134 00:07:32,470 --> 00:07:36,430 it knows what we're talking about cuz we imported that, so that fixed that. 135 00:07:37,730 --> 00:07:44,440 And this needs, this is now expecting us to return a new ModelAndView. 136 00:07:44,440 --> 00:07:47,190 There, that's that, Autocorrected, this word. 137 00:07:47,190 --> 00:07:49,087 And we're gonna pass in a null. 138 00:07:49,087 --> 00:07:55,546 And in the string that we wanna pass in, we wanna pass in index.hbs. 139 00:07:55,546 --> 00:07:57,009 Okay, so this reads, 140 00:07:57,009 --> 00:08:02,020 when something comes in matching the path of forward slash, run this route. 141 00:08:03,030 --> 00:08:07,210 Which at this moment, builds a new ModelAndView object. 142 00:08:07,210 --> 00:08:09,230 And only has the view portion, or 143 00:08:09,230 --> 00:08:12,770 template name, which exists in our resources templates index directory. 144 00:08:12,770 --> 00:08:16,525 And it renders it using the HandlebarsTemplateEngine. 145 00:08:18,130 --> 00:08:20,170 Power packed little function call, isn't it? 146 00:08:20,170 --> 00:08:23,240 Okay, so let's kill this hello method, we don't need this anymore. 147 00:08:24,690 --> 00:08:27,950 And let's go and run this. 148 00:08:27,950 --> 00:08:29,420 Restart the server if you have it running, 149 00:08:29,420 --> 00:08:32,650 I did not, because I had to restart after I installed the plugin. 150 00:08:32,650 --> 00:08:38,820 Okay, so let's go and look at what slash forward slash does. 151 00:08:38,820 --> 00:08:41,520 Nice, it feels a bit like the early 90s up in here. 152 00:08:41,520 --> 00:08:45,210 But hey, it's retro these days, it's like a 90s dance party. 153 00:08:45,210 --> 00:08:48,380 Okay, so now we wanna make this a little bit more personal. 154 00:08:48,380 --> 00:08:50,260 We wanna ask for their name, right? 155 00:08:50,260 --> 00:08:53,250 So, why don't we present them with a form? 156 00:08:53,250 --> 00:08:54,628 So if we go back to our template. 157 00:08:58,086 --> 00:09:04,296 And right under this h1 here, I'm gonna type form and then do a tab. 158 00:09:04,296 --> 00:09:06,734 And we're gonna do an action and 159 00:09:06,734 --> 00:09:11,170 we're gonna make it go to a place called sign-in, okay? 160 00:09:11,170 --> 00:09:16,039 It's yet to be defined and we wanna make sure that when somebody does this, 161 00:09:16,039 --> 00:09:19,462 that they POST to it, they use an HTTP POST, right? 162 00:09:19,462 --> 00:09:21,720 Because remember, those are the verbs. 163 00:09:21,720 --> 00:09:30,379 So we're gonna say method="post", okay? 164 00:09:30,379 --> 00:09:34,006 And we need a field, we need an input field, and 165 00:09:34,006 --> 00:09:36,922 the type is definitely gonna be text. 166 00:09:36,922 --> 00:09:39,506 And let's put some placeholder text in there, and 167 00:09:39,506 --> 00:09:42,300 that's what will be in the field before they type it. 168 00:09:42,300 --> 00:09:45,060 So, we'll say what's your name? 169 00:09:46,760 --> 00:09:49,463 And we're gonna name the field username. 170 00:09:52,879 --> 00:09:55,370 Let's ask specifically for their username. 171 00:09:57,380 --> 00:09:59,920 Now I am using HTML5, right? 172 00:09:59,920 --> 00:10:02,390 We defined this as HTML5, so we don't need to close this tag. 173 00:10:02,390 --> 00:10:07,110 But if you might see something like this, this is self-closed tag. 174 00:10:07,110 --> 00:10:10,349 Because there's not a child, we can say that this is auto-closed here. 175 00:10:10,349 --> 00:10:11,525 We used HTML5, we don't need to, 176 00:10:11,525 --> 00:10:13,380 I just wanted to show you that in case you come across it. 177 00:10:14,490 --> 00:10:19,500 Okay, and then we're gonna add a button, and we're gonna make it say sign-in, 178 00:10:19,500 --> 00:10:22,770 that's all our form does. 179 00:10:24,070 --> 00:10:27,390 Okay? So, if we restart the server, 180 00:10:27,390 --> 00:10:28,850 do not forget to restart the server. 181 00:10:30,060 --> 00:10:33,680 Let's go over and take a look now at our page. 182 00:10:34,860 --> 00:10:36,190 Awesome, there it is. 183 00:10:36,190 --> 00:10:40,900 And if we fill this in, my username is craigsdennis, and I click Sign In. 184 00:10:40,900 --> 00:10:41,470 Of course, 185 00:10:41,470 --> 00:10:45,630 we're gonna get a 404 Not found, which is what happens when a page can't be found. 186 00:10:45,630 --> 00:10:50,290 So, let's leave ourselves a TODO to fix that. 187 00:10:50,290 --> 00:10:53,360 So a comment in HTML looks like this. 188 00:10:54,380 --> 00:10:56,337 I'm gonna put the comment up above the form. 189 00:10:59,296 --> 00:11:01,588 And we'll say, TODO. 190 00:11:05,587 --> 00:11:06,800 We need to add the sign in. 191 00:11:08,280 --> 00:11:09,090 Awesome! 192 00:11:09,090 --> 00:11:13,210 We got our route rendering our Handlebars template. 193 00:11:13,210 --> 00:11:15,810 We've yet to explore the power of the templating language, so 194 00:11:15,810 --> 00:11:17,830 let's get to that here in a bit. 195 00:11:17,830 --> 00:11:23,190 One thing I wanted to reiterate is that we just completed the Request-Response Loop. 196 00:11:23,190 --> 00:11:27,470 We requested the forward slash resource, and the response was made. 197 00:11:27,470 --> 00:11:29,860 While the page appears to be sitting in there waiting for 198 00:11:29,860 --> 00:11:33,140 a response, the server couldn't care less. 199 00:11:33,140 --> 00:11:36,740 Let's build a route that handles that post from the sign in form. 200 00:11:36,740 --> 00:11:41,020 Now remember, this handling of the POST, it could be coming from anywhere. 201 00:11:41,020 --> 00:11:44,440 This concept of leaving a page that the user can interact with to 202 00:11:44,440 --> 00:11:49,260 continue their journey, is just one way to keep things moving seemingly forward. 203 00:11:49,260 --> 00:11:53,360 It's a common pattern in website user experience or UX. 204 00:11:53,360 --> 00:11:55,850 Let's keep things moving by handling that form submission.