Adding Dynamic Delete Feature to Django Website with HTMX & Bootstrap | Complete Tutorial [8] скачать в хорошем качестве

Adding Dynamic Delete Feature to Django Website with HTMX & Bootstrap | Complete Tutorial [8]

In this video, you'll learn how to implement a dynamic delete functionality in a Django app using HTMX and Bootstrap. We start by setting up a secure delete view with Django’s login required decorator and then create a seamless user experience by dynamically updating the page to reflect changes as lists are removed. You'll also discover how to integrate a delete confirmation modal to prevent accidental deletions and enhance your UI with Bootstrap’s elegant design components. Here's what you'll learn in this tutorial: How to create and secure a delete view in Django Using HTMX to make asynchronous POST requests and update your UI dynamically Integrating Bootstrap modals for a smooth and user-friendly delete confirmation dialogue Best practices for handling CSRF tokens and user authentication in Django Step-by-step code walkthrough, from setting up your Django project to final testing in the browser Whether you're new to Django, HTMX, or Bootstrap, this tutorial offers a practical approach to enhancing your web application while learning modern, interactive web development techniques. Follow along, code with us, and boost your skills with this hands-on guide! ⏱ Chapters: 00:00 - What we'll do ; Add delete functionality with delete confirmation with Django HTMX + Bootstrap 01:03 - Quick overview of where we left off 02:14 - Today's Objective 02:27 - Define Delete List View ( function based view ) 02:47 - add login required decorator 03:09 - get_object_or_404 04:31 - Wrap delete button in form and give it type submit 04:46 - HTMX's Swap Strategy to dynamically update list 05:05 - set hx-post 05:26 - hx-swap = "innerHTML" 05:48 - setting hx-taget to div containing the partial template we will return via our view 06:16 - Add CSRF Token 06:31 - Delete User List from Database if request method is Post, and return the updated user lists within partial template 07:27 - Return HttpResponseForbidden if request is not a post request 08:01 - Map to delete list view ( Create Path to view in urls.py ) 08:51 - NoReverseMatch Error 09:22 - Styling button ( add bootstrap's d-flex ) 09:41 - Check if delete button works ( it works too well a delete confirmation dialogue would be better ) 10:09 - Bootstrap Modals 10:27 - Creating a partial template for confirmation modal 11:15 - Delete list when user confirms through modal 11:44 - Add delete confirmation form to modal 12:52 - Reveal modal on button click - Bootstrap's data-bs-toggle = "modal" & data-bs-target 13:19 - Include _list_delete_modal.html in _user_lists.html 13:54 - test delete button ( check if modal is triggered ) 14:04 - Edit & style modal 15:02 - Add dismiss modal button ( data-bs-dismiss = "modal" ) 15:43 - 🐜 Bug : Modal attached to first item in list 16:11 - 🔧 : Create a modal for each list item ( dynamic id ) 17:20 - Remove Modal's Backdrop and add shadow instead 18:10 - Check if Modal Works as expected ( delete list ) 18:47 - Final Remarks! 🔗Github Repos: To follow from the start: https://github.com/PikoCanFly/Django-... Final Code ( for reference ): https://github.com/PikoCanFly/Django-... Join this channel to get access to perks:    / @pikocanfly   #django #fullstack #htmx #bootstrap5