1) Gesamtprozess Schritt für Schritt

1. Nutzerin oder Nutzer sieht und nutzt ein HTML-Formular im Browser.
2. Das Formular ist die sichtbare Eingabeschnittstelle und erfasst Eingaben strukturiert über Felder.
3. JavaScript kann die Eingabe im Browser auslesen, prüfen und den Ablauf steuern.
4. Das Formular bzw. die Anfrage übermittelt die Daten an ein PHP-Skript auf dem Webspace.
5. PHP verarbeitet die Anfrage serverseitig und bereitet den Datenbankzugriff vor.
6. PHP kommuniziert mit der Datenbank (z. B. INSERT oder SELECT).
7. Die Datenbank speichert Daten oder liefert Treffer zurück.
8. PHP erzeugt daraus HTML bzw. JSON für die Rückmeldung.
9. Der Browser zeigt das Ergebnis als aktualisierte HTML-Ausgabe an.

1a) Sequenzdiagramme für die Kernabläufe in Q2.3

Die folgenden Sequenzdiagramme machen die Rollen und Zeitreihenfolge zwischen Frontend, Backend und Datenbank explizit. So bleibt erkennbar, an welcher Stelle Daten gelesen, geprüft oder geschrieben werden.

Login-Prozess

Datenabfrage

Datenspeicherung

Alle drei Diagramme verwenden dieselbe Diagrammlogik: Anfrage nach rechts, Rückmeldung nach links. Dadurch lassen sich Varianten wie Fehlerfälle oder Validierungsschritte gezielt ergänzen.

2) Warum Formulare hier zentral sind

In Q2.3 wird die aus E2 bekannte Formularlogik zur ersten operativen Schnittstelle des Webdatenbankprojekts: Formulare verbinden die sichtbare Oberfläche mit Verarbeitung und Datenfluss.

HTML liefert dafür Struktur, Navigation und Eingabefelder. JavaScript und PHP bauen darauf auf, aber die fachlich direkte Nutzerschnittstelle bleibt das Formular im Browser.

3) Infrastruktur vs. Anwendungslogik

• Infrastruktur: Datenbankzugang sowie FTP-/Webspace-Zugang schaffen die technische Arbeitsumgebung.
• Anwendungslogik: HTML, CSS, Formulare, JavaScript, PHP und Datenbankfluss bilden den eigentlichen Ablauf der Anwendung.

Deshalb greifen die Inhalte auf dieser Seite direkt die Grundlagen aus E2 auf: Dort entsteht die Eingabestruktur, hier wird sie zu einer vollständigen Webdatenbankanwendung erweitert.

A) JavaScript im Browser: Rolle auf Basis von HTML

JavaScript läuft im Browser (Client), aber nicht losgelöst: Es arbeitet auf Basis der HTML-Struktur. Im Webdatenbankprojekt greift JavaScript auf Formularfelder, Buttons und Ausgabebereiche zu, reagiert auf Eingaben/Klicks und steuert so den Ablauf im Browser.

B) Grundsyntax I: Variablen, Werte und Ausdrücke

Für Q2.3 reichen klare Grundbausteine: const für feste Zuordnung, let für veränderliche Werte und einfache Ausdrücke.

const kurs = 'Q2.3';
let treffer = 0;

const meldung = 'Aktives Modul: ' + kurs;
treffer = treffer + 1;

C) Grundsyntax II: Objekte, Funktionen und Bedingungen

Objekte bündeln zusammengehörige Daten. Funktionen kapseln Abläufe. Bedingungen steuern Entscheidungen im Code.

const anfrage = {
  suchbegriff: 'SQL',
  seite: 1
};

function baueStatus(text) {
  if (text === '') {
    return 'Bitte Eingabe ergänzen.';
  }
  return 'Suche läuft: ' + text;
}

D) Übergang zur Projektlogik

Diese Grundelemente werden im Webdatenbankprojekt nicht isoliert verwendet, sondern in einer festen Ablaufstruktur.

E) DOM und Events konkret nutzen

Zuerst werden HTML-Elemente über IDs ausgewählt. Danach reagiert ein Button auf Klick. So wird sichtbar: HTML stellt die Struktur bereit, JavaScript macht Formularabläufe dynamisch.

const suchfeld = document.getElementById('suchfeld');
const sucheBtn = document.getElementById('sucheBtn');
const ausgabe = document.getElementById('ergebnis');

sucheBtn.addEventListener('click', starteSuche);

F) Eingaben lesen und validieren

Vor jeder Serveranfrage wird die Eingabe geprüft. Dadurch werden typische Fehler (z. B. leere Eingabe) direkt im Browser abgefangen.

function leseSuchbegriff() {
  const suchbegriff = suchfeld.value.trim();

  if (suchbegriff === '') {
    ausgabe.textContent = 'Bitte einen Suchbegriff eingeben.';
    return null;
  }

  return suchbegriff;
}

G) fetch() als Kern der Serverkommunikation

JavaScript kann nicht direkt auf MySQL zugreifen. Deshalb sendet das Frontend eine Anfrage an einen PHP-Endpunkt. Die Daten werden als JSON übertragen.

function sendeAnfrage(suchbegriff) {
  return fetch('api-buchsuche.php', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ suchbegriff: suchbegriff })
  });
}

H) Antwort verarbeiten, UI aktualisieren, Fehler behandeln

Die Serverantwort wird mit response.json() gelesen und danach in der Oberfläche angezeigt. Fehlerfälle werden für Nutzer sichtbar rückgemeldet.

async function starteSuche() {
  const suchbegriff = leseSuchbegriff();
  if (suchbegriff === null) {
    return;
  }

  try {
    const response = await sendeAnfrage(suchbegriff);

    if (!response.ok) {
      throw new Error('Serverantwort nicht ok');
    }

    const data = await response.json();

    if (!data.rows || data.rows.length === 0) {
      ausgabe.textContent = 'Keine passenden Ergebnisse gefunden.';
      return;
    }

    ausgabe.innerHTML = data.rows
      .map((row) => `<li>${row.titel}</li>`)
      .join('');
  } catch (error) {
    ausgabe.textContent = 'Die Anfrage ist fehlgeschlagen. Bitte erneut versuchen.';
  }
}

I) Zusammenspiel mit PHP und SQL (Systemblick)

Arbeitsgrundlage und Vertiefung

Für Syntax und APIs nutzt ihr die MDN-Dokumentation zu JavaScript und die MDN-Übersicht zur Fetch-API. Für Datenmodell und Abfragen bleibt Q2.2 (SQL) die fachliche Grundlage.

A) PHP als Sprache des Servers

Nach der clientseitigen Steuerung im Browser übernimmt PHP die serverseitige Verarbeitung. Der Browser sendet eine Anfrage, der Server führt PHP-Code aus und sendet eine Antwort zurück. In Q2.3 verbindet PHP damit Formularanfrage, SQL-Verarbeitung und Ausgabe.

B) Grundsyntax I: Einstieg, Variablen, Strings

Ein PHP-Skript beginnt mit <?php. Variablen starten mit $. Für Q2.3 reichen einfache, gut lesbare Grundlagen.

<?php
$kurs = 'Q2.3';
$modul = 'Webdatenbankprojekt';

echo 'Aktives Modul: ' . $kurs . ' - ' . $modul;

C) Grundsyntax II: Arrays, Bedingungen, Funktionen

Arrays bündeln Daten, Bedingungen steuern Entscheidungen und Funktionen kapseln wiederkehrende Abläufe.

<?php
$eingabe = [
    'suchbegriff' => 'SQL',
    'seite' => 1
];

function baueMeldung(string $text): string {
    if ($text === '') {
        return 'Bitte Eingabe ergänzen.';
    }
    return 'Suche läuft: ' . $text;
}

D) Übergang zur Projektlogik

Diese Sprachelemente werden im Webdatenbankprojekt nicht isoliert verwendet, sondern in einem konkreten serverseitigen Ablauf.

E) Request und Response konkret

Der Browser sendet Daten, PHP empfängt sie, verarbeitet sie und gibt eine strukturierte Antwort zurück. So entsteht die serverseitige Hälfte des gleichen Ablaufs wie in der JavaScript-Sektion.

<?php
header('Content-Type: application/json; charset=utf-8');

if (($_SERVER['REQUEST_METHOD'] ?? 'GET') !== 'POST') {
    http_response_code(405);
    echo json_encode(['success' => false, 'message' => 'Nur POST erlaubt.']);
    exit;
}

F) JSON lesen, validieren, Antwort erzeugen

JSON ist die gemeinsame Schnittstelle zu JavaScript: PHP liest den Roh-Request, dekodiert JSON, validiert Eingaben und liefert wieder JSON zurück.

<?php
$raw = file_get_contents('php://input');
$data = json_decode($raw ?: '', true);

$suchbegriff = trim((string)($data['suchbegriff'] ?? ''));
if ($suchbegriff === '') {
    http_response_code(400);
    echo json_encode(['success' => false, 'message' => 'Bitte Suchbegriff angeben.']);
    exit;
}

echo json_encode([
    'success' => true,
    'rows' => [
        ['titel' => 'SQL Grundlagen'],
        ['titel' => 'PHP und MySQL']
    ]
]);

G) Datenbankzugriff vorbereiten (projektnah und abstrahiert)

Im realen Ablauf folgt nach der Validierung die vorbereitete SQL-Abfrage. Eingaben werden als Parameter gebunden, nicht direkt in SQL-Strings eingebaut.

<?php
$sql = 'SELECT titel FROM buch WHERE titel LIKE :suche';
$stmt = $pdo->prepare($sql);
$stmt->execute([
    'suche' => '%' . $suchbegriff . '%'
]);

$rows = $stmt->fetchAll(PDO::FETCH_ASSOC);

H) Zusammenspiel mit JavaScript und SQL (Systemblick)

Arbeitsgrundlage und Vertiefung

Für Sprachelemente, Request-Variablen, JSON-Funktionen und Datenbankzugriffe nutzt ihr das PHP-Manual. Für die passende Client-Perspektive vergleicht ihr direkt die JavaScript-Sektion derselben Seite.