Entradas etiquetadas con jQuery

Nueva versión del tutorial: AJAX Login con jQuery y CodeIgniter – v2 + archivos

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!