Anteriormente subí un ejemplo de login con html y PHP utilizando el action del form de HTML pero en esta ocasión vamos a utilizar Ajax.
Una de las ventajas es que al hacer la verificación la página no se refresca ni cambia de ruta, dependiendo de la respuesta del servidor podemos mostrar contenido en algún otro objeto en la misma ventana.
El ejemplo final se verá así:
Este ejemplo es muy sencillo solo vamos a usar dos archivos, uno con el HTML donde vamos a tener los objetos y el script (js) y un archivo PHP donde haremos la conexión con la base de datos.
Nota: En este ejemplo yo supongo que tienes al menos el mínimo tipo de conocimiento creando bases de datos (phpmyadmin), si no es así te recomiendo que revises los tutoriales. Tambien supongo que si estas probando de manera local (lo cual recomiendo) haz de tener instalado los servicios básicos necesarios (Apache, PHP, Mysql) si no es así te recomiendo que descargues XAMPP, WAMP o cualquier otro tipo de estas herramientas que te instalan todo junto.
Aqui te dejo un link para descargar xampp desde su pagina oficial XAMPP
Ok volviendo al tema.
Para este ejemplo necesitamos tener una base de datos con una tabla donde vamos a validar al usuario, mi base de datos se llama test y solo tengo una tabla que se llama usuario y tiene 4 campos (id, usuario, password y nombre)
usuario de tipo varchar con longitud de 50 en este campo es donde se va a guardar el usuario que generalmente es un alias o un pseudonimo corto
password de tipo varchar con una longitud de 50
nombre de tipo varchar y una longitud de 100, este campo es más largo por que aquí guarde el nombre completo del usuario para mostrarlo cuando sea validado junto con la leyenda Bienvenido.
Claro que despues de crear la tabla inserte un usuario que voy a utilizar para el ejmplo su id (obvio) fue el 1 el usuario es usuario (perdón por la falta de originalidad jejeje) y la contraseña es (una muy dificil XD) 123456 el nombre completo del usuario es Juan Perez
Una vez completado este proceso vamos al archivo html.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//ES" "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=UTF-8" />
<meta http-equiv="content-language" content="es" />
<title>Ejemplo Login con Ajax 1</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script type="text/javascript">
function Verifica(){
var user = document.getElementById("usuario").value;
var pass = document.getElementById("password").value;
$.post("conexion.php",{usuario:user,password:pass},function(data){
if(data!="NO"){
$("#mensaje").html("<span class='verde'>Bienvenido "+ data+ "</span>");
}
else{
$("#mensaje").html("<span class='roja'>Usuario no válido.</span>");
}
});
}
</script>
<style>
body{
width:100%;
margin:auto;
text-align:center;
}
.box{
width:400px;
margin:auto;
padding:10px;
border: solid 1px #ccc;
border-radius:5px;
font-size:14px;
font-weight: 600;
text-align:left;
}
.box input{
margin:5px;
}
.verde{color:#06A50B;font-weight: 600;}
.roja{color:#F11A1A;font-weight: 600;}
</style>
</head>
<body>
<h1>Login Utilizando Ajax Ejemplo1</h1>
<div class="box">
<label>usuario: </label><input type="text" id="usuario" />
<br />
<label>contraseña: </label><input type="password" id="password" />
<br />
<input type="button" value="Iniciar sesión" onclick="Verifica();"/>
</div>
<br />
<div id="mensaje"></div>
</body>
</html>
Explicaré el código:
Lo primero es estructura básica de HTML con el titulo y los metas, después tenemos una liga muy importante y que es necesaria para que este ejemplo funcione. Es la liga donde mandamos llamar el script de JQuery si no lo llamamos nuestra función JS (Ajax) no va a funcionar.
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.jsAhora yo aqui la estoy mandando llamar desde los repositorios de google pero tambien se puede descargar el script que es un archivo .js y lo puedes poner en tu carpeta del proyecto y solo mandarlo llamar por ejemplo src="Public/js/jquery.min.js" y listo.
Después tenemos otro <script> que es donde tenemos la función Verifica() ésta la explicamos más adelante.
Ahora los objetos html que tenemos dentro del <body> son un div que es el recuadro redondeado que contiene los campo de texto. Y por ende tenemos 3 input de tipos distintos
input type "text" con un id ="usuario" es el campo de texto donde el usuario pondrá su usuario valga la redundancia.
input type "password" con id="password" que es donde el usuario pondrá la contraseña, es de tipo password por que es lo que le da el efecto de que se vean los puntitos o asteriscos dependiendo del navegador y así la contraseña no sea visible.
input type "button" con el value="Inicia Sesión" y con el atributo onclick que manda llamar a la función Verifica(), este será el botón.
También vamos a tener un div con el id="mensaje" , este div es el que va a recibir el mensaje de estar validado o no.
Es muy importante que se pongan los id por que será con esto que obtengamos sus valores que serán enviados vía POST al archivo PHP.
Ok ahora si la función Verifica()
function Verifica(){
var user = document.getElementById("usuario").value;
var pass = document.getElementById("password").value;
$.post("conexion.php",{usuario:user,password:pass},function(data){
if(data!="NO"){
$("#mensaje").html("<span class='verde'>Bienvenido "+ data+ "</span>");
}
else{
$("#mensaje").html("<span class='roja'>Usuario no válido.</span>");
}
});
}Primero tenemos una variable user que va a ser igual al valor que contenga el objeto con id usuario y una variable pass que va a ser igual al valor del objeto con id password.
Después viene lo importante que es la llamada Ajax.
El formato del $post se puede manejar de varias maneras pero este que vamos a manejar es el más sencillo y vamos a manejar 3 datos separados por coma:
$.post("ruta del archivo",{Parametros},function(data){ruta del archivo al que vamos a hacer conexión. en este caso el archivo PHP donde haremos la consulta se llama conexion.php y lo tengo en la misma ruta de "este" archivo HTML por lo que solo le pongo el nombre "conexión.php".
Parametros que estamos validando, estas variables van a ir entre llaves. Si es más de una variable, dentro de las llaves van separadas por comas y la manera de indicar las variables es:
nombre del parámetro : valor que le queremos pasar.
En este caso en el archivo PHP los parametros los voy a tomar con el nombre de:
usuario que tendrá el valor de la variable user (que explique arriba).
password que tendrá el valor de la variable pass(que explique arriba).
Por lo tanto podemos ver que dentro de la función tenemos un IF :
if(data!="NO"){
$("#mensaje").html("<span class='verde'>Bienvenido "+ data+ "</span>");
}
else{
$("#mensaje").html("<span class='roja'>Usuario no válido.</span>");
}Esto lo que va a hacer es que va a comparar el valor que tenga data si es diferente de NO quiere decir que trae el nombre completo por lo tanto vamos a buscar con $("#mensaje") al objeto con id=mensaje
y le vamos a agregar por medio de .html() un objeto <span></span> que va a tener la leyenda "Bienvenido" y el valor de data que en nuetsro ejemplo va a ser Juan perez. Podemos observar que el <span> tiene como atributo la clase "verde" más adelante explicaré el código de los estilos.
Si por el contrario el data es igual a NO entonces quiere decir que el usuario no es válido y por lo tanto al div "mensaje" le vamos a agregar un <span></span> con la leyenda "Usuario no válido" y este <span > va a tener como atributo la clase "roja" para que el texto tenga color rojo.
Bueno eso es toda la función.
Los estilos estos no son necesarios para el buen funcionamiento del ejercicio es solo estética. Pero bueno tenemos primero las estiquetas <style> que deben estar dentro de la sección <head> del html yo prefiero hacer un archivo aparte y solo poner el link para así tener mejor ordenado y mantener más limpios los códigos pero como es poquito no nos hace daño.
El primer estilo es en el body le estamos dando un ancho del 100% con márgenes automáticos para que nos centre el contenido y alineamos el texto al centro.
Tenemos una clase box que es la clase que tiene el div que contiene los campos de texto, aquí le pusimos un ancho de 400px , margenes automáticos, un padding de 10px para que el contenido no este pegado a los bordes, también le estamos poniendo un borde de un pixel de ancho de color gris y con un radio de 5px, esto es lo que hace que se vea redondeado en las esquinas, le estamos indicando que dentro de este div el tamaño de la letra será de 14px y será de un ancho de 600 lo que hará que tenga el mismo efecto que si le ponemos la etiqueta <b> al texto, y por último le indicamos que el contenido de este div va a estar alineado a la izquierda.
Debajo de .box vemos que hay otra clase que dice .box input{} esto indica que este estilo solo lo tendrán los objetos de tipo input que estén dentro del objeto que tenga la clase box (osea solo los inputs dentro del div) y este le puse un margen de 5px para que no se vean empalmados.
Por último tenemos las clases .verde y .roja que son las clases que le pusimos a los objetos <span> que van a ser los mensaje de validación lo único que tiene es el color , esta indica el color de fuente que va a tener el mensaje verde si esta validado correctamente y roja si no es válido.
<style>
body{
width:100%;
margin:auto;
text-align:center;
}
.box{
width:400px;
margin:auto;
padding:10px;
border: solid 1px #ccc;
border-radius:5px;
font-size:14px;
font-weight: 600;
text-align:left;
}
.box input{
margin:5px;
}
.verde{color:#06A50B;font-weight: 600;}
.roja{color:#F11A1A;font-weight: 600;}
</style>Hasta aquí es todo el HTML Ahora vamos a ver el código del archivo PHP "conexion.php"
<?php
$mysqli= new mysqli("localhost","root", "");
$mysqli->select_db("test");
if($mysqli->connect_errno){
echo "Fallo al conectar a MySQL:(". $mysqli->connect_errno.")". $mysqli->connect_errno;
}
else{
$validado="";
$user=$_POST["usuario"];
$pass=$_POST["password"];
if($consulta= $mysqli->query("SELECT * from usuario where usuario='$user' and password='$pass' " )){
$row_cnt = $consulta->num_rows;
//Si existe el usuario lo valida.
if($row_cnt == 1){
while($row=$consulta->fetch_assoc()){
$nombreUsuario=$row['nombre'];
}
$validado=$nombreUsuario;
}
else if($row_cnt <= 0){ $validado="NO"; }
}
else{ $validado= $mysqli->error; }
$mysqli->close(); //Cierra concexión con la base de datos.
echo $validado;
}
?>
Lo primero que estamos haciendo es la conexión con la base de datos indicando el servidor como estoy trabajando de manera local entonces le agrego localhost el usuario que tiene acceso a la base de datos (root) y la contraseña en caso de tenerla, si no tiene se dejan las comillas sin espacio ("").
Después indico el nombre de la base de datos a la que me voy a conectar (test) y estoy validando, si hubo algún problema con la conexión muestro un mensaje por el contrario sigo y hago la consulta.
dentro del else tengo una variable $validado que inicia vacía, después tengo la variable $user que es igual al parámetro que estoy recibiendo por medio del POST con el nombre de usuario y una variable $pass que es igual al parámetro password (son los parámetros que mandamos desde el $post de AJAX) y luego tenemos dentro de un if una consulta. Donde estoy seleccionado todo de la tabla usuario donde el campo usuario y el campo password sean igual a las varibles $user y $pass.
Si la consulta se realizó con éxito entonces verifico que exista un usuario que haya coincidido con los valores que le pase, esto es contando las filas que me mando la consulta si es ==1 quiere decir que existe el usuario por lo tanto es válido y pongo dentro de una varibale $nombreUsuario el valor del campo nombre de la tabla. Después a la variable $validado le vamos a dar el valor de $nombreUsuario.
En caso de que no haya existido ninguna coincidencia quiere decir que el usuario que estoy ingresando no es válido y a la variable $validado le vamos a dar el valor de "NO".
Si por el contrario la consulta no se realizó con éxito, esto quiere decir que hubo algún error de sintaxis entonces la variable $validado va a ser igual al error que msqli haya encontrado.
Cerramos la conexión con la base de datos e imprimimos el valor de $validado.
En realidad $validado no se va a mostrar en la pantalla si no que lo va a tomar la variable data que tenemos en el Function(data) del $post del script del archivo HTML.
Ahora todo tiene sentido verdad??
Bueno Con eso terminamos nuestro archivo PHP lo último que tenemos que hacer es guardar y correr.
vamos a tener una pantalla como la siguiente
Si ponemos el usuario "usuario" y cualquier otra cosa en la contraseña , o simplemente dejamos en blanco los campos y luego damos clic en Iniciar Sesión vamos a tener lo siguiente.
Y listo quiere decir que nuestro ejemplo funciona correctamente.
Como ven este es un ejemplo muy sencillo , lo puedes mejorar si en lugar de mostrar las leyenda lo rediriges a la siguiente pantalla por medio de un load de jquery.
Bueno espero que este ejercicio les ayude, es una manera sencilla de iniciar por las vías de Ajax en comunicación con mysql.
No se olviden de dejarme sus comentarios, dudas ,sugerencias, o como les gustaría que completáramos este ejemplo o ideas para otros ejercicios.
Si les interesa ver el otro ejemplo de login pero utilizando el form y action denle clic aqui .
Como siempre recuerden que por ningún motivo quiero decir que esta sea la única ni la mejor alternativa para resolver un login, es un ejemplo de los muchos que pueden encontrar y espero que les funcione.
Reciban saludos y hasta pronto.
"Programar no tiene que ser tan difícil como parece...."
Si subo el archivo php a un servidor y en un cliente ejecuto lo de html no me funciona pero en local es decir con el Xamp si me funciona, me podría ayudar?
ResponderEliminarEste comentario ha sido eliminado por un administrador del blog.
ResponderEliminar