En el presente tutorial paso a explicar el desarrollo de un login en PHP y MySQL desde cero, un login en sí, es un sistema de control de acceso a una aplicación, para poder restringir, quien hace modificaciones sobre una aplicación o quien solo puede hacer consultas y del mismo modo evitar que usuarios no autorizados ingresen a la información de la aplicación.
Todas las aplicaciones que comunmente utilizamos tienes sistemas de login habilitados, por ejemplo Youtube, Facebook, Twitter, Linkedin, entre otros.
Cabe agregar que no es la primera vez que se abarca esta temática en este blog, tengo varios sistemas de login y registro, tanto en PHP y MySQL como en Javascritp, la diferencia es que en este caso se abarca el tema desde cero y no la aplicación ya terminada y lista para su distribución, a continuación listo los sistemas de login que tengo en este blog
- Registro y Login de Usuarios con PHP y MySQL
- Sistema de Inicio de Sesión y Registro en PHP y MySQL
- Registro de Usuario, Login y Cambio de Contraseña en PHP y MySQL
- Login PHP MySQL con Signup Se comparte el Código
Video Explicativo Tutorial – Cómo hacer un login con PHP y MySQL
Enlace de descarga directo del proyecto de GitHub
El siguiente enlace es del Repositorio de la aplicación en GitHub donde puedes acceder directamente al código utilizado en el tutorial
Base de Datos del Sistema de Acceso
En el siguiente enlace podrás acceder al código SQL que podrás insertar en PHP My Admin para crear la base de datos sin inconvenientes:
Enlace de la base de datos sobre el como hacer un login con PHP y MySQL
Scripts del Software de Login
A continuación se listas los scripts requeridos para el funcionamiento del proyecto referenciado en el tutorial de como hacer un login en PHP
style.css
* {
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
background-color: #fc7d1c;
}
.login {
width: 400px;
background-color: #ffffff;
box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
margin: 100px auto;
}
.login h1 {
text-align: center;
color: #5b6574;
font-size: 24px;
padding: 20px 0 20px 0;
border-bottom: 1px solid #dee0e4;
}
.login form {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding-top: 20px;
}
.login form label {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
background-color: darkblue;
color: #ffffff;
}
.login form input[type="password"], .login form input[type="text"] {
width: 310px;
height: 50px;
border: 1px solid #dee0e4;
margin-bottom: 20px;
padding: 0 15px;
}
.login form input[type="submit"] {
width: 100%;
padding: 15px;
margin-top: 20px;
background-color: darkblue;
border: 0;
cursor: pointer;
font-weight: bold;
color: #ffffff;
transition: background-color 0.2s;
}
.login form input[type="submit"]:hover {
background-color: darkblue;
transition: background-color 0.2s;
}
.navtop {
background-color: darkblue;
height: 60px;
width: 100%;
border: 0;
}
.navtop div {
display: flex;
margin: 0 auto;
width: 1000px;
height: 100%;
}
.navtop div h1, .navtop div a {
display: inline-flex;
align-items: center;
}
.navtop div h1 {
flex: 1;
font-size: 24px;
padding: 0;
margin: 0;
color: #eaebed;
font-weight: normal;
}
.navtop div a {
padding: 0 20px;
text-decoration: none;
color: #c1c4c8;
font-weight: bold;
}
.navtop div a i {
padding: 2px 8px 0 0;
}
.navtop div a:hover {
color: #eaebed;
}
body.loggedin {
background-color: #f3f4f7;
}
.content {
width: 1000px;
margin: 0 auto;
}
.content h2 {
margin: 0;
padding: 25px 0;
font-size: 22px;
border-bottom: 1px solid #e0e0e3;
color: #4a536e;
}
.content > p, .content > div {
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
margin: 25px 0;
padding: 25px;
background-color: #fff;
}
.content > p table td, .content > div table td {
padding: 5px;
}
.content > p table td:first-child, .content > div table td:first-child {
font-weight: bold;
color: #4a536e;
padding-right: 15px;
}
.content > div p {
padding: 5px;
margin: 0 0 10px 0;
}index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div class="login">
<h1>Sistema de Login Básico ConfiguroWeb</h1>
<form action="autenticacion.php" method="post">
<label for="username">
<i class="fas fa-user"></i>
</label>
<input type="text" name="username"
placeholder="Usuario" id="username" required>
<label for="password">
<i class="fas fa-lock"></i>
</label>
<input type="password" name="password"
placeholder="Contraseña" id="password" required>
<input type="submit" value="Acceder">
</form>
</div>
</body>
</html>cerrar-sesion.php
<?php
session_start();
session_destroy();
header('Location: index.html');autenticacion.php
<?php
session_start();
//credenciales de acceso a la base datos
$DATABASE_HOST = 'localhost';
$DATABASE_USER = 'root';
$DATABASE_PASS = '';
$DATABASE_NAME = 'login-php';
// conexion a la base de datos
$conexion = mysqli_connect($DATABASE_HOST, $DATABASE_USER, $DATABASE_PASS, $DATABASE_NAME);
if (mysqli_connect_error()) {
// si se encuentra error en la conexión
exit('Fallo en la conexión de MySQL:' . mysqli_connect_error());
}
// Se valida si se ha enviado información, con la función isset()
if (!isset($_POST['username'], $_POST['password'])) {
// si no hay datos muestra error y re direccionar
header('Location: index.html');
}
// evitar inyección sql
if ($stmt = $conexion->prepare('SELECT id,password FROM accounts WHERE username = ?')) {
// parámetros de enlace de la cadena s
$stmt->bind_param('s', $_POST['username']);
$stmt->execute();
}
// acá se valida si lo ingresado coincide con la base de datos
$stmt->store_result();
if ($stmt->num_rows > 0) {
$stmt->bind_result($id, $password);
$stmt->fetch();
// se confirma que la cuenta existe ahora validamos la contraseña
if ($_POST['password'] === $password) {
// la conexion sería exitosa, se crea la sesión
session_regenerate_id();
$_SESSION['loggedin'] = TRUE;
$_SESSION['name'] = $_POST['username'];
$_SESSION['id'] = $id;
header('Location: inicio.php');
}
} else {
// usuario incorrecto
header('Location: index.html');
}
$stmt->close();
inicio.php
<?php
// confirmar sesion
session_start();
if (!isset($_SESSION['loggedin'])) {
header('Location: index.html');
exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inicio</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body class="loggedin">
<nav class="navtop">
<h1 style="color:white;">Sistema de Login Básico ConfiguroWeb</h1>
<a href="perfil.php" style="color:white;"><i class="fas fa-user-circle"></i>Informción de Usuario</a>
<a href="cerrar-sesion.php" style="color:white;"><i class="fas fa-sign-out-alt"></i>Cerrar Sesión</a>
</nav>
<div class="content">
<h2>Página de Inicio</h2>
<p>Hola de nuevo, <?= $_SESSION['name'] ?> !!!</p>
</div>
</body>
</html>perfil.php
<?php
session_start();
if (!isset($_SESSION['loggedin'])) {
header('Location: index.html');
exit;
}
$DATABASE_HOST = 'localhost';
$DATABASE_USER = 'root';
$DATABASE_PASS = '';
$DATABASE_NAME = 'login-php';
// conexion a la base de datos
$conexion = mysqli_connect($DATABASE_HOST, $DATABASE_USER, $DATABASE_PASS, $DATABASE_NAME);
if (mysqli_connect_error()) {
// si se encuentra error en la conexión
exit('Fallo en la conexión de MySQL:' . mysqli_connect_error());
}
$stmt = $conexion->prepare('SELECT password, email FROM accounts WHERE id = ?');
$stmt->bind_param('i', $_SESSION['id']);
$stmt->execute();
$stmt->bind_result($password, $email);
$stmt->fetch();
$stmt->close();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Perfil Usuario</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body class="loggedin">
<nav class="navtop">
<h1 style="color:white;">Sistema de Login Básico ConfiguroWeb</h1>
<a href="inicio.php" style="color:white;">Inicio</a>
<a href="perfil.php" style="color:white;"><i class="fas fa-user-circle"></i>Información de Usuario</a>
<a href="cerrar-sesion.php" style="color:white;"><i class="fas fa-sign-out-alt"></i>Cerrar Sesion</a>
</nav>
<div class="content">
<h2>Información del Usuario</h2>
<div>
<p>
La siguiente es la información registrada de tu cuenta
</p>
<table>
<tr>
<td>Usuario:</td>
<td><?= $_SESSION['name'] ?></td>
</tr>
<tr>
<td>Email:</td>
<td><?= $email ?></td>
</tr>
</table>
</div>
</div>
</nav>
</body>
</html>Si llegaste hasta acá es porque te interesa mucho el desarrollo web, te puedo decir que si es así has llegado a buen puerto, ya que cuento con más de 60 aplicaciones gratuitas, en constante crecimiento que puedes descargar y utilizar libremente en el siguiente enlace:
Si deseas contratar mis servicios me puedes contactar directamente en el siguiente enlace:
https://configuroweb.com/WhatsappMessenger
En adición puedes echarle un vistazo a mis más de 40 aplicaciones de mi segmento premium que te podrían interesar
https://configuroweb.com/tag/premium/
Quedo al pendiente de cualquier cosa.
