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:
  1. Pre-procesa todas las variables de entrada por seguridad.
  2. 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.