158 lines
5.1 KiB
HTML
Executable File
158 lines
5.1 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>PDO SQL Schritte</title>
|
|
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
background-color: #f4f4f4;
|
|
text-align: center;
|
|
padding: 20px;
|
|
}
|
|
|
|
.container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
gap: 20px;
|
|
margin-top: 30px;
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.step {
|
|
background-color: white;
|
|
padding: 20px;
|
|
width: 170px;
|
|
border: 2px solid #ccc;
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.step:hover {
|
|
background-color: #e5f4ff;
|
|
}
|
|
|
|
.info-box {
|
|
background-color: white;
|
|
border: 2px solid #ccc;
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
width: 60%;
|
|
margin: 40px auto 0 auto;
|
|
display: none;
|
|
}
|
|
|
|
.code-snippet {
|
|
background: #f0f0f0;
|
|
padding: 10px;
|
|
border-radius: 8px;
|
|
text-align: left;
|
|
white-space: pre-wrap;
|
|
font-family: monospace;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<h1>PDO - Grundlegende SQL-Kommandos</h1>
|
|
|
|
<div class="container">
|
|
|
|
<div class="step" data-step="tryCatch">
|
|
<h2>try catch</h2>
|
|
<p>besseres finden von Fehlern</p>
|
|
</div>
|
|
|
|
<div class="step" data-step="connect">
|
|
<h2>PDO verbinden</h2>
|
|
<p>Datenbank verbinden</p>
|
|
</div>
|
|
|
|
<div class="step" data-step="create">
|
|
<h2>CREATE TABLE</h2>
|
|
<p>Tabelle anlegen</p>
|
|
</div>
|
|
|
|
<div class="step" data-step="insert">
|
|
<h2>INSERT</h2>
|
|
<p>Daten einfügen</p>
|
|
</div>
|
|
|
|
<div class="step" data-step="select">
|
|
<h2>SELECT</h2>
|
|
<p>Daten lesen</p>
|
|
</div>
|
|
|
|
<div class="step" data-step="delete">
|
|
<h2>DELETE</h2>
|
|
<p>Daten löschen</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div id="info-box" class="info-box">
|
|
<h2 id="info-title"></h2>
|
|
<p id="info-text"></p>
|
|
<pre id="code-snippet" class="code-snippet"></pre>
|
|
</div>
|
|
|
|
<script>
|
|
const steps = {
|
|
|
|
tryCatch: {
|
|
title:"try{}catch{}",
|
|
desc:"Benutze try und catch um Fehler besser erkennen zu können",
|
|
code:`try{\n$pdo = new PDO("mysql:host=localhost;dbname=testdb","root","");\n}catch(PDOException $e){\necho $e->getMessage();\n}`
|
|
},
|
|
|
|
connect: {
|
|
title: "PDO Verbindung",
|
|
desc: "So stellst du eine einfache Verbindung zu MySQL her.",
|
|
code: `Wenn die Datenbank bereits existiert:\n\n<?php\n\ &dollarpdo = new PDO("mysql:host=localhost;dbname=testdb", "root", "");\necho "Verbindung erfolgreich!";\n?>\n\nWenn die Datenbank noch nicht exisitert:\n\n<?php\n$pdo = new PDO("mysql:host=localhost", "root", "");\n$pdo->exec("CREATE DATABASE IF NOT EXISTS testdb");\n$pdo = new PDO("mysql:host=localhost;dbname=testdb","root","");\n?>\n?>`
|
|
},
|
|
|
|
create: {
|
|
title: "CREATE TABLE",
|
|
desc: "Eine neue Tabelle namens 'users' erstellen.",
|
|
code: `<?php\n$sql = "CREATE TABLE users (\n id INT AUTO_INCREMENT PRIMARY KEY,\n username VARCHAR(50),\n email VARCHAR(100)\n)";\n$pdo->exec($sql);\necho "Tabelle 'users' wurde erstellt!";\n?>`
|
|
},
|
|
|
|
insert: {
|
|
title: "INSERT",
|
|
desc: "Einen Datensatz in die Tabelle einfügen.",
|
|
code: `<?php\n$sql = "INSERT INTO person VALUES (\n 'value1'\n 'value2';\n .....\n );\n";\n$pdo->exec($sql)\n?>`
|
|
},
|
|
|
|
select: {
|
|
title: "SELECT",
|
|
desc: "Daten aus der Tabelle auslesen.",
|
|
code: `<?php\n$sql = "SELECT * FROM users";\n$result = $pdo->query($sql);\n\n$valuesArray=$values->fetchAll();\necho"<pre>";\nprint_r($valluesArray);\necho"</pre>"; "<br>";\n}\n?>`
|
|
},
|
|
|
|
delete: {
|
|
title: "DELETE",
|
|
desc: "Ein Benutzer wird gelöscht (hier: ID = 1).",
|
|
code: `<?php\n$sql = "DELETE FROM users WHERE id = 1";\n$pdo->exec($sql);\necho "Benutzer mit ID 1 gelöscht!";\n?>`
|
|
}
|
|
};
|
|
|
|
document.querySelectorAll(".step").forEach(box => {
|
|
box.addEventListener("click", () => {
|
|
const key = box.dataset.step;
|
|
|
|
document.getElementById("info-title").textContent = steps[key].title;
|
|
document.getElementById("info-text").textContent = steps[key].desc;
|
|
document.getElementById("code-snippet").textContent = steps[key].code;
|
|
|
|
document.getElementById("info-box").style.display = "block";
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|