Bummer! That Track couldn't be located. Perhaps one of the Tracks below is what you're looking for?
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed A Social Network with Flask!
You have completed A Social Network with Flask!
Preview
Using code-based forms to create HTML forms and also provide data validation gives us two powerful tools for building our web application.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
In Flask and in Django, people often get
the wrong idea about forms.
0:00
They hear the word form, and immediately
think about HTML forms.
0:04
They think that forms are all about
display.
0:07
And really that makes forms very limited.
0:10
Forms are about validation.
0:12
Making sure that your data matches a
certain pattern.
0:14
The de facto form library for Flask is
Flask-WTF,
0:17
and it builds on top of an older package
named WTForms, and
0:20
we'll actually end up with both of them
installed.
0:24
You'll install this with pip install
flask-wtf.
0:27
This package also provides us with CSRF,
or cross-site request forgery, protection.
0:31
What's cross-site request forgery?
0:37
Well, imagine you've logged in to your
bank site and
0:39
it keeps you logged in through a cookie.
0:41
Now, imagine that some horrible person out
there sends you an image in an HTML page.
0:43
But instead of an image URL, the URL goes
to some send me $1,000 page on your bank.
0:46
Without CSRF your bank trusts that you
actually made that request, and
0:52
goes ahead and sends them the 1,000 bucks.
0:55
CSRF includes a custom one time code with
each submission.
0:58
And, if the form doesn't have that code,
or
1:02
doesn't have the right one, the request is
ignored.
1:04
Okay, let's make our registration form.
1:07
All right, so if we're gonna forms,
1:10
our app.py, I can already tell it's gonna
get pretty crowded.
1:11
So, we probably don't wanna put them in
there.
1:15
And our models.py should really just be
models.
1:17
So let's add another new file.
1:19
That we will call forms.py.
1:21
Very creative, I know.
1:25
This is where we're gonna build the forms.
1:26
Now, our form that we're gonna build, I
wanna warn you.
1:27
There's a lot here.
1:31
So we're gonna do a lot of stuff.
1:32
So here we go.
1:34
Okay.
1:35
From flask_wtf import Form.
1:36
And what's kinda weird is that flask_wtf
doesn't use the flask.ext thing.
1:41
I really wish it did, but it doesn't.
1:45
And then we're gonna say from models
import User.
1:47
And let's start building our class.
1:51
So we'll make a RegisterForm.
1:56
You can call it registration form if you
wanted.
1:57
And it's going to be of the class form.
2:00
Form is the parent class.
2:02
So Username equals StringField.
2:04
And then this first argument that we give
here is the label.
2:09
So if you think about forms as they show
up on HTML, there's a label, right?
2:13
So we're gonna put the label of Username.
2:20
If we think about our Username field,
there's some things that have to be valid.
2:23
For it to be a real username, right?
2:27
So, there has to be data.
2:29
We probably want it to match a certain
pattern.
2:31
And we should probably make sure that it's
not already in the database.
2:33
Though, these requirements here, we call
these validators.
2:37
So we actually have an argument here,
called validators.
2:41
And we can put in validators.
2:45
So, I guess that we want there to be data,
right?
2:47
So DataRequired is one of the validators.
2:51
And then, the others we kinda have to
create our self.
2:55
Well, the regular expression we don't.
2:58
So, we want to match our patterns, so
we're gonna use Regexp,
2:59
which is a regular expression, regular
expression pattern.
3:03
So, what are we gonna give it.
3:07
Well, we have to give it a pattern.
3:09
What would our pattern be?
3:10
Well, we want it to start, and we only
want a through z lower case,
3:13
A through Z upper case, 0 through 9, and
then underscore.
3:18
And we want that to be as many of those
as, as they want, at least one, and
3:23
then we want that to end.
3:27
Why didn't I just use /w with a plus sign?
3:29
Since we're gonna be showing this in the
URL,
3:33
sometimes unit code doesn't play nicely
with the URL.
3:36
So I figure it's safer just to restrict
them to using ASCII than it is to
3:39
worry about something looking weird, or
not actually loading, or, or whatever.
3:43
If you wanna go with Unicode or
3:47
you wanna do some other requirement, then
that's fine, go for it.
3:49
But this is the one that I wanna do.
3:53
Okay.
So that's our pattern.
3:55
And I'm gonna pass in a message.
3:57
So, my message is going to be,
3:59
Username should be one word, letters,
4:02
numbers, and underscores only.
4:07
And look at that, I'm way out on column
95, so let's do.
4:11
I'm gonna make sure I can break this.
4:16
I'm gonna put a parenthesis here.
4:18
And I'll close the quote here.
4:20
Open a new quote.
4:22
Close that parenthesis.
4:24
This is a really handy way of not having
to like, invalidate a line break.
4:25
Just a little, quick little tip here.
4:29
Okay, and then that closes our Regexp
thing.
4:32
Before we forget, let's go up here and
actually import those.
4:37
So, from wtforms import StringField,
4:40
because it's StringField that we're using.
4:43
And then from wtforms.validators
4:48
import DataRequired, and Regexp.
4:54
So far those are the only two we need.
4:59
All right.
5:01
As I said, we also wanted to make sure
that name did not already exist.
5:02
Right?
5:06
So we're gonna write our own validator
that we're gonna use here.
5:06
And we're gonna call this name_exists.
5:10
Then we close our list.
5:14
And we close our StringField.
5:16
So let's go right name_exists.
5:17
So here we go def name_exists, and this
takes two arguments,
5:20
it takes the form, that it's running on,
so in this case, register form,
5:24
and it takes the field that it's running
on, in this case username.
5:29
And we wanna do if User.select .where
User.name,
5:33
oops sorry we called it username, is equal
to field.data.exists().
5:39
So that just returns a Boolean of either
true or false.
5:47
This record's here or this record's not.
5:49
So, if that comes back as true, then we
want to raise ValidationError
5:51
of User with that name already exists.
5:57
But look, we imported something else and
we need to, or we're using something else,
6:03
we need to import that.
6:07
And we need to import ValidationError.
6:08
We've done a lot and we've only created
one field.
6:12
We need another blank line here too.
6:15
There we go.
6:17
Okay, so there's our username field.
6:18
Well, what comes next?
6:21
Well, in the register, we ask for a
username, we ask for an email address, and
6:22
we ask for a password twice.
6:26
So let's figure out how to do the email.
6:28
Email, and this is a StringField.
6:31
And we're gonna say Email, right?
6:36
Now what validators does email have?
6:40
It's got a few.
6:44
So the first one that it has, is that data
is required.
6:45
Something has to be there.
6:50
Second one is email.
6:52
It has to be email.
6:54
And then lastly, we're gonna make another
function named email_exists.
6:56
So let's go do those two.
7:01
So, first of all we need to import email.
7:03
And you know what?
7:08
That's 76 characters, I bet we're gonna
have to import something else, so
7:09
let's put a parenthesis there and
7:14
then that way we can import some stuff on
the next line too.
7:16
So name exists is already there, so let's
add def email_exists and
7:19
again, form, field, you know what?
7:25
Let's take this whole thing.
7:29
And paste it, because these two are gonna
be almost identical, except for
7:32
you want this to be email.
7:36
And you want this to be email.
7:37
So, same idea on these two, name exists,
email exists, except for
7:42
what they point to.
7:46
All right, so there's that one.
7:48
And let's add in password.
7:51
This is gonna be a password field.
7:52
Oh, new import.
7:55
And we'll say Password.
7:56
And it's gonna have some validators too.
7:58
Validators are gonna be DataRequired.
8:02
Cuz they have to give us a password.
8:05
Link and we'll say it has to be at least
two characters long for the password.
8:08
I would really say you make this like
seven or eight or something, but
8:12
it has to be at least two.
8:16
And then, we're gonna do a new one here.
8:17
EqualTo.
And
8:20
we're gonna say it's gonna be EqualTo
password2, whatever that is.
8:21
And then the message if it doesn't match
is gonna be, Passwords must match.
8:25
Okay.
8:32
Close our validators, close our password
field.
8:33
And let's actually go ahead and write
password2 before we go add our import.
8:35
So password2, hey there it is, is also a
PasswordField.
8:39
And it will say Confirm Password.
8:45
And really we could leave this one
completely alone, but
8:50
I do wanna add one validator to this of
DataRequired.
8:54
Just to make sure that they fill in some
data on that.
9:00
So we need to import PasswordField from
wtforms.
9:05
And we need to import Length and EqualTo
from our validator.
9:09
So StringField PasswordField.
9:15
And then here, we're gonna say Length and
EqualTo.
9:18
And that is our form.
9:23
That is a long, long form.
9:26
Wow!
9:29
There's a lot to building a form,
9:29
at least one that does all the stuff that
we want it to do.
9:31
Knowing how to customize validation will
go a long way when you start building your
9:34
own forms, though.
9:38
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up