Tutorial Portal CMS

Ein flexibles, modernes Tutorial-Portal für alle Themen – PHP 8.4+, MariaDB, ohne Frameworks.

---

## ✨ Features

### Frontend
- 🏠 Startseite mit Hero, Hauptkategorien-Leiste und Tutorial-Grid (4 pro Kategorie)
- 📂 Kategorien mit Unterkategorien und farbigen Markierungen
- 📝 Tutorial-Detail mit automatischem Inhaltsverzeichnis, Lesezeit, Tags
- 🔍 Volltext-Suche + Tag-Suche
- 💬 Kommentarsystem (mit optionaler Moderation)
- 👤 Benutzer-Registrierung und Login
- 📱 Vollständig responsiv (Mobile-First)
- 🎨 Syntax-Highlighting via Prism.js (PHP, JS, HTML, CSS, SQL, …)
- 📋 Code-Blöcke mit Kopieren-Button
- 📊 Lese-Fortschrittsbalken auf Tutorial-Seiten
- 👍 Hilfreich-Bewertung (Ja/Nein) pro Tutorial
- 📚 Serien-Navigation (Vorheriges / Nächstes Tutorial)

### Block-Editor
- 📝 Text-Block (HTML)
- 💻 Code-Block mit Zeilennummern und Syntax-Highlighting
- 🖼️ Bild-Block (AJAX-Upload, WebP-Konvertierung)
- 🖼️ Bilder-Block (mehrere Bilder, 2 oder 3 Spalten)
- 🎬 Video-Block (Upload, YouTube-URL oder direkte URL)
- ✅ Tipp-Box
- ⚠️ Warnungs-Box
- 💡 Info-Box
- 💬 Zitat-Block
- ➖ Trennlinie
- Drag & Drop zum Sortieren der Blöcke

### Admin-Panel
- 📊 Dashboard mit Statistiken
- 📝 Tutorial-Verwaltung mit Block-Editor
- 📖 Serien-Verwaltung (Kurse, mehrteilige Tutorials)
- 📂 Kategorien-Verwaltung mit Unterkategorien und Farben
- 💬 Kommentar-Moderation (Freigeben, Spam, Bulk-Aktionen)
- 👥 Benutzerverwaltung (Rollen: Admin, User)
- 📢 Werbeplätze (Header, Sidebar, über/unter Tutorial)
- ⚙️ Einstellungen (Allgemein, Blog, SMTP, Design, Analytics, Seiten)

### Berechtigungen
- Alle eingeloggten User können Tutorials schreiben
- Jeder User sieht und bearbeitet nur seine eigenen Tutorials
- Admins sehen alle Tutorials und haben vollen Zugriff

### Sicherheit
- ✅ PDO Prepared Statements
- ✅ CSRF-Schutz bei allen Formularen
- ✅ htmlspecialchars() für alle Ausgaben
- ✅ Session-Management mit Regeneration
- ✅ Upload-Schutz (index.php in allen Upload-Ordnern)
- ✅ .htaccess mit Security-Headern
- ✅ Passwort-Hashing mit bcrypt

---

## 🚀 Installation

### Schritt 1: Dateien hochladen
Alle Dateien per FTP in das gewünschte Webverzeichnis hochladen.

### Schritt 2: Berechtigungen setzen
```bash
chmod 755 uploads/
chmod 755 uploads/tutorials/
chmod 755 uploads/avatars/
chmod 755 uploads/bilder/
chmod 755 uploads/videos/
```

### Schritt 3: Installation starten
1. Browser öffnen: `https://ihre-domain.de/tutorialportal/install.php`
2. Datenbank-Zugangsdaten eingeben (Host, Name, Benutzer, Passwort)
3. Tabellen-Prefix festlegen (Standard: `tp1_`)
4. Website-URL eingeben (ohne abschließenden `/`)
5. Admin-Konto anlegen
6. Auf **„Portal installieren"** klicken

Die `install.php` löscht sich nach erfolgreicher Installation automatisch.

- Admin-Panel: `https://ihre-domain.de/tutorialportal/admin/`
- Website: `https://ihre-domain.de/tutorialportal/`

---

## 📁 Dateistruktur

```
tutorialportal/
├── config.php ← von install.php erstellt
├── functions.php ← alle Helper-Funktionen
├── install.php ← Installation (löscht sich selbst)
├── tutorial_migration.sql ← DB-Migration für Updates
├── index.php ← Startseite
├── tutorial.php ← Tutorial-Detailseite
├── kategorie.php ← Kategorie-Übersicht
├── serie.php ← Serien-Übersicht
├── suche.php ← Suche
├── login.php / register.php / logout.php
├── profil.php ← Benutzerprofil
├── kontakt.php ← Kontaktformular
├── seite.php ← Statische Seiten (Impressum etc.)
├── assets/
│ ├── css/style.css ← Haupt-Stylesheet
│ ├── css/tutorial.css ← Tutorial-Seiten-Stylesheet
│ ├── js/app.js ← Allgemeines JavaScript
│ └── js/block-editor.js ← Block-Editor JavaScript
├── includes/
│ ├── header.php / footer.php / sidebar.php
├── uploads/
│ ├── tutorials/ ← Tutorial-Titelbilder (WebP)
│ ├── avatars/ ← Benutzer-Avatare (WebP)
│ ├── bilder/ ← Bilder aus Bild-Blöcken (WebP)
│ └── videos/ ← Video-Uploads
└── admin/
├── index.php ← Dashboard
├── tutorial.php ← Tutorial-Verwaltung + Block-Editor
├── serien.php ← Serien-Verwaltung
├── kategorien.php ← Kategorien-Verwaltung
├── kommentare.php ← Kommentar-Moderation
├── benutzer.php ← Benutzer-Verwaltung
├── werbung.php ← Werbeplätze
├── einstellungen.php ← Einstellungen
└── ajax_upload.php ← AJAX-Upload für Bilder/Videos
```

---

## 🗄️ Datenbank-Tabellen

| Tabelle | Inhalt |
|---------|--------|
| `{prefix}settings` | Website-Einstellungen |
| `{prefix}users` | Benutzer |
| `{prefix}categories` | Kategorien + Unterkategorien |
| `{prefix}tutorials` | Tutorials |
| `{prefix}tutorial_blocks` | Inhalts-Blöcke der Tutorials |
| `{prefix}tutorial_chapters` | Kapitel-Navigation |
| `{prefix}tutorial_comments` | Kommentare |
| `{prefix}tutorial_votes` | Hilfreich-Bewertungen |
| `{prefix}series` | Serien/Kurse |
| `{prefix}block_images` | Bilder in Bild-Blöcken |
| `{prefix}ads` | Werbeplätze |
| `{prefix}tags` | Tag-Cloud |

---

## 📝 Tutorial erstellen – Schritt für Schritt

### 1. Editor öffnen
- Als eingeloggter User: In der Navigation auf **✏️ Tutorial schreiben** klicken
- Im Admin-Panel: **Meine Tutorials → Neues Tutorial**

### 2. Grunddaten eingeben

**Titel** *(Pflichtfeld)*
Der Titel des Tutorials. Wird auch für die URL verwendet.

**Kurzbeschreibung**
Ein bis zwei Sätze. Wird in der Übersicht und Suchergebnissen angezeigt. Max. 300 Zeichen.

**Schwierigkeit**
- 🟢 **Anfänger** – keine Vorkenntnisse nötig
- 🟡 **Mittel** – Grundkenntnisse werden vorausgesetzt
- 🔴 **Fortgeschritten** – für erfahrene User

**Voraussetzungen**
Was der Leser vorher wissen sollte. Wird als Hinweisbox oben im Tutorial angezeigt.
Beispiel: `PHP Grundlagen, HTML-Kenntnisse`

---

### 3. Blöcke hinzufügen

Über die Toolbar die gewünschten Blöcke hinzufügen. Per **Drag & Drop** an den gewünschten Platz ziehen. Mit **↑ ↓** verschieben, **✕** zum Löschen.

---

#### 📝 Text-Block
Fließtext, Überschriften, Listen – erlaubte HTML-Tags:
```html
<h2>Abschnitts-Überschrift</h2> ← wird automatisch zum Kapitel
<h3>Unterabschnitt</h3>
<p>Absatz</p>
<ul><li>Aufzählung</li></ul>
<ol><li>Nummerierte Liste</li></ol>
<strong>Fett</strong> <em>Kursiv</em>
<a href="...">Link</a>
<blockquote>Eingerücktes Zitat</blockquote>
```

> **Tipp:** H2-Überschriften werden automatisch als Kapitel in der linken Sidebar erkannt.

---

#### 💻 Code-Block
Programmiercode mit Syntax-Highlighting und Zeilennummern.

- **Sprache wählen:** PHP, JavaScript, HTML, CSS, SQL, Bash, Python, …
- **Dateiname** (optional): wird im Header angezeigt, z.B. `index.php`
- Code einfügen

Der Besucher kann den Code per **📋 Kopieren**-Button in die Zwischenablage kopieren.

---

#### 🖼️ Bild-Block
Ein einzelnes Bild mit optionaler Beschriftung.

- Bild per Klick oder Drag & Drop hochladen (max. 8 MB, JPG/PNG/GIF/WebP)
- Wird automatisch zu WebP konvertiert
- Klick im Frontend öffnet Lightbox-Ansicht

---

#### 🖼️ Bilder-Block
Mehrere Bilder in einem Raster – ideal für Screenshot-Anleitungen.

- Mehrere Bilder gleichzeitig auswählen
- **2 Spalten** oder **3 Spalten** wählen
- Jedes Bild kann eine eigene Beschriftung bekommen

---

#### 🎬 Video-Block
Drei Varianten:

- **Upload** – eigenes Video hochladen (MP4, WebM, max. 512 MB). Fortschrittsbalken zeigt den Upload-Status.
- **YouTube** – URL einfügen: `https://youtube.com/watch?v=...`
- **Direkte URL** – URL zu einer externen Video-Datei

---

#### ✅ Tipp-Box / ⚠️ Warnungs-Box / 💡 Info-Box
Farbige Hinweis-Boxen.

- **Überschrift** (optional): z.B. „Wichtig" oder „Profi-Tipp"
- **Text**: der eigentliche Inhalt

---

#### 💬 Zitat-Block
Für Zitate mit optionaler Quellenangabe.

---

#### ➖ Trennlinie
Horizontale Linie zur optischen Trennung.

---

### 4. Kapitel-Navigation

Die linke Sidebar zeigt eine Kapitel-Navigation. Zwei Wege:

**Automatisch:** H2-Überschriften in Text-Blöcken werden automatisch als Kapitel erkannt.

**Manuell:** Im Bereich „Kapitel" eigene Einträge anlegen:
- **Titel** – der angezeigte Kapitelname
- **Anchor** – Anker-ID, muss zu einer `id` im Inhalt passen (z.B. `kapitel-1`)

---

### 5. Veröffentlichung

| Status | Sichtbarkeit |
|---|---|
| Entwurf | Nur für dich sichtbar |
| Veröffentlicht | Öffentlich auf der Website |
| Archiviert | Versteckt, nicht mehr in der Übersicht |

**Empfohlen** (nur Admin): Erscheint prominent auf der Startseite als Featured-Tutorial.

---

### 6. Kategorie & Serie

- **Kategorie** *(Pflichtfeld)* – bestimmt wo das Tutorial auf der Startseite erscheint
- **Serie** *(optional)* – für mehrteilige Tutorials
- **Reihenfolge** – Position in der Serie (1 = erstes Tutorial)

---

## 📖 Serien erstellen und verwalten

Serien fassen mehrere zusammenhängende Tutorials zu einem Kurs zusammen.
Beispiel: „PHP Grundlagen" mit 10 aufeinander aufbauenden Tutorials.

### Serie anlegen
1. Admin → **📖 Serien** → rechts **➕ Neue Serie**
2. Felder:
- **Titel** *(Pflichtfeld)* – z.B. „PHP für Einsteiger"
- **Kategorie** – ordnet die Serie einer Kategorie zu
- **Schwierigkeit** – Anfänger / Mittel / Fortgeschritten
- **Beschreibung** – kurze Zusammenfassung
- **Status** – Entwurf oder Veröffentlicht
- **Sortierung** – Reihenfolge in Übersichten (0 = oben)
- **Titelbild** – optional

### Tutorials der Serie zuordnen
1. Tutorial öffnen → rechte Spalte **Kategorie & Serie**
2. Serie auswählen
3. **Reihenfolge in Serie** eingeben: 1 für erstes, 2 für zweites, usw.
4. Speichern

### So sieht es im Frontend aus
- **Serien-Seite** `/serie.php?slug=...` – alle Tutorials der Serie in Reihenfolge
- **Im Tutorial** – linke Sidebar zeigt alle Teile der Serie, aktuelles Tutorial ist markiert
- **Unter dem Tutorial** – Navigation „← Vorheriges Tutorial" / „Nächstes Tutorial →"

### Serie bearbeiten
Admin → **Serien** → ✏️ klicken. Felder können jederzeit geändert werden.

> **Hinweis:** Beim Löschen einer Serie werden die zugehörigen Tutorials **nicht** gelöscht – sie verlieren nur die Serie-Zuordnung.

---

## 📢 Werbeplätze

| Position-Key | Beschreibung | Empfohlene Größe |
|---|---|---|
| `header` | Unter der Navigation | 728×90 |
| `sidebar_top` | Sidebar oben | 300×250 |
| `sidebar_bottom` | Sidebar unten | 300×250 |
| `article_top` | Über dem Tutorial | 728×90 |
| `article_bottom` | Unter dem Tutorial | 728×90 |

Admin → **Werbung** → HTML/JavaScript-Code einfügen → Status auf **Aktiv** setzen.

---

## ⚙️ Einstellungen

| Tab | Inhalt |
|---|---|
| **Allgemein** | Site-Name, URL, Beschreibung, Footer-Text, Logo |
| **Blog** | Tutorials pro Seite, Registrierung erlaubt/gesperrt |
| **Kommentare** | Kommentare ein/aus, Moderation ein/aus |
| **E-Mail** | SMTP-Server, Port, Zugangsdaten, Absender |
| **Design** | Primär- und Akzentfarbe |
| **Erweitert** | Google Analytics oder andere Tracking-Codes |
| **Seiten** | Impressum und Datenschutzerklärung als HTML |

---

## 🔧 Troubleshooting

**500 Internal Server Error**
→ PHP min. 8.0 erforderlich
→ `uploads/` Berechtigungen prüfen (`chmod 755`)
→ Apache mod_rewrite aktiv?

**Bilder werden nicht angezeigt**
→ `UPLOAD_URL` in `config.php` korrekt?
→ GD-Extension aktiv? (für WebP)

**Video-Upload schlägt fehl**
→ `upload_max_filesize = 512M` in php.ini
→ `post_max_size = 512M` in php.ini
→ `max_execution_time = 300` in php.ini

**Tutorial erscheint nicht auf der Startseite**
→ Status muss **Veröffentlicht** sein
→ Kategorie muss eine Hauptkategorie sein (ohne übergeordnete Kategorie)

**Block-Editor lädt nicht**
→ `assets/js/block-editor.js` hochgeladen?
→ Browser-Konsole auf JavaScript-Fehler prüfen

---

## 📋 Anforderungen

| | Mindest | Empfohlen |
|---|---|---|
| PHP | 8.0 | 8.4 |
| MySQL/MariaDB | 5.7 / 10.3 | 8.0 / 10.6 |
| Webserver | Apache/nginx | Apache mit mod_rewrite |
| GD-Extension | ✅ Pflicht | ✅ |
| Speicherplatz | 50 MB | 500 MB+ (für Videos) |

---

*Tutorial Portal CMS – entwickelt mit ❤️ für die Community*