Cargando

Ir a contenido


 


Manejar formularios con Express

En este tutorial veremos cómo hacer un manejo de formularios empleando el framework Express, llegando así a conocer algunas de las herramientas que este entorno nos ofrece para poder capturar los datos de los usuarios en nuestra aplicación.


Escrito por el mar 27 2015 01:34


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.

Aspectos generales
Dentro de nuestro formulario funcionan todas las etiquetas HTML que deseemos, sin embargo las que tienen más importancia son las de entrada de datos como en el caso de los tipo <input> ya que estas etiquetas y su valor son las que se enviarán al momento de hacer submit que es el otro tipo de input que necesitamos, ya que es el botón de acción. Los datos los recibiremos con el nombre que le hayamos puesto a las propiedades name de cada uno de los campos <input> que hayamos creado, también es importante colocar un atributo id a cada campo y que este sea único de forma de poder manipular los elementos en el DOM de una forma elegante.

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.

Respuesta
En este grupo de acción podemos una vez que el usuario envía el formulario y hagamos un procesamiento enviar una respuesta HTML al mismo, es decir, imprimimos un mensaje, o creamos una nueva vista, aquí le podemos indicar si los datos fueron correctos o en su defecto si hubo algún error. Esta respuesta puede ser tipo AJAX, para que la misma se genere sin cargar la página por completo, o al recargar mostrar la nueva vista, o simplemente generar un mensaje animado con JavaScript.

Redirección
En este otro grupo, una vez que hemos procesado la información hacemos una redirección y enviamos al usuario ya sea a otra vista, o simplemente a una pantalla donde le agradecemos que haya utilizado nuestra aplicación, puede parecer igual a la respuesta, sin embargo lo que hacemos es mandar al usuario a otro lugar de nuestra aplicació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.

Definir las rutas
Acto siguiente debemos definir las rutas, en nuestro caso vamos a utilizar la ruta raíz para mostrar el formulario, por lo que al acceder directo a nuestra aplicación tendremos el resultado directamente, luego vamos a crear una ruta que se llame procesar que reciba el método POST, esta lo que hará será recibir los datos del formulario para finalmente imprimir un HTML indicando el dato recibido.

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.
¿Te ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo
9
VOTA
5
50%
4
50%
3
0%
2
0%
1
0%

  Información

  •   Publicado mar 27 2015 01:34
  •   Visitas 1.5K
  •   Nivel
    Profesional



Tutoriales Relacionados


1 Comentarios

Muy buen tuto de este framework, se agradece para empezar a entenderlo. Me lo guardo en favoritos.

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
Demuestra que eres experto!
  ESCRIBIR TUTORIAL
Suscribirse