HTMX + Flask: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: Feature 1: Click-to-edit
Lecture: Creating the new video in the database

Learn more about this course
Login or purchase this course to watch this video and the rest of the course contents.
0:00 Well we got the data over to the server,
0:01 we got the form, but we haven't added the video yet.
0:04 All we did, we'd run this.
0:08 What we did is when you submit this data it just reads it, throws it away
0:14 and then it goes back over here.
0:16 What we would like is to have another video that goes right there isn't it?
0:21 Let's see if we can get some memory on these things.
0:24 A beautiful, beautiful. Here we go.
0:27 It's got five or six views.
0:29 Perfect. So now, when we submit this form we want to actually put it in
0:35 the database. So when it redirects here, it reloads that from the database which will
0:39 have the new video on it.
0:42 So how do we do that?
0:43 Well recall another section. Another bit of organization in the course here is this services
0:49 and we don't have a whole lot going on here.
0:51 So it's pretty straightforward but this services thing,
0:55 its job is all about managing the data, so we don't have to think about it
0:59 if we want to switch from one kind of data format to another,
1:03 we could easily do that by just rewriting all_videos and all_categories and so on.
1:10 One of them though, check that out right there is really interesting, add_video.
1:14 So all we need to do is go to this video_service and call add_video
1:18 and pass in this data like the category name, youtube_id,
1:21 title and so on.
1:24 And guess what? again this is exactly the data that both our form and the URL
1:29 together combined have been capturing,
1:33 you can go over here and just type video vs,
1:35 and if we hit Ctrl + Tab a couple of times PyCharm will say oh
1:39 you want me to import this and use that one?
1:41 Yes please. We want add_video
1:46 And what does it take? It takes a category name which were passing in.
1:50 Right? see the parameter at the top and then the other ones that it needs
1:54 come from this restore_from_form in our view model.
1:58 So we have the id,
1:59 we're looking for the title, the author.
2:02 and vm.view_count. We don't need our comment or TODO because this hopefully is
2:09 doing it. Let's give it a try, see how it works.
2:12 So I have not pressed submit yet over here.
2:16 What we hope to see is that it's going to create the video in the database
2:20 and then stash it right there.
2:21 Let's see, moment of truth. Of course, there it is.
2:26 Of course. But as we click around we can come over here go back to
2:30 Python, still there, right? We put in the database and go play it.
2:36 There's that guy again. Play this, fun,
2:39 right? Go watch this Python Bytes one, so on. That was pretty awesome,
2:44 right? We were able to create this form,
2:47 create the code on the server that will capture it.
2:51 Create the view model to make it clean, add it to the database.
2:55 Do a redirect, we've got everything created. Now,
2:58 everything we've done so far has been only Flask code.
3:03 There's zero htmx involved in this.
3:07 But why didn't I go through all the trouble?
3:08 I could have just written this and thrown in the view model and done the HTML
3:11 But I really want you to appreciate this is what it takes to build it
3:15 in Flask and here's how it's different to how we build it in htmx.
3:18 So what we're going to do now is we're going to go and change
3:22 how this works, turns out most of what we've already done would be required anyway.
3:26 So we're going to change how this works to make it much nicer as we've
3:30 wanted to from the beginning with htmx.
3:32 But we've got it working in Flask, for sure.