2,504 lecturas

Cree un sitio web HTML simple con conectividad de base de datos Postgres

por Abel Roy6m2024/05/05

Demasiado Largo; Para Leer

Este tutorial lo guía a través de la creación de un sitio web HTML conectado a una base de datos Postgres usando JavaScript (Node JS, Express JS). Cubre la configuración de la base de datos, la creación de la estructura HTML, la conexión con Express JS y la obtención de datos de Postgres para mostrarlos en la página web.

featured image - Cree un sitio web HTML simple con conectividad de base de datos Postgres

¡Prepárense, futuros desarrolladores web! Creemos un sitio web HTML simple que se conecte a una base de datos Postgres.

Para este ejemplo, usaremos JavaScript (Node JS y Express JS) para sus funcionalidades de middleware. Ya sea que desee exhibir su portafolio, ejecutar un blog o completar un mini proyecto sobre desarrollo web, el desarrollo web es una habilidad que todavía está en demanda.

El camino de aprendizaje por delante

Nos sumergiremos en el proceso de creación de un sitio web HTML sencillo desde cero. Exploraremos cómo integrar una base de datos de Postgres, utilizando JavaScript como middleware para manejar solicitudes de API. Para darle vida a las cosas, ¡también podemos usar Bootstrap5 para diseñar la página web! Pero eso se tratará en un blog diferente.

Tecnologías utilizadas:

HTML5
Postgres (base de datos)
Express JS (backend)

Requisitos previos

Asegúrese de que Postgres esté descargado y listo para usar. Además, descargue Node JS para instalar paquetes npm como Express JS, Body Parser y las API de Postgres. Descarga Postgres aquí Descarga NodeJS aquí

Paso 1: configurar la base de datos de Postgres

Cree una nueva base de datos Postgres usando psql , que es la CLI para ejecutar comandos SQL o una interfaz gráfica de usuario como pgAdmin (que viene preinstalada). Para esta demostración, usaremos psql para crear la base de datos.

Abra psql e ingrese las credenciales para comenzar.

¡Cree una base de datos llamada webapp y conéctese a ella! (¡Puedes usar el nombre que quieras para tu proyecto!)

 CREATE database webapp;

 \c webapp

Comience a construir su tabla en esta base de datos con el comando CREATE TABLE . Puede utilizar los documentos de Postgres para guiarle con los comandos. Para esta demostración, estamos creando una base de datos student que almacena Name , Year y Branch . (Agregue más atributos si lo desea)

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

 \d student

Ahora podemos comenzar a cargar algunos datos ficticios en la tabla mediante el comando INSERT.

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

Una vez que hayamos terminado, agregando los datos ficticios, podemos ver la tabla Student con el siguiente comando

 SELECT * FROM student;

Si siguió los pasos hasta ahora, obtendrá la siguiente tabla student .

Paso 2: cree un sitio web HTML simple

A continuación se muestra el código HTML estándar para un sitio web sencillo:

 <!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>

Comencemos a agregar los bloques div personalizados según nuestras necesidades:

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

El bloque div students_list sirve para mostrar la lista de estudiantes que se han registrado en la base de datos. Usaremos Express JS para recuperar los datos de Postgres y mostrarlos en el bloque.

Paso 3: conectar HTML a Postgres mediante Express JS

Instale las bibliotecas necesarias primero en su Command Prompt o terminal

 npm install express body-parser pg

Comencemos a crear el archivo script.js para conectar HTML y PostgreSQL. En primer lugar, requerimos importar las bibliotecas necesarias para manejar solicitudes y establecer una conexión.

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

express funciona como un servicio backend, para analizar solicitudes de la aplicación web HTML pg es una API de Postgres para establecer la path de conexión proporciona utilidades para administrar rutas de directorio body-parser es un middleware para extraer datos de solicitudes POST (las entenderemos en profundidad a medida que avanzamos)

Ahora creemos una conexión de aplicación rápida y también definamos el puerto en el que escuchará el servidor.

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

Establezca una conexión con Postgres creando una instancia del objeto Pool . Agregue los valores necesarios para que coincidan con su configuración de 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 });

Agregue funcionalidades para registrar archivos estáticos a través del middleware express.static() . Especifica el directorio raíz desde el cual servir archivos estáticos.

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

Ahora tenemos que analizar las solicitudes HTML enviadas desde la aplicación. En palabras simples, es un middleware utilizado para recibir datos de los usuarios, como formularios o cargas.

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

(No agregue la línea anterior si no planea recibir comentarios de los usuarios. Agregaremos un formulario de registro en el próximo blog y es por eso que requerimos body-parser)

Configure un controlador de ruta para la URL raíz ('/'). De modo que, cuando se realiza una solicitud GET a la URL raíz, el servidor responde enviando el archivo "index.html" ubicado en el mismo directorio

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

¡Ahora viene la parte principal! Ahora configuraremos un controlador de ruta para la URL '/estudiantes' con el método HTTP GET. Este controlador recupera datos de los estudiantes (de la consulta) de la base de datos de 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); } }); });

(Asegúrese de que los soportes estén cerrados correctamente)

Ahora, especifiquemos la línea que escucha al servidor y cuando llega el momento, responde con sus solicitudes. Mientras escucha el siguiente comando, registra un mensaje en la consola.

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

(Bueno para fines de depuración)

¡Hecho! script.js finalmente está completo. Hagamos los cambios en el archivo index.html para mostrar los detalles necesarios.

 ... <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> ...

Ejecute el sitio web

Abra Terminal y vaya al directorio donde están almacenados index.html y script.js y ejecute el siguiente comando:

 node script.js

Si todo funciona bien, debería mostrar el contenido "Servidor escuchando en el puerto 3000".

Ahora, debe ir a http://localhost:3000/ donde podrá ver un sitio web HTML simple que muestra los datos que ingresó.

¡Voilá! ¡Eso es todo!

¡Ahora, use su creatividad y conocimiento para explorar estos conceptos de desarrollo web y crear sitios web más interesantes!

También agregaré otro blog sobre cómo crear un sistema de registro y cómo diseñarlo, que estará disponible próximamente. ¡Síguenos para más información y estad atentos!

Hasta entonces, ¡sigue codificando!