Q2 Datenbanken

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.

Die Aufgabenstellung lautet

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

TagBedeutung
<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

tabelle.php
/* meininfokurs.cmrg.site */
<?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

Browser
+----+----------+---------+--------------+---------------------+-------+-----------+
| 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.

Das 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.

Aufgabe suchen

Tippe los. Strg+K öffnet die Suche von überall.

Zuletzt angesehen

Werbung