HTMX est un outil qui s'intègre naturellement à Django, permettant de créer des applications web dynamiques avec une simple configuration. Dans cet article, nous allons examiner les préparatifs globaux et les méthodes de configuration pour intégrer Django et HTMX.

Intégration de Django et HTMX pour le développement web dynamique

1. Préparatifs pour l'intégration de HTMX avec Django

Pour utiliser HTMX dans Django, suivez ces étapes :

1.1 Charger la bibliothèque JavaScript HTMX

Ajoutez le lien CDN à l'intérieur de la balise <head> de votre fichier de modèle HTML.

<script src="https://unpkg.com/htmx.org"></script>

1.2 Utiliser les attributs HTMX dans Django

HTMX propose divers attributs pour traiter facilement les requêtes HTTP.

  • hx-get: Attribut pour envoyer une requête GET
  • hx-post: Attribut pour envoyer une requête POST
  • hx-target: Spécifie l'élément HTML qui recevra les données de la réponse serveur

Exemple de code HTML

<div id="content">
    <button hx-get="/get-data/" hx-target="#result">Récupérer les données</button>
    <button hx-post="/submit/" hx-target="#result">Envoyer les données</button>
</div>
<div id="result">Les résultats s'afficheront ici.</div>

2. Traitement des requêtes HTMX dans les vues Django

2.1 Traitement des requêtes GET

from django.http import HttpResponse

def get_data(request):
    if request.method == "GET":
        return HttpResponse("<p>Traitement de la requête GET terminé !</p>")

2.2 Traitement des requêtes POST

from django.http import HttpResponse

def submit_data(request):
    if request.method == "POST":
        return HttpResponse("<p>Traitement de la requête POST terminé !</p>")

2.3 Mapping des URLs

from django.urls import path
from .views import get_data, submit_data

urlpatterns = [
    path('get-data/', get_data, name='get_data'),
    path('submit/', submit_data, name='submit_data'),
]

3. Points à considérer lors de l'intégration de HTMX

3.1 Gestion des tokens CSRF

Django active la protection CSRF par défaut, donc un token CSRF est nécessaire pour les requêtes POST. Pour gérer les requêtes POST avec HTMX, choisissez l'un des deux moyens suivants :

1. Utiliser une balise HTML <meta> et un script JavaScript
<meta name="csrf-token" content="{{ csrf_token }}">
<script>
    document.body.addEventListener('htmx:configRequest', function (event) {
        event.detail.headers['X-CSRFToken'] = document.querySelector('meta[name="csrf-token"]').content;
    });
</script>
2. Insérer {% csrf_token %} à l'intérieur de la balise <form>
<form hx-post="/submit/" hx-target="#result">
    {% csrf_token %}
    <input type="text" name="name" placeholder="Entrez votre nom">
    <button type="submit">Soumettre</button>
</form>
<div id="result"></div>

Nous aborderons plus en détail la gestion des tokens CSRF dans le prochain article.

3.2 Distinction des requêtes HTMX

Dans Django 4.2 et supérieur, vous pouvez utiliser l'attribut request.htmx pour distinguer les requêtes HTMX.

from django.shortcuts import render

def my_view(request):
    if request.htmx:  # Requête HTMX
        return render(request, 'partials/snippet.html')
    return render(request, 'index.html')  # Page entière

4. Flux complet de l'intégration de HTMX et Django

4.1 Exemple de HTML complet

<!DOCTYPE html>
<html>
<head>
    <title>Démonstration HTMX</title>
    <script src="https://unpkg.com/htmx.org"></script>
    <meta name="csrf-token" content="{{ csrf_token }}">
    <script>
        document.body.addEventListener('htmx:configRequest', function (event) {
            event.detail.headers['X-CSRFToken'] = document.querySelector('meta[name="csrf-token"]').content;
        });
    </script>
</head>
<body>
    <div id="content">
        <button hx-get="/get-data/" hx-target="#result">Requête GET</button>
        <button hx-post="/submit/" hx-target="#result">Requête POST</button>
    </div>
    <div id="result">Les résultats s'afficheront ici.</div>
</body>
</html>

Conclusion de cet épisode

Dans cet épisode, nous avons examiné les préparatifs nécessaires et les méthodes de configuration pour intégrer Django et HTMX. Dans le prochain épisode, nous aborderons en détail la gestion des tokens CSRF et l'intégration de la sécurité avec Django et HTMX. Restez à l'écoute ! 😊