Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:modul:m307:learningunits:lu03:aufgaben:03 [2026/05/19 15:13] – 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 50: / Zeile 50: @@
-**server.js""
+**server.js**
 <code javascript>
-const http = require('http');
+const express = require('express');
+const app = express();
+const path = require('path');
 // Die Daten der drei Personen
@@ Zeile 75: / Zeile 78: @@
 </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