Timeline zum Leben erwecken
Aufgabe: Testdaten importieren und die Timeline zum Leben erwecken
Teil 1 – Testdaten in die Datenbank importieren
Bisher hat das SchulNetz nur drei Nutzer: anna, ben und clara. Damit die Timeline interessanter wird, importieren wir jetzt 100 weitere Nutzer mit Posts und Freundschaften.
Was passiert beim Import?
Die Datei testdaten.sql enthält eine Reihe von SQL-Befehlen die die Datenbank mit Daten befüllen. SQL kennst du schon ein bisschen von phpMyAdmin – das hier ist dasselbe, nur mehr davon.
10d: testdaten.sql
Die drei wichtigsten Befehle die in der Datei vorkommen:
INSERT IGNORE INTO users ...
Legt neue Nutzer an. IGNORE bedeutet: falls ein Nutzer schon existiert, wird er übersprungen – keine Fehlermeldung.
INSERT IGNORE INTO profiles ...
Legt die Profildaten an (Name, Bio).
INSERT IGNORE INTO posts ...
Legt Posts an. NOW() - INTERVAL 30 MINUTE bedeutet: dieser Post wurde vor 30 Minuten geschrieben.
So importierst du die Datei
- Öffne phpMyAdmin:
http://127.0.0.1/phpmyadmin - Klicke links auf die Datenbank schulnetz
- Klicke oben auf den Reiter Importieren
- Klicke auf Durchsuchen und wähle
testdaten.sql - Klicke unten auf OK
Du siehst dann eine grüne Erfolgsmeldung mit der Anzahl der ausgeführten Befehle.
Prüfen ob es geklappt hat
Öffne im Browser:
http://127.0.0.1/schulnetz/friends.php
Melde dich als anna an (Passwort: test123). Siehst du Freunde in der Liste? Dann hat es geklappt.
Hinweis: Alle neuen Accounts haben das Passwort
test123. Die Benutzernamen stehen in phpMyAdmin unter schulnetz → users – oder einfach ausprobieren:elias4,zoe5,lisa6usw.
Teil 2 – Die Timeline zum Leben erwecken
Du hast die Datei timeline.php vor dir. Wenn du sie jetzt im Browser öffnest, siehst du einen einzelnen Beispielpost von Anna – der ist aber fest eingetragen und zeigt immer dasselbe, egal was in der Datenbank steht.
Deine Aufgabe ist es, diesen Beispielpost durch eine echte, dynamische Anzeige zu ersetzen, die alle Posts aus der Datenbank liest und anzeigt.
Was dich erwartet
Du wirst zwei neue PHP-Konzepte kennenlernen:
- Arrays – eine Liste von Werten
- foreach – eine Schleife die eine Liste durchläuft
Beides ist einfacher als es klingt. Los geht's.
Schritt 1 – Was ist ein Array?
Stell dir vor, du hast nicht einen Post sondern eine ganze Liste von Posts. In PHP nennt man so eine Liste ein Array.
Ein einfaches Array sieht so aus:
$farben = ['Rot', 'Grün', 'Blau'];
$farben ist jetzt eine Liste mit drei Einträgen. Auf einen einzelnen Eintrag greift man mit seiner Position zu – die Zählung beginnt bei 0:
$farben[0] // → 'Rot'
$farben[1] // → 'Grün'
$farben[2] // → 'Blau'
Arrays mit Schlüsseln
In unserem Projekt haben die Arrays keine Nummern sondern Namen als Schlüssel. Das nennt sich ein assoziatives Array:
$post = [
'content' => 'Hallo zusammen!',
'display_name' => 'Anna Müller',
'username' => 'anna',
];
Auf einen Wert greift man dann so zu:
$post['content'] // → 'Hallo zusammen!'
$post['display_name'] // → 'Anna Müller'
$posts ist eine Liste von solchen Arrays
In timeline.php lädt das PHP ganz oben alle Posts aus der Datenbank und speichert sie in $posts. Das ist ein Array das viele solcher Post-Arrays enthält:
$posts
└── $posts[0] → ['content' => '...', 'display_name' => '...', ...]
└── $posts[1] → ['content' => '...', 'display_name' => '...', ...]
└── $posts[2] → ['content' => '...', 'display_name' => '...', ...]
└── ...
Schritt 2 – Was ist foreach?
Wenn du jeden Post in der Liste anzeigen willst, könntest du schreiben:
echo $posts[0]['content'];
echo $posts[1]['content'];
echo $posts[2]['content'];
// ...
Das Problem: du weißt nicht wie viele Posts es gibt. Dafür gibt es foreach – es geht automatisch durch die gesamte Liste, einen Eintrag nach dem anderen:
foreach ($posts as $post) {
echo $post['content'];
}
Was hier passiert:
$postsist die ganze Liste$post(ohne s) ist jeweils ein Eintrag daraus- Der Code zwischen
{und}wird für jeden Eintrag einmal ausgeführt
Bei drei Posts läuft der Code dreimal. Bei 50 Posts fünfzigmal.
foreach in PHP-HTML-Dateien
In timeline.php siehst du PHP und HTML gemischt. Dort schreibt man foreach etwas anders – mit : und endforeach:
<?php foreach ($posts as $post): ?>
<p><?= $post['content'] ?></p>
<?php endforeach; ?>
Das macht genau dasselbe – es sieht nur anders aus weil dazwischen HTML steht.
Schritt 3 – Schau dir die timeline.php an
Öffne timeline.php in deinem Texteditor.
Suche den Abschnitt mit dem Kommentar:
BEISPIELPOST (hartcodiert als Vorlage)
Dort findest du einen fertigen HTML-Block mit fest eingetragenen Werten: "Anna Müller", "@anna", "vor 5 Min." usw.
Darunter steht ein weiterer Kommentar:
HIER KOMMT DEINE SCHLEIFE HIN
Das ist der Ort wo dein Code hin soll.
Lies die Kommentare im Beispielpost sorgfältig durch. Sie erklären genau welcher feste Wert durch welchen $post['...']-Ausdruck ersetzt werden soll.
Schritt 4 – Deine Aufgabe
Teil A: Die Schleife
Schreibe unterhalb des Beispielposts eine foreach-Schleife die alle Posts aus $posts durchläuft:
<?php foreach ($posts as $post): ?>
<?php endforeach; ?>
Teil B: Den HTML-Block einbauen
Kopiere den HTML-Block des Beispielposts in deine Schleife.
Teil C: Werte ersetzen
Ersetze alle fest eingetragenen Werte durch dynamische PHP-Ausdrücke. Die Kommentare im Beispielpost sagen dir genau welcher Wert woher kommt.
Zum Beispiel statt:
<strong>Anna Müller</strong>
schreibst du:
<strong><?= escape($post['display_name']) ?></strong>
Warum
escape()? Diese Funktion schützt vor eingeschleustem Code. Immer benutzen wenn Daten aus der Datenbank angezeigt werden.
Teil D: Testen
Öffne timeline.php im Browser. Siehst du mehrere Posts? Siehst du die richtigen Namen und Texte? Logge dich mit verschiedenen Accounts ein – sieht jeder nur die Posts seiner Freunde?
Was tun wenn es nicht klappt?
Weiße Seite: Es gibt einen PHP-Fehler. Prüfe deine <?php / ?> auf Vollständigkeit.
Der Beispielpost erscheint immer noch: Hast du die Schleife wirklich unterhalb des Beispielposts eingefügt? Der Beispielpost soll erst weg wenn die Schleife funktioniert.
Alle Posts sehen gleich aus: Irgendwo steht noch ein fest eingetragener Wert. Suche nach "Anna Müller" oder "anna" im Code.
Bonusaufgabe: Löschen-Button
Eigene Posts soll man löschen können. Ganz unten im Aufgaben-Kommentar in timeline.php findest du einen Hinweis dazu.
Überlege: Wann soll der Löschen-Button erscheinen? Wie vergleichst du die ID des Post-Autors mit der ID des angemeldeten Nutzers? Die eigentliche Löschfunktion steckt bereits in post_loeschen.php.
Zum Nachschlagen
| Ausdruck | Bedeutung |
|---|---|
$posts |
alle Posts (Liste) |
$post |
ein einzelner Post in der Schleife |
$post['content'] |
der Text des Posts |
$post['display_name'] |
Anzeigename des Autors |
$post['username'] |
Benutzername des Autors |
$post['photo_path'] |
Pfad zum Profilfoto |
$post['nutzer_id'] |
ID des Autors |
$post['created_at'] |
Zeitstempel |
escape($post['content']) |
Text sicher ausgeben |
zeitVor($post['created_at']) |
z.B. "vor 5 Min." |