Interação com um banco de dados PostgreSQL
- #PostgreSQL
- #HTML
- #Node.js
- #CSS
- #JavaScript
Esse código é um exemplo de como construir uma aplicação simples que interage com um banco de dados PostgreSQL, usando tecnologias como HTML, CSS, JavaScript (para o frontend) e Node.js com Express (para o backend). Vou te explicar em detalhes o que está acontecendo, de maneira mais simples.
1. Frontend (HTML, CSS)
É a parte da aplicação que o usuário vê e interage. O código HTML cria a estrutura da página, o CSS cuida do visual, e o JavaScript gerencia a interação com o backend.
a) HTML (Estrutura)
A página tem um título, um formulário para adicionar documentos e uma tabela para mostrar os documentos cadastrados.
O formulário tem um campo onde o usuário pode colocar o título do documento e um botão para enviar.
b) CSS (Visual)
Estiliza a página, ajustando cores, fontes, tamanhos, etc., para que a interface fique agradável.
c) JavaScript (Interação)
Quando a página carrega, o código JavaScript faz uma requisição ao backend para pegar os documentos cadastrados no banco de dados e os exibe na tabela.
Quando o usuário adiciona um novo documento, o JavaScript envia esse documento para o backend (que vai salvar no banco de dados) e atualiza a lista de documentos na tabela.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interação com PostgreSQL</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Interação com PostgreSQL</h1>
<form id="addDocumentForm">
<h2>Adicionar Documento</h2>
<input type="text" id="text" placeholder="Titulo Do Documento" required >
<button type="submit" >Add Documento</button>
</form>
<div class="table-container">
<h2>Lista de Documento</h2>
<table>
<thead>
<tr>
<th>ID</th>
<th>Titulo</th>
<th>Criado em</th>
</tr>
</thead>
<tbody id="documentsTable" >
<!--As Linhas Serão colocadas Aqui-->
</tbody>
</table>
</div>
<script src="./script.js"></script>
</body>
</html>
body{
font-family: Arial, Helvetica, sans-serif;
margin: 20px;
padding: 0;
background-color: #f4f4f9;
color: #333;
}
h1{
color: #999898;
}
form {
margin-bottom: 20px;
}
input,button{
padding: 10px;
margin: 5px 0;
border-radius: 5px;
border: 1px solid #8b8b8b;
}
button{
background-color: #8b8b8b;
color: white;
border: none;
cursor: pointer;
}
button:hover{
background-color: #8b8b8b;
transition: 0.5s;
}
.table-container{
margin-top: 20px;
}
table{
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 10px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th{
background-color: #8b8b8b;
color: white;
}
.delete-btn {
background-color: #ff4d4d;
color: white;
border: none;
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
}
.delete-btn:hover {
background-color: #cc0000;
}
2. Backend (Node.js + Express + PostgreSQL)
É a parte que fica "por trás" da aplicação, gerenciando as interações com o banco de dados.
a) Node.js
É uma tecnologia que permite rodar JavaScript no servidor.
b) Express
É uma biblioteca para Node.js que facilita a criação de servidores web.
c) PostgreSQL
É o banco de dados onde os documentos serão armazenados.
const API_URL = 'http://localhost:3000';
//Busca e exibe documentos
async function fetchDocuments(){
const response = await fetch(`${API_URL}/documents`);
const documents = await response.json();
const tableBody = document.getElementById('documentsTable');
tableBody.innerHTML = '';
documents.forEach(doc => {
const row = document.createElement('tr');
row.innerHTML =`
<td>${doc.id}</td>
<td>${doc.title}</td>
<td>${doc.created_at}</td>
<td><button onclick="deleteDocument(${doc.id})" class="delete-btn">❌</button></td>`;
tableBody.appendChild(row);
});
}
// Lidar com o envio do formulário para adicionar um novo documento
const form = document.getElementById('addDocumentForm');
form.addEventListener('submit',async(e) => {
e.preventDefault();
const title = document.getElementById('text').value;
await fetch(`${API_URL}/documents`,{
method:'POST',
headers:{
'content-Type': 'application/json',
},
body: JSON.stringify({title}),
});
form.reset();
fetchDocuments(); //Atualiza a tabela
});
async function deleteDocument(id) {
await fetch(`${API_URL}/documents/${id}`, {
method: 'DELETE',
});
fetchDocuments(); // Atualiza a tabela
}
//Busca inicial de documentos
fetchDocuments();
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const { Pool } = require('pg');
const app = express();
const port = 3000;
// Middleware
app.use(cors({ origin: '*' }));
app.use(bodyParser.json());
// PostgreSQL connection
const pool = new Pool({
user: 'postgres',
host: 'localhost',
database: 'postgres', // O nome do seu banco de dados
password: 'Senha', // Substitua pela senha do seu PostgreSQL
port: 5432,
});
// Pega todos os documentos
app.get('/documents', async (req, res) => {
try {
const result = await pool.query('SELECT * FROM documents');
res.json(result.rows);
} catch (err) {
console.error("Erro ao buscar documentos:", err); // Adiciona mais detalhes
res.status(500).send('Server error');
}
});
// Deleta docs pelo ID
app.delete('/documents/:id', async (req, res) => {
const { id } = req.params;
try {
const result = await pool.query('DELETE FROM documents WHERE id = $1 RETURNING *', [id]);
if (result.rowCount === 0) {
return res.status(404).send('Document not found');
}
res.json({ message: 'Document deleted', deletedDocument: result.rows[0] });
} catch (err) {
console.error(err);
res.status(500).send('Server error');
}
});
// Add novo documento
app.post('/documents', async (req, res) => {
const { title } = req.body;
try {
const result = await pool.query(
'INSERT INTO documents (title, created_at) VALUES ($1, NOW()) RETURNING *',
[title]
);
res.json(result.rows[0]);
} catch (err) {
console.error(err);
res.status(500).send('Server error');
}
});
// começa o servidor
app.get('/', (req, res) => {
res.send('Servidor está rodando! 🚀');
});
app.listen(port, () => {
console.log(`Server is running on http://localhost:${port}`);
});
Como funciona:
Quando a página solicita os documentos (via JavaScript), o backend executa uma consulta ao banco de dados (PostgreSQL) e retorna os dados.
Quando o usuário envia um novo documento, o backend salva esse documento no banco de dados.
O backend também expõe algumas rotas (URLs) que o frontend pode acessar para realizar essas operações, como adicionar documentos e buscar todos os documentos.
Fluxo de Interação:
O frontend envia uma requisição para o backend para buscar ou adicionar dados.
O backend consulta ou modifica o banco de dados conforme necessário.
O backend envia os resultados de volta para o frontend, que os exibe para o usuário.
Banco de Dados;
No banco de dados, temos uma tabela chamada documents, com três colunas: id (identificador único), title (título do documento) e created_at (data de criação).
O que acontece na prática
Você abre a página no navegador.
A página busca os documentos existentes no banco de dados e os exibe na tabela.
Você adiciona um documento e ele é enviado para o backend, que o armazena no banco de dados.
A tabela de documentos é atualizada automaticamente.
Como testar a aplicação:
Backend: Você precisa rodar o código do servidor, o que é feito com o comando node server.js. Isso vai fazer o backend funcionar em http://localhost:3000.
Frontend: Abra o arquivo HTML diretamente no seu navegador. O JavaScript vai se comunicar com o backend para mostrar os documentos e adicionar novos.
Esse sistema cobre conceitos importantes como:
Frontend dinâmico: HTML, CSS e JavaScript para interagir com a API.
Backend em Node.js: Servidor Express que faz conexão com um banco de dados.
Banco de dados: PostgreSQL.
Repositórios no GitHub: https://github.com/Ryanlssv/Interacao-com-PostgreSQL
