2,504 lectures

Créez un site Web HTML simple avec la connectivité de la base de données Postgres

par Abel Roy6m2024/05/05

Trop long; Pour lire

Ce tutoriel vous guide dans la création d'un site Web HTML connecté à une base de données Postgres à l'aide de JavaScript (Node JS, Express JS). Il couvre la configuration de la base de données, la création de la structure HTML, la connexion à Express JS et la récupération des données de Postgres pour les afficher sur la page Web.

featured image - Créez un site Web HTML simple avec la connectivité de la base de données Postgres

Préparez-vous, futurs développeurs Web ! Créons un site Web HTML simple qui se connecte à une base de données Postgres.

Pour cet exemple, nous utiliserons JavaScript (Node JS et Express JS) pour ses fonctionnalités middleware. Que vous souhaitiez présenter votre portfolio, gérer un blog ou réaliser un mini-projet de développement Web, le développement Web est une compétence toujours recherchée.

Le chemin d’apprentissage à venir

Nous allons plonger dans le processus de création d’un site Web HTML simple à partir de zéro. Nous explorerons comment intégrer une base de données Postgres, en utilisant JavaScript comme middleware pour gérer les requêtes API. Pour pimenter le tout, on peut également utiliser Bootstrap5 pour concevoir la page web ! Mais cela sera abordé dans un autre blog.

Technologies utilisées :

HTML5
Postgres (base de données)
ExpressJS (back-end)

Conditions préalables

Assurez-vous que Postgres est téléchargé et prêt à être utilisé. Téléchargez également Node JS pour installer des packages npm tels que Express JS, Body Parser et les API Postgres. Téléchargez Postgres ici Téléchargez NodeJS ici

Étape 1 : Configurer la base de données Postgres

Créez une nouvelle base de données Postgres en utilisant psql , qui est la CLI pour exécuter les commandes SQL, ou une interface utilisateur graphique comme pgAdmin (qui est préinstallée). Pour cette démonstration, nous utiliserons psql pour créer la base de données.

Ouvrez psql et entrez les informations d'identification pour commencer.

Créez une base de données appelée webapp et connectez-vous-y ! (Vous pouvez utiliser n'importe quel nom pour votre projet !)

 CREATE database webapp;

 \c webapp

Commencez à créer votre table dans cette base de données par la commande CREATE TABLE . Vous pouvez utiliser la documentation Postgres pour vous guider avec les commandes. Pour cette démonstration, nous créons une base de données student qui stocke Name , Year et Branch . (Ajoutez plus d'attributs si vous le souhaitez)

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

 \d student

Maintenant, nous pouvons commencer à télécharger des données factices dans la table via la commande INSERT

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

Une fois que nous avons terminé d'ajouter les données factices, nous pouvons afficher la table Student avec la commande ci-dessous

 SELECT * FROM student;

Si vous avez suivi les étapes jusqu'à présent, vous obtiendrez le tableau student ci-dessous !

Étape 2 : Créer un site Web HTML simple

Vous trouverez ci-dessous le code HTML Boilerplate pour un site Web simple :

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

Commençons par ajouter les blocs div personnalisés selon nos besoins :

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

Le bloc div students_list sert à afficher la liste des étudiants qui ont été inscrits dans la base de données. Nous utiliserons Express JS pour récupérer les données de Postgres et les présenter dans le bloc.

Étape 3 : Connexion HTML à Postgres via Express JS

Installez d'abord les bibliothèques nécessaires dans votre Command Prompt ou votre terminal

 npm install express body-parser pg

Commençons par créer le fichier script.js pour connecter HTML et PostgreSQL. Tout d'abord, nous avons besoin d'importer les bibliothèques nécessaires au traitement des requêtes et à l'établissement d'une connexion.

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

express fonctionne comme un service backend, pour analyser les requêtes de l'application Web HTML pg est une API Postgres pour établir le path de connexion fournit des utilitaires pour gérer les chemins de répertoire body-parser est un middleware pour extraire des données des requêtes POST (nous les comprendrons en profondeur au fur et à mesure que nous avançons)

Créons maintenant une connexion d'application express et définissons également le port sur lequel le serveur écoutera.

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

Établissez une connexion à Postgres en créant une instance de l'objet Pool . Ajoutez les valeurs nécessaires pour correspondre à votre configuration 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 });

Ajoutez des fonctionnalités pour enregistrer des fichiers statiques via le middleware express.static() . Il spécifie le répertoire racine à partir duquel servir les fichiers statiques

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

Nous devons maintenant analyser les requêtes HTML envoyées depuis l'application. En termes simples, il s'agit d'un middleware utilisé pour recevoir des données des utilisateurs, telles que des formulaires ou des téléchargements.

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

(N'ajoutez pas la ligne ci-dessus si vous ne prévoyez pas de recueillir les commentaires des utilisateurs. Nous ajouterons un formulaire d'inscription dans le prochain blog et c'est pourquoi nous avons besoin d'un analyseur de corps)

Configurez un gestionnaire de route pour l'URL racine ("/"). Ainsi, lorsqu'une requête GET est faite à l'URL racine, le serveur répond en envoyant le fichier "index.html" situé dans le même répertoire

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

Maintenant vient l’essentiel ! Nous allons maintenant configurer un gestionnaire de route pour l'URL '/students' avec la méthode HTTP GET. Ce gestionnaire récupère les données des étudiants (à partir d'une requête) de la base de données 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); } }); });

(Assurez-vous que les supports sont correctement fermés)

Maintenant, précisons la ligne qui écoute le serveur et lorsque l'heure est écoulée, il répond avec ses requêtes. Pendant l'écoute de la commande ci-dessous, elle enregistre un message sur la console.

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

(Bon à des fins de débogage)

Fait! script.js est enfin terminé. Apportons les modifications dans le fichier index.html pour afficher les détails nécessaires.

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

Exécuter le site Web

Ouvrez le Terminal et accédez au répertoire où index.html et script.js sont stockés et exécutez la commande suivante :

 node script.js

Si tout fonctionne bien, il devrait afficher le contenu "Serveur en écoute sur le port 3000"

Maintenant, vous devez vous rendre sur http://localhost:3000/ où vous pouvez voir un simple site Web HTML présentant les données que vous avez saisies !

Voilà ! C'est ça!

Maintenant, utilisez votre créativité et vos connaissances pour explorer ces concepts de développement Web et créer des sites Web plus intéressants !

J'ajouterai également un autre blog sur la façon de créer un système d'enregistrement et de le concevoir, qui sera bientôt disponible. Suivez-nous pour en savoir plus et restez à l'écoute !

En attendant, continuez à coder !