Como hacer un Sistema de Login en Ajax y PHP

19Jan2008 Archivado en: JavaScript, PHP, ProgramaciÃ³n, Recursos Autor: Angel LÃ³pez

Hola

Pues ahora que esta de moda esto del Ajax, aquÃ les traigo un sistema de login hecho con PHP y Ajax que funciona a la perfecciÃ³n. Es muy simple la verdad y solo es de entender como funciona bÃ¡sicamente, y para implementarlo solo necesitas agregarle unas 5 lineas de cÃ³digo con los datos de tu Base de Datos donde guardas los datos del usuario que desea iniciar sesiÃ³n.

AquÃ te dejo un link donde puedes ver funcionando en linea el Sistema de Login en Ajax

DEMO EN LINEA

Y bueno, una vez que te das a la idea de como queda el sistema, vamos con la explicaciÃ³n y el codigo fuente:

Mira irÃ© explicando paso a paso lo que se necesita:
Primero tienes que tener en cuenta que se necesitaran 2 archivos: login.php que es donde aparecerÃ¡ el formulario para que introduzca los datos el user, y otro es checar.php que serÃ¡ donde se verificarÃ¡ mediante ajax, que los datos introducidos por el user sean correctos.

El archivo login.php contiene esto:
NOTA: mas abajo lo irÃ© explicando paso a paso

PLAIN TEXT

HTML:

<!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>
<META NAME="Language" CONTENT="Spanish">
<title>Recursos Del Web - Sistema De Login (Logeo) En Ajax</title>
</head>
<script language="javascript">
<!--
/*
Esta funcion lo que hace es enviar mediante Ajax, por el metodo post, los datos (user y pass) a un archivo "checar.php" para ser comparados en la base de datos. De ser correctos se darÃ¡ mensaje de bienvenida, sino, entonces marcara error de usuario o password incorrectos
*/
function POST_AJAX(url, variables) {
objeto = false;
//creamos el onjeto XMLHttpRequest para poder enviar datos mediante ajax
if (window.XMLHttpRequest) { // Mozilla, Safari,...
objeto = new XMLHttpRequest();
if (objeto.overrideMimeType) {
objeto.overrideMimeType('text/xml');
}
} else if (window.ActiveXObject) { // IE
try {
objeto = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
objeto = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!objeto) {
alert("No se puede crear la instancia XMLHTTP");
return false;
}
objeto.onreadystatechange = avisos; /*Cuando el archivo que se mando llamar mediante ajax (checar.php) regrese un resultado, entonces lo primero que se hace es mandar llamar la funcion avios(), que es donde se imprimirÃ¡ mensaje de bienvenida*/
objeto.open("POST", url, true); /* enviaremos los datos por el metodo POST hacia checar.php */
objeto.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); /*asignamos header. Esto no tiene relacion con el sistema de logeo. Solo es necesario para poder enviar los datos mediante ajax*/
objeto.setRequestHeader("Content-length", variables.length);
objeto.setRequestHeader("Connection", "close");
objeto.send(variables); /* enviamos las variables con un formato como este: "user=minombre&pass=123456&n=0" */
}
/* Esta funcion lo unico que hace, es acomodar los datos introducidos en el formulario a una cadena "variables" con este formato: "user=minombre&pass=123456&n=0" o este "n=0"
NOTA:
n=1 significa que el formulario esta siendo enviado por el usuario (es decir que en este punto, el ususario previamente tuvo que haber introducido su user y pass y despues presionado el boton "enviar").
n=0 significa que el formulario se esta enviando automaticamente cuando se carga la pagina. Esto lo hace para verificar si ya se habia logeado un usuario, entonces en cuanto se cargue la pagina, ya no le pedira su user y pass... ahora solo imprimirÃ¡ mensaje de bienvenida. Es decir que si se logea, cierra el navegador sin haber cerrado sesion y en 3 dias por ejemplo vuelve a entrar a la pagina, lo que se le imprimirÃ¡ serÃ¡ un mensaje de bienvenida, ya que no cerro sesion la ultima vez que salio. Esto solo dura una semana, es decir que las COOKIES de user y pass expiraran una semana despues de haber sido creadas.
*/
function enviar(id_form,n) {
if (n=='1') //si el formulario fue enviado al darle en el boton
{
document.getElementById('inp_enviar').innerHTML = '<input type="submit" class="MC_enviar" name="enviar" value="Enviar"/><img src="ajax.gif"/>';
if (vacio(document.getElementById(id_form).user.value)==false || vacio(document.getElementById(id_form).pass.value)==false)/*si alguno de los campos de user y pass estan vacios, entonces se imprime mensaje de error. NOTA: vacio() es una funcion que verifica que alla algo diferente a "" o puros espacios en blanco. Esta funcion esta mas abajo*/
{
document.getElementById('r').innerHTML = '<label class="res">Llena correctamente los campos</label>'; //"r" es un div que tenemos debajo del formulario para imprimir los mensajes de error.
document.getElementById('inp_enviar').innerHTML = '<input type="submit" class="MC_enviar" name="enviar" value="Enviar"/>';
}
else //sÃ SI habia llenado correctamente el user y pass, entonces se crear una cadena "variables" con los datos de user y pass con el siguiente formato: "user=minombre&pass=123456&n=0"
{
var Formulario = document.getElementById(id_form);
var longitudFormulario = Formulario.elements.length;
var variables = "";
var sepCampos = "";
for (var i=0; i<=Formulario.elements.length-1; i++)
{
variables += sepCampos+Formulario.elements[i].name + '=' + encodeURI(Formulario.elements[i].value);
sepCampos="&";
}
//indice para saber si envio formulario
variables += '&n=' + n;
POST_AJAX('checar.php', variables); //se envia el nombre del archivo donde se verificaran los datos en la BD y la cadena que se acaba de crear con los datos de user y pass, hacia la funcion POST_AJAX, que lo que hace es enviar los datos por medio de AJAX utilizando el metodo POST hacia "checar.php"
}
}
else //si el formulario fue enviado automaticamente solo para procesos
{
variables = 'n=' + n;
POST_AJAX('checar.php', variables);
}
}
function avisos() {
if ((objeto.readyState==4) && (objeto.status==200))
{
document.getElementById('form').innerHTML = objeto.responseText; //se inserta en el DIV "form" el mensaje de bienvenida que nos imprimio "checar.php"
}//end if
}
enviar('login','0'); //se envia a la funcion "enviar()" el id del formulario y el valor 0 (cero); Este valor (0) nos indicarÃ¡ que el formulario esta siendo enviado cuando la pagina se esta cargando apenas. NO lo esta enviando el usuario
/*Esta funcion recorre una cadena en busca de algo diferente de espacios en blanco. Si la cadena contenia puros espacios en blanco entonces regresara False*/
function vacio(q) {
for ( i = 0; i <q.length; i++ ) {
if ( q.charAt(i) != " " ) { return true }
}
return false
}
-->
</script>
<style type="text/css">
#contenido{
margin:0 auto;
margin-top:50px;
width:275px;
padding:15px;
border:solid 1px #990000;
font-family:Arial, Helvetica, sans-serif;
color:#990000;
}
#contenido label{
font-size:18px;
width:200px;
}
.MC_input{
font-size:18px;
color:#000000;
width:180px;
height:25px;
margin-right:10px;
margin-bottom:6px;
}
.MC_enviar{
width:80px;
height:34px;
font-size:18px;
margin-right:10px;
}
#labels{
float:left;
width:90px;
}
#lbl_user{
margin-top:10px;
margin-bottom:10px;
}
#inputs{
float:right;
width:180px;
}
#inp_enviar{
margin-bottom:10px;
}
.res{
color:#FF0000;
}
#texto{
font-size:12px;
}
#texto a{
font-size:14px;
}
</style>
<body>
<div id="contenido">
<div id="texto">
<p>Este es el demo en linea del Sistema De Login en Ajax.</p>
<p>Para ver el codigo fuente y la expliación ve a <a href="http://www.recursosdelweb.com/" target="_blank">Recursos Del Web</a></p>
<p>Para ver su funcionamiento, trata con los siguientes datos:</p>
<p>User=admin<br />
Password=123456 </p>
</div>
<div id="form"></div>
</div>
</body>
</html>

Como podrÃ¡s ver, el codigo esta bien comentado, pero como sea lo explicarÃ©:

Y bueno vamos explicandolo paso por paso. Primero como veras tenemos varias funciones JavaScript: la primera (POST_AJAX()) es esta:

PLAIN TEXT

JavaScript:

/*
Esta funcion lo que hace es enviar mediante Ajax, por el metodo post, los datos (user y pass) a un archivo "checar.php" para ser comparados en la base de datos. De ser correctos se darÃ¡ mensaje de bienvenida, sino, entonces marcara error de usuario o password incorrectos
*/
function POST_AJAX(url, variables) {
objeto = false;
//creamos el onjeto XMLHttpRequest para poder enviar datos mediante ajax
if (window.XMLHttpRequest) { // Mozilla, Safari,...
objeto = new XMLHttpRequest();
if (objeto.overrideMimeType) {
objeto.overrideMimeType('text/xml');
}
} else if (window.ActiveXObject) { // IE
try {
objeto = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
objeto = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!objeto) {
alert("No se puede crear la instancia XMLHTTP");
return false;
}
objeto.onreadystatechange = avisos; /*Cuando el archivo que se mando llamar mediante ajax (checar.php) regrese un resultado, entonces lo primero que se hace es mandar llamar la funcion avios(), que es donde se imprimirÃ¡ mensaje de bienvenida*/
objeto.open("POST", url, true); /* enviaremos los datos por el metodo POST hacia checar.php */
objeto.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); /*asignamos header. Esto no tiene relacion con el sistema de logeo. Solo es necesario para poder enviar los datos mediante ajax*/
objeto.setRequestHeader("Content-length", variables.length);
objeto.setRequestHeader("Connection", "close");
objeto.send(variables); /* enviamos las variables con un formato como este: "user=minombre&pass=123456&n=0" */
}

Lo que hace esta funciÃ³n es crear el objeto XMLHttpRequest para poder enviar datos mediante Ajax por metodo POST. Despues asigna las cabeceras para que nada falle y envia las variables (user y pass) a checar.php donde serÃ¡n recibidas para compararlas en la BD y verificar si los datos son correctos. Checa el codigo, ahi esta bien comentado linea por linea.

Despues tenemos esta funcion:

PLAIN TEXT

JavaScript:

/* Esta funcion lo unico que hace, es acomodar los datos introducidos en el formulario a una cadena "variables" con este formato: "user=minombre&pass=123456&n=0" o este "n=0"
NOTA:
n=1 significa que el formulario esta siendo enviado por el usuario (es decir que en este punto, el ususario previamente tuvo que haber introducido su user y pass y despues presionado el boton "enviar").
n=0 significa que el formulario se esta enviando automaticamente cuando se carga la pagina. Esto lo hace para verificar si ya se habia logeado un usuario, entonces en cuanto se cargue la pagina, ya no le pedira su user y pass... ahora solo imprimirÃ¡ mensaje de bienvenida. Es decir que si se logea, cierra el navegador sin haber cerrado sesion y en 3 dias por ejemplo vuelve a entrar a la pagina, lo que se le imprimirÃ¡ serÃ¡ un mensaje de bienvenida, ya que no cerro sesion la ultima vez que salio. Esto solo dura una semana, es decir que las COOKIES de user y pass expiraran una semana despues de haber sido creadas.
*/
function enviar(id_form,n) {
if (n=='1') //si el formulario fue enviado al darle en el boton
{
document.getElementById('inp_enviar').innerHTML = '<input type="submit" class="MC_enviar" name="enviar" value="Enviar"/><img src="ajax.gif"/>';
if (vacio(document.getElementById(id_form).user.value)==false || vacio(document.getElementById(id_form).pass.value)==false)/*si alguno de los campos de user y pass estan vacios, entonces se imprime mensaje de error. NOTA: vacio() es una funcion que verifica que alla algo diferente a "" o puros espacios en blanco. Esta funcion esta mas abajo*/
{
document.getElementById('r').innerHTML = '<label class="res">Llena correctamente los campos</label>'; //"r" es un div que tenemos debajo del formulario para imprimir los mensajes de error.
document.getElementById('inp_enviar').innerHTML = '<input type="submit" class="MC_enviar" name="enviar" value="Enviar"/>';
}
else //sÃ SI habia llenado correctamente el user y pass, entonces se crear una cadena "variables" con los datos de user y pass con el siguiente formato: "user=minombre&pass=123456&n=0"
{
var Formulario = document.getElementById(id_form);
var longitudFormulario = Formulario.elements.length;
var variables = "";
var sepCampos = "";
for (var i=0; i<=Formulario.elements.length-1; i++)
{
variables += sepCampos+Formulario.elements[i].name + '=' + encodeURI(Formulario.elements[i].value);
sepCampos="&";
}
//indice para saber si envio formulario
variables += '&n=' + n;
POST_AJAX('checar.php', variables); //se envia el nombre del archivo donde se verificaran los datos en la BD y la cadena que se acaba de crear con los datos de user y pass, hacia la funcion POST_AJAX, que lo que hace es enviar los datos por medio de AJAX utilizando el metodo POST hacia "checar.php"
}
}
else //si el formulario fue enviado automaticamente solo para procesos
{
variables = 'n=' + n;
POST_AJAX('checar.php', variables);
}
}

Esta funcion lo unico que hace, es acomodar los datos introducidos en el formulario a una cadena "variables" con este formato: "user=minombre&pass=123456&n=0" o este "n=0"

NOTA:
n=1 significa que el formulario esta siendo enviado por el usuario (es decir que en este punto, el ususario previamente tuvo que haber introducido su user y pass y despues presionado el boton "enviar").
n=0 significa que el formulario se esta enviando automaticamente cuando se carga la pagina.

Esto lo hace para verificar si ya se habia logeado un usuario, entonces en cuanto se cargue la pagina, ya no le pedira su user y pass... ahora solo imprimirÃ¡ mensaje de bienvenida. Es decir que si se logea, cierra el navegador sin haber cerrado sesion y en 3 dias por ejemplo vuelve a entrar a la pagina, lo que se le imprimirÃ¡ serÃ¡ un mensaje de bienvenida, ya que no cerro sesion la ultima vez que salio. Esto solo dura una semana, es decir que las COOKIES de user y pass expiraran una semana despues de haber sido creadas.

Enseguida tenemos esto:

PLAIN TEXT

JavaScript:

function avisos() {
if ((objeto.readyState==4) && (objeto.status==200))
{
document.getElementById('form').innerHTML = objeto.responseText; //se inserta en el DIV "form" el mensaje de bienvenida que nos imprimio "checar.php"
}//end if
}

Esta funciÃ³n se ejecutarÃ¡ cuando el archivo checar.php le responda a login.php mediante ajax, es decir cuando se reciba el responseText. Y lo Ãºnico que se hace es insertar en el div "form" el texto que se imprimiÃ³ en el archivo checar.php, que depende de lo que alla sucedido:
-Si el usuario estÃ¡ queriendo iniciar sesiÃ³n y los datos de user y pass fueron correctos; entonces se imprime el mensaje de bienvenida.
-Si el ususario estÃ¡ queriendo iniciar sesion y los datos de user y pass fueron incorrectos; entonces se imprime el mensaje de error.
-Si el formulario se acaba de terminar de cargar y ya se habÃa logeado alguien, entonces imprime mensaje de bienvenida.
-Si el formulario se acaba de terminar de cargar y no se habÃa logeado alguien, entonces imprime el formulario para que el user inicie sesiÃ³n.

Estas son los posibles resultados que le pueden llegar en el responseText mediante Ajax.

Enseguida como podrÃ¡s ver, se manda llamar a la funciÃ³n enviar() pasandole como parÃ¡metros el nombre del formulario y el valor de la bandera "n" que en este caso serÃ¡ 0 para indicar que la pagina esta enviando el formulario (NO el user) para verificar si ya se habÃa logueado alguien.

PLAIN TEXT

JavaScript:

enviar('login','0'); /*se envia a la funcion "enviar()" el id del formulario y el valor 0 (cero); Este valor (0) nos indicarÃ¡ que el formulario esta siendo enviado cuando la pagina se esta cargando apenas. NO lo esta enviando el usuario*/

Finalmente tenemos una funciÃ³n Vacio() que simplemente recorre una cadena caracter por caracter en busca de espacios en blanco, si alla algo de texto regresa true, sino regresa false. Esta solo la usamos para verificar que el user alla introducido correctamente los datos de user y pass.

PLAIN TEXT

JavaScript:

/*Esta funcion recorre una cadena en busca de algo diferente de espacios en blanco. Si la cadena contenia puros espacios en blanco entonces regresara False*/
function vacio(q) {
for ( i = 0; i <q.length; i++ ) {
if ( q.charAt(i) != " " ) { return true }
}
return false
}

Despues unicamente tenemos el estilo (CSS) y el html. Notar que tenemos un div "form" vacio, que es donde se insertara la respuesta que nos llegue mediando Ajax de checar.php

Ahora vamos con checar.php
Este es el codigo:
NOTA: mas abajo lo explicare paso por paso

PLAIN TEXT

PHP:

ob_start(); //esto es para habilitar el buffer de salida. Esto para poder enviar las cookies al navegador sin que te marque error
//Desconectar
if ($_POST["n"]=='2') //si n=2 significa que el usuario ya habia iniciado sesion y ahora esta cerrando sesion
{
setcookie("Nick"); //borramos el valor de las cookies
setcookie("Pass");
$aux="'login','0'";
header("location: checar.php"); //redireccionamos a este mismo archivo nuevamente
}
$n=$_COOKIE["Nick"]; //sÃ el usuario ya habia iniciado sesion, $n y $p contendran el user y pass de ese usuario
$p=$_COOKIE["Pass"];
/*
NOTA: esta sentencia SQL es un ejemplo de lo que puedes hacer para checar que sea correcto el user y pass. Yo por el momento lo harÃ© manualmente con el user=admin y pass=123456
$sql=mysql_query("SELECT * FROM usuarios1 WHERE user='$n' AND pass='$p'") or die (mysql_error());
$total=mysql_num_rows($sql);
if (mysql_num_rows($sql)==0) //si NO ha iniciado sesion
*/
if ($n!='admin' or $p!='123456') //si NO ha iniciado sesion [NOTA: esta linea borrala y sustituyela por las de arriba pero con la sentencia SQL con tu tabla y campos]
{
if ($_POST["n"]=='1') //si el user ya envio el formulario
{
$usuario=$_POST["user"]; //recivimos datos enviados desde login.php mediante post usando ajax
$contraseÃ±a=$_POST["pass"];
/*
NOTA: este seria un ejemplo de la sentencia SQL que va aqui. Por el momento yo lo hare manualmente usando user=admin y pass=123456
$cad=mysql_query("SELECT * FROM usuarios1 WHERE user='$usuario' AND pass_md5='$contraseÃ±a'") or die (mysql_error());
if (mysql_num_rows($cad)==0) //Si es INCORRECTO el user y pass
*/
if ($usuario!='admin' or $contraseÃ±a!='123456') //Si es INCORRECTO el user y pass
{
//echo '3'; //el usuario o pass son incorrectos... imprimimos formulario y mensaje de error
echo '<form action="javascript: enviar(\'login\',\'1\');" name="login" id="login">
<div id="labels">
<div id="lbl_user"><label>Usuario</label></div>
<div id="lbl_pass"><label>Password</label></div>
</div>
<div id="inputs">
<div id="inp_user"><input name="user" class="MC_input" id="user" type="text" maxlength="30" /></div>
<div id="inp_pass"><input name="pass" class="MC_input" id="pass" type="password" maxlength="30" /></div>
<div id="inp_enviar"><input type="submit" class="MC_enviar" name="enviar" value="Enviar"/></div>
</div>
<div style="clear:both;"></div>
<div id="inp_r"><label id="r" class="res">Usuario o password incorrectos</label></div>
</form>';
}
else //si todo salio bien
{
setcookie("Nick", $usuario, time()+604800); //enviamos las cookies al nacegador [expiraran dentro de una semana]
setcookie("Pass", $contraseÃ±a, time()+604800);
//echo '1'; //damos bienvenida
echo '<form action="javascript: enviar(\'login\',\'1\');" name="login" id="login">
<div id="inp_r"><label>Bienvenid@ '.$usuario.'</label></div>
<div id="salir"><a href="javascript: enviar(\'login\',\'2\');">Cerrar sesion</a></div>
</form>';
}
}
else //si NO ha enviado el formulario
{
//echo '2'; //no ha enviado formulario... imprimimos formulario
echo '<form action="javascript: enviar(\'login\',\'1\');" name="login" id="login">
<div id="labels">
<div id="lbl_user"><label>Usuario</label></div>
<div id="lbl_pass"><label>Password</label></div>
</div>
<div id="inputs">
<div id="inp_user"><input name="user" class="MC_input" id="user" type="text" maxlength="30" /></div>
<div id="inp_pass"><input name="pass" class="MC_input" id="pass" type="password" maxlength="30" /></div>
<div id="inp_enviar"><input type="submit" class="MC_enviar" name="enviar" value="Enviar"/></div>
</div>
<div style="clear:both;"></div>
<div id="inp_r"><label id="r" class="res"></label></div>
</form>';
}
}
else //si ya inicio sesion
{
//echo '1'; //damos bienvenida
echo '<form action="javascript: enviar(\'login\',\'1\');" name="login" id="login">
<div id="inp_r"><label>Bienvenid@ '.$_COOKIE["Nick"].'</label></div>
<div id="salir"><a href="javascript: enviar(\'login\',\'2\');">Cerrar sesion</a></div>
</form>';
}
ob_end_flush(); //esto va para poder enviar headers al navegador sin tener problemas

Como podrÃ¡s ver el codigo esta muy bien comentado asÃ que de este archivo no explicarÃ© mucho.

En pocas palabras lo que sucede aquÃ es lo siguiente:

Primero preguntamos si la bandera recibida "n" es igual a 2, significa que el ususario esta cerrando sesion, asÃ que eliminamos las cookies y redireccionamos nuevamente a checar.php
Asignamos a $n y $p las cookies (si las cookies ya existian, $n y $p contendran los datos del ultimo user y pass que se habia logueado, Asi que solo se imprimirÃ¡ mensaje de bienvenida; de lo contrario se verificarÃ¡ si los nuevos datos que estan llegando son correctos)
Si la bandera "n" es igual a 1 entonces significa que el user esta enviando el formulario con sus datos; por lo tanto se verifica que sus datos sean correctos; si son correctos, se crean las cookies con esos datos y se imprime mensaje de bienvenida, si son incorrectos se imprime mensaje de error.
Si la bandera "n" es igual a 0 y no se ha iniciado sesion entonces se imprime el formulario.
Si ya se inicio sesion, entonces se imprime mensaje de bienvenida.

Basicamente asi quedarÃa todo.
AquÃ te dejo los archivos para que los descargues y ya me cuentas como te fue

Saludos!

Tags: ajax, JavaScript, login, PHP, Recursos, sistema

Post Relacionados

Los mejores +50 Iconos para Ajax (Ajax Load Icon) GIF

Ajax IM, implementa un messenger en tu web [que funciona en ajax]

Los 10 mejores Video Tutoriales (Videotutoriales) de Ajax y PHP

Libros de programacion

Hola a todos en 2009

Nueva Web Red Social (tipo Fotolog, Metroflog) con mÃ¡s Funciones :D

Como validar (validaciÃ³n) Cuadros (campos) de Texto en Visual Basic .Net (vb)

Puedes seguir cualquier respuesta a esta entrada a través de RSS 2.0 feed. Puedes dejar una respuesta, o interlinkearlo desde tu propio sitio.

17 Respuestas to “Como hacer un Sistema de Login en Ajax y PHP”

Felix E.
February 25th, 2008 at 5:58 pm

Excelente material, gracias por los datos emitidos en tus explicaciones, me pareciÃ³ muy interesante y funcional.

Saludos
alfiad
February 28th, 2008 at 3:54 am

will u translate this to english? i dont understand your language.
Angel LÃ³pez
February 28th, 2008 at 9:52 pm

Hi @alfiad: sincerly I donÂ´t know very well english, IÂ´m learing yet… But maybe the service translator page of Google can help you. But be careful because the automatic translation maybe modify some parts of font code. So try to understand the code in spanish and read the explanation in english.

this is the link.
http://translate.google.com/translate?u=http%3A%2F%2Fwww.recursosdelweb.com%2Fcomo-hacer-un-sistema-de-login-en-ajax-y-php%2F&langpair=es%7Cen&hl=es&ie=UTF-8

see you
Osvaldo
March 26th, 2008 at 6:02 pm

Hola muy buena aplicaciÃ³n.

Una pregunta como podrÃa enviar a otra pagina cuando le den click en el botÃ³n enviar..?

Gracias,
Angel LÃ³pez
March 27th, 2008 at 11:00 am

con javascript:
en el boton -> onclick=”location.href=’www.web.com’;”

saludos
Salbatore
May 18th, 2008 at 5:56 pm

Menudo crack. Mira que he buscado sistemas como este y todos mucho mas complicados, este les da mil vueltas.

Muy interesante el blog, un 10.

Saludos…
Daniela
May 22nd, 2008 at 7:08 am

Tengo dos consultas:
1) CuÃ¡l serÃa la estructura de mi tabla en mi base de datos??
2) Al archivo checar.php no le falta algo??? no me funciona.
Gracias chicos.
jhony
July 11th, 2008 at 10:41 am

Hola me parece muy buena tu aplicacion mi pregunta es donde tengo que ponerle la conexion a la base de datos por que al momento de hacerlo no funciona disculpame por la ignorancia pero soy algo nuevo en esto
Angel LÃ³pez
July 12th, 2008 at 5:40 am

Buenas @jhony: si mira ntp.. la conexion debe de ir en checar.php y ahi mismo tambien realizar consultas para verificar en la base de datos que los datos de user y password que esta enviando el usuario son correctos.

Buenas @Daniela: la estructura de tu tabla depende de tu aplicacion.. lo que si es importante es tener 3 campos en alguna tabla que se llame “usuarios” por ejemplo con los nombres de:
-user
-pass
-pass_md5

de esta manera en esos campos realizas la comparacion de los datos del usuario registrado y los del que esta queriendo iniciar sesion en ese momento.. saludos
edgardo
July 23rd, 2008 at 7:45 am

Hola amigo estoy tratando de pasar este codigo para correrlo en asp, pero no se que pasa que no me muestra el formulario al iniciar, me podrias dar una mano en esto?
desde ya gracias por el aporte
Angel LÃ³pez
July 28th, 2008 at 11:13 am

@edgardo: si.. pon el codigo fuente aqui en los comentarios y te puedo ayudar a ver que sucede.. saludos
rony
August 14th, 2008 at 4:45 pm

hola primero que nada darte las gracias por entregar y ensaÃ±ar tu sistema de login pero lo he probado en mi web me dice que la capa no se carga que es null o vacio no hay caso no aparece el formulario asi que desiste de usar tu codigo no se si se puede adaptar de otra forma lo probe para saber si podia correr separe el archivo js como ajax.js y lo llamo en una pagina principal pero no hay caso no funca…
Xavi
September 17th, 2008 at 4:21 pm

Muy bueno el post! Tengo una duda y les agradeceria si me pudieran ayudar. Estoy preparando una web que tendrÃ¡ una secciÃ³n en la que solo podrÃ¡n entrar los que dispongan de usuario y contraseÃ±a.
Una vez esten logeados correctamente saltan a otra pagina con las opciones que solo ellos pueden ver.
Hasta ahÃ todo correcto. Mi pregunta es la siguiente:
Imaginemos que al logearse correctamente nos redirecciona a la URL: http://www.cochesbonitos.com/privado/fotos. Esta claro que solo lo podran ver los logeados. PERO! cualquiera desde su ordenador si pone esa misma URL como hago para que detecte que necesitan login. En esa y en todas las paginas que me interese.
AdemÃ¡s, podria colocar un boton de salir (desconexion) en todas ellas? no se como estructurarlo.

Muchas gracias!!
Italiak1
October 18th, 2008 at 11:01 am

Thank you for valuable information.
GIOVANY
November 22nd, 2008 at 7:28 pm

HOLA
Music_Mp3_BextViewinili
February 5th, 2009 at 4:58 am

Hello to all I canâ€™t understand how to add your site in my rss reader. Help me, please
Carlos
October 17th, 2009 at 2:35 pm

y el campo para registrarse que o como se hace?
Ayuda porfabor

Dejar comentario

Entradas (RSS)
Comentarios (RSS)

Acerca de este blog

Este blog tiene la intensión de facilitarle al lector el gran contenido existente en internet en sus amplias y variadas temáticas como el ocio, los videojuegos, peliculas, series, autos, recetas, descargas, recomendaciones, programaciones y cualquier cosa que se me valla ocurriendo con el tiempo. Tengo la intensión de estar actualizando el blog constantemente y así proporcionarle la mejor información al lector.
Cualquier duda, comentario o sugerencia por favor escríbelo aquí en los comentarios

Comentarios
Artículos Recientes

Recursos Del Web