HTMX + Flask: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: Feature 1: Click-to-edit
Lecture: Creating the new video in the database
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.