Blog
En este tutorial aprenderemos a realizar un login en PHP usando sesiones y bootstrap para el diseño. Antes de comenzar les recomiendo leer el tutorial donde se explica cómo crear un formulario en PHP y también el de cómo conectar a una base de datos mysql desde PHP.
Creando un login en PHP
Vamos a empezar creando nuestro formulario con HTML y Bootstrap. El siguiente código lo podemos incluir en un archivo llamado index.html:
<!DOCTYPE html>
<html>
<head>
<title>Login en PHP</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
.container{margin-top:100px}
</style>
</head>
<body>
<div class="container">
<form class="form-horizontal" action="login.php" method="post">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" name="email" id="inputEmail3" placeholder="Email" required>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" name="password" id="inputPassword3" placeholder="Password" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
</div>
</body>
</html>
En este formulario HTML no hay nada nuevo, lo único importante es que al oprimir el botón se envía el email y password por método post al archivo login.php.
En el archivo login.php vamos a incluir la lógica para validar el usuario y realizar una determinada acción si el mismo es incorrecto o no:
<?php
session_start();
// Obtengo los datos cargados en el formulario de login.
$email = $_POST['email'];
$password = $_POST['password'];
// Esto se puede remplazar por un usuario real guardado en la base de datos.
if($email == 'email@dominio.com' && $password == '1234'){
// Guardo en la sesión el email del usuario.
$_SESSION['email'] = $email;
// Redirecciono al usuario a la página principal del sitio.
header("HTTP/1.1 302 Moved Temporarily");
header("Location: principal.php");
}else{
echo 'El email o password es incorrecto, <a href="index.html">vuelva a intenarlo</a>.<br/>';
}
?>
En el código anterior se puede ver que si el usuario es el incorrecto lo redirige nuevamente a la página de inicio y en caso de que sea el correcto a la página principal del sistema.
En la página principal del sistema le vamos a dar la bienvenida al usuario y la posibilidad de cerrar sesión. El siguiente código lo podemos incluir en un archivo llamado principal.php:
<?php
session_start();
// Controlo si el usuario ya está logueado en el sistema.
if(isset($_SESSION['email'])){
// Le doy la bienvenida al usuario.
echo 'Bienvenido <strong>' . $_SESSION['email'] . '</strong>, <a href="cerrar-sesion.php">cerrar sesión</a>';
}else{
// Si no está logueado lo redireccion a la página de login.
header("HTTP/1.1 302 Moved Temporarily");
header("Location: index.html");
}
?>
En esta página se controla si el usuario ya esta logueado, si es así se muestra el mensaje de bienvenida y un link para cerrar la sesión, en caso que no este logueado se lo redirige a la página de inicio.
Por último nos falta la página para cerrar sesión. Para esto podemos crear el archivo cerrar-sesion.php e incluir el siguiente código:
<?php
session_start();
// Elimina la variable email en sesión.
unset($_SESSION['email']);
// Elimina la sesion.
session_destroy();
// Redirecciona a la página de login.
header("HTTP/1.1 302 Moved Temporarily");
header("Location: index.html");
?>
Ahora si queremos agregarle una base de datos MYSQL a nuestro login debemos seguir los pasos del tutorial: http://programacionextrema.com/2015/10/21/login-en-php-con-base-de-datos-mysq.
Bueno, hemos llegado al final de este tutorial, espero que les sea de gran utilidad y como digo siempre ante cualquier problema no duden en dejar un comentario.
Muy bueno, gracias por compartirlo!!!
Saludos
Por nada Fernando, gracias a vos por visitar mi sitio.
yo acabo de descargar sign-in page de bootstrap y no doy con la forma de usarlo,
Autentificación
Usuario
Contraseña
Recordarme
Entrar
será que lo que evalúo normalmente en name es acá id=”inputemail” e id=”inputpassword”???
Hola Rodrigo, no entiendo bien cual es tu inconveniente. El name sirve para obtener el valor del input en el servidor (con PHP). Osea si no le pones un name al input nunca vas a poder obtener el valor. Espero que te haya resuelto tus dudas.
Oye, super que la información que se necesita la pueda encontrar en internet en un lenguaje tan sencillo de explicar y claro, gracias por esta publicación, tenia un chicharron con este tema y gracias a tu publicación ya me quedo listo, ojala internet tuviera información tan buena como la tuya.
Muchas gracias por este aporte, le aplique algunos cambios para adaptar a lo mio y me ha funcionado perfectamente. Gracias
Me alegra que te haya servido, cualquier consulta me avisas. Un saludo.
Hola, una pregunta, como hago para poner varios usuarios?
Así como email@dominio.com funciona, quiero añadir otro, como podría?
Y otra duda, como puedo hacer que en vez de tener que poner un email (con un arroba) pueda poner una serie de números?
Es urgente. 🙁
Gracias de antemano!
[…] […]
[…] […]