Zum Skriptum
Skriptum 08 · Übung Einzelarbeit 90 Minuten

PHP-Spiel mit Datenbank

Vibe Coding mit GitHub Copilot – du formulierst, Copilot baut

Mein Protokoll

Alle Eingaben werden automatisch in diesem Browser gespeichert und beim nächsten Öffnen wiederhergestellt.

Spielregeln für heute

Einzelarbeit

Jede/r arbeitet für sich. Kurzer Austausch okay, aber eigene Prompts.

Eigene Prompts

Die Prompts stehen nicht hier drin – ihr formuliert sie selbst.

Checkliste = Ziel

Erst wenn alle Punkte erfüllt sind, ist ein Schritt fertig.

Wenn Copilot beim ersten Versuch nicht das Richtige liefert: Prompt verfeinern. Genau das ist Vibe Coding.

Was ihr heute baut

MySQL-Datenbank

Fragen und Highscores werden in der Datenbank gespeichert

Quiz-Spiel

Multiple-Choice-Fragen, Punkte sammeln

Highscore-Tabelle

Ergebnisse in DB speichern und anzeigen

Ziel-Dateistruktur in htdocs/quiz/

quiz/
├── db.php        ← PDO-Verbindung zur Datenbank
├── index.php      ← Startseite, Name eingeben
├── frage.php      ← Frage anzeigen + Antwort verarbeiten
└── ergebnis.php   ← Score speichern + Highscore anzeigen
Vorbereitung

Datenbank in phpMyAdmin einrichten

kein Prompt nötig

Öffnet http://localhost/phpmyadmin, erstellt die Datenbank quiz_db und führt diesen SQL-Code aus:

setup.sql
CREATE TABLE fragen (
  id INT PRIMARY KEY AUTO_INCREMENT,
  frage TEXT NOT NULL,
  antwort_a VARCHAR(255),
  antwort_b VARCHAR(255),
  antwort_c VARCHAR(255),
  richtige_antwort CHAR(1) NOT NULL
);

CREATE TABLE highscores (
  id INT PRIMARY KEY AUTO_INCREMENT,
  name VARCHAR(100) NOT NULL,
  punkte INT NOT NULL,
  erstellt_am TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

INSERT INTO fragen (frage, antwort_a, antwort_b, antwort_c, richtige_antwort) VALUES
('Was bedeutet PHP?', 'Pretty Hypertext Page', 'PHP: Hypertext Preprocessor', 'Public HTML Protocol', 'b'),
('Welcher Port verwendet HTTP?', '21', '443', '80', 'c'),
('Was ist ein Cookie?', 'Ein Virus', 'Eine kleine Datei im Browser', 'Ein Datenbanktyp', 'b'),
('Was macht htmlspecialchars()?', 'HTML erzeugen', 'Groß-/Kleinschreibung ändern', 'Sonderzeichen für HTML sichern', 'c'),
('Was ist SQL?', 'Structured Query Language', 'Simple Queue List', 'System Query Logic', 'a');
Aufgabe 0

Copilot legt die Dateien an

Einstieg

Öffnet den Copilot Chat in VS Code (Ctrl+Shift+I) und formuliert einen Prompt, der alle vier Dateien als leere Gerüste erstellt.

Was euer Prompt erreichen soll

  • Copilot erstellt vier Dateien: db.php, index.php, frage.php, ergebnis.php
  • Jede Datei enthält ein PHP-Grundgerüst mit einem Kommentar, was dort noch gebaut werden muss
  • Alle Dateien kommen in den Ordner htdocs/quiz/

Checkliste

Aufgabe 1

Datenbankverbindung – db.php

Einfach

Diese Infos braucht Copilot von euch

Datenbanknamequiz_db Hostnamelocalhost Benutzerroot Passwort(leer – XAMPP-Standard) Variablenname$pdo MethodePDO mit Fehlerbehandlung

Was euer Prompt erreichen soll

  • db.php stellt eine PDO-Verbindung zur Datenbank her
  • Bei Fehler: verständliche Meldung + Skript beendet
  • Andere Dateien können require 'db.php' und direkt $pdo verwenden

Checkliste

Aufgabe 2

Startseite – index.php

Mittel

Was euer Prompt erreichen soll

  • Formular mit Textfeld für den Spielernamen
  • Nach dem Absenden: Session starten, Name + Fragenindex (0) + Punkte (0) in $_SESSION speichern
  • Automatische Weiterleitung zu frage.php

Tipp

Erkläre Copilot die Funktion session_start() und dass der Name in $_SESSION['name'] gespeichert werden soll. Erwähne header('Location: frage.php') als Weiterleitungsmethode.

Checkliste

Aufgabe 3

Quiz-Logik – frage.php

Kernaufgabe

Das ist die komplexeste Datei. Ihr werdet den Prompt vielleicht mehrfach verfeinern müssen.

Was euer Prompt erreichen soll

  • Aktuelle Frage per PDO aus fragen laden — basierend auf $_SESSION['frage_nr']
  • Drei Antworten als Radio-Buttons anzeigen
  • Nach Absenden: Antwort mit richtige_antwort vergleichen → ggf. $_SESSION['punkte'] erhöhen
  • $_SESSION['frage_nr'] erhöhen — wenn ≥ 5: Weiterleitung zu ergebnis.php
  • „Frage X von 5" oben anzeigen

Technische Details

DB-Verbindungrequire 'db.php' → $pdo SQLSELECT * FROM fragen LIMIT 1 OFFSET :nr Fragenindex$_SESSION['frage_nr'] (0-basiert) Richtige AntwortFeld 'richtige_antwort' ('a', 'b' oder 'c')

Tipp: Aufteilen hilft

Wenn das Ergebnis chaotisch ist: teilt die Aufgabe in zwei Prompts. Erst: „Lade die Frage und zeige sie an." Dann: „Verarbeite die Antwort und leite weiter." Das ist iteratives Prompting aus Skriptum 08.

Checkliste

Aufgabe 4

Ergebnis & Highscore – ergebnis.php

Datenbankziel

Was euer Prompt erreichen soll

  • Name und Punkte aus Session auslesen
  • Ergebnis per Prepared Statement in highscores speichern (Felder: name, punkte)
  • Top-10 aus highscores laden (ORDER BY punkte DESC) und als Tabelle anzeigen
  • „Herzlichen Glückwunsch [Name]! Du hast [X] von 5 Punkten erreicht."
  • Link zurück zu index.php

Checkliste

Kurze Reflexion

2–3 Sätze pro Frage reichen.

Bonus — für wer fertig ist

Eigenes Thema

Copilot 5 neue Fragen zu einem Thema eurer Wahl generieren lassen (als SQL INSERT) und in phpMyAdmin einfügen.

Design

Copilot das Quiz mit CSS oder Tailwind CDN optisch aufwerten lassen. Beschreibt den Stil im Prompt.

Feedback nach jeder Antwort

„Richtig! ✅" oder „Leider falsch. Die Antwort war …" — dann erst weiter zur nächsten Frage.

Timer

15 Sekunden pro Frage. Läuft die Zeit ab → automatisch falsche Antwort. JavaScript + PHP.

DW2 · Übung 08 · Vibe Coding – PHP-Spiel mit Datenbank · Einzelarbeit
Noch nichts gespeichert