Task to JS + AJAX and PHP, code from 21-05-26

2026-05-21 10:31:08 +02:00
parent ac5030828d
commit e25792cbb9
3 changed files with 116 additions and 2 deletions
--- a/Jahr/javascript/AJAX/mitarbeiterquali/backend.php
+++ b/Jahr/javascript/AJAX/mitarbeiterquali/backend.php
@@ -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([]);
+}
--- a/Jahr/javascript/AJAX/mitarbeiterquali/mitarbeiterQuali.html
+++ b/Jahr/javascript/AJAX/mitarbeiterquali/mitarbeiterQuali.html
@@ -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>