EBAC Logotipo
Menú

8.2 Flujo completo: del usuario al servidor

Explorarás cómo el usuario interactúa con la aplicación, cómo el frontend solicita datos al backend y cómo se procesan esos datos para mostrar la información al usuario.

1. Visualiza el flujo de datos nativo

Los formularios HTML permiten enviar información del usuario directamente al servidor, sin uso de librerías JavaScript.


Flujo básico:

  1. El usuario llena un formulario en una página web.
  2. Al hacer clic en “Enviar”, el navegador genera una petición HTTP (GET o POST).
  3. El servidor procesa la información y responde con una nueva vista en HTML.


Este modelo sigue el comportamiento por defecto de los formularios, donde el servidor genera cada respuesta completa.

2. Crea formularios HTML funcionales

Un formulario HTML define la estructura para recolectar datos del usuario y enviarlos al servidor.


Atributos clave:

  1. action: URL a la que se envía el formulario.
  2. method: tipo de petición HTTP (GET o POST).
  3. name: nombre del campo para identificar el dato.
  4. required: obliga a llenar el campo antes de enviar.


Campos más comunes:

  1. input: para texto, email, contraseña, fecha, etc.
  2. select: menú desplegable.
  3. textarea: para texto largo.


La clave es asignar correctamente los nombres (name) a cada campo para que el servidor los reciba de forma ordenada.

3. Define tipos y validaciones en input

El atributo type en un <input> permite controlar el tipo de dato que se captura y cómo se ve en la interfaz.


Ejemplos comunes:

  1. type="text" para texto libre.
  2. type="number" muestra teclado númerico en mobile.
  3. type="email" valida estructura de correo.
  4. type="date" muestra selector de calendario.
  5. type="password" oculta el texto ingresado.


Validaciones en el cliente:

  1. required: obliga a llenar el campo.
  2. maxlength: restringe la longitud máxima.
  3. readonly: impide editar el valor.


Estas validaciones mejoran la experiencia del usuario, pero no reemplazan las validaciones en el backend. Sirven como primer filtro, no como defensa.

4. Procesa datos en el backend con Flask

Cuando el formulario se envía, Flask puede acceder a los datos usando request.form.


Ejemplo básico:



from flask import request





titulo = request.form['title']


estado = request.form['status']

Validaciones básicas:

  1. Verificar que campos obligatorios estén presentes.
  2. Comprobar longitud, formato o contenido.
  3. Retornar errores si algo falta o es inválido.


Este procesamiento ocurre antes de guardar en la base de datos, asegurando que los datos tengan la estructura y valor esperados.

5. Redirige o responde con HTML desde el backend

Después de procesar los datos, el backend puede responder de dos formas principales:


1. Redirección:

Después de una acción como crear o editar, es común redirigir a otra vista.

return redirect("/tareas")

Esto evita que el formulario se envíe dos veces al recargar la página.


2. Renderizado de plantilla:

Se puede generar una vista HTML personalizada con los datos procesados.

return render_template("lista.html", tareas=tareas)


Esta respuesta es enviada como HTML completo al navegador, que reemplaza la vista anterior.

6. Errores comunes y cómo prevenirlos

Al trabajar con formularios, es común cometer errores que afectan la funcionalidad o experiencia del usuario.


Problemas frecuentes:

  1. Campos vacíos: si no se usa required, pueden enviarse valores vacíos sin aviso.
  2. Rutas mal definidas: action="/crear" debe coincidir con una ruta válida en Flask.
  3. Método incorrecto: usar method="GET" cuando se espera POST puede bloquear la lógica del backend.


Buenas prácticas para evitarlos:

  1. Usar validaciones HTML como required y maxlength.
  2. Confirmar que action apunte a una ruta implementada.
  3. Verificar en el backend que los métodos (GET, POST) sean los esperados con @app.route(..., methods=["POST"]).

7. Agrega seguridad básica en la comunicación

Aunque el envío por formulario es simple, requiere ciertas medidas mínimas para evitar vulnerabilidades comunes.


Recomendaciones clave:

  1. Validar en el servidor todos los datos recibidos, aunque ya haya validación en el HTML.
  2. Proteger contra CSRF (Cross-Site Request Forgery) usando tokens si el formulario modifica datos.
  3. Usar HTTPS para cifrar la información transmitida entre navegador y servidor.
  4. Escapar contenido en las vistas HTML para evitar inyecciones de código malicioso ({{ dato | e }}).


Estas prácticas fortalecen la seguridad sin agregar complejidad al flujo clásico de formularios.