El login o inicio de sesión es el proceso mediante el cual un usuario ingresa sus credenciales para acceder a una plataforma protegida. En este artículo, exploraremos cómo implementar un sistema de login utilizando PHP y MySQL, y proporcionaremos un código de ejemplo para ilustrar el proceso.
Antes de comenzar, es importante tener los siguientes requisitos para poder implementar el login
Vamos a crear un sistema de logueo en PHP Y MySql, con la extensión de PHP PDO.
- Crearemos la tabla users
- Creamos un archivo de conexion a la base de datos llamado conexion.php
- Creamos otro archivo llamado login.view.php y otro login.php, para separar la vista del servidor
- También creamos un archivo llamado btn.php, es para que el boton se esconda y aparezca el nombre del usuario
- Luego creamos una página llamada home.php, que va a mostra una vez el logueo sa correcto.
Tabla Users
CREATE TABLE `users` (
`uid` int NOT NULL PRIMARY KEY AUTO_INCREMENT ,
`username` varchar(25) NOT NULL UNIQUE,
`password` varchar(200) NOT NULL ,
`email` varchar(100) NOT NULL,
`name` varchar(100) NOT NULL,
`profile_pic` varchar(200) NOT NULL,
);
conexion.php
<?php
try {
$conexion = new PDO('mysql:host=localhost;dbname=prueba-login', 'root' , '');
} catch (Exception $e) {
echo "ERROR A LA CONECCION DE LA BASE DE DATOS";
}
?>login.view.php
<?php
<div class="formu">
<form name="form" method="post" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>">
<center> <h1 class="text-light"><i>Login de Acceso</i></h1></center>
<hr class="thin"/>
<br />
<div class="input-control text full-size" data-role="input">
<label for="user_login">Usuario:</label>
<input type="text" name="usuario" id="user_login">
<button class="button helper-button clear"><i class="fa fa-user-plus" aria-hidden="true"></i></span></button>
</div>
<br />
<br />
<div class="input-control password full-size" data-role="input">
<label for="user_password">Usuario password:</label>
<input type="password" name="password" id="user_password">
<button class="button helper-button reveal"><i class="fa fa-unlock" aria-hidden="true"></i></span></button>
</div>
<br />
<br />
<br>
<?php
if(!isset($_SESSION['usuario'])){
include 'btn_enviar.php'; } ?>
<?php if(!empty($enviar)): ?>
<div class="enviar">
<?php echo $enviar; ?>
</div>
<?php echo $enviado; ?>
<?php endif; ?>
<?php if(!empty($error)): ?>
<div class="panel alert">
<div class="heading ">
<?php echo $error ?>
</div>
</div>
<?php endif; ?>
</div>
</form>
?>login.php
<?php
$error='';
$enviar='';
$enviado ='';
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$usuario = $_POST['usuario'];
$password = $_POST['password'];
$sql = $conexion->prepare('SELECT * FROM users WHERE username= :usernameAND pass = :password');
$sql->execute( array(':username' => $usuario ,
':password'=> $password ));
$resultado = $sql->fetch();
if ($resultado !== false) {
$_SESSION['usuario'] = $usuario;
$enviar .= '<center> Bienvenido <br>'. ucwords($resultado['usuario']). '</center> <br>';
$enviar .= '<meta http-equiv="refresh" content="2;url=index.php">';
$enviado .= '<center><i class="fa fa-cog fa-spin fa-3x fa-fw"></i><br>
<span class="">Loading...</span></center><br>';
} else {
$error .= '<li> Los Datos ingresados son Incorrecto </li>';
}
}
?>btn.php
<div class="form-actions">
<input type="submit" id="" class=" id button large-button info" name="" value="Aceptar e Ingresar..." >
</div>Listo! Terminamos el login, ahora solo falta integrarlo con tu sistema así como las validaciones en caso de error.
Whoa! This blog looks just like my old one! It’s on a totally different subject but it has pretty much the same layout and design. Excellent choice of colors!
Genial muy bueno