¡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 Descarga NodeJS aquí aquí Paso 1: configurar la base de datos de Postgres Cree una nueva base de datos Postgres usando , 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 para crear la base de datos. psql psql Abra e ingrese las credenciales para comenzar. psql ¡Cree una base de datos llamada y conéctese a ella! webapp (¡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 . Puede utilizar los documentos de Postgres para guiarle con los comandos. Para esta demostración, estamos creando una base de datos que almacena , y . CREATE TABLE student Name Year 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 con el siguiente comando Student 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 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. students_list Paso 3: conectar HTML a Postgres mediante Express JS Instale las bibliotecas necesarias primero en su o terminal Command Prompt npm install express body-parser pg Comencemos a crear el archivo para conectar HTML y PostgreSQL. En primer lugar, requerimos importar las bibliotecas necesarias para manejar solicitudes y establecer una conexión. script.js // Import required modules const express = require('express'); const { Pool } = require('pg'); const path = require('path'); const bodyParser = require('body-parser'); funciona como un servicio backend, para analizar solicitudes de la aplicación web HTML es una API de Postgres para establecer la de conexión proporciona utilidades para administrar rutas de directorio es un middleware para extraer datos de solicitudes POST express pg path body-parser (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 . Agregue los valores necesarios para que coincidan con su configuración de 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 }); Agregue funcionalidades para registrar archivos estáticos a través del middleware . Especifica el directorio raíz desde el cual servir archivos estáticos. express.static() 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! finalmente está completo. Hagamos los cambios en el archivo para mostrar los detalles necesarios. 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> ... Ejecute el sitio web Abra Terminal y vaya al directorio donde están almacenados y y ejecute el siguiente comando: index.html script.js node script.js Si todo funciona bien, debería mostrar el contenido "Servidor escuchando en el puerto 3000". Ahora, debe ir a donde podrá ver un sitio web HTML simple que muestra los datos que ingresó. http://localhost:3000/ ¡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!
