Primeros pasos con Node.JS (3 parte)

Una vez hemos visto como instalar node.js y express vamos a crear un formulario de contacto y validar sus campos, para ir viendo como funciona express.

Para realizar esto vamos a usar el módulo express-validator

 npm install express-validator 

Vamos a modificar paso a paso el template por defecto que genera express:

- 1º Vamos a generar nuestro "código" html adaptado a Jade.

En la ruta /views vamos a encontrar los ficheros .jade que son los encargados de generar el código html de nuestra pagina. El fichero layout.jade es donde vamos a definir el "esquema" de nuestro portal:

doctype 5
html
  head
    title #{title}
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    header
      h1 #{title}
    block content
    block contact

#{title} Variable que vamos a usar para añadir un texto a nuestro portal, en este casi estamos generando el titulo del portal y un texto h1.

block xxxx Es el lugar de nuestro portal donde vamos a mostrar contenido de diferentes páginas.

En el fichero index.jade vamos a definir el contenido que vamos a mostrar en la página inicial del portal, en este caso vamos a mostrar un listado de url a las que poder acceder.

extend layout
block content
   nav
     ul
       li 
         a(href="/") Inicio
       li 
         a(href="/contacto") Contacto
       li 
         a(href="http://www.google.es") Google

Con extend layout vamos a indicarle a nuestra página que es parte del layout principal y block content el lugar del layout donde vamos a mostrar el contenido de esta página.

Ahora vamos a crear el fichero contacto.jade en el cual vamos a representar el formulario de contacto que queremos validar, añadiendo el siguiente código.

extend layout
block error
   - function isEmptyObject(obj) {
   - var name;
   - for (name in obj) {
   - return false;
   - }
   - return true;
   - }
   - if (isEmptyObject(errors) == false)
   p.errorMessage= "Se ha producido el siguiente error:"
   ul  
     - each error in errors
        li= error.msg

block contact
   div
     form(id='contacto',action='/contacto',method='post')
       table
         tr
    td
      |email:
    td
      input(id='email',type='text',value='',name='email')  
  tr
    td
      |nombre:
           td
             input(id='nombre',type='text',value='',name='nombre')
  tr
    td
      |asunto:
    td
      input(id='asunto',type='text',value='',name='asunto')
  tr
    td
      |mensaje
    td
      textarea(id='mensaje',name='mensaje', rows:50)
  tr
    td
      input(type="submit", value="Enviar", name='enviar')

   p #{message}

Como podeis observar hemos definido la función isEmptyObject para verificar si alguno de los campos del formulario se encuentra vacio, cuando realicemos el submit.

- 2º Vamos a definir las url que van a recibir peticiones en nuestro portal, para ello vamos a ir al directorio /routes y vamos editar el fichero index.js añadiendo lo siguiente:

exports.index = function(req, res){
  res.render('index', { title: 'Experimentando en HispaBigData con NODE.js' })
};

exports.contacto = function(req, res){
  res.render('contacto',{ title: 'Experimentando en HispaBigData con NODE.js - formulario de contacto' });
};

- 3º Vamos a definir el servidor web, la configuración de nuestro template y definiremos las  llamadas por post y su validación, para ello vamos a editar el fichero app.js.

var express = require('express')
  , expressValidator = require('express-validator') //El Modulo donde que vamos a usar para la validación del formulario
  , routes = require('./routes')
  , http = require('http')
  , path = require('path');

var app = express();

// all environments
app.set('port', process.env.PORT || 3000); // El puerto por donde vamos a servir nuestro servidor web
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');  // El tipo de template que vamos a usar para interpretar el html
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(expressValidator); // Inicializacion del modulo Express Validator

app.use(app.routes);

app.use(express.static(path.join(__dirname, 'public')));

// development only
if ('development' == app.get('env')) {
  app.use(express.errorHandler());
}

app.get('/', routes.index);
app.get('/contacto', routes.contacto);

app.get('/contacto', function(req,res){
    res.render('contacto', {
        title: 'Ejemplo de validación de formulario',
        message: '',
        errors: {}        
    });            
});

//Aqui vamos a recibir las variable por post cuando pulsemos el botón enviar de nuestro formulario
app.post('/contacto', function(req,res){
    req.assert('nombre', 'El campo nombre es requerido').notEmpty();           //Validando el nombre
    req.assert('email', 'El campo email es requerido').isEmail();  //Validando el email

    var errors = req.validationErrors();  
    if( !errors){   //No se ha encontrado ningun error en la validacion
        res.render('contacto', {
            title: 'Validacion de Formulario',
                message: '',
                errors: {}
        });
       
    }
    else {   //Display errors to user
        res.render('contacto', {
            title: 'Validacion de formulario con error',
            message: 'No se han rellenado los campos requeridos',
            errors: errors
        });
    }
 });


http.createServer(app).listen(app.get('port'), function(){ //Creacion del servidor web 
  console.log('Express server listening on port ' + app.get('port'));
});

Una vez disponemos de todos los ficheros tal y como os hemos explicados, podemos proceder a levantar el servidor web para comprobar su funcionamiento:

 node app.js 

Como podéis observar, entendiendo la estructura del framework express, es muy sencillo crear un portal, la validación de este formulario es bastante sencilla, os animo a que realicéis pruebas para que hagáis una validación mas completa, usando variables para guardar el valor de cada uno de los campos en caso de error. Os podéis descargar este ejemplo desde aquí, tened en cuenta que tenéis que tener los módulos instalados para que funcione correctamente.