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.