[DJANGO] Crear un formulario de registro de usuarios

En este capítulo de Django, aprenderás a crear un formulario en una plantilla HTML y usar el modelo con él para registrar usuarios en tus aplicaciones.

En esta ocasión no definiremos ningún estilo todavía, solo trabajaremos con la parte funcional y estructural (HTML y manejo de base de datos). CSS y JS lo dejamos para otro capítulo.

Modelo Django para el formulario

En el capítulo anterior, expliqué como funcionaba el siguiente modelo con todo detalle.

Este es el código que debes tener en el archivo models.py de tu app con Django:

from django.db import models

class Usuario(models.Model):
    # Campos de texto
    nombre_usuario = models.CharField(max_length=30, unique=True)
    nombre = models.CharField(max_length=50)
    apellidos = models.CharField(max_length=50)
    email = models.EmailField(unique=True)

    # Campos numéricos
    edad = models.PositiveIntegerField()
    peso = models.DecimalField(max_digits=5, decimal_places=2)
    altura = models.FloatField()

    # Campos de fechas
    fecha_nacimiento = models.DateField()
    ultimo_login = models.DateTimeField(auto_now=True)

    # Campos booleanos
    esta_activa = models.BooleanField(default=True)
    es_personal = models.BooleanField(default=False)

    # Campos con opciones
    OPCIONES_ROL = [
        ('usuario', 'Usuario normal'),
        ('admin', 'Administrador'),
    ]
    roles = models.CharField(max_length=7, choices=OPCIONES_ROL, default='usuario')

Plantilla de formulario con Django

Después, en la carpeta "templates", donde van las plantillas, vamos a colocar una plantilla html con el siguiente código:

<form method="POST">
    {% csrf_token %}
    <label for="nombre_usuario">Nombre de usuario:</label>
    <input type="text" name="nombre_usuario" required>
  
    <label for="nombre">Nombre:</label>
    <input type="text" name="nombre" required>
  
    <label for="apellidos">Apellidos:</label>
    <input type="text" name="apellidos" required>
  
    <label for="email">Email:</label>
    <input type="email" name="email" required>
  
    <label for="edad">Edad:</label>
    <input type="number" name="edad" min="1" required>
  
    <label for="peso">Peso:</label>
    <input type="number" step="0.01" name="peso" min="0" max="999.99" required>
  
    <label for="altura">Altura:</label>
    <input type="number" step="0.01" name="altura" min="0" max="999.99" required>
  
    <label for="fecha_nacimiento">Fecha de nacimiento:</label>
    <input type="date" name="fecha_nacimiento" required>
  
    <label for="roles">Rol:</label>
    <select name="roles" required>
      <option value="usuario">Usuario normal</option>
      <option value="admin">Administrador</option>
    </select>
  
    <input type="submit" value="Enviar">
  </form>

Los input type de HTML

Explico brevemente los tipos de input de HTML por si alguien no los conoce o no los recuerda muy bien:

• type="text": Es para ingresar texto.
• type="email": Es para ingresar una dirección de correo electrónico.
• type="number": Es para ingresar números.
• type="date": Es para seleccionar una fecha.
• <select>: Es una etiqueta para crear una lista desplegable de opciones.
• required: Es para asegurarse de que se ingrese un valor en ese campo antes de enviar el formulario.

Si te fijas, en el formulario, en la etiqueta de apertura, <form> pone 'method="POST"'. Para quienes habéis trabajado con PHP anteriormente, seguro que esto os suena.

Gracias a todo esto, manejamos los tipos de datos correctos que admite el modelo de Django junto con HTML.

¿Para qué sirve method POST?

Hasta ahora, de los métodos HTTP solo habíamos utilizado GET, el cual, se utiliza para obtener cosas de la aplicación (servidor), ya sea una imagen, una plantilla HTML, una respuesta del servidor, etc.

Por ejemplo, cuando escribes en el navegador "www.programacionfacil.org" y pulsas ENTER, le estás haciendo un GET al servidor web, el cual, te proveerá de lo que le has solicitado, siempre que esté disponible para el usuario.

En cambio, el método POST se usa para enviar datos del cliente (navegador) al servidor web para su procesamiento. Digamos, que uno descarga (GET) y el otro sube (POST), por decirlo de otra forma.

El token CSRF (Cross-Site Request Forgery)

{% csrf_token %}

El token CSRF (Cross Site Request Forgery) es una medida de seguridad para proteger formularios web de ataques maliciosos. Es especialmente importante para las aplicaciones web que requieren autenticación de usuario.

Cuando se envía un formulario web a un sitio protegido por CSRF, se añade un campo oculto llamado "csrfmiddlewaretoken" especial que contiene un token único. Este token se genera en el servidor y se almacena en la sesión del usuario.

Cuando se envía un formulario, el servidor comprueba que el token del campo del formulario coincida con el token almacenado en la sesión del usuario. Si los tokens no coinciden, se rechaza la solicitud.

El token CSRF protege contra ataques en los que un atacante engaña a un usuario legítimo para que realice acciones no deseadas en un sitio web. Al asegurarse de que los tokens coincidan, evita que un atacante envíe solicitudes maliciosas a través de una sesión de usuario activa.

En resumen, ya que no quiero dar detalles de como se hace esto, el atacante, crea un clon. Este imita una web legítima.

El atacante envía un enlace mediante un correo u otra fuente, que parece de la entidad auténtica. Hay técnicas de email spoofing para suplantar incluso la dirección auténtica.

Entonces, el usuario accede al enlace y supongamos que quiere hacer una transferencia de su cuenta a otra cuenta. La página falsa modifica los datos de la transferencia y envía de forma "legítima" (totalmente ilegal) la transacción a su cuenta. Así que de alguna forma, ha sido el propio usuario quien ha permitido el envío de esa transferencia.

Es por eso, que es tan importante añadir esta medida de seguridad.

Creando una definición para el formulario de Django

En la app, vamos a crear un archivo nuevo llamado forms.py para crear una definición de un formulario de Django utilizando la clase ModelForm. La clase ModelForm es una clase especializada de formulario en Django que se usa para crear formularios a partir de modelos de bases de datos.

Se puede decir, que esta es la interconexión entre el modelo y el formulario de la plantilla .html.

from django import forms
from . models import Usuario

class UsuarioForm(forms.ModelForm):
    class Meta:
        model = Usuario
        fields = [
            'nombre_usuario',
            'nombre',
            'apellidos',
            'email',
            'edad',
            'peso',
            'altura',
            'fecha_nacimiento',
            'roles',
        ]

Añadiendo la vista para el formulario de Django

Lo siguiente, es añadir la vista para que se le cargue el formulario al usuario.

from django.shortcuts import render
from . forms import UsuarioForm

def formulario(request):
    if request.method == 'POST':
        form = UsuarioForm(request.POST)
        if form.is_valid():
            form.save()
            # hacer algo después de guardar los datos del usuario
    else:
        form = UsuarioForm()
    return render(request, 'formulario.html', {'form': form})

No te olvides también de añadir la URL para poder acceder a la vista:

urlpatterns = [
    # Otras url ...
    path('formulario/', views.formulario, name="formulario")
]

Realizar las migraciones para el formulario de Django

En Django, las migraciones se utilizan para realizar cambios en la estructura de la base de datos en un proyecto. Permiten definir cómo se deben crear, modificar o eliminar tablas, campos y relaciones de base de datos.

Cada vez que se realiza una modificación en los modelos de Django (por ejemplo, al agregar un nuevo campo o incluso una tabla entera), se debe crear una migración para reflejar estos cambios en la base de datos. Las migraciones son archivos de Python que contienen código para realizar la actualización de la base de datos y son creados automáticamente por Django.

Una vez creadas las migraciones, se deben aplicar a la base de datos mediante el comando "python manage.py migrate". Este comando ejecuta todas las migraciones pendientes y actualiza la base de datos con los cambios definidos en las mismas.

Las migraciones son importantes porque permiten mantener una estructura de base de datos consistente y actualizada con los modelos de Django. Además, proporcionan un historial de cambios en la base de datos, lo que facilita la resolución de problemas y el seguimiento de la evolución del proyecto.

Cuando inicias el servidor web, seguro que te ha salido siempre este mensaje. Son migraciones pendientes y avisa de que el proyecto que se está ejecutando podría no funcionar correctamente.

Aquí se pide ejecutar el siguiente comando en la consola:

python manage.py migrate

Para ejecutarlo, debes cerrar el servidor web antes, lo puedes hacer con CTRL + C.

Sin embargo, estas migraciones son anteriores, no incluyen la nueva tabla.

Cuando realizas cambios en tus modelos, como agregar nuevos campos o tablas, debes crear una nueva migración utilizando el comando makemigrations. Esto creará un archivo de migración que contiene las instrucciones para actualizar la base de datos de acuerdo con los cambios realizados en los modelos.

Luego, para aplicar los cambios en la base de datos, debes ejecutar el comando migrate. Este comando aplicará todas las migraciones pendientes, incluyendo las que acabas de crear con makemigrations.

Es importante tener en cuenta que cuando realizas cambios en tus modelos, debes ejecutar siempre makemigrations antes de "migrate" para asegurarte de que los cambios se reflejen correctamente en la base de datos.

Ejecuta primero uno, y luego el otro en este orden:

python manage.py makemigrations
python manage.py migrate

Ahora sí, ya puedes ejecutar el servidor web y cargar la página del formulario. Yo he probado de añadir un registro. Ya sé que es muy sencillo, pero está creado solo con HTML. En el próximo capítulo le daremos unos estilos CSS.

Le damos al botón enviar y se limpia todo el formulario:

Nos faltaría añadir un mensaje indicando que el usuario se ha creado o algo así, ya que de esta forma, el usuario no sabría si se ha creado o no.

Para leer el archivo de la base de datos SQLite, no lo podemos hacer abriendo el archivo sin más, ya que son archivos binarios y no de texto plano.

Sin embargo, en Visual Studio Code tenemos una gran extensión llamada SQLite Viewer. Esta nos permite visualizar los datos directamente sobre VSCode.

Una vez instalado, nos dirigimos al archivo de base de datos SQLite del proyecto:

Veremos que hay tablas del proyecto que no hay que tocar. Esto lo ha ido generando Django. La tabla que te interesa, es la última:

Al abrirla podremos ver todos los registros con información como la clave primaria (id) que sale con una llave y es autoincrementable, etc.

Dejemos este largo capítulo aquí y en el siguiente, nos vamos a dedicar a añadir estilos CSS para que el formulario quede con un aspecto más aceptable.

No te pierdas nada del curso Máster en Python.