Login php mysql con jQuery y Ajax para web

Hola amigos aquí les voy a dejar la forma de hacer un login con Ajax php mysql espero les guste y lo puedan usar en cualquier proyecto

Para esto vamos a necesitar de los siguientes archivos .

* Archivos a utilizar

functions.ajax.js

index.php

log.inout.ajax.php

logout.php

stylesheet.css

jQuery.js

Tabla ajaxuser

Comenzamos con el index.php que se va a encargar de iniciar la sesión mediante un formulario .

<?php session_start(); ?>

<!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 http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Login y Logout de usuarios con PHP y Ajax</title>
        <link rel="stylesheet" type="text/css" href="stylesheet.css" />
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="functions.ajax.js"></script>
    </head>
    <body><div id="allContent"><table cellpadding="0" cellspacing="0" border="0" height="100%" width="100%"><tr><td align="center" valign="middle" height="100%" width="100%">
        
        <div id="alertBoxes"></div>
        <span class="loginBlock"><span class="inner">
            <?php
if ( isset($_SESSION['username']) && isset($_SESSION['userid']) && $_SESSION['username'] != '' && $_SESSION['userid'] != '0' ){
    echo '<div class="session_on">
        Ya iniciaste sesión | Ahora has un <a href="javascript:void(0);" id="sessionKiller">logout</a>.<span class="timer" id="timer"  style="margin-left: 10px;"></span>
    </div>';
}
else{
    echo '<form method="post" action="">
        <table cellpadding="0" cellspacing="0" border="0">
            <tr>
                <td>Usuario:</td>
                <td><input type="text" name="login_username" id="login_username" /></td>
            </tr>
            <tr>
                <td>Contraseña:</td>
                <td><input type="password" name="login_userpass" id="login_userpass" /></td>
            </tr>
            <tr>
                <td colspan="2" align="right"><span class="timer" id="timer"></span><button id="login_userbttn">Login</button></td>
            </tr>
        </table>
    </form>';
}
            ?>
        
        </span></span>
        
    </td></tr></table></div></body>
</html>

Breve explicación:

<?php session_start(); ?> //verificamos si la sesion está iniciada

Entre <head> y </head> colocamos las rutas de los archivos a utilizar ejm: stylesheet.css, jquery.js, function.ajax.js

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Login y Logout de usuarios con PHP y Ajax</title>
        <link rel="stylesheet" type="text/css" href="stylesheet.css" />
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="functions.ajax.js"></script>
</head>

Entre <body> y </body> colocamos las instrucciones php a usar + el formulario :

<?php  // iniciamos php
    //creamos la condicion y verificamos si la sesion esta iniciada
if ( isset($_SESSION['username']) && isset($_SESSION['userid']) && $_SESSION['username'] != '' && $_SESSION['userid'] != '0' )

// presentamos mensaje si ya hemos iniciado sesion.
{
      echo '<div class="session_on">   
        Ya iniciaste sesión | Ahora has un <a href="javascript:void(0);" id="sessionKiller">logout</a>.<span class="timer" id="timer"  style="margin-left: 10px;"></span>         
    </div>';   
}

//caso contrario presentamos el formulario para loguearnos
else{
    echo '<form method="post" action="">
        <table cellpadding="0" cellspacing="0" border="0">
            <tr>
                <td>Usuario:</td>
                <td><input type="text" name="login_username" id="login_username" /></td>
            </tr>
            <tr>
                <td>Contraseña:</td>
                <td><input type="password" name="login_userpass" id="login_userpass" /></td>
            </tr>
            <tr>
                <td colspan="2" align="right"><span class="timer" id="timer"></span><button id="login_userbttn">Login</button></td>
            </tr>
        </table>
    </form>';
}
            ?>
        
        </span></span>
        
    </td></tr></table></div>

Creamos el archivo logout.php :

<?php
    session_start(); //mantiene activa la sesion
    session_destroy(); //destruye la sesion iniciada
    header('Location: ./'); //posicionamos la cabecera
    exit(0); //salida
?>

Creamos el archivo log.inout.ajax.php :

<?php
session_start();
if ( !isset($_SESSION['username']) && !isset($_SESSION['userid']) ){
    if ( @$idcnx = @mysql_connect('localhost','root','pass') ){
            
        if ( @mysql_select_db('ajaxtests',$idcnx) ){
                
            $sql = 'SELECT user,passwd,id FROM ajaxusers WHERE user="' . $_POST['login_username']. '" && passwd="' . md5(md5($_POST['login_userpass'])) . '" LIMIT 1';
            if ( @$res = @mysql_query($sql) ){
                if ( @mysql_num_rows($res) == 1 ){
                        
                    $user = @mysql_fetch_array($res);
                        
                    $_SESSION['username']   = $user['user'];
                    $_SESSION['userid'] = $user['id'];
                    echo 1;
                        
                }
                else
                    echo 0;
            }
            else
                echo 0;
                
                
        }
            
        mysql_close($idcnx);
    }
    else
        echo 0;
}
else{
    echo 0;
    }
?>

Explicación 1era parte:

<?php  //iniciamos php
session_start();  //mantenemos la sesion activa

//creamos la condicion de id y usuario
if ( !isset($_SESSION['username']) && !isset($_SESSION['userid']) ){

//verificamos la conexion y la conectamos cambiar variables
    if ( @$idcnx = @mysql_connect('localhost','root','password') ){

//verificamos que la base de datos ajaxtets exista  
        if ( @mysql_select_db('ajaxtests',$idcnx) ){

Explicación 2da parte:

//creamos la variable y seleccionamos user passwd e id de la tabla ajaxuser
$sql = 'SELECT user,passwd,id FROM ajaxusers WHERE user="' . $_POST['login_username']. '" && passwd="' 
//desencriptamos el password
. md5(md5($_POST['login_userpass'])) . '" LIMIT 1';
            if ( @$res = @mysql_query($sql) ){
                
                //contamos la columna y verificamos que sea igual y creamos la condicion 
                //para saber si hemos iniciado sesion correctamente
                if ( @mysql_num_rows($res) == 1 ){
                        
                    $user = @mysql_fetch_array($res);
                        
                    $_SESSION['username']   = $user['user'];
                    $_SESSION['userid'] = $user['id'];
                    echo 1;
                        
                }

Explicación 3ra parte:

//caso contrario presentamos los errores de campos vacios o mal ingreso de datos 
                    }
                else
                    echo 0;
            }
            else
                echo 0;
                
                
        }
            
        mysql_close($idcnx);
    }
    else
        echo 0;
}
else{
    echo 0;
    }
?> //cerramos php

Ahora creamos el archivo functions.ajax.js que se va a encargar de dar efecto y posicionar al index:

$(document).ready(function(){

// Login Ajax:
// Php mysql Ajax,
// Copyright 2015 bloguero-ec.
// Usese cómo mas le convenga no elimine estas líneas (http://www.bloguero-ec.com)

// tiempo de el slide en segundos   
    var timeSlide = 1000;
//posicionamos el puntero en el campo de usuario
    $('#login_username').focus();
//posicionamos el tiempo de ajax en cero
    $('#timer').hide(0);
//por el momento no mostramos el ajax
    $('#timer').css('display','none');
//damos clic en boton inicio de sesion
    $('#login_userbttn').click(function(){
//posicionamos el ajax de cero a 300 en fade
        $('#timer').fadeIn(300);
//mostramos las clases creadas dentro del css para mostrar los mensajes
        $('.box-info, .box-success, .box-alert, .box-error').slideUp(timeSlide);
//configuramos y creamos la condicion
        setTimeout(function(){
            if ( $('#login_username').val() != "" && $('#login_userpass').val() != "" ){
                
                $.ajax({
                    type: 'POST',
                    url: 'log.inout.ajax.php',
                    data: 'login_username=' + $('#login_username').val() + '&login_userpass=' + $('#login_userpass').val(),
                    
//si la sesion se inicia correctamente presentamos el mensaje 
                    success:function(msj){
                        if ( msj == 1 ){
                            $('#alertBoxes').html('<div class="box-success"></div>');
                            $('.box-success').hide(0).html('Espera un momento…');
                            $('.box-success').slideDown(timeSlide);
                            setTimeout(function(){
                                window.location.href = ".";
                            },(timeSlide + 500));
                        }
                        
//caso contrario los datos son incorrectos
                        else{
                            $('#alertBoxes').html('<div class="box-error"></div>');
                            $('.box-error').hide(0).html('Lo sentimos, pero los datos son incorrectos: ' + msj);
                            $('.box-error').slideDown(timeSlide);
                        }
                        $('#timer').fadeOut(300);
                    },
//si se pierden los datos presentamos error de ejecucion.
                    error:function(){
                        $('#timer').fadeOut(300);
                        $('#alertBoxes').html('<div class="box-error"></div>');
                        $('.box-error').hide(0).html('Ha ocurrido un error durante la ejecución');
                        $('.box-error').slideDown(timeSlide);
                    }
                });
                
            }
            
//caso cantrario si los campos estan vacios debemos llenarlos 
            else{
                $('#alertBoxes').html('<div class="box-error"></div>');
                $('.box-error').hide(0).html('Los campos estan vacios');
                $('.box-error').slideDown(timeSlide);
                $('#timer').fadeOut(300);
            }
        },timeSlide);
        
        return false;
        
    });
    
    
//funcion para destruir la sesion iniciada  
    $('#sessionKiller').click(function(){
        $('#timer').fadeIn(300);
        $('#alertBoxes').html('<div class="box-success"></div>');
        $('.box-success').hide(0).html('Espera un momento');
        $('.box-success').slideDown(timeSlide);
        setTimeout(function(){
            window.location.href = "logout.php";
        },2500);
    });
    
});

Creamos el estilo llamado para esta demostración stylesheet.css:

/*
 * Login php mysql ajax 
 * Php mysql Ajax,
 * Copyright 2015 bloguero-ec.
 * Usese cómo mas le convenga no elimine estas líneas (http://www.bloguero-ec.com)
*/
*{
    font-family: "Trebuchet MS", Arial, Sans-serif;
    margin: 0px;
    padding: 0px;
    border: 0px;
    background-color: transparent;
    letter-spacing: 0px;
    word-spacing: 0.08em;
    line-height: 18px;
}

body{
    font-size: 11px;
    background-color: #fff;
    color: #777;
}

#allContent{
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    text-align: center;
}

.inner{
    display: block;
    padding: 10px;
}

#alertBoxes{
    display: block;
    width: 500px;
    text-align: left;
    margin-bottom: 10px;
    margin-top: 10px;
}
.loginBlock{
    display: block;
    width: 500px;
    border: 1px solid #eaeaea;
    background-color: #fafafa;
    /*text-align: left;*/
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

.loginBlock form input[type=text], .loginBlock form input[type=password]{
    display: inline-block;
    margin: 5px;
    border: 1px solid #dadada;
    background-color: #eaeaea;
    padding: 3px;
    color: #404040;
    width: 380px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}
.loginBlock form button{
    display: inline-block;
    margin: 5px;
    border: 1px solid #dadada;
    background-color: #eaeaea;
    padding: 3px;
    padding-left: 20px;
    padding-right: 20px;
    color: #404040;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}
.timer{
    display: inline-block;
    width: 12px;
    height: 12px;
    background-image: url('loader.gif');
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.box-info, .box-success, .box-alert, .box-error{
    clear: both;
    border-width: 1px;
    border-style: solid;
    margin: 0px;
    padding: 5px;
    background-repeat: no-repeat;
    background-position: 0px 50%;
    text-align: left;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
.box-info {
    color: #00529b;
    background-color: #bde5f8;
    border-color: #00529b;
}
.box-success {
    color: #4f8a10;
    background-color: #dff2bf;
    border-color: #4f8a10;
}
.box-alert {
    color: #9f6000;
    background-color: #feefb3;
    border-color: #9f6000;
}
.box-error {
    color: #d8000c;
    background-color: #ffbaba;
    border-color: #d8000c;
}

.session_on{
    display: block;
    text-align: left;
}

Para usar una imagen de precarga visita esta página Obtener un Ajaxloadinfo.png y utiliza el que mas te convenga.

El archivo jQuery tendrás que descargar de la web de autor y entre head y head colocar la ruta del script.

O si deseas puedes usar sus hosted CDN ubicados en varios servidores acá dejo un link de cómo utilizar jQuery

La tabla a utilizar es la siguiente :

    create table ajaxusers(
    id int unsigned not null primary key auto_increment,
    user varchar(50) unique not null,
    passwd varchar(32) not null,
    email varchar(100) not null
);

Créditos :

Licence: GPL|LGPL

Esta forma de presentar un inicio de sesion con ajax , php y jquery es elegante podrás modificar y hacer uso de este plugin respetando las normas de La licencia GPL del autor .

Atención .- Licencia GPL deja los comentarios dentro del script para hacer uso del function.ajax.js.

Este sistema está desactualizado el admin ha desactivado su demostración cualquier duda dejenos su comentario…

Nuevo Login php mysqli para web..click aquí

Visita nuestro nuevo sistema de comentarios mas panel de administración click aquí

Visita nuestro nuevo Login Php Mysql Panel de Administración