Este artículo está inspirado en una duda presentada en el foro.
¿Te gustaría crear un sistema de logueo sexy, usando Ajax y SexyLightbox? En esta mini-guia explicaremos paso a paso como crearlo e implementarlo en tu web!
Bueno… como no podía ser de otra manera, nombré a este proyecto Sexy LoginBox porque me parece sexy! no es que tenga pocas ideas para nombres (la verdad es que si). En fin, el resultado será algo como esto:
Pueden ver una demostración funcionando. Para comprobar que la demo funciona, ingresen estos datos:
Usuario: admin
Contraseña: admin
En primer lugar necesitaremos 3 divs, que serán los encargados cada uno de ser un “estado” diferente. Tendremos un div para el formulario, un div para el “cargando”, y otro div mostrará un error de “usuario y/o contraseña incorrectos”.

Por supuesto, solo se mostrará uno a la vez, según corresponda el estado.
Nada más que eso, creamos el formulario y los divs de estado.
Primero, el formulario [sexy-login]:
<div id="Sexy-login" class="login">
<form action="login.php" method="post" id="loginform">
<label><em>Username : </em><input type="text" name="usuario" /></label>
<label><em>Password : </em><input type="password" name="password" /></label>
<input type="submit" class="submit" id="submit" value="Login" onclick="return SexyLoginInit();" />
</form>
</div>
Atentos con el evento onclick del botón submit. Lo siguiente es el CSS del formulario:
.login {
width: 238px;
margin: 0 auto;
padding:20px 0 0 43px;
background: url(images/user.png) no-repeat left center;
}
.login label {
display:block;
font-size:12px;
padding-bottom:5px;
text-align:right;
}
.login label em{
width:80px;
display:block;
float:left;
font-style: normal;
}
.login input {
width:146px;
height:22px;
border:1px solid #ccc;
}
.login input.submit {
width:auto;
height:auto;
border:1px solid #ccc;
float:right;
}
El div que se muestra cuando la petición está siendo enviada [sexy-loading]:
<div id="Sexy-loading" class="login loading" style="display:none;"> Cargando... </div>
.loading {
text-align: center;
width: 238px;
margin: 0 auto;
padding:40px 0;
background: url(images/ajax-loader.gif) no-repeat center 60px;
}
El div que se muestra cuando hubo un error en el login [sexy-error]:
<div id="Sexy-error" class="login error" style="display:none;"> Nombre de usuario o contraseña incorrectos. <br /><a href="#" id="again">¿Deseas volver a intentarlo?</a> </div>
.error{
margin: 0 auto;
padding:20px 0 20px 55px;
width:212px;
background: url(images/dialog-error.png) no-repeat left center;
}
Guardaremos estas cosas en un archivo llamado login_template.html, y aunque todavía no hemos acabado aquí, vamos al paso siguiente.
Para el ejemplo lo llamaremos login.php (el formulario anterior apuntaba aquí). Como no nos interesa ahondar en los detalles de la seguridad y demás yerbas del logueo, el php será muy cortito y al pie.
<?PHP
//Comprobar que nos envien las variables
if(!empty($_POST["usuario"]))
{
//sleep(2); //only for debug
//Super rutina de seguridad para la comprobación de usuarios
if($_POST["usuario"] == "admin" && $_POST["password"] == "admin")
{
echo "OK!"; //Dato clave, de esto depende el Formulario AJAX
}
else
{
echo "NO!"; //Dato clave, de esto depende el Formulario AJAX
}
}
elseif ((bool) $_GET['exito'])
{
echo "Logueado correctamente.";
}
else
{
include("login_template.html");
}
?>
Vamos por partes. En primer lugar, si llamamos a login.php directamente nos enviará a login_template.html (el formulario). Solo para nuestro ejemplo, hemos puesto que usuario y contraseña sean “admin” mediante un condicional muy simple. En caso de que el logueo sea correcto, enviaremos una palabra clave: OK!
El script siguiente verificará si el usuario y contraseña existen o no mediante esa palabra clave.
Esta es la parte más divertida
y también la mas complicada ![]()
Los que sabemos un poco de javascript estamos al tanto de que hay dos maneras de invocar un evento: la intrusiva y la no intrusiva. En nuestro formulario, el boton posee un javascript intrusivo puesto que se invoca directamente desde la “propiedad” onclick.
¿Cómo hacerlo no intrusivo? Lamentablemente no se puede, debido a lo siguiente:
Cuando el Sexy Lightbox carga la página, también ejecuta todo el código javascript dentro de ella, pero lo hace ANTES de mostrar el HTML. Osea, que no hay manera de agregar eventos a los objetos, si los objetos no han sido creados aún.
La solución: Ejecutar el código cuando se presiona el botón Enviar. Usaremos una variable (Sexy_FirstTime) para asignar los eventos sólo la primera vez.
<script type="text/javascript">
var Sexy_FirstTime = 0;
function SexyLoginInit() {
if (Sexy_FirstTime) {
$('loginform').send(); //enviamos el form por ajax
return false;
} else {
Sexy_FirstTime = 1;
}
Lo siguiente se ejecutará sólo la primera vez:
$('loginform').set('send', {
onRequest: function() {
$('Sexy-loading').setStyle('display', 'block');
$('Sexy-login').setStyle('display', 'none');
},
onComplete: function(response) {
$('Sexy-loading').setStyle('display', 'none');
if (response == "OK!")
{
document.location.href = "login.php?exito=1"; //ir a esta URL si el logueo es exitoso
}
else if (response == "NO!")
{
$('Sexy-error').setStyle('display', 'block');
}
else
{
$('Sexy-login').setStyle('display', 'block');
}
}});
En el div sexy-error hay un enlace que dice “¿Deseas volver a intentarlo?”, con lo siguiente lo hacemos funcionar:
$('again').addEvent('click', function(event) {
event.stop();
$('Sexy-error').setStyle('display', 'none');
$('Sexy-loading').setStyle('display', 'none');
$('Sexy-login').setStyle('display', 'block');
});
// ...
$('loginform').send();
return false;
};
</script>
Este artículo contiene los siguientes archivos:
Eso es todo! Échale un vistazo a la demo.
claro debes de tener instalado en tu servidor local, appserv en la carpera www o bien sea en el apacahe…. ya que el archivo que intentaa jalar es de extencion .php
Muchas felicidades, es sinduda muy buen trabajo todos los “productos sexys” que teneis.
Hace ya un par de días que estoy intentando adaptar el Sexy LoginBox a Jquery y no soy capaz por que apenas tengo experiencia en jquery.
Podría alguien ayudarme a traducir esta parte a lenguaje Jquery
$('loginform').set('send', { onRequest: function() { $('Sexy-loading').setStyle('display', 'block'); $('Sexy-login').setStyle('display', 'none'); }, onComplete: function(response) { $('Sexy-loading').setStyle('display', 'none'); if (response == "OK!") { document.location.href = "login.php?exito=1"; //ir a esta URL si el logueo es exitoso } else if (response == "NO!") { $('Sexy-error').setStyle('display', 'block'); } else { $('Sexy-login').setStyle('display', 'block'); } }});El resto ya lo tengo funcionando, pero ese trozo me tiene amargado y no me funciona.
Os agradezco enormemente la ayuda.
Muchas gracias
Holas, ya casi tengo implementado el sexy login en mi pagina solo que no me muestra el estado de loading o el de error, hise un pequeño cambio el index.html lo puse afuera de la raiz de la carpeta sexy-login, para mantener todo en orden mis archivos
lo unico q cambie en index.html fue la direccion del boton de login.php a –> sexy-login/login.php Pero por alguna razon no me muestra los otros estados, me reconoce obviamente los js, img, el css pero los otros estados no. y no hise ningun cambio.
Bueno me reporto xD, ya lo he solucionado en el temple de login tenia que poner login/login.php porque la pagina se ejecutaba desde de la raiz y no desde la misma carpeta xD thks
Hola como hago con el sexylogin q me de las autorizacones para usuarios y admin ??? eso me falta me da errores gracias
Very nice. I think i will implement it in my latest project.
Hola de antemano exelente y felicitacion al equipo coders me encanto la web y sobre todo los post y los comentarios exlente..bueno basta de alagos x3 hahaha tengo una misera pregunta resulta que me funciona casi de maravilla el unico inconveniente es que cuando me da error porm algun campo no escrito o erroneo me sale el error pero despues de un milisimo de segundo me sale el archivo el cual le agrege como respuesta a un ok!..soy un principiante en esto del php y me e cabeciado desde hace rato y no se como resulverlo aqui les mando el codigo de validar_usuario.php
function quitar($mensaje) { $nopermitidos = array("'",'\\','<','>',"\""); $mensaje = str_replace($nopermitidos, "", $mensaje); return $mensaje; } if(trim($HTTP_POST_VARS["usuario"]) != "" && trim($HTTP_POST_VARS["password"]) != "") { // Puedes utilizar la funcion para eliminar algun caracter en especifico //$usuario = strtolower(quitar($HTTP_POST_VARS["usuario"])); //$password = $HTTP_POST_VARS["password"]; // o puedes convertir los a su entidad HTML aplicable con htmlentities $usuario = strtolower(htmlentities($HTTP_POST_VARS["usuario"], ENT_QUOTES)); $password = $HTTP_POST_VARS["password"]; $result = mysql_query('SELECT password, usuario FROM usuarios WHERE usuario=\''.$usuario.'\''); if($row = mysql_fetch_array($result)){ if($row["password"] == $password){ $_SESSION["k_username"] = $row['usuario']; echo 'Has sido logueado correctamente '.$_SESSION['k_username'].' <p>'; echo '<SCRIPT LANGUAGE="javascript"> location.href = "index2.php"; </SCRIPT>'; //Elimina el siguiente comentario si quieres que re-dirigir automáticamente a index.php /*Ingreso exitoso, ahora sera dirigido a la pagina principal. */ }else{ echo 'NO!'; } }else{ echo 'NO!'; } mysql_free_result($result); }else{ echo 'NO!'; } mysql_close(); ?>gracias
x3 me e equivocado era en respuesta a un “NO!” x3 disculpen
lo utilizo para un trabajo de la universidad y he modificado asi el login.php
y conexion.php
y al inicio de las siguientes paginas
espero que sirva y si veis algo mal comentais, estoy aprendiendo gracias
Si en un explorador pongo:
http://www.coders.me/ejemplos/sexy-login-box/login.php?exito=1
Entro sin validar nada, por lo que no es muy seguro el sistema que digamos.
Alguna solucion para esto?
mira Cristian podrias usarar el sistema de sessiones para evitar ke mediante la url se brinquen el login con es ose soluciona te dejo un link http://www.desarrolloweb.com/articulos/235.php nos vemos.
please help me ?
i want to print the response directly !?
i removed
if (response == “OK!”){
document.location.href =”login.php?exito=1″;
}
tried ..
if (response){
document.getElementById(“display”).innerHTML = response;
}
AND
if (response){
document.write(‘response’).setStyle(‘display’, ‘block’);
}
AND
if (response){
document.getElementById(setStyle(‘display’, ‘block’)).innerHTML = ‘response’;
}
To no avail .
por favor que me ayude?
i desea imprimir directamente la respuesta!?
yo quité
if (response == "OK!"){ [php] document.location.href = "login.php?exito=1"; //ir a esta URL si el logueo es exitoso } else if (response == "NO!"){ $('Sexy-error').setStyle('display', 'block'); } else { $('Sexy-login').setStyle('display', 'block'); }y trató de …
if (response){ document.getElementById(”display”).innerHTML = response; }y …
if (response){ document.write(’response’).setStyle(’display’, ‘block’); }y …
if (response){ document.getElementById(setStyle(’display’, ‘block’)).innerHTML = ‘response’; }En vano .
amigo tengo un problema estoy tratando de hacer lo mismo pero con una formulario de registros de usarios(5 campos), me sale todo bien pero ahora quiero mostrar mas msj de validacion (Los Password deben coicidir, ¿Desea volver intentarlo?) para la contraseña y email, pero al tratar de hacer eso, no me sale bien le doy click en desea volver a intentarlo y se qeda parado y no regresa al formulario, hize esto, a ver si me ayudan, ahi tienen mi correo plis, se los agredeceria si me ayudan, gracias
onComplete: function(response) { $('Sexy-loading').setStyle('display', 'none'); if (response == "OK!") { document.location.href = "index.html"; } else if (response == "NO!") { $('Sexy-error').setStyle('display', 'block'); } else if (response == "NOS!") { $('Sexy-error-a').setStyle('display', 'block'); } else { $('Sexy-login').setStyle('display', 'block'); } }});y agrege esto arriba,
y
$('again').addEvent('click', function(event) { event.stop(); $('Sexy-error').setStyle('display', 'none'); $('Sexy-loading').setStyle('display', 'none'); $('Sexy-login').setStyle('display', 'block'); $('Sexy-error-a').setStyle('display', 'none'); });bueno primero, algien me podria explica este codigo desde el principio, no lo enriendo ni me carga, otra pregunta pueden coexsistir los js con los tales mootools si la pregunta es muy tonta perdone tengo esa duda
muchas gracias la voy a utilizar para una página pero al momento que le corrí con el wampserver me da una error en la línea 18 la voy a revisar gracias..
Disculpen quisiera que me dijeran si esto se puede adaptar para hacer la validacion desde una base de datos de mysql y si saben como. Gracias
sí, si se lo hice un tiempo atras, lo buscaré
o agregame para explicarte,
aprovecho de comentar que este login me ha servido mucho, muchas gracias al creador
Skandelabro, podrias comentarme como agregar la parte de mysql a este form… gracias !!!!
Que buen tutorial…
me sirvio de mucho
gracias
Como puedo introducir esto en mi web? Soy totalmente neofito en esto y utilizo WordPress. Donde debo poner cada archivo y que tengo que poner para activarlo? ):
Gracias de antemano, y disculpen mi ignorancia.
Muy buen aporte… lo estoy implementando en mi web.
Saludos desde AR.
alguna forma para que no usar lightbox
Hola tengo una duda ami me da un error en la linea 18 esto sale
Notice: Undefined index: exito in C:\xampp\htdocs\login-box\login.php on line 18
quien me puede ayudar porfavor