Crear un sistema de login con PHP, MySQL y PHPMailer

¿Quieres integrar todo lo aprendido en un proyecto real? En esta guía paso a paso aprenderás a crear un sistema de autenticación completo: registro, login, recuperación de contraseña, dashboard con AdminLTE y CRUD de usuarios. Todo con código listo para usar.

Sistema de Autenticación: Registro y Validaciones

Primero, crea el formulario de registro (registro.php):

Validaciones en el Front-end con jQuery y SweetAlert

Usa jQuery para validar antes de enviar:

$("#formRegistro").on("submit", function(e) {
    let password = $("input[name='password']").val();
    if (password.length < 6) {
        swal("Error", "La contraseña debe tener al menos 6 caracteres", "error");
        e.preventDefault();
    }
});

Y SweetAlert para alertas modernas.

Procesamiento del Registro en el Servidor con PHP y MySQLi

En procesar_registro.php, guarda los datos:

$nombre = $_POST['nombre'];
$email = filter_var($_POST['email'], FILTER_SANITIZE_EMAIL);
$password = password_hash($_POST['password'], PASSWORD_DEFAULT);

$sql = "INSERT INTO usuarios (nombre, email, password) VALUES (?, ?, ?)";
$stmt = $conn->prepare($sql);
$stmt->bind_param("sss", $nombre, $email, $password);
$stmt->execute();

Conexión a la Base de Datos

Asegúrate de tener una tabla usuarios:

CREATE TABLE usuarios (
    id INT AUTO_INCREMENT PRIMARY KEY,
    nombre VARCHAR(100),
    email VARCHAR(100) UNIQUE,
    password VARCHAR(255),
    token_recuperacion VARCHAR(255),
    creado TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

Implementación del Login y Autenticación de Usuarios

En login.php, verifica credenciales:

$email = $_POST['email'];
$password = $_POST['password'];

$sql = "SELECT * FROM usuarios WHERE email = ?";
$stmt = $conn->prepare($sql);
$stmt->bind_param("s", $email);
$stmt->execute();
$result = $stmt->get_result();
$user = $result->fetch_assoc();

if ($user && password_verify($password, $user['password'])) {
    $_SESSION['user_id'] = $user['id'];
    header("Location: dashboard.php");
} else {
    swal("Error", "Credenciales incorrectas", "error");
}

Recuperación de Contraseña con PHPMailer

Cuando el usuario olvida su contraseña:

Genera un token único: $token = bin2hex(random_bytes(50));
Guárdalo en la base de datos junto al email
Envía un enlace con el token por correo usando PHPMailer
Al hacer clic, permite cambiar la contraseña

Dashboard con AdminLTE

AdminLTE es un tema administrativo gratuito basado en Bootstrap. Ideal para dashboards.

Descarga AdminLTE: adminlte.io
Incluye CSS y JS en tu dashboard.php
Usa sus componentes: navbar, sidebar, cards, tablas

Perfil de Usuario con Edición de Datos

Permite al usuario editar su perfil:

CRUD de Usuarios con Subida de Avatares

Desde el dashboard (rol admin), puedes:

Create: Registrar nuevos usuarios
Read: Listar usuarios en una tabla
Update: Editar datos y avatar
Delete: Eliminar usuarios (con confirmación)

Para subir avatares:

$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["avatar"]["name"]);
move_uploaded_file($_FILES["avatar"]["tmp_name"], $target_file);

Implementación de AJAX para una Mejor Experiencia

Elimina recargas usando AJAX para acciones como:

Guardar perfil sin recargar
Eliminar usuario con SweetAlert + AJAX
Cargar listado de usuarios dinámicamente

Seguridad Avanzada

Refuerza tu sistema con:

Validación de roles: solo admins pueden gestionar usuarios
Protección contra CSRF con tokens ocultos
Redirección segura tras login/logout
Manejo de sesiones con regeneración de ID

Volver a la Guía Full-Stack → Ver Módulo 7: PHPMailer y Recuperación de Contraseña →

¿Quieres la versión completa del libro?

Esta guía es una versión resumida del libro "Programación Full-Stack", que incluye:

✅ Todos los ejercicios resueltos paso a paso
✅ Códigos listos para copiar y probar
✅ Explicaciones profundas de seguridad y buenas prácticas
✅ Acceso a actualizaciones futuras

Comprar en Amazon →

¿Tienes dudas o sugerencias? ¡Déjalas en los comentarios!