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