This course will be retired on August 2, 2021.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Our app has enough going on now that we should add in some basic layout and styling.
Alert!
In this video and the others in this course, you'll see me using {{ current_user.is_authenticated() }}. At the time of filming, this was the correct way to use the is_authenticated() method on the UserMixin from flask-login. BUT, as is often the case in open source, things have changed. You'll now want to always use it as a property instead. So, use {{ current_user.is_authenticated }} instead. No parentheses!
New terms
-
current_user- Global object in templates that represents the current user. -
is_authenticated- Property oncurrent_userthat returns whether the user is authenticated or not. -
get_flashed_messages(with_categories=True)- Gets flashed messages with their categories.
[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
You need to sign up for Treehouse in order to download course files.
Sign up