Una de las formas más directas en las que podemos obtener datos de los usuarios en aplicaciones web es través de formularios, si bien existen muchos mecanismos para hacer que esos datos lleguen a nuestra lógica y controladores de aplicación, en el fondo deben seguir las mismas reglas que los formularios HTML, utilizar algún método HTTP para enviar la información.

Esto hace que la habilidad de procesar, y manipular formularios sea vital si queremos llegar a hacer aplicaciones web completas, con funcionalidades que se puedan tomar en cuenta y que lleguen a desarrollar nuestras ideas.

Requisitos

1- Para poder llevar a cabo este tutorial necesitamos cumplir algunos requerimientos previos, en primer lugar debemos tener una instalación de Node.js funcional, luego debemos tener un proyecto con Express, no importa que no tenga estructura de carpetas, pero si necesitamos que el framework esté disponible en la ubicación.

2- Tenemos que tener nociones básicas de npm, y de HTML, ya que aunque se explican los conceptos de forma muy sencilla, hay fundamentos que no se explican como por ejemplo que es una etiqueta, o que es un atributo HTML.

3- Por ultimo necesitamos un navegador, y un editor de texto para poder escribir y validar nuestra aplicación.

Aspectos básicos de un formulario

Antes de llegar a ver el funcionamiento de Express para procesar los formularios, debemos conocer un poco más a profundidad los aspectos básicos de estos, ya que son una parte vital de la construcción de nuestras aplicaciones cuando queremos o necesitamos capturar datos del usuario.

Veamos el siguiente código donde hemos creado un formulario sencillo de un campo que captura nuestra fruta preferida.

<form action="/procesar" method="POST">
    <input type="hidden" name="oculto" val="campo oculto pero no invisible!">
    <div>
	    <label for="campofruta">Su fruta preferida: </label>
		    <input type="text" id="campofruta" name="fruta">
    </div>
    <div>
	    <button type="submit">Enviar</button>
    </div>
</form>

En primera instancia, un formulario debe componerse por una etiqueta <form> dentro de esta debe haber al menos un atributo method que le va a indicar a nuestro navegador la forma en la que nos enviará la información, puede ser POST o GET, que son los métodos básicos HTTP, también le podemos colocar un atributo llamado action, si este no existe el formulario se enviará a la misma ruta que lo sirve, si existe se enviará a la ruta que se le especifique como en el caso del ejemplo.


Como vemos el formulario HTML a pesar de ser un elemento muy sencillo, tiene varios detalles que vale la pena rescatar, destacar y explicar para evitar confusiones a futuro.

¿Qué pasa luego de enviar un formulario?

Luego de recibir un formulario tenemos muchas opciones, independientemente del framework que utilicemos, ya sea Express, Laravel, Django, etc. Hay un proceso que es bueno seguir, ya que este es el que le va a decir a nuestro usuario si sus datos fueron recibidos, si se procesaron, o si hubo un error. Este proceso lo podemos dividir en dos grupos, respuesta y redirección.

Utilizar el middleware

Para preparar nuestra aplicación Express para poder procesar formularios, necesitamos en primer lugar instalar un complemento llamado body-parser, este es quien nos ayudará a manipular los datos que nos envíe el navegador. Para ello en nuestra consola de Node.js debemos utilizar la instrucción:

npm install --save body-parser

Veamos la respuesta que nos genera la ejecución de esta instrucción:

Luego ya dentro de nuestro archivo app.js o el nombre que le hayamos colocado simplemente debemos incluir este middleware para que nos ayude con la interacción:

app.use(require('body-parser')());

Con ello estamos listos para procesar el contenido de nuestros formularios, directamente en nuestra aplicación Express, puede parecer algo complejo debido a que otros frameworks no nos exigen este tipo de instalación, sin embargo Express lo hace para darnos la libertad de procesar la información como lo deseemos, este es solo un camino de los muchos que existen.

Creando nuestro formulario

Vamos a crear un formulario que tenga la función de captar la fruta favorita del usuario vamos a utilizar el que creamos en la sección anterior del tutorial para mayor facilidad, en nuestra carpeta donde hemos instalado Express, vamos a crear un archivo llamado server.js, app.js o cualquier nombre que le queramos poner sin embargo el contenido es lo importante. Dentro vamos a empezar por requerir el uso de express, luego debemos generar un objeto aplicación y este debe utilizar el middleware body-parser.


Esto hará que podamos entender el flujo de nuestro programa, y así poder procesar en un futuro formularios más complejos. Veamos a continuación el código explicado:

var express = require('express');

var bodyParser = require('body-parser');

var app = express();

app.use(bodyParser());

app.set('port', process.env.PORT || 3001);

app.get('/', function(req, res){

  var html = '<form action="/procesar" method="POST">'+
    '<input type="hidden" name="oculto" val="campo oculto pero no invisible!">'+
    '<div>'+
	    '<label for="campofruta">Su fruta preferida: </label>'+
		    '<input type="text" id="campofruta" name="fruta">'+
   '</div>'+
    '<div>'+
	    '<button type="submit">Enviar</button>'+
    '</div>'+
'</form>';
			  
  res.send(html);
});

app.post('/procesar', function(req, res){
  var fruta = req.body.fruta;
  var html = 'Tu Fruta Favorita es: ' + fruta + '.<br>' +
			 '<a href="/">Probar de nuevo.</a>';
  res.send(html);
});

app.listen(app.get('port'), function(){
  console.log( 'Express se ha iniciado en http://localhost:' +
    app.get('port') + '; presione Ctrl-C para cerrar el servidor.' );
});

Ya con esto hemos cumplido la creación de nuestra aplicación, ahora vamos a revisar como mostrarla, para ello simplemente debemos escribir la instrucción:

node server.js

Donde server.js es el nombre que le hemos colocado a nuestra aplicación, y según el puerto que hayamos colocado luego podemos ver nuestro formulario en el navegador:

Por supuesto esto puede ser más estético, utilizando Bootstrap, o estilos CSS, sin embargo para los propósitos y el alcance de este tutorial es perfecto para entender el manejo de los formularios. Si interactuamos con el mismo al escribir algo en el campo y hacemos click en enviar, veremos cómo llegamos a nuestra URL procesar:

En este caso hemos dejado un link para retornar al inicio, este procesamiento pertenece al tipo de redirección, ya que hemos enviado al usuario a otra ruta y recibió ahí el resultado de su consulta, por supuesto existen muchas validaciones de las que carecemos en este ejemplo, como por ejemplo si se envía el campo en blanco, como validamos si se hace un envío desde otro origen, etc. Son cosas validas pero que escapan del objetivo del tutorial, solo las mencionamos para que sepan que otros pasos siguen en su desarrollo como programadores en Express.

Con esto hemos finalizado este tutorial, como vemos Express nos facilita mucho las cosas al momento de trasladar la información del Front-End a nuestra lógica, el manejo simplificado de las rutas, y el uso de middlewares para ayudarnos a decodificar información lo hace perfecto para ahorrarnos tiempo de desarrollo.