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.