CRUD: Creación — Python: Desarrollo web con Flask

• ¿Qué significa crear una entidad?
• Paso 1: Mostrar el formulario
• Paso 2: Procesar los datos del formulario

En este punto del curso, ya sabes cómo mostrar un listado de recursos (como una lista de usuarios) y cómo ver un recurso específico (como el detalle de un usuario). Ahora vamos a ver cómo crear un recurso desde cero, ese que todavía no existe en la base de datos.

En términos más sencillos, vamos a ver cómo mostrar una forma para que el usuario escriba los datos y cómo procesar esos datos cuando envía el formulario.

Vamos paso a paso.

¿Qué significa crear una entidad?

Imagínate que estás haciendo una aplicación para una escuela. Necesitas registrar nuevas escuelas, cursos o usuarios. Para eso, el usuario ve un formulario en pantalla, escribe los datos (por ejemplo, el nombre de la escuela) y luego le da clic a un botón para enviar esa información.

Esto requiere dos rutas diferentes:

1. Una ruta GET que muestra el formulario vacío.
2. Una ruta POST que recibe los datos del formulario y los guarda si todo está bien.

Veamos cómo serían esas rutas en diferentes ejemplos:

Como ves, lo primero es mostrar el formulario y luego recibir la información enviada por el usuario.

Paso 1: Mostrar el formulario

Vamos a ver cómo es el código en Flask para mostrar un formulario.

Ruta GET que muestra el formulario

@app.route('/schools/new')
def schools_new():
    school = []  # Los datos están vacíos porque el usuario aún no ha enviado nada
    errors = []  # Inicializamos la lista de errores vacía

    return render_template(
        'schools/new.html',
        school=school,
        errors=errors,
    )

El objetivo principal de este código es enviarle al navegador un formulario vacío para que el usuario lo llene. Por ahora, la variable school no tiene datos y errors también está vacía, ya que aún no hay errores de validación.

Plantilla HTML del formulario

<!-- archivo: schools/new.html -->

<form action="/schools" method="post">
    <div>
        <label>
            Nombre *
            <input type="text" name="name"
                   value="{{ school.name|default('', true) }}">
        </label>
        {% if errors %}
            <div>{{ errors.name }}</div>
        {% endif %}
    </div>

    <input type="submit" value="Crear">
</form>

Este formulario tiene un solo campo: el nombre de la escuela. Nota que:

• Usamos value="{{ school.name|default('', true) }}" para que si el usuario vuelve a la página después de un error, no pierda lo que ya había escrito.
• Si hay errores, mostramos el mensaje debajo del input.

Paso 2: Procesar los datos del formulario

Una vez que el usuario llena el formulario y presiona el botón, se dispara una solicitud POST. Esa solicitud llega a otro controlador que debe:

• Extraer los datos del formulario
• Validarlos
• Guardarlos si todo está bien
• Mostrar los errores si hay algo mal

Veamos cómo se hace.

Ruta POST para procesar el formulario

@app.post('/schools')
def schools_post():
    repo = SchoolRepository()

    # Obtener los datos del formulario
    data = request.form.to_dict()

    # Validar los datos
    errors = validate(data)
    if errors:
        # Hay errores: muestra el formulario con los errores
        return render_template(
            'schools/new.html',
            school=data,
            errors=errors
        ), 422  # HTTP 422 significa "Entidad no procesable"

    # Si todo está bien: guardar y redirigir
    repo.save(data)
    flash('La escuela ha sido creada correctamente', 'success')

    return redirect(url_for('schools_index'))  # Redirige a la lista de escuelas

¿Qué está haciendo este código?

1. Usamos request.form.to_dict() para convertir los datos del formulario en un diccionario de Python.
2. Llamamos a una función de validación (supongamos que se asegura de que el nombre no esté vacío, por ejemplo).
3. Si hay errores, devolvemos el mismo formulario pero con los datos y errores para que el usuario los pueda corregir.
4. Si todo está bien, guardamos los datos y redirigimos al usuario a la lista de recursos (schools_index), mostrando un mensaje con flash.

La lógica está pensada para no perder los datos que el usuario escribió. Si algo falla (por ejemplo, si el nombre está vacío), se vuelve a mostrar el formulario, con el valor ingresado y un mensaje de error justo al lado.

Esto le da una mejor experiencia a quien está llenando el formulario.

En la próxima lección aprenderemos cómo actualizar una entidad existente usando formularios similares.

Trabajo independiente

1. Implementa el procesamiento de los datos ingresados y el renderizado del formulario mostrando los errores.

Aplicación de referencia