Tabellarische Ausgabe
Lösung geprüft
Die Aufgabe der heutigen Stunde ist die tabellarische Ausgabe! Die
Schülerliste untereinander mit <br> sieht nicht gerade
nach einer Webseite aus. Jetzt bauen wir eine richtige HTML-Tabelle drum
herum.
Erstellen Sie eine Ausgabe aller Attribute der Schüler in tabellarischer Form. PHP-Datei hier einfügen.
Table-Abschnitt der W3Schools:
https://www.w3schools.com/html/html_tables.asp
Die HTML-Tabelle in Kürze
| Tag | Bedeutung |
|---|---|
<table> | die ganze Tabelle |
<tr> | table row – eine Zeile |
<th> | table header – eine Kopfzelle, wird fett und zentriert |
<td> | table data – eine normale Zelle |
Wichtig ist die Verschachtelung: Zellen stehen immer in
einer Zeile, Zeilen immer in der Tabelle. Ein <td>
direkt im <table> ohne <tr>
drumherum ist ungültig, und der Browser rät dann selbst, was gemeint war.
Lösungsprozess der Aufgabe
<?php
/**
*
* Alle Schueler in tabellarischer Form
*
* @version 1.0 vom 23.05.2019
* @meininfokurs.cmrg.site
*/
$pdo = new PDO('mysql:host=localhost;dbname=schule', 'root', '',
array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES utf8"));
$sql = "SELECT * FROM schüler";
?>
<table border="1">
<tr>
<th>ID</th>
<th>Nachname</th>
<th>Vorname</th>
<th>Geburtsdatum</th>
<th>Strasse und Nr.</th>
<th>PLZ</th>
<th>Ort</th>
</tr>
<?php
foreach ($pdo->query($sql) as $row) {
echo "<tr>";
echo "<td>".$row['id']."</td>";
echo "<td>".$row['nachname']."</td>";
echo "<td>".$row['vorname']."</td>";
echo "<td>".$row['geburtsdatum']."</td>";
echo "<td>".$row['strassenr']."</td>";
echo "<td>".$row['plz']."</td>";
echo "<td>".$row['ort']."</td>";
echo "</tr>";
}
?>
</table>
Kopfzeile außerhalb, Datenzeilen innerhalb
Das ist die Struktur, um die es hier geht. Die Kopfzeile mit den Spaltennamen steht einmal und gehört deshalb nicht in die Schleife. Die Datenzeilen entstehen pro Schüler und gehören hinein.
Schreibt man die <th>-Zeile versehentlich mit in die
Schleife, bekommt man vor jedem Schüler nochmal die Überschriften. Das ist
der Klassiker bei dieser Aufgabe.
Zwischen PHP und HTML hin- und herspringen
Auffällig ist, dass der PHP-Block mit ?> geschlossen und
später mit <?php wieder geöffnet wird. Das ist Absicht:
reines HTML schreibt man einfach als HTML hin, statt es durch
echo zu schleusen. Der Alternativweg wäre, alles in
echo zu packen:
echo "<table border='1'>";
echo "<tr><th>ID</th><th>Nachname</th> ... </tr>";
Geht auch, wird aber schnell unleserlich – vor allem wegen der
Anführungszeichen. In "…" darf man keine doppelten
Anführungszeichen mehr verwenden, deshalb steht im Beispiel
border='1' mit einfachen. Solche Fehler sucht man ewig.
Die Ausgabe
+----+----------+---------+--------------+---------------------+-------+-----------+
| ID | Nachname | Vorname | Geburtsdatum | Strasse und Nr. | PLZ | Ort |
+----+----------+---------+--------------+---------------------+-------+-----------+
| 1 | Peter | Müller | 1996-04-09 | Ludwigstraße 13 | 64625 | Bensheim |
| 2 | Kevin | Gamler | 1998-02-06 | Nestweg 42 | 64625 | Einhausen |
| 3 | Jörg | Ritter | 1997-11-03 | Laplacestraße 12 | 64625 | Alsbach |
| 4 | Miriam | Ritter | 1997-11-25 | Laplacestrasse 12 | 64625 | Alsbach |
| 5 | Stefanie | Rose | 1997-10-11 | Darmstädterstaße 23 | 64625 | Bensheim |
| 6 | Marie | Sproß | 2003-10-09 | Darmstädterstaße 23 | 64625 | Bensheim |
| 7 | Daniel | Klasen | 2002-03-10 | Darmstädterstaße 25 | 64625 | Bensheim |
| 8 | Lukas | Margel | 2000-05-13 | Dr. Hesse Weg 14 | 64625 | Bensheim |
+----+----------+---------+--------------+---------------------+-------+-----------+
Zwei Sachen fallen in den echten Daten auf, und beide sind gute Beispiele für das Normalisierungskapitel: bei Schüler 3 steht „Laplacestraße", bei Schüler 4 „Laplacestrasse" – dieselbe Straße, zwei Schreibweisen. Und in drei Zeilen steht „Darmstädterstaße", da fehlt ein „r".
Eine Abfrage wie WHERE strassenr LIKE 'Laplacestraße%'
findet damit nur die Hälfte. Genau deshalb lagert man Orte und Straßen in
eigene Tabellen aus – dann gibt es jede Schreibweise nur einmal.
border="1" ist die schnelle Variante fürs
Testen. Sauber macht man Rahmen heute mit CSS
(table { border-collapse: collapse; } und
td, th { border: 1px solid; }). Für die Abgabe reicht das
Attribut.