Login en PHP + AJAX + MYSQL

Login php

Login php
Bueno amigos, en este artículo veremos como crear un login de usuarios haciendo uso de php, ajax, mysql y un poco de boostrap para el aspecto de nuestra página, cuento con una tabla en mi base de datos mysql la cual solo tiene dos campos un id y la contraseña para acceder veamos:
Password

Solo he utilizado un valor «la contraseña», ustedes ya usaran el usuario también, seguido creamos la estructura para nuestro proyecto así:
proyecto
Cabe recordar que estoy haciendo uso de boostrap mas no es obligatorio.
Ahora tenemos el index.php donde encontramos el código javascript encargado de ejecutar el archivo de validación sin necesidad de recargar la página haciendo uso de AJAX.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
< !DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta name="description" content=""/>
    <meta name="author" content=""/>
    <title>Login PHP + MYSQL + AJAX</title>
    <link href="css/bootstrap.min.css" rel="stylesheet"/>
    <script src="js/jquery.min.js"></script>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        < ![endif]-->
    </head>
    <body>
        <div id="wrapper">
            <div id="page-wrapper">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-lg-12">
                            <h1 class="page-header">
                                Login <small>PHP + MYSQL + AJAX</small>
                            </h1>
                        </div>
                    </div>
                    <div class="row" id="contenedor">
                        <div class="col-lg-12">
                         <div class="panel panel-primary">
                            <div class="panel-heading">
                                <h3 class="panel-title"><i class="fa fa-bar-chart-o"></i> Acceso</h3>
                            </div>
                            <div class="panel-body">
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <label for="textID">Por favor Ingrese una Contraseña</label>
                                            <br />
                                            <input type="password" id="txtp" class="form-control"/>
                                            <br />
                                            <button class="btn btn-primary" type="button" onclick="Acceder();">Acceder</button>
                                        </div>
                                        <p id="msj3" style="color:#FB1313"></p>
                                    </div>  
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
    function objetoAjax(){
    var xmlhttp=false;
    try {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (E) {
            xmlhttp = false;
        }
    }
    if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
        xmlhttp = new XMLHttpRequest();
    }
    return xmlhttp;
}
    function Acceder () {
      var p = document.getElementById("txtp").value;
      if(p=="" || p==null){
        document.getElementById('msj3').innerHTML="Por favor Ingrese un valor";
    }else{
        ajax=objetoAjax();
        ajax.open("POST", "phps/validacion.php", true);//Archivo que válida la contraseña
        ajax.onreadystatechange=function () {
            if (ajax.readyState==4) {
                if(ajax.responseText==true){//Validamos la respuesta obtenida
                    document.getElementById('contenedor').innerHTML="";
                    ajax2=objetoAjax();
                    ajax2.open("POST", "phps/cuerpo.php", true);//Cargamos el contenido de nuestra pagina
                    ajax2.onreadystatechange=function () {
                        if (ajax.readyState==4) {
                         document.getElementById('contenedor').innerHTML=ajax2.responseText;
                    }
                }
                var x="ok";//Enviamos un parametro ok para poder ejecutar el script
                ajax2.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                ajax2.send("m="+x)
            }else{
                document.getElementById('msj3').innerHTML="Su Contraseña es Incorrecta";
            }
        }
    }
    ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    ajax.send("pss="+p)
}
}
</script>
</body>
</html>

El archivo cuerpo, sera la interfaz que le mostraremos al usuario cuando se autentique:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<?php
error_reporting(0);
if($_POST['m']=="ok"){
    ?>
        <div class="col-lg-12">
            <div class="panel panel-success">
                <div class="panel-heading">
                    <h3>Bienvenido</h3>
                </div>
                <div class="panel-body">
                    <div class="row">
                        <br />
                        <div class="col-lg-4">
                        <div class="col-lg-12">
                            <div class="panel panel-red">
                                <div class="panel-heading">
                                    <h3 class="panel-title"><i class="fa fa-bar-chart-o"></i> Usted ha ingresado con exito!</h3>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <?php
}else{
    print("Esta accion no esta permitida");
}
?></div>

El archivo validacion.php encargado de recibir el parámetro y verificar su existencia en la base de datos:

1
2
3
4
5
6
7
8
9
10
11
12
<?php
error_reporting(0);
$valor = $_POST['pss'];
require_once('conexion.php');
$con = Conectar();
$count = current($con->query("SELECT COUNT(id) FROM acceso WHERE password='$valor'")->fetch());
if($count>0){
    print(true);
}else{
    print(false);
}
?>

Por último pero no menos importante nuestro archivo conexión.php el cual mediante PDO realiza la conexión a MYSQL:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
function Conectar (){
    $conn = null;
    $host = '127.0.0.1';
    $db =   'test';
    $user = 'root';
    $pwd =  '';
    try {
        $conn = new PDO('mysql:host='.$host.';dbname='.$db, $user, $pwd);
    }
    catch (PDOException $e) {
        echo 'No se pudo conectar a la base de datos !!';
        exit;
    }
    return $conn;
 }
?>

y ahora si todo ha salido bien, al ingresar tu contraseña debe mostrarte el mensaje de bienvenida contenido en la página cuerpo.php:
Bienvenido

Hasta pronto!.