🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

【Copiar y Pegar】Introducción a SQL: Primeros pasos en bases de datos para creadores web

“Las bases de datos y SQL parecen complicadas...” o “Me imagino escribiendo comandos en una pantalla negra…”, si eres un creador web que piensa así, no estás solo. Puede parecer que necesitas conocimientos del lado del servidor, y que es un mundo lejano para ti.

Pero, ¿y si pudieras ejecutar SQL directamente en tu navegador sin ninguna configuración difícil? ¿No te gustaría probarlo?

Este artículo es un “kit interactivo para principiantes” dirigido a creadores web que usan SQL por primera vez. El objetivo es simple: hacerte sentir la utilidad y diversión de SQL a través de código que funciona solo con copiar y pegar. Al terminar de leer, habrás dado tu primer paso para manipular bases de datos y tu miedo a SQL se habrá transformado en emoción.

¿Qué es SQL y qué es una base de datos?

Explicado con ejemplos cotidianos…

Comencemos aclarando los términos usando analogías sencillas en lugar de tecnicismos:

En otras palabras, aprender SQL es como obtener un “hechizo mágico” para extraer libremente la información que deseas de un gran almacén de datos.

¡Calentamiento! Crea una tabla de práctica

Todo empieza por lo básico. Vamos a preparar una tabla de práctica llamada “Users” que almacene ID, nombre, edad y ciudad.

El siguiente código SQL crea esa tabla e inserta cinco registros de muestra. No necesitas entenderlo a fondo ahora, basta con observar cómo se ve el código SQL.

Código de ejemplo: Crear tabla e insertar datos

CREATE TABLE Users (
    id INT PRIMARY KEY,
    name VARCHAR(50),
    age INT,
    city VARCHAR(50)
);

INSERT INTO Users (id, name, age, city) VALUES
(1, 'Tanaka', 25, 'Tokio'),
(2, 'Sato', 32, 'Osaka'),
(3, 'Suzuki', 20, 'Tokio'),
(4, 'Takahashi', 40, 'Fukuoka'),
(5, 'Watanabe', 28, 'Osaka');

¡Lo básico! Obtener datos con SELECT

El comando más común en SQL es SELECT, que se usa para extraer datos de una tabla. Es la base de todo en SQL.

Por ejemplo, para obtener todos los datos de la tabla Users, se escribe así:

Código de ejemplo: Obtener todos los datos

SELECT * FROM Users;

Vamos a descomponerlo:

Muy simple, ¿verdad? Le estás diciendo a SQL: “¡Dame todo de la tabla Users!”

Ejemplo avanzado: ¡Filtra solo los datos que quieres!

A menudo, no necesitas todos los datos, sino solo los que cumplen una condición. Para eso sirve la cláusula WHERE.

Por ejemplo, si quieres ver solo los usuarios que viven en Tokio, puedes escribir: SELECT * FROM Users WHERE city = 'Tokio'.

Código de ejemplo: Obtener datos con condiciones

SELECT * FROM Users WHERE city = 'Tokio';

SELECT * FROM Users WHERE age >= 30;

Al cambiar la condición de la cláusula WHERE, puedes extraer con precisión los datos que necesitas. ¡Esa es la verdadera fuerza de SQL!

【Práctica real】¡Ejecuta SQL directamente desde HTML!

¡Ahora sí! Es momento de poner las manos en el código. A continuación, verás un archivo HTML completamente funcional con soporte para ejecutar SQL directamente.

Haz clic en el botón de copiar, pégalo en tu editor (por ejemplo, VSCode), y guarda el archivo como “sql-practice.html”. Luego, ábrelo en tu navegador (por ejemplo, Google Chrome).

En la parte izquierda escribe un comando SELECT y pulsa “Ejecutar SQL”. Los resultados se mostrarán en forma de tabla a la derecha. ¡Juega y experimenta!

Código de ejemplo: Entorno SQL funcional en HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Entorno de Ejecución SQL</title>
    <style>
        body { font-family: sans-serif; display: flex; gap: 20px; padding: 20px; background-color: #f9f9f9; }
        .container { flex: 1; display: flex; flex-direction: column; background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
        textarea { height: 150px; border: 1px solid #ccc; border-radius: 4px; padding: 10px; font-family: monospace; font-size: 14px; margin-top: 10px;}
        button { background-color: #007bff; color: white; border: none; padding: 10px 15px; border-radius: 4px; cursor: pointer; margin-top: 10px; font-size: 16px; }
        button:hover { background-color: #0056b3; }
        table { border-collapse: collapse; width: 100%; margin-top: 10px; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        th { background-color: #f2f2f2; }
        #error { color: #d9534f; font-weight: bold; margin-top: 10px; }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.10.3/sql-wasm.js"></script>
</head>
<body>
    <div class="container">
        <h3>Entrada SQL</h3>
        <textarea id="sql-input">SELECT * FROM Users;</textarea>
        <button onclick="executeSql()">Ejecutar SQL</button>
        <div id="error"></div>
    </div>
    <div class="container">
        <h3>Resultado de Ejecución</h3>
        <div id="result-table"></div>
    </div>
    <script>
        let db;
        async function initDb() {
            try {
                const config = { locateFile: filename => `https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.10.3/${filename}` };
                const SQL = await initSqlJs(config);
                db = new SQL.Database();
                const initialSql = `
                    CREATE TABLE Users (id INT, name VARCHAR(50), age INT, city VARCHAR(50));
                    INSERT INTO Users (id, name, age, city) VALUES
                    (1, 'Tanaka', 25, 'Tokio'), (2, 'Sato', 32, 'Osaka'), (3, 'Suzuki', 20, 'Tokio'),
                    (4, 'Takahashi', 40, 'Fukuoka'), (5, 'Watanabe', 28, 'Osaka');
                `;
                db.run(initialSql);
                executeSql();
            } catch (e) { document.getElementById('error').textContent = "Fallo al inicializar la BD: " + e.message; }
        }
        function executeSql() {
            const sqlInput = document.getElementById('sql-input').value;
            const errorEl = document.getElementById('error');
            const resultEl = document.getElementById('result-table');
            errorEl.textContent = '';
            resultEl.innerHTML = '';
            try {
                const results = db.exec(sqlInput);
                if (results.length > 0) { resultEl.appendChild(createTable(results[0])); }
            } catch (e) { errorEl.textContent = "Error: " + e.message; }
        }
        function createTable(result) {
            const table = document.createElement('table');
            const thead = document.createElement('thead');
            const tbody = document.createElement('tbody');
            const headerRow = document.createElement('tr');
            result.columns.forEach(col => {
                const th = document.createElement('th');
                th.textContent = col;
                headerRow.appendChild(th);
            });
            thead.appendChild(headerRow);
            result.values.forEach(row => {
                const tr = document.createElement('tr');
                row.forEach(cell => {
                    const td = document.createElement('td');
                    td.textContent = cell;
                    tr.appendChild(td);
                });
                tbody.appendChild(tr);
            });
            table.appendChild(thead);
            table.appendChild(tbody);
            return table;
        }
        initDb();
    </script>
</body>
</html>

¡Importante! Puntos a tener en cuenta al usar SQL

SQL es una herramienta muy poderosa, pero al utilizarla en aplicaciones web, hay que tener cuidado. Un riesgo común es el SQL Injection (inyección SQL).

Este ataque ocurre cuando un usuario malicioso inserta comandos SQL en formularios, alterando o robando datos. Por ejemplo, al introducir fragmentos de código SQL en un campo de nombre de usuario.

Para evitarlo, lo esencial es no concatenar directamente la entrada del usuario con la sentencia SQL. En el desarrollo real, se utilizan “placeholders” (marcadores de posición) para insertar valores de forma segura. Es un principio fundamental de seguridad que conviene recordar.

Resumen: tu siguiente paso

¿Sentiste que SQL es más accesible de lo que pensabas gracias a esta experiencia de “copiar y ejecutar”? No necesitas una consola negra, basta con decir las “palabras” correctas y los datos responden.

Hoy solo vimos cómo obtener datos con SELECT, pero también existen comandos como UPDATE (actualizar) y DELETE (eliminar). Prueba diferentes comandos SQL en el entorno HTML que usamos hoy. Si logras dominarlo, tus posibilidades como creador web se ampliarán enormemente.