SQL do zero e criando os dados da busca
Entenda o que é SQL e crie uma tabela com dados para consumir no frontend pela página de busca.
- #Curso de Frontend
- #SQL para Iniciantes
- #SQL
- #MySQL
- #Banco de Dados
- #Busca
O que é SQL?
SQL é uma linguagem usada para trabalhar com bancos de dados relacionais. Com SQL, você cria tabelas, insere dados, consulta informações, atualiza registros e remove dados.
Neste artigo, execute os comandos na ordem em que aparecem. Primeiro criamos o banco, depois a tabela, depois os registros e por último fazemos consultas de teste.
Abrindo a consulta SQL
Abra o Laragon, clique em Start All e abra o cliente de banco pela opção de banco de dados disponível na sua instalação.
No cliente de banco, abra uma nova aba de SQL ou nova consulta. É nessa área que você deve colar e executar os comandos deste artigo.
Criando o banco
Cole o comando abaixo na aba SQL e execute. Ele cria o banco frontend_course_backend se ele ainda não existir e seleciona esse banco para os próximos comandos.
Interprete esse bloco como preparação do ambiente. Ele não cria dados ainda; apenas garante que existe um banco chamado frontend_course_backend e que os próximos comandos serão executados dentro dele.
CREATE DATABASE IF NOT EXISTS frontend_course_backend
CHARACTER SET utf8mb4
COLLATE utf8mb4_unicode_ci;
USE frontend_course_backend;Criando a tabela da busca
Com o banco frontend_course_backend selecionado, execute o comando abaixo. A tabela search_results guardará os resultados que serão consultados pela API.
Se o cliente de banco mostrar a tabela search_results na lista de tabelas, a criação funcionou.
Lendo a tabela: INT AUTO_INCREMENT PRIMARY KEY cria um id numérico automático, VARCHAR guarda textos com limite de caracteres, TEXT guarda um texto maior, NOT NULL obriga o campo a ter valor e created_at registra a data de criação.
CREATE TABLE IF NOT EXISTS search_results (
id INT AUTO_INCREMENT PRIMARY KEY,
title VARCHAR(150) NOT NULL,
description TEXT NOT NULL,
url VARCHAR(255) NOT NULL,
category VARCHAR(80) NOT NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);Inserindo dados
Execute o INSERT abaixo para inserir registros de exemplo. Esses registros serão usados pela rota de busca do backend.
Se você executar esse mesmo INSERT mais de uma vez, os registros serão duplicados. Para este curso, execute uma vez.
Lendo o INSERT: a primeira linha informa quais colunas serão preenchidas. Cada grupo entre parênteses depois de VALUES vira uma linha nova na tabela, seguindo a mesma ordem das colunas.
INSERT INTO search_results (title, description, url, category)
VALUES
('HTML para iniciantes', 'HTML é a linguagem usada para estruturar páginas na web com tags e semântica.', 'https://developer.mozilla.org/pt-BR/docs/Web/HTML', 'HTML'),
('CSS para estilização', 'CSS define cores, fontes, espaçamentos, layout e responsividade das páginas.', 'https://developer.mozilla.org/pt-BR/docs/Web/CSS', 'CSS'),
('JavaScript para interação', 'JavaScript adiciona comportamento às páginas, como cliques, filtros e validações.', 'https://developer.mozilla.org/pt-BR/docs/Web/JavaScript', 'JavaScript'),
('React com componentes', 'React ajuda a criar interfaces usando componentes reutilizáveis, props e state.', 'https://react.dev/', 'React'),
('Node.js no backend', 'Node.js permite criar servidores e APIs usando JavaScript fora do navegador.', 'https://nodejs.org/', 'Backend');Conferindo se os dados entraram
Depois do INSERT, execute uma consulta simples para ver todos os registros cadastrados. O resultado esperado é uma lista com cinco linhas.
Lendo o SELECT: ele escolhe quais colunas serão exibidas. FROM informa de qual tabela os dados vêm e ORDER BY id organiza o resultado pelo id em ordem crescente.
SELECT id, title, description, url, category
FROM search_results
ORDER BY id;Consultando por termo
LIKE permite buscar texto parcial. Os sinais de porcentagem significam qualquer texto antes ou depois do termo.
Execute a consulta abaixo para simular a busca por html. Se o registro HTML para iniciantes aparecer, a tabela está pronta para ser usada pelo backend.
Lendo o WHERE: a consulta retorna linhas em que o termo aparece no título, na descrição ou na categoria. O OR significa que basta uma dessas condições ser verdadeira para a linha aparecer.
SELECT id, title, description, url, category
FROM search_results
WHERE title LIKE '%html%'
OR description LIKE '%html%'
OR category LIKE '%html%';SQL que usaremos no backend
No backend, vamos usar parâmetros em vez de concatenar texto do usuário diretamente na consulta. Isso evita montar SQL com texto digitado diretamente pela pessoa usuária.
Os pontos de interrogação serão preenchidos pelo mysql2 quando a rota receber o termo de busca.
Lendo LIMIT 20: essa parte impede que a API retorne uma quantidade muito grande de linhas de uma vez. Mesmo em projeto pequeno, é uma boa prática limitar respostas de busca.
SELECT id, title, description, url, category
FROM search_results
WHERE title LIKE ?
OR description LIKE ?
OR category LIKE ?
ORDER BY title
LIMIT 20;
