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.