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