Das ist eine PHP-Seite!!!!!!

Heute ist der 01.01.2026 und es ist gerade 02:52 Uhr und 51 Sekunden.

Wir wollen eine Liste der tollwerk-Mitarbeiter in einer HTML-Tabelle auf dieser Seite anzeigen. Danach können wir die Seite schöner machen und vielleicht mit etwas Javascript verbessern.

1. Erste Schritte

  1. Schau dir zuerst diese PHP-Datei, also index.php, in deinem Texteditor an und versuche, den Code zu verstehen. Sieh dir an, welche HTML-Tags verwendet werden, zum Beispiel, um diese Liste anzuzeigen. Siehst du, wie mit PHP das heutige Datum und die Uhrzeit angezeigt wird?
  2. Schaue dir danach den Quellcode dieser Seite in deinem Browser an. Nutze dazu entweder die Tastenkombination STRG + U oder finde die Einstellung im Menü des Browsers. Beim Firefox findest du die Einstellung unter Extras > Browser-Werkzeuge > Seitenquelltext anzeigen. Fällt dir auf, dass im Quelltext nichts mehr vom PHP-Code zu sehen ist, sondern das Datum und die Uhrzeit ganz normaler Text sind? Warum ist das so?
  3. Füge nun, in dieser Datei, unterhalb des schließenden </ol> folgenden PHP-Code ein.
    Achtung: Kopiere die Code-Beispiele hier immer aus dem Browser, nicht aus dem Texteditor! 
    <?php require_once('datenbank.php') ?>

Super! Du hast die Datei datenbank.php erfolgreich eingebunden.

2. Personen aus Datenbank lesen und anzeigen.

Die eingebundene Datei verbindet sich mit einer Datenbank und liest dort die Mitarbeiter aus. Jetzt können wir die gefundenen Mitarbeiter als Tabelle anzeigen.

Doch vorher siehst du hier die Namen von drei Früchten, und welche Farbe sie haben. Das brauchen wir gleich als Beispiel, wie wir die Mitarbeiter anzeigen können.

  1. Schau dir jetzt die Datei datenbank.php in deinem Texteditor an versuche, sie zu verstehen. Ganz oben in der Datei siehst du, wie Daten aus der Datenbank gelesen werden.
  2. Schau dir vor allem ganz genau an, wie die Liste der Früchte zusammengebaut wird. Die einzelnen Früchte stehen in einem array. Mit einem for-each-loop (auf Deutsch "For-Each-Schleife") zeigen wir jedes Element in diesem Array an. Jedes Element hat drei Eigenschaften ("array keys" oder "schlüssel" genannt), nämlich id, name und color. Genau so wollen wir es mit den Mitarbeitern machen.
  3. Füge nun folgenden Code in der index.php ein, gleich unter der Zeile <?php require_once('datenbank.php') ?>: 
    <h2>Liste der Mitarbeiter<h2>
    Zeige dann die Vornamen aller Mitarbeiter in einer Liste an, genau so, wie oben die Früchte angezeigt werden. Die Mitarbeiter stehen in der Variable $employees. Jedes Mitarbeiter-Element hat die folgenden Eigenschaften: id, firstname, lastname, favorite_color.
  4. Wenn es klappt und die Mitarbeiter zu sehen sind, versuche, die Liste in eine HTML-Tabelle umzubauen. Zeige alle Eigenschaften an, also id, firstname, lastname und favorite_color.
  5. Mache alles mit CSS schön, so dass es dir gefällt. Schreibe dein CSS in die Datei styles.css. Nutze Google oder die CSS-Referenz von w3schools, um die richtigen CSS-Statements zu finden, die du für deine Änderungen brauchst. Ein paar CSS-Statements, die du vielleicht nutzen willst:
  6. Bonus-Aufgabe:Baue die Fotos der Mitarbeiter in die Tabelle ein. Du findest die Bilder im Order images. Die Dateinamen der Bilder sind die Vornamen der Mitarbeiter. Der Mitarbeiter mit dem firstname "Klaus" hat also das Bild Klaus.jpg.
  7. Schwere Bonus-Aufgabe: Das Datum und die Uhrzeit ganz oben ändern sich nur, wenn man die Seite neu lädt. Versuche mit Javascript, dass die Uhrzeit sich jede Sekunde ändert.

Liste der Mitarbeiter

id foto firstname lastname favorite_color
1 firstname Joschi Kuphal rosa
2 firstname Angela Burchard gelb
3 firstname Bertram Bergner rot
4 firstname Klaus Fiedler schwarz
5 firstname Jolanta Dworczyk blau
6 firstname Kai Katzenleuchter schwarz
7 firstname Nina Lassauer schwarz
8 firstname Sophie Brunner grün