📧 Kontaktformular

🎯 1. Ziel dieser Aufgabe

Du erstellst ein sicheres Kontaktformular, das:

• Eingaben validiert (Name, E-Mail, Nachricht)
• Daten in einer Datenbank speichert
• Eine Bestätigungsseite anzeigt
• Gegen Angriffe geschützt ist

Du kannst wählen: PHP mit XAMPP oder Node.js mit Express.

🛠️ 2. Vorbereitung

• Erstelle einen eigenen Projektordner:
  - PHP: C:\xampp\htdocs\schueler-max\kontakt\
  - Node.js: C:\NodeJS\schueler-max\kontakt\
• Richte eine Datenbank kontakt_db in phpMyAdmin ein (auch für Node.js!)
• Lege eine Tabelle nachrichten an mit:
  id (INT, AI, PK), name (VARCHAR 100), email (VARCHAR 150), nachricht (TEXT)

📝 3. Anforderungen

Das Formular muss enthalten:

• Name (Pflicht, min. 2 Zeichen)
• E-Mail (Pflicht, gültiges Format)
• Nachricht (Pflicht, min. 10 Zeichen)
• Absende-Button

Das Backend muss:

• Eingaben serverseitig prüfen
• Mit Prepared Statements in die Datenbank speichern
• Fehler anzeigen (z. B. „Ungültige E-Mail“)
• Bei Erfolg eine Bestätigungsseite zeigen

🔒 4. Sicherheitsanforderungen

• ✅ Keine direkte Einbettung von Benutzereingaben in SQL
• ✅ Immer htmlspecialchars() (PHP) oder Escaping (Node.js) bei Ausgabe
• ✅ UTF-8 überall (Datenbank, Verbindung, HTML)
• ❌ Keine Passwörter oder sensible Daten im Code

🧠 5. KI-Prompt-Training

Aufgabe: Beantworte auf Papier:

1. Warum reicht clientseitige Validierung nicht aus?
2. Was passiert, wenn du Prepared Statements vergisst?
3. Wie würdest du einem Anfänger erklären, warum Sicherheit wichtig ist?

Danach formuliere einen Prompt, mit dem du KI um Hilfe bitten würdest, um zu entscheiden, ob du für dieses Projekt PHP oder Node.js verwenden solltest.

✅ 6. Abgabe

Lade folgende Dateien in deinen OneDrive-Ordner hoch:

• Alle HTML-, CSS-, JS- und Backend-Dateien
• package.json (bei Node.js)
• Screenshot der Datenbank mit mindestens 2 Einträgen
• Screenshot der Bestätigungsseite
• Screenshot einer Fehlermeldung

Erstelle einen Freigabelink auf den gesamten Ordner und gib ihn in Moodle ab.