HTMX + Django: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: Surveying the non-JS-enabled Django app
Lecture: View for the home page
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Now that you've seen the structure, let's go over the core components. The main components, the content components, the stuff and things.
0:09
There are four pages to the base application. The shot in the top right there is the homepage, which you saw before, with its five categories.
0:18
You'll recall that when you visit a URL that is owned by Django, it looks the URL up in its route structure, stored in urls.py.
0:26
And then if it finds the URL, it calls the corresponding view function. The code here is that corresponding view function for the home page.
0:36
Each video category is an object model, so what this view does is gets all the category models from the database and renders them using home.html.
0:45
The only slightly tricky thing here is the use of more iter tools.
0:52
If you're not familiar with this, it's a third-party package that has iter tools like
0:56
functions in it. Here I'm using the chunked function which takes an iterable and breaks
1:01
it up into groups. I'm grouping the categories into chunks that are 3-wide and doing so so I can
1:07
display them in a row purely for presentation reasons. If you happen to be using Python 3.12,
1:14
you can use the new batched call inside of itertools instead. Django's render shortcut
1:21
loads a template, takes a data context, renders the template, then returns the result to the
1:26
framework. The call to render here uses home.html as its template and passes in context. The template
1:34
file has HTML and tags which loop over the rows with the first row containing the Apple,
1:39
Eevee, and JavaScript categories, and then the second row the remaining two, Python and Racing.
1:47
The template engine processes all this stuff and returns the result to Django. Django then
1:52
returns it to your browser, which makes the pretty picture you see in the top right.