Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
We have a model, we have a form. It's time to build a view and template to let people sign up for our app.
New Terms
-
form.validate_on_submit()
- When the form is submitted through POST, make sure the data is valid. - Macro - A custom, executable bit of templating.
-
form.hidden_tag()
- Renders hidden fields inside of a hidden<div>
.
More information about macros.
-
0:00
Okay, we have a form, but we're not using it.
-
0:04
Since we're using Flask-WTF, we have a couple of really nice convenience methods.
-
0:08
Let's write our register view and
-
0:09
explore what all we have available when we use forms.
-
0:13
Okay, after all that work in forms, we want to be able to render this one,
-
0:17
we want to send it to a template.
-
0:18
So let's go over here to our app.py and
-
0:22
we're going to import a couple of more things.
-
0:24
It's gonna get kinda long so I'm gonna put parentheses around this too cuz, you know,
-
0:28
we're gonna be importing a lot of stuff.
-
0:30
So we needed to bring in our render_template cuz we know we're gonna
-
0:33
render a template.
-
0:35
Let's bring in flash cuz we're probably gonna wanna send out some flash messages.
-
0:39
Let's bring in redirect because after the form is submitted correctly, with,
-
0:43
you know, the appropriate values, we probably want to redirect back or
-
0:46
send them to somewhere else.
-
0:48
And then if we're gonna do redirects,
-
0:50
we're gonna need url_for so that we can bring in some stuff.
-
0:55
And we didn't go to a new line yet, but I bet we will later.
-
0:58
Okay, so we've imported our models.
-
1:01
Let's go ahead and import our forms, too.
-
1:03
Again, we're gonna have more than one form, so
-
1:06
we'll just import the whole module.
-
1:08
Let's go add this route.
-
1:11
And it's going to be app.route and let's say register and our methods for
-
1:17
this are going to be get and post, because we want them to be able to load the view,
-
1:23
and that way they'll be able to see the template and they'll see the form.
-
1:27
And then we also want them to be able to post back to the view so
-
1:30
it processes the form.
-
1:32
So, let's say def register, I'm not going to take anything.
-
1:37
And then we're gonna create a form.
-
1:39
And this is going to be forms.registerForm.
-
1:43
And we don't have to send them any information to registerForm.
-
1:47
Flask and Flask-WTF are smart enough that they know like, oh,
-
1:51
some information came in through the post, let's go ahead and send that.
-
1:55
Speaking of that being smart, we're gonna add another line here,
-
2:00
if form.validate on submit.
-
2:02
So what this method does, it belongs to the form, and it detects that they have
-
2:07
valid, or, not validated, sorry, they've submitted the form, it's been posted.
-
2:12
And we run the validation, remember all the validators that we added?
-
2:15
And it comes back as either, everything is good, or things are missing.
-
2:20
So that's all we're gonna deal with here.
-
2:23
So if it comes back and it's valid, then we're gonna flash up a message, and
-
2:27
let's say yay, you registered!
-
2:30
And the something I'm actually gonna add here that we didn't do the last time that
-
2:34
we did flash messages, is I'm gonna add in the message category.
-
2:39
Though the category for this is going to be success.
-
2:43
These will be more important, and more obvious, a little later on,
-
2:46
when we, finish building out all of our HTML and we start showing flash messages.
-
2:51
Okay, so things are good.
-
2:52
We've flashed up this message, and
-
2:54
then we're going to create model.user.create_user.
-
2:57
We're gonna create a user.
-
2:59
Now, how do we get the data out of our form?
-
3:02
So we're gonna say, name, username is equal to form.username.data.
-
3:08
And we're gonna say email is equal to form.email.data.
-
3:13
And password is equal to form.password.data.
-
3:17
Okay? So
-
3:18
we're just pulling out these individual fields.
-
3:21
And then we're going to return a redirect URL for index so
-
3:26
we should probably create an index view here in a minute.
-
3:29
And then regardless of what goes on,
-
3:33
if we don't do the redirect, then we're going to render the template and
-
3:37
we'll render register.html and we'll pass it our form.
-
3:41
All right. So let's talk about templates,
-
3:43
because we need to make a template.
-
3:45
Actually let's go ahead and make, just real quick, at.route, forward slash,
-
3:50
just at home page, index will return hey.
-
3:54
All right.
-
3:54
We'll do a lot more on the index page later, just for
-
3:57
right now though we'll just have it send back some text.
-
4:00
So templates.
-
4:01
We need to make a new folder that's named template.
-
4:05
And then inside there we need to make a new file that is register.html.
-
4:11
So let's think about this.
-
4:13
I don't have a layout.html yet.
-
4:15
I don't wanna bother with making one just yet, so let's just start writing our form.
-
4:20
Method equals post.
-
4:22
And action equals here, which that just redirects back to here.
-
4:28
And I'll give it a class of form, think that's needed in our CSS.
-
4:33
So form has been passed in and we need to render this form in some way.
-
4:38
So, the first thing we need to do, is render this form.hidden tag.
-
4:44
So what this does is it creates a div that has a style attribute so it's hidden.
-
4:49
It, it won't show up in your browser.
-
4:53
And inside of there, is where it puts whatever hidden tags are in your form.
-
4:58
So for instance, we're going to have a CSRF, or C surf tag, that's inserted into
-
5:03
this, to make things nice and safe, so our forms have to be submitted from our site.
-
5:08
That'll get rendered in here.
-
5:09
If we need other forms to be hidden, or fields to be hidden, then,
-
5:14
they would go in here, as well.
-
5:15
We don't have any, but if your, later work does.
-
5:19
Okay. So now, let's say for field in form.
-
5:24
These are our fields.
-
5:27
Div class equals field.
-
5:29
And inside that, if field.errors, so
-
5:34
if there's any errors on the field,
-
5:38
then for error in field.errors,
-
5:43
div class equals notification error.
-
5:48
And then we wanna print out the error.
-
5:50
We gotta end our for, we gotta end our if.
-
5:56
And let's, let's take these two and have those end.
-
5:59
And then we have to do field, and then we want to render
-
6:04
a placeholder inside the field, and we want that to be the field's label,
-
6:08
and then the text that belong to that field's label.
-
6:12
And so, for example, we have our, let me finish this, I'll come back over here.
-
6:17
If we look at forms.py, our username field,
-
6:21
we have this label here of username, so here in register.html
-
6:26
this placeholder is going to be username because that's the text of our label.
You need to sign up for Treehouse in order to download course files.
Sign up