Implemented labor 11

web/09/labor/loesungen/0102/go.mod

@@ -0,0 +1,5 @@
+module uebung04
+
+go 1.24.5
+
+require github.com/lib/pq v1.10.9

web/09/labor/loesungen/0102/go.sum

@@ -0,0 +1,2 @@
+github.com/lib/pq v1.10.9 h1:YXG7RB+JIjhP29X+OtkiDnYaXQwpS4JEWq7dtCCRUEw=
+github.com/lib/pq v1.10.9/go.mod h1:AlVN5x4E4T544tWzH6hKfbfQvm3HdbOxrmggDNAPY9o=

web/09/labor/loesungen/0102/uebung0102.go

@@ -0,0 +1,177 @@
+package main
+
+import (
+	"database/sql"
+	"fmt"
+	"log"
+	"net/http"
+	"strconv"
+	"strings"
+
+	_ "github.com/lib/pq"
+)
+
+func insertToDB(w http.ResponseWriter, r *http.Request) {
+
+	w.Header().Set("Access-Control-Allow-Origin", "*")
+	w.Header().Set("Access-Control-Allow-Methods", "GET, POST, OPTIONS")
+	w.Header().Set("Access-Control-Allow-Headers", "Content-Type")
+
+	if r.Method == "OPTIONS" {
+		w.WriteHeader(http.StatusNoContent)
+		return
+	}
+
+	if r.Method != http.MethodPost {
+		http.Error(w, "Nur POST-Methode erlaubt.", http.StatusMethodNotAllowed)
+		return
+	}
+
+	err := r.ParseForm()
+	if err != nil {
+		http.Error(w, "Fehler beim Parsen des Formulars", http.StatusBadRequest)
+		return
+	}
+
+	if len(r.PostForm) == 0 {
+		http.Error(w, "Kein POST-Formular gesendet", http.StatusBadRequest)
+		return
+	}
+
+	name := r.PostForm.Get("name")
+	hobbies := r.PostForm["hobby"]
+	// Umwandlung in einen String mit Komma-Trennung
+	hobbiesAsString := strings.Join(hobbies, ", ")
+	alter, err := strconv.Atoi(r.PostForm.Get("alter"))
+	if err != nil {
+		log.Println("Parameter konnte nicht korrekt verarbeitet werden:", err)
+		http.Error(w, "Benutzereingabe fehlerhaft.", http.StatusBadRequest)
+		return
+	}
+
+	// Verbindungszeichenfolge: Benutzername, Passwort, DB-Name, Host, Port
+	connStr := "user=devuser password=devpass dbname=devdb host=localhost port=5432 sslmode=disable"
+
+	// Verbindung zur Datenbank öffnen
+	db, err := sql.Open("postgres", connStr)
+	if err != nil {
+		log.Println("Fehler beim Öffnen der Verbindung:", err)
+		http.Error(w, "Interner Server-Fehler.", http.StatusInternalServerError)
+		return
+	}
+	defer db.Close()
+
+	// Verbindung testen
+	err = db.Ping()
+	if err != nil {
+		log.Println("Datenbank nicht erreichbar:", err)
+		http.Error(w, "Interner Server-Fehler.", http.StatusInternalServerError)
+		return
+	}
+	log.Println("Verbindung erfolgreich hergestellt.")
+
+	// INSERT-Anweisung vorbereiten
+	query := `INSERT INTO personen (name, hobbies, alter) VALUES ($1, $2, $3)`
+	// INSERT-Anweisung ausführen
+	_, err = db.Exec(query, name, hobbiesAsString, alter)
+	if err != nil {
+		log.Println("Fehler beim Einfügen:", err)
+		http.Error(w, "Datensatz konnte nicht gespeichert werden.", http.StatusInternalServerError)
+		return
+	}
+	log.Println("Datensatz erfolgreich eingefügt.")
+
+	fmt.Fprintln(w, "Ihre Hobbies wurden erfolgreich gespeichert.")
+}
+
+func updateInDB(w http.ResponseWriter, r *http.Request) {
+
+	w.Header().Set("Access-Control-Allow-Origin", "*")
+	w.Header().Set("Access-Control-Allow-Methods", "GET, POST, OPTIONS")
+	w.Header().Set("Access-Control-Allow-Headers", "Content-Type")
+
+	if r.Method == "OPTIONS" {
+		w.WriteHeader(http.StatusNoContent)
+		return
+	}
+
+	if r.Method != http.MethodPost {
+		http.Error(w, "Nur POST-Methode erlaubt.", http.StatusMethodNotAllowed)
+		return
+	}
+
+	err := r.ParseForm()
+	if err != nil {
+		http.Error(w, "Fehler beim Parsen des Formulars", http.StatusBadRequest)
+		return
+	}
+
+	if len(r.PostForm) == 0 {
+		http.Error(w, "Kein POST-Formular gesendet", http.StatusBadRequest)
+		return
+	}
+
+	name := r.PostForm.Get("name")
+	hobbies := r.PostForm["hobby"]
+	// Umwandlung in einen String mit Komma-Trennung
+	hobbiesAsString := strings.Join(hobbies, ", ")
+	alter, err := strconv.Atoi(r.PostForm.Get("alter"))
+	if err != nil {
+		log.Println("Parameter konnte nicht korrekt verarbeitet werden:", err)
+		http.Error(w, "Benutzereingabe fehlerhaft.", http.StatusBadRequest)
+		return
+	}
+
+	// Verbindungszeichenfolge: Benutzername, Passwort, DB-Name, Host, Port
+	connStr := "user=devuser password=devpass dbname=devdb host=localhost port=5432 sslmode=disable"
+
+	// Verbindung zur Datenbank öffnen
+	db, err := sql.Open("postgres", connStr)
+	if err != nil {
+		log.Println("Fehler beim Öffnen der Verbindung:", err)
+		http.Error(w, "Interner Server-Fehler.", http.StatusInternalServerError)
+		return
+	}
+	defer db.Close()
+
+	// Verbindung testen
+	err = db.Ping()
+	if err != nil {
+		log.Println("Datenbank nicht erreichbar:", err)
+		http.Error(w, "Interner Server-Fehler.", http.StatusInternalServerError)
+		return
+	}
+	log.Println("Verbindung erfolgreich hergestellt.")
+
+	// UPDATE-Anweisung vorbereiten
+	query := `UPDATE personen SET hobbies = $1, alter = $2 WHERE name = $3`
+	// UPDATE-Anweisung ausführen
+	result, err := db.Exec(query, hobbiesAsString, alter, name)
+	if err != nil {
+		log.Println("Fehler beim Aktualisieren:", err)
+		http.Error(w, "Datensatz konnte nicht aktualisiert werden.", http.StatusInternalServerError)
+		return
+	}
+	// Prüfen, wie viele Zeilen angepasst wurden
+	rows, err := result.RowsAffected()
+	if err != nil {
+		log.Println("Fehler beim Prüfen der angepassten Zeilen:", err)
+		http.Error(w, "Datensatz konnte nicht aktualisiert werden.", http.StatusInternalServerError)
+		return
+	}
+	if rows == 0 {
+		log.Println("Kein Datensatz mit diesem Namen gefunden.")
+		http.Error(w, "Datensatz konnte nicht aktualisiert werden.", http.StatusInternalServerError)
+		return
+	}
+	log.Println("Datensatz erfolgreich aktualisiert.")
+
+	fmt.Fprintln(w, "Ihre Hobbies wurden erfolgreich aktualisiert.")
+}
+
+func main() {
+	http.HandleFunc("/insert", insertToDB)
+	http.HandleFunc("/update", updateInDB)
+	fmt.Println("Server läuft auf localhost:8080...")
+	log.Fatal(http.ListenAndServe(":8080", nil))
+}

web/09/labor/loesungen/0102/uebung0102.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Hobbies</title>
+</head>
+
+<body>
+	<h1>Hobbies</h1>
+	<form method="post">
+		<label for="name">Vorname: </label>
+		<input type="text" name="name" id="name">
+		<label for="alter">Alter: </label>
+		<input type="number" name="alter" id="alter" min="0" max="99"><br><br>
+		<label for="hobby">Hobbies: </label>
+		<select name="hobby" id="hobby" multiple size="6">
+			<option value="Kochen">Kochen</option>
+			<option value="Fussball">Fußball</option>
+			<option value="Wandern">Wandern</option>
+			<option value="Laufen">Laufen</option>
+			<option value="Lesen">Lesen</option>
+			<option value="Stricken">Stricken</option>
+		</select>
+		<br>
+		<br>
+		<input type="submit" formaction="http://localhost:8080/insert" value="Einfügen">
+		<input type="submit" formaction="http://localhost:8080/update" value="Anpassen">
+	</form>
+</body>
+
+</html>

web/10/labor/loesungen/uebung01.js

@@ -0,0 +1,10 @@
+const zahlen = [38, 0, 226, 384, 111, 500383];
+
+for (let i = 0; i < zahlen.length; i++) {
+  const z = zahlen[i];
+  const ergebnis = (z === 0) 
+    ? "Null" 
+    : (z % 2 === 0 ? "Gerade Zahl" : "Ungerade Zahl");
+  
+  console.log(z, ": ", ergebnis);
+}

web/10/labor/loesungen/uebung02.js

@@ -0,0 +1,17 @@
+const sortiment = JSON.parse(
+`[{ "produkt": "Joghurt", "preis": 2.49 },
+  { "produkt": "Brot",    "preis": 3.29 },
+  { "produkt": "Käse",    "preis": 8.99 },
+  { "produkt": "Duschgel","preis": 2.79 }
+]`);
+
+const rabattiert = sortiment.map(
+	x => (
+		{
+		produkt: x.produkt,
+		preis:  parseFloat((x.preis * 0.9).toFixed(2))
+	}
+)
+);
+
+console.log(rabattiert);

web/11/demos/01_events.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="de">
+
+<head>
+	<meta charset="UTF-8">
+	<title>Events</title>
+</head>
+
+<body>
+	<button id="klickButton">Klick mich!</button>
+	<p id="ausgabe">Noch nichts passiert...</p>
+
+	<input type="text" id="eingabe" placeholder="Tippe etwas ein">
+	<p id="eingabeAusgabe"></p>
+
+	<script src="01_events.js"></script>
+</body>
+
+</html>

web/11/demos/01_events.js

@@ -0,0 +1,20 @@
+// Button-Click-Event
+const button = document.getElementById("klickButton");
+const ausgabe = document.getElementById("ausgabe");
+
+button.addEventListener("click", () => {
+	ausgabe.textContent = "Button wurde geklickt!";
+});
+
+// Input-Event
+const eingabe = document.getElementById("eingabe");
+const eingabeAusgabe = document.getElementById("eingabeAusgabe");
+
+eingabe.addEventListener("input", () => {
+	eingabeAusgabe.textContent = "Du hast eingegeben: " + eingabe.value;
+});
+
+// Mouseover-Event
+button.addEventListener("mouseover", () => {
+	ausgabe.textContent = "Maus über dem Button!";
+});

web/11/demos/02_validierung.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>Formularvalidierung mit Live-Feedback</title>
+</head>
+<body>
+  <h1>Registrierung</h1>
+
+  <form id="contactForm" novalidate>
+    <label for="username">Benutzername:</label>
+    <input type="text" id="username" name="username" required>
+    <span id="usernameError"></span>
+    <br><br>
+
+    <label for="email">E-Mail:</label>
+    <input type="email" id="email" name="email" required>
+    <span id="emailError"></span>
+    <br><br>
+
+    <label for="age">Alter:</label>
+    <input type="number" id="age" name="age" min="18" max="99" required>
+    <span id="ageError"></span>
+    <br><br>
+
+    <button type="submit">Absenden</button>
+  </form>
+
+  <script src="02_validierung.js"></script>
+</body>
+</html>

web/11/demos/02_validierung.js

@@ -0,0 +1,78 @@
+document.addEventListener("DOMContentLoaded", () => {
+  const form = document.getElementById("contactForm");
+
+  const username = document.getElementById("username");
+  const email = document.getElementById("email");
+  const age = document.getElementById("age");
+
+  const usernameError = document.getElementById("usernameError");
+  const emailError = document.getElementById("emailError");
+  const ageError = document.getElementById("ageError");
+
+//   // --- Live-Feedback ---
+  username.addEventListener("input", () => {
+    const value = username.value.trim().toLowerCase();
+    if (!value) {
+      usernameError.textContent = "Benutzername darf nicht leer sein.";
+    } else if (value === "admin") {
+      usernameError.textContent = "Der Benutzername 'admin' ist nicht erlaubt.";
+    } else {
+      usernameError.textContent = "";
+    }
+  });
+
+  email.addEventListener("input", () => {
+    if (!email.validity.valid) {
+      emailError.textContent = "Bitte eine gültige E-Mail-Adresse eingeben.";
+    } else {
+      emailError.textContent = "";
+    }
+  });
+
+  age.addEventListener("input", () => {
+    if (!age.validity.valid) {
+      if (age.validity.valueMissing) {
+        ageError.textContent = "Bitte das Alter angeben.";
+      } else if (age.validity.rangeUnderflow) {
+        ageError.textContent = "Du musst mindestens 18 Jahre alt sein.";
+      } else if (age.validity.rangeOverflow) {
+        ageError.textContent = "Das Alter darf 99 nicht überschreiten.";
+      } else {
+        ageError.textContent = "Ungültige Eingabe.";
+      }
+    } else {
+      ageError.textContent = "";
+    }
+  });
+
+  // --- Prüfung beim Absenden ---
+  form.addEventListener("submit", (event) => {
+    let valid = true;
+
+    // Benutzername prüfen
+    const value = username.value.trim().toLowerCase();
+    if (!value) {
+      usernameError.textContent = "Benutzername darf nicht leer sein.";
+      valid = false;
+    } else if (value === "admin") {
+      usernameError.textContent = "Der Benutzername 'admin' ist nicht erlaubt.";
+      valid = false;
+    }
+
+    // E-Mail prüfen
+    if (!email.validity.valid) {
+      emailError.textContent = "Bitte eine gültige E-Mail-Adresse eingeben.";
+      valid = false;
+    }
+
+    // Alter prüfen
+    if (!age.validity.valid) {
+      ageError.textContent = "Bitte ein gültiges Alter zwischen 18 und 99 eingeben.";
+      valid = false;
+    }
+
+    if (!valid) {
+      event.preventDefault(); // verhindert das Absenden
+    }
+  });
+});

web/11/eigene_loesungen/Aufgabe_01.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+</head>
+<body>  
+    <div id="Anzeige">
+        <h1>Endlich Pfingsferien!</h1>
+        <button id="StartButton">Ferien Starten 🌞</button>   
+    </div>
+
+    <script>
+        const button = document.getElementById("StartButton");
+        const ausgabe = document.getElementById("Anzeige");
+        const html = "<h1>Schöne und erholsame Pfingstferien!</h1> <br> <img src=\"../labor/Pfingstrose.jpg\" alt=\"Bild von einer Pfingstrose\" height=\"200px\"></img>";
+        button.addEventListener("click", () => {ausgabe.innerHTML = html;});
+    </script>
+    
+</body>
+</html>

web/11/eigene_loesungen/Aufgabe_02.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="de">
+
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Paw Patrol - Helfer auf vier Pfoten</title>
+</head>
+
+<body>
+	<h1>Lieblings-Fellfreund</h1>
+	<form id="pawFormular">
+		<label for="name">Gib hier den Namen ein: </label>
+		<input type="text" id="name" name="fellfreund">
+		<button type="submit">Spruch ausgeben</button>
+	</form>
+	<p id="meldung"></p>
+	<h2 id="spruch"></h2>
+
+	<script src="uebung02.js"></script>
+</body>
+
+</html>

web/11/eigene_loesungen/uebung02.js

@@ -0,0 +1,39 @@
+var dict = new Map();
+
+dict.set("chase","Chase ist auf Spur!")
+dict.set("marshall","Ich bin startklar!")
+dict.set("skye","Diese Pfote hebt ab!")
+dict.set("rocky","Wegwerfen? Kommt nicht in die Tüte!")
+dict.set("rubble","Rubble ist zur Stelle!")
+dict.set("zuma","Los geht’s ins Wasser!")
+dict.set("everest","Eis und Schnee – ich bin bereit!")
+dict.set("tracker","Ich höre alles!")
+
+const formular = document.getElementById("pawFormular")
+const meldung = document.getElementById("meldung")
+const spruch = document.getElementById("spruch")
+const input = document.getElementById("name")
+
+formular.addEventListener("submit",(event) => {
+    event.preventDefault();
+
+    meldung.textContent = ""
+    spruch.textContent = ""
+
+    const name = input.value.trim().toLowerCase();
+
+    if(name == ""){
+        meldung.textContent = "Kein Name eingegeben.";
+    }
+
+    spruch_text = dict.get(name);
+
+    if(spruch_text == null){
+        meldung.textContent = "Paw-Patrol Name nicht gefunden.";
+    }else{
+        spruch.textContent = spruch_text;
+    }
+
+
+
+})

web/11/labor/11_aufgaben.md

@@ -0,0 +1,41 @@
+# Übungsblatt 11
+
+## 1. Javascript-Übung: DOM und Events
+
+**Aufgabenstellung**: Erstellen Sie eine interaktive Webseite, die ein Bild zum Start der Pfingstferien anzeigt.
+
+#### Arbeitsschritte
+
+1. Erstellen Sie zunächst eine HTML-Seite mit der Überschrift (erste Ebene): "Endlich Pfingstferien!".
+2. Darunter ist ein Button-Element mit der Aufschrift "Ferien starten 🌞".
+3. Sobald der Button geklickt wurde:
+	1. wird die alte Überschrift durch diese ersetzt: "Schöne und erholsame Pfingstferien!"
+	2. erscheint diese [Bild](Pfingstrose.jpg) unterhalb der Überschrift (*Tipp*: [w3schools.com: Image](https://www.w3schools.com/jsref/prop_img_src.asp))
+	3. der Button verschwindet
+	
+All dies soll in einem Javascript-Programm gesteuert werden, dass Sie in Ihre HTML-Seite einbinden.
+
+## 2. Javascript-Übung: Validierung und Events
+
+**Aufgabenstellung**: Erstellen Sie eine interaktive Webseite, in der Nutzer:innen den Namen ihres Lieblingshelden der [Paw‑Patrol](https://de.wikipedia.org/wiki/PAW_Patrol) eingeben können und daraufhin einen passenden Spruch angezeigt bekommen.
+
+#### Arbeitsschritte
+
+1. Verwenden Sie dazu das vorgebene HTML-Formular [pawpatrol.html](pawpatrol.html).
+2. Erstellen Sie eine zugehörige JavaScript‑Datei, in der Sie ein Objekt mit den erlaubten Figuren und deren typischen Sprüchen hinterlegen:
+
+```
+"Chase": "Chase ist auf Spur!"
+"Marshall": "Ich bin startklar!"
+"Skye": "Diese Pfote hebt ab!"
+"Rocky": "Wegwerfen? Kommt nicht in die Tüte!"
+"Rubble": "Rubble ist zur Stelle!"
+"Zuma": "Los geht’s ins Wasser!"
+"Everest": "Eis und Schnee – ich bin bereit!"
+"Tracker": "Ich höre alles!"
+```
+
+3. Bei Absenden des Formulars (`submit`) prüfen Sie mit Ihrem JavaScript, ob der eingegebene Name mit einem der Namen aus dem Objekt übereinstimmt. 
+	- Falls *ja*, geben Sie eine Bestätigungsmeldung in Abschnitt mit `id="meldung"` sowie den passenden Spruch der Figur in dem Abschnitt mit `id="spruch"` aus.
+	- Falls *nein*, erscheint eine Fehlermeldung im Abschnitt mit `id="meldung"`, die darauf hinweist, dass nur Paw‑Patrol‑Namen erlaubt sind.
+4. Testen Sie Ihr Javascript mit Hilfe des vorgegebenen HTML-Formulars.

web/11/labor/pawpatrol.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="de">
+
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Paw Patrol - Helfer auf vier Pfoten</title>
+</head>
+
+<body>
+	<h1>Lieblings-Fellfreund</h1>
+	<form id="pawFormular">
+		<label for="name">Gib hier den Namen ein: </label>
+		<input type="text" id="name" name="fellfreund">
+		<button type="submit">Spruch ausgeben</button>
+	</form>
+	<p id="meldung"></p>
+	<h2 id="spruch"></h2>
+
+	<script src="uebung02.js"></script>
+</body>
+
+</html>