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