1,715 leituras

Crie um site HTML simples com conectividade de banco de dados Postgres

por Abel Roy6m2024/05/05

Muito longo; Para ler

Este tutorial orienta você na criação de um site HTML conectado a um banco de dados Postgres usando JavaScript (Node JS, Express JS). Abrange a configuração do banco de dados, a criação da estrutura HTML, a conexão com Express JS e a busca de dados do Postgres para exibição na página da web.

featured image - Crie um site HTML simples com conectividade de banco de dados Postgres

Preparem-se, futuros desenvolvedores da Web! Vamos criar um site HTML simples que se conecte a um banco de dados Postgres.

Para este exemplo, usaremos JavaScript (Node JS e Express JS) para suas funcionalidades de middleware. Se você deseja mostrar seu portfólio, manter um blog ou concluir um miniprojeto de desenvolvimento web, o desenvolvimento web é uma habilidade que ainda está em demanda.

O caminho de aprendizagem adiante

Iremos nos aprofundar no processo de construção de um site HTML simples do zero. Exploraremos como integrar um banco de dados Postgres, usando JavaScript como middleware para lidar com solicitações de API. Para apimentar as coisas, também podemos usar Bootstrap5 para projetar a página web! Mas isso será abordado em um blog diferente.

Tecnologias utilizadas:

HTML5
Postgres (banco de dados)
Express JS (back-end)

Pré-requisitos

Certifique-se de que o Postgres esteja baixado e pronto para uso. Além disso, baixe o Node JS para instalar pacotes npm como Express JS, Body Parser e Postgres APIs. Baixe o Postgres aqui Baixe o NodeJS aqui

Etapa 1: configurar o banco de dados Postgres

Crie um novo banco de dados Postgres usando psql , que é a CLI para executar comandos SQL ou uma interface gráfica de usuário como pgAdmin (que vem pré-instalada). Para esta demonstração, usaremos psql para criar o banco de dados.

Abra psql e insira as credenciais para começar.

Crie um banco de dados chamado webapp e conecte-se a ele! (Você pode usar qualquer nome que quiser para o seu projeto!)

 CREATE database webapp;

 \c webapp

Comece a construir sua tabela neste banco de dados pelo comando CREATE TABLE . Você pode usar os documentos do Postgres para orientá-lo com os comandos. Para esta demonstração, estamos criando um banco de dados student que armazena Name , Year e Branch . (Adicione mais atributos se desejar)

 CREATE TABLE student (name varchar(20), semester int, branch varchar(20));

 \d student

Agora, podemos começar a enviar alguns dados fictícios para a tabela por meio do comando INSERT

 INSERT INTO student VALUES ('Abel', 4, 'CE'), ('John', 6, 'ME'), ('Doe', 2, 'ETC');

Assim que terminarmos de adicionar os dados fictícios, podemos visualizar a tabela Student com o comando abaixo

 SELECT * FROM student;

Se você seguisse os passos até agora, obteria a tabela student abaixo!

Etapa 2: crie um site HTML simples

Abaixo está o código HTML Boilerplate para um site simples:

 <!DOCTYPE html> <html lang='en'> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title> Student Management System </title> </head> <body> <h1> Student Management System </h1> </body> </html>

Vamos começar a adicionar os blocos div personalizados de acordo com nossas necessidades:

 ... <body> <h1> Student Management System </h1> <p> Here, are the student details as below: </p> <div id='students_list'></div> ...

O bloco div students_list serve para mostrar a lista de alunos que foram cadastrados no banco de dados. Estaremos usando Express JS para buscar os dados do Postgres e exibi-los no bloco.

Etapa 3: Conectando HTML ao Postgres via Express JS

Instale as bibliotecas necessárias primeiro em seu Command Prompt ou terminal

 npm install express body-parser pg

Vamos começar a construir o arquivo script.js para conectar HTML e PostgreSQL. Primeiramente, precisamos importar as bibliotecas necessárias para lidar com solicitações e estabelecer uma conexão

 // Import required modules const express = require('express'); const { Pool } = require('pg'); const path = require('path'); const bodyParser = require('body-parser');

express funciona como um serviço de back-end, para analisar solicitações do webapp HTML pg é uma API Postgres para estabelecer o path de conexão fornece utilitários para gerenciar caminhos de diretório body-parser é um middleware para extrair dados de solicitações POST (iremos entendê-los em profundidade à medida que avançamos)

Vamos agora criar uma conexão expressa da aplicação e também definir a porta na qual o servidor estará escutando.

 // Connect and Create an Express Application const app = express(); const port = 3000; // By default, its 3000, you can customize

Estabeleça uma conexão com o Postgres criando uma instância do objeto Pool . Adicione os valores necessários para corresponder à configuração do Postgres.

 // Create a Postgres Connection const pool = new Pool({ user: 'postgres', host: 'localhost', database: 'webapp', password: 'password', // Change to your password port: 5432, // Default Port });

Adicione funcionalidades para registrar arquivos estáticos via middleware express.static() . Ele especifica o diretório raiz a partir do qual servir arquivos estáticos

 app.use(express.static(path.join('')));

Agora, temos que analisar as solicitações HTML enviadas do aplicativo. Em palavras simples, é um middleware usado para receber dados dos usuários, como formulários ou uploads

 app.use(bodyParser.urlencoded({ extended: false }));

(Não adicione a linha acima se você não planeja receber informações dos usuários. Adicionaremos um formulário de registro no próximo blog e é por isso que exigimos o analisador de corpo)

Configure um manipulador de rota para o URL raiz ('/'). Para que, quando for feita uma solicitação GET à URL raiz, o servidor responda enviando o arquivo "index.html" localizado no mesmo diretório

 // Setup Route handler app.get('/', (req, res) => { res.sendFile(path.join(__dirname, '', 'index.html')); });

Agora vem a parte principal! Agora iremos configurar um manipulador de rota para URL '/estudantes' com o método HTTP GET. Este manipulador recupera dados dos alunos (da consulta) do banco de dados Postgres.

 // Route handler for GET student data app.get('/students', (req, res) => { const query = 'SELECT * FROM student;'; pool.query(query, (error, result) => { if (error) { console.error('Error occurred:', error); res.status(500).send('An error occurred while retrieving data from the database.'); } else { const students = result.rows; res.json(students); } }); });

(Certifique-se de que os colchetes estejam fechados corretamente)

Agora vamos especificar a linha que escuta o servidor e quando chegar a hora ele responde com suas solicitações. À medida que o comando abaixo escuta, ele registra uma mensagem no console.

 // Listening to Requests app.listen(port, () => { console.log(`Server listening on port ${port}`); });

(Bom para fins de depuração)

Feito! script.js está finalmente concluído. Vamos fazer as alterações no arquivo index.html para apresentar os detalhes necessários.

 ... <div id='students_list'></div> <script> // Fetch data via requests fetch('/students') .then(response => response.json()) .then(data => { const studentList = data.map( student => `<li> About ${student.name} : ${student.branch} - ${student.semester}th Sem</li>` ).join(''); document.getElementById('students_list').innerHTML = `<ul>${studentList}</ul>`; }) .catch(error => console.error('Error occurred:', error)); </script> ...