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

【Copie e Cole】Introdução ao SQL: Primeiro passo na manipulação de banco de dados para criadores web

“Banco de dados e SQL parecem difíceis...” ou “Parece algo com uma tela preta cheia de comandos…”. Se você é um criador web e já pensou isso, não está sozinho. Pode parecer que precisa de conhecimento técnico avançado, e que é algo distante da sua realidade.

Mas e se você pudesse executar SQL diretamente no seu navegador sem nenhuma configuração complicada? Não ficaria curioso para tentar?

Este artigo é um “kit de introdução interativo” voltado para criadores web que estão começando com SQL. O objetivo é simples: fazer você sentir a utilidade e diversão do SQL através de códigos prontos para copiar e colar. Ao final da leitura, você terá dado o primeiro passo para manipular bancos de dados e o medo do SQL terá se transformado em empolgação.

Afinal, o que é SQL e o que é um banco de dados?

Comparando com algo do dia a dia…

Vamos começar esclarecendo os termos de forma simples, usando analogias:

Ou seja, aprender SQL é como adquirir um “feitiço mágico” para extrair livremente informações de um enorme armazém de dados.

Aquecimento! Vamos criar uma tabela de prática

Como tudo na vida, é bom começar pelo básico. Vamos criar uma tabela chamada “Users” com ID, nome, idade e cidade.

O código abaixo cria essa tabela e insere cinco registros de exemplo. Não se preocupe em entender tudo agora, apenas observe como o código é estruturado.

Código de exemplo: Criar tabela e inserir dados

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, 'Tóquio'),
(2, 'Sato', 32, 'Osaka'),
(3, 'Suzuki', 20, 'Tóquio'),
(4, 'Takahashi', 40, 'Fukuoka'),
(5, 'Watanabe', 28, 'Osaka');

O básico! Usando SELECT para obter dados

O comando SQL mais usado é o SELECT, que serve para buscar dados de uma tabela. É a base do SQL.

Por exemplo, se quiser buscar todos os dados da tabela “Users”, use este comando:

Código de exemplo: Buscar todos os dados

SELECT * FROM Users;

Vamos analisar a estrutura:

Simples, certo? Você está basicamente dizendo: “Pegue tudo da tabela Users!”

Exemplo avançado: Filtrando dados com precisão

Frequentemente, queremos apenas dados que atendem a certas condições. Para isso, usamos a cláusula WHERE.

Por exemplo, se quiser ver apenas usuários que moram em Tóquio, use: SELECT * FROM Users WHERE city = 'Tóquio'.

Código de exemplo: Buscar dados com condições

SELECT * FROM Users WHERE city = 'Tóquio';

SELECT * FROM Users WHERE age >= 30;

Alterando as condições no WHERE, você pode extrair exatamente os dados que deseja. Essa é a força do SQL!

【Hora da prática】Execute SQL direto no HTML!

Chegou o momento de ver tudo funcionando! Abaixo está um código HTML totalmente funcional para executar SQL diretamente no navegador.

Clique no botão copiar, cole em um editor (como VSCode), e salve como “sql-practice.html”. Depois, abra no navegador (Chrome, por exemplo).

Digite comandos SELECT na área à esquerda e clique em “Executar SQL”. O resultado aparecerá em forma de tabela à direita. Experimente com diferentes comandos!

Código de exemplo: Ambiente SQL funcional em HTML

<!DOCTYPE html>
<html lang="pt">
<head>
    <meta charset="UTF-8">
    <title>Ambiente de Execução 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()">Executar SQL</button>
        <div id="error"></div>
    </div>
    <div class="container">
        <h3>Resultado da Execução</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, 'Tóquio'), (2, 'Sato', 32, 'Osaka'), (3, 'Suzuki', 20, 'Tóquio'),
                    (4, 'Takahashi', 40, 'Fukuoka'), (5, 'Watanabe', 28, 'Osaka');
                `;
                db.run(initialSql);
                executeSql();
            } catch (e) { document.getElementById('error').textContent = "Falha ao inicializar o 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 = "Erro: " + 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! Pontos a ter em mente ao usar SQL

SQL é extremamente poderoso, mas ao usá-lo em aplicações web, é necessário estar atento a certos perigos. Um dos mais conhecidos é o SQL Injection (injeção de SQL).

Essa técnica consiste em inserir comandos SQL maliciosos em formulários da web, podendo permitir o acesso não autorizado ou a manipulação indevida de dados.

Para se proteger, o mais importante é não concatenar diretamente os dados de entrada do usuário nas queries SQL. Em vez disso, usa-se o conceito de “placeholders” ou parâmetros preparados para garantir a segurança.

Resumo: o próximo passo

Com essa experiência prática de “copiar e colar”, SQL pode ter parecido muito mais acessível do que você imaginava. Não é necessário um terminal complicado — apenas os comandos certos.

Hoje vimos apenas o SELECT, mas também existem comandos como UPDATE (atualizar) e DELETE (excluir). Experimente esses comandos no ambiente HTML fornecido aqui e explore as possibilidades. Dominar SQL abrirá muitas portas como criador web.