2571cb8847
- Dynamic Sidebar mit window.COURSES_MANIFEST für 13 Kurse (216 Kapitel) - Kurswechsler Dropdown mit Direktnavigation - Fortschrittsanzeige mit Solved-Checkmarks (✓) aus localStorage - Responsive Off-Canvas Drawer mit Floating Action Button (☰ Kapitel) & Backdrop auf Mobile/Tablets - Web-IDE Topbar Drawer-Button (☰ Kapitel) für unterbrechungsfreien Vollbild-Editor - Saubere Bereinigung redundanter statischer Legacy-Sidebars
61 lines
2.6 KiB
HTML
61 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<link rel="icon" type="image/svg+xml" href="../../../assets/favicon.svg">
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>SQL 01: Tabellen anlegen & SELECT</title>
|
|
<link rel="stylesheet" href="../../../assets/style.css">
|
|
</head>
|
|
<body>
|
|
<div class="app-layout">
|
|
<div class="app-main">
|
|
<header>
|
|
<div class="header-container">
|
|
<div class="header-badge">🗄️ SQL & Relationale Datenbanken</div>
|
|
<h1>SQL 01: Tabellen anlegen & Daten abfragen</h1>
|
|
<p>Lerne die Grundlagen relationaler Datenbanken mit SQLite WebAssembly direkt im Browser.</p>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="container">
|
|
<section class="card">
|
|
<h2>💡 1. Relationale Datenbanken & Tabellen</h2>
|
|
<p>Daten werden in strukturierten Tabellen mit definierten Spaltentypen gespeichert:</p>
|
|
<pre><code>CREATE TABLE kunden (
|
|
id INTEGER PRIMARY KEY,
|
|
name TEXT,
|
|
guthaben REAL
|
|
);
|
|
|
|
INSERT INTO kunden (name, guthaben) VALUES ('Max Mustermann', 150.0);
|
|
SELECT * FROM kunden WHERE guthaben > 100;</code></pre>
|
|
</section>
|
|
|
|
<section class="card">
|
|
<h2>🎯 Aufgaben & Checkliste</h2>
|
|
<div class="task-item">
|
|
<input type="checkbox" class="task-checkbox" id="t1">
|
|
<label class="task-label" for="t1"><strong>TODO 1:</strong> Tabelle <code>mitarbeiter</code> mit Spalten anlegen.</label>
|
|
</div>
|
|
<div class="task-item">
|
|
<input type="checkbox" class="task-checkbox" id="t2">
|
|
<label class="task-label" for="t2"><strong>TODO 2:</strong> Testdaten mit <code>INSERT INTO</code> einfügen.</label>
|
|
</div>
|
|
<div class="task-item">
|
|
<input type="checkbox" class="task-checkbox" id="t3">
|
|
<label class="task-label" for="t3"><strong>TODO 3:</strong> Mitarbeiter mit <code>SELECT</code> und <code>WHERE</code> filtern.</label>
|
|
</div>
|
|
|
|
<div style="margin-top: 20px; display: flex; gap: 12px; flex-wrap: wrap;">
|
|
<a href="../../../workspace.html?course=sql&track=track_1_grundlagen&chapter=01_tabellen_und_select" class="btn" style="background: #3b82f6; color: #fff; font-weight: 700;">💻 In Web-IDE öffnen →</a>
|
|
<a href="../02_filterung_und_logische_operatoren/index.html" class="btn btn-secondary">Weiter zu SQL 02 →</a>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
<script src="../../../assets/courses_manifest.js"></script>
|
|
<script src="../../../assets/course_sidebar.js"></script>
|
|
</body>
|
|
</html>
|