Gestor de Iniciativas Ecológicas: Django (Parte 3)

Tutorial 3: Creación del Formulario con Django, Envío con Axios vía AJAX y Presentación de Mensajes con SweetAlert2

Objetivo: En este tutorial, aprenderás a crear un formulario con Django, enviarlo mediante Axios vía AJAX sin recargar la página, y mostrar mensajes interactivos con SweetAlert2. Mantendremos la estructura HTML existente, configuraremos los campos del formulario según el modelo de Django, y cargaremos dinámicamente las categorías desde la base de datos.

---

Paso 1: Creación del Formulario en Django utilizando ModelForm

Utilizaremos un formulario basado en el modelo (ModelForm) para gestionar las validaciones automáticamente y enviar los datos de manera estructurada.

1. Crear el archivo forms.py en la aplicación iniciativas:

En el archivo iniciativas/forms.py, define el formulario:

   from django import forms
   from .models import Iniciativa

   class IniciativaForm(forms.ModelForm):
       class Meta:
           model = Iniciativa
           fields = ['nombre', 'descripcion', 'categoria', 'direccion', 'ubicacion_lat', 'ubicacion_lng']

Este formulario contendrá todos los campos necesarios (nombre, descripcion, categoria, etc.), lo que permite que las validaciones se apliquen de manera automática según el modelo Iniciativa.

---

Paso 2: Ajustes en la Vista Principal para Cargar las Categorías

El formulario contiene un campo select que debe mostrar las categorías almacenadas en la base de datos. Para esto, realizaremos un ajuste en la vista principal para pasar las categorías al template.

• Modificar la vista principal (views.py) para cargar las categorías:

En el archivo iniciativas/views.py, ajusta la vista que renderiza la página principal para incluir las categorías desde la base de datos:

   from django.shortcuts import render
   from .models import Categoria

   def home(request):
       categorias = Categoria.objects.all()
       return render(request, 'index.html', {'categorias': categorias})

Esta vista obtiene todas las categorías del modelo Categoria y las pasa al template index.html para que se muestren en el formulario.

---

Paso 3: Vista para Procesar el Formulario

Vamos a definir una vista que maneje la recepción de los datos enviados por el formulario vía AJAX y que devuelva una respuesta en formato JSON para que Axios la pueda manejar.

• Crear la vista en views.py para procesar el formulario:

En el archivo iniciativas/views.py, define la vista que procesa el formulario enviado:

   from django.http import JsonResponse
   from .forms import IniciativaForm

   def procesar_iniciativa(request):
       try:
           if request.method == 'POST':
               form = IniciativaForm(request.POST)
               if form.is_valid():
                   form.save()
                   return JsonResponse({'message': 'Iniciativa registrada correctamente'}, status=200)
               else:
                   return JsonResponse({'errors': form.errors}, status=400)
       except Exception as e:
           return JsonResponse({'error': 'Ocurrió un error inesperado: {}'.format(str(e))}, status=500)

Esta vista valida los datos del formulario, guarda la iniciativa si los datos son correctos y devuelve una respuesta en formato JSON con un mensaje de éxito o los errores correspondientes.

---

Paso 4: Configuración de la URL para Procesar el Formulario

Debemos configurar la ruta que se utilizará para procesar el formulario cuando se envíen los datos.

• Actualizar el archivo urls.py:

En el archivo iniciativas/urls.py, añade la ruta para procesar el formulario:

   from django.urls import path
   from . import views

   urlpatterns = [
       path('procesar_iniciativa/', views.procesar_iniciativa, name='procesar_iniciativa'),
       path('', views.home, name='home'),
   ]

• La ruta procesar_iniciativa/ es la que maneja la solicitud de envío del formulario y devuelve una respuesta en formato JSON.

---

Paso 5: Ajustes en la Plantilla HTML del Formulario

El formulario debe estar configurado para que los nombres de los campos coincidan con los del modelo, y también debe incluir el campo select de categorías cargadas desde la base de datos.

• Configurar el formulario HTML:

Asegúrate de que los campos del formulario tengan los atributos id y name configurados correctamente, para que coincidan con los nombres de los campos en el modelo.

   <section id="registro">
       <h2>Registrar Nueva Iniciativa</h2>
       <form id="form-iniciativa" method="POST" data-url="{% url 'procesar_iniciativa' %}">
           {% csrf_token %}
           <label for="nombre">Nombre de la Iniciativa:</label>
           <input type="text" id="nombre" name="nombre" required>

           <label for="descripcion">Descripción:</label>
           <textarea id="descripcion" name="descripcion" rows="5" required></textarea>

           <label for="categoria">Categoría:</label>
           <select id="categoria" name="categoria" required>
               {% for categoria in categorias %}
                   <option value="{{ categoria.id }}">{{ categoria.nombre }}</option>
               {% endfor %}
           </select>

           <label for="direccion">Dirección:</label>
           <input type="text" id="direccion" name="direccion" required>

           <label for="ubicacion_lat">Latitud:</label>
           <input type="text" id="ubicacion_lat" name="ubicacion_lat" required>

           <label for="ubicacion_lng">Longitud:</label>
           <input type="text" id="ubicacion_lng" name="ubicacion_lng" required>

           <input type="submit" value="Registrar Iniciativa"></input>
       </form>            
   </section>

• El campo select de categorías se llena dinámicamente con las categorías que el backend pasa al template.
• Los atributos id y name están configurados de acuerdo con los nombres de los campos del modelo para asegurar que los datos se envíen correctamente.

---

Paso 6: Enviar el Formulario con Axios y Mostrar Mensajes con SweetAlert2

Para enviar el formulario sin recargar la página, utilizamos Axios, y para mostrar los mensajes de éxito o error, SweetAlert2.

• Crear el archivo registro.js para procesar el formulario:

En el archivo static/js/registro.js, añade el siguiente código para enviar los datos vía AJAX con Axios y mostrar los mensajes con SweetAlert2:

   document.getElementById('form-iniciativa').addEventListener('submit', function(event) {
       event.preventDefault();

       let formData = new FormData(this);
       let url = this.getAttribute('data-url');

       // Mapeo de nombres de campos del modelo a labels del formulario
       const fieldLabels = {
           nombre: 'Nombre de la Iniciativa',
           descripcion: 'Descripción',
           categoria: 'Categoría',
           direccion: 'Dirección',
           ubicacion_lat: 'Latitud',
           ubicacion_lng: 'Longitud'
       };

       axios.post(url, formData)
           .then(response => {
               Swal.fire({
                   icon: 'success',
                   title: 'Iniciativa Registrada',
                   text: 'La iniciativa ha sido registrada con éxito.',
                   confirmButtonText: 'OK'
               });
               this.reset();
           })
           .catch(error => {
               let errores = error.response.data.errors || error.response.data.error;
               let mensajeError = "<ul>";

               if (typeof errores === 'object') {
                   for (let campo in errores) {
                       let label = fieldLabels[campo] || campo;
                       errores[campo].forEach(function(errorMsg) {
                           mensajeError += `<li><strong>${label}:</strong> ${errorMsg}</li>`;
                       });
                   }
               } else {
                   mensajeError += `<li>${errores}</li>`;
               }
               mensajeError += "</ul>";

               Swal.fire({
                   icon: 'error',
                   title: 'Error al Registrar',
                   html: mensajeError,
                   confirmButtonText: 'Revisar'
               });
           });
   });

• Axios envía los datos del formulario al backend sin recargar la página.

• SweetAlert2 muestra mensajes interactivos de éxito o error dependiendo de la respuesta del servidor.

  • Incluir Axios y SweetAlert2 en el HTML:

Asegúrate de incluir los CDN de Axios y SweetAlert2 en el archivo index.html:

   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.14.1/dist/sweetalert2.min.css">
   <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.14.1/dist/sweetalert2.all.min.js"></script>

---

Paso 7: Verificación

• Iniciar el servidor de desarrollo:

Ejecuta el siguiente comando para iniciar el servidor:

   poetry run python manage.py runserver

• Prueba el formulario de registro:

  • Accede a la página del formulario de registro (http://127.0.0.1:8000/).
  • Completa el formulario con datos válidos y verifica que:
    • Los datos se envían correctamente mediante Axios sin recargar la página.
    • Se muestra un mensaje de éxito con SweetAlert2 al registrar la iniciativa.
    • Si hay errores, los mensajes de error se muestran correctamente con los labels correspondientes.

---

Conclusión

En este tutorial, has aprendido a:

• Crear un formulario en Django usando ModelForm.
• Configurar una vista para cargar dinámicamente las categorías desde la base de datos.
• Enviar los datos del formulario mediante Axios vía AJAX sin recargar la página.
• Mostrar mensajes de éxito o error interactivos utilizando SweetAlert2.
• Configurar correctamente el formulario para que los nombres de los campos coincidan con los del modelo en Django.

Este enfoque mejora la interacción del usuario al registrar iniciativas ecológicas, proporcionando una experiencia más fluida y moderna.