Auswahlliste als Filter in einer DB-Tabelle einsetzen
![[Bildschirmfoto]
Auswahlliste als Filter in einer DB-Tabelle einsetzen [Bildschirmfoto]
Auswahlliste als Filter in einer DB-Tabelle einsetzen](img/auswahlliste_als_filter_in_einer_db-tabelle_einsetzen.png)
Mit HTML-Auswahllisten (<select>) in einem Formular, ist es relativ einfach über JavaScript und PHP auf eine DB-Tabelle zuzugreifen und diese zu filtern.
Demo
Bei dem folgenden Script war mir wichtig, das die Daten mit JavaScript gesendet und empfangen werden.
Den Inhalt der Auswahllisten könnte man zum Beispiel aus der DB-Tabelle auslesen (mysql> SELECT DISTINCT Marke FROM auto_tabelle;
) um aktuelle Filter zu erhalten.
💡Nach berechtigter Kritik habe ich Kommentare hinzugefügt, die erläutern was die nachfolgenden Anweisungen / Funktionen im Einzelnen machen.
Quelltext: automodelle.htm Ausblenden ❘ Kopieren ❘ Link ❘ Zeilen ❘
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Automodelle</title>
<style>
body {
font-family: Verdana, Arial, Sans-Serif;
font-size: 1rem;
}
div#titel {
color: #306161;
font-size: 1.2rem;
text-align: Center;
background-color: #DEEFEF;
padding: 5px;
width: 500px;
}
form#form {
background-color: #E1F0F0;
width: 500px;
padding: 5px;
text-align: center;
}
div#ausgabe {
font-size: 0.90rem;
background-color: #BEDEDE;
width: 500px;
padding: 5px;
cursor: Text;
}
div#ausgabe #table {
width: 100%;
}
div#ausgabe #table th {
text-align: Left;
}
div#ausgabe #table tr:nth-child(even) {
background-color: #92C7C7;
}
</style>
<script>
// JS-Funktion erst ausführen, wenn das HTML-Dokument vollständig geladen wurde
window.addEventListener("DOMContentLoaded", function() {
// Dem HTML-Button "Absenden" (id="anzeigen") eine Funktion zuweisen wenn darauf geklickt wurde
document.getElementById("anzeigen").addEventListener("click", function () {
// Ein neues XMLHttpRequest()-Objekt setzen
const xhr = new XMLHttpRequest();
// Die Datei "antwort.php" öffnen
xhr.open("POST", "antwort.php");
// Die Formulardaten im Dokument auswählen
let daten = new FormData(document.getElementById("form"));
// Die Formulardaten (per POST) an die Datei "antwort.php" senden
xhr.send(daten);
// Auf eine Antwort warten
xhr.onreadystatechange = function () {
// Antwort-Status überprüfen
if (xhr.readyState == 4 &&
xhr.status == 200) {
// Die Antwort im Dokument ausgeben
document.getElementById("ausgabe").innerHTML = xhr.responseText;
}
}
});
});
</script>
</head>
<body>
<div id="titel">Automodelle</div>
<form id="form" method="post">
<label>Marke:
<select name="Marke">
<option>Alle</option>
<option>Audi</option>
<option>BMW</option>
<option>Mercedes</option>
<option>Opel</option>
<option>Volkswagen</option>
</select>
</label>
<label>Typ:
<select name="Typ">
<option>Alle</option>
<option>Cabrio</option>
<option>Elektroauto</option>
<option>Limousine</option>
<option>SUV</option>
</select>
</label>
<label>Farbe:
<select name="Farbe">
<option>Alle</option>
<option>Weiß</option>
<option>Blau</option>
<option>Rot</option>
<option>Grün</option>
</select>
</label>
<input type="button" value="Anzeigen" id="anzeigen">
</form>
<div id="ausgabe"></div>
</body>
</html>
Die Datei: "antwort.php" empfängt die Daten vom Formular. Diese werden dann, je nach Auswahl zum SQL-String $query
hinzugefügt.
Mit den „Prepared Statements” (zu deutsch: vorbereitete Anweisung) werden die Daten
sicher (über Platzhalter) an MySQL gesendet.
Quelltext: antwort.php Ausblenden ❘ Kopieren ❘ Link ❘ Zeilen ❘
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<?php
// Gesendete POST-Daten überprüfen ob diese im Formular gesetzt wurden.
// Dient dazu, wenn die Datei direkt aufgerufen wird, keine PHP Fehlermeldungen entstehen.
// Außerdem soll sichergestellt werden dass keine POST-Variablen fehlen!
if (isset($_POST["Marke"],
$_POST["Typ"],
$_POST["Farbe"])) {
// Verbindung zur Datenbank aufbauen
$db = new PDO("mysql:host=localhost;dbname=test;charset=utf8", "root", "");
//n $db = new PDO("mysql:host=localhost;dbname=theWorldIsNotEnough;charset=utf8", "root", "iWillSurvive");
// Variable: $platzhalter (Array) für die "PDO - Prepared Statements" an benannte Platzhalter setzen.
// Als Beispiel sind hier fünf Platzhalter definiert, benötigt werden aber nur drei davon!
$platzhalter = [":p1", ":p2", ":p3", ":p4", ":p5"];
// Variable: $filter (Array) für die Filter (Werte der Auswahllisten) setzen
$filter = [];
// Variable: $bedingungen (Array) für die MySQL-Bedingungen setzen
$bedingungen = [];
// Variable: $zaehler (Zähler) auf 0 setzen
$zaehler = 0;
// Wurde im Formular in der Auwahlliste (Name: "Marke") ein anderer Wert als "Alle" ausgewählt und gesendet
if ($_POST["Marke"] != 'Alle') {
// Füge den Wert der Auswahlliste in die Variable: $filter (Array) hinzu
$filter[] = $_POST["Marke"];
// Füge eine Bedingung (MySQL-Anweisung) mit Platzhalter (:p1) in die Variable: $bedingungen (Array) hinzu
$bedingungen[] = "`Marke` = " . $platzhalter[$zaehler]; // `Marke` = :p1
// Erhöhe die Variable: $zaehler um einen Wert
$zaehler++;
}
// Wurde im Formular in der Auwahlliste (Name: "Typ") ein anderer Wert als "Alle" ausgewählt und gesendet
if ($_POST["Typ"] != 'Alle') {
// Füge den Wert der Auswahlliste in die Variable: $filter (Array) hinzu
$filter[] = $_POST["Typ"];
// Füge eine Bedingung (MySQL-Anweisung) mit Platzhalter (:p2) in die Variable: $bedingungen (Array) hinzu
$bedingungen[] = "`Typ` = " . $platzhalter[$zaehler]; // `Typ` = :p2
// Erhöhe die Variable: $zaehler um einen Wert
$zaehler++;
}
// u.s.w.
if ($_POST["Farbe"] != 'Alle') {
$filter[] = $_POST["Farbe"];
$bedingungen[] = "`Farbe` = " . $platzhalter[$zaehler];
$zaehler++;
}
// Definiere die MySQL-Anweisung um die Daten auszulesen
$auslesen = "SELECT
`Marke`,
`Typ`,
`Farbe`,
`Preis`
FROM `auto_tabelle`";
// Wurden Bedingungen in der Variable: $bedingungen (Array) gesetzt
if (count($bedingungen)) {
// Füge zu der MySQL-Anweisung die Bedingungen hinzu
$auslesen .= " WHERE " . implode(" AND ", $bedingungen);
}
// Füge zu der MySQL-Anweisung eine Sortierung (absteigend) nach `Preis` hinzu
$auslesen .= " ORDER BY `Preis` DESC";
/*
* Die MySQL-Anweisung könnte dann (je nach Auswahl) wie folgt aussehen:
SELECT
`Marke`,
`Typ`,
`Farbe`,
`Preis`
FROM `auto_tabelle`
WHERE
`Marke` = :p1
AND
`Typ` = :p2
ORDER BY `Preis` DESC
*/
// prepare() Bereitet eine Anweisung zur Ausführung vor und liefert ein Anweisungsobjekt ($auswahl)
$auswahl = $db->prepare($auslesen);
// Über eine foreach()-Schleife die Filter ($filter) im Array durchgehen
foreach ($filter as $nr => $f) {
// Mit bindValue() die benannten und gesetzten Platzhalter (:p1, :p2, ...) an einem Wert binden
$auswahl->bindValue($platzhalter[$nr], $f);
// $auswahl->bindValue(":p1", $_POST["Marke"]);
}
// Die vorbereitete Anweisung (Prepared Statement) ausführen
$auswahl->execute();
// Rufe die gefundenen Datensätze ($autos über fetchAll()) aus der Ergebnismenge der MySQL-Anweisung ab
$autos = $auswahl->fetchAll();
// Die Anzahl der gefundenen Datensätze überprüfen
if ($auswahl->rowCount() > 0) {
// Die HTML-Tabelle (Tabellenkopf) ausgeben
echo '<table id="table">
<tr>
<th>Marke</th>
<th>Typ</th>
<th>Farbe</th>
<th>Preis</th>
</tr>';
// Jeden gefundenen Datensatz über eine foreach()-Schleife ausgeben
foreach ($autos as $auto) {
// HTML-Tabellenzeile (<tr>) und Tabellenspalten (<td>) ausgeben
echo '<tr>
<td>' . $auto["Marke"] . '</td>' .
'<td>' . $auto["Typ"] . '</td>' .
'<td>' . $auto["Farbe"] . '</td>' .
// Die Variable: $auto["Preis"] mit der number_format()-Funktion formatieren und ausgeben
'<td>' . number_format($auto["Preis"], 2, ",", ".") . ' €</td>
</tr>';
}
// HTML-Tabelle beenden
echo '<table>';
// Wenn kein Datensatz gefunden wurde
} else {
echo '<p>Kein Auto gefunden!</p>';
}
}
DB-Tabelle
Folgende DB-Tabelle wurde im Anwendungsbeispiel verwendet:
CREATE TABLE `auto_tabelle` ( `Marke` varchar(30) COLLATE utf8_unicode_ci NOT NULL, `Typ` varchar(30) COLLATE utf8_unicode_ci NOT NULL, `Farbe` varchar(30) COLLATE utf8_unicode_ci NOT NULL, `Preis` float NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci; INSERT INTO `auto_tabelle` (`Marke`, `Typ`, `Farbe`, `Preis`) VALUES ('Audi', 'Cabrio', 'Weiß', 14900.5), ('Audi', 'Elektroauto', 'Blau', 25500.2), ('Audi', 'Limousine', 'Rot', 64000), ('Audi', 'SUV', 'Grün', 12200.5), ('BMW', 'Cabrio', 'Weiß', 19900.5), ('BMW', 'Elektroauto', 'Blau', 25700), ('BMW', 'Limousine', 'Rot', 35400.2), ('BMW', 'SUV', 'Grün', 18500), ('Mercedes', 'Cabrio', 'Weiß', 18200.5), ('Mercedes', 'Elektroauto', 'Blau', 25500), ('Mercedes', 'Limousine', 'Grün', 17900.5), ('Mercedes', 'SUV', 'Rot', 11100.5), ('Opel', 'Cabrio', 'Grün', 41100), ('Opel', 'Elektroauto', 'Weiß', 12900.5), ('Volkswagen', 'Limousine', 'Weiß', 18100), ('Volkswagen', 'SUV', 'Grün', 31400.2), ('Volkswagen', 'Limousine', 'Grün', 14100), ('Opel', 'Limousine', 'Blau', 81100), ('Volkswagen', 'Cabrio', 'Blau', 14100.5), ('BMW', 'Elektroauto', 'Rot', 25700), ('Audi', 'SUV', 'Blau', 14200), ('Volkswagen', 'Limousine', 'Blau', 17100);