Uma das dúvidas mais comuns de quem está aprendendo desenvolvimento web é:

“Como os dados de um formulário chegam até o banco de dados?”

Neste projeto vamos construir um sistema de agendamento para uma barbearia utilizando:

HTML;
CSS;
JavaScript;
Node.js;
Express;
MySQL.

Ao final, os dados digitados pelo usuário serão enviados para o backend e gravados no banco de dados.

🎥 Vídeo editado

Como Salvar Dados no MySQL com Node.js | Projeto Real de Barbearia

📺 Live completa

O projeto

O objetivo é criar um sistema simples de agendamento.

O usuário informa:

Nome;
Procedimento;
Data;
Horário.

Essas informações serão enviadas para o backend e gravadas no MySQL.

Criando o banco de dados

Primeiro criamos o banco:

CREATE DATABASE agendamento;

Depois criamos a tabela:

CREATE TABLE agendamentos (
    id INT AUTO_INCREMENT PRIMARY KEY,
    nome VARCHAR(100),
    procedimento VARCHAR(100),
    dia DATE,
    hora TIME,
    criado_em TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

O campo TIMESTAMP funciona como um carimbo de data e hora.

Isso é muito útil para auditoria e histórico.

Instalando os pacotes

O backend utiliza:

npm install express mysql2

Esses dois pacotes são suficientes para fazer a comunicação com o MySQL.

Configurando o Express

Criamos a aplicação:

const app = express();

E configuramos os middlewares:

app.use(express.json());
app.use(express.static("public"));

Assim conseguimos:

receber JSON;
servir os arquivos do frontend.

Configurando a conexão com o banco

Criamos um objeto com as configurações:

const dbConfig = {
    host: "localhost",
    user: "root",
    password: "senha",
    database: "agendamento"
};

Em projetos profissionais é recomendável utilizar variáveis de ambiente (.env).

Criando a rota POST

A rota responsável por salvar os dados:

app.post("/salvar-agendamento", async (req, res) => {
});

Como trabalhamos com banco de dados, utilizamos funções assíncronas.

Utilizando Try, Catch e Finally

Uma boa prática é tratar erros:

try {

}
catch(error){

}
finally{

}

Isso permite:

identificar problemas;
registrar erros;
fechar conexões corretamente.

Recuperando os dados enviados

Os dados chegam através do body da requisição:

const {
    nome,
    procedimento,
    dia,
    hora
} = req.body;

Essa técnica é chamada de desestruturação.

Criando a query SQL

Montamos a instrução SQL:

INSERT INTO agendamentos
(nome, procedimento, dia, hora)
VALUES (?, ?, ?, ?)

Os pontos de interrogação são importantes para evitar SQL Injection.

Essa abordagem utiliza Prepared Statement e aumenta a segurança da aplicação.

Executando o INSERT

A execução acontece através do método:

connection.execute()

Depois do INSERT podemos recuperar:

id gerado;
quantidade de linhas afetadas;
resultado da operação.

Testando com Hoppscotch e Postman

Antes do frontend, testamos a API.

Ferramentas úteis:

Postman;
Thunder Client;
Insomnia;
Hoppscotch.

Isso facilita a depuração e permite testar as rotas isoladamente.

Corrigindo erros faz parte do processo

Durante o desenvolvimento apareceu um erro:

nome não está definido

O problema aconteceu porque os dados ainda não estavam sendo recuperados do req.body.

Após fazer:

const { nome, procedimento, dia, hora } = req.body;

Tudo passou a funcionar.

Programar é isso:

testar;
errar;
corrigir;
continuar.

Criando a rota GET

Também criamos uma rota para listar os dados:

app.get("/listar-agendamentos")

Com ela conseguimos consultar tudo que foi salvo no banco.

A consulta SQL utilizada foi:

SELECT * FROM agendamentos

Integrando com o Frontend

Depois do backend pronto, fizemos a integração utilizando Fetch API.

O formulário captura:

nome;
procedimento;
data;
horário.

E envia para o servidor.

fetch()

Essa é a ponte entre frontend e backend.

Salvando os dados no MySQL

Após enviar o formulário:

O navegador envia os dados.
O Express recebe a requisição.
O Node.js executa o SQL.
O MySQL grava as informações.

Finalmente o sistema retorna uma mensagem para o usuário.

O que você aprendeu

Neste projeto você viu:

✅ Node.js

✅ Express

✅ MySQL

✅ SQL

✅ Rotas POST

✅ Rotas GET

✅ Async/Await

✅ Try/Catch/Finally

✅ Prepared Statements

✅ req.body

✅ Fetch API

✅ Integração Frontend + Backend

✅ Persistência no banco de dados

Conclusão

Esse projeto de barbearia é um excelente exemplo de aplicação Full Stack.

Ele mostra como HTML, JavaScript, Node.js e MySQL trabalham juntos para construir sistemas reais.

E o mais importante:

Programar não é decorar código.

É entender como as tecnologias se comunicam.

Porque quando você entende o fluxo:

Frontend → Backend → Banco de Dados

Você começa a enxergar como aplicações reais são construídas.

Eu não ensino programação.

Eu ajudo as pessoas a entenderem como a tecnologia funciona.