HTMX + Django: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: Feature 2: Active search
Lecture: Creating the search page template
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
I'm going to need a new page for searching. Let's start by creating the template.
0:05
Nothing too fancy here. A title, an input, and an include for something I haven't written yet.
0:19
This include is for the results. I've done it this way in anticipation of the fact that I'll
0:26
be wanting to load these results dynamically using htmx. Let's create the partial for the results
0:33
right now. A lot of this is similar to the category or feed pages. In fact, a better
0:44
developer would put these little bits into a common file and reuse them through includes.
0:49
If you happen to come across a better developer, send them my way. I've got a whole to-do list they could help me with.
0:58
The first chunk here displays the number of videos in the results.
1:02
I've wrapped it in an if clause so that zero results doesn't display when the page first loads. The second chunk is a for loop over the video results.
1:16
Each row displaying the video's thumbnail, and a title and an author, both of which being clickable, taking you to the player.
1:30
If you haven't come across the Humanize library before, it ships with Django and has some tags and filters that make numbers more readable.
1:38
I'm using the int comma filter, which adds thousands separators to an integer, which in North America would be commas,
1:46
but the library is location aware and will use periods as is appropriate. This particular filter is being applied to the view count of the video.
1:57
One last bit of HTML to change. It'd be good to have a link to our search page. So I'll open up base HTML and add a link in the nav bar.
2:06
Let me just scroll down to the nav bar here. And the code I've pasted does a URL route lookup for the view I'll be writing in a
2:24
second. It also uses Font Awesome to show a little magnifying glass icon. Speaking of that view, let's go write it.