+ SQL Grundlagen
+
+ SQL (Structured Query Language) ist eine spezielle Programmiersprache, die für die Verwaltung von Daten in relationalen Datenbanken verwendet wird. Sie ermöglicht es, Daten abzurufen, einzufügen, zu aktualisieren und zu löschen. SQL ist eine unverzichtbare
+ Fähigkeit für Datenbankadministratoren und Entwickler, um effizient auf Daten zuzugreifen und diese zu verwalten.
+
+
+ SQL-Befehle
+
+ SQL bietet eine Vielzahl von Befehlen, um verschiedene Aufgaben in einer Datenbank auszuführen. Hier sind einige der wichtigsten SQL-Befehle:
+
+
+ - SELECT: Zum Abfragen von Daten aus einer Tabelle.
+ - INSERT: Zum Einfügen von neuen Daten in eine Tabelle.
+ - UPDATE: Zum Aktualisieren von vorhandenen Daten in einer Tabelle.
+ - DELETE: Zum Löschen von Daten aus einer Tabelle.
+
+
+ SQL-Beispiele
+
+ Hier sind einige Beispiele für SQL-Abfragen, um die Verwendung der SQL-Befehle zu verdeutlichen:
+
+
+ -- Beispiel 1: Abfrage nach Fahrern aus Deutschland
+ SELECT Vorname, Nachname
+ FROM Fahrer
+ WHERE Land = 'Deutschland';
+
+
+
+ -- Beispiel 2: Abfrage nach Teams mit mehr als 100 WM-Punkten
+ SELECT Teamname, WM_Punkte
+ FROM Teams
+ WHERE WM_Punkte > 100;
+
+
+ SQL-Operatoren
+
+ SQL verwendet verschiedene Operatoren, um komplexe Abfragen durchzuführen. Hier sind einige der häufigsten SQL-Operatoren:
+
+
+ - Vergleichsoperatoren: Mit
<, <=, =, <>, >=, > können Vergleichsbedingungen in der WHERE-Klausel formuliert werden.
+ - Logische Operatoren: Mit
AND, OR, NOT können logische Bedingungen in der WHERE-Klausel formuliert werden.
+ - Between-Operator: Der BETWEEN-Operator wird für Bereichsvergleiche verwendet.
+ - Like-Operator: Mit dem LIKE-Operator können Muster für String-Vergleiche erstellt werden.
+ - In-Operator: Der IN-Operator hilft, wenn Sie eine Liste von Kriterien für gesuchte Daten haben.
+ - IS-Operator: Der IS-Operator wird verwendet, um nach NULL-Werten zu suchen.
+ - Distinct-Operator: Mit DISTINCT können doppelte Einträge aus den Ergebnissen entfernt werden.
+ - As-Operator: Mit dem AS-Operator können Sie berechneten Ergebnisspalten Namen zuweisen.
+
+
+ Sortierung und Begrenzung
+
+ Sie können die Reihenfolge der Abfrageergebnisse steuern und die Ergebnismenge begrenzen:
+
+
+ - Order By: Der ORDER BY-Operator wird verwendet, um Ergebnisse nach bestimmten Kriterien zu sortieren.
+ - Limit: Der LIMIT-Operator beschränkt die Anzahl der zurückgegebenen Datensätze.
+
+
+ Arbeiten mit NULL-Werten
+
+ NULL-Werte sind in SQL wichtig und werden oft verwendet. Der IS-Operator kann verwendet werden, um NULL-Werte zu finden.
+
+
+ Berechnungen in SQL
+
+ In SQL können Sie auch Berechnungen durchführen und Ergebnisspalten mit Aliasnamen versehen.
+
+
+ Data Manipulation Language (DML)
+
+ Zur Bearbeitung von Daten gibt es in SQL die Befehle: INSERT, UPDATE und DELETE. Diese Befehlsgruppe wird auch als DML - Data Manipulation Language bezeichnet.
+
+ Wie fügt man Daten in eine Tabelle ein?
+
+ Mit dem INSERT-Befehl kannst Du Daten in eine Tabelle einfügen. Das geht so:
+
+
+ INSERT INTO schueler VALUES (1024, 'Mueller', 'Heinz', '1988-08-14', 'Hüttenweg 6', '64536', 'Oberdorf');
+ INSERT INTO Kurs VALUES ('12I34', 'Inf', 'Datenbanken', 'GK', '2004/01', 2);
+ INSERT INTO Belegt VALUES (1024, '12I34', NULL);
+
+
+
+ Der INSERT-Befehl hat den Aufbau:
+
+
+ INSERT INTO Tabelle VALUES (Wert_1, Wert_2,... , Wert_n);
+
+
+
+ Beim INSERT-Befehl in der bisherigen Form musst Du immer Werte für alle Spalten angeben. Bei der zweiten Form des INSERT-Befehls ist das nicht nötig, denn hier gibst Du hinter dem Tabellennamen die einzelnen Spalten an, die einen Wert erhalten sollen.
+
+
+ INSERT INTO Tabelle(Spalte_1, Spalte_2, Spalte_3,...) VALUES (Wert_1, Wert_2, Wert_3, ...);
+
+
+ Und wie ändert man Daten?
+
+ Dafür gibt es den UPDATE-Befehl. Auch dafür drei Beispiele:
+
+
+ UPDATE schueler SET Nachname = 'Müller' WHERE SNr = 1024;
+ UPDATE Kurs SET Thema = 'Datenbanken mit SQL', Stunden = 3 WHERE KursNr = '12I34';
+ UPDATE Belegt SET Punkte = 14 WHERE SNr = 1024 AND KursNr = '12I34';
+
+
+
+ Mit UPDATE Tabelle gibst Du an, in welcher Tabelle Daten geändert werden sollen. Mit SET Spalte = Wert gibst Du den neuen Wert für die Spalte an. Mit WHERE Bedingung wählst Du die Datensätze aus, die geändert werden sollen.
+
+
+
+ Fehlt die WHERE-Bedingung, so werden alle Datensätze geändert.
+
+
+ Ab in den Mülleimer!
+
+ Du löschst Datensätze mit dem DELETE-Befehl. Das geht so:
+
+
+ DELETE FROM schueler WHERE SNr = 1024;
+ DELETE FROM Kurs WHERE Fach = 'D';
+ DELETE FROM Belegt;
+
+
+
+ Beim ersten DELETE-Befehl wird als WHERE-Bedingung ein Schlüsselwert angegeben. Dadurch wird genau ein Datensatz gelöscht. Beim zweiten DELETE-Befehl werden alle Deutsch-Kurse gelöscht. Beim dritten DELETE-Befehl fehlt die WHERE-Bedingung, dadurch werden
+ alle Datensätze gelöscht.
+
+
+ Data Definition Language (DDL)
+
+ Der Teil von SQL, mit dem Du Tabellen und Datenbanken erstellst, wird DDL - Data Definition Language genannt. Die Tabellen der Datenbank Schule kann man mit diesen CREATE-Befehlen erzeugen:
+
+
+ CREATE TABLE schueler (
+ SNr INT(5) PRIMARY KEY,
+ Nachname VARCHAR(40),
+ Vorname VARCHAR(30),
+ Geburtsdatum DATE,
+ StrasseNr VARCHAR(40),
+ PLZ VARCHAR(7),
+ Ort VARCHAR(40)
+ );
+
+ CREATE TABLE Kurs (
+ KursNr VARCHAR(10) PRIMARY KEY,
+ Fach VARCHAR(5),
+ Thema VARCHAR(50),
+ Art ENUM('GK', 'LK'),
+ Halbjahr VARCHAR(10),
+ Stunden INT(1)
+ );
+
+ CREATE TABLE Belegt (
+ SNr INT(5),
+ KursNr VARCHAR(10),
+ Punkte INT(2),
+ PRIMARY KEY (SNr, KursNr)
+ );
+
+
+
+ Mit CREATE TABLE Tabelle erhält die Tabelle einen Namen. Dann gibst Du alle Attribute der Tabelle samt ihren Datentypen an. Die Primärschlüssel kennzeichnet man mit PRIMARY KEY.
+
+
+
+ Weitere Datentypen findest Du im MySQL-Handbuch.
+
+
+ Tabellen leeren und löschen
+
+ Mit DELETE FROM Tabelle löschst Du alle Datensätze einer Tabelle. Zum Löschen einer Tabelle nimmst Du den DROP TABLE-Befehl, z. B. DROP TABLE Kurs.
+
+
+
+
+
+
\ No newline at end of file
diff --git a/lerntools/sqllernapp/script.js b/lerntools/sqllernapp/script.js
new file mode 100644
index 0000000..e69de29
diff --git a/lerntools/sqllernapp/style.css b/lerntools/sqllernapp/style.css
new file mode 100644
index 0000000..fab3313
--- /dev/null
+++ b/lerntools/sqllernapp/style.css
@@ -0,0 +1,377 @@
+@import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900');
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ font-family: 'Poppins', sans-serif;
+}
+
+body {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ min-height: 100vh;
+ user-select: none;
+ background-color: #26282b;
+}
+
+body::-webkit-scrollbar {
+ width: 12px;
+}
+
+body::-webkit-scrollbar-track {
+ background: #26282b;
+}
+
+body::-webkit-scrollbar-thumb {
+ background-color: #ffffff;
+ border-radius: 20px;
+ border: 4px solid #26282b;
+}
+
+header {
+ background-color: #003a1e;
+ color: #fff;
+ text-align: start;
+ padding: 16px 100px;
+ font-size: 24px;
+ position: fixed;
+ left: 0;
+ right: 0;
+ top: 0;
+ opacity: 0.8;
+}
+
+header:hover {
+ opacity: 1;
+}
+
+header p {
+ position: start;
+ text-align: start;
+}
+
+#headerinput {
+ margin-top: -40px;
+ display: flex;
+ justify-content: end;
+ align-items: flex-end;
+ text-align: end;
+}
+
+#headerinput a button {
+ cursor: pointer;
+}
+
+#überschriftlink {
+ text-decoration: none;
+ color: #fff;
+}
+
+.button {
+ background-color: #012f6b;
+ color: #fff;
+ text-decoration: none;
+ border: unset;
+ padding: 12px;
+ border-radius: 7px;
+ min-width: 160px;
+ font-weight: 600;
+ margin-left: 10px;
+ box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
+}
+
+.button:hover {
+ background-color: #006eff;
+}
+
+.button a {
+ color: #fff;
+ text-decoration: none;
+}
+
+#sqllernapphintergrund {
+ background-image: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)), url(/Bilder/ubodigat.com\ sqllernapp\ Hintergrund.png);
+ background-size: cover;
+ background-attachment: fixed;
+ background-position: center;
+}
+
+
+/*Responsive header*/
+
+@media (max-width: 960px) {
+ #headerinput a {
+ margin-top: 50px;
+ }
+}
+
+@media (max-width: 680px) {
+ #headerinput a {
+ margin-top: 50px;
+ }
+}
+
+@media (max-width: 600px) {
+ #headerinput a {
+ margin-left: 40px;
+ margin-right: -40px;
+ }
+}
+
+@media (max-width: 560px) {
+ #headerinput a {
+ margin-left: 65px;
+ margin-right: -65px;
+ }
+}
+
+@media (max-width: 540px) {
+ header p a {
+ margin-left: -70px;
+ }
+ #headerinput {
+ display: flex;
+ margin-top: -85px;
+ margin-bottom: 0px;
+ }
+ #headerinput a button {
+ font-size: 10px;
+ margin-top: 40px;
+ margin-left: 900px;
+ padding: 10px;
+ min-width: 100px;
+ font-weight: 600;
+ margin-left: 5px;
+ }
+}
+
+@media (max-width: 400px) {
+ nav header div {
+ margin-bottom: 10px;
+ }
+ header p a {
+ margin-left: -70px;
+ }
+ #headerinput {
+ display: flex;
+ margin-top: -80px;
+ margin-bottom: 0px;
+ }
+ #headerinput a button {
+ font-size: 10px;
+ margin-top: 40px;
+ margin-left: 900px;
+ padding: 10px;
+ min-width: 100px;
+ font-weight: 600;
+ margin-left: 5px;
+ }
+}
+
+@media (max-width: 350px) {
+ nav header div {
+ margin-bottom: 10px;
+ }
+ header p a {
+ margin-left: -70px;
+ }
+ #headerinput {
+ display: flex;
+ margin-top: -80px;
+ margin-bottom: 0px;
+ }
+ #headerinput a {
+ margin-left: 80px;
+ margin-right: -80px;
+ }
+ #headerinput a button {
+ font-size: 10px;
+ margin-top: 40px;
+ margin-left: 900px;
+ padding: 10px;
+ min-width: 100px;
+ font-weight: 600;
+ margin-left: 5px;
+ }
+}
+
+
+/* Ab hier kein Grundcss code mehr*/
+
+pre::-webkit-scrollbar {
+ height: 7px;
+ background: #333;
+}
+
+pre::-webkit-scrollbar-thumb {
+ background-color: #66ff00a9;
+ border-radius: 10px;
+}
+
+pre::-webkit-scrollbar-thumb:hover {
+ background-color: #66ff00a9;
+}
+
+body {
+ font-family: Arial, sans-serif;
+ margin: 0;
+ padding: 0;
+}
+
+body {
+ background-color: black;
+ color: white;
+}
+
+#quiz-container {
+ width: 80%;
+ margin: 0 auto;
+ padding: 20px;
+ background-color: rgba(0, 0, 0, 0.8);
+ border-radius: 10px;
+ box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
+ text-align: center;
+}
+
+#question {
+ font-size: 24px;
+ margin-bottom: 20px;
+}
+
+#options {
+ display: flex;
+ flex-direction: column;
+}
+
+.option {
+ margin: 5px 0;
+ padding: 10px;
+ background-color: #333;
+ border-radius: 5px;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+}
+
+.option:hover {
+ background-color: #555;
+}
+
+#sql-input-container {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-top: 20px;
+}
+
+#sql-answer {
+ padding: 10px;
+ width: 60%;
+ border: none;
+ border-radius: 5px 0 0 5px;
+}
+
+#submit-btn {
+ padding: 10px 20px;
+ background-color: #007BFF;
+ color: white;
+ border: none;
+ border-radius: 0 5px 5px 0;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+ margin-left: -5px;
+}
+
+#submit-btn:hover {
+ background-color: #0056b3;
+}
+
+#result {
+ font-size: 24px;
+ text-align: center;
+ margin-top: 20px;
+}
+
+
+/* Stile für die lernen.html */
+
+body {
+ font-family: Arial, sans-serif;
+ margin: 0;
+ padding: 0;
+}
+
+body {
+ background-color: black;
+ color: white;
+}
+
+main {
+ max-width: 800px;
+ margin: 0 auto;
+ padding: 20px;
+ border-radius: 5px;
+ text-align: left;
+ overflow-x: auto;
+}
+
+#überschriftlernen {
+ font-size: 20px;
+ margin-top: 90px;
+ padding: 6px 20px;
+ margin-right: 73%;
+ margin-bottom: 20px;
+ border-radius: 3px;
+ background-color: #474747;
+}
+
+h1 {
+ font-size: 24px;
+ margin-bottom: 20px;
+}
+
+h2 {
+ margin-top: 50px;
+}
+
+h3 {
+ font-size: 18px;
+ margin-top: 35px;
+}
+
+ul {
+ list-style-type: disc;
+ margin-left: 20px;
+ margin-top: 10px;
+}
+
+#mainlernensql {
+ margin-bottom: 20px;
+ padding: 6px 20px;
+ border-radius: 5px;
+ background-color: #0f0f0fbe;
+}
+
+pre {
+ background-color: #1e1e1e;
+ color: white;
+ padding: 10px;
+ border-radius: 5px;
+ font-size: 14px;
+ overflow-x: auto;
+ margin-top: 10px;
+ margin-bottom: 10px;
+}
+
+code {
+ font-family: Consolas, monospace;
+ font-size: 14px;
+ background-color: #1e1e1e;
+ color: #00e732;
+ padding: 2px 4px;
+ border-radius: 3px;
+ white-space: nowrap;
+ text-align: center;
+ line-height: 1.2;
+}
\ No newline at end of file