Création d'une application To-Do avec Django et HTMX - Partie Création du frontend et ajout de HTMX

Bienvenue dans la troisième partie de notre série ! Dans cette série d'articles, je documente mon propre apprentissage de HTMX, en utilisant Django pour le backend.
Si vous venez d'arriver dans la série, vous voudrez peut-être d'abord vérifier les parties un et deux.

Création des modèles et des vues

Nous allons commencer par créer un modèle de base et un modèle d'index qui pointe vers une vue d'index, qui répertoriera les Todos que nous avons dans la base de données. Nous utiliserons DaisyUI qui est une extension de Tailwind CSS, pour rendre les Todos décents.

Voici à quoi ressemblera la page une fois les vues définies, et avant d'ajouter HTMX :

Ajout des vues et des URL

Nous devons d'abord mettre à jour le fichier urls.py à la racine du projet, pour inclure les urls que nous définirons dans notre application "core":

# todomx/urls.py

from django.contrib import admin
from django.urls import include, path # 



<p>Ensuite, nous définissons les nouvelles URL de l'application, en plaçant l'ajout du nouveau fichier core/urls.py :<br>
</p>

<pre class="brush:php;toolbar:false"># core/urls.py

from django.urls import path
from . import views

urlpatterns = [
    path("", views.index, name="index"),
    path("tasks/", views.tasks, name="tasks"),
]

Maintenant nous pouvons créer les vues correspondantes, dans 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)

Quelques choses intéressantes ici : notre route d'index (page d'accueil) redirigera simplement vers l'URL et la vue des tâches. Cela nous donnera la liberté de mettre en œuvre une sorte de page de destination pour l'application à l'avenir.

La vue des tâches nécessite une connexion et renvoie deux attributs dans le contexte : le nom complet de l'utilisateur, qui fusionne avec son nom d'utilisateur si nécessaire, et les tâches à effectuer, triées par date de création (nous pouvons ajouter quelques options de tri pour l'utilisateur dans la futur).

Ajoutons maintenant les modèles. Nous aurons un modèle de base pour l'ensemble de l'application, qui inclura Tailwind CSS et DaisyUI, ainsi que le modèle pour la vue des tâches.

<!-- core/templates/_base.html -->



  
    <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 %}
  
  



<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

En suivant les instructions d'installation, nous devrions mettre à jour notre fichier settings.py en tant que tel

INSTALLED_APPS = [
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
    "core",
    "template_partials",  # 



<p>Dans notre modèle de tâches, nous définirons chaque élément de tâche comme un modèle partiel en ligne. Si nous rechargeons la page, elle ne devrait présenter aucune différence visuelle.<br>
</p>

<pre class="brush:php;toolbar:false"><!-- 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 %}

Sur core/urls.py nous ajouterons notre nouvelle 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/<task_id>/", views.toggle_todo, name="toggle_todo"), # 



<p>Ensuite, sur core/views.py, nous ajouterons la vue correspondante :<br>
</p>

<pre class="brush:php;toolbar:false"># 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 # 



<p>Dans l'instruction return, nous pouvons voir comment exploiter les partiels de modèle : nous renvoyons uniquement le partiel, en faisant référence à son nom todo-item-partial, et au contexte qui correspond au nom de l'élément que nous recherchons. itérer dans la boucle dans Tasks.html.</p>

<p>Nous pouvons maintenant tester l'activation et la désactivation de l'élément :</p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173609284449958.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Creating a To-Do app with Django and HTMX - Part Creating the frontend and adding HTMX"></p>

<p>Il semble que nous effectuons simplement un travail côté client, mais l'inspection de l'outil Réseau dans le navigateur nous montre comment nous envoyons les requêtes PUT et renvoyons le code HTML partiel :</p><p>Demande PUT </p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173609284544580.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Creating a To-Do app with Django and HTMX - Part Creating the frontend and adding HTMX"></p>

<p>Réponse</p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173609284614077.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Creating a To-Do app with Django and HTMX - Part Creating the frontend and adding HTMX"></p>

<p>Notre application est désormais compatible HTMX ! Vous pouvez vérifier le code final ici. Dans la partie 4, nous ajouterons la possibilité d'ajouter et de supprimer des tâches.</p>