2,504 Lesungen

Erstellen Sie eine einfache HTML-Website mit Postgres-Datenbankkonnektivität

von Abel Roy6m2024/05/05

Zu lang; Lesen

Dieses Tutorial führt Sie durch die Erstellung einer HTML-Website, die mit einer Postgres-Datenbank verbunden ist, und zwar mit JavaScript (Node JS, Express JS). Es behandelt das Einrichten der Datenbank, das Erstellen der HTML-Struktur, das Verbinden mit Express JS und das Abrufen von Daten aus Postgres zur Anzeige auf der Webseite.

featured image - Erstellen Sie eine einfache HTML-Website mit Postgres-Datenbankkonnektivität

Machen Sie sich bereit, zukünftige Webentwickler! Lassen Sie uns eine einfache HTML-Website erstellen, die eine Verbindung zu einer Postgres-Datenbank herstellt.

Für dieses Beispiel verwenden wir JavaScript (Node JS und Express JS) für seine Middleware-Funktionen. Egal, ob Sie Ihr Portfolio präsentieren, einen Blog betreiben oder ein fälliges Miniprojekt zur Webentwicklung abschließen möchten, Webentwicklung ist eine Fähigkeit, die immer noch gefragt ist.

Der Lernpfad vor uns

Wir werden uns mit dem Erstellen einer einfachen HTML-Website von Grund auf befassen. Wir werden untersuchen, wie man eine Postgres-Datenbank integriert und JavaScript als Middleware zur Verarbeitung von API-Anfragen verwendet. Um das Ganze etwas aufzupeppen, können wir auch Bootstrap5 zum Entwerfen der Webseite verwenden! Aber das wird in einem anderen Blog behandelt.

Verwendete Technologien:

HTML5
Postgres (Datenbank)
Express JS (Backend)

Voraussetzungen

Stellen Sie sicher, dass Postgres heruntergeladen und einsatzbereit ist. Laden Sie außerdem Node JS herunter, um npm-Pakete wie Express JS, Body Parser und Postgres APIs zu installieren. Laden Sie Postgres hier herunter. Laden Sie NodeJS hier herunter.

Schritt 1: Postgres-Datenbank einrichten

Erstellen Sie eine neue Postgres-Datenbank entweder mit psql , der CLI zum Ausführen von SQL-Befehlen, oder einer grafischen Benutzeroberfläche wie pgAdmin (das vorinstalliert ist). Für diese Demonstration verwenden wir psql zum Erstellen der Datenbank.

Öffnen Sie psql und geben Sie die Anmeldeinformationen ein, um zu beginnen.

Erstellen Sie eine Datenbank namens „ webapp und stellen Sie eine Verbindung dazu her! (Sie können für Ihr Projekt einen beliebigen Namen verwenden!)

 CREATE database webapp;

 \c webapp

Beginnen Sie mit dem Erstellen Ihrer Tabelle in dieser Datenbank mit dem Befehl CREATE TABLE . Sie können Postgres-Dokumente verwenden, um sich durch die Befehle zu führen. Für diese Demonstration erstellen wir eine student , die Name , Year und Branch speichert. (Fügen Sie bei Bedarf weitere Attribute hinzu.)

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

 \d student

Jetzt können wir mit dem Hochladen einiger Dummy-Daten in die Tabelle über den INSERT-Befehl beginnen

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

Sobald wir fertig sind und die Dummy-Daten hinzugefügt haben, können wir die Student Tabelle mit dem folgenden Befehl anzeigen

 SELECT * FROM student;

Wenn Sie die Schritte bis hierher befolgt haben, erhalten Sie die folgende student !

Schritt 2: Erstellen Sie eine einfache HTML-Website

Unten sehen Sie den Boilerplate-HTML-Code für eine einfache Website:

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

Beginnen wir mit dem Hinzufügen der benutzerdefinierten Div-Blöcke entsprechend unserem Bedarf:

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

Der Div-Block students_list dient zum Anzeigen der Liste der Studenten, die in der Datenbank registriert sind. Wir werden Express JS verwenden, um die Daten von Postgres abzurufen und im Block anzuzeigen.

Schritt 3: HTML über Express JS mit Postgres verbinden

Installieren Sie zunächst die erforderlichen Bibliotheken in Ihrer Command Prompt oder Ihrem Terminal

 npm install express body-parser pg

Beginnen wir mit dem Erstellen der script.js Datei zum Verbinden von HTML und PostgreSQL. Zunächst müssen wir die erforderlichen Bibliotheken importieren, um Anfragen zu verarbeiten und eine Verbindung herzustellen.

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

express fungiert als Backend-Dienst zum Parsen von Anfragen aus der HTML-Webanwendung. pg ist eine Postgres-API zum Herstellen des path . Bietet Dienstprogramme zum Verwalten von Verzeichnispfaden. body-parser ist eine Middleware zum Extrahieren von Daten aus POST-Anfragen (wir werden sie im weiteren Verlauf genauer verstehen).

Lassen Sie uns jetzt eine Express-Anwendungsverbindung erstellen und außerdem den Port definieren, auf dem der Server lauscht.

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

Stellen Sie eine Verbindung zu Postgres her, indem Sie eine Instanz des Pool Objekts erstellen. Fügen Sie die erforderlichen Werte hinzu, die Ihrem Postgres-Setup entsprechen.

 // Create a Postgres Connection const pool = new Pool({ user: 'postgres', host: 'localhost', database: 'webapp', password: 'password', // Change to your password port: 5432, // Default Port });

Fügen Sie Funktionen hinzu, um statische Dateien über die Middleware express.static() zu registrieren. Sie gibt das Stammverzeichnis an, aus dem statische Dateien bereitgestellt werden sollen.

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

Jetzt müssen wir die HTML-Anfragen analysieren, die von der App gesendet werden. Einfach ausgedrückt handelt es sich um eine Middleware, die zum Empfangen von Daten von Benutzern verwendet wird, z. B. Formulare oder Uploads.

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

(Fügen Sie die obige Zeile nicht hinzu, wenn Sie keine Benutzereingaben entgegennehmen möchten. Wir werden im nächsten Blog ein Registrierungsformular hinzufügen und dafür benötigen wir einen Body-Parser.)

Richten Sie einen Route-Handler für die Stamm-URL ('/') ein. Wenn also eine GET-Anfrage an die Stamm-URL gestellt wird, antwortet der Server mit dem Senden der Datei "index.html", die sich im selben Verzeichnis befindet

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

Jetzt kommt der Hauptteil! Wir werden jetzt einen Routenhandler für die URL „/students“ mit der HTTP-GET-Methode einrichten. Dieser Handler ruft Studentendaten (aus der Abfrage) aus der Postgres-Datenbank ab.

 // 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); } }); });

(Stellen Sie sicher, dass die Klammern richtig geschlossen sind)

Geben wir nun die Leitung an, die den Server abhört und zu gegebener Zeit mit ihren Anfragen antwortet. Während der folgende Befehl abhört, protokolliert er eine Nachricht an die Konsole.

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

(Gut für Debugging-Zwecke)

Fertig! script.js ist endlich fertig. Nehmen wir die Änderungen in der Datei index.html vor, um die erforderlichen Details anzuzeigen.

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

Ausführen der Website

Öffnen Sie Terminal, gehen Sie zu dem Verzeichnis, in dem index.html und script.js gespeichert sind, und führen Sie den folgenden Befehl aus:

 node script.js

Wenn alles richtig funktioniert, sollte der Inhalt „Server lauscht auf Port 3000“ angezeigt werden.

Jetzt müssen Sie zu http://localhost:3000/ gehen, wo Sie eine einfache HTML-Website sehen, die die von Ihnen eingegebenen Daten anzeigt!

Das ist es!

Nutzen Sie jetzt Ihre Kreativität und Ihr Wissen, um diese Webentwicklungskonzepte zu erkunden und interessantere Websites zu erstellen!

Ich werde in Kürze auch einen weiteren Blog hinzufügen, in dem es um die Erstellung und Gestaltung eines Registrierungssystems geht. Bleiben Sie dran, um mehr zu erfahren!

Bis dahin: Machen Sie weiter mit dem Programmieren!