1 00:00:00,973 --> 00:00:04,647 [MUSIC] 2 00:00:04,647 --> 00:00:07,558 So far, [SOUND] we've just been building standalone templates. 3 00:00:07,558 --> 00:00:10,658 Obviously, if this is going to be a cohesive and pleasant to use [SOUND] app, 4 00:00:10,658 --> 00:00:12,294 we need to get some structure in there. 5 00:00:12,294 --> 00:00:16,236 Let's set up our layout template, [SOUND] bringing in some styles from our wonderful 6 00:00:16,236 --> 00:00:19,677 Treehouse designers and make sure our menu only [SOUND] shows the sign up and 7 00:00:19,677 --> 00:00:21,867 sign in links to users that aren't logged in. 8 00:00:21,867 --> 00:00:26,763 So if you have been using a workspace already, you probably wanna go ahead and 9 00:00:26,763 --> 00:00:28,430 grab this new one. 10 00:00:28,430 --> 00:00:29,440 So you'll need to close yours, 11 00:00:29,440 --> 00:00:33,705 open the window again because you wanna get this layout.html. 12 00:00:33,705 --> 00:00:38,441 And there's going to be some styling added in the next one as well, so 13 00:00:38,441 --> 00:00:40,818 you'll want to grab that one too. 14 00:00:40,818 --> 00:00:42,593 So anyway, this is pretty simple. 15 00:00:42,593 --> 00:00:44,281 There's nothing really special here. 16 00:00:44,281 --> 00:00:46,686 We have a, a title block, TwoCans. 17 00:00:46,686 --> 00:00:49,531 You can customize the title if you want as we go on. 18 00:00:49,531 --> 00:00:52,185 But we need to add a few things in here. 19 00:00:52,185 --> 00:00:56,805 So one of the things we need to do is let's actually go ahead and 20 00:00:56,805 --> 00:00:59,320 if the user is logged in, let's say hi to him. 21 00:01:00,830 --> 00:01:04,230 So, let's make an h1 up here and let's say hello. 22 00:01:05,530 --> 00:01:09,888 And then if current_user.is_authenticated, 23 00:01:09,888 --> 00:01:14,720 authenticated, yes, spelled that right, then we'll do a space and 24 00:01:14,720 --> 00:01:20,890 we'll say current_user.username. 25 00:01:20,890 --> 00:01:25,810 And then we'll end our if and do an exclamation mark. 26 00:01:25,810 --> 00:01:29,530 So, kind of a long line here, but what it'll do is if you're logged in, 27 00:01:29,530 --> 00:01:31,920 it'll say like, hi, Susan. 28 00:01:31,920 --> 00:01:35,437 And if you're not logged in, then it will say or it'll say hello rather. 29 00:01:35,437 --> 00:01:38,030 And if you're not logged in, it'll say hello. 30 00:01:38,030 --> 00:01:39,568 So nothing too crazy. 31 00:01:39,568 --> 00:01:42,530 But this current_user.is_authenticated, 32 00:01:42,530 --> 00:01:45,360 that has Flask checked to see if they're logged in. 33 00:01:45,360 --> 00:01:48,690 So if they have that cookie hanging out saying that they're logged in. 34 00:01:48,690 --> 00:01:53,740 So if they're not logged in, we probably want them to be able to log in, right? 35 00:01:53,740 --> 00:01:58,515 So let's add a menu item or a menu even to let them log in. 36 00:01:58,515 --> 00:02:02,445 So let's do if current_user.is_authenticated, 37 00:02:02,445 --> 00:02:04,465 so same thing we did before. 38 00:02:06,005 --> 00:02:11,225 So if they're authenticated, then let's add a couple of items here. 39 00:02:11,225 --> 00:02:14,732 We'll do a url_for logout, 40 00:02:14,732 --> 00:02:18,947 and the class will be icon-power. 41 00:02:18,947 --> 00:02:23,991 You don't have to put anything and let's give it a title though of log out. 42 00:02:23,991 --> 00:02:25,784 All right. 43 00:02:25,784 --> 00:02:28,118 We're not gonna do anything else if they're logged in. 44 00:02:28,118 --> 00:02:29,160 We're just gonna let them log out. 45 00:02:29,160 --> 00:02:34,150 But if you wanted to create, let's say, a profile view or something like that, 46 00:02:34,150 --> 00:02:37,100 an ability for them to change their profile, either they wanna change their 47 00:02:37,100 --> 00:02:40,480 email address or their password, that's where those link would go. 48 00:02:40,480 --> 00:02:46,360 If they're not, then let's actually add two things here, 49 00:02:46,360 --> 00:02:52,249 and we'll do url_for login and class equals icon-power. 50 00:02:52,249 --> 00:02:55,817 Title equals log in. 51 00:02:55,817 --> 00:03:00,342 And then let's add a second one, 52 00:03:00,342 --> 00:03:07,296 url_for a register and let's do icon-profile. 53 00:03:07,296 --> 00:03:10,327 These are just a couple of icons that one of our designers set up. 54 00:03:10,327 --> 00:03:12,750 So you don't have a ton of them. 55 00:03:12,750 --> 00:03:14,810 I think there's really just these two. 56 00:03:14,810 --> 00:03:17,050 But we can use them and they look nice. 57 00:03:18,140 --> 00:03:20,610 And then let's end our if, 'kay? 58 00:03:20,610 --> 00:03:26,180 So if the user is authenticated, if they are logged in, then we let them logout. 59 00:03:26,180 --> 00:03:28,260 Or rather, we show them the link to logout. 60 00:03:28,260 --> 00:03:32,510 If they're not logged in, then we show them the link to login and 61 00:03:32,510 --> 00:03:36,490 the link to register, so they can do one or the other, 'kay. 62 00:03:36,490 --> 00:03:41,260 And then, flash messages, we need to show flash messages. 63 00:03:41,260 --> 00:03:45,570 So this, again, is a little bit different from how we did it in the Flask 64 00:03:45,570 --> 00:03:50,260 basics course because we're using those flash message categories. 65 00:03:50,260 --> 00:03:52,140 Remember we're using success and error? 66 00:03:52,140 --> 00:03:55,030 So we have to do this just slightly different. 67 00:03:55,030 --> 00:03:57,430 So let's look at how we do that. 68 00:03:57,430 --> 00:04:01,997 So we say with messages equal to get_flashed messages. 69 00:04:03,010 --> 00:04:07,040 And then normally we just call that method, right? 70 00:04:07,040 --> 00:04:08,710 But we need to actually come in here and 71 00:04:08,710 --> 00:04:13,930 say with_categories equals to True, or equal to true. 72 00:04:13,930 --> 00:04:16,300 So that fetches the categories too. 73 00:04:16,300 --> 00:04:22,587 So endwith, and that gives us a tuple, 74 00:04:22,587 --> 00:04:28,700 so we want to say if messages, endif. 75 00:04:28,700 --> 00:04:30,160 Sorry. So we have a tuple, so 76 00:04:30,160 --> 00:04:34,797 what we wanna do is we want to say for category cuz the category comes up first. 77 00:04:34,797 --> 00:04:39,692 And message in messages cuz messages is a big list full of 78 00:04:39,692 --> 00:04:43,070 tuples where the category comes first and the message comes second. 79 00:04:44,350 --> 00:04:45,810 Let's end our for. 80 00:04:45,810 --> 00:04:48,900 And you know what, let's go ahead and let's have all these things end. 81 00:04:48,900 --> 00:04:52,469 So it's just a little bit easier to see cuz that's really hard to see. 82 00:04:52,469 --> 00:04:56,568 We wanna make a div with a class of notification. 83 00:04:56,568 --> 00:04:58,280 And then we wanna print out the category. 84 00:04:59,780 --> 00:05:01,330 So it'll print out either success or 85 00:05:01,330 --> 00:05:06,190 error as a new class because we have some styling some of those classes. 86 00:05:06,190 --> 00:05:07,720 And then we wanna print out not messages. 87 00:05:07,720 --> 00:05:10,670 We wanna print out the message, okay? 88 00:05:10,670 --> 00:05:14,470 So, we get our messages with the categories. 89 00:05:15,470 --> 00:05:20,580 If there are messages, then for each set of category and message 90 00:05:20,580 --> 00:05:25,430 that we have in messages, we're gonna make this new div that has the message and 91 00:05:25,430 --> 00:05:30,302 one of the CSS classes is the category that it was assigned. 92 00:05:30,302 --> 00:05:34,230 'Kay, fairly simple, yeah? 93 00:05:34,230 --> 00:05:37,610 Now we need to use this layout. 94 00:05:37,610 --> 00:05:42,886 So let's go change our register.html and our login.html. 95 00:05:42,886 --> 00:05:50,925 So on register, we want to do extends layout.html and 96 00:05:50,925 --> 00:05:55,134 we want to do block content. 97 00:05:55,134 --> 00:05:59,532 [BLANK_AUDIO] 98 00:05:59,532 --> 00:06:02,780 And if you're like, I bet we're gonna do that in login.html as well, 99 00:06:02,780 --> 00:06:04,090 you're absolutely right. 100 00:06:05,480 --> 00:06:10,089 So here we're going to say extends layout.html. 101 00:06:11,440 --> 00:06:18,130 And then we're gonna say block content and endblock. 102 00:06:18,130 --> 00:06:21,810 So now, let's go refresh this and let's go to register. 103 00:06:22,820 --> 00:06:24,960 And hey, it looks a little bit nicer. 104 00:06:24,960 --> 00:06:26,990 And there's our messages that we had earlier. 105 00:06:26,990 --> 00:06:29,850 They hadn't been seen because we hadn't refreshed. 106 00:06:30,870 --> 00:06:32,780 So this all is gonna take us to the home page. 107 00:06:32,780 --> 00:06:35,920 That's what we're gonna show, stream stuff later. 108 00:06:35,920 --> 00:06:39,910 But this now looks, okay, it looks exactly the same. 109 00:06:39,910 --> 00:06:41,400 But you can see [LAUGH] we've got other stuff in. 110 00:06:41,400 --> 00:06:44,250 And since I'm already logged in, I get Hello kennethlove! 111 00:06:44,250 --> 00:06:45,160 So that's nice. 112 00:06:45,160 --> 00:06:48,980 Some simple changes, but wow, did they really impact our app. 113 00:06:48,980 --> 00:06:51,670 A consistent layout makes the app actually look cohesive and 114 00:06:51,670 --> 00:06:54,210 our menu knows whether or not the user is logged in so 115 00:06:54,210 --> 00:06:57,290 we don't show them sign up links if they're already in their account. 116 00:06:57,290 --> 00:06:59,980 Now that we have it looking great, let's create the model that we need for 117 00:06:59,980 --> 00:07:00,750 creating posts.