El SOS Informatico. Desarrollo y programacion web.

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,

El nombre exacto de el campo.
El nombre humano, o como queremos que salga cuando s emuestren los errores.
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 "|" :

required: Campo requerido
min_length: Minima cantidad de caracteres
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.

lunes, 28 de marzo de 2011

Tutorial: Jquery UI autocomplete y Codeigniter

Después de un buen tiempo sin escribir por exceso de trabajo, vuelvo con el tutorial prometido de como usar jquery UI autocomplete con codeigniter, es muy sencillo. Para comenzar vamos a necesitar tener las librerías de jquery ui que se pueden descargar de la pagina oficial: aqui!, podemos descargar un tema si queremos(yo descargue darkhide) , y por supuesto tener codeigniter.

Paso 1: Preparando el terreno.

Primero tenemos que crear un controlador que yo le voy a llamar autocomplete, una vista con el mismo nombre y una base de datos de usuarios que se van a mostrar.

En el código del controlador debemos por ahora agregar la carga de nuestra vista y la carga de el driver para base de datos y el uri helper que nos ayudara.

Código de controlador inicial:

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

class Autocomplete extends CI_Controller {
    function __construct()
    {
        parent::__construct();
        $this->load->database();
        $this->load->helper('url');
    }
    public function index()
    {
        $this->load->view('autocomplete');
    }
}

/* End of file welcome.php */
/* Location: ./application/controllers/autocomplete.php */

En el código de vista solo debemos poner el enlace a el css y js de jquery ui, para facilitarnos la vida nos ayudaremos con la función base_uri que nos permitirá darle una ruta absoluta.

Código vista:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>jQuery UI Autocomplete Ejemplo</title>
        <link type="text/css" href="<?php echo base_url(); ?>css/dark-hive/jquery-ui-1.8.10.custom.css" rel="stylesheet" />    
        <script type="text/javascript" src="<?php echo base_url(); ?>js/jquery-1.4.4.min.js"></script>
        <script type="text/javascript" src="<?php echo base_url(); ?>js/jquery-ui-1.8.10.custom.min.js"></script>
        <script type="text/javascript">
        </script>
    </head>
    <body>
    
    </body>
</html>

Y por ultimo crearemos una pequeña Base de datos de usuarios con solo un id y nombre de usuario, así:

CREATE TABLE `autocomplete`.`usuarios` (

 `id` INT  UNSIGNED NOT  NULL  AUTO_INCREMENT  PRIMARY  KEY ,

`user` VARCHAR( 80  )  CHARACTER  SET utf8 COLLATE utf8_general_ci NOT  NULL

);



INSERT INTO `usuarios` (`id`, `user`) VALUES

(1, 'mariano'),

(2, 'jose'),

(3, 'juan eduardo'),

(4, 'juan pedro'),

(5, 'no se uqe'),

(6, 'no se uqe mas');

Lo ultimo de este paso es configurar nuestra base de datos y ya debería cargar una pagina en blanco.

Paso 2: Configurando nuestra vista con autocomplete.

Ahora debemos configurar en la vista el autocomplete, solamente debemos agregar en el cuerpo un input text, y dentro de las etiquetas script la configuracion del autocomplete que va a ser referencia a una función que despues crearemos en nuestro controlador que se llamara ajax. Asi nos debería ir quedando la vista:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>jQuery UI Autocomplete Ejemplo</title>
        <link type="text/css" href="<?php echo base_url(); ?>css/dark-hive/jquery-ui-1.8.10.custom.css" rel="stylesheet" />    
        <script type="text/javascript" src="<?php echo base_url(); ?>js/jquery-1.4.4.min.js"></script>
        <script type="text/javascript" src="<?php echo base_url(); ?>js/jquery-ui-1.8.10.custom.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){
            $('#autocomplete').autocomplete({source:'<?php echo site_url('autocomplete/ajax'); ?>'});
        });
        </script>
    </head>
    <body>
    <p><label for='autocomplete'>Nombre de Usuario: </label><input type='text' id='autocomplete'></p>
    </body>
</html>

Paso 3: Empezando con el controlador.(Input Class)

En el controlador debemos crear una función llamada ajax que sera la encargada de enviar en formato json los datos para el autocomplete, para esto vamos a usar el Active Record Class de Codeigniter y el input class.

El codeigniter trae una clase ya echa y precargada para lo que son los input, esta libreria incluye funciones muy utiles:

Pre-procesa todas las variables de entrada por seguridad.
Provee algunas funciones para procesar las variables enviadas y pre-procesarlas.

Esta libreria nos provee una función que se llama $this->input->get(), esta función permite dos parametros el primero es para saber que variable de $_GET requerimos y el segundo establecer el filtrado en true(activado) o false(desactivado). La otra ventaja de esta función es que no nos va a dar error si nuestra variable no fue definida, ya que si la variable no fue definida devuelve un false. en nuestro caso agregariamos lo siguiente al código:

if($buscar=$this->input->get('term'))
{ 
}

Paso 4: Usando Active Record Class para buscar en la base de datos.

Continuamos con el active record class, esta clase trae funciones para seleccionar, insertar, eliminar y modificar ya predefinidas que nos pueden ahorrar muchas lineas de código ademas de que con estas funciones ya todo va pre-filtrado contra posibles ataques.

lo primero es ver la función basica de select, $query=$this->db->get('usuarios') esta función haria simplemente un "select * from usuarios" y devuelve un objeto en $query. Como queremos buscar dentro de user los usuarios que tengan un nombre parecido a el termino de busqueda, debemos usar la función $this->db->like(), que recibe dos parametros, en uno la columna en la que deseamos buscar y el otro lo que deseamos buscar. Y por ultimo usaremos la funcion $this->db->select(), para poder especificar que columnas queremos y como las queremos: a la final nuestra funcion nos quedaria asi:

        $this->db->select('id, user as value');
        $this->db->like('user', $buscar); 
        $query=$this->db->get('usuarios');

Que generaria algo asi "SELECT `id`, `user` as value FROM (`usuarios`) WHERE user` LIKE '%$buscar%'"

Ahora solo debemos verificar que la respuestasea mayor que 0, pero en ves de usar el clasico mysql_num_rows usaremos $query->num_rows() > 0, y para listar los resultados en ves de while ($row = mysql_fetch_array($result) ) usaremos foreach ($query->result_array() as $row). y por ultimo usamos la funcion json_encode para pasar nuestro array al formato json.

Condigo de la funcion ajax():

function ajax()
    {
        if($buscar = $this->input->get('term'))
        {
            $this->db->select('id, user as value');
            $this->db->like('user', $buscar); 
            $query=$this->db->get('usuarios');
            if($query->num_rows() > 0)
            {
                foreach ($query->result_array() as $row)
                {
                    $result[]= $row;
                }
            }
            echo json_encode($result);
        }
    }

Con esto ya queda listo nuestro autocomplete solo queda probarlo.

Nota:

Si usan php 5 pueden usar el Method Chaining que les permite hacer los select en una sola linea.
Es buena idea limitar el numero de filas que vamos a devolver con agregar $this->db->limit(10); es suficiente.
Este metodo devulve el id de el usuario a el autocomplete, podemos agregar al autocomplete el siguiente codigo para usar en algo esa info:
```
select: function( event, ui ) {
alert(ui.item ?
"Selected: " + ui.item.id :
"Nothing selected, input was " + this.value );
}
```

El resultado final esta en esta dirreccion: http://www.box.net/shared/agnursjr8n

sábado, 12 de marzo de 2011

Mi primer curso de photoshop.

Bueno, hace poco (hoy) termine de hacer un curso de photoshop en un instituto de aqui de venezuela que se llama Benllisoft, dictado por Victor Llanos y el curso de verdad muy bueno. Pues aprendi bastante sobre esta herramienta, ya yo conocia fireworks y no se me hico muy extraño, me encanto el curso y hicimos 5 trabajos que nos quedaron bien cheveres, aunque todavia tengo bastante que mejorar aqui se los muestro:

Primer Dibujo: un carro de Cocacola.

Todo venia por separado, hasta el logo de Coca-cola. pero a la final quedo chevere.

Segundo trabajo: Bulldog.

Tercer Trabajo: Flash

Cuarto Trabajo: Elefante en el ocaso

Quinto trabajo: El dragon maya

No son lo mas arrecho del mundo, pero estoy comenzando.

martes, 1 de marzo de 2011

Tutorial: Jquery UI autocomplete

Hace poco estaba creando un proyecto y cuando estaba usando codeigniter y jquery tuve unos problemas porque al enviar los parametros por get como lo hace autocomplete por defecto pues el sistema no hacia nada y se hiba a la pagina de inicio, pero para mi frustacion esto solo pasaba en el servidor y no en localhost asi que supuse que eran problemas quizas con el apache o algo asi y como andaba frustado porque no me funcionaba, decidi sentarme a revisar a ver si yo podria mandar la info en ves de por GET por POST, cuando busque por internet no conseguí nada de información, asi que me deje de vainas y me sente a arreglar yo mismo mi problema y lo solucione. Ahora quiero compartir esa info con ustedes y pongo este tutorial de como usar autocomplete.

¿Que es jquery UI Autocomplete?

Es un plugin de la librería jquery UI (USER INTERFACE), que nos permite agregar a un input text funcionalidad de mostrar un menú al usuario con las posibles opciones que puede buscar y eligir. de una lista pre-acomodada. Donde esa lista puede venir de un array, de un xml en nuestro servidor o de un código en php que se conecte a mysql y le muestre lo que nos interesa.

Opciones o parámetros:

disabled: Inhabilita o habilita el autocomplete, la opción por default es false.
appendTo: Selección en que elemento se va a abrir nuestro menú. el default es body.
delay: Sirve para especificar el tiempo que autocomplete va a esperar para activarse. default: 300.
minLength: El tamaño mínimo que debe tener el texto para empesar a buscar.default 1.
source: que puede ser un array o una función.

Eventos:

Create: cuando se crea el autocomplete.
Search: cuando se va a realizar una búsqueda.
Open: cuando se abre el menú.
Focus: es cuando el foco se mueve a un item de la lista, en este caso seria solo cuando es con el teclado.
Select: Cuando se selección un elemento de la lista
Close: Cuando la lista es cerrada.
Change: Después de que un item es seleccionado.

¿Como se usa Jquery UI Autocomplete?

Primero la opción sencilla, seleccionamos nuestro input text y le especificamos un array como source:

$('#selectbox').autocomplete({source:["codeigniter", "php", "jquery", "javascript"]});

Podemos también crear un variable de tipo array pasársela como source, ejemplo:

var lenguajes = ["codeigniter", "php", "jquery", "javascript"];

$('#selectbox').autocomplete({
source:lenguajes
});

También podemos usar un source remoto como un script php para ello solo vastaria con poner la dirección del script en el source, y el script deberia responder con las variable en formulada en json:

$('#selectbox').autocomplete({
source:"search.php"
});

En esta pagina conseguirán los ejemplos para cada cosa, si tienen alguna duda me pueden dejar un comentario y yo los ayudo.

http://jqueryui.com/demos/autocomplete/

Ahora bien, ¿como hago para pasar por post los comandos al php?

Pues no es muy complicado para el que no sabe usar $.ajax, debemos primero saber con en el parámetro source podemos usar funciones las funciones deben tener permitir que les pasen dos parámetros: request, response, la variable request almacena lo que el autocomplete esta buscando y response almacena la respuesta.

Ahora bien dentro de esa función vamos a crear una llamada ajax a nuestro script en php, debemos especificarle la url y el tipo de dato que va a devolver, también usando request.term pasaremos el termino que se desea buscar y después el resultado en json se lo vamos a pasar a la función autocomplete a través de response para que ella cree su lista.

A la final nuestro script debería quedar así:

    $("#selectbox").autocomplete({
        source: function( request, response ) {
                $.ajax({
                    type: "POST",
                    url: "search.php",
                    dataType: "json",
                    data: {
                        term: request.term
                    },
                    success: function( data ) {
                        response(data);
                    }
                });
            }
    });

Cave destacar que mediante este método, también podemos aprovechar las bondades de $.ajax y pasar varios parámetros al script ya que en el opción data de nuestra llamada ajax, podemos especificar varias variables, que era otra cosa que el autocomplete no nos permitia hacer.

Después haré un tuto para juntar esto con codeigniter y mysql, quizás con un poco de active record para que vean como es.