Cookies

When you were earning about http, 0:00 you probably heard about something called cookies. 0:02 Now cookies are bits of data that are stored on the client and 0:05 are sent on each request to a specific domain. 0:07 Now, one of the hardest things about using cookies is avoiding the impulse to say, 0:10 me want cookie, a la Cookie Monster. 0:15 So now that I've got that out of the way, hopefully I won't do that again. 0:19 I'm sorry about that. 0:22 You can set a cookie on a response and read it on all future requests. 0:25 That sounds exactly like what we wanna do. 0:28 Let's go use some cookie power. 0:31 Okay, so first thing's first, 0:33 let's go extract that query parameter that we pulled here. 0:34 Let's put that into its own variable. 0:38 So again, what you do is you highlight that, and 0:40 you choose Refactor, Extract, Variable. 0:43 And what that will do is it will pull out a brand new variable line, and 0:47 it's gonna try to name it. 0:51 Did a great job. 0:52 Username's fine. 0:53 And it replaces it. 0:53 So now, this variable is able, we're able to use this variable twice. 0:54 It's the point of a variable, the local variable. 0:59 So on the response object, the ability to set a cookie exists. 1:02 So you do a cookie, and then you save the name of the cookie that you want it to be. 1:07 So we want it to be called username. 1:11 And we want to set it to that new variable that we just did. 1:13 Okay, so now every request that gets sent to our domain, 1:18 which in our case here is localhost. 1:21 It will receive this data. 1:23 Do you wanna see it? 1:25 Cool, let's do it. 1:27 So let's go come here. 1:27 And we will reboot the server. 1:29 And we'll fly over to our page. 1:32 I have my network tools up. 1:35 I'm gonna go ahead, and I'm gonna type craigsdennis. 1:38 But before I click Sign in, I wanna show you something. 1:42 So, this is shortend cuz my screen is smaller here, 1:44 but at these little arrows there's a thing here called resources. 1:48 Now look at resources. 1:51 There is a thing called cookies and then there's a thing that says localhost. 1:52 This site has no cookies because we haven't set it yet. 1:56 Right? 1:58 So I'm gonna set it and when I click send. 1:58 It's gonna run through our sign-in. 2:00 It's gonna pull the request off, and it's gonna set the cookie. 2:03 Boom, and there it is. 2:06 It's set. 2:07 Okay?. So 2:07 now you see that the user name is craigsdennis. 2:08 And now, if I come back, and I hit the homepage, 2:11 you'll see that the cookies are still there. 2:15 And if we look back over here at our network tab. 2:20 Let's look at that again. 2:25 Hit All. 2:27 Look at the local host page here. 2:29 You can see that the cookie has, it's there, and it's available. 2:31 Let's make the homepage aware of whether or not we've gathered their username. 2:35 So we need to make a model. 2:42 Right? 2:45 So let's make that same model like we did before. 2:45 So we'll just do the same thing, and we'll make a new map. 2:48 And it's a new map of key values that are both strings. 2:50 And it's called model 2:56 And we'll make a new HashMap. 3:03 It's call String, String. 3:06 Okay, and we are going to put into our model, we're gonna put a new value 3:12 called username, and we're gonna pull that cookie. 3:16 So the way that you do that is just like you might think. 3:19 You just say cookie, and then the name of the cookie. 3:22 And that will get that value that's there. 3:24 Okay, and now our index.hbs needs to know about the model. 3:28 And now our template knows about the username value. 3:34 So let's use it, right? 3:37 Let's go and let's look at our. 3:39 Resources. 3:46 And we'll look in here. 3:48 We'll look under index. 3:49 And what we wanna do is we wanna only say hello if we know their name. 3:54 So the way to do that in Handlebars is to use what's known as a block helper. 3:58 So a black helper, you do a pound. 4:03 And the block helper here in this case is something you're familiar with already. 4:06 It's called if. 4:10 So we're gonna say if username. 4:11 It's a little bit different of an if than you're used to. 4:14 It's if that exists in the model, that key exists in the model, 4:17 then run this code that's inside these two if blocks. 4:22 So we're gonna say h1, Welcome, username. 4:26 Okay? 4:34 And then if we don't know what it is, we wanna have a block called else. 4:35 So, in here there is an else. 4:40 Okay, and we can grab this code here, and we can move it up. 4:46 So now what's happening is it comes in. 4:55 It says if there is a username on the model, show this message, 4:58 Welcome username. 5:02 Otherwise show Welcome Students. 5:03 I Better put the exclamation point here, so they both get exclmationed. 5:04 All right, so let's go ahead and we'll click run. 5:10 We'll do a run, and we'll restart the server. 5:13 All right. 5:17 Let's look at our index page. 5:19 Awesome. 5:23 So that's using the first part of the if, and it's using the cookie. 5:24 So we can prove that by if we come over here to the Cookies. 5:27 If you click the Cookies in Chrome, you can press Delete, and 5:30 now the site has no cookies. 5:34 And now if I refresh this page, we'll see our form. 5:35 And we can put in our name. 5:40 That prompt is back. 5:49 We don't really need this page anymore, do we? 5:51 We don't need this sign in page. 5:53 We could just drop them here. 5:56 Awesome. 6:00 By adding cookies to our bag of tricks, 6:00 we now have the core tool set used to make a web application appear to be stateful. 6:03 You'll find these patterns of forum submission and 6:09 storing values in cookies very relevant. 6:11 Now that you know these terms, 6:13 it's more a question of how each framework implements them. 6:15 Try to remember, this is all just sitting on top of HTTP and providing a nice to use 6:18 abstraction but really not doing to much more at it's core. 6:22 You should be able to start understanding most web frameworks now. 6:26 We should have all the tools we need to start building out the rest of our 6:30 application. 6:33 Let's go do that, and along the way I'll show you some handy Spark specific tricks 6:34 right after these messages. 6:38