Add Some Layout

[MUSIC] 0:00 So far, [SOUND] we've just been building standalone templates. 0:04 Obviously, if this is going to be a cohesive and pleasant to use [SOUND] app, 0:07 we need to get some structure in there. 0:10 Let's set up our layout template, [SOUND] bringing in some styles from our wonderful 0:12 Treehouse designers and make sure our menu only [SOUND] shows the sign up and 0:16 sign in links to users that aren't logged in. 0:19 So if you have been using a workspace already, you probably wanna go ahead and 0:21 grab this new one. 0:26 So you'll need to close yours, 0:28 open the window again because you wanna get this layout.html. 0:29 And there's going to be some styling added in the next one as well, so 0:33 you'll want to grab that one too. 0:38 So anyway, this is pretty simple. 0:40 There's nothing really special here. 0:42 We have a, a title block, TwoCans. 0:44 You can customize the title if you want as we go on. 0:46 But we need to add a few things in here. 0:49 So one of the things we need to do is let's actually go ahead and 0:52 if the user is logged in, let's say hi to him. 0:56 So, let's make an h1 up here and let's say hello. 1:00 And then if current_user.is_authenticated, 1:05 authenticated, yes, spelled that right, then we'll do a space and 1:09 we'll say current_user.username. 1:14 And then we'll end our if and do an exclamation mark. 1:20 So, kind of a long line here, but what it'll do is if you're logged in, 1:25 it'll say like, hi, Susan. 1:29 And if you're not logged in, then it will say or it'll say hello rather. 1:31 And if you're not logged in, it'll say hello. 1:35 So nothing too crazy. 1:38 But this current_user.is_authenticated, 1:39 that has Flask checked to see if they're logged in. 1:42 So if they have that cookie hanging out saying that they're logged in. 1:45 So if they're not logged in, we probably want them to be able to log in, right? 1:48 So let's add a menu item or a menu even to let them log in. 1:53 So let's do if current_user.is_authenticated, 1:58 so same thing we did before. 2:02 So if they're authenticated, then let's add a couple of items here. 2:06 We'll do a url_for logout, 2:11 and the class will be icon-power. 2:14 You don't have to put anything and let's give it a title though of log out. 2:18 All right. 2:23 We're not gonna do anything else if they're logged in. 2:25 We're just gonna let them log out. 2:28 But if you wanted to create, let's say, a profile view or something like that, 2:29 an ability for them to change their profile, either they wanna change their 2:34 email address or their password, that's where those link would go. 2:37 If they're not, then let's actually add two things here, 2:40 and we'll do url_for login and class equals icon-power. 2:46 Title equals log in. 2:52 And then let's add a second one, 2:55 url_for a register and let's do icon-profile. 3:00 These are just a couple of icons that one of our designers set up. 3:07 So you don't have a ton of them. 3:10 I think there's really just these two. 3:12 But we can use them and they look nice. 3:14 And then let's end our if, 'kay? 3:18 So if the user is authenticated, if they are logged in, then we let them logout. 3:20 Or rather, we show them the link to logout. 3:26 If they're not logged in, then we show them the link to login and 3:28 the link to register, so they can do one or the other, 'kay. 3:32 And then, flash messages, we need to show flash messages. 3:36 So this, again, is a little bit different from how we did it in the Flask 3:41 basics course because we're using those flash message categories. 3:45 Remember we're using success and error? 3:50 So we have to do this just slightly different. 3:52 So let's look at how we do that. 3:55 So we say with messages equal to get_flashed messages. 3:57 And then normally we just call that method, right? 4:03 But we need to actually come in here and 4:07 say with_categories equals to True, or equal to true. 4:08 So that fetches the categories too. 4:13 So endwith, and that gives us a tuple, 4:16 so we want to say if messages, endif. 4:22 Sorry. So we have a tuple, so 4:28 what we wanna do is we want to say for category cuz the category comes up first. 4:30 And message in messages cuz messages is a big list full of 4:34 tuples where the category comes first and the message comes second. 4:39 Let's end our for. 4:44 And you know what, let's go ahead and let's have all these things end. 4:45 So it's just a little bit easier to see cuz that's really hard to see. 4:48 We wanna make a div with a class of notification. 4:52 And then we wanna print out the category. 4:56 So it'll print out either success or 4:59 error as a new class because we have some styling some of those classes. 5:01 And then we wanna print out not messages. 5:06 We wanna print out the message, okay? 5:07 So, we get our messages with the categories. 5:10 If there are messages, then for each set of category and message 5:15 that we have in messages, we're gonna make this new div that has the message and 5:20 one of the CSS classes is the category that it was assigned. 5:25 'Kay, fairly simple, yeah? 5:30 Now we need to use this layout. 5:34 So let's go change our register.html and our login.html. 5:37 So on register, we want to do extends layout.html and 5:42 we want to do block content. 5:50 [BLANK_AUDIO] 5:55 And if you're like, I bet we're gonna do that in login.html as well, 5:59 you're absolutely right. 6:02 So here we're going to say extends layout.html. 6:05 And then we're gonna say block content and endblock. 6:11 So now, let's go refresh this and let's go to register. 6:18 And hey, it looks a little bit nicer. 6:22 And there's our messages that we had earlier. 6:24 They hadn't been seen because we hadn't refreshed. 6:26 So this all is gonna take us to the home page. 6:30 That's what we're gonna show, stream stuff later. 6:32 But this now looks, okay, it looks exactly the same. 6:35 But you can see [LAUGH] we've got other stuff in. 6:39 And since I'm already logged in, I get Hello kennethlove! 6:41 So that's nice. 6:44 Some simple changes, but wow, did they really impact our app. 6:45 A consistent layout makes the app actually look cohesive and 6:48 our menu knows whether or not the user is logged in so 6:51 we don't show them sign up links if they're already in their account. 6:54 Now that we have it looking great, let's create the model that we need for 6:57 creating posts. 6:59