Tag 1 · Praxis-Mission 3

Unser erster eigener WordPress-Übungsplatz

Dein Auftrag: Verstehe, wie XAMPP, Apache, MySQL, PHP, localhost und WordPress als Team zusammenarbeiten.

🌱 Ganz von vorne: Was ist eine Webseite?

Eine Webseite ist eine Seite, die du in einem Browser wie Chrome oder Firefox ansiehst. Mehrere Seiten gehören zusammen zu einer Website – zum Beispiel eine Startseite, eine Produktseite und eine Kontaktseite.

Ein Online-Shop ist eine besondere Website: Dort gibt es zusätzlich Produkte, Preise, einen Warenkorb und Bestellungen.

🧩 Was ist WordPress?

WordPress ist ein Programm zum Bauen von Websites. Es ist wie ein digitaler LEGO-Baukasten: Du setzt Seiten, Texte, Bilder, Farben und Menüs zusammen, ohne jede Zeile selbst programmieren zu müssen.

Unser erstes Beispiel: Du klickst in WordPress auf „Seite hinzufügen“, schreibst als Titel „Über unseren Shop“, fügst ein Bild ein und klickst auf „Veröffentlichen“. Später installieren wir WooCommerce. Diese Erweiterung ergänzt Produkte, Warenkorb und Bestellungen.

🏪 Stell dir einen Online-Shop wie einen Laden vor

Ein Laden braucht ein Gebäude, eine Adresse, ein Lager, Mitarbeitende und ein Werkzeug zum Einrichten. Auf dem Computer ist es ganz ähnlich. Keine Sorge: Du musst die neuen Namen noch nicht kennen. Wir lernen die folgenden sechs Helfer Schritt für Schritt kennen.

🧩

WordPress

Der Webseiten-Baukasten
🧰

XAMPP

Der Werkzeugkoffer
🏠

localhost

Die Adresse auf deinem PC
🚚

Apache

Liefert Webseiten
🗄️

MySQL

Merkt sich Shopdaten
⚙️

PHP

Arbeitet im Hintergrund

🤖 AIRI erklärt die sechs Helfer

🧩 WordPress ist dein Webseiten-Baukasten.
Hier arbeitest du später am meisten: Du erstellst Seiten, schreibst Texte, fügst Bilder ein und änderst das Aussehen.
Beispiel: Du baust die Startseite mit Logo, Begrüßung und einem Knopf „Produkte ansehen“.
🧰 XAMPP ist der Werkzeugkoffer.
Statt Apache, MySQL und PHP einzeln einzurichten, bringt XAMPP diese Werkzeuge gemeinsam auf deinen Computer.
Beispiel: Wie ein Schulranzen mehrere Hefte und Stifte enthält.
🏠 localhost bedeutet „dieser Computer“.
Das ist die Übungsadresse auf deinem PC. Dein Shop ist noch nicht öffentlich im Internet.
Beispiel: Wie ein Modell-Laden in deinem Zimmer, den draußen noch niemand besuchen kann.
🚚 Apache ist der Lieferdienst.
Dein Browser fragt nach einer Seite. Apache findet sie und liefert sie an den Browser.
Beispiel: Du rufst localhost/loopshop auf und Apache bringt dir die Startseite.
🗄️ MySQL ist das Gedächtnis.
Die Datenbank merkt sich Texte, Preise, Bestellungen und Einstellungen.
Beispiel: „Trinkflasche – 12 Euro“ wird dort gespeichert. In XAMPP kann die Datenbank auch MariaDB heißen.
⚙️ PHP ist die Werkstatt im Hintergrund.
PHP liest die Anweisungen von WordPress und baut daraus die Seite, die du im Browser siehst.
Beispiel: PHP setzt Produktname, Bild und Preis zu einer Produktseite zusammen.

Merksatz:
XAMPP bringt die Werkzeuge mit · WordPress baut · PHP arbeitet · MySQL merkt · Apache liefert · localhost ist die Adresse.

🔄 Was passiert bei localhost/loopshop?

  1. Du gibst die Adresse im Browser ein.
  2. Apache erhält die Anfrage: „Zeig mir den loopshop!“
  3. PHP und WordPress bauen die passende Seite zusammen.
  4. MySQL liefert zum Beispiel Produktname und Preis.
  5. Apache schickt die fertige Seite zurück an deinen Browser.
💡 Wichtig: WordPress ist nicht XAMPP. XAMPP bereitet den Übungsplatz vor. WordPress ist die Anwendung, mit der du darauf deine Webseite baust.

🎮 Klick-Quiz: Wähle die richtige Antwort!

Erst überlegen, dann eine Antwort anklicken. Du siehst sofort die Erklärung.

Vier Fragen · Du kannst deine Antwort jederzeit ändern.
1. Wo wird der Preis „12 Euro“ gespeichert?

💡 Noch nicht. Apache liefert Webseiten, speichert aber keine Preise.

✅ Richtig! MySQL ist die Datenbank und merkt sich Preise, Texte und Bestellungen.

💡 Noch nicht. localhost ist die Adresse deines eigenen Computers.

2. Womit erstellen wir die Seite „Über uns“?

💡 Noch nicht. XAMPP stellt die Werkzeuge für unseren Übungsplatz bereit.

✅ Richtig! Mit WordPress erstellen wir Seiten, Texte, Bilder und Menüs.

💡 Noch nicht. MySQL speichert Daten; die Seite bauen wir mit WordPress.

3. Wer liefert die fertige Seite an den Browser?

💡 Noch nicht. PHP arbeitet im Hintergrund und hilft beim Zusammenbauen der Seite.

✅ Richtig! Apache ist der Webserver und liefert die fertige Seite an den Browser.

💡 Noch nicht. WordPress baut die Website; Apache liefert sie aus.

4. Kann jemand in einer anderen Stadt deinen localhost-Shop sehen?

💡 Noch nicht. localhost ist keine öffentliche Internetadresse.

✅ Richtig! localhost bedeutet „dieser Computer“. Der Shop ist noch nicht öffentlich.

💡 Noch nicht. WLAN allein macht den localhost-Shop nicht öffentlich.

🛠️ Jetzt machst du es selbst

Noch nichts installieren: Das erledigst du in der nächsten Praxis-Mission gemeinsam mit deinem Anleiter.

  1. Zeichne sechs Kästchen und beschrifte sie mit XAMPP, Apache, MySQL, PHP, localhost und WordPress.
  2. Verbinde die Helfer mit Pfeilen in der richtigen Reihenfolge: Browser → Apache → WordPress/PHP → MySQL → Apache → Browser.
  3. Plane die spätere Adresse: Der Ordner C:\xampp\htdocs\loopshop gehört später zu http://localhost/loopshop.
  4. Erfinde ein Beispielprodukt mit Name und Preis. Sage deinem Partner, welcher Helfer den Preis speichert und welcher die Produktseite liefert.
  5. Erkläre WordPress in einem Satz: „WordPress ist …“
Typische Verwechslung: localhost ist keine öffentliche Internetseite. Und WordPress ist kein fertiger Shop: Erst mit Inhalten, Design und später WooCommerce wird daraus dein eigener Online-Shop.

🔎 Partner-Test

Ein Partner nennt einen der sechs Helfer. Du erklärst ihn ohne abzulesen und gibst ein Beispiel. Danach tauscht ihr die Rollen.

✅ Fertig, wenn: Du kannst erklären, warum wir XAMPP brauchen, was WordPress macht und warum dein Shop zuerst nur über localhost erreichbar ist.
Danach: Nutze den Praxis-Check und wähle ehrlich aus, ob du Hilfe gebraucht hast.
ZurückWeiter