Creación y Manejo de Formularios en Aplicaciones Web

Clase 5 de 18 • Curso de Flask

Clase anteriorSiguiente clase

Resumen

Los formularios son una parte esencial en el desarrollo web, ya que permiten la comunicación entre usuarios y servidores. Dominar el manejo de formularios en Flask te permitirá crear aplicaciones web interactivas y funcionales que respondan a las necesidades de tus usuarios. En este contenido, exploraremos cómo implementar formularios en Flask, procesar la información enviada y realizar redirecciones efectivas entre diferentes vistas.

¿Cómo crear y procesar formularios en Flask?

Para comenzar a trabajar con formularios en Flask, necesitamos entender cómo se estructura un formulario HTML básico y cómo se conecta con nuestro backend. El primer paso es crear un archivo HTML que contenga nuestro formulario.

<!DOCTYPE html>
<html>
<head>
    <title>Crear Nota</title>
</head>
<body>
    <h1>Crear una nueva nota</h1>
    <form method="post">
        <label for="note">Nota:</label>
        <input type="text" name="note" id="note">
        <input type="submit" value="Crear nota">
    </form>
</body>
</html>

Este formulario tiene elementos clave que debemos considerar:

  • El atributo method="post" indica que enviaremos datos al servidor
  • El campo name="note" es crucial ya que es el identificador que usaremos en Python para acceder a este valor
  • Evita usar nombres en español o con caracteres especiales en los atributos name, ya que pueden causar problemas al acceder a ellos desde Python

Una vez creado el formulario, necesitamos configurar una vista en Flask que pueda mostrar el formulario y procesar los datos enviados.

¿Cómo configurar las rutas para manejar formularios?

En Flask, necesitamos configurar una ruta que pueda manejar tanto solicitudes GET (para mostrar el formulario) como POST (para procesar los datos enviados). Esto se logra especificando los métodos permitidos en la decoración de la ruta.

from flask import Flask, render_template, request, redirect, url_for

app = Flask(__name__)

@app.route('/crear-nota', methods=['GET', 'POST'])
def CreateNote():
    if request.method == 'POST':
        # Procesar los datos del formulario
        note = request.form.get('note', 'No encontrada')
        print(note)  # Para verificar que estamos recibiendo los datos
        return redirect(url_for('confirmation', note=note))
    
    # Si es una solicitud GET, mostrar el formulario
    return render_template('note.html')

En este código:

  1. Importamos las funciones necesarias de Flask
  2. Configuramos la ruta /crear-nota para aceptar métodos GET y POST
  3. Verificamos el tipo de solicitud con request.method
  4. Accedemos a los datos del formulario mediante request.form.get('note')
  5. Redirigimos al usuario a una página de confirmación con los datos recibidos

Es importante destacar que request.form es un objeto que contiene todos los campos enviados desde el formulario. Podemos acceder a cada campo utilizando el nombre que le asignamos en el HTML.

¿Cómo implementar redirecciones entre vistas?

Una práctica común después de procesar un formulario es redirigir al usuario a otra página. Esto evita problemas como el reenvío de formularios al actualizar la página y mejora la experiencia del usuario.

@app.route('/confirmacion')
def confirmation():
    # Aquí deberíamos mostrar un template con la confirmación
    return "Prueba"

Para implementar la redirección, utilizamos dos funciones importantes:

  1. redirect(): Redirige al usuario a otra URL
  2. url_for(): Genera la URL para una función de vista específica

La ventaja de usar url_for() en lugar de escribir la URL directamente es que si cambiamos el nombre de la ruta en el futuro, no tendremos que actualizar todas las referencias a esa URL en nuestro código.

return redirect(url_for('confirmation', note=note))

En este ejemplo, estamos redirigiendo al usuario a la vista confirmation y pasando el valor de note como un parámetro en la URL. Esto permite que la vista de confirmación acceda a este valor y lo muestre al usuario.

¿Cómo mostrar los datos recibidos en una plantilla HTML?

Para completar el flujo de trabajo con formularios, necesitamos mostrar los datos recibidos en una plantilla HTML. Esto se logra pasando los datos a la función render_template().

@app.route('/confirmacion')
def confirmation():
    note = request.args.get('note', 'No se encontró ninguna nota')
    return render_template('confirmation.html', note=note)

En este código, estamos:

  1. Obteniendo el valor de note desde los parámetros de la URL con request.args.get()
  2. Pasando ese valor a la plantilla confirmation.html

Luego, en nuestra plantilla HTML, podemos mostrar el valor recibido:

<!DOCTYPE html>
<html>
<head>
    <title>Confirmación</title>
</head>
<body>
    <h1>Nota creada con éxito</h1>
    <p>Tu nota: {{ note }}</p>
</body>
</html>

El uso de {{ note }} en la plantilla permite insertar el valor de la variable note que pasamos desde nuestra vista.

El manejo de formularios en Flask es una habilidad fundamental para cualquier desarrollador web. Con estos conocimientos básicos, puedes comenzar a crear aplicaciones interactivas que reciban y procesen datos de los usuarios. ¿Te animas a implementar tu propio sistema de formularios? Comparte tus experiencias y dudas en los comentarios.