Auswahlliste als Filter in einer DB-Tabelle einsetzen

[Bildschirmfoto] Auswahlliste als Filter in einer DB-Tabelle einsetzen

Mit Auswahllisten in einem Formular, ist es relativ einfach über JavaScript und PHP auf eine DB-Tabelle zuzugreifen und diese zu filtern.

Demo

Automodelle
 

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.

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
<!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;
}

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>
window.addEventListener("DOMContentLoaded", function() {

 document.getElementById("anzeigen").addEventListener("click", function () {

  const xhr = new XMLHttpRequest();
  xhr.open("POST", "antwort.php");
  let daten = new FormData(document.getElementById("form"));
  xhr.send(daten);
  xhr.onreadystatechange = function () {

   if (xhr.readyState == 4 &&
      xhr.status == 200) {
    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
<?php
if (isset($_POST["Marke"], $_POST["Typ"], $_POST["Farbe"])) {

 $db = new PDO("mysql:host=localhost;dbname=test;charset=utf8", "root", "");

 $placeholder = [":p1", ":p2", ":p3", ":p4", ":p5"];
 $filter = [];
 $conditions = [];
 $nr = 0;

 if ($_POST["Marke"] != 'Alle') {
  $filter[] = $_POST["Marke"];
  $conditions[] = "`Marke` = " . $placeholder[$nr];
  $nr++;
 }

 if ($_POST["Typ"] != 'Alle') {
  $filter[] = $_POST["Typ"];
  $conditions[] = "`Typ` = " . $placeholder[$nr];
  $nr++;
 }

 if ($_POST["Farbe"] != 'Alle') {
  $filter[] = $_POST["Farbe"];
  $conditions[] = "`Farbe` = " . $placeholder[$nr];
  $nr++;
 }

 $query = "SELECT
 `Marke`,
 `Typ`,
 `Farbe`,
 `Preis`
  FROM `auto_tabelle`";

 if (count($conditions)) {
  $query .= " WHERE " . implode(" AND ", $conditions);
 }
 $query .= " ORDER BY `Preis` DESC";

 $select = $db->prepare($query);
 foreach ($filter as $nr => $f) {
  $select->bindValue($placeholder[$nr], $f);
 }

 $select->execute();
 $autos = $select->fetchAll();

 if ($select->rowCount() > 0) {
  echo '<table id="table"><tr><th>Marke</th><th>Typ</th><th>Farbe</th><th>Preis</th></tr>';
  foreach ($autos as $auto) {
   echo '<tr><td>' . $auto["Marke"] . '</td>' .
    '<td>' . $auto["Typ"] . '</td>' .
    '<td>' . $auto["Farbe"] . '</td>' .
    '<td>' . number_format($auto["Preis"], 2, ",", ".") . ' &euro;</td></tr>';
  }
  echo '<table>';
 }
 else {
  echo 'Kein Auto gefunden!';
 }
}
?>

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);