In this video, you’ll learn how to build the backend and user interface for creating, managing, and interacting with custom movie lists. In this video, we cover:
🔹 Custom Models (models.py)
Build a UserList model to let users create multiple movie lists and a ListItem model to store individual movies.
🔹 Setting Up Relationships
Use ForeignKey and on_delete=models.CASCADE to establish one-to-many relationships between user lists and list items.
Ensure data integrity when a user or list is deleted.
🔹 Admin Integration
Register the new models in Django’s admin panel for easy management.
Use Django’s TabularInline to manage list items directly from the admin interface.
🔹 Dynamic Forms with HTMX
Create forms using htmx attributes (hx-get, hx-post, hx-target) to add movies to lists without reloading the page.
Handle form validation and display errors dynamically.
🔹 Conditional Rendering & Access Control
Use Django template tags to conditionally display edit and delete options only to list owners.
Protect routes with @login_required to restrict access to authenticated users.
and more...
🔗 Github Links:
Starting Code ( if you would like to code along ):
https://github.com/PikoCanFly/Django-and-HTMX-Course-Series-Movie-Spot/tree/part-6
Final Code ( for your reference ):
https://github.com/PikoCanFly/Django-and-HTMX-Course-Series-Movie-Spot/tree/part-7
⏱ Chapters:
00:00 - Objective the functionality we'll add to our Django Website
00:16 - Why will use HTMX in this project
00:31 - Other things we will learn - How to add protected routes in Django Website to keep non authenticated users out
00:55 - What we are working with
01:14 - Bootstrap and HTMX
01:23 - What are Django Models | models.py
01:49 - Foreign Key Relationships (Defining UserList Model)
02:55 - Verbose Name + on_delete = models.CASCADE
03:11 - Character Field + Max Length
03:30 - Date Field ; automatically save creation date ( auto_now_add=True )
03:47 - Creating List Item model ;Many to One Relationship with UserList Model
05:43 - String Method in Django Models `__str__`
06:52 - Update Database : Make migrations and Run Migrations
07:52 - Register Models in Admin Site ( admin.py )
10:33 - django Admin's Tabular Inline - Adding List Items to User Lists Inlines
11:45 - Adding a new none Nullable Field to Django Model
14:19 - Create a place for users to browse their list ( User's Hub / Profile ) - Define Profile View
15:04 - Make it so that unauthenticated users can't get to profile page ( @login_required ) - Login Required Decorator
16:46 - Profile Page Template ( profile.html )
17:12 - Map to Profile View
17:50 - check if route is indeed protected and unauthenticated users get redirected
18:18 - Get a hold of user lists and pass them to template ( add to context dictionary )
18:48 - Loop through User Lists in profile.html
19:27 - Capitalize Username ( Django's capfirst Template Filter )
20:31 - Create Add List Button
20:46 - Create List Form ( forms.py )
21:22 - Subclass ModelForm class and link Form to Model with class Meta
22:06 - Make Form Appear Dynamically on Button Click with HTMX
22:41 - Make get request on button click with htmx ( hx-get )
23:11 - swap inner contents of div ( hx-swap and hx-target )
23:48 - Define Create List View & pass in form
24:20 - Create a partial template for Create List form
25:39 - Create Path to Create Form View ( urls.py )
26:15 - Testing our Add to List Button
26:30 - Add type submit button to Create List Form
27:13 - Have the form make a post request create list view, and dynamically update the list ( why use htmx : hx-post )
28:03 - Create User Lists Partial Template and take utilize htmx's swap strategy to dynamically update content
29:10 - Django's include tag
29:54 - Add hx-target and hx-swap htmx attributes to create list form
31:21 - Project against CSRF attacks ( add CSRF Token to Post Requests )
30:30 - In views.py get users input, check if form is Valid, and save list to Database assigned to the logged in user
31:48 - Display Updated User Lists
32:40 - If form is invalid - return the form again with error ( status = 400 )
33:01 - Testing our form
33:52 - Finally discovering that Prettier ( my html formatter VSC extension ) messed up my Django template
34:01 - Add Bootstrap Styling to our Page ( styling the user lists list )
35:12 - Add Delete List Button and style it with Bootstrap
35:43- styling form with Bootstrap
37:11 - Dynamically Dismiss the form on Submit
38:28 - If user is authenticated display link to profile page in navbar
40:42 - Test if link works
41:00 - Final Remarks
Join this channel to get access to perks:
https://www.youtube.com/channel/UC8NoIbiu78iGMnh_xezgx8A/join
#django #FullStack #HTMX