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 Téléchargez NodeJS ici ici Étape 1 : Configurer la base de données Postgres Créez une nouvelle base de données Postgres en utilisant , 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 pour créer la base de données. psql psql Ouvrez et entrez les informations d'identification pour commencer. psql Créez une base de données appelée et connectez-vous-y ! webapp (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 . Vous pouvez utiliser la documentation Postgres pour vous guider avec les commandes. Pour cette démonstration, nous créons une base de données qui stocke , et . CREATE TABLE student Name Year 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 avec la commande ci-dessous Student SELECT * FROM student; Si vous avez suivi les étapes jusqu'à présent, vous obtiendrez le tableau ci-dessous ! student É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 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. students_list Étape 3 : Connexion HTML à Postgres via Express JS Installez d'abord les bibliothèques nécessaires dans votre ou votre terminal Command Prompt npm install express body-parser pg Commençons par créer le fichier 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. script.js // Import required modules const express = require('express'); const { Pool } = require('pg'); const path = require('path'); const bodyParser = require('body-parser'); fonctionne comme un service backend, pour analyser les requêtes de l'application Web HTML est une API Postgres pour établir le de connexion fournit des utilitaires pour gérer les chemins de répertoire est un middleware pour extraire des données des requêtes POST express pg path body-parser (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 . Ajoutez les valeurs nécessaires pour correspondre à votre configuration 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 }); Ajoutez des fonctionnalités pour enregistrer des fichiers statiques via le middleware . Il spécifie le répertoire racine à partir duquel servir les fichiers statiques express.static() 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! est enfin terminé. Apportons les modifications dans le fichier pour afficher les détails nécessaires. 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> ... Exécuter le site Web Ouvrez le Terminal et accédez au répertoire où et sont stockés et exécutez la commande suivante : index.html script.js 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 où vous pouvez voir un simple site Web HTML présentant les données que vous avez saisies ! http://localhost:3000/ 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 !
