HTMX + Flask: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: Feature 1: Click-to-edit
Lecture: Adding the HTML for the add video form
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
In this section, we're going to look at adding that HTML form.
0:03
But before we do, we've got to sync up with the GitHub repository real quick.
0:07
So if you look over here,
0:08
we're in our GitHub repository, and we have code, and now we have a new
0:13
section, ch4_app because guess what?
0:15
we're in chapter 4. And notice over here,
0:18
there's actually two folders. ch4_starter_video_collector
0:20
and ch4_final_video_collector.
0:24
These are identical at the moment,
0:26
but I want to give you exactly what we're starting with, here. And then, the code
0:30
we write during this video, this one. Obviously they're the same at the beginning,
0:35
but by the time we get to the end,
0:36
I'll have edited this version a lot.
0:38
So if you want the final version,
0:39
go to the one that says final.
0:40
If you want to start out and follow along,
0:43
Be sure to make a copy of that one. So over here,
0:47
let's open up our Chapter 4 code.
0:50
Now, remember the structure. We want to work with the videos.
0:56
Specifically, the category section where we're passing in the category name.
1:00
So videos/category, our example we saw was /apple here and that means over
1:06
in the template, we're in the videos module,
1:09
so there's a videos folder and then look, there it is, category.
1:13
This is where we're working. This looks like an error, but it's really just the
1:16
Jinja stuff not being properly understood by PyCharm's checking.
1:22
Don't worry about that. So down here at the, this section here,
1:27
let's close that up. This section is where all the videos are being listed.
1:32
And what we want to do is add another section,
1:35
another responsive section using bootstrap where our form is going to go.
1:39
So let's come down here, we'll have a div, and it's going to be a container. In
1:43
PyCharm, you can use this zen coding where you say like the CSS name
1:48
so dot container would be a class and in here we'll have a div.row,
1:53
if we hit tab, it expands like that.
1:56
So you may see me do that throughout the course and in here we want a
2:00
div.col-md-4 and we want 3 of those.
2:07
So in this one is where things are going to get interesting.
2:09
These are just really kind of padding on the outside.
2:11
So we're gonna put, and here's where we're gonna put our form. Now, before we move
2:16
on, I'm sure you've noticed it.
2:17
But let me just emphasize it right here.
2:20
There's already CSS, there's already a style,
2:23
as you can tell, here's the page that we're actually editing right now.
2:27
There's a lot going on in terms of how those pages are laid out.
2:30
There is not pure HTML, is it?
2:32
Let me add just a couple of CSS classes that are going to apply the design
2:36
that we already have in place.
2:39
We have an ad-video class in the category container and then in row
2:46
a click-to-add. Obviously this is not the order,
2:49
you would do it, you would write the HTML, then style it.
2:52
But really this is not a design course.
2:54
So let's just keep it moving, right? Now,
2:56
the next thing we gotta do is just write some standard form stuff.
3:00
So let's first of all set the action on our form here.
3:03
It's going to be /videos and we don't yet have this action or view method over
3:07
here. We've got, remember, category and play.
3:13
We're going to add another one called `add`. Where we're going to add it?
3:16
We're going to add it to the category,
3:17
so we need to pass the category information back as part of the URL.
3:21
So we'll come over here, we have category,
3:25
look at our, look up at the top,
3:27
looks a little funky. There's a class or variable called category and then the text
3:32
that shows what it is. Right?
3:34
So for example, EVs or Javascript or Racing,
3:40
That's also the category. So variable, field.
3:44
What we need to do down here is we say we're going to go category.category.
3:49
Let's set the method of the form to be POST.
3:54
And in here I'm going to write just a bunch of inputs and zoom ahead.
3:58
So you don't have to watch me type them all. I'll do one, and then we'll carry
4:00
out. So we're gonna have an input of type text.
4:02
That's good, and it's gonna have a class of form-control.
4:07
This is just a bootstrap thing to make it look a little bit better.
4:10
We're going to set a name.
4:11
That's super important because this is basically the name of the value,
4:16
the key that we look up in Flask.
4:19
We'll add a placeholder. This is just helpful text.
4:24
So this is gonna be the YouTube ID
4:26
that we need to save.
4:28
We're looking over here when we play these,
4:31
all these videos here, for example,
4:33
these are actually just specifying the Youtube ID,
4:36
like that. And then finally we're gonna say this field is required.
4:40
We can probably put that on one line,
4:42
right? let's do a bunch more.
4:50
That's all the data that we have to pass in.
4:52
And now let's just add a button, and we'll give it a class of btn and
4:57
btn-danger, this is going to create it. And it'll just be called Create, and let's say
5:02
the type is "submit" so it will submit the form.
5:05
Perfect. So let's see what we've created. Almost there,
5:14
this is looking pretty good. We've got our YouTube section.
5:17
You can see that it's required our YouTube ID,
5:19
our title, our author and our view count,
5:21
which is a number. I did Miss one CSS style here.
5:25
Let's set some classes on this as well.
5:28
Can be a video-form, it's gonna be a fade-me-in,
5:33
fade-me-out. Here we go.
5:39
Let's have a look, much better. Now
5:41
it looks nicely formatted, doesn't it?
5:43
So here's our form. This is pretty decent,
5:46
you know. It's got its validation like I said, things that it requires, it's got
5:50
its little placeholders and the ability to POST it back
5:54
once we put something in here. Let's go and find a Python video we can use.
5:58
How about this? Stop Watching Coding Tutorials.
6:04
Let's say we want to add that one over to our Python section and come down
6:09
here, and they'll be the YouTube, no
6:10
that's the title, gotta get the YouTube ID.
6:12
Author, Devslopes I guess, and the view count let's say it's 24
6:22
views. Oh sadly it was not POSTed back.
6:27
It didn't work, did it? We're still missing the server side bits, but I think
6:31
our form is pretty much ready to go, isn't it?