SQL-Editoren

Lade einmal eine .db-Datei hoch, Schüler fragen sie den Rest des Semesters ab. SQL läuft im Browser über SQLite-auf-WebAssembly — keine gemeinsame Datenbank, die kaputtgehen kann, keine Rate-Limits, kein "der Server ist schon wieder down".

Jeder Schüler bekommt seine eigene private Kopie der Datenbank, frisch bei jedem Seitenaufruf. Er kann DROP TABLE ausführen, wenn er will — nichts, was er tut, betrifft dich oder sonst jemanden.


Einen SQL-Editor einbetten

Lade eine .db- oder .sqlite-Datei in die Dateien deines Skripts (Drag-and-Drop in den Editor funktioniert), dann referenziere sie:

```sql editor db="netflix.db"
SELECT title, release_date
FROM tv_show
ORDER BY release_date DESC
LIMIT 10;
```

Schüler sehen die Query links im Editor, die Ergebnistabelle rechts, sobald sie auf Run klicken.

Der Editor unterstützt:

  • Mehrere Ergebnismengen (mehrere SELECTs ausführen, mehrere Tabellen erhalten)
  • Anzeige der Ausführungszeit
  • Warnung "Keine Zeilen zurückgegeben" bei leeren Queries
  • Mehrzeilige Queries mit Kommentaren

HTML-Syntax

<code-editor data-language="sql" data-db="netflix.db" data-code="SELECT * FROM tv_show LIMIT 10"></code-editor>

Standard-LIMIT

Eduskript hängt automatisch LIMIT 100 an jedes SELECT an, das noch keine LIMIT-Klausel hat — verhindert, dass die Ergebnistabelle explodiert, wenn ein Schüler SELECT * FROM huge_table ausführt. Schüler können das mit einem eigenen LIMIT überschreiben.


Eine Datenbank einrichten

Verwende ein beliebiges SQLite-Tool, um die .db-Datei zu erstellen:

  • DB Browser for SQLite (plattformübergreifende GUI)
  • sqlite3 CLI (Kommandozeile, ist bei macOS / den meisten Linux-Distros dabei)
  • Pythons sqlite3-Modul (programmatische Erstellung)
  • Export von PostgreSQL/MySQL nach SQLite (verschiedene Tools)

Ein minimales Python-Beispiel:

import sqlite3

conn = sqlite3.connect('movies.db')
cursor = conn.cursor()

cursor.execute('''
    CREATE TABLE films (
        id INTEGER PRIMARY KEY,
        title TEXT NOT NULL,
        year INTEGER,
        director TEXT
    )
''')

cursor.executemany('INSERT INTO films (title, year, director) VALUES (?, ?, ?)', [
    ('The Matrix', 1999, 'Wachowskis'),
    ('Inception', 2010, 'Nolan'),
    ('Parasite', 2019, 'Bong'),
])

conn.commit()
conn.close()

Ziehe die entstandene movies.db in den Editor deines Skripts → Eduskript zeigt ein Drop-Menü, das "Insert SQL editor" mit vorausgefülltem, passendem Markdown anbietet.


Schema-Diagramme (automatisch)

Für eine Datenbankdatei netflix.db zeigt Eduskript das Schema-Diagramm neben dem Query-Editor, wenn du zusätzlich netflix-schema.excalidraw.light.svg und netflix-schema.excalidraw.dark.svg hochlädst — automatisch mit der passenden Theme-Variante.

Namenskonvention: {database-name}-schema.excalidraw.{light|dark}.svg. Kein zusätzliches Markup nötig; der Editor findet das Schema über den Dateinamen.

Du kannst mit einem expliziten Attribut überschreiben, falls du ein anderes Bild willst:

```sql editor db="netflix.db" schema-image="custom-schema"
SELECT * FROM tv_show LIMIT 5;
```

Das Schema-Bild erscheint als Seitenpanel, das Schüler einklappen können, wenn sie mehr Platz für den Editor wollen.


Mehrdatei-SQL-Editoren

Gleiches Muster wie bei Python (siehe vorheriges Kapitel) — aufeinanderfolgende Blöcke mit derselben id werden zu Tabs:

```sql editor id="netflix-demo" db="netflix.db" file="example.sql"
-- Musterbeispiel: die zuletzt veröffentlichten TV-Serien
SELECT title, release_date
FROM tv_show
ORDER BY release_date DESC
LIMIT 10;
```

```sql editor id="netflix-demo" db="netflix.db" file="your-turn.sql"
-- Deine Aufgabe: die 10 längsten Filme auflisten
```

Beide Tabs verwenden dieselbe Datenbank; Queries im einen beeinflussen den anderen nicht.


Wo das SQL läuft

SQL.js (SQLite zu WASM kompiliert) lädt beim ersten Gebrauch von einem CDN. Der Schüler lädt deine .db-Datei einmal herunter (ein Jahr gecacht), führt Queries lokal dagegen aus. Seine Sitzung ist im Arbeitsspeicher — ein Seiten-Refresh setzt die Datenbank zurück. Perfekt für "frei experimentieren"-Übungen.

Das bedeutet:

  • Kein Server, keine Rate-Limits, kein "die Datenbank ist down"
  • Schüler können frei DROP TABLE, INSERT, UPDATE ausführen — alle Änderungen bleiben lokal in ihrer Sitzung
  • Refresh = frische Datenbank
  • Die Performance ist gut für Datenbanken bis zu ein paar hundert MB; bei grossen Datenmengen lohnt sich Sampling

Query-Muster, die gut funktionieren

Gute SQL-Übungsmuster
  • Filtern und aggregieren: "Finde alle Mitarbeitenden im Vertrieb mit Gehalt > 50'000 CHF, gruppiert nach Abteilung"
  • Mehrtabellen-Joins: "Liste alle Bestellungen von Kunden aus Deutschland, mit Kundenname und Produkt"
  • Ranking: "Finde die Top 5 Filme nach IMDB-Bewertung in jedem Genre"
  • Unterabfragen und CTEs: "Kunden, die eine Bestellung grösser als der Durchschnitt aufgegeben haben"
  • Fensterfunktionen: "Kumulierte Verkäufe pro Monat"
Vermeiden
  • Datenbankänderungen über Übungen hinweg (jede Query startet mit einer frischen Kopie der Datenbank)
  • Zeitabhängige Queries, die sich auf einen bestimmten Rückgabewert von date('now') verlassen (verwende stattdessen feste Daten)

SQL-Spickzettel

ZielSyntax
Einfacher SQL-Editor```sql editor db="my.db"
Mit explizitem Schema-Diagramm```sql editor db="my.db" schema-image="schema-name"
Mehrdatei (Tab-Queries)Aufeinanderfolgende Blöcke mit gleicher id, je file="..."
Datei-Tabs ausblenden```sql editor db="my.db" single
HTML-Formular<code-editor data-language="sql" data-db="my.db">