Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:modul:m307:learningunits:lu03:loesungen:03 [2026/05/19 15:28] – angelegt vdemir
+++ de:modul:m307:learningunits:lu03:loesungen:03 [2026/05/21 09:49] (aktuell) – vdemir
@@ Zeile 1: / Zeile 1: @@
-====== LU03.L02 ======
+====== LU03.L03 ======
 **app.js**
 <code javascript>
-// Author: Volkan Demir, 07.05.2026
+const express = require('express');
-// Erster kleiner Express-Server in JavaScript
+const app = express();
-// Dieser Server liest die index.html Datei und sendet sie an den Browser, wenn die Startseite ("/") aufgerufen wird.
+const path = require('path');
-const http = require("http");
-const fs = require("fs");
-const PORT = 3001;
-const server = http.createServer(function(req, res)  {
+// Die Daten der drei (jetzt vier) Personen
-    res.writeHead(200, { "Content-Type": "text/html" });
+const personen = [
-    //res.write(" Hallo Welt! ");
+    { id: 1, name: "Max Mustermann", alter: 28, beruf: "Entwickler" },
-    //res.end();
+    { id: 2, name: "Anna Schmidt", alter: 34, beruf: "Designerin" },
-    fs.readFile("index.html", function (err, data) {
+    { id: 3, name: "Ben Weber", alter: 22, beruf: "Student" },
-    if (err) {
+    { id: 4, name: "Peter König", alter: 25, beruf: "Betonbauer" } // ID von 3 auf 4 korrigiert
-        res.writeHead(404, { "Content-Type": "text/html" });
+];
-        res.write("Datei nicht gefunden");
-        return;
-    }  else {
-         res.write("<h1> Welt! Hier ist die index.html Datei von Demir: </h1>");
-         // Teilauftrag 1
+// FEHLENDE CODEZEILE 1: Den aktuellen Ordner für statische Dateien (wie index.html) freigeben
-         res.write('<h2 style="color: red";>ich will hier raus!!!</h2>');
+app.use(express.static(__dirname));
-         // Teilauftrag 2
+// FEHLENDE CODEZEILE 2: Route für die Startseite (liefert die index.html aus)
-         // Anlegen und Anzeigen einer kleine Tabelle mittels JS-generierten HTML-Code
+app.get('/', (req, res) => {
-         htmlstr = '<table border=1ß>'; // beginning of the table
+    res.sendFile(path.join(__dirname, 'index.html'));
-         htmlstr += '<tr><th>#</th><th>Name</th><th>Surename</th><th>Age</th></tr>'; // Header of the table
-         htmlstr += '<tr><td>1</td><td>Demir</td><td>Volkan</td><td>57</t></tr>'; // Header of the table
-         htmlstr += '<table>'; // End of the table
-         res.write(htmlstr);
-    }
-    res.end();
-    });
 });
-server.listen(PORT, function() {
+// FEHLENDE CODEZEILE 3: Route für die JSON-Daten (falls du die Daten per fetch abrufen willst)
-    console.log("Server läuft auf Port " + PORT);
+app.get('/api/personen', (req, res) => {
-});
+    res.json(personen);
+});
+// Server auf Port 3000 starten
+const PORT = 3000;
+app.listen(PORT, () => {
+    console.log(`Server läuft unter http://localhost:${PORT}`);
+});
 </code>
@@ Zeile 51: / Zeile 41: @@
 <head>
     <meta charset="UTF-8">
-    <title>Node.js Server Nachricht</title>
+    <title>Personen Übersicht</title>
+    <style>
+        table { width: 50%; border-collapse: collapse; margin-top: 20px; }
+        th, td { border: 1px solid #999; padding: 8px; text-align: left; }
+        th { background-color: #f2f2f2; }
+    </style>
 </head>
 <body>
-    <h1>Antwort vom Server:</h1>
+    <h1>Personenliste</h1>
-    <p>{SERVER_MSG}}<</p>
+    <table>
+        <thead>
+            <tr>
+                <th>ID</th>
+                <th>Name</th>
+                <th>Alter</th>
+                <th>Beruf</th>
+            </tr>
+        </thead>
+        <!-- Hier landen die Daten dynamisch -->
+        <tbody id="tabellen-body"></tbody>
+    </table>
+    <script>
+        // Daten vom Server abrufen
+        fetch('/api/personen')
+            .then(response => response.json()) // Antwort in JSON umwandeln
+            .then(daten => {
+                const tbody = document.getElementById('tabellen-body');
+                // Schleife durch alle Personen
+                daten.forEach(person => {
+                    // Eine neue Tabellenzeile erstellen
+                    const zeile = document.createElement('tr');
+                    // Zellen mit den Daten füllen
+                    zeile.innerHTML = `
+                        <td>${person.id}</td>
+                        <td>${person.name}</td>
+                        <td>${person.alter}</td>
+                        <td>${person.beruf}</td>
+                    `;
+                    // Zeile an die Tabelle anhängen
+                    tbody.appendChild(zeile);
+                });
+            })
+            .catch(error => console.error('Fehler beim Laden der Daten:', error));
+    </script>
 </body>