====== LU03.A04/L04 - Webformulare: JSON-Daten lesen, bearbeiten, einfügen und löschen ======
  - Bestandteile eine node-Servers kennen.
  - Basis-Server ausführen können.
  - Daten anzeigen, verändern und schreiben können. 

===== Rahmenbedingungen =====
  * Sozialform: individual
  * Hilfsmittel: OpenBooks 
  * 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.


===== Auftrag =====
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.

Wenn alles korrekt gemacht wurde, sieht Ihre Applkation ungefähr wie folgt aus:

{{:de:modul:m307:learningunits:lu03:aufgaben:applikationsmaske.png?600|Ansicht der Webmaske}}

===== Benötigte File und Ablage-Struktur =====

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}}

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
</code>

**3. Express installieren **

Die benötigten Module installieren: Express (für den Server) und EJS (für die Templates) müssen im Projekt registriert werden:

<code>
npm install express ejs
</code>

** 4. Schreibberechtigung der JSON-Datei setzten**
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.

** 4.1 Winddows-Powershell**

<code>
# Entfernt das Schreibschutz-Attribut (R = Read-Only) von der Datei
attrib -r data.json
</code>

**4.2 MacOS**

<code>
# Gibt dem Besitzer (User) Lese- und Schreibrechte (rw-)
chmod 644 data.json

# Falls der ganze Ordner blockiert ist, rekursiv für alle Dateien freigeben:
chmod -R 755 

</code>








===== Lösungen =====
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