Su configuración es más bien sencilla, como la gran mayoría de estos plugins teniendo varias opciones de personalización y de callbacks:

Code block

$(function(){
    $(".ejemplo").tipTip();
});

Code block

<a href="http://blog.ipalaus.es" class="ejemplo" title="Blog personal de Isern Palaus">Isern Palaus</a>

En el siguiente vídeo en inglés, y del creador del plugin para jQuery, podemos ver varios ejemplos de su uso:

Descargar | tipTipv12.zip
Página oficial | TipTip jQuery Plugin

js-columns

Aún está un poco verde en su primera versión (31/01/2010) nos permite mostrar columnas dentro de un contenedor (es decir, div) y crea una paginación en caso de que el contenido sea más grande que el contenedor, y el mismo nos permite movernos en él sin tener que actualizar la página. También se adapta a la resolución de nuestro navegador en caso de que modifiquemos el tamaño de la ventana, creando el paginador de nuevo si hiciera falta. A parte, nos deja añadir imágenes fácilmente y nos cuadra la misma con las columnas creadas.

En el mismo rar nos viene una página de ejemplo, pero para crear un div con columnas lo haremos así:

Code block

$('.columna').columns({paging:true});

Descargar | js-columns-0.1.zip
Página oficial | js-columns

Esta es la revisión del tutorial que escribí hace más de un año. Es prácticamente lo mismo pero con todos los archivos que necesitas en un zip, a parte de ciertas modificaciones necesarias en el procesado de los datos.

Para esa gente que esta buscando un sistema de usuarios funcional con registro, tengo que decir que no tengo tiempo para programarlo todo por mi mismo para este manual. De este modo, como he hecho desde que comencé en CodeIgniter, usaremos una aplicación de terceros: un sistema completo de usuarios. Lo he basado en el trabajo de Popcorn, llamado ‘Redux Authentication’ (v2 beta).
Lo primero que necesitamos es descargar la librería de Redux. Accedemos al proyecto en Google Code y lo descargamos aquí. Puedes ir a la entrada oficial en el foro de CodeIgniter para preguntar sobre la misma.
Cuando descargues la librería, verás que dentro existe una carpeta llamada ‘Example Application’. Usaremos esta aplicación pero necesitamos actualizarla a la ultima versión de CodeIgniter, sino no nos funcionará. Ten en cuenta, que en el pack final ya esta actualizado pero es mucho mejor si lo haces por tu propio pie, aprenderás más.
Es muy fácil actualizarlo: descargas CodeIgniter y lo descomprimes. Ve a ‘Example Application’, renombra la carpeta a ajaxlogin (usaré este nombre en los ejemplos). Entra en la misma y seguidamente a /system. Borra todas las carpetas excepto application, donde esta la aplicación. Accede a la versión descarga de CodeIgniter y copia todas las carpetas que has eliminado (todas menos application). Puedes encontrar la guía oficial de CodeIgniter para la actualización aquí.
Entonces, instala la base de datos y configurala. Lo primero que tienes que hacer es añadir un grupo llamado ‘members’ en la tabla de grupos:

Code block

INSERT INTO groups (`id`, `name`, `description`) VALUES (NULL, 'member', 'Members')

En el archivo config/redux_auth.php verás que hay una opción para configurar el grupo por defecto. En la base de datos no tenemos datos de modo que necesitamos añadir un grupo por defecto y modificar el archivo de configuración para que lo detecte. Otra recomendación para este mismo archivo es cambiar la configuración de activación a FALSE porque no funciona del todo. Hay otras variables que puedes cambiar, como el método de entrada (username, email…). He elegido el e-mail, que es el que viene por defecto.  Cambiar para que sea el usuario no es difícil. Probarlo.

Code block

$config['email_activation'] = FALSE;

Code block

<script type="text/javascript" src="<?php echo base_url().'assets/js/jquery-1.3.2.min.js'; ?>"></script>
<script type="text/javascript" src=<?php echo base_url().'assets/js/ajaxlogin.js'; ?>"></script>

En este caso, la diferencia con el otro script, es que usaremos la función de Redux para el login y esto optimizará nuestro código ya que esta mucho más depurado. En el controller welcome añadiremos dos funciones:

Code block

function _check_login($email)
{
    return $this->redux_auth->login($email, $this->password);
}

function ajaxLogin()
{
    $this->load->library('validation');
    $this->password = $this->input->post('password');
    $this->loginemail = $this->input->post('email');

    $this->form_validation->set_rules('email', 'Email Address', 'trim|required|callback__check_login');
    $this->form_validation->set_rules('password', 'Password', 'trim|required');

    if ($this->form_validation->run() == false)
    {
        $data = array(    'success' =>    'no',
                'message' =>    'The email or password you provided are wrong.');

        $output = json_encode($data);
    }

    else
    {
        $data = array(    'success' =>    'yes',
                'welcome' =>    'Welcome '.$this->loginemail.'!');

        $output = json_encode($data);
    }

    $output = str_replace("\r", "", $output);
    $output = str_replace("\n", "", $output);

    echo $output;
}

Para entender el código: la primera función, _check_login(), usa el modelo redux_auth_model.php para validar el correo y la contraseña que hemos seleccionado. Para más información mira el modelo en la carpeta models. Si la información procesada es correcta devuelve TRUE, sino FALSE. En caso de que devuelva TRUE, la aplicación crea la sesión con nuestro e-mail. Si necesitas alguna cosa más, edita el modelo.

La segunda función es un mix de la función de login de Redux y mi función de AJAX. Toma los dos inputs y los valida. El primero, correo electrónico, usa la función callback a la función _check_login(). Si la información no es correcta, o sucede algún problema, devuelve FALSE. Entonces pasaremos la información a la función AJAX y la codificaremos con JSON. La información codificada se muestra tal que así: { “success”: “no”, “message”: “The email or password you provided are wrong.” }.

Hay que tener en cuenta que uso $this->password y $this->loginemail. Estas variables tienen que ser definidas en el inicio el controlador, así:

Code block

class Welcome extends Controller {

    private $password     = NULL;
    private $loginemail    = NULL;

    /**
     * index
     *
     * @return void
     * @author Mathew
    **/

    function index()
    {
        redirect('welcome/status');
...

Perfecto! Ahora modificaremos el login. Como sabes, la mejor manera de crear un formulario en CodeIgniter es accediendo a su user guide. De este modo, abre /views/login.php. Cuando tenemos un tenemos un formulario de login normalmente solo lo mostramos cuando el usuario no esta identificado. En el ejemplo de la librería Redux esto no pasa y tenemos que modificarlo. La manera es comprobar si existe el item ‘identity’ en la session. Añade al principio del archivo:

Code block

<?php
    if($this->session->userdata($this->config->item('identity')))
    {
        echo "<h1>You're aready logged in!</h1>";
    }

    else {
?>

        <h1>Login</h1>

Esto comprobará si existe. Al final del archivo, añade:

Code block

<?php
    }
?>

Compruébalo. Accede y vuelve al formulario de identificación. Mostrará You’re already logged in.
Tenemos que añadir algunas lineas más al archivo login.php. Cambia el form_open() y añade un id, añade un id a la tabla y añade un id a las divs extras que usaremos para mostrar los errores o sucesos de la aplicación AJAX. Es necesario que jQuery los identifique y eso lo hacemos con los ids.

Code block

<?php echo form_open('welcome/login',array('id' => 'userlogin')); ?>

<table id="loginform">

<div id="logged"><div>

<div id="loginerror"></div>

He añadido estas dos últimas <div>’ despues del form_close().

A parte, haz estos cambios:

Code block

<td><?php echo form_input('email', set_value('email')); ?></td>

Por:

Code block

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

Y:

Code block

<td><?php echo form_password('password'); ?></td>

Por:

Code block

<td><input type="password" name="password" value="" id="password" /></td>

Ahora es tiempo del archivo javascript. Recuerda que antes hemos añadido la librería de jQuery. Crea un archivo que se llame ajaxlogin.js en /assets/js/. Para usar el ajaxForm necesitas un plugin. Lo puedes descargar aquí. Lo añadimos igual que hemos hecho los dos del principio, en /views/template.php:

Code block

<script type="text/javascript" src="<?php echo base_url().'assets/js/jquery.form.js'; ?>"></script>

Ahora, escribe en ajaxlogin.js:

Code block

$(document).ready(function(){

    $("#userlogin").ajaxForm({
        type: "POST",
        url: "http://localhost/ajaxlogin/index.php/welcome/ajaxLogin",
        dataType: "json",
        data: "email="+$("#email").val()+"&amp;password;="+$("#password").val(),
        success: updateLogin
    });

});

Ten en cuenta que es posible que tengas que cambiar la URL.  Yo lo uso en mi localhost y con el alias ajaxlogin. Mismamente, uso el index.php y el controlador welcome. Debes modificarlo si es necesario.
Ahora mismo, el script funcionaria pero debemos añadirle un complemento… la función que llama ajaxForm cuando se ejecuta:

Code block

function updateLogin(data) {

    $('#logged').html('');
    $('#logged').hide();

    $("#loginform").fadeOut("slow",
        function() {

            if (data.success == 'yes') {
                $('#logged').html(data.welcome).fadeIn("slow");

            }
            if (data.success == 'no') {
                $('#loginerror').html(data.message).fadeIn("slow").fadeOut("slow",
                    function() {
                        $("#loginform").fadeIn("slow");
                    }
                );
            }
        }
    );
}

Esto creará nuestra animación y hará desaparecer el form. Igualmente escribirá los datos JSON a la <div> que hemos especificado.

Puedes descargar los archivos de este ejemplo funcionando aquí: ipalaus-ajaxlogin-v0.2.rar.

¡Gracias a todos! ¡Espero que funcione!

Uno de los principales problemas a la hora de empezar a programar es que muchos usuarios necesitamos donde mirar por tal de tener una base para empezar nuestro programa. No es lo mejor a la larga porque siempre terminamos basando nuestro trabajo en otros proyectos, pero es una buena forma de empezar a programar. En este caso explicaré como hacer un sistema que valide a lo usuarios mediante un formulario AJAX y el framework PHP Code Igniter.

Lo primero que necesitamos en este caso es jQuery que podemos descargarlo desde la web oficial. jQuery es una librería de JavaScript que nos facilita muchísimo las cosas a la hora de programar. Obviamente también necesitaremos Code Igniter y me reservo el derecho en publicar una entrada futura sobre el mismo.

Para empezar lo haremos con una cosa sencilla, la base de datos que vamos a usar. Es bien simple: id, usuario, contraseña, correo y hora de “registro”.

[code lang="mysql"]
CREATE TABLE `users` (
`uid` int(10) NOT NULL auto_increment,
`username` varchar(16) NOT NULL,
`password` varchar(32) NOT NULL,
`email` varchar(128) NOT NULL,
`time` int(10) NOT NULL,
PRIMARY KEY (`uid`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

[/code]

Ahora es hora del controlador que llamaré user.php, este user.php se ocupará de las funciones básicas como son: comprobar el usuario y la desconexión del mismo.

[code lang="php"]
load->model("user_model");
$this->load->model("dalia_model");

$this->load->helper("security");
$this->load->helper("form");
}

/* Checks if the password that the user gives is equal at the DB ones */
function _check_login($username) {
$password = md5($this->validation->password);

if(!$this->user_model->checkUserLogin($username,$password,"users"))
return FALSE;

return TRUE;
}

function index() {
$this->load->view("userLogin");
}

function checkLogin()
{
$this->load->library('validation');
$rules['username'] = 'trim|required|callback__check_login';
$rules['password'] = 'trim|required';
$this->validation->set_rules($rules);

$fields['username'] = 'username';
$fields['password'] = 'password';
$this->validation->set_fields($fields);

if ($this->validation->run()) {
$username = $this->validation->username;
$uid = $this->user_model->getUserId($username,"users");

$this->session->set_userdata("logged_in",$uid);

$output = '{ "success": "yes", "welcome": "Welcome" }';
} else {
$output = '{ "success": "no", "message": "This is not working" }';
}

$output = str_replace("\r", "", $output);
$output = str_replace("\n", "", $output);

echo $output;
}

function logout()
{
$this->session->sess_destroy();
redirect("");
}

}

?>
[/code]

Para el login en AJAX vamos a tener que usar una comprobación en PHP que la llamaremos mediante jQuery. Es tan simple como saber si el usuario que intentamos acceder es válido o no lo es. Esta función de comprobar el usuario es checkLogin() y la analizamos desde el principio. En primer termino nos encontramos con:

[code lang="php"]
$rules['username'] = 'trim|required|callback__check_login';
[/code]

Que hace una llamada a la función _check_login(). Es la función que realmente comprueba en al base de datos si el usuario existe o no en la misma:

[code lang="php"]
function _check_login($username) {
$password = md5($this->validation->password);

if(!$this->user_model->checkUserLogin($username,$password,"users"))
return FALSE;

return TRUE;
}
[/code]

Lo primero que hacemos es obtener la contraseña y codificarla en md5, ya que es como reside en la base de datos. Mediante el modelo user_model, que analizaremos más adelante, comprobamos con el nombre de usuario y contraseña que el usuario ha ingresado si coinciden con los que corresponden. Si esto es verdad, y coinciden, devolveremos un TRUE… del contrario, FALSE.

El modelo que usamos para comprobar el usuario, llamado user_model.php, es muy sencillo. El código es el siguiente:

[code lang="php"]
db->where("username",$username);
$query = $this->db->where("password",$password);
$query = $this->db->limit(1,0);
$query = $this->db->get($table);

if ($query->num_rows() == 0) {
return NULL;
}

return TRUE;
}
}
?>
[/code]

Simplemente devuelve TRUE o FALSE dependiendo de si son válidos los datos que pasamos a la función.

Una vez tenemos casi todo el código, es hora de la View donde mostraremos el formulario en AJAX. Tengo las vistas separadas de modo que pueda cargar un header, el contenido y un footer. Mi formulario irá al header pero podría funcionar en cualquier otro sitio.

[code lang="php"]

session->userdata('logged_in')) {
?>

Welcome, you're already logged In.

'userlogin'));?>
Username:

Password:

[/code]

Como comprobaciones en medio de la vista nos podemos dar cuenta de la siguiente:

[code lang="php"]
if($this->session->userdata('logged_in')) {
[/code]

Simplemente lo usamos para comprobar si es un usuario que ya ha logeado o si es un nuevo usuario. Si es nuevo, esta comprobación fallará y nos mostrará el nuevo formulario de login. No tiene ningún tipo de complicación. Lo que más puede generar dudas es el código de jQuery, que también es muy simple y son pocas lineas:

[code lang="javascript"]
$(document).ready(
function(){

$("#userlogin").ajaxForm({
type: "POST",
url: "/user/checkLogin",
dataType: "json",
data: "username="+$("#username").val()+"&password;="+$("#password").val(),
success: updateLogin
});

}
)
[/code]

Para usar este tipo de llamada (ajaxForm) vamos a necesitar el plugin jQuery Form que podemos descargar desde la página del autor. Como curiosidad destacar el success: updateLogin que se encargará de actualizar nuestro formulario sin necesidad de cargar de nuevo la página. Esta es otra función a parte que llama una vez ha ejecutado el script. El código es el siguiente:

[code lang="javascript"]
function updateLogin(data) {
$('#logged').html('');
$('#logged').hide();

$("#loginform").fadeOut("slow",
function() {
if (data.success == 'yes') {
$('#logged').html(data.welcome).fadeIn("slow");
}

if (data.success == 'no') {
$('#loginerror').html(data.message).fadeIn("slow").fadeOut("slow",
function() {
$("#loginform").fadeIn("slow");
}
);
}
}
);

}
[/code]

Dependiendo de si el script PHP ha devuelto success == yes o success == no, ejecutará y actualizará de un modo o de otro. Los data.welcome o data.message son los mensajes que hemos enviado usando JSON a la hora de validar el script en el controlador user.php.

Bien, espero que con esto puedan crear su primer login en AJAX usando jQuery y PHP. Pronto, más sobre AJAX, PHP y CodeIgniter!