HTMX + Flask: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: Feature 1: Click-to-edit
Lecture: 'Add video' view methods

Learn more about this course
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.