lunes, 25 de abril de 2011

Libro: Fundamentos de Jquery

Hoy navegando por la red, consegui este libro muy bueno, uno de los pocos que e visto traducido al español y que ademas tiene ejemplos y otras cosas incorporado, muy util para todos los que estan comenzando ya que tocan un poco el tema tambien de javascript, este es el contenido:

Esta es la pagina, http://librojquery.com/. Ya saben si estan empezando o quieren aprender un poco más, este libro les puede ayudar, suerte en la aventura el conocimeinto.

domingo, 10 de abril de 2011

Jquery Tags input + Jquery ui autocomplete

Este fin de semana, termine las clases en la universidad, ando de vacaciones y con bastante tiempo libre. Hace un tiempo hice un trabajo para la pagina de artigoo, en la cual entre muchas las cosas que tuve que hacer fue acomodar un script de http://xoxco.com/clickable/jquery-tags-input para que pudiera trabajar con autocomplete, el problema es que el script lleva desde hace un tiempesito que no es actualizado trabajaba con jquery 1.3.2 y además trabajaba con un script de autocomplete descontinuado y ya un poco feo, entonces tuve que acomodarlo un poco y darle unos retoques para que pudiera funcionar con jquery ui autocomplete y la ultima versión de jquery.

Asi que si usas tags para organizar tags en tu website? Este plugin tornara tu aburrida lista de tags en un mágico campo que torna cada tag en una estilizada objeto con su propio link para eliminarlo. El plugin maneja toda la data - y en tu formulario se verán los tags delimitados por una coma.

El script no esta cien por ciento perfeccionado pero es funcional, después lo mejorare, si me pueden hacer llegar sus ideas o sugerencias para la mejora del plugin seria bueno, después que lo mejore lo publicare, pero mientras tanto aqui se los dejo, con un pequeño ejemplo. http://www.box.net/shared/8popiobf1u

Ya saque la nueva versión, aqui esta:  version 1.3

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

sábado, 9 de abril de 2011

Tutorial: Crea tu aplicacion de chat con codeigniter(php) y jquery ajax

 En el desarrollo web con codeigniter y jquery una de las primeras dudas que siempre surgen es como usar el jquery ajax con codeigniter, es uper sencillo y aquí les muestro un tutorial de como crear un chat con codeigniter y jquery ajax, este tutorial es inspirado en este tutorial, lo e echo también para que puedan hacer una comparación entre programar solo con php o programar con un framework. El chat que vamos a crear es muy sencillo y no trabaja con base de datos, pero para empezar a aprender sera muy util, después lo mejorare e ire publicando.



Introduccion:

Primero vamos a definir como va a ser la lógica de nuestro chat, el usuario entra a nuestro chat, el cual le va a mostrar un formulario para hacer login, cuando el usuario envie el formulario el sistema comprobara que halla especificado un nombre y después establecera una variable de sesión con el nombre del usuario lo enviara a el chat, el cual ara la comprobacion de que este establecido la variable de sesión con el nombre del usuario y mostrara el chat, el chat debe tener además de la función principal dos funciones mas una para mostrar el historial del chat y otra para agregar los mensajes que el usuario envié. Todo el historial se guardara en un solo archivo el cual sera que se le muestre al usuario.

Primer paso: Creando las vistas.

Aunque este tutoríal es muy sencillo, vamos a crear 4 vistas, 2 vistas serán el template, y las otras dos serán una para el login y la otra para el chat como tal.

Aquí les dejo los códigos de cada una de las vistas:

header.php

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Codeignier chat</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
</head>
<body>


footer.php

</body>
</html>

El footer y el header van a ser iguales tanto en el login como en el chat, estos dos solo incluyen la estructura del html y la referencia a el script de jquery.

login.php

<div id="loginform">
<form>
<p>Por favor introdusca su nombre para continuar:</p>
<label for="name">Nombre: </label>
<input type="text" name="name" id="name" />
<input type="submit" name="enter" id="enter" value="Enter" />
</form>
</div>
<style>
*{margin:0;padding:0; text-align:center;}
#loginform {
margin:0 auto;
padding-bottom:25px;
background:#EBF4FB;
border:1px solid #ACD8F0; }

#loginform { padding-top:18px; }

#loginform p { margin: 5px; }
</style>

En el formulario de login el usuario especificara cual es el nombre de usuario que desea usar.

chat.php

<style>
    /* CSS Document */
    body {
    font:12px arial;
    color: #222;
    text-align:center;
    padding:35px; }

    form, p, span {
    margin:0;
    padding:0; }

    input { font:12px arial; }

    a {
    color:#0000FF;
    text-decoration:none; }

    a:hover { text-decoration:underline; }

    #wrapper {
    margin:0 auto;
    padding-bottom:25px;
    background:#EBF4FB;
    width:504px;
    border:1px solid #ACD8F0; }
    #chatbox {
    text-align:left;
    margin:0 auto;
    margin-bottom:25px;
    padding:10px;
    background:#fff;
    height:270px;
    width:430px;
    border:1px solid #ACD8F0;
    overflow:auto; }

    #usermsg {
    width:395px;
    border:1px solid #ACD8F0; }

    #submit { width: 60px; }

    .error { color: #ff0000; }

    #menu { padding:12.5px 25px 12.5px 25px; }

    .welcome { float:left; }

    .logout { float:right; }

    .msgln { margin:0 0 2px 0; }
</style>
<div id="wrapper">
<div id="menu">
<p class="welcome">Bienvenido, xxxx<b></b></p>
<p class="logout"></p>
<div style="clear:both"></div>
</div>
<div id="chatbox"></div>
<input name="usermsg" type="text" id="usermsg" size="63" />
<input name="submitmsg" type="button"  id="submitmsg" value="Enviar" />
</div>

Este es el chat, ya de una ves con el estilo, en <p class='welcome'> bienvenido </p> es donde ira el nombre del usuario, en <p class="logout"></p> es donde ira el link para salir de la aplicacion, ya al final dos input uno tipo text, para que el usuario especifique el mensaje que desea enviar y el otro un boton simple para enviar el texto.

Paso 2:  Creando el login.

Bueno lo primero sera crear un controlador llamado login.php, y modificar en /application/config/routes.php y poner como controlador pre establecido($route['default_controller']) en login. De acuerdo a la lógica de lo que hay que hacer, debemos primero crear nuestra función index, y empezar cargando la libreria de sesión($this->load->library('session');) y el helper form ($this->load->helper('form');), despues continuamos cargando nuestra vista($this->load->view('login')), por supuesto tenemos que cargar las tres vistas header, login y footer, al usar la función $this->load->view se envían directamente como salida al navegador. la función index debería quedarnos así:

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

    $this->load->view('header');
    $this->load->view('login');
    $this->load->view('footer');
}

También debemos crear una función más en nuestro controlador una llamada submit, donde se registra el nombre del usuario y se redireccionara a el chat.  Para comenzar nuestra función debemos meter en una variable el parametro enviado por post, con la libreria input que ya esta pre-cargada por defecto en codeigniter usando la funcion $this->input->post(), despues comprobar que no este vacio, y si esta vacia redireccionar al formulario de login, sino, establecer la variable de sesion($this->session->set_userdata();) con el nombre elegido por el usuario y redireccionamos al chat. Para redireccionar vamos a usar la función redirect() que pertenece a la url helper,

function submit()
{
        $name = $this->input->post('name');
        if(!empty($name))
        {
            $this->session->set_userdata('name',$name);
            redirect('/chat');
        }
        else
        {
            redirect('/login');
        }
}

Para no tener que estar cargando en cada funcion las diferentes librerias y helpers que vamos a necesitar, vamos a crear la funcion contructora y de hay los cagaremos:

    function __construct()
    {
        parent::__construct();
        $this->load->library('session');
        $this->load->helper('url');
        $this->load->helper('form');
    }

Paso 3: Estructurando el chat.

En el chat ya tenemos dispuesto un area donde vamos imprimir el nombre que el usuario eligio, con esta simple linea de codigo imprimiremos el nombre del usuario <?php echo $this->session->userdata('name'); ?>.

Tambien dispusimos un area donde esta el link de salida del chat donde crearemos el link con la funcion anchor que proviene de el helper url, pondremos <?php echo anchor('/chat/logout', 'Salir del chat.', "id='exit'") ?>, el primer parametro es a donde va a estar dirigido el enlace, el segundo es el texto que va a mostrar y el tercer parametro permite especificar atributos a el enlace, el atributo id  lo agregamos para crear una funcion para que parescar un cuadro de dialogo de confirmacion para salir del chat, para crear esta funcion debemos crear la etiqueta script y adentro colocar:

$(document).ready(function(){ 
    $('#exit').click(function(event){ 
        var exit = confirm('Esta seguro que deseas salir?');
        // con esta funcion aparecera un cuadro de confirmacion
        if(exit==false){return false;}
        // si la persona marco cancelar, la funcion devolvera false y se cancelara.
    });
});

Paso 4: Dandole vida al chat.

Ahora debemos darle vida a nuestro chat, para trabajar con archivos vamos a usar el helper file que trae codeigniter, primero debimos crear una carpeta en la ruta principal que la vamos a llamar chat y adentro crearemos un archivo llamado chat.html, completamente vacio hay guardaremos el historial del chat. De el helper file vamos a usar mas que todo estas dos funciones, read_file('./chat/chat.html') para leer el contenido del archivo y write_file('./chat/chat.html','lo que se le va a agregar al archivo','a'); para escribir al archivo, lo importante de destacar de esta funcion es que en el tercer parametro definimos el modo en que se va a escribir el archivo, el modo a simplemente agregara el texto al final del archivo, para mas informacion sobre lo modos aqui!.

Entonces en la vista agregaremos la funcion para leer el archivo dentro de <div id="chatbox"></div>.

Ahora si creamos el controlador chat, donde crearemos para empezar dos funciones el contructor y el index, en el contructor comprobaremos que este definido la variable de sesion con el nombre sino redirecionaremos al login, y en el index simplemente mostramos el chat.

    function __construct()
    {
        parent::__construct();
        $this->load->library('session');
        $this->load->helper('url');
        $this->load->helper('file');
        if(empty($this->session->userdata('name')))
        {
            redirect('/login');
        }
    }

    function index()
    {
        $this->load->view('header');
        $this->load->view('chat');
        $this->load->view('footer');
    }

Y la funcion actualizar donde el chat recibira el historial del chat.

function actualizar()
{
    echo read_file('./chat/chat.html');
}

Paso 5: Manejando las entradas del usuario.

Una vez que el usuario escriba el mensaje, deseamos tomar su entrada y escribirla en nuestro log de chat. Para lograr esto, debemos usar jQuery y codeigniter para sincronizar por ajax la informacion del lado del cliente y del servidor.

Jquery

En la vista del chat debemos agregar la funcion para que al hacer click en enviar se envie el contenido del input de usermsg a nuestro controlador y haci se agrege la entrada, esto se basara en la funcion post de jquery.

     $('#submitmsg').click(function(event){
        event.preventDefault(); //previene cualquier otro evento del boton.
        var clientmsg = $('#usermsg').val(); //obtiene el valor del input
        $.post('<?php echo site_url('/chat/agregar');?>', {mensaje: clientmsg});
       //hace la llamada ajax a el controlador, y envia  por post el mensaje
        $('#usermsg').attr('value', '');//limpia el input.
    });

Codeigniter

Para manejar las entradas del usuario debemos crear en el controlador de chat la funcion agregar.
Donde se agregara a nuestro chat el mensaje que el usuario escribio.

function agregar()
{
    $mensaje = "<div class='msgln'>(".date("g:i A").")  <b>".$this->session->userdata('name')."</b>:  ".$this->input->post('mensaje')."<br></div>";
    write_file('./chat/chat.html', $mensaje, 'a');
}

Paso 6: Mostrando el historial del chat

Después que se agrega el mensaje del usuario al historial del chat ahora ahi que poder mostrarlo al usuario, esto se hace también con una llamada ajas de jquery y una función en nuestro controlador de codeigniter


Solicitud por ajax del historial.

Esta solicitud es lo principal de nuestro sistema ya que esta le mostrara que es lo que a escrito el y lo que an escrito los demás usuarios, que es la base de cualquier chat.

En esta petición haremos la solicitud con la función ajax de jquery y pondremos el resultado en el div chatbox, esta funcion la vamos a enmarcar dentro de otra, la función nos quedaría así:

 $.ajax({
    type: "post",
    url: "<?php echo site_url('/chat/actualizar');?>",
    success: function(msg){
        $('#chatbox').html(msg);
    }
});

Auto-scrolling.

Como puede que hayan visto en otras aplicaciones de chat, el contenido automáticamente hace scroll hacia abajo si el contenedor del log de chat (#chatbox) se llena. Nosotros implementaremos una función simple y similar, que comparará la altura del scroll del contenedor antes y después de que hagamos la petición Ajax. Si la altura del scroll es mayor después de la petición, usaremos un efecto animado jQuery para hacer scroll en el div #chatbox.

    function loadLog(){
        var oldscrollHeight = $('#chatbox').attr('scrollHeight') - 20;
        $.ajax({
            type: "POST",
            url: "<?php echo site_url('/chat/actualizar');?>",
            success: function(msg){
                $('#chatbox').html(msg);
                var newscrollHeight = $('#chatbox').attr('scrollHeight') - 20; //La altura del scroll después del pedido
                if(newscrollHeight > oldscrollHeight){
                    $('#chatbox').animate({ scrollTop: newscrollHeight }, 'normal'); //Autoscroll hacia el fondo del div
                }
            }
        });
    } 

Primero almacenamos la pocisión del scroll antes de la solicitud, después de la solicitud almacenamos la nueva pocisión y si la nueva pocision es mayor que la vieja con la función animate hará una animación para bajar la pocisión de la ventana al final de la misma.

Ahora para actualizar constantemente el contenido del chat debemos usar la funcion setInterval, la cual cada cierto tiempo ejecutara la funcion loadLog, el segundo parametro especificara cada cuanto tiempo cargara la función.




Aqui esta el archivo completo: http://www.box.net/shared/q3hrklaca1.

Pd: Para evitar ataques xss, es bueno que activen el filtro xss general. Poniendo la variable $config['global_xss_filtering'] en true en el archivo /application/config/config.php.