Auswahlliste als Filter in einer DB-Tabelle einsetzen

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

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

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.

💡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> &nbsp;

<label>Typ:
<select name="Typ">
 <option>Alle</option>
 <option>Cabrio</option>
 <option>Elektroauto</option>
 <option>Limousine</option>
 <option>SUV</option>
</select>
</label> &nbsp;

<label>Farbe:
<select name="Farbe">
 <option>Alle</option>
 <option>Weiß</option>
 <option>Blau</option>
 <option>Rot</option>
 <option>Grün</option>
</select>
</label> &nbsp; &nbsp;

<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, ",", ".") . ' &euro;</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);