Backend Development
Python Tutorial
Creating a To-Do app with Django and HTMX - Part Creating the frontend and adding HTMX
Creating a To-Do app with Django and HTMX - Part Creating the frontend and adding HTMX
Jan 06, 2025 am 12:00 AM
Welcome to part 3 of our series! In this series of articles, I am documenting my own learning of HTMX, using Django for the backend.
If you just arrived in the series you may want to check parts one and two first.
Creating the templates and views
We will start by creating a base template, and an index template that points to an index view, that will list the Todos we have in the database. We will use DaisyUI which is an extension of Tailwind CSS, to make the Todos decent-looking.
This is how the page to look like once the views are set, and before we add HTMX:
Adding the views and URLs
First we need to update the urls.py file in the root of the project, to include the urls that we will define in our "core" app:
# todomx/urls.py
from django.contrib import admin
from django.urls import include, path # <-- NEW
urlpatterns = [
path("admin/", admin.site.urls),
path("", include("core.urls")), # <-- NEW
]
Then, we define the new URLs for the app, placing adding new file core/urls.py:
# core/urls.py
from django.urls import path
from . import views
urlpatterns = [
path("", views.index, name="index"),
path("tasks/", views.tasks, name="tasks"),
]
Now we can create the corresponding views, in core/views.py
# core/views.py
from django.shortcuts import redirect, render
from .models import UserProfile, Todo
from django.contrib.auth.decorators import login_required
def index(request):
return redirect("tasks/")
def get_user_todos(user: UserProfile) -> list[Todo]:
return user.todos.all().order_by("created_at")
@login_required
def tasks(request):
context = {
"todos": get_user_todos(request.user),
"fullname": request.user.get_full_name() or request.user.username,
}
return render(request, "tasks.html", context)
A few interesting things here: our index route (home page) will just redirect to the tasks URL and view. This will give us the freedom to implement some sort of landing page for the app in the future.
The tasks view requires login, and returns two attributes in the context: the user's fullname, which coalesce to their username if needed, and the todo items, sorted by creation date (we can add some sorting options for the user in the future).
Now let's add the templates. We'll have a base template for the whole app, which will include Tailwind CSS and DaisyUI, and the template for the tasks view.
<!-- core/templates/_base.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://cdn.jsdelivr.net/npm/daisyui@5.0.0-beta.1/daisyui.css" rel="stylesheet" type="text/css"/>
<script src="https://cdn.tailwindcss.com?plugins=typography"></script>
{% block header %}
{% endblock %}
</head>
<body>
<p>Note that we're adding Tailwind and DaisyUI from a CDN, to keep these articles simpler. For production-quality code, they should be bundled in your app.</p>
<p>We're using the beta version of DaisyUI 5.0, which includes a new list component which suits our todo items fine.<br>
</p>
<pre class="brush:php;toolbar:false"><!-- core/templates/tasks.html -->
{% extends "_base.html" %}
{% block content %}
<div>
<p>We can now add some Todo items with the admin interface, and run the server, to see the Todos similarly to the previous screenshot. </p>
<p>We're now ready to add some HTMX to the app, to toggle the completion of the item</p>
<h2>
Add inline partial templates
</h2>
<p>In case you're new to HTMX, it's a JavaScript library that makes it easy to create dynamic web pages by replacing and updating parts of the page with fresh content from the server. Unlike client-side libraries like React, HTMX focuses on <strong>server-driven</strong> updates, leveraging <strong>hypermedia</strong> (HTML) to fetch and manipulate page content on the server, which is responsible for rendering the updated content, rather than relying on complex client-side rendering and rehydration, and saving us from the toil of serializing to and from JSON just to provide data to client-side libraries.</p>
<p>In short: when we toggle one of our todo items, we will get a new fragment of HTML from the server (the todo item) with its new state.</p>
<p>To help us achieve this we will first install a Django plugin called django-template-partials, which adds support to inline partials in our template, the same partials that we will later return for specific todo items.<br>
</p>
<pre class="brush:php;toolbar:false">? uv add django-template-partials
Resolved 24 packages in 435ms
Installed 1 package in 10ms
+ django-template-partials==24.4
Following the installation instructions, we should update our settings.py file as such
INSTALLED_APPS = [
"django.contrib.admin",
"django.contrib.auth",
"django.contrib.contenttypes",
"django.contrib.sessions",
"django.contrib.messages",
"django.contrib.staticfiles",
"core",
"template_partials", # <-- NEW
]
In our tasks template, we will define each todo item as an inline partial template. If we reload the page, it shouldn't have any visual differences.
<!-- core/templates/tasks.html -->
{% extends "_base.html" %}
{% load partials %} <!-- NEW -->
{% block content %}
<div>
<p>The two attributes added are important: the name of the partial, todo-item-partial, will be used to refer to it in our view and other templates, and the inline attribute indicates that we want to keep rendering the partial within the context of its parent template.</p>
<p>With inline partials, you can see the template within the context it lives in, making it easier to understand and maintain your codebase by preserving locality of behavior, when compared to including separate template files.</p>
<h2>
Toggling todo items on and off with HTMX
</h2>
<p>To mark items as complete and incomplete, we will implement a new URL and View for todo items, using the PUT method. The view will return the updated todo item rendered within a partial template.</p>
<p>First of all we need to add HTMX to our base template. Again, we're adding straight from a CDN for the sake of simplicity, but for real production apps you should serve them from the application itself, or as part of a bundle. Let's add it in the HEAD section of _base.html, right after Tailwind:<br>
</p>
<pre class="brush:php;toolbar:false"> <link href="https://cdn.jsdelivr.net/npm/daisyui@5.0.0-beta.1/daisyui.css" rel="stylesheet" type="text/css"/>
<script src="https://cdn.tailwindcss.com?plugins=typography"></script>
<script src="https://unpkg.com/htmx.org@2.0.4" ></script> <!-- NEW -->
{% block header %}
{% endblock %}
On core/urls.py we will add our new route:
# core/urls.py
from django.urls import path
from . import views
urlpatterns = [
path("", views.index, name="index"),
path("tasks/", views.tasks, name="tasks"),
path("tasks/<int:task_id>/", views.toggle_todo, name="toggle_todo"), # <-- NEW
]
Then, on core/views.py, we will add the corresponding view:
# core/views.py
from django.shortcuts import redirect, render
from .models import UserProfile, Todo
from django.contrib.auth.decorators import login_required
from django.views.decorators.http import require_http_methods # <-- NEW
# ... existing code
# NEW
@login_required
@require_http_methods(["PUT"])
def toggle_todo(request, task_id):
todo = request.user.todos.get(id=task_id)
todo.is_completed = not todo.is_completed
todo.save()
return render(request, "tasks.html#todo-item-partial", {"todo": todo})
In the return statement, we can see how we can leverage template partials: we're returning only the partial, by referring to its name todo-item-partial, and the context that matches the name of the item we're iterating in the loop in tasks.html.
We can now test toggling the item on and off:
It looks like we're just doing some client-side work, but inspecting the Network tool in the browser shows us how we're dispatching PUT requests and returning the partial HTML:
PUT request
Response
Our app is now HTMX-fied! You can check the final code here. In part 4, we will add the ability to add and delete tasks.
The above is the detailed content of Creating a To-Do app with Django and HTMX - Part Creating the frontend and adding HTMX. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Polymorphism in python classes
Jul 05, 2025 am 02:58 AM
Polymorphism is a core concept in Python object-oriented programming, referring to "one interface, multiple implementations", allowing for unified processing of different types of objects. 1. Polymorphism is implemented through method rewriting. Subclasses can redefine parent class methods. For example, the spoke() method of Animal class has different implementations in Dog and Cat subclasses. 2. The practical uses of polymorphism include simplifying the code structure and enhancing scalability, such as calling the draw() method uniformly in the graphical drawing program, or handling the common behavior of different characters in game development. 3. Python implementation polymorphism needs to satisfy: the parent class defines a method, and the child class overrides the method, but does not require inheritance of the same parent class. As long as the object implements the same method, this is called the "duck type". 4. Things to note include the maintenance
Python Function Arguments and Parameters
Jul 04, 2025 am 03:26 AM
Parameters are placeholders when defining a function, while arguments are specific values ??passed in when calling. 1. Position parameters need to be passed in order, and incorrect order will lead to errors in the result; 2. Keyword parameters are specified by parameter names, which can change the order and improve readability; 3. Default parameter values ??are assigned when defined to avoid duplicate code, but variable objects should be avoided as default values; 4. args and *kwargs can handle uncertain number of parameters and are suitable for general interfaces or decorators, but should be used with caution to maintain readability.
Explain Python generators and iterators.
Jul 05, 2025 am 02:55 AM
Iterators are objects that implement __iter__() and __next__() methods. The generator is a simplified version of iterators, which automatically implement these methods through the yield keyword. 1. The iterator returns an element every time he calls next() and throws a StopIteration exception when there are no more elements. 2. The generator uses function definition to generate data on demand, saving memory and supporting infinite sequences. 3. Use iterators when processing existing sets, use a generator when dynamically generating big data or lazy evaluation, such as loading line by line when reading large files. Note: Iterable objects such as lists are not iterators. They need to be recreated after the iterator reaches its end, and the generator can only traverse it once.
Python `@classmethod` decorator explained
Jul 04, 2025 am 03:26 AM
A class method is a method defined in Python through the @classmethod decorator. Its first parameter is the class itself (cls), which is used to access or modify the class state. It can be called through a class or instance, which affects the entire class rather than a specific instance; for example, in the Person class, the show_count() method counts the number of objects created; when defining a class method, you need to use the @classmethod decorator and name the first parameter cls, such as the change_var(new_value) method to modify class variables; the class method is different from the instance method (self parameter) and static method (no automatic parameters), and is suitable for factory methods, alternative constructors, and management of class variables. Common uses include:
How to handle API authentication in Python
Jul 13, 2025 am 02:22 AM
The key to dealing with API authentication is to understand and use the authentication method correctly. 1. APIKey is the simplest authentication method, usually placed in the request header or URL parameters; 2. BasicAuth uses username and password for Base64 encoding transmission, which is suitable for internal systems; 3. OAuth2 needs to obtain the token first through client_id and client_secret, and then bring the BearerToken in the request header; 4. In order to deal with the token expiration, the token management class can be encapsulated and automatically refreshed the token; in short, selecting the appropriate method according to the document and safely storing the key information is the key.
What are Python magic methods or dunder methods?
Jul 04, 2025 am 03:20 AM
Python's magicmethods (or dunder methods) are special methods used to define the behavior of objects, which start and end with a double underscore. 1. They enable objects to respond to built-in operations, such as addition, comparison, string representation, etc.; 2. Common use cases include object initialization and representation (__init__, __repr__, __str__), arithmetic operations (__add__, __sub__, __mul__) and comparison operations (__eq__, ___lt__); 3. When using it, make sure that their behavior meets expectations. For example, __repr__ should return expressions of refactorable objects, and arithmetic methods should return new instances; 4. Overuse or confusing things should be avoided.
How does Python memory management work?
Jul 04, 2025 am 03:26 AM
Pythonmanagesmemoryautomaticallyusingreferencecountingandagarbagecollector.Referencecountingtrackshowmanyvariablesrefertoanobject,andwhenthecountreacheszero,thememoryisfreed.However,itcannothandlecircularreferences,wheretwoobjectsrefertoeachotherbuta
Describe Python garbage collection in Python.
Jul 03, 2025 am 02:07 AM
Python's garbage collection mechanism automatically manages memory through reference counting and periodic garbage collection. Its core method is reference counting, which immediately releases memory when the number of references of an object is zero; but it cannot handle circular references, so a garbage collection module (gc) is introduced to detect and clean the loop. Garbage collection is usually triggered when the reference count decreases during program operation, the allocation and release difference exceeds the threshold, or when gc.collect() is called manually. Users can turn off automatic recycling through gc.disable(), manually execute gc.collect(), and adjust thresholds to achieve control through gc.set_threshold(). Not all objects participate in loop recycling. If objects that do not contain references are processed by reference counting, it is built-in
