HTMX is een tool die naadloos kan worden geïntegreerd met Django, waardoor dynamische webapplicaties kunnen worden gebouwd met slechts een eenvoudige configuratie. In dit deel bekijken we de voorbereidingen en instellingsmethoden om Django en HTMX te integreren.

Integratie van Django en HTMX voor dynamische webontwikkeling

1. Voorbereidingen voor de integratie van HTMX in Django

Volg de volgende stappen om HTMX in Django te gebruiken:

1.1 Laad de HTMX JavaScript-bibliotheek

Voeg de CDN-link toe in de <head> tag van je HTML-sjabloonbestand.

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

1.2 Gebruik van HTMX-eigenschappen in Django

HTMX biedt verschillende eigenschappen om HTTP-verzoeken eenvoudig te verwerken.

  • hx-get: Eigenschap voor het verzenden van GET-verzoeken
  • hx-post: Eigenschap voor het verzenden van POST-verzoeken
  • hx-target: Geeft het HTML-element aan waar de serverresponsgegevens moeten worden ingevoegd

HTML Code Voorbeeld

<div id="content">
    <button hx-get="/get-data/" hx-target="#result">Gegevens ophalen</button>
    <button hx-post="/submit/" hx-target="#result">Gegevens verzenden</button>
</div>
<div id="result">Resultaten worden hier weergegeven.</div>

2. Verwerken van Django-weergaven en HTMX-verzoeken

2.1 Verwerken van GET-verzoeken

from django.http import HttpResponse

def get_data(request):
    if request.method == "GET":
        return HttpResponse("<p>GET-verzoek verwerkt!</p>")

2.2 Verwerken van POST-verzoeken

from django.http import HttpResponse

def submit_data(request):
    if request.method == "POST":
        return HttpResponse("<p>POST-verzoek verwerkt!</p>")

2.3 URL-mapping

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. Punten van aandacht bij de integratie van HTMX

3.1 Verwerking van CSRF-token

Django heeft CSRF-bescherming standaard ingeschakeld, dus een CSRF-token is vereist bij POST-verzoeken. Kies een van de volgende twee methoden om POST-verzoeken met HTMX te verwerken:

1. Gebruik van HTML <meta> tag en JavaScript-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>
2. Plaats {% csrf_token %} in de HTML <form> tag
<form hx-post="/submit/" hx-target="#result">
    {% csrf_token %}
    <input type="text" name="name" placeholder="Voer je naam in">
    <button type="submit">Verzenden</button>
</form>
<div id="result"></div>

Voor meer informatie over CSRF-tokenverwerking, zullen we dit in het volgende deel bespreken.

3.2 Onderscheid maken in HTMX-verzoeken

Vanaf Django 4.2 kun je de request.htmx eigenschap gebruiken om HTMX-verzoeken te onderscheiden.

from django.shortcuts import render

def my_view(request):
    if request.htmx:  # HTMX-verzoek
        return render(request, 'partials/snippet.html')
    return render(request, 'index.html')  # Volledige pagina

4. Het algehele proces van de integratie van HTMX en Django

4.1 Voorbeeld van voltooide HTML

<!DOCTYPE html>
<html>
<head>
    <title>HTMX Demo</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">GET verzoek</button>
        <button hx-post="/submit/" hx-target="#result">POST verzoek</button>
    </div>
    <div id="result">Resultaten worden hier weergegeven.</div>
</body>
</html>

Afsluiting van deze aflevering

In deze aflevering hebben we de voorbereidingen en instellingsmethoden bekeken die nodig zijn voor de integratie van Django en HTMX. In de volgende aflevering zullen we ons richten op de verwerking van CSRF-tokens en gedetailleerd ingaan op de beveiligde integratie van Django en HTMX. Blijf kijken! 😊