Login HTML

Aprende a crear una estructura de registro de miembros para tu página web. Te explico como hacerlo en HTML, CSS y JS. Luego lee el artículo hasta el final para la verificación del usuario, la creación de la base de datos, y el estilo de tus páginas de registro, login, y verificación de email.

Te dejo una estructura completa con HTML + CSS + JS (fetch a endpoints) que puedes conectar a tu backend (WordPress o API propia). Si quieres mockear sin servidor, también incluyo una variante con localStorage.

Estructura de archivos HTML para login, registro, verificación y perfil

Árbol de proyecto

/assets/
- styles.css
- auth.js
login.html
register.html
verify.html
profile.html
reset.html

HTML de cada página

Login

html

<!-- login.html -->
<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>Acceder</title>
  <link rel="stylesheet" href="assets/styles.css">
</head>
<body>
  <main class="card">
    <h1>Acceder</h1>
    <form id="login-form">
      <label>Correo
        <input type="email" name="email" required>
      </label>
      <label>Contraseña
        <input type="password" name="password" required>
      </label>
      <button type="submit">Entrar</button>
      <p class="hint">
        <a href="reset.html">¿Olvidaste tu contraseña?</a> ·
        <a href="register.html">Crear cuenta</a>
      </p>
      <p class="msg" id="login-msg"></p>
    </form>
  </main>
  <script src="assets/auth.js"></script>
  <script>
    bindLogin({
      onSuccess: () => location.href = 'profile.html',
      onError: (msg) => showMsg('login-msg', msg)
    });
  </script>
</body>
</html>

Registro

html

<!-- register.html -->
<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>Registrarse</title>
  <link rel="stylesheet" href="assets/styles.css">
</head>
<body>
  <main class="card">
    <h1>Crear cuenta</h1>
    <form id="register-form">
      <label>Nombre
        <input type="text" name="name" required>
      </label>
      <label>Correo
        <input type="email" name="email" required>
      </label>
      <label>Contraseña
        <input type="password" name="password" required minlength="8">
      </label>
      <button type="submit">Registrarse</button>
      <p class="msg" id="register-msg"></p>
      <p class="hint"><a href="login.html">¿Ya tienes cuenta? Accede</a></p>
    </form>
  </main>
  <script src="assets/auth.js"></script>
  <script>
    bindRegister({
      // Tras registro, muestra mensaje y sugiere verificación
      onSuccess: (email) => {
        showMsg('register-msg', 'Registro realizado. Revisa tu correo para verificar la cuenta.');
        // Opcional: redirigir a verify.html con token en query si tu backend lo hace automático
        // location.href = 'verify.html?email=' + encodeURIComponent(email);
      },
      onError: (msg) => showMsg('register-msg', msg)
    });
  </script>
</body>
</html>

Verificación por correo

html

<!-- verify.html -->
<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>Verificar cuenta</title>
  <link rel="stylesheet" href="assets/styles.css">
</head>
<body>
  <main class="card">
    <h1>Verificar cuenta</h1>
    <p>Si llegaste aquí desde tu correo, el enlace incluirá un token.</p>
    <form id="verify-form">
      <label>Token de verificación
        <input type="text" name="token" required>
      </label>
      <button type="submit">Verificar</button>
      <p class="msg" id="verify-msg"></p>
    </form>
  </main>
  <script src="assets/auth.js"></script>
  <script>
    // Si viene ?token= en la URL, precarga
    const params = new URLSearchParams(location.search);
    const token = params.get('token');
    if (token) document.querySelector('[name="token"]').value = token;

    bindVerify({
      onSuccess: () => {
        showMsg('verify-msg', 'Cuenta verificada. Ya puedes acceder.');
        setTimeout(() => location.href = 'login.html', 1200);
      },
      onError: (msg) => showMsg('verify-msg', msg)
    });
  </script>
</body>
</html>

Perfil de usuario

html

<!-- profile.html -->
<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>Perfil</title>
  <link rel="stylesheet" href="assets/styles.css">
</head>
<body>
  <main class="card">
    <h1>Tu perfil</h1>
    <section id="profile">
      <p><strong>Nombre:</strong> <span id="pf-name">—</span></p>
      <p><strong>Correo:</strong> <span id="pf-email">—</span></p>
      <p><strong>Estado:</strong> <span id="pf-status">—</span></p>
    </section>
    <hr>
    <form id="update-form">
      <h2>Actualizar perfil</h2>
      <label>Nombre
        <input type="text" name="name" required>
      </label>
      <button type="submit">Guardar</button>
      <p class="msg" id="update-msg"></p>
    </form>
    <button id="logout">Cerrar sesión</button>
  </main>
  <script src="assets/auth.js"></script>
  <script>
    requireAuth({
      onUnauthorized: () => location.href = 'login.html'
    });
    loadProfile({
      onData: (u) => {
        document.getElementById('pf-name').textContent = u.name;
        document.getElementById('pf-email').textContent = u.email;
        document.getElementById('pf-status').textContent = u.verified ? 'Verificada' : 'Pendiente';
        document.querySelector('#update-form [name="name"]').value = u.name;
      }
    });
    bindProfileUpdate({
      onSuccess: (u) => showMsg('update-msg', 'Perfil actualizado.'),
      onError: (msg) => showMsg('update-msg', msg)
    });
    bindLogout(() => location.href = 'login.html');
  </script>
</body>
</html>

Recuperación de contraseña

html

<!-- reset.html -->
<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>Recuperar contraseña</title>
  <link rel="stylesheet" href="assets/styles.css">
</head>
<body>
  <main class="card">
    <h1>Recuperar contraseña</h1>
    <form id="reset-form">
      <label>Correo
        <input type="email" name="email" required>
      </label>
      <button type="submit">Enviar enlace</button>
      <p class="msg" id="reset-msg"></p>
    </form>
  </main>
  <script src="assets/auth.js"></script>
  <script>
    bindReset({
      onSuccess: () => showMsg('reset-msg', 'Te hemos enviado un correo con instrucciones.'),
      onError: (msg) => showMsg('reset-msg', msg)
    });
  </script>
</body>
</html>

CSS base compartido

css

/* assets/styles.css */
:root {
  color-scheme: light dark;
  --bg: #0b0c10;
  --card: #1f2833;
  --text: #c5c6c7;
  --accent: #66fcf1;
  --muted: #7a7d80;
}

* { box-sizing: border-box; }
body {
  margin: 0; font-family: system-ui, sans-serif;
  display: grid; place-items: center; min-height: 100vh;
  background: var(--bg); color: var(--text);
}
.card {
  width: min(600px, 92vw); background: var(--card);
  padding: 24px; border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
h1, h2 { margin: 0 0 12px; color: var(--accent); }
label { display: grid; gap: 6px; margin: 12px 0; }
input, button {
  padding: 10px 12px; border-radius: 8px; border: 1px solid #2b3440;
  background: #0f1622; color: var(--text);
}
button {
  background: var(--accent); color: #081217; border: none; font-weight: 700; cursor: pointer;
}
button:hover { filter: brightness(1.08); }
.hint { color: var(--muted); margin-top: 12px; }
.msg { margin-top: 10px; min-height: 20px; }
hr { border: none; border-top: 1px solid #2b3440; margin: 18px 0; }

JS de autenticación (API real o mock)

Versión con API real (recomendado)

Define endpoints en tu backend:

POST /api/auth/login
POST /api/auth/register
POST /api/auth/verify
POST /api/auth/reset
GET /api/user/me
PATCH /api/user/me

El JS usa JWT en localStorage y redirecciones.

// assets/auth.js
const API = '/api';
const TOKEN_KEY = 'auth_token';

function showMsg(id, msg) {
  const el = document.getElementById(id);
  if (el) el.textContent = msg;
}

function setToken(t) { localStorage.setItem(TOKEN_KEY, t); }
function getToken() { return localStorage.getItem(TOKEN_KEY); }
function clearToken() { localStorage.removeItem(TOKEN_KEY); }

async function request(path, opts = {}) {
  const headers = { 'Content-Type': 'application/json', ...(opts.headers || {}) };
  const token = getToken();
  if (token) headers.Authorization = `Bearer ${token}`;
  const res = await fetch(API + path, { ...opts, headers });
  const data = await res.json().catch(() => ({}));
  if (!res.ok) throw new Error(data.message || 'Error de servidor');
  return data;
}

function bindLogin({ onSuccess, onError }) {
  document.getElementById('login-form').addEventListener('submit', async e => {
    e.preventDefault();
    const f = e.target;
    try {
      const data = await request('/auth/login', {
        method: 'POST',
        body: JSON.stringify({ email: f.email.value, password: f.password.value })
      });
      setToken(data.token);
      onSuccess?.(data);
    } catch (err) {
      onError?.(err.message);
    }
  });
}

function bindRegister({ onSuccess, onError }) {
  document.getElementById('register-form').addEventListener('submit', async e => {
    e.preventDefault();
    const f = e.target;
    try {
      const data = await request('/auth/register', {
        method: 'POST',
        body: JSON.stringify({ name: f.name.value, email: f.email.value, password: f.password.value })
      });
      onSuccess?.(f.email.value, data);
    } catch (err) {
      onError?.(err.message);
    }
  });
}

function bindVerify({ onSuccess, onError }) {
  document.getElementById('verify-form').addEventListener('submit', async e => {
    e.preventDefault();
    const f = e.target;
    try {
      await request('/auth/verify', {
        method: 'POST',
        body: JSON.stringify({ token: f.token.value })
      });
      onSuccess?.();
    } catch (err) {
      onError?.(err.message);
    }
  });
}

function bindReset({ onSuccess, onError }) {
  document.getElementById('reset-form').addEventListener('submit', async e => {
    e.preventDefault();
    const f = e.target;
    try {
      await request('/auth/reset', {
        method: 'POST',
        body: JSON.stringify({ email: f.email.value })
      });
      onSuccess?.();
    } catch (err) {
      onError?.(err.message);
    }
  });
}

function requireAuth({ onUnauthorized }) {
  const token = getToken();
  if (!token) return onUnauthorized?.();
}

async function loadProfile({ onData }) {
  const data = await request('/user/me', { method: 'GET' });
  onData?.(data.user);
}

function bindProfileUpdate({ onSuccess, onError }) {
  document.getElementById('update-form').addEventListener('submit', async e => {
    e.preventDefault();
    const f = e.target;
    try {
      const data = await request('/user/me', {
        method: 'PATCH',
        body: JSON.stringify({ name: f.name.value })
      });
      onSuccess?.(data.user);
    } catch (err) {
      onError?.(err.message);
    }
  });
}

function bindLogout(cb) {
  document.getElementById('logout').addEventListener('click', () => {
    clearToken(); cb?.();
  });
}

Versión sin backend (mock rápido con localStorage)

Útil para validar flujo visual. No es seguro; solo para prototipo.

// assets/auth.js (mock)
const TOKEN_KEY = 'auth_token';
const USERS_KEY = 'users';

function showMsg(id, msg) { const el = document.getElementById(id); if (el) el.textContent = msg; }
function setToken(t) { localStorage.setItem(TOKEN_KEY, t); }
function getToken() { return localStorage.getItem(TOKEN_KEY); }
function clearToken() { localStorage.removeItem(TOKEN_KEY); }

function getUsers() { return JSON.parse(localStorage.getItem(USERS_KEY) || '[]'); }
function setUsers(u) { localStorage.setItem(USERS_KEY, JSON.stringify(u)); }
function uid() { return Math.random().toString(36).slice(2); }

function bindLogin({ onSuccess, onError }) {
  document.getElementById('login-form').addEventListener('submit', e => {
    e.preventDefault(); const f = e.target;
    const users = getUsers();
    const u = users.find(x => x.email === f.email.value);
    if (!u) return onError?.('No existe ese correo.');
    if (!u.verified) return onError?.('Cuenta no verificada. Revisa tu correo.');
    if (u.password !== f.password.value) return onError?.('Contraseña incorrecta.');
    setToken(u.id); onSuccess?.(u);
  });
}

function bindRegister({ onSuccess, onError }) {
  document.getElementById('register-form').addEventListener('submit', e => {
    e.preventDefault(); const f = e.target;
    const users = getUsers();
    if (users.some(x => x.email === f.email.value)) return onError?.('Ese correo ya existe.');
    const token = uid();
    const u = { id: uid(), email: f.email.value, name: f.name.value, password: f.password.value, verified: false, verifyToken: token };
    users.push(u); setUsers(users);
    // Simula envío de email: muestra token
    onSuccess?.(u.email);
    alert('Token de verificación (simulado): ' + token);
  });
}

function bindVerify({ onSuccess, onError }) {
  document.getElementById('verify-form').addEventListener('submit', e => {
    e.preventDefault(); const f = e.target;
    const users = getUsers();
    const u = users.find(x => x.verifyToken === f.token.value);
    if (!u) return onError?.('Token inválido.');
    u.verified = true; setUsers(users);
    onSuccess?.();
  });
}

function bindReset({ onSuccess, onError }) {
  document.getElementById('reset-form').addEventListener('submit', e => {
    e.preventDefault(); const f = e.target;
    const users = getUsers();
    const u = users.find(x => x.email === f.email.value);
    if (!u) return onError?.('No existe ese correo.');
    const newPass = prompt('Introduce nueva contraseña (simulación):');
    if (!newPass) return onError?.('Operación cancelada.');
    u.password = newPass; setUsers(users);
    onSuccess?.();
  });
}

function requireAuth({ onUnauthorized }) {
  const token = getToken();
  if (!token) return onUnauthorized?.();
}

function loadProfile({ onData }) {
  const users = getUsers();
  const u = users.find(x => x.id === getToken());
  if (!u) return onData?.({ name: '', email: '', verified: false });
  onData?.(u);
}

function bindProfileUpdate({ onSuccess, onError }) {
  document.getElementById('update-form').addEventListener('submit', e => {
    e.preventDefault(); const f = e.target;
    const users = getUsers();
    const u = users.find(x => x.id === getToken());
    if (!u) return onError?.('Sesión no válida.');
    u.name = f.name.value; setUsers(users);
    onSuccess?.(u);
  });
}

function bindLogout(cb) {
  document.getElementById('logout').addEventListener('click', () => { clearToken(); cb?.(); });
}

Flujo de navegación

Registro → guarda usuario y envía correo con token.
Verificación → el usuario hace clic en el enlace con token (o lo pega en verify.html).
Login → solo usuarios verificados pueden entrar.
Perfil → requiere sesión; muestra datos y permite actualizar nombre.
Reset → envía enlace para restablecer (mock: prompt).

Integración con WordPress (opcional, rápida)

Plantillas: convierte cada HTML en una plantilla de página (page template) y encolando styles.css y auth.js con wp_enqueue.
Endpoints: crea rutas con WP REST API (register_rest_route) para login/register/verify/reset/me.

El correo de verificación (texto HTML que se envía al usuario).
La página bienvenido-a-tu-cuenta.html con un estilo profesional y moderno.

📧 Plantilla de correo de verificación (HTML)

email-verificacion.html

html

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>Verifica tu cuenta</title>
  <style>
    body { font-family: Arial, sans-serif; background:#f4f4f7; margin:0; padding:0; }
    .container { max-width:600px; margin:40px auto; background:#fff; border-radius:8px; overflow:hidden; box-shadow:0 4px 12px rgba(0,0,0,.1); }
    .header { background:#0077cc; color:#fff; padding:20px; text-align:center; }
    .content { padding:30px; color:#333; }
    .btn { display:inline-block; background:#0077cc; color:#fff; padding:12px 20px; border-radius:6px; text-decoration:none; font-weight:bold; }
    .footer { font-size:12px; color:#777; text-align:center; padding:20px; }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h2>Verifica tu cuenta</h2>
    </div>
    <div class="content">
      <p>Hola <strong>{{nombre}}</strong>,</p>
      <p>Gracias por registrarte en nuestro sitio. Para activar tu cuenta, haz clic en el siguiente botón:</p>
      <p style="text-align:center;">
        <a href="{{verification_link}}" class="btn">Verificar mi cuenta</a>
      </p>
      <p>Si no te registraste, ignora este mensaje.</p>
    </div>
    <div class="footer">
      © 2026 ee3.es · Este correo se generó automáticamente
    </div>
  </div>
</body>
</html>

👉 Sustituye {{nombre}} y {{verification_link}} dinámicamente desde tu backend.

🌐 Página `bienvenido-a-tu-cuenta.html`

html

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>Bienvenido a tu cuenta</title>
  <link rel="stylesheet" href="assets/styles.css">
  <style>
    body { font-family: 'Segoe UI', sans-serif; background:#f0f2f5; margin:0; }
    .card {
      max-width:600px; margin:60px auto; background:#fff;
      border-radius:12px; padding:40px; box-shadow:0 6px 20px rgba(0,0,0,.1);
    }
    h1 { color:#0077cc; margin-bottom:20px; }
    p { color:#444; line-height:1.6; }
    .btn {
      display:inline-block; background:#0077cc; color:#fff;
      padding:12px 24px; border-radius:8px; text-decoration:none; font-weight:bold;
      margin-top:20px;
    }
    .btn:hover { background:#005fa3; }
    .profile-info { margin-top:30px; }
    .profile-info p { margin:8px 0; }
  </style>
</head>
<body>
  <div class="card">
    <h1>Bienvenido a tu cuenta</h1>
    <p>Tu registro se ha completado correctamente 🎉. Ya puedes acceder a tu perfil y gestionar tu información.</p>
    
    <div class="profile-info">
      <p><strong>Nombre:</strong> {{nombre}}</p>
      <p><strong>Correo:</strong> {{email}}</p>
      <p><strong>Estado:</strong> Verificado ✅</p>
    </div>
    
    <a href="profile.html" class="btn">Ir a mi perfil</a>
  </div>
</body>
</html>

Aquí también puedes sustituir dinámicamente {{nombre}} y {{email}} desde tu backend o JavaScript.

Flujo completo

Usuario se registra → recibe el correo de verificación.
Hace clic en el enlace → activa su cuenta y se redirige a bienvenido-a-tu-cuenta.html.
Desde ahí puede ir a su perfil o dashboard.

paso para crear la base de datos de usuarios en phpMyAdmin, pensada para el sistema de registro/verificación que hemos estado diseñando en PHP:

🛠 Pasos en phpMyAdmin

Acceder a phpMyAdmin
- Entra en tu panel de hosting y abre phpMyAdmin.
- Selecciona Crear nueva base de datos.
- Ponle un nombre, por ejemplo: usuarios_db.
- Charset recomendado: utf8mb4_general_ci.
Crear la tabla de usuarios
- Dentro de la base de datos, pulsa Nueva tabla.
- Nombre: usuarios.
- Número de columnas: 6 (puedes ampliar según necesidades).
Definir las columnas

Columna	Tipo	Atributos	Comentario
`id`	INT(11)	AUTO_INCREMENT, PRIMARY KEY	Identificador único
`nombre`	VARCHAR(100)	NOT NULL	Nombre del usuario
`email`	VARCHAR(150)	UNIQUE, NOT NULL	Correo electrónico
`password`	VARCHAR(255)	NOT NULL	Contraseña encriptada (hash)
`token`	VARCHAR(64)	NULL	Token de verificación
`verificado`	TINYINT(1)	DEFAULT 0	0 = no verificado, 1 = verificado

👉 En phpMyAdmin puedes definirlo así:

sql

CREATE TABLE usuarios (
  id INT(11) AUTO_INCREMENT PRIMARY KEY,
  nombre VARCHAR(100) NOT NULL,
  email VARCHAR(150) NOT NULL UNIQUE,
  password VARCHAR(255) NOT NULL,
  token VARCHAR(64),
  verificado TINYINT(1) DEFAULT 0
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

Cómo se usa esta estructura

Registro (register.php)
- Inserta nombre, email, contraseña (encriptada con password_hash()), token aleatorio y verificado=0.
Correo de verificación
- Envía al usuario un enlace con verify.php?token=XYZ.
Verificación (verify.php)
- Busca el token en la tabla.
- Si existe, actualiza verificado=1.
Login (login.php)
- Comprueba email y contraseña con password_verify().
- Solo permite acceso si verificado=1.

Resultado

Con esta base de datos en phpMyAdmin ya tienes el núcleo para:

Guardar usuarios.
Enviar correos de verificación.
Confirmar cuentas.
Permitir login seguro.

Acceso y creación de la tabla en phpMyAdmin sin líos

Aquí tienes el camino claro, paso a paso, para entrar en phpMyAdmin y crear tu tabla sin complicarte.

Acceder a phpMyAdmin desde tu hosting

Entrar al panel del hosting:
- Accede al panel (cPanel, Plesk, o el que use tu proveedor).
Abrir phpMyAdmin:
- Busca “Bases de datos” y luego “phpMyAdmin”.
- Haz clic para abrirlo en una nueva pestaña.

Crear (o seleccionar) la base de datos

Si ya tienes base de datos creada:
- Selecciona tu base de datos en la columna izquierda (por ejemplo, usuarios_db).
Si necesitas crear una nueva:
- Clic en “Nueva” arriba.
- Nombre: usuarios_db (o el que prefieras).
- Cotejamiento: utf8mb4_general_ci.
- Crear y luego selecciona la base recién creada en la izquierda.

Opción A: Crear la tabla con el asistente

Ir a “Estructura” de tu base seleccionada.
Clic en “Nueva tabla”.
Nombre de la tabla: usuarios.
Número de columnas: 6.
Definir columnas:
- id: INT(11), A_I (Auto Increment), PRIMARY KEY.
- nombre: VARCHAR(100), NOT NULL.
- email: VARCHAR(150), NOT NULL, UNIQUE.
- password: VARCHAR(255), NOT NULL.
- token: VARCHAR(64), NULL.
- verificado: TINYINT(1), DEFAULT 0.
Guardar.

Opción B: Crear la tabla pegando SQL

Ir a la pestaña “SQL” de tu base seleccionada.
Pegar y ejecutar este SQL:

sql

CREATE TABLE usuarios (
  id INT(11) AUTO_INCREMENT PRIMARY KEY,
  nombre VARCHAR(100) NOT NULL,
  email VARCHAR(150) NOT NULL UNIQUE,
  password VARCHAR(255) NOT NULL,
  token VARCHAR(64),
  verificado TINYINT(1) DEFAULT 0
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

Verificar y apuntar credenciales

Verificar la tabla: en la columna izquierda debe aparecer usuarios; entra y verás sus columnas.
Apunta tus credenciales (para PDO):
- Servidor: normalmente localhost.
- Base de datos: el nombre que creaste (ej. usuarios_db).
- Usuario y contraseña: los de MySQL en tu hosting.
Conexión PDO (referencia):

php

$pdo = new PDO('mysql:host=localhost;dbname=usuarios_db;charset=utf8mb4', 'usuario_mysql', 'tu_password', [
  PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
  PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC
]);

Consejos rápidos para no liarla

Usa siempre utf8mb4 para evitar problemas con acentos y emojis.
password debe ir con hash: guarda con password_hash($plain, PASSWORD_DEFAULT).
No dupliques emails: el índice UNIQUE en email ya te protege.
Si falla la creación: revisa que estás dentro de la base correcta antes de ejecutar el SQL.

ejemplos visuales creados que imitan la interfaz gráfica de phpMyAdmin, para que veas claramente dónde se crean la base de datos y la tabla.

🖼️ Ejemplo visual 1: Crear una base de datos en phpMyAdmin

En el menú superior verás la opción “Bases de datos”.
Ahí aparece un campo para escribir el nombre de la nueva base de datos y elegir el cotejamiento (utf8mb4_general_ci).
Luego pulsas “Crear”.

🖼️ Ejemplo visual 2: Crear una tabla dentro de la base de datos

Una vez seleccionada tu base en la columna izquierda, entras en la pestaña “Estructura”.
Verás un formulario que dice “Crear tabla”.
Ahí introduces el nombre de la tabla (ej. usuarios) y el número de columnas (ej. 6).
Después defines cada columna: id, nombre, email, password, token, verificado.

EJEMPLOS VISUALES

como CREAR una TABLA en MYSQL PHPMYADMIN

Ingresar registros a tablas de la base de datos utilizando la interfaz gráfica de PhpMyAdmin

Creación de la base de datos y tabla

Crear tablas en MySQL

Aquí tienes un mapa visual del flujo de archivos y carpetas para tu sistema de registro con verificación por correo en PHP. Así lo tendrás todo ordenado y claro:

📂 Estructura recomendada del proyecto

Código

/mi-proyecto/
│
├── /templates/
│   └── email-verificacion.html     # Plantilla HTML del correo de verificación
│
├── /public/
│   ├── bienvenido-a-tu-cuenta.html # Página de bienvenida tras verificar
│   ├── login.html                  # Formulario de login
│   ├── register.html               # Formulario de registro
│   └── verify.php                  # Página que procesa el token de verificación
│
├── /src/
│   ├── register.php                # Script PHP que guarda usuario y envía correo
│   ├── login.php                   # Script PHP que valida credenciales
│   ├── reset.php                   # Script PHP para recuperación de contraseña
│   └── db.php                      # Conexión PDO a la base de datos
│
└── /sql/
    └── usuarios.sql                # Script SQL para crear la tabla en phpMyAdmin

🔑 Flujo de funcionamiento

Usuario se registra en register.html → el formulario envía datos a register.php.
register.php guarda el usuario en la tabla usuarios y carga la plantilla email-verificacion.html para enviar el correo.
El correo contiene un enlace a verify.php?token=XYZ.
verify.php valida el token en la base de datos y, si es correcto, redirige a bienvenido-a-tu-cuenta.html.
Desde ahí, el usuario puede ir a su perfil o iniciar sesión en login.html.

🚀 Ventaja de esta estructura

Separación clara: plantillas, scripts PHP, páginas públicas y SQL cada uno en su sitio.
Modularidad: puedes cambiar el diseño del correo sin tocar el PHP.
Escalabilidad: fácil añadir más funciones (roles, panel admin, etc.).

Aquí tienes el script SQL completo que puedes importar directamente en phpMyAdmin para crear la tabla usuariosdentro de tu base de datos.

📜 Script `usuarios.sql`

sql

-- Crear la base de datos (si aún no existe)
CREATE DATABASE IF NOT EXISTS usuarios_db
  CHARACTER SET utf8mb4
  COLLATE utf8mb4_general_ci;

-- Usar la base de datos
USE usuarios_db;

-- Crear la tabla de usuarios
CREATE TABLE IF NOT EXISTS usuarios (
  id INT(11) AUTO_INCREMENT PRIMARY KEY,
  nombre VARCHAR(100) NOT NULL,
  email VARCHAR(150) NOT NULL UNIQUE,
  password VARCHAR(255) NOT NULL,
  token VARCHAR(64),
  verificado TINYINT(1) DEFAULT 0,
  creado_en TIMESTAMP DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

🛠 Cómo importarlo en phpMyAdmin

Entra en phpMyAdmin desde tu hosting.
Si no tienes base de datos, crea una nueva llamada usuarios_db.
Selecciona la base en la columna izquierda.
Ve a la pestaña SQL.
Copia y pega el script anterior.
Pulsa Ejecutar.

👉 Verás que se crea la tabla usuarios con las columnas necesarias para tu sistema de registro y verificación.

Campos importantes

id → identificador único.
nombre → nombre del usuario.
email → correo electrónico (único).
password → contraseña encriptada con password_hash().
token → clave de verificación enviada por correo.
verificado → estado de la cuenta (0 = no verificada, 1 = verificada).
creado_en → fecha y hora de registro.

Así ya tienes tu base de datos lista para conectar con tus scripts PHP (register.php, verify.php, login.php). 🚀

Pasos para ejecutar un script SQL en phpMyAdmin

Accede a phpMyAdmin
- Desde tu panel de hosting (cPanel, Plesk, etc.), abre phpMyAdmin.
- Verás en la parte izquierda la lista de bases de datos.
Selecciona la base de datos
- Si ya creaste la base (ej. usuarios_db), haz clic sobre ella en la columna izquierda.
- Si no existe, primero crea una nueva desde la pestaña “Bases de datos”.
Ir a la pestaña “SQL”
- Una vez dentro de la base, en la parte superior verás varias pestañas: Estructura, SQL, Buscar, Exportar…
- Haz clic en “SQL”.
Pegar el script
- Se abrirá un editor de texto.
- Copia y pega el script SQL que te pasé (por ejemplo, el de creación de la tabla usuarios).
Ejemplo:sqlCREATE TABLE usuarios ( id INT(11) AUTO_INCREMENT PRIMARY KEY, nombre VARCHAR(100) NOT NULL, email VARCHAR(150) NOT NULL UNIQUE, password VARCHAR(255) NOT NULL, token VARCHAR(64), verificado TINYINT(1) DEFAULT 0, creado_en TIMESTAMP DEFAULT CURRENT_TIMESTAMP ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
Ejecutar
- Pulsa el botón “Continuar” o “Ejecutar” (depende de la versión).
- phpMyAdmin procesará el script y te mostrará un mensaje de éxito si todo salió bien.
Verificar la tabla
- En la columna izquierda, dentro de tu base, debe aparecer la tabla usuarios.
- Haz clic en ella y verás las columnas que definiste.

🚀 Resultado

Con esto ya tienes tu tabla creada y lista para usar desde PHP.

register.php insertará registros en ella.
verify.php buscará el token y actualizará el campo verificado.
login.php comprobará email y contraseña.

Estructura de archivos HTML para login, registro, verificación y perfil

Árbol de proyecto

HTML de cada página

Login

Registro

Verificación por correo

Perfil de usuario

Recuperación de contraseña

CSS base compartido

JS de autenticación (API real o mock)

Versión con API real (recomendado)

Versión sin backend (mock rápido con localStorage)

Flujo de navegación

Integración con WordPress (opcional, rápida)

📧 Plantilla de correo de verificación (HTML)

🌐 Página bienvenido-a-tu-cuenta.html

Flujo completo

🛠 Pasos en phpMyAdmin

Cómo se usa esta estructura

Resultado

Acceso y creación de la tabla en phpMyAdmin sin líos

Acceder a phpMyAdmin desde tu hosting

Crear (o seleccionar) la base de datos

Opción A: Crear la tabla con el asistente

Opción B: Crear la tabla pegando SQL

Verificar y apuntar credenciales

Consejos rápidos para no liarla

🖼️ Ejemplo visual 1: Crear una base de datos en phpMyAdmin

🖼️ Ejemplo visual 2: Crear una tabla dentro de la base de datos

EJEMPLOS VISUALES

como CREAR una TABLA en MYSQL PHPMYADMIN

Ingresar registros a tablas de la base de datos utilizando la interfaz gráfica de PhpMyAdmin

Creación de la base de datos y tabla

Crear tablas en MySQL

📂 Estructura recomendada del proyecto

🔑 Flujo de funcionamiento

🚀 Ventaja de esta estructura

📜 Script usuarios.sql

🛠 Cómo importarlo en phpMyAdmin

Campos importantes

Pasos para ejecutar un script SQL en phpMyAdmin

🚀 Resultado

Cookies

🌐 Página `bienvenido-a-tu-cuenta.html`

📜 Script `usuarios.sql`