HTMX es una herramienta que se integra de forma natural con Django, permitiendo construir aplicaciones web dinámicas con solo una configuración sencilla. En esta entrega, vamos a revisar los trabajos preparativos y la configuración general para integrar Django con HTMX.

Integración de Django y HTMX para el desarrollo web dinámico

1. Trabajos preparativos para integrar HTMX en Django

Para utilizar HTMX en Django, siga estos pasos:

1.1 Cargar la biblioteca JavaScript de HTMX

Agregue el enlace CDN dentro de la etiqueta <head> del archivo de plantilla HTML.

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

1.2 Utilizar atributos de HTMX en Django

HTMX proporciona varios atributos para manejar solicitudes HTTP de forma sencilla.

  • hx-get: Atributo para enviar solicitudes GET
  • hx-post: Atributo para enviar solicitudes POST
  • hx-target: Especifica el elemento HTML donde se insertarán los datos de respuesta del servidor

Ejemplo de código HTML

<div id="content">
    <button hx-get="/get-data/" hx-target="#result">Obtener datos</button>
    <button hx-post="/submit/" hx-target="#result">Enviar datos</button>
</div>
<div id="result">Los resultados se mostrarán aquí.</div>

2. Manejo de vistas Django y solicitudes HTMX

2.1 Manejo de solicitudes GET

from django.http import HttpResponse

def get_data(request):
    if request.method == "GET":
        return HttpResponse("<p>¡Solicitud GET procesada con éxito!</p>")

2.2 Manejo de solicitudes POST

from django.http import HttpResponse

def submit_data(request):
    if request.method == "POST":
        return HttpResponse("<p>¡Solicitud POST procesada con éxito!</p>")

2.3 Mapeo de URL

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. Puntos a considerar al integrar HTMX

3.1 Manejo de token CSRF

Django tiene la protección CSRF habilitada por defecto, por lo que el token CSRF es necesario para las solicitudes POST. Para manejar el token CSRF en HTMX, elija una de las siguientes dos opciones:

1. Usar la etiqueta <meta> HTML y un script de 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. Insertar {% csrf_token %} dentro de una etiqueta <form> HTML
<form hx-post="/submit/" hx-target="#result">
    {% csrf_token %}
    <input type="text" name="name" placeholder="Ingrese su nombre">
    <button type="submit">Enviar</button>
</form>
<div id="result"></div>

Los detalles sobre el manejo del token CSRF se abordarán en la próxima entrega.

3.2 Diferenciación de solicitudes HTMX

A partir de Django 4.2, puede utilizar el atributo request.htmx para diferenciar las solicitudes HTMX.

from django.shortcuts import render

def my_view(request):
    if request.htmx:  # Solicitud HTMX
        return render(request, 'partials/snippet.html')
    return render(request, 'index.html')  # Página completa

4. Flujo completo de la integración de HTMX y Django

4.1 Ejemplo de HTML completo

<!DOCTYPE html>
<html>
<head>
    <title>Demostración de 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">Solicitud GET</button>
        <button hx-post="/submit/" hx-target="#result">Solicitud POST</button>
    </div>
    <div id="result">Los resultados se mostrarán aquí.</div>
</body>
</html>

Conclusión de este episodio

En esta entrega, revisamos los trabajos preparativos y la configuración necesarios para integrar Django con HTMX. En la próxima entrega, abordaremos en detalle el manejo del token CSRF y la integración segura de Django con HTMX. ¡Estén pendientes! 😊