Genesis Vargas J

Como hacer un login con PHP y MySQL con validación en AJAX

Comparte:

Hola amigos, en este post les voy a enseñar a hacer un Login (Inicio de sesión) en PHP con MySQL utilizando AJAX para la validación, también utilizaremos HTML5 y CSS3 para el diseño de las páginas.

La lógica se basa en crear 2 páginas: index.php (cuando la sesión no este activa) y welcome.php (cuando la sesión este activa), 1 página para validar al usuario: validar.php y últimamente 1 hoja de estilo: estilo.css.

Al final nos debería quedar algo así:

Vamos con el código de los archivos.

INDEX.PHP

<?php
session_start();
if (isset($_SESSION['usuario']))
{
    echo '<script>location.href = "welcome.php";</script>';
}
else
{
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>INICIO DE SESIÓN</title>
<link rel="stylesheet" href="estilo.css" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body>
<div class="contenedor">
    <h1>Login PHP y MySQL - http://www.genesisvargasj.tk</h1><hr>
    <h2>INICIO DE SESIÓN</h2>
    <img src="login.png" alt="" width="80" height="80">
    <div id="formulario">
        <form method="POST" action="return false" onsubmit="return false">
            <div id="resultado"></div>
            <p><input type="text" name="user" id="user" value="" placeholder="USUARIO"></p>
            <p><input type="password" name="pass" id="pass" value="" placeholder="*******"></p>
            <p><button onclick="Validar(document.getElementById('user').value, document.getElementById('pass').value);">ENTRAR</button></p>
        </form>
        <script>
        function Validar(user, pass)
        {
            $.ajax({
                url: "validar.php",
                type: "POST",
                data: "user="+user+"&pass="+pass,
                success: function(resp){
                    $('#resultado').html(resp)
                }        
            });
        }
        </script>
    </div>
</div>
</body>
</html>
<?php
}
?>

Aquí iniciamos sesión: session_start() y verificamos si la variable $_SESSION['usuario'] esta definida, si todo va bien debería mostrarse todo el código html de ésta página donde mostraremos el formulario para iniciar sesión el cual validamos con una función llamada Validar() que recibe dos parámetros: user y pass los cuales mandamos a tráves del onclick en el button con la función document.getElementById de cada input, en esa función usamos el modulo ajax que Jquery trae y le pasamos los parámetros data (que recogemos en la función), le mandamos la ruta del archivo que preocesa la petición, el metodo que vamos a usar en este caso POST y por último escribimos en el div resultado la respuesta. Si ya esta definida la variable simplemente lo mandamos para la página welcome.php.

WELCOME.PHP

<?php

session_start();
if (isset($_SESSION['usuario']))
{
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>BIENVENIDO</title>
<link rel="stylesheet" href="estilo.css" />
</head>
<body>
<div class="contenedor">
    <h1>BIENVENIDO : <?php echo $_SESSION['usuario']; ?></h1><hr>
    <img src="welcome.png" alt="" >
    <p>Aquí te toca poner todo lo que que solo tus usuario registrados pueden ver. :)</p>
    <p><a href="logout.php">CERRAR SESIÓN</a></p>
</div>
</body>
</html>
<?php
}
else
{
    echo '<script>location.href = "index.php";</script>';
}
?>

Aquí iniciamos sesión: session_start() y verificamos si la variable $_SESSION['usuario'] esta definida, si todo va bien debería mostrarse todo el codigo html de ésta página donde mostraremos el nombre del usuario activo y le colocaremos un link para que se pueda cerrar la sesión (logout.php); sino esta definida la variable simplemente lo mandamos para la página index.php.

VALIDAR.PHP

<?php
error_reporting(0);
session_start();
$con = new mysqli("localhost", "root", "123", "login");
if ($con->connect_errno)
{
       echo "Fallo al conectar a MySQL: (" . $con->connect_errno . ") " . $con->connect_error;
       exit();
}
@mysqli_query($con, "SET NAMES 'utf8'");
if ($_POST['user'] == null || $_POST['pass'] == null)
{
    echo '<span>Por favor complete todos los campos.</span>';
}
else
{
    $user = mysqli_real_escape_string($_POST['user'], $con);
    $pass = mysqli_real_escape_string($_POST['pass'], $con);
    $consulta = mysqli_query($con, "SELECT user, pass FROM usuario WHERE user = '$user' AND pass = '$pass'");
    if (mysqli_num_rows($consulta) > 0)
    {
        $_SESSION["usuario"] = $user;
        echo '<script>location.href = "welcome.php"</script>';
    }
    else
    {
        echo '<span>El usuario y/o clave son incorrectas, vuelva a intentarlo.</span>';
    }
}
?>

Aquí nos conectamos a la base de datos y asignamos los valores de las variables post a dos variables: user y pass y hacemos un si que verifica que las variables no esten vacías/nulas, si no es así procedemos a hacer una consulta buscando si hay un registro donde las variables sean iguales a los que hay en la tabla usuario; si encontramos un registro es decir que número de filas sea mayor que cero (mysqli_num_rows($consulta)>0) procedemos a asignar lo de la variable user a la variable de sesión y redireccionamos a la página donde solo los usuarios registrados pueden acceder.

LOGOUT.PHP

<?php
session_start();
session_destroy();
echo 'Ha terminado la session';
?>
<script">
location.href = "index.php";
</script>

Aquí solo destruimos la sesión actual y con javascript redireccionamos a la página inicial donde esta el login.

ESTILO.CSS

body {
      font-size:14px; margin:0;
}
.contenedor {
     margin:0 auto;
     width:800px; 
     text-align:center;
}
span {
     color:red;
}
#formulario {
     margin:0 auto;
     border-radius:5px;
     box-shadow:2px 3px 4px #000;
     border:1px solid #000;
     width:400px;
     padding:25px;
     background:#d1d1d1;
}
input {
     border-radius:5px;
     padding:8px;
}
button {
     border-radius:5px;
     padding:8px;
     background:#000;
     color:#fff;
     cursor:pointer;
}

Aquí solo le marcamos el estilo a los div y objetos de los archivos php.

Bueno eso es todo espero que les sirva mucho para aprender y practicar. Les dejo una carpeta comprimida para que descarguen el ejemplo y también un demo para que lo vean en funcionamiento.

DEMO

Comentarios


genesis vargas

Soy Genesis Vargas Jiménez, autor de éste blog. Me gusta desarrollar software en todas las plataformas (web, móvil y desktop) y compartir conocimiento para ayudar a muchas personas.

Desde el 2015 soy MVP Microsoft en Visual Studio y tecnologías de desarrollo, reconocimiento que me enorgullece mucho.

MVP Genesis Vargas J

A PHP Error was encountered

Severity: Core Warning

Message: Module 'timezonedb' already loaded

Filename: Unknown

Line Number: 0

Backtrace: