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 herunter. Laden Sie NodeJS herunter. hier hier Schritt 1: Postgres-Datenbank einrichten Erstellen Sie eine neue Postgres-Datenbank entweder mit , der CLI zum Ausführen von SQL-Befehlen, oder einer grafischen Benutzeroberfläche wie pgAdmin (das vorinstalliert ist). Für diese Demonstration verwenden wir zum Erstellen der Datenbank. psql psql Öffnen Sie und geben Sie die Anmeldeinformationen ein, um zu beginnen. psql Erstellen Sie eine Datenbank namens „ und stellen Sie eine Verbindung dazu her! webapp (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 . Sie können Postgres-Dokumente verwenden, um sich durch die Befehle zu führen. Für diese Demonstration erstellen wir eine , die , und speichert. CREATE TABLE student Name Year Branch (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 Tabelle mit dem folgenden Befehl anzeigen Student 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 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. students_list Schritt 3: HTML über Express JS mit Postgres verbinden Installieren Sie zunächst die erforderlichen Bibliotheken in Ihrer oder Ihrem Terminal Command Prompt npm install express body-parser pg Beginnen wir mit dem Erstellen der Datei zum Verbinden von HTML und PostgreSQL. Zunächst müssen wir die erforderlichen Bibliotheken importieren, um Anfragen zu verarbeiten und eine Verbindung herzustellen. script.js // Import required modules const express = require('express'); const { Pool } = require('pg'); const path = require('path'); const bodyParser = require('body-parser'); fungiert als Backend-Dienst zum Parsen von Anfragen aus der HTML-Webanwendung. ist eine Postgres-API zum Herstellen des . Bietet Dienstprogramme zum Verwalten von Verzeichnispfaden. ist eine Middleware zum Extrahieren von Daten aus POST-Anfragen express pg path body-parser (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 Objekts erstellen. Fügen Sie die erforderlichen Werte hinzu, die Ihrem Postgres-Setup entsprechen. 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 }); Fügen Sie Funktionen hinzu, um statische Dateien über die Middleware zu registrieren. Sie gibt das Stammverzeichnis an, aus dem statische Dateien bereitgestellt werden sollen. express.static() 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! ist endlich fertig. Nehmen wir die Änderungen in der Datei vor, um die erforderlichen Details anzuzeigen. 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> ... Ausführen der Website Öffnen Sie Terminal, gehen Sie zu dem Verzeichnis, in dem und gespeichert sind, und führen Sie den folgenden Befehl aus: index.html script.js node script.js Wenn alles richtig funktioniert, sollte der Inhalt „Server lauscht auf Port 3000“ angezeigt werden. Jetzt müssen Sie zu gehen, wo Sie eine einfache HTML-Website sehen, die die von Ihnen eingegebenen Daten anzeigt! http://localhost:3000/ 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!
