He recibido muchas peticiones sobre cómo hacer una página de login mediante AJAX conectado a un script de PHP. Es por eso que en esta ocasión he decidido publicar un tutorial en el que os comento cómo implementarlo en vuestros propios proyectos. Para este tutorial también necesitaremos una base de datos MySQL y, no os preocupéis, que os explicaré todo y podréis ver los códigos para que no os perdáis. En resumen, crearemos las tablas de la base de datos, haremos los formularios de recogida de datos del frontoffice y, mediante PHP, crearemos y destruiremos nuevas y viejas sesiones, respectivamente. ¿Quieres implementar un sistema de login en tu proyecto web? Pues estate atento a este artículo.
Tabla de usuarios
Tabla de usuarios que contiene todos los detalles para el registro
CREATE TABLE `users` ( `uid` INT(11) NOT NULL AUTO_INCREMENT , `username` VARCHAR(45) , `password` VARCHAR(100) , `email` VARCHAR(45) , `friend_count` INT(11) , `profile_pic` VARCHAR(150), PRIMARY KEY (`uid`));
Código jQuery
En el código $("#login").click(function(){}, login es el ID del botón del formulario de login. Utilizando element.val() hacemos referencia al valor de los inputs de nombre de usuario (username) y contraseña (password).
<script src="js/jquery.min.js"></script>
<script src="js/jquery.ui.shake.js"></script>
<script>
$(document).ready(function()
{
$('#login').click(function()
{
var username=$("#username").val();
var password=$("#password").val();
var dataString = 'username='+username+'&password='+password;
if($.trim(username).length>0 && $.trim(password).length>0)
{
$.ajax({
type: "POST",
url: "ajaxLogin.php",
data: dataString,
cache: false,
beforeSend: function(){ $("#login").val('Connecting...');},
success: function(data){
if(data)
{
$("body").load("home.php").hide().fadeIn(1500).delay(6000);
//or
window.location.href = "home.php";
}
else
{
//Shake animation effect.
$('#box').shake();
$("#login").val('Login')
$("#error").html("<span style='color:#cc0000'>Error:</span> Invalid username and password. ");
}
}
});
}
return false;
});
});
</script>
index.php
Este archivo contiene tanto código PHP como código HTML. Si el valor de sesión existe, el sistema te redigirá a la página de inicio.
<?php
session_start();
if(!empty($_SESSION['login_user']))
{
header('Location: home.php');
}
?>
//HTML Code
<div id="box">
<form action="" method="post">
Username
<input type="text" class="input" id="username"/>
Password
<input type="password" class="input" id="password"/>
<input type="submit" class="button button-primary" value="Log In" id="login"/>
<div id="error"></div>
</div>
</form>
</div>
ajaxLogin.php
Este archivo será el encargado de verificar los valores del nombre de usuario y de la contraseña en la base de datos.
include("db.php");
session_start();
if(isset($_POST['username']) && isset($_POST['password']))
{
// username and password sent from Form
$username=mysqli_real_escape_string($db,$_POST['username']);
//Here converting passsword into MD5 encryption.
$password=md5(mysqli_real_escape_string($db,$_POST['password']));
$result=mysqli_query($db,"SELECT uid FROM users WHERE username='$username' and password='$password'");
$count=mysqli_num_rows($result);
$row=mysqli_fetch_array($result,MYSQLI_ASSOC);
// If result matched $username and $password, table row must be 1 row
if($count==1)
{
$_SESSION['login_user']=$row['uid']; //Storing user session value.
echo $row['uid'];
}
}
home.php
Si el valor de la sesión está vacío, te redirigirá a la página de login
<?php
session_start();
if(empty($_SESSION['login_user']))
{
header('Location: index.php');
}
?>
//HTML Code
Welcome to Home Page
<a href="logout.php">Logout</a>
logout.php
Limpia el valor de la sesión del usuario
session_start();
if(!empty($_SESSION['login_user']))
{
$_SESSION['login_user']='';
session_destroy();
}
header("Location:index.php");
db.php
Archivo de configuración de la base de datos. Desde este fichero puedes modificar los valores del nombre de usuario de la base de datos, la contraseña y el propio nombre de la base de datos.
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'username');
define('DB_PASSWORD', 'password');
define('DB_DATABASE', 'database');
$db = mysqli_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_DATABASE);
Y mediante estos códigos serás capaz de crear tu propia página de login un extra más, un efecto de sacudida (shake) para cuando los usuario fallen en su conexión, y como has visto, de manera sencilla y súper rápida. Ya solo queda que lo integres en tus proyectos de manera satisfactoria y que nos comentes qué tal te ha ido.
Fuente: 9lessons.info