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 Baixe o NodeJS aqui aqui Etapa 1: configurar o banco de dados Postgres Crie um novo banco de dados Postgres usando , 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 para criar o banco de dados. psql psql Abra e insira as credenciais para começar. psql Crie um banco de dados chamado e conecte-se a ele! webapp (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 . Você pode usar os documentos do Postgres para orientá-lo com os comandos. Para esta demonstração, estamos criando um banco de dados que armazena , e . CREATE TABLE student Name Year 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 com o comando abaixo Student SELECT * FROM student; Se você seguisse os passos até agora, obteria a tabela abaixo! student 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 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. students_list Etapa 3: Conectando HTML ao Postgres via Express JS Instale as bibliotecas necessárias primeiro em seu ou terminal Command Prompt npm install express body-parser pg Vamos começar a construir o arquivo para conectar HTML e PostgreSQL. Primeiramente, precisamos importar as bibliotecas necessárias para lidar com solicitações e estabelecer uma conexão script.js // Import required modules const express = require('express'); const { Pool } = require('pg'); const path = require('path'); const bodyParser = require('body-parser'); funciona como um serviço de back-end, para analisar solicitações do webapp HTML é uma API Postgres para estabelecer o de conexão fornece utilitários para gerenciar caminhos de diretório é um middleware para extrair dados de solicitações POST express pg path body-parser (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 . Adicione os valores necessários para corresponder à configuração do Postgres. Pool // 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 . Ele especifica o diretório raiz a partir do qual servir arquivos estáticos express.static() 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! está finalmente concluído. Vamos fazer as alterações no arquivo para apresentar os detalhes necessários. script.js index.html ... <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> ... Execute o site Abra o Terminal e vá para o diretório onde e estão armazenados e execute o seguinte comando: index.html script.js node script.js Se tudo funcionar bem, deverá exibir o conteúdo "Servidor escutando na porta 3000" Agora, você precisa ir para onde você pode ver um site HTML simples mostrando os dados que você inseriu! http://localhost:3000/ Voilá! É isso! Agora, use sua criatividade e conhecimento para explorar esses conceitos de desenvolvimento web e criar sites mais interessantes! Também adicionarei outro blog sobre como criar um sistema de registro e como projetá-lo, que será lançado em breve. Siga para mais e fique ligado! Até então, continue codificando!
