Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:modul:m307:learningunits:lu03:aufgaben:03 [2026/05/19 14:15] – vdemir
+++ de:modul:m307:learningunits:lu03:aufgaben:03 [2026/05/21 16:59] (aktuell) – vdemir
@@ Zeile 1: / Zeile 1: @@
-====== LU03.A03/L03 - Datenmanagement mit Node-Server ======
+====== LU03.A03 - Array darstellen mit Node-Server ======
   - Programmierung eines Node.js Webservers, der mittels GET ein Liste von Namen mittels ausgibt.
   - Programmierung eines Node.js Webservers, der in eine Liste einen Namen mittels POST hinzufügt.
@@ Zeile 40: / Zeile 40: @@
 {{:de:modul:m307:learningunits:lu03:aufgaben:installiertexpress.png?600|}}
+===== Aufgabe =====
+Das nachfolgende Script enthält einen JSON-Satz, der am Monitor anzeigt. Damit Sie das Script zum laufen bekommen befolgen Sie die nachfolgenden Anweiseungen.
+  - Kopieren Sie die nachfolgende JS-Vorlage in Ihre Visual Studio Code.
+  - Starten Sie den Server
+  - Lassen Sie sich die Daten im Browserfenster anzeigen.
+  - Ergänzen Sie den angezeigten Person-Datensatz durch weitere mindestens 3 Personen.
+  - Lassen Sie sich durch eine AI eine passende HTML-Darstellung für die Daten generieren.
-===== Aufgabe =====
+**server.js**
-  - Kopieren Sie die nachfolgende JS-Vorlage in Ihre Visual Studio Code (Filename lu03_a02.js)
-  - Starten Sie den Server
-  - Fragen Sie die Liste der Namen ab durch z.B. die URL: http://localhost:3000/users
-  - Fügen Sie in die Liste Namen hinzu durch z.B. die URL: http://localhost:3000/add/Lukas
-  - Prüfen Sie durch erneute Abfrage der List, ob Sie erfolgreich einen Namen anhängen konnten.
 <code javascript>
 const express = require('express');
 const app = express();
-const PORT = 3000;
+const path = require('path');
-// Middleware, um JSON-Daten verarbeiten zu können
-app.use(express.json());
-// Unser Datenspeicher im Arbeitsspeicher
+// Die Daten der drei Personen
-let benutzerListe = ["Maximilian", "Sophie"];
+const personen = [
+    { id: 1, name: "Max Mustermann", alter: 28, beruf: "Entwickler" }
+];
-// 1. Aufgabe: Die GET-Route vervollständigen
+// Server erstellen
-app.get('/users', (req, res) => {
+const server = http.createServer((req, res) => {
-    // Hier senden wir das gesamte Array als JSON-Antwort an den Client zurück
+    // Wichtig: Wir setzen den Content-Type auf 'application/json'
-    res.json(benutzerListe);
+    res.writeHead(200, { 'Content-Type': 'application/json' });
-});
-// 2. Aufgabe: Die POST-Route vervollständigen
-app.post('/users', (req, res) => {
-    // Wir extrahieren den Namen aus dem Request-Body
-    const neuerName = req.body.name;
-    if (neuerName) {
+    // Die Personen-Objekte in einen JSON-String umwandeln und senden
-        // Der Name wird mit .push() am Ende des Arrays hinzugefügt
+    res.end(JSON.stringify(personen));
-        benutzerListe.push(neuerName);
-        // Wir senden eine Erfolgsmeldung mit dem Statuscode 201 (Created)
-        res.status(201).send(`Benutzer ${neuerName} wurde erfolgreich gespeichert.`);
-    } else {
-        // Falls kein Name mitgeschickt wurde, senden wir den Statuscode 400 (Bad Request)
-        res.status(400).send("Fehler: Es wurde kein Name übertragen.");
-    }
 });
-app.listen(PORT, () => {
+// Server auf Port 3000 starten
-    console.log(`Ihr Server ist nun unter http://localhost:${PORT} erreichbar.`);
+const PORT = 3000;
+server.listen(PORT, () => {
+    console.log(`Server läuft unter http://localhost:${PORT}`);
 });
+</code>
+<code html>
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <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>Personenliste</h1>
+    <table>
+        <thead>
+            <tr>
+                <th>ID</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>
+                    `;
+                    // Zeile an die Tabelle anhängen
+                    tbody.appendChild(zeile);
+                });
+            })
+            .catch(error => console.error('Fehler beim Laden der Daten:', error));
+    </script>
+</body>
+</html>
 </code>
 ----
+===== Lösungen =====
+[[de:modul:m307:learningunits:lu03:Lösungen:03|LU03.L03]]
+----
 [[https://creativecommons.org/licenses/by-nc-sa/4.0/|{{https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png}}]] Volkan Demir