Task to JS + AJAX and PHP, code from 21-05-26
This commit is contained in:
cwikladaniel
@@ -6,7 +6,7 @@ Wichtige Informationen
|
|||||||
|
|
||||||
- Wird eventuell nie aktuell sein.
|
- Wird eventuell nie aktuell sein.
|
||||||
- Stundenplan - [Link](https://wvss-mannheim.webuntis.com/WebUntis/?school=wvss-mannheim#/basic/timetablePublic/class?entityId=2583)
|
- Stundenplan - [Link](https://wvss-mannheim.webuntis.com/WebUntis/?school=wvss-mannheim#/basic/timetablePublic/class?entityId=2583)
|
||||||
- Ab 21
|
- Ab 21-05-25 habe ich vor `.pkt` (Cisco Packet Tracer) Datein auch im Repo zu speichern.
|
||||||
|
|
||||||
## Ordner
|
## Ordner
|
||||||
|
|
||||||
@@ -14,9 +14,10 @@ Wichtige Informationen
|
|||||||
- Unterrichts Projekt - [./unterrichts_projekt](/Zweites%20Jahr/unterrichts_projekt/portal/register.php) (Register Seite)
|
- Unterrichts Projekt - [./unterrichts_projekt](/Zweites%20Jahr/unterrichts_projekt/portal/register.php) (Register Seite)
|
||||||
- Cisco Packet Tracer - [./CISCO PACKET TRACER](/Zweites%20Jahr/CISCO%20PACKET%20TRACER/)
|
- Cisco Packet Tracer - [./CISCO PACKET TRACER](/Zweites%20Jahr/CISCO%20PACKET%20TRACER/)
|
||||||
|
|
||||||
## 21-05-25 - CPT
|
## 21-05-25 - CPT + PHP, JS und AJAX
|
||||||
- RIP routing datein hinzugefügt
|
- RIP routing datein hinzugefügt
|
||||||
- OSPRF hinzugefügt
|
- OSPRF hinzugefügt
|
||||||
|
- AB zu PHP, JS und AJAX
|
||||||
|
|
||||||
## 20-04-26 - JS + AJAX
|
## 20-04-26 - JS + AJAX
|
||||||
- Einführung AJAX
|
- Einführung AJAX
|
||||||
|
|||||||
47
Zweites Jahr/javascript/AJAX/mitarbeiterquali/backend.php
Normal file
47
Zweites Jahr/javascript/AJAX/mitarbeiterquali/backend.php
Normal file
@@ -0,0 +1,47 @@
|
|||||||
|
<?php
|
||||||
|
header('Content-Type: application/json; charset=utf-8');
|
||||||
|
|
||||||
|
// DB-Zugangsdaten (bitte anpassen)
|
||||||
|
$host = 'localhost';
|
||||||
|
$db = 'json';
|
||||||
|
$user = 'phpmyadmin';
|
||||||
|
$pass = 'server';
|
||||||
|
$charset = 'utf8mb4';
|
||||||
|
|
||||||
|
if (isset($_GET['qualifikation']) && !empty($_GET['qualifikation'])) {
|
||||||
|
$quali = $_GET['qualifikation'];
|
||||||
|
|
||||||
|
$dsn = "mysql:host=$host;dbname=$db;charset=$charset";
|
||||||
|
$options = [
|
||||||
|
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
|
||||||
|
PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
|
||||||
|
PDO::ATTR_EMULATE_PREPARES => false,
|
||||||
|
];
|
||||||
|
|
||||||
|
try {
|
||||||
|
// PDO-Verbindung aufbauen
|
||||||
|
$pdo = new PDO($dsn, $user, $pass, $options);
|
||||||
|
|
||||||
|
// SQL-Statement vorbereiten (Schutz vor SQL-Injection)
|
||||||
|
// HINWEIS: Tabellen- und Spaltennamen müssen dem importierten Dump entsprechen.
|
||||||
|
$stmt = $pdo->prepare(
|
||||||
|
'SELECT m.Name AS name, q.Qualifikation AS qualifikation
|
||||||
|
FROM mitarbeiter m
|
||||||
|
JOIN mitarbeiter_hat_qualifikation mhq ON m.idMitarbeiter = mhq.Mitarbeiter_idMitarbeiter
|
||||||
|
JOIN qualifikation q ON mhq.Qualifikation_idQualifikation = q.idQualifikation
|
||||||
|
WHERE qualifikation = ?');
|
||||||
|
|
||||||
|
$stmt->execute([$quali]);
|
||||||
|
|
||||||
|
$ergebnisse = $stmt->fetchAll();
|
||||||
|
|
||||||
|
// Als JSON an den Client senden
|
||||||
|
echo json_encode($ergebnisse);
|
||||||
|
|
||||||
|
} catch (\PDOException $e) {
|
||||||
|
// Im Fehlerfall leeres Array oder Fehlermeldung senden
|
||||||
|
echo json_encode(['error' => 'Datenbankfehler: ' . $e->getMessage()]);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
echo json_encode([]);
|
||||||
|
}
|
||||||
@@ -0,0 +1,66 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Mitarbeiter Qualifikation</title>
|
||||||
|
<style>
|
||||||
|
table { width: 50%; border-collapse: collapse; margin-top: 20px; }
|
||||||
|
th, td { border: 1px solid #ccc; padding: 8px; text-align: left; }
|
||||||
|
th { background-color: #f4f4f4; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<label for="qualiSelect">Qualifikation:</label>
|
||||||
|
<select id="qualiSelect" onchange="loadMitarbeiter(this.value)">
|
||||||
|
<option value="">- Bitte Auswählen -</option>
|
||||||
|
<option value="Java">Java</option>
|
||||||
|
<option value="HTML">HTML</option>
|
||||||
|
<option value="CSS">CSS</option>
|
||||||
|
<option value="RedisDB">RedisDB</option>
|
||||||
|
<option value="MySQL">MySQL</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<table id="resultTable" style="display:none;">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Qualifikation</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody id="tableBody"></tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function loadMitarbeiter(quali) {
|
||||||
|
if (!quali) {
|
||||||
|
document.getElementById('resultTable').style.display = 'none';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// AJAX-Anfrage über GET senden
|
||||||
|
fetch(`backend.php?qualifikation=${encodeURIComponent(quali)}`)
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
const tbody = document.getElementById('tableBody');
|
||||||
|
tbody.innerHTML = ''; // Alte Ergebnisse löschen
|
||||||
|
|
||||||
|
if(data.length > 0) {
|
||||||
|
data.forEach(mitarbeiter => {
|
||||||
|
const row = `<tr>
|
||||||
|
<td>${mitarbeiter.name}</td>
|
||||||
|
<td>${mitarbeiter.qualifikation}</td>
|
||||||
|
</tr>`;
|
||||||
|
tbody.innerHTML += row;
|
||||||
|
});
|
||||||
|
document.getElementById('resultTable').style.display = 'table';
|
||||||
|
} else {
|
||||||
|
tbody.innerHTML = '<tr><td colspan="2">Keine Mitarbeiter gefunden.</td></tr>';
|
||||||
|
document.getElementById('resultTable').style.display = 'table';
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(error => console.error('Fehler:', error));
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user