En este tutorial, aprenderemos a construir un sistema básico de gestión de usuarios con PHP y MySQL. Incluye una página de inicio accesible para todos, un panel de administración accesible solo para el administrador, y una funcionalidad para cambiar la contraseña del administrador.
ATENCIÓN: En este ejemplo el usuario y la pass de inicio son USUARIO: admin PASSWORD: 1010
1. Crear la Base de Datos y la Tabla de Usuarios
Primero, crea una base de datos llamada ejcrud4 y una tabla llamada usuarios. Ejecuta el siguiente script SQL:
-- Crear base de datos
CREATE DATABASE IF NOT EXISTS ejcrud4;
-- Usar la base de datos
USE ejcrud4;
-- Crear tabla de usuarios
CREATE TABLE IF NOT EXISTS usuarios (
id INT AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(50) NOT NULL UNIQUE,
password VARCHAR(255) NOT NULL
);
-- Insertar el usuario administrador con una contraseña encriptada
INSERT INTO usuarios (username, password) VALUES ('admin', '$2y$10$examplehashedpassword...');
Nota: Reemplaza $2y$10$examplehashedpassword... con el hash de la contraseña 1010.
2. Conectar a la Base de Datos
Crea un archivo llamado db.php para gestionar la conexión a la base de datos.
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "ejcrud4";
// Crear conexión
$conn = new mysqli($servername, $username, $password, $dbname);
// Verificar la conexión
if ($conn->connect_error) {
die("Conexión fallida: " . $conn->connect_error);
}
?>Explicación del Código:
- Establece la conexión con la base de datos y maneja errores si la conexión falla.
3. Página de Inicio
La página de inicio index.php será accesible para todos los usuarios y contendrá enlaces para iniciar sesión, acceder al panel de administración (si el usuario es admin) y cerrar sesión.
<?php
session_start(); // Inicia la sesión
?>
<!DOCTYPE html>
<html>
<head>
<title>Inicio</title>
<style>
body { font-family: Arial, sans-serif; margin: 0; background-color: #f4f4f4; }
.header { background-color: #007BFF; color: white; padding: 10px; text-align: center; }
.header a { color: white; text-decoration: none; margin: 0 10px; }
.header a:hover { text-decoration: underline; }
.container { width: 80%; margin: 20px auto; background-color: white; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }
table { width: 100%; border-collapse: collapse; margin-top: 20px; }
table, th, td { border: 1px solid #ddd; }
th, td { padding: 10px; text-align: left; }
th { background-color: #f4f4f4; }
</style>
</head>
<body>
<div class="header">
<h1>Bienvenido</h1>
<!-- Enlaces de navegación -->
<a href="index.php">Inicio</a>
<?php if (isset($_SESSION['username'])): ?>
<?php if ($_SESSION['username'] == 'admin'): ?>
<a href="admin_panel.php">Panel de Administración</a>
<?php endif; ?>
<a href="logout.php">Cerrar sesión</a>
<?php else: ?>
<a href="login.php">Iniciar sesión</a>
<?php endif; ?>
</div>
<div class="container">
<h2>Contenido Libre</h2>
<p>Esta es la página de inicio accesible para todos los usuarios.</p>
<?php if (isset($_SESSION['username'])): ?>
<p>Hola, <?php echo htmlspecialchars($_SESSION['username']); ?>!</p>
<?php endif; ?>
</div>
</body>
</html>Explicación del Código:
- Muestra los enlaces para iniciar sesión, cerrar sesión y acceder al panel de administración según el estado de la sesión.
- La apariencia está mejorada con CSS básico.
4. Página de Inicio de Sesión
La página de inicio de sesión login.php permite a los usuarios ingresar con su nombre de usuario y contraseña.
<?php
session_start(); // Inicia la sesión para mantener información entre diferentes páginas.
include('db.php'); // Incluye el archivo 'db.php' que contiene la conexión a la base de datos.
if ($_SERVER["REQUEST_METHOD"] == "POST") { // Verifica si el formulario fue enviado con el método POST.
$username = $_POST['username']; // Obtiene el nombre de usuario ingresado en el formulario.
$password = $_POST['password']; // Obtiene la contraseña ingresada en el formulario.
$sql = "SELECT password FROM usuarios WHERE username = ?"; // Consulta SQL que busca la contraseña hasheada para el nombre de usuario dado.
$stmt = $conn->prepare($sql); // Prepara la consulta SQL para evitar inyecciones SQL.
$stmt->bind_param("s", $username); // Vincula el parámetro $username al marcador de posición "?" en la consulta. "s" significa que es una cadena (string).
$stmt->execute(); // Ejecuta la consulta preparada.
$stmt->store_result(); // Almacena el resultado de la consulta para poder procesarlo después.
$stmt->bind_result($hashed_password); // Vincula el resultado (la contraseña hasheada) a la variable $hashed_password.
if ($stmt->num_rows > 0) { // Verifica si se encontró al menos un usuario con el nombre de usuario proporcionado.
$stmt->fetch(); // Recupera el valor de la contraseña hasheada desde la base de datos.
if (password_verify($password, $hashed_password)) { // Compara la contraseña ingresada con la contraseña hasheada en la base de datos.
$_SESSION['username'] = $username; // Si la contraseña es correcta, guarda el nombre de usuario en la sesión.
header("Location: index.php"); // Redirige al usuario a la página 'index.php' tras el inicio de sesión exitoso.
exit(); // Detiene la ejecución del script para asegurar que la redirección ocurra inmediatamente.
} else {
$error = "Contraseña incorrecta."; // Si la contraseña no coincide, asigna un mensaje de error.
}
} else {
$error = "Usuario no encontrado."; // Si no se encontró ningún usuario con ese nombre, asigna un mensaje de error.
}
$stmt->close(); // Cierra la consulta preparada para liberar recursos.
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Iniciar Sesión</title>
<style>
/* Estilo básico para la página de inicio de sesión */
body { font-family: Arial, sans-serif; margin: 0; background-color: #f4f4f4; }
.header { background-color: #007BFF; color: white; padding: 10px; text-align: center; }
.container { width: 80%; margin: 20px auto; background-color: white; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }
label { display: block; margin: 10px 0 5px; }
input[type="text"], input[type="password"] { width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid #ddd; border-radius: 4px; }
button { padding: 10px 15px; background-color: #007BFF; color: white; border: none; border-radius: 4px; cursor: pointer; }
button:hover { background-color: #0056b3; }
</style>
</head>
<body>
<div class="header">
<h1>Iniciar Sesión</h1> <!-- Título principal de la página -->
</div>
<div class="container">
<!-- Formulario de inicio de sesión -->
<form method="post" action="login.php"> <!-- Define el formulario que enviará los datos mediante el método POST a esta misma página (login.php) -->
<label for="username">Nombre de Usuario:</label> <!-- Etiqueta para el campo de nombre de usuario -->
<input type="text" id="username" name="username" required> <!-- Campo de entrada para el nombre de usuario -->
<label for="password">Contraseña:</label> <!-- Etiqueta para el campo de contraseña -->
<input type="password" id="password" name="password" required> <!-- Campo de entrada para la contraseña -->
<button type="submit">Iniciar Sesión</button> <!-- Botón para enviar el formulario -->
</form>
<?php if (isset($error)): ?> <!-- Si existe la variable $error, muestra el mensaje de error -->
<p style="color: red;"><?php echo htmlspecialchars($error); ?></p> <!-- Muestra el mensaje de error en color rojo -->
<?php endif; ?>
</div>
</body>
</html>
Explicación del Código:
- Maneja la autenticación del usuario y muestra mensajes de error si el usuario no se encuentra o la contraseña es incorrecta.
5. Panel de Administración
El archivo admin_panel.php muestra la lista de usuarios y está accesible solo para el administrador.
<?php
session_start();
include('db.php');
// Verificar si el usuario está autenticado como administrador
if (!isset($_SESSION['username']) || $_SESSION['username'] != 'admin') {
header("Location: login.php");
exit();
}
// Consultar usuarios
$sql = "SELECT id, username FROM usuarios";
$result = $conn->query($sql);
?>
<!DOCTYPE html>
<html>
<head>
<title>Panel de Administración</title>
<style>
body { font-family: Arial, sans-serif; margin: 0; background-color: #f4f4f4; }
.header { background-color: #007BFF; color: white; padding: 10px; text-align: center; }
.container { width: 80%; margin: 20px auto; background-color: white; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }
table { width: 100%; border-collapse: collapse; margin-top: 20px; }
table, th, td { border: 1px solid #ddd; }
th, td { padding: 10px; text-align: left; }
th { background-color: #f4f4f4; }
.actions { text-align: center; }
button { padding: 5px 10px; background-color: #007BFF; color: white; border: none; border-radius: 4px; cursor: pointer; }
button:hover { background-color: #0056b3; }
</style>
</head>
<body>
<div class="header">
<h1>Panel de Administración</h1>
<!-- Enlaces de navegación -->
<a href="index.php">Inicio</a>
<a href="logout.php">Cerrar sesión</a>
</div>
<div class="container">
<h2>Lista de Usuarios</h2>
<table>
<thead>
<tr>
<th>ID</th>
<th>Nombre de Usuario</th>
</tr>
</thead>
<tbody>
<?php while ($row = $result->fetch_assoc()): ?>
<tr>
<td><?php echo htmlspecialchars($row['id']); ?></td>
<td><?php echo htmlspecialchars($row['username']); ?></td>
</tr>
<?php endwhile; ?>
</tbody>
</table>
</div>
</body>
</html>Explicación del Código:
- Muestra la lista de usuarios para el administrador. Los usuarios no tienen opciones para ser gestionados directamente desde este archivo, pero puedes expandir esta funcionalidad más adelante.
6. Cambiar Contraseña del Administrador
Un script para cambiar la contraseña del administrador en la página cambio_pass.php. Asegúrate de que el hash de la nueva contraseña sea actualizado en la base de datos.
<?php
session_start();
include('db.php');
// Verificar si el usuario está autenticado como administrador
if (!isset($_SESSION['username']) || $_SESSION['username'] != 'admin') {
header("Location: login.php");
exit();
}
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$old_password = $_POST['old_password'];
$new_password = $_POST['new_password'];
// Verificar contraseña antigua
$sql = "SELECT password FROM usuarios WHERE username = 'admin'";
$result = $conn->query($sql);
$row = $result->fetch_assoc();
$hashed_password = $row['password'];
if (password_verify($old_password, $hashed_password)) {
// Actualizar con nueva contraseña
$new_hashed_password = password_hash($new_password, PASSWORD_BCRYPT);
$sql = "UPDATE usuarios SET password = ? WHERE username = 'admin'";
$stmt = $conn->prepare($sql);
$stmt->bind_param("s", $new_hashed_password);
if ($stmt->execute()) {
$message = "Contraseña actualizada exitosamente.";
} else {
$error = "Error al actualizar la contraseña.";
}
} else {
$error = "La contraseña antigua es incorrecta.";
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Cambiar Contraseña</title>
<style>
body { font-family: Arial, sans-serif; margin: 0; background-color: #f4f4f4; }
.header { background-color: #007BFF; color: white; padding: 10px; text-align: center; }
.container { width: 80%; margin: 20px auto; background-color: white; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }
label { display: block; margin: 10px 0 5px; }
input[type="password"] { width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid #ddd; border-radius: 4px; }
button { padding: 10px 15px; background-color: #007BFF; color: white; border: none; border-radius: 4px; cursor: pointer; }
button:hover { background-color: #0056b3; }
</style>
</head>
<body>
<div class="header">
<h1>Cambiar Contraseña</h1>
<!-- Enlaces de navegación -->
<a href="index.php">Inicio</a>
<a href="admin_panel.php">Panel de Administración</a>
<a href="logout.php">Cerrar sesión</a>
</div>
<div class="container">
<form method="post" action="cambio_pass.php">
<label for="old_password">Contraseña Actual:</label>
<input type="password" id="old_password" name="old_password" required>
<label for="new_password">Nueva Contraseña:</label>
<input type="password" id="new_password" name="new_password" required>
<button type="submit">Actualizar Contraseña</button>
</form>
<?php if (isset($message)): ?>
<p style="color: green;"><?php echo htmlspecialchars($message); ?></p>
<?php endif; ?>
<?php if (isset($error)): ?>
<p style="color: red;"><?php echo htmlspecialchars($error); ?></p>
<?php endif; ?>
</div>
</body>
</html>Explicación del Código:
- Permite al administrador cambiar su contraseña. Verifica la contraseña actual antes de actualizarla con la nueva.
7. Archivo para Cerrar Sesión
Cierra la sesión del usuario y redirige a la página de inicio.
<?php
session_start(); // Inicia la sesión
session_unset(); // Elimina todas las variables de sesión
session_destroy(); // Destruye la sesión
// Redirige a la página de inicio después de cerrar sesión
header("Location: index.php");
exit();
?>Explicación del Código:
- Elimina la sesión del usuario y redirige a la página de inicio.