5/22/2018 Como Hacer Un Login Con PHP y MySQL Con Validaci n en AJAX
http:///reader/full/como-hacer-un-login-con-php-y-mysql-con-validacion-en-a
Como hacer un login con PHP y MySQL con
validacin en AJAX
Hola amigos, en este post les voy a ensear a hacer un Login (Inicio de sesin) en PHP con
MySQL utilizando AJAX para la validacin, tambin utilizaremos HTML5 y CSS3 para el
diseo de las pginas.
La lgica se basa en crear 2 pginas: index.php (cuando la sesin no este activa) y
welcome.php (cuando la sesin este activa), 1 pgina para validar al usuario: validar.php y
ltimamente 1 hoja de estilo: estilo.css.
Al final nos debera quedar algo as:
5/22/2018 Como Hacer Un Login Con PHP y MySQL Con Validaci n en AJAX
http:///reader/full/como-hacer-un-login-con-php-y-mysql-con-validacion-en-a
5/22/2018 Como Hacer Un Login Con PHP y MySQL Con Validaci n en AJAX
http:///reader/full/como-hacer-un-login-con-php-y-mysql-con-validacion-en-a
Vamos con elcdigo de los archivos.
INDEX.PHP
INICIO DE SESIN
Login PHP y MySQL -
http://www.genesisvargasj.tk
INICIO DE SESIN
5/22/2018 Como Hacer Un Login Con PHP y MySQL Con Validaci n en AJAX
http:///reader/full/como-hacer-un-login-con-php-y-mysql-con-validacion-en-a
ENTRAR
functionValidar(user, pass)
{
$.ajax({
url: "validar.php",
type: "POST",
data: "user="+user+"&pass="+pass,
success: function(resp){
$('#resultado').html(resp)
}
});
}
5/22/2018 Como Hacer Un Login Con PHP y MySQL Con Validaci n en AJAX
http:///reader/full/como-hacer-un-login-con-php-y-mysql-con-validacion-en-a
Aqu iniciamos sesin: session_start() y verificamos si la variable $_SESSION['usuario']
esta definida, si todo va bien debera mostrarse todo el codigo html de sta pgina donde
mostraremos el formulario para iniciar sesin el cual validamos con una funcion llamada
Validar() que recibe dos parametros: user y pass los cuales mandamos a trves del onclicken el button con la funcion document.getElementById de cada input, en esa funcion usamos
el modulo ajax que Jquery trae y le pasamos los parametros data (que recogemos en la
funcin), le mandamos la ruta del archivo que preocesa la peticin, 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 pagina welcome.php.
WELCOME.PHP
BIENVENIDO
BIENVENIDO
:
Aqu te toca poner todo lo que que solo tus usuario
registrados pueden ver. :)
5/22/2018 Como Hacer Un Login Con PHP y MySQL Con Validaci n en AJAX
http:///reader/full/como-hacer-un-login-con-php-y-mysql-con-validacion-en-a
CERRAR SESIN
Aqu iniciamos sesin: session_start() y verificamos si la variable $_SESSION['usuario']
esta definida, si todo va bien debera mostrarse todo el codigo html de sta pgina donde
mostraremos el nombre del usuario activo y le colocaremos un link para que se pueda
cerrar la sesin (logout.php); sino esta definida la variable simplemente lo mandamos para
la pagina index.php.
VALIDAR.PHP
5/22/2018 Como Hacer Un Login Con PHP y MySQL Con Validaci n en AJAX
http:///reader/full/como-hacer-un-login-con-php-y-mysql-con-validacion-en-a
{$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'location.href ="welcome.php"';
}else{
echo'El usuario y/o clave son incorrectas,vuelva a intentarlo.';
}}?>
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 vacias/nulas,
si no es asi procedemos a hacer una consulta buscando si hay un registro donde las vaiables
sean iguales a los que hay en la tabla usuario; si encontramos un registro es decir que
numero de filas sea mayor que cero (mysqli_num_rows($consulta)>0) procedemos a
asignar lo de la variable user a la variable de sesin y redireccionamos a la pagina donde
solo los usuarios registrados pueden acceder.
LOGOUT.PHP
5/22/2018 Como Hacer Un Login Con PHP y MySQL Con Validaci n en AJAX
http:///reader/full/como-hacer-un-login-con-php-y-mysql-con-validacion-en-a
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 tambin un demo para que lo vean en
funcionamiento.