Preparación para la entrevista técnica

1 · Resumen ejecutivo

2 · Requisitos del PDF (palabra por palabra)

3 · Stack utilizado

El stack es el exacto que pedía la prueba. No hay framework moderno (React, Laravel...) porque el enunciado lo prohíbe implícitamente: pedía AJAX con jQuery directo contra PHP devolviendo JSON.

4 · Arquitectura de la solución

Patrón aplicado

• Cliente "SPA-light": una sola página HTML (tables.html) que nunca se recarga; todos los cambios entran por AJAX.
• Backend tipo "controlador único": api.php recibe un parámetro action y enruta internamente. Es el equivalente "casero" a un router REST.
• Formato de intercambio: JSON en ambas direcciones (request por application/x-www-form-urlencoded al ser $.ajax POST, response con Content-Type: application/json).

5 · Esquema de base de datos

La tabla que da soporte a toda la aplicación:

CREATE DATABASE IF NOT EXISTS pruebatecnica
    CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

USE pruebatecnica;

CREATE TABLE users (
    id               INT AUTO_INCREMENT PRIMARY KEY,
    nombre           VARCHAR(150) NOT NULL,
    dni              VARCHAR(9)   NOT NULL,
    fecha_nacimiento DATE         NOT NULL,
    telefono         VARCHAR(20)  DEFAULT NULL,
    email            VARCHAR(150) DEFAULT NULL,
    foto             VARCHAR(100) DEFAULT 'undraw_profile.svg',
    UNIQUE KEY uniq_dni (dni)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

6.1 · tables.html · estructura

Tomé el archivo tables.html original del template SB Admin 2 y reemplacé la tabla de ejemplo por la mía. Las piezas clave que añadí:

Buscador y botón "Nuevo Usuario"

<div class="d-sm-flex align-items-center justify-content-between mb-4">
    <h1 class="h3 mb-0 text-gray-800">Listado de Usuarios</h1>
    <button id="btnNuevoUsuario" class="btn btn-primary btn-icon-split">
        <span class="icon text-white-50"><i class="fas fa-plus"></i></span>
        <span class="text">Nuevo Usuario</span>
    </button>
</div>

<div class="row mb-4">
    <div class="col-12 col-md-6">
        <input type="text" id="inputBuscar" class="form-control"
               placeholder="Buscar por DNI, nombre, email o teléfono...">
    </div>
</div>

Tabla vacía + contenedor de paginación

<table class="table table-bordered" id="tablaUsuarios">
    <thead>
        <tr>
            <th>#</th><th>Nombre Completo</th><th>DNI</th>
            <th>Fecha Nacimiento</th><th>Teléfono</th>
            <th>Email</th><th>Acciones</th>
        </tr>
    </thead>
    <tbody><!-- Las filas se cargan con AJAX --></tbody>
</table>
<div id="paginacion"></div>

Modales de Crear / Editar (mismo patrón)

• Bootstrap 4 modal con data-toggle="modal".
• Selector de avatar con radio buttons que envían el nombre del SVG.
• Campos con required, minlength y maxlength HTML5 (primera línea de defensa cliente).
• Para editar, hay un <input type="hidden" id="edit_id"> que guarda el ID.

6.2 · js/usuarios.js · cliente jQuery

El archivo orquesta toda la interacción. Lo encapsulé en $(document).ready para evitar contaminar el ámbito global y para asegurarme de que el DOM existe.

Estado mínimo

let paginaActual = 1;
let terminoBusqueda = '';

Sólo dos variables porque la fuente de verdad es la base de datos. No mantengo el array de usuarios en memoria (cada cambio fuerza un re-fetch). Es simple y robusto a costa de algunas requests extras.

Función central: cargarUsuarios(page)

function cargarUsuarios(page = 1) {
    paginaActual = page;
    $.ajax({
        url: 'php/api.php',
        type: 'POST',
        data: { action: 'listar', page: page, search: terminoBusqueda },
        dataType: 'json',
        success: function(respuesta) {
            let filas = '';
            respuesta.data.forEach(function(usuario, index) {
                const numeroFila = (paginaActual - 1) * 10 + index + 1;
                filas += `<tr>...</tr>`;
            });
            $('#tablaUsuarios tbody').html(filas);
            generarPaginacion(respuesta.total_pages, paginaActual);
        }
    });
}

Event delegation

Los botones de la tabla y de la paginación se crean dinámicamente. Por eso enlazo eventos a document con delegación, no directamente al botón:

$(document).on('click', '.btn-editar', function() { ... });
$(document).on('click', '#btnAnterior', function() { ... });
$(document).on('click', '#btnSiguiente', function() { ... });

Buscador en tiempo real

$('#inputBuscar').on('keyup', function() {
    terminoBusqueda = $(this).val().trim();
    cargarUsuarios(1);
});

6.3 · php/api.php · backend

Patrón front controller casero: un único archivo, un parámetro action, un if/else if que enruta a cada operación.

Cabecera y conexión

header('Content-Type: application/json; charset=utf-8');

$conn = new mysqli('localhost', 'root', '', 'pruebatecnica');
$conn->set_charset("utf8mb4");

$action = isset($_POST['action']) ? $_POST['action'] : '';

• UTF-8 tanto en cabecera como en la conexión (importante para tildes/ñ).
• mysqli en vez de PDO: válido para la prueba, pero PDO sería más portable.

Validación de DNI español

function esDniValido($dni) {
    $dni = strtoupper(trim($dni));
    if (strlen($dni) !== 9) return false;
    if (!preg_match('/^[0-9]{8}[A-Z]$/', $dni)) return false;
    return true;
}

function letraDni(int $numero): string {
    $letras = 'TRWAGMYFPDXBNJZSQVHLCKE';
    return $letras[$numero % 23];
}
function esDniValido(string $dni): bool {
    $dni = strtoupper(trim($dni));
    if (!preg_match('/^(\d{8})([A-Z])$/', $dni, $m)) return false;
    return letraDni((int)$m[1]) === $m[2];
}

Acción listar · paginación + búsqueda

$page   = isset($_POST['page']) ? (int)$_POST['page'] : 1;
$limit  = 10;
$offset = ($page - 1) * $limit;
$search = trim($_POST['search'] ?? '');

$where = '';
if ($search !== '') {
    $searchEsc = $conn->real_escape_string($search);
    $where = "WHERE nombre LIKE '%$searchEsc%' OR email LIKE '%$searchEsc%'
              OR dni LIKE '%$searchEsc%' OR telefono LIKE '%$searchEsc%'";
}

$totalRegistros = $conn->query("SELECT COUNT(*) as total FROM users $where")
                       ->fetch_assoc()['total'];
$totalPaginas   = ceil($totalRegistros / $limit);

$sql = "SELECT id, nombre, dni, fecha_nacimiento, telefono, email, foto
        FROM users $where ORDER BY id DESC LIMIT $offset, $limit";
$result = $conn->query($sql);

• Casteo (int)$_POST['page'] antes de inyectarlo — protección contra SQL injection en ese campo.
• real_escape_string para el término de búsqueda.
• Hago dos queries: una para el total (paginación) y otra para los 10 registros visibles.

Respuesta JSON estándar

echo json_encode([
    'data'        => $usuarios,
    'total'       => $totalRegistros,
    'page'        => $page,
    'total_pages' => $totalPaginas
]);

Acciones crear y actualizar

Idénticas salvo por el SQL (INSERT vs UPDATE). Ambas:

1. Comprueban que nombre, dni y fecha_nacimiento no están vacíos.
2. Validan formato de DNI.
3. Si hay teléfono, comprueban longitud mínima de 9.
4. Escapan cada string con real_escape_string.
5. Devuelven {success:true, message:'...'} o {error:'...'}.

7 · Decisiones técnicas y por qué

8 · Validaciones implementadas

9 · Seguridad · vulnerabilidades y cómo las cerraría

9.1 · SQL Injection · riesgo bajo pero existe

Uso real_escape_string, lo cual protege, pero no es la mejor práctica. Lo correcto son prepared statements:

// Lo que hago ahora
$nombreEsc = $conn->real_escape_string($nombre);
$sql = "INSERT INTO users (nombre, dni, ...) VALUES ('$nombreEsc', ...)";

// Lo que debería hacer
$stmt = $conn->prepare("INSERT INTO users (nombre, dni, fecha_nacimiento, telefono, email, foto)
                        VALUES (?, ?, ?, ?, ?, ?)");
$stmt->bind_param('ssssss', $nombre, $dni, $fechaNacimiento, $telefono, $email, $foto);
$stmt->execute();

Por qué importa: con prepared statements el driver envía los valores por separado del SQL, por lo que nunca se pueden interpretar como sintaxis. real_escape_string depende de que no se olvide nunca y de que el charset esté bien configurado.

9.2 · XSS · vulnerabilidad real en el frontend

En usuarios.js concateno el HTML así:

filas += `<td>${usuario.nombre}</td>`;

Si un usuario malicioso (o un compañero) crea uno con nombre <script>alert(1)</script>, el script se ejecuta en el navegador de todos los que vean el listado.

Fix: escapar antes de insertar:

function escapeHtml(s) {
    return String(s ?? '').replace(/[&<>"']/g, c => ({
        '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'
    }[c]));
}
// uso:
filas += `<td>${escapeHtml(usuario.nombre)}</td>`;

O usar $.text() en vez de $.html(), o construir nodos con document.createElement.

9.3 · CSRF · no hay token

Cualquier página externa podría hacer POST a php/api.php con cookies del usuario. Fix: token CSRF en sesión, enviado en cada AJAX por header X-CSRF-Token y verificado en PHP.

9.4 · No hay autenticación

Cualquiera con acceso a la URL puede listar, editar y borrar. La prueba no lo pedía, pero en producción haría:

• Login con sesiones PHP o JWT.
• Verificación de sesión al inicio de api.php antes de procesar la acción.
• Roles (admin/usuario) si fueran necesarios.

9.5 · Credenciales hardcodeadas

$username = 'root';
$password = '';

Problema: si subo esto a Git con credenciales reales, fuga. Fix: variables de entorno (getenv('DB_PASS')) o un archivo config.php excluido por .gitignore.

9.6 · Errores genéricos

Hoy devuelvo {"error":"Error creating user"} sin detalle. Bien para no filtrar información a un atacante, pero malo para debug. Solución: loguear el error real (error_log) y devolver un mensaje genérico al cliente.

9.7 · Cierre rápido del checklist OWASP Top 10

10 · Optimización y mejoras técnicas

function debounce(fn, ms = 300) {
    let t; return (...args) => { clearTimeout(t); t = setTimeout(() => fn(...args), ms); };
}
$('#inputBuscar').on('keyup', debounce(function() {
    terminoBusqueda = $(this).val().trim();
    cargarUsuarios(1);
}, 300));

10.2 · Índices en BBDD para el buscador

El LIKE '%texto%' impide usar índices B-tree (porque empieza por comodín). Para tablas pequeñas no importa, pero a partir de ~50k registros se nota. Soluciones:

• Fulltext index: ALTER TABLE users ADD FULLTEXT(nombre, email) + MATCH(...) AGAINST(...).
• Migrar a buscador externo: Elasticsearch / Meilisearch para fuzzy search.

10.3 · Loaders y notificaciones decentes

Hoy uso alert(), que bloquea el hilo y es feísimo. Mejora:

// Mostrar spinner mientras carga
$('#tablaUsuarios tbody').html('<tr><td colspan="7" class="text-center"><i class="fa fa-spinner fa-spin"></i> Cargando...</td></tr>');

// En vez de alert(), un toast (SB Admin 2 trae Bootstrap toast):
function toast(msg, type='success') {
    $('#toastContainer').append(`<div class="toast bg-${type}">${msg}</div>`);
}

10.4 · Validación reactiva en el formulario

Hoy el usuario sólo descubre que el DNI es inválido al enviar. Lo ideal es validar on blur del campo y marcar en rojo en cuanto pierde foco.

10.5 · Paginación más rica

Hoy sólo tengo "Anterior / Siguiente". En 30 segundos puedo añadir botones numerados:

function generarPaginacion(total, actual) {
    let html = `<button id="btnAnterior" ${actual<=1?'disabled':''}>«</button>`;
    for (let i = 1; i <= total; i++) {
        html += `<button class="btn-page ${i===actual?'active':''}" data-page="${i}">${i}</button>`;
    }
    html += `<button id="btnSiguiente" ${actual>=total?'disabled':''}>»</button>`;
    $('#paginacion').html(html);
}

10.6 · Una sola query para listar + total

Hoy hago dos queries: COUNT(*) y SELECT. En MySQL puedo combinarlas con SQL_CALC_FOUND_ROWS (legacy) o con una subquery, aunque para tablas pequeñas la diferencia es despreciable y la legibilidad del código actual es mejor.

10.7 · Caching del listado

Para tablas con muchos hits y pocos cambios, cachear el JSON en Redis con TTL de 30s reduce drásticamente las queries.

11 · Cómo lo refactorizaría hoy (versión moderna)

11.1 · Backend con prepared statements + PDO

// db.php
function db(): PDO {
    static $pdo = null;
    if ($pdo === null) {
        $pdo = new PDO(
            'mysql:host=localhost;dbname=pruebatecnica;charset=utf8mb4',
            getenv('DB_USER') ?: 'root',
            getenv('DB_PASS') ?: '',
            [
                PDO::ATTR_ERRMODE            => PDO::ERRMODE_EXCEPTION,
                PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
                PDO::ATTR_EMULATE_PREPARES   => false,
            ]
        );
    }
    return $pdo;
}

// ListUsers.php
function listUsers(int $page, string $search): array {
    $limit = 10; $offset = ($page - 1) * $limit;
    $params = [];
    $where = '';
    if ($search !== '') {
        $where = "WHERE nombre LIKE :s OR email LIKE :s OR dni LIKE :s OR telefono LIKE :s";
        $params[':s'] = "%$search%";
    }
    $total = db()->prepare("SELECT COUNT(*) FROM users $where");
    $total->execute($params);
    $totalRows = (int) $total->fetchColumn();

    $stmt = db()->prepare("SELECT id, nombre, dni, fecha_nacimiento, telefono, email, foto
                          FROM users $where ORDER BY id DESC LIMIT :limit OFFSET :offset");
    foreach ($params as $k => $v) $stmt->bindValue($k, $v);
    $stmt->bindValue(':limit', $limit, PDO::PARAM_INT);
    $stmt->bindValue(':offset', $offset, PDO::PARAM_INT);
    $stmt->execute();

    return ['data' => $stmt->fetchAll(), 'total' => $totalRows,
            'page' => $page, 'total_pages' => (int) ceil($totalRows / $limit)];
}

11.2 · Cliente con fetch + async/await (sin jQuery)

async function cargarUsuarios(page = 1) {
    const params = new URLSearchParams({ action: 'listar', page, search: terminoBusqueda });
    const res = await fetch('php/api.php', { method: 'POST', body: params });
    const data = await res.json();
    if (data.error) return mostrarError(data.error);
    renderTabla(data.data);
    renderPaginacion(data.total_pages, data.page);
}

11.3 · REST verbos correctos

11.4 · Stack moderno alternativo

• Backend: Laravel/Lumen, Symfony, Slim, o Node.js (Express/Fastify) si TypeScript.
• Frontend: Vue 3 o React + TypeScript, con un componente UserList y UserForm.
• Estado: React Query / TanStack Query para cache, refetch automático y optimistic updates.
• UI: Mantine, shadcn/ui o Material — más profesional que un template estático.
• BBDD: sigue siendo MySQL o PostgreSQL. ORM (Eloquent/Prisma) para tipado.

12 · Banco de preguntas probables y respuestas

13 · Cómo presentar el código en vivo

1. Arrancar XAMPP: Apache + MySQL en verde. Abrir http://localhost/pruebatecnica/tables.html.
2. Mostrar el listado: 10 registros, paginación abajo, búsqueda arriba.
3. Buscar: teclear "antonio" y comentar: "Lo correcto sería un debounce de 300 ms; lo añadiría en producción".
4. Paginar: ir a página 2, mostrar que la numeración de la primera columna sigue correcta ((página-1)*10 + index + 1).
5. Editar: abrir un usuario, cambiar el teléfono, guardar. Mostrar que se actualiza sin recargar.
6. Crear: intentar guardar con DNI inválido para enseñar la validación.
7. Abrir DevTools → Network: repetir una acción y mostrar el JSON de ida y vuelta. Esto demuestra que entiendes lo que pasa "por debajo".
8. Abrir el código: abrir api.php en la sección de validación de DNI y explicar la regex.
9. Cerrar con una mejora: "Lo siguiente que añadiría sería X" (debounce, prepared statements o auth). Demuestra visión.

14 · Cheatsheet · lo último que repasarás

Mucha suerte mañana. Estás preparado.