SchulNetz – Installation und Aufgabe 1: Das Navigationsmenü

Teil 1 – Installation

Was du benötigst

  1. den XAMPP-Server
    • Wenn der bei dir noch installiert ist und funktioniert kannst du ihn weiter benutzen und 2. installieren, sonst brauchst du 3.
    • Um zu prüfen, ob er noch funktioniert starte die Datei Desktop\xampp\xampp-control.exe starte dann Apache und öffne im Firefox die Seite [https://127.0.0.1]
  2. Den Projektordner schulnetz aus dem ZIP-Paket
  3. alternativ den XAMPP-Server mit vorbereitetem Projektordner schulnetz (die Installation dauert leider etwas) neu installieren.
    • 10b: xampp.zip
    • 10d: xampp.zip
    • Wichtig: der Ordner xampp muss direkt auf deinem Desktop liegen!

Schritt 1 – Dateien kopieren

Wenn du den vorhandenen XAMPP-Server weiter benutzen kannst, kopiere den Ordner schulnetz in das htdocs-Verzeichnis. Wenn du XAMPP neu herunterlädst kannst du diesen Schritt 1 überspringen.

Windows:

Desktop\xampp\htdocs\schulnetz\

Der Ordner muss am Ende so aussehen:

schulnetz/
├── install.php
├── timeline.php
├── index.php
├── edit.php
├── ...
└── uploads/

Schritt 2 – XAMPP starten

Öffne das XAMPP Control Panel und starte:

Schritt 3 – Datenbank installieren

Öffne im Browser:

http://127.0.0.1/schulnetz/install.php

Die Seite legt automatisch die Datenbank schulnetz an –
bestehende Datenbanken werden dabei nicht berührt.

Du siehst für jeden Schritt ein ✓ oder ✗.
Am Ende erscheint ein grüner Kasten bei Erfolg.

Falls ein Fehler erscheint:

Schritt 4 – Fertig!

Öffne im Browser:

http://127.0.0.1/schulnetz/

Testaccounts:

Benutzername Passwort
anna test123
ben test123
clara test123

Schritt 5 – install.php löschen

Nach erfolgreicher Installation bitte die Datei install.php
löschen – sie wird nicht mehr gebraucht und sollte nicht
dauerhaft erreichbar sein.

Teil 2 – Das Navigationsmenü anpassen

Was du lernst

Schritt 1 – Das Netzwerk ausprobieren

Logge dich auf der Seite als anna, ben oder clara ein und schaue, was schon möglich ist. Vielleicht fallen dir gleich Dinge ein, die du ermöglichen möchtest.

Schritt 2 - Das Menü ändern

Öffne die Datei edit.php in einem Texteditor (z.B. VS Code).

Suche den <nav>-Bereich. Er sieht so aus:

<!-- ============================================================
     NAVIGATION
     ➡ SCHÜLERAUFGABE: Diesen Block in eine eigene Datei auslagern!
     ============================================================ -->
<nav>
    <a href="index.php">🏠 Mein Profil</a>
    <a href="logout.php" class="rechts">Abmelden</a>
</nav>

Aufgabe 2a – das Menü auf der edit.php -Seite anpassen

Das Menü bietet auf dieser Seite weniger Optionen als auf den anderen Seiten. Passe dieses Menü entsprechen an. Du kannst dazu den <nav>...</nav>-Block aus einer anderen Datei einfach kopieren.

Lade die Seite im Browser neu. Erscheint das Menü überall korrekt?

Aufgabe 2b – Einen neuen Menüpunkt hinzufügen

Füge in das Menü auf der edit.php-Seite einen neuen Link hinzu, zum Beispiel:

<a href="about.php">ℹ️ Über uns</a>

Lade die Seite im Browser neu. Erscheint der neue Punkt?

Aufgabe 2c – Das Menü auf allen anderen Seiten ändern

Mach dieselbe Änderung jetzt in:

Frage zum Nachdenken: Wie viele Dateien müsstest du ändern,
wenn das Schulnetz später 10 oder 20 Seiten hat?
Was passiert, wenn du dabei eine Datei vergisst?

Das ist das Copy-Paste-Problem: Dieselbe Information steht
an vielen Stellen. Jede Änderung muss überall gemacht werden.

Teil 2.1 – Das Menü als PHP-Include auslagern

Die Lösung: Das Menü kommt in eine eigene Datei.
Alle anderen Seiten binden diese eine Datei ein.
Einmal schreiben – überall verwenden.

2.1a – Den Ordner includes/ anlegen

Erstelle im Projektordner schulnetz/ einen neuen Unterordner:

schulnetz/
└── includes/

2.1b – Die Datei includes/nav.php anlegen

Erstelle darin eine neue Datei nav.php mit diesem Inhalt:

<?php
// includes/nav.php
// Das Navigationsmenü für alle Seiten.
// Einbinden mit: require_once 'includes/nav.php';
//
// $currentUser ist auf jeder Seite verfügbar,
// weil wir requireLogin() immer ganz oben aufrufen.
?>
<nav>
    <a href="timeline.php">🏠 Timeline</a>
    <a href="index.php?id=<?= $currentUser['id'] ?>">😊 Mein Profil</a>
    <a href="friends.php">👥 Freunde</a>
    <a href="search.php">🔍 Suche</a>
    <a href="edit.php">✏️ Bearbeiten</a>
    <a href="logout.php" class="rechts">
        Abmelden (<?= h($currentUser['username']) ?>)
    </a>
</nav>

Hinweis: h() ist unsere Hilfsfunktion aus db.php.
Sie schützt vor XSS-Angriffen – immer benutzen, wenn
Nutzerdaten angezeigt werden!

2.1c – Das Include in edit.php einbauen

Öffne edit.php. Suche den kompletten <nav>-Block
(von <!-- NAVIGATION --> bis </nav>) und ersetze ihn
durch diese eine Zeile:

<?php require_once 'includes/nav.php'; ?>

Lade edit.php im Browser. Das Menü sollte genauso
aussehen wie vorher – nur dass es jetzt aus einer eigenen
Datei kommt.

2.1d – Alle anderen Seiten umstellen

Mach dasselbe in:

2.1e – Nur noch eine Stelle ändern

Füge jetzt in includes/nav.php einen neuen Link hinzu:

<a href="about.php">ℹ️ Über uns</a>

Öffne alle Seiten nacheinander im Browser.
Der neue Punkt erscheint überall gleichzeitig –
weil alle Seiten dieselbe Datei einbinden.

Erläuterung: Was ist require_once?

PHP kennt vier Möglichkeiten, Dateien einzubinden:

Befehl Was passiert wenn die Datei fehlt? Mehrfach einbinden?
include Warnung, Seite läuft weiter ja
include_once Warnung, Seite läuft weiter nein
require Fehler, Seite stoppt ja
require_once Fehler, Seite stoppt nein

Für wichtige Dateien wie das Menü oder die Datenbankverbindung
nimmt man require_once:

Das Include-Prinzip gilt nicht nur für das Menü –
es funktioniert genauso für Kopfzeilen, Fußzeilen,
oder jede andere Sektion, die auf mehreren Seiten gleich ist.

Zusatzaufgabe

Lagere auch den <footer> als includes/footer.php aus.
Füge dort das aktuelle Jahr dynamisch ein:

<footer>
    <p>SchulNetz <?= date('Y') ?></p>
</footer>

date('Y') gibt das aktuelle Jahr zurück –
das müsst ihr nie wieder manuell ändern!

Powered by Forestry.md