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

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