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

  1. Öffne phpMyAdmin: http://127.0.0.1/phpmyadmin
  2. Klicke links auf die Datenbank schulnetz
  3. Klicke oben auf den Reiter Importieren
  4. Klicke auf Durchsuchen und wähle testdaten.sql
  5. 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: elias4zoe5lisa6 usw.


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:

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:

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."
Powered by Forestry.md