domingo, 10 de abril de 2011

Tutorial: de codeigniter agregando Form Validation Class al Chat.

Por petición de uno de los usuarios e decidió hacer este tutorial que es muy sencillo, lo que vamos a hacer es usar el form validation class para validar el nombre introducido por el usuario en el login del chat que hicimos en el tutorial pasado.

Para ello, primero les voy a explicar como opera el form validation class:

Todo comienza cuando el usuario entra a la pagina de login, php comprueba si previamente se a corrido la validación de formulario, despues si no se a corrido la inicia y renderiza la vista con el formulario, el formulario que esta apuntando al mismo controlador y metodo, el formulario es rellenado por el usuario y enviado, otra ves php vuelve a comprobar si la validaciond del formulario ya a sido iniciada previamente, si es asi, con las reglas establecidas previamente empieza a comprobar que todos los parametros cumplan las reglas, si no las cumplen te devuelve al login y muestra los errores, si efectivamente cumplen las reglas los envia a una pagina donde se muestre nuestro mensaje de exito o formulario enviado.

Primer paso: Ahora vamos al chat.

Ya no vamos a necesitar la función submit porque todo se va a hacer dentro de la misma función index, tenemos que precargar la librería de form_validation($this->load->library('form_validation');) la funcion para comprobar que la validacion del formulario ya inicio con anterioridad o el formulario enviado cumple todas las reglas es: $this->form_validation->run(), si la respuesta es false mostramos el formulario, y si la respuesta es true registramos la sesion y lo mandamos al chat. A la final nos debe quedar asi:

    function index()
    {
        $this->load->helper('form');
        $this->load->library('form_validation');

        if ($this->form_validation->run() == FALSE)
        {
            $this->load->view('header');
            $this->load->view('login');
            $this->load->view('footer');
        }
        else
        {
            $this->session->set_userdata('name',$this->input->post('name'));
            redirect('/chat');
        }
    }

Cabe destacar que para que esto empieze a funcionar pues debemos en el formulario modificar la ruta del formulario a solo login, si lo ejecutamos ahorita veremos que el formulario solo se va a recargar y no va a hacer nada mas, porque no hemos establecido reglas de validacion.

Paso 2: Estableciendo las reglas de validación.

Para poner las reglas de validacion se usa esta funcion: $this->form_validation->set_rules();, la cual acepta tres parametros,
  1. El nombre exacto de el campo.
  2. El nombre humano, o como queremos que salga cuando s emuestren los errores.
  3. Las respectivas reglas de validación.
Como tenemos un solo campo pues va a ser mas sencillo, solo vamos a poner unas pocas reglas, estas deben estar separadas por "|" :
  1. required: Campo requerido
  2. min_length: Minima cantidad de caracteres
  3. max_length: Maxima cantidad de caracteres.
Solo deberiamos agregar: $this->form_validation->set_rules('name', 'Seudonimo', 'required|min_length[5]|max_length[32]');

Al ejecutarlo si no metemos nombre, o menor a 5 o mayor a 32 pues nos devolvera y no nos dara ningun error, sino es asi nos enviara al chat.

Paso 3: Mostrando los errores en el formulario.

Para mostrar los errores hay dos maneras, una mostrandolos todos a la ves y la otra que los muestra dependiendo del campo, la primera es con la funcion  validation_errors(); , la  segunda es con form_error('name'); en nuestro caso cualquiera de las dos opciones nos van a servir. Pueden ponerlo donde quieran.

Por defecto el error viene delimitado con una <p>, pero si deseamos cambiarlo podemos en el controlador poner $this->form_validation->set_error_delimiters('<div class="error">', '</div>');, individualmente form_error('name', '<div class="error">', '</div>'); o grupal validation_errors('<div class="error">', '</div>'); cualquiera de las tres opciones esta bien, seria bueno que añadieran al css esto:

.error{ display: block; margin-top: 10px; border: 1px solid #cd0a0a; background: #fef1ec; color: #cd0a0a; padding: 8px 10px 8px 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;}

Y si deseamos que los errores salgan en español pues debemos descargar de  http://sosinformatico.blogspot.com/2011/02/el-espanol-llego-codeigniter-20.html las librerias en español.


Paso 4: Rellenando el formulario.

Una de las cosas más fastidiosas que hay en internet es rellenar un formulario, creo que estaran de acuerdo conmigo que hay gente que se pasa de exagerado que para poder registrarte te piden mas datos que en el acta de nacimiento, y entonces imaginate llenaste los 50 campos que tiene el santo formulario y cuando le das enviar te equivocaste en el segundo campo porque se te olvido poner de que pais eres, y entonces tienes que rellenar todoooo el formulario de nuevo porque al programador le dio flojera de ayudarte un poco y poner que volvieran a slair los datos que ya tu habias introducido, pues bueno nuestra libreria ya trae funciones para todo eso, la funcion se llama set_value('name');, simplemente en el formulario agregamos un <?php echo set_value('name'); ?>, en el atributo value de nuestro input. La linea del input debe quedar asi:

<input type="text" name="name" id="name" value='<?php echo set_value('name'); ?>' />

Paso 5: Callback, nuestra propia regla de validación.

El form Validation class nos permite tambien crear nuestras propias reglas de validación, esto lo voy a hacer no porque el chat lo amerite, sino para que aprendan como se hace y que esto existe, la funcion sera solo para saber si el usuario solo introdujo caracteres permitidos,

Agregamos otra regla de validacion callback_caracteres, tambien en el controlador debemos crear una funcion llamada caracteres que va a recibir un parametro, y va a hacer una comprobacion de que el seudonimo comience con letras. si es asi retornara true, sino devolvera false se cancelara el envio del formulario y se mostrar el error que especifiquemos.

Con la funcion $this->form_validation->set_message('caracteres', 'El %s debe comenzar con letras.'); establecemos cual es el mensaje de error para nuestra funcion propia de validacion.

Asi queda el codigo al final:

    function index()
    {
        $this->load->helper('form');
        $this->load->library('form_validation');
        $this->form_validation->set_rules('name', 'Seudonimo', 'required|min_length[5]|max_length[32]|callback_caracteres');
        $this->form_validation->set_error_delimiters('<div class="error">', '</div>');
        if ($this->form_validation->run() == FALSE)
        {
            echo $this->form_validation->run();
            $this->load->view('header');
            $this->load->view('login');
            $this->load->view('footer');
        }
        else
        {
            $this->session->set_userdata('name',$this->input->post('name'));
            redirect('/chat');
        }
    }
    function caracteres($str)
    {
        if (preg_match("/^[a-zA-Z]/i", $str))
        {
            return TRUE;
        }
        else
        {
            $this->form_validation->set_message('caracteres', 'El %s debe comenzar con letras.');
            return FALSE;
        }
    }



Bueno hasta aqui el tutorial por hoy, espero que le haya gustado y les sirva, aqui esta el link con el chat como lo llevamos hasta ahora. http://www.box.net/shared/xssugse5qe

2 comentarios:

  1. Exelente tutorial boy a practicarlo por que estoy interesado en este framerwork

    ResponderEliminar
  2. Buen aporte, gracias, agregado al reader. Saludos.

    ResponderEliminar