En esta lección, vamos a explorar cómo funcionan los formularios que permiten modificar datos. A diferencia de los formularios de búsqueda, estos pueden ser más complejos tanto en el lado del cliente como en el servidor. Para manejarlos de manera segura, es crucial que entendamos:
- Cómo funcionan las etiquetas HTML correspondientes.
- Cómo se envían los formularios a través de HTTP.
- Cómo se procesa en el lado del servidor.
- Cómo funciona la validación y el despliegue de errores.
Aprenderemos todo esto muy pronto.
Mostrando el formulario
La visualización del formulario y su procesamiento deben ser manejados por dos rutas diferentes, lo que significa dos controladores diferentes. Consideremos ejemplos de rutas para crear un nuevo usuario:
- GET /users/new - página con el formulario que el usuario completa. Este formulario envía una solicitud POST a la dirección /users, especificada en el atributo
action. - POST /users - ruta que procesa los datos del formulario.
Agreguemos un controlador para la ruta /users/new que muestre el formulario para agregar un usuario:
app.get('/users/new', (req, res) => {
res.view('src/views/users/new');
});
Crearemos el formulario en el archivo src/views/users/new.pug
html
body
form(action = '/users', method = 'post')
div
label Nombre:
input(type = 'text', name = 'name')
div
label Correo electrónico:
input(type = 'email', name = 'email', required = true)
div
label Contraseña:
input(type = 'password', name = 'password', required = true)
div
label Confirmación de contraseña:
input(type = 'password', name = 'passwordConfirmation', required = true)
input(type = 'submit', value = 'Registrar')
Inicia el servidor y asegúrate de que el formulario se muestre en la dirección /users/new. Al completarlo e intentar enviarlo, el navegador generará la siguiente solicitud HTTP:
# Estos datos son solo un ejemplo
POST /users HTTP/1.1
Host: localhost
Content-type: application/x-www-form-urlencoded
Content-length: 76
name=Mike&email=example@test.com&password=qwerty&passwordConfirmation=qwerty
En los ejemplos anteriores hemos visto cómo trabajar con HTTP, pero la realidad es un poco diferente. No debemos enviar correos electrónicos, contraseñas y otros datos sensibles a través del protocolo HTTP normal porque esos datos pueden ser fácilmente interceptados y utilizados de manera incorrecta.
Es por eso que los sitios modernos generalmente trabajan a través del protocolo HTTPS, que envía datos encriptados.
Procesamiento de los datos
El formulario está listo, ahora podemos implementar su controlador. El controlador del formulario funciona de la siguiente manera:
- Extrae los parámetros del formulario.
- Crea un objeto Usuario basado en estos parámetros.
- Guarda dicho usuario en la base de datos.
- Realiza una redirección, por ejemplo, a la página de usuarios.
Todos los datos llegan en forma de cadena. Lo más conveniente es agregar un complemento que ayude a analizar el cuerpo de la solicitud. Para hacer esto, instalamos el paquete correspondiente:
npm i @fastify/formbody
Y conectamos el complemento en la aplicación:
import fastify from 'fastify';
import formbody from '@fastify/formbody';
const app = fastify();
await app.register(formbody);
El código del controlador se ve así:
app.post('/users', (req, res) => {
const user = {
name: req.body.name,
email: req.body.email,
password: req.body.password,
};
state.users.push(user);
res.redirect('/users');
});
La mayoría de los controladores de formularios se ven así. Pueden ser más complejos, pero la estructura general se mantiene similar: extraemos los datos, creamos los objetos necesarios basados en ellos e introducimos cambios en la base de datos. Al final, hacemos una redirección o formamos la respuesta necesaria para el cliente.
Normalización de datos
Imagina que al registrarse, el usuario escribe su correo electrónico en mayúsculas y minúsculas arbitrariamente, MiNombre@example.com en lugar de minombre@example.com. Según la especificación, las direcciones de correo electrónico no distinguen entre mayúsculas y minúsculas. En otras palabras, si las letras coinciden en dos direcciones, se consideran la misma dirección.
El problema es que en términos de código y la mayoría de las bases de datos, comparamos cadenas distinguiendo entre mayúsculas y minúsculas. Como resultado, nuestro proyecto enfrenta dos sorpresas:
- El usuario podrá registrar múltiples cuentas utilizando la misma dirección de correo electrónico, simplemente ingresando la dirección en diferentes formatos.
- El usuario no podrá ingresar al sitio web si ingresa su correo electrónico en un formato distinto al que utilizó al registrarse.
Para evitar esto, los datos ingresados por los usuarios pasan por un proceso de normalización. En el caso del correo electrónico, lo convertimos a minúsculas:
// Solo se aplica al correo electrónico
const user = {
name: req.body.name,
email: req.body.email.toLowerCase(),
password: req.body.password,
};
El usuario puede cometer errores en la capitalización, pero también puede colocar espacios al final o al principio de las cadenas accidentalmente, por ejemplo, debido a la copia. A veces no podemos influir en eso. Por ejemplo, el usuario puede agregar un espacio al principio y al final de la contraseña a propósito.
Pero para el nombre y la dirección de correo electrónico, esto no es aceptable. Por lo tanto, es mejor recortar los espacios finales para mayor seguridad:
const user = {
name: req.body.name.trim(),
email: req.body.email.trim().toLowerCase(),
password: req.body.password,
};
Trabajo independiente
Realiza en tu propia computadora todos los pasos de la lección:
- Agrega a la aplicación un formulario y controladores para añadir un nuevo usuario. No olvides llevar a cabo la normalización del correo electrónico del usuario.
- Modifica el código de la aplicación para que los usuarios en los controladores se extraigan del repositorio.
- Arranca la aplicación e intenta añadir nuevos usuarios. Verifica que se realiza una redirección a la página de visualización de todos los usuarios y que en la lista de usuarios aparezca el nuevo usuario.
- Haz lo mismo para los cursos y sube los cambios a GitHub.
Para acceder completo a curso necesitas un plan básico
El plan básico te dará acceso completo a todos los cursos, ejercicios y lecciones de Códica, proyectos y acceso de por vida a la teoría de las lecciones completadas. La suscripción se puede cancelar en cualquier momento.
