HTMX + Flask: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: Feature 2: Active search
Lecture: Create the search page skeleton

Login or purchase this course to watch this video and the rest of the course contents.
0:00 Welcome to the source code for chapter 6.
0:02 You can see down here we're in ch6_final_video_collector.
0:04 Just like before, I've created a new folder with a starter and a
0:10 final bit of code, so you can start where we start right now and then also
0:14 have the final version for Chapter 6.
0:17 In this chapter, we're going to add active search along with deep linking, history,
0:22 all sorts of good stuff in this feature.
0:24 This might be the most complicated feature we're doing in this course,
0:27 actually. It's also the first time we're adding a brand new separate page to our
0:32 site. So far, what we've done is we've modified aspects of,
0:36 say, the category, details
0:38 page and so on. So what I want to do is add that new page
0:42 and we're going to do search, more searching videos.
0:44 So I'm gonna go ahead and just put it in here.
0:47 We could possibly justify coming up with a search set of views,
0:52 but I'm just going to add it here because we're only searching one thing, videos. Now
0:56 pretty much everything in our app looks like this.
0:59 So it's easier for us to just do a little copy paste and then change the
1:02 name. So we're gonna do a GET against videos,
1:07 search, and I'll call this search_text like that and let's get rid of this.
1:14 Down here, we're going to do videos,
1:16 not partials. We're gonna just do search, videos/search.
1:21 Seems nice and clean. Change the name to search and then the variable is finally
1:26 we'll get that thing right, search text.
1:29 We also want to have a view model,
1:31 just like we do for all of these. As we'll
1:34 see, this is going to be super handy,
1:36 So we'll say SearchViewModel, it doesn't exist yet,
1:40 so let's jump over to the viewmodels section and do it. Again
1:45 we have a little bit of structure that's nice to work with.
1:48 So let's just go over and copy paste and I'll just call this search_viewmodel,
1:53 not video search because it's in the videos subdirectory there.
1:59 And we're just going to call this SearchViewModel.
2:03 Remember we're passing in search text, and we're gonna store it like this.
2:10 And that's all we need for the moment, We can come back up here and
2:15 let PyCharm do the import statement for us, and this will almost work except
2:21 for there's no template. Let's run it and see how far we've come.
2:24 Over here, we'll go to
2:26 videos/search/indycar like we had before.
2:31 I didn't spell it right, but it doesn't matter because it says the next thing
2:34 you got to do is create a search.html.
2:38 Yes, we do. All right.
2:39 So, final thing to add this skeleton structure of what we're searching for is to
2:44 go over to the templates, videos and then again,
2:48 let's just do a copy paste to make it similar as you'll see,
2:52 do a search and we're extending the main layout page,
2:57 which is great. That's how we get most of our design.
2:59 We got a bunch of stuff going on in here. And this is our main block
3:05 of content. I'll just put <h1> one search page for the moment, and notice if
3:12 we go to that shared layout, that up at the top,
3:16 we have the ability to override a default title.
3:19 So this is a block title,
3:21 Video Collector - HTMX Demo App.
3:24 But most of the pages change what the title is.
3:27 So here we have category. We want Search @ Video Collector or something along
3:34 those lines. All right, so this is our skeleton page.
3:37 Let's run it and see where we are, Refresh, tada!
3:42 Amazing, right? well, not so amazing,
3:45 but somewhat amazing. We got our page working.
3:48 It's a good place to start.
3:50 We've got our view method in the videos
3:53 views, we've got our video, our SearchViewModel and we've got our template
3:58 deriving or extending the main layout page.
4:01 Everything is ready to go and add this new feature to our site now.