Tutorial: Codeigniter y AJAX, manejando solicitudes.

A la hora de trabajar en codeigniter con eventos o llamadas AJAX pues el framework tiene herramientas muy precarias para trabajar con este tipo de solicitudes, trabajar con ello,  por ello nosotros tenemos que hacer nuestras propias funciones que nos ayuden a trabajar con este tipo de peticiones.(Eso es lo que a mi me gusta de este framework, que te ayuda en muchas cosas pero hay muchas otras que tu tienes que aprender, y que si ya lo tuvieras echo pues no aprenderías)

¿Como reconocer una llamada AJAX?

Lo primero que tenemos que estar claro es que una solicitud AJAX es casi igual que una solicitud normal, pero a la hora de programar es de suma importancia saber si es AJAX o no, porque de acuerdo al tipo de solicitud debemos retornar algo completamente diferente, lo cual si no se hace correctamente pues nos va a dar tronco de errores que nos puede costar hasta el trabajo, para solucionar esto hay varias opciones:

• Enviar una variable en las solicitudes AJAX: a esto me refiero a que cuando hagamos una solicitud AJAX mandemos una variable más, y después en el código reconozcamos  si se envia o no.
• Crear un método aparte solo para las llamadas AJAX:(la primera que use) una solución es crear un método aparte dentro del controlador para la llamada AJAX, es buena pero genera mas código innecesario y en ciertos casos repetir mucho código.
• Utilizar HTTP_X_REQUESTED_WITH para saber si es AJAX o no:(la que uso actualmente) desde el javascript se envía una cabecera que se llama HTTP_X_REQUESTED_WITH que tiene como valor XMLHttpRequest, que permite del lado del servidor saber que esa es una llamada AJAX.

Ahora bien, yo comenzé con la segunda opción, la cual es una buena idea pero me genero muchos problemas porque a veces cuando hay algún problema con los datos enviados re-direcciono al inicio y muestro un mensaje de error, pero al hacer esto me mostraba la ventana de inicio completa, y eso no era lo que quería(eso me costo perder un trabajo). Pero después averiguando descubrí que en los últimos años a habido una estandarización en lo que se refiere a las llamadas AJAX en la mayoría de los framework donde envian una cabecera que se llama HTTP_X_REQUESTED_WITH y que con esta cabecera se puede averiguar fácilmente si es o no una llamada AJAX. Entonces con simplemte poner 1 linea de codigo averiguo si es o no una llamada AJAX:

if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest')

Por supuesto como no vamos a andar pegando todo ese poco de lineas en todos los lugares donde los necesitemos podemos crear una librería o helper donde pongamos una función que nos devuelva el valor y así facilitarnos la vida, vamos a crear la librería ajax.php y pegamos este código:

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Ajax{
 function isAjax()
 {
  return isset($_SERVER['HTTP_X_REQUESTED_WITH']) && $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest';
 }
}

Con eso en nuestro controlador solo debemos poner: $this->ajax->isAjax() y ya nos dira si es o no una solicitud ajax. Bueno asta aquí este tutorial, espero que les sea de utilidad y lo implementen en sus proyectos, me despido hasta la próxima.

Tutorial: Jquery ajax

¿Que es AJAX?

Ajax es el acronimo de Asynchronous JavaScript And XML,  es una forma de desarrollo web que permite la creacion de paginas web interactivas y aplicaciones RIA (Rich Internet Applications). Ademas de que tambien forma parte esencial de la Web 2.0. El Ajax se ejecuta del lado del cliente y pèrmite mantener una comunicacion constante con el servidor, permitiendo modificar la informacion que ve el usuario sin necesidad de recargar la pagina.

El Ajax asi no lo sepamos ya forma parte del internet y de nuestra vida, aplicaciones como facebook, twitter, gmail, etc ya la usan, por nombrar algunas, el unico que falta eres tú.


El framework de jquery posee una completa suite de herramientas para trabajar con ajax, esta suite tiene funciones para trabajar con json, html, xml y js, además que es muy configurable por si queremos una carga sincronica o asincronica.

¿Cual es la utilidad de el AJAX?

El ajax es muy util principalmente para crear aplicaciones web que no requieran estar recargandose para funcionar, la comunicacion ajax entre cliente y servidor siempre es mas ligera que la comunicacion asincronica por lo cual se puede aumentar racionablemete la velocidad de la pagina, adémas tambien nos permite aumentar la interraccion del usuario con la pagina, y asi de esa manera mejor la experiencia del usuario.

El ajax es tan util que se pueden crear una pagina completa que muestre informacion nada más sin necesidad de php, asp o java. Ya que se puede ir cargando dinamicamente paginas dentro del nuestro servidor y mostrarlo donde queramos sin mucho problema.

¿Que es y como se usa $.ajax() ?

Es una función que realiza una peticion http ajax al servidor y despues permite manejar la respuesta, ya sea un error o no, ademas de que tambien permite facilmente cambiar el tipo de solicitud, caracteres, parametros, tipos de dato, etc. Primero les voy a mostrar las tres principales eventos de nuestra llamada:


Success(data, textStatus, jqXHR):

Esta es la función que se llama cuando la solicitud ajax a sido exitosa. pasa tres variables, data: es la informacion que devuelve la pagina, textStatus: que es el estatus de la solicitud y jqXHR que es el objeto XMLHttpRequest.

error(jqXHR, textStatus, errorThrown)

es la función que se llama cuando una llamada ajax no es exitosa, y nos permite manejar ese error para avisar al usuario. Entre los parametros que se pasan a la función estan, jqXHR que es el objeto XMLhttpRequest, textStatus que es una cadena de texto que describe el tipo de error pueden ser: "timeout", "error", "abort", and "parsererror", y por ultimó errorThrown cuando ocurre un error http devuelve una cadena con el error exacto.

complete(jqXHR, textStatus)

Es la función que se llama cuando la solicitud AJAX a finalizado, teniendo exito o no, esta función devuelve el objeto jqXHR y el estatus de la solicitud los posibles valores que puede tener son: "success", "notmodified", "error", "timeout", "abort", or "parsererror".

Ahora les voy a mostrar los parametros más importantes en las llamadas ajax:

• url: donde colocaremos la dirección de nuestra solicitud.
• data: es la información enviada al servidor, puede ser una cadena de texto o un objeto.
• dataType: donde se especifica el tipo de data que se esta esperando del servidor, y dependiendo del tipo de dato jquery hace algo al respecto, por ejemplo si decimos que es un script jquery lo trae y de una ves lo ejecuta, los tipos de datos soportados son: xml, html, script, json, jsonp y text.
• type: aqui es donde se especifica el tipo solicitud si POST o GET, predeterminado es GET.

Para mas información sobre jquery pueden visitar http://api.jquery.com/jQuery.ajax/.

Funciones para trabajar con ajax en jquery.


Realmente en jquery hay una sola funcion principal para trabajar con ajax que es $.ajax, el resto solo son metodos mas cortos de la funcion anteriror, que ya traen algunos parametros agregados. Las siguientes funciones llamadas metodos del lado corto.

• $.load( url, [ data ],[complete(responseText, textStatus, XMLHttpRequest)]):
  
  Carga informacion de el servidor y despues la pone en el elemento HTML que corresponda.
  ejemplo: $('#result').load('ajax/test.html');
  
  
• $.get( url, [data], [success(data, textStatus, jqXHR)], [dataType]):
  
  Hace una petición get en el servidor, permite especificar el tipo de dato que se espera y después permite manejar la respuesta.
  
  
• $.getJSON(url, [data], [success(data, textStatus, jqXHR)]):
  
  Carga variables codificadas en json del servidor por el método GET.
  
  
• $.getScript(url, [success(data, textStatus)]):
  
  Cara un script del servidor y después lo ejecuta.
  
  
• $.post(url, [data], [success(data, textStatus, jqXHR)], [dataType]):
  
  Hace una solicitud al servidor por el método POST.
  
  

Jquery tambien trae funciones de ayuda para hacer algunas actividades regulares que tienen que ver con ajax y formularios, otras para manejar eneventos y otras para configurar las llamadas ajax, aqui les dejo una lista, después las explicare:

• $.serialize()
• $.param()
• $.serializeArray()
• $.ajaxPrefilter()
• $.ajaxSetup()

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.