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)
sqlite3CLI (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,UPDATEausfü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
| Ziel | Syntax |
|---|---|
| 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"> |