Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:modul:m307:learningunits:lu03:aufgaben:04 [2026/05/26 13:31] – vdemir
+++ de:modul:m307:learningunits:lu03:aufgaben:04 [2026/05/28 13:48] (aktuell) – vdemir
@@ Zeile 1: / Zeile 1: @@
-====== LU03.A04 - JSON-Daten lesen und schreiben mit JavaScript + HTML + CSS  ======
+====== LU03.A04/L04 - Webformulare: JSON-Daten lesen, bearbeiten, einfügen und löschen ======
   - Bestandteile eine node-Servers kennen.
   - Basis-Server ausführen können.
@@ Zeile 7: / Zeile 7: @@
   * Sozialform: individual
   * Hilfsmittel: OpenBooks
-  * Zeit: 20 Minutes
+  * Zeit: 30 Minutes
   * Erwartetes Resultat: Node-Server, der verschiedene abgefragte Daten am Monitor/Browser bearbeitet und ausgibt.
 ===== Ausgangslage =====
-...
+Um Rahmen des Web-Entwicklungsprojekts „Personenverzeichnis“ soll eine bestehende Node.js-Applikation mit Express und EJS (Embedded JavaScript) finalisiert und in Betrieb genommen werden. Bisher blockieren fehlerhafte Dateipfade, unvollständige Routen-Variablen sowie Caching-Probleme im Firefox-Browser das fehlerfreie Hinzufügen, Bearbeiten und Löschen von Datensätzen. Ihre Aufgabe ist es, die Ordnerstruktur zu bereinigen, die Server-Logik zu vervollständigen und die Benutzeroberfläche mit einem dynamischen Hobby-Dropdown sowie optimierten Buttons auszustatten. Der lokale Prototyp muss anschliessend auf Port 3000 fehlerfrei und stabil laufen.
-===== Ordnerstruktur der Daten =====
-<code>
-mein-projekt/
-├── data.json
-├── server.js
-├── public/
-│   └── css/
-│       └── style.css
-└── views/
-    └── index.ejs
-</code>
 ===== Auftrag =====
-Nachfolgend finden Sie verschiedene Code-Snippets.
+Installieren Sie die Ihnen zur Verfügung gestellten Files wie unten abgebildet und lassen Sie die //Mini-Applikation// laufen. Legen Sie Personen an, filtern diese und löschen auch Datensätze.
-  - Fügen Sie diese zusammen.
+Wenn alles korrekt gemacht wurde, sieht Ihre Applkation ungefähr wie folgt aus:
-  - Lassen Sie diese laufen
-  - Prüfen Sie Ausgabe im Monitor/Browser
+{{:de:modul:m307:learningunits:lu03:aufgaben:applikationsmaske.png?600|Ansicht der Webmaske}}
-==== 1. Vorarbeiten ====
+===== Benötigte File und Ablage-Struktur =====
-  - Erstellen Sie in Ihrem Visual Studio Code eine Ordner mit dem Titel //lu03_a02//
-  - Gehen Sie im Terminial in diesen neuen Ordner
+Die nachfolgenden Files müssen wir folgt im VS Studio Code abgelegt werden: {{:de:modul:m307:learningunits:lu03:aufgaben:a04.zip|Benötigten Files als Zipfile}}
-  - Installieren Sie alle relevanten JS-Komponenten in diesem Ordner durch die nachfolgenden zwei Codezeilen --> Es werden nun verschiedene Componenten installiert (sichtbar rechts unten im CodeEditor)
+Stellen Sie also sicher, dass diese den nachfolgenden Aufbau haben.
+<code>
+▼ a04 (Projekt-Wurzelverzeichnis)
+  ▼ public
+    ▼ css
+        style.css
+  ▼ views
+      index.ejs
+    data.json
+    server.js
+ </code>
+===== Arbeitsschritte ====
+**1. Order & Files**
+  * Laden Sie die Files herunter
+  * Importieren Sie diese ins VS Studio Code
+**2. Projektabhängigkeiten einrichten**
+Bevor das Skript starten kann, müssen die benötigten Node-Pakete installiert werden. Gehen Sie also in Ihr Projektverzeichnis und tippen den nachfolgenden Befehl in die Kommandozeile.
+**Hinweis:** Unter Windows muss der gewählte Terminal ein **Commandline** oder **Command Prompt** sein.
 <code>
 npm init -y
-npm install express
 </code>
+**3. Express installieren **
-==== 2. Server ====
+Die benötigten Module installieren: Express (für den Server) und EJS (für die Templates) müssen im Projekt registriert werden:
-Erstellen Sie ein weiteres File mit dem Titel //server.js// und kopieren den nachfolgenden Code rein.
 <code>
-const express = require('express');
+npm install express ejs
-const app = express();
+</code>
-const PORT = 3000;
-// Middleware, damit Express JSON-Daten im Body lesen kann
+** 4. Schreibberechtigung der JSON-Datei setzten**
-app.use(express.json());
+Es kann passieren, dass Sie die JSON-Datei nicht beschreiben können, was sich durch eine Fehlermeldung beim Server bemerkbar macht. Damit wir die JSON-Datei auch beschreiben können, müssen wir hier die Berechtigung anpassen. Gehen Sie im Terminal an die Stelle, an dem die JSON-Datei gespeichert wurde und geben die nachfolgenden Codezeilen ein.
-// Unser "Datenbank"-Ersatz
+** 4.1 Winddows-Powershell**
-let users = ["Alice", "Bob"];
-// --- DEINE AUFGABE AB HIER ---
+<code>
+# Entfernt das Schreibschutz-Attribut (R = Read-Only) von der Datei
+attrib -r data.json
+</code>
-// 1. GET ROUTE: Gib das 'users' Array zurück
+**4.2 MacOS**
-app.get('/users', (req, res) => {
-    // CODE HIER
-});
-// 2. POST ROUTE: Füge einen neuen User hinzu
+<code>
-app.post('/users', (req, res) => {
+# Gibt dem Besitzer (User) Lese- und Schreibrechte (rw-)
-    const newUser = req.body.name; // Wir erwarten { "name": "DeinName" }
+chmod 644 data.json
-    if (newUser) {
-        // CODE HIER: User zum Array hinzufügen
-        res.status(201).send(`User ${newUser} wurde hinzugefügt.`);
-    } else {
-        res.status(400).send("Fehler: Kein Name angegeben!");
-    }
-});
-// --- ENDE DER AUFGABE ---
+# Falls der ganze Ordner blockiert ist, rekursiv für alle Dateien freigeben:
+chmod -R 755
-app.listen(PORT, () => {
-    console.log(`Server läuft auf http://localhost:${PORT}`);
-});
 </code>
@@ Zeile 94: / Zeile 91: @@
 ===== Lösungen =====
-[[de:modul:m307:learningunits:lu03:Lösungen:01|LU03.L01]]
+Gibt keine, da die Aufgabe darin besteht die Applikation zu laufen zu bringen.
 ----
 [[https://creativecommons.org/licenses/by-nc-sa/4.0/|{{https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png}}]] Volkan Demir