HTMX + Flask: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: Feature 1: Click-to-edit
Lecture: 'Add video' view methods
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
We saw that we had the HTML working beautifully.
0:02
But when we tried to submit the form,
0:03
it gave us an error that there is no URL at /videos/add/<some category name>
0:08
So let's go over here and add that view method now.
0:13
So remember we are in views videos here.
0:18
You can see up at the top,
0:20
we were previously working on the videos category.
0:22
We're gonna work over here as well.
0:24
Now we're going to POST this back and it's really similar to what we have for
0:28
the category. So I'm just going to copy that. Now,
0:32
we're using blueprints. So you might see @app.get we're not using app, we're using
0:36
blueprints, which allows us to put these code in a much nicer factoring into different
0:41
files and so on. And we don't want to do a get we want to
0:43
do a post. We saw the, was /videos/add/<cat_name>.
0:48
And that category name goes there, and we don't really need a template file here because
0:53
we're gonna do a redirect. Remember we talked at the beginning about the structure,
0:57
we have these view models whose job it is to exchange data with the HTML.
1:04
We don't have one yet for add, let's called it add_post. Was going to say add_video
1:10
but it's already in the video section,
1:11
so add probably is sufficient. What we need to do is come up with a
1:17
AddVideoViewModel, and let's go and see what's happening with like say
1:22
this play one over here.
1:24
Remember viewmodels, videos because we're in the videos views, and we've got these different ones
1:31
here. So they all drive from this ViewModelBase, and then we just give them
1:36
a constructor and then they sort of create the data and this one is going to
1:40
be a little more rich than the other ones as we'll
1:42
see. So let's calle this add_video_viewmodel.py, rename the class,
1:50
get rid of this, perfect. So the arguments that are passed in like this category
1:57
name of a string. We're going to need to pass that over here as well,
2:02
and we'll just put it like this, and we want to save that probably, I will add
2:06
a field, PyCharm will write hat code for us.
2:09
It kind of needs to change his mind about what that means,
2:12
there we go. Let it write that code for us and let's go ahead and
2:16
also import this over here. Now what we do in the view model,
2:22
let's pull up our category template again,
2:24
Is we need to have it exactly in sync with all the data that is being
2:29
passed over to the form, but also is being submitted from the form back to the
2:33
server. So what we need to do is we need to have the fields in
2:37
the view model exactly match all the data that's required or being provided by the form
2:43
so required by the page are being provided back by the form.
2:46
In this case we're just submitting here.
2:48
We're going to do a redirect.
2:50
So we just need those pieces of information there, id,
2:53
title, author and view_count.
2:56
So let's go and make this. I'm gonna put None for a minute because we don't know what
3:03
they are yet, right? Let's also go ahead and give this a type.
3:07
So we're gonna go over here and say this is, we'd like to say a string but
3:10
PyChamrm is saying, you know what? it's set to None.
3:14
It can't be None and be a string at the same time.
3:17
One thing we could do is set it to be empty but if we won't allow
3:20
empty values, that's not ideal.
3:21
So let's actually go over here and say this is an Optional.
3:26
That's the way Python allows us to specify
3:29
it could either be a string or it could be None.
3:31
All right, so we have an id,
3:32
we have a title, author.
3:36
We have a youtube_id, we have a view_count.
3:41
This one is an int. Well,
3:44
this is the data that the form is giving to us.
3:47
But how do we get it?
3:49
Remember, in Flask the way we do this as we go to the request and we
3:53
say did somebody submit a thing called title?
3:56
Did somebody submit a thing called youtube_id?
3:59
So let's have one more function here called restore_from_form.
4:07
Now, if you look at the ViewModelBase here,
4:13
it stores the request, and it also creates this thing called a request_dict,
4:17
which is a little bit of a leaner more all encompassing a way to get the
4:21
data submitted by Flask. So what this is, is it stores the form,
4:26
the cookies, the headers, all those things in one place so
4:29
we can just ask. However did it happen,
4:31
did somebody submit this data? So we'll do like this.
4:37
Put in a temporary short variable just so there's less typing and we'll just say
4:41
self.title. Get the title like that.
4:45
What's the next one? Author, author and so on.
4:52
The last one is kind of interesting because this is going to return a string but
4:56
we want a number so let's do an int and if they don't submit anything, if
5:02
the view_count is not there.
5:04
What's going to come back from this get is a None which will make int crash.
5:07
We can say if there's nothing just return zero and that'll make it a little bit
5:12
safer. Alright, last thing to do,
5:15
let's go and actually call this function vm.restore_from_form().
5:21
And we don't want to have them view the data again,
5:24
we want to have them go somewhere else.
5:25
So we'll say flask.redirect, we want to redirect over to videos/category/ and then we
5:34
want to put the category name.
5:36
So what we're going to have them do is change the data and then go back
5:43
and look at that form. But let's just really quickly put a breakpoint like say
5:47
right here and run this and see what we get.
5:51
We go back, and we try to submit this
5:53
now. Look, look, look at what happened.
5:58
All right. So we got, our category name is Python.
6:01
And we created our view model.
6:02
Let's see what the view model has in store for us.
6:05
Let's go to the debug section here and expand it.
6:08
There we go. Look at that! author
6:10
Devslopes, category Python, no errors.
6:14
The id was not captured. I think I've got that a little bit wrong.
6:18
So title is good, the view_count is good, youtube_id
6:21
not so good.
6:22
Let's see what we missed here.
6:26
Ah yes, so in our view model we don't have a youtube_id,
6:32
we just have id.
6:33
Like this, and it's just id.
6:39
But it looks like it works right?
6:40
Let's just do one more time through to make sure everything worked.
6:43
Re-submit the form, name,
6:47
category, no errors, good, id is
6:49
good and title, view_count, which is an integer.
6:55
You can see the int there.
6:56
Perfect. So we're getting the data from the form, and we're capturing it in this
7:01
view method add_post, and we're verifying that it gets parsed over correctly using our view model, perfect.