Cookies6:40 with Craig Dennis
One of the ways you make HTTP appear to be stateful is by storing little bits of data on each request that is sent up to the server. These are called cookies. Let’s bake some!
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
You need to sign up for Treehouse in order to download course files.Sign up