Python Django Fullstack Development Tutorial: ORM + Dynamic Updates with HTMX & Bootstrap [9]

In this video, you'll learn how to empower your Django app with interactive features that let users add movies to their personalized lists in real time. We cover everything you need to know to make this process seamless:

Dynamic Integration:
Learn how to pass user movie lists from the database into your movie detail page, so a dropdown menu displays all the lists a user has created.

Asynchronous Form Handling with HTMX:
See how to set up an HTMX-enabled form that sends a POST request to add a movie to a selected list without reloading the page.

Real-Time UI Updates:
Discover how to use HTMX's hx-post, hx-swap, and hx-target attributes to dynamically update the page with the new movie list data.

Immediate User Feedback:
Integrate Bootstrap toasts to provide clear, real-time notifications when a movie is successfully added or if it already exists in the list.

Django ORM and Conditional Rendering:
Utilize Django’s ORM to fetch and pass user-specific data, and employ template logic to conditionally render elements based on the user's state.

By the end of this video, you'll have the skills to create a fully interactive experience where users can easily manage their movie collections without any disruptive page reloads.

Code on Github :

To follow along, clone this branch:
https://github.com/PikoCanFly/Django-...

What we endup with today:
https://github.com/PikoCanFly/Django-...

⏲ Chapters:

00:00 - What we'll do and learn and our stack (the frameworks we are using )

00:58 - Project overview ( what we are working with )

01:52 - Movie Detail Page and the changes we want to make / features we want to add

02:55 - Check if user is logged in Django Templates

03:11 - Check if user has lists and create a for loop ( django templates )

04:04 - {% else %} no lists --- let the user know , and redirect to profile page ( user hub )

04:57 - Views Context Dictionary ( Pass user lists )

06:30 - Display lists in dropdown ( bootstrap5 dropdown )

08:00 - Define add to list view ( views.py )

08:55 - Get user list ( get_object_or_404 )

09:26 - Login Required Decorator

09:30 - Check if movie was already added, pass message from view to template to be rendered in a Bootstrap5 Modal

11:53 - If movie is not already in list ; create movie item ( save it to database )

12:27 - Write user feedback message ( will later be passed to modal )

12:42- Create Partial Template for toast notifications

13:03 - Bootstrap5 toasts

13:28 - Dynamically render message in Toast and change the color of the toast based on message status

14:49 - Triggering Bootstrap Toasts

15:47 - Map to Add to list view ( dynamic route in urls.py )

16:51 - Make Add to list button work

17:45 - Using htmx's hx-post and passing params

18:43 - hx-trigger ( trigger post request on click )

19:06 - hx-target (Render Toast at the bottom corner of the page)

19:43 - hx-swap before end ( beforeend )

20:09 - CSRF Token

20:27 - Checking if modal works

21:05 - Fix position of the Bootstrap5 toast

21:48 - Toast Test

22:45 - Final Remarks










Join this channel to get access to perks:
   / @pikocanfly  

#django #htmx #boostrap #fullstack