Frontend → PHP → SQLite

Heute verbinden wir zum ersten Mal Frontend, Backend und Datenbank.

Das grosse Bild

HTML
Formular
JavaScript
fetch()
PHP
verarbeitet
SQLite
speichert
JSON / HTML
zurück
HTML sammelt Daten · JavaScript transportiert Daten · PHP verarbeitet Daten · SQLite speichert Daten.

1. ERM planen

Beispiel: Kontaktanfrage

KONTAKTANFRAGE
────────────────
PK id
   name
   email
   betreff
   nachricht
   erstellt_am

Merksatz

ERM = Plan.

Überlege zuerst: Was will ich speichern?

Für den Einstieg reicht eine Entität mit 4–7 Attributen.

2. schema.sql schreiben

CREATE TABLE kontaktanfragen (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    name TEXT NOT NULL,
    email TEXT NOT NULL,
    betreff TEXT,
    nachricht TEXT NOT NULL,
    erstellt_am DATETIME DEFAULT CURRENT_TIMESTAMP
);
ERM sagt, was gespeichert wird. CREATE TABLE sagt SQLite, wie es gespeichert wird.

3. SQLite-Datei erstellen

1

VS Code Extension

Installiere Database Editor von Nicholas Griffin.

2

Datenbank erstellen

Cmd/Ctrl + Shift + P

Database Editor: New SQLite Database

Datei z. B. database.sqlite nennen.

3

SQL ausführen

In der Extension den SQL Workspace öffnen.

Inhalt aus schema.sql einfügen und ausführen.

4

Kontrollieren

Die Tabelle erscheint jetzt direkt in der SQLite-Datenbank.

4. Projektaufbau

projekt/
├── index.html
├── script.js
├── api.php
├── schema.sql
└── database.sqlite

5. Frontend → PHP

JavaScript schickt die Formulardaten an PHP:

const formData = new FormData(form);

fetch("api.php", {
    method: "POST",
    body: formData
});

6. PHP → SQLite

PHP verbindet sich mit SQLite:

$db = new PDO("sqlite:database.sqlite");

$stmt = $db->prepare("
    INSERT INTO kontaktanfragen
    (name, email, betreff, nachricht)
    VALUES (?, ?, ?, ?)
");

$stmt->execute([$name, $email, $betreff, $nachricht]);

7. Lokal starten

Im VS-Code-Terminal im Projektordner:

php -S localhost:8000

Danach im Browser:

http://localhost:8000

Auftrag am Nachmittag

Ideen: Games, Filme, Bücher, Rezepte, Aufgaben, Produkte oder Events.