3 Einträge gefunden
Version 1.2.0 • PHP 7.4+ (getestet auf PHP 8.4) • MySQL • Bootstrap 5 Entwickelt von phppower 1. Systemanforderungen Eigenschaft Beschreibung PHP 7.4 oder höher (getestet auf PHP 8.4) MySQL/MariaDB 5.7 / 10.3 oder höher PDO + PDO_MySQL Pflicht GD Extension Pflicht (Bildverarbeitung + WebP) mbstring Pflicht (UTF-8 / Umlaute) Apache/Nginx mit mod_rewrite uploads/ Schreibrechte 755 oder 777 2. Installation Neue Installation Alle Dateien per FTP/SFTP hochladen, dann im Browser aufrufen: https://deine-domain.de/news-cms/install.php Der 4-Schritt-Wizard: • Schritt 1 — System-Check (PHP-Version, Extensions, Schreibrechte) • Schritt 2 — Datenbank-Einstellungen + SMTP-Mail (optional) • Schritt 3 — Admin-Account anlegen • Schritt 4 — Fertig: 17 Tabellen angelegt, Standard-Kategorien eingetragen ⚠ Nach der Installation: install.php löschen oder per .htaccess sperren! .htaccess — Unterordner Falls das CMS in einem Unterordner liegt (z.B. /news-cms/): RewriteBase /news-cms/ 3. Benutzer & Rollen Rolle Eigene Posts Fremde Posts Kommentare User verw. Einstellungen User ✗ ✗ ✗ ✗ ✗ Author ✓ Voll ✗ ✗ ✗ ✗ Moderator ✓ Voll ✓ Bearbeiten ✓ ✗ ✗ Admin ✓ Voll ✓ Alles ✓ ✓ ✓ Neue Accounts starten als inactive und müssen vom Admin freigeschaltet werden. Moderator/Admin-Rolle nur durch bestehenden Admin vergebbar. 4. Posts erstellen & verwalten Post-Typen Eigenschaft Beschreibung Article Standard-Textartikel mit Quill.js Rich-Text-Editor Gallery Bildergalerie — Bilder per Editor einfügen Video Video-Datei hochladen (MP4, WebM, max. 50 MB) Audio Audio-Datei hochladen (MP3, WAV, OGG) Kategorien / Tags / Keywords • Vorhandene Kategorien per Multi-Select auswählen (mehrere möglich) • Neue Kategorien im Freitext-Feld kommagetrennt eingeben • Neue werden automatisch angelegt, als Tags verknüpft und als SEO-Keywords gespeichert • Die meta keywords im <head> werden automatisch aus Kategorien befüllt Geplante Veröffentlichung Beim Erstellen/Bearbeiten eines Posts kann unter Status → Published ein optionales Datum+Uhrzeit gesetzt werden. Ohne Datumsangabe wird sofort veröffentlicht. Der Datum-Picker erscheint automatisch wenn Published gewählt wird. Lesezeit Auf jeder Post-Karte und der Detailseite wird die geschätzte Lesezeit automatisch berechnet und angezeigt (ca. 200 Wörter/Minute). Drucken / PDF Jeder Post hat einen Drucken-Button der eine saubere Druckansicht (print.php) in einem neuen Tab öffnet. Von dort kann auch direkt als PDF gespeichert werden. Navbar, Footer und Werbung werden ausgeblendet. Herz-Bewertung (Likes) Jeder Post hat einen Herz-Button (❤ ) auf der Detailseite. Besucher können ohne Login liken. Ein Cookie verhindert Mehrfach-Likes (1 Jahr gültig). Anzahl auch auf Post-Karten sichtbar. 5. Volltextsuche Die Suche ist über das Suchfeld im Header auf allen Seiten erreichbar. Sie durchsucht Titel, Content, Excerpt und Kategorienamen gleichzeitig. Suchergebnisse zeigen den Suchbegriff farbig markiert (highlight). URL: search.php?q=suchbegriff Eigenschaft Beschreibung Mindestlänge 2 Zeichen Durchsucht Titel, Content, Excerpt, Kategoriename Hervorhebung Suchbegriff wird in Ergebnissen farbig markiert Paginierung 10 Ergebnisse pro Seite Bild Featured Image wird in Ergebnisliste angezeigt 6. Autor-Profilseite Jeder Autor hat eine öffentliche Profilseite unter profile.php?user=USERNAME. Autor-Namen auf Post-Detailseiten sind direkt verlinkt. Eigenschaft Beschreibung URL profile.php?user=username Zeigt Avatar (Initiale), Rolle, Mitglied seit, Artikel-/Views-/Likes-Zähler Artikel-Grid Alle veröffentlichten Posts des Autors mit Paginierung (9 pro Seite) Statistik Gesamt-Views und Gesamt-Likes über alle Posts 7. Startseite — Aufbau Eigenschaft Beschreibung Header Logo + Suchfeld + Login/Logout + Dark-Mode. Automatisches Hintergrundbild von Picsum Photos. Navigation Dynamische Kategorien-Navbar Tag-Wolke Alle Kategorien farbig — Schriftgröße je nach Artikel-Häufigkeit Banner Zwei Werbeplätze 468×60 px nebeneinander (Admin → Banner) Post-Grid Artikel als Karten mit Bild, Kategorie, Lesezeit, Views, Kommentare, ❤Likes Paginierung Anzahl pro Seite in Einstellungen konfigurierbar Footer Newsletter-Widget, Links, Besucher-Statistik 8. Banner verwalten Admin → Banner (nur Admins). Zwei Werbeplätze auf der Startseite, jeweils 468×60 px. Eigenschaft Beschreibung Position top_left = linker Platz, top_right = rechter Platz Bild-URL Vollständige URL oder relativer Pfad in /uploads/ Ziel-URL Wohin der Klick führt (optional, öffnet in neuem Tab) Aktiv Ein/Aus — inaktive Banner werden durch Platzhalter ersetzt Sortierung Niedrigere Zahl = bevorzugt wenn mehrere aktiv 9. Newsletter — DSGVO Double-Opt-In Anmelde-Prozess • User trägt Email im Footer-Widget ein • System sendet Bestätigungs-Email mit Token (Double-Opt-In) • User klickt Link → newsletter-confirm.php → confirmed=1 • Erst jetzt ist der User im Verteiler Newsletter versenden Admin → Newsletter → Newsletter schreiben. Sendet NUR an confirmed=1 AND subscribed=1. Jede Email enthält automatisch einen Abmelde-Link. Kommentar-Benachrichtigung Wenn jemand auf einen Kommentar antwortet, erhält der ursprüngliche Kommentator automatisch eine Email mit dem Antwort-Text und einem direkten Link zurück zum Post. Voraussetzung: Email-Adresse beim Kommentieren angegeben. 10. Besucher-Statistik Im Footer jeder Seite werden Besucherzahlen angezeigt (automatisch getrackt): Eigenschaft Beschreibung Online (5 Min) Unique Besucher aktiv in den letzten 5 Minuten Heute Unique Besucher heute Diese Woche Unique Besucher letzte 7 Tage Dieser Monat Unique Besucher letzte 30 Tage IPs werden als MD5-Hash gespeichert (DSGVO-freundlich). Einträge älter als 3 Monate werden automatisch gelöscht. 11. 2-Faktor-Authentifizierung Nach erfolgreichem Login mit Username + Passwort wird automatisch ein 6-stelliger Code per Email gesendet. Der Login ist erst nach Eingabe des Codes abgeschlossen. Eigenschaft Beschreibung Code 6-stellige Zahl, zufällig generiert Gültigkeit 10 Minuten Einmalig Jeder Code kann nur einmal verwendet werden Neu anfordern Button auf der 2FA-Seite sendet neuen Code Auto-Submit Formular wird automatisch abgesendet bei 6 eingegebenen Ziffern Tabelle varient_two_factor_codes (wird automatisch bereinigt) 12. RSS-Feed, Sitemap & SEO RSS-Feed Eigenschaft Beschreibung Alle Artikel rss.php Kategorie rss.php?cat=slug Autodiscovery Im <head> jeder Seite automatisch eingetragen Inhalt Letzte 20 Posts mit Volltext, Bild, Kategorie, Autor Sitemap sitemap.php generiert automatisch eine XML-Sitemap mit allen veröffentlichten Posts und Kategorien. robots.php liefert die robots.txt mit dem Sitemap-Link. Kanonische URLs Jede Seite hat einen <link rel="canonical"> Tag der Duplicate-Content für Suchmaschinen verhindert. Meta Keywords Werden automatisch aus den Kategorien/Tags des Posts befüllt. Auf der Startseite aus den Top-10-Kategorien. 13. Bild-Mediathek Admin → Mediathek — zeigt alle hochgeladenen Dateien aus dem uploads/ Ordner. Eigenschaft Beschreibung Bilder JPG, JPEG, PNG, GIF, WEBP — mit Bildvorschau Videos MP4, WEBM, OGV, MOV — mit Typ-Icon Audio MP3, WAV, OGG, M4A — mit Typ-Icon Filter Typ-Filter (Alle / Bilder / Videos / Audio) + Dateiname-Suche URL kopieren Klick auf Karte oder Button kopiert URL in die Zwischenablage Löschen Nur Admins können Dateien löschen 14. Header-Bild & Logo Eigenschaft Beschreibung Logo Admin → Einstellungen → Logo URL Header-Bild Automatisch von Picsum Photos (thematisch je nach Seite) Startseite Keyword aus Einstellungen (unsplash_keyword) Post-Seite Keyword aus Post-Tags und Kategorie Andere Seiten Generisches Keyword (news, magazine, search, author etc.) Fallback Lila Farbverlauf bei Ladefehler 15. Einstellungen Admin → Einstellungen (nur Admins) Eigenschaft Beschreibung Site-Name Name der Website Tagline Kurzbeschreibung Posts pro Seite Anzahl auf Startseite/Kategorieseite Logo URL Vollständige URL zum Logo-Bild Header-Bild Modus unsplash = Picsum-Bild, none = kein Bild Unsplash Keyword Englische Keywords für Hintergrundbild Datenschutzerklärung Text für datenschutz.php Impressum Text für impressum.php 16. Datei-Struktur Datei Beschreibung index.php Startseite (Tag-Wolke, Banner, Post-Grid, Lesezeit) post.php Post-Detailseite (Herz, Drucken, Verwandte, Kommentare) search.php Volltextsuche mit Highlight print.php Druckansicht / PDF-Export profile.php Öffentliche Autor-Profilseite category.php Kategorie-Übersicht archiv.php Archiv nach Jahr/Monat sitemap.php XML-Sitemap (automatisch generiert) robots.php robots.txt (dynamisch mit Sitemap-URL) rss.php RSS-Feed (alle + Kategorie-Filter) update.php AJAX-Handler für Herz-Bewertung login.php Login-Formular login-2fa.php 2FA Code-Eingabe _header_public.php Gemeinsamer Header (Logo, Bild, Suche, Login, Meta) _navbar.php Kategorien-Navigation _footer.php Footer (Newsletter, Statistik, Links) includes/auth.php Authentifizierung, Rollen, 2FA-Logik includes/db.php PDO-Wrapper mit Tabellen-Präfix includes/functions.php Hilfsfunktionen (slug, readingTime, unsplashUrl...) includes/mail.php Email-Templates (Verification, Reset, 2FA, Newsletter) includes/stats.php Besucher-Tracking admin/dashboard.php Übersicht + Top 5 Views + Top 5 Likes admin/media.php Mediathek (Bilder, Videos, Audio) admin/posts/create.php Post erstellen (inkl. Datum-Picker) admin/posts/edit.php Post bearbeiten admin/banners.php Banner-Verwaltung admin/settings.php Site-Einstellungen 17. Datenbank-Schema Alle Tabellen nutzen den Präfix varient_. Gesamt: 17 Tabellen. Tabelle Inhalt varient_users User-Accounts, Rollen, Status, Email-Verifizierung varient_sessions Login-Sessions varient_password_resets Passwort-Reset-Tokens (1h gültig) varient_two_factor_codes 2FA-Codes (6-stellig, 10min gültig, einmalig) varient_categories Kategorien (= Tags = SEO-Keywords) varient_tags Tags (synchron mit Kategorien) varient_posts Posts (alle Typen), Views-Counter varient_post_tags Verknüpfung Posts ↔ Tags varient_post_meta Zusatz-Metadaten (media_url, media_type) varient_media Hochgeladene Videos/Audios varient_comments Kommentare mit Status (pending/approved/spam) varient_seo_meta SEO-Einstellungen + Keywords pro Post varient_newsletter Abonnenten mit DOI-Feldern varient_settings Site-Einstellungen (Key-Value-Store) varient_banners Werbebanner 468×60 varient_post_likes Herz-Bewertungen pro Post (Cookie-basiert) varient_visitor_stats Besucher-Tracking (IP-Hash, Session, Datum) 18. Sicherheit Eigenschaft Beschreibung CSRF-Schutz Token auf allen POST-Formularen XSS-Schutz e() = htmlspecialchars() auf allen Ausgaben SQL-Injection PDO Prepared Statements überall Passwort-Hashing bcrypt Cost-Faktor 12 2FA 6-stelliger Code per Email, 10min gültig, einmalig Upload-Schutz PHP-Ausführung in uploads/ per .htaccess gesperrt Rollen-Prüfung Jede Admin-Seite prüft Rolle und Eigentumsrecht Newsletter DSGVO Double-Opt-In, Abmelde-Link in jeder Email Besucher-Tracking Nur MD5-Hash der IP — kein Rückschluss möglich DEBUG_MODE In Produktion auf false — keine Fehler im Browser Produktions-Checkliste • DEBUG_MODE in config.php auf false setzen • install.php löschen oder per .htaccess sperren • HTTPS verwenden (SSL-Zertifikat) • Starkes Admin-Passwort (min. 12 Zeichen mit Sonderzeichen) • Regelmäßige Datenbank-Backups 19. Häufige Probleme & Lösungen 500-Fehler ohne Ausgabe / Weißer Screen DEBUG_MODE in config.php temporär auf true setzen. PHP-Fehlerlog des Hosters prüfen. Seite zeigt "Hat möglicherweise ein temporäres Problem" PHP Parse Error — kein Syntaxfehler-Output weil DEBUG_MODE=false. Fehlerlog prüfen oder test.php mit phpinfo() anlegen. Bilder nicht sichtbar SITE_URL in config.php prüfen — kein abschließender Slash. RewriteBase in .htaccess muss zum Ordner passen. Emails werden nicht gesendet SMTP-Einstellungen prüfen. Viele Hoster blockieren Standard PHP mail(). Spam-Ordner prüfen. Herz-Button reagiert nicht update.php muss im Root liegen. Cookie-Pfad muss mit dem CMS-Pfad übereinstimmen (SITE_URL). Tabelle varient_post_likes muss existieren. 2FA-Code kommt nicht an Mail-Konfiguration prüfen. Spam-Ordner prüfen. Code ist 10 Minuten gültig — bei Ablauf "Code erneut senden" klicken. Datum-Picker für geplante Veröffentlichung nicht sichtbar Status auf "Published" setzen — der Picker erscheint automatisch per JavaScript. Mediathek zeigt keine Videos/Audios admin/media.php muss aktuell sein (Version 1.2.0). Dateitypen: MP4, WEBM, MOV, MP3, WAV, OGG, M4A. Suche findet nichts Mindestens 2 Zeichen eingeben. Tabelle varient_posts muss status='published' Einträge haben. $ is not defined (JavaScript) jQuery fehlt. In create.php / edit.php muss jQuery vor Select2 geladen sein. 20. Changelog Version 1.2.0 — Neuerungen • Volltextsuche (search.php) — Titel, Content, Excerpt, Kategorie mit Highlight • Druckansicht / PDF-Export (print.php) — sauberes Layout ohne UI • Autor-Profilseite (profile.php) — öffentlich, mit Statistiken und Artikel-Grid • Geplante Veröffentlichung — Datum-Picker im Post-Erstellen/Bearbeiten • Lesezeit-Anzeige auf Post-Karten und Detailseite • Sitemap.xml automatisch generiert (sitemap.php) • robots.txt dynamisch mit Sitemap-URL (robots.php) • Kanonische URLs auf allen Seiten • Kommentar-Benachrichtigung per Email bei Antworten • Top-Posts im Dashboard (Top 5 Views + Top 5 Likes) • Mediathek zeigt Bilder, Videos und Audio mit Typ-Filter • Suchfeld direkt im Header auf allen Seiten Version 1.1.0 • Featured-Badge auf Post-Karten • Herz-Bewertungssystem (Cookie-basiert, AJAX) • Besucher-Statistik im Footer • Automatisches Header-Bild von Picsum Photos • Tag-Wolke mit dynamischer Schriftgröße • Banner-Verwaltung (2× 468×60 px) • Newsletter DSGVO Double-Opt-In • RSS-Feed mit Kategorie-Filter • 2-Faktor-Authentifizierung (6-stellig per Email) • PHP 8.4 Kompatibilität Version 1.0.0 — Initial Release • User-System mit 4 Rollen, Post-System mit 4 Typen • Quill.js Editor, Kategorien & Tags, Kommentar-Moderation • Dark Mode, SEO Meta, CSRF-Schutz, Passwort-Reset • 4-Schritt-Installations-Wizard, Bootstrap 5
Photo Portal Besonderheiten: - Text-Wasserzeichen automatisch - Auto-Kategorien aus Titel - 5-Herzen Bewertungssystem - IP-basierte Rating-Sperre - Kostenloses Unsplash Header-Bild - Marineblau/Schwarz/Orange Design - Multi-User fähig - Admin-Panel inkludiert Wasserzeichen-System: - Text-Wasserzeichen unten rechts - Automatische Größenanpassung - Transparenz (Alpha 50) - Unterstützt: JPG, PNG, GIF - Original + Wasserzeichen-Version gespeichert Automatische Kategorien: - Erstes Wort des Titels = Kategorie - Beispiel: Wildtiere im Wald -> Kategorie: Wildtiere - Automatisches Tagging - Filter nach Kategorien Bewertungssystem: - 1-5 Herzen - Pro IP nur 1 Bewertung - Durchschnittsbewertung - Anzahl Bewertungen Multi-User: Jeder Fotograf eigener Account, eigenes Dashboard, Upload-Bereich, Statistiken Admin-Features: Benutzer verwalten (Sperren/Aktivieren), Fotos löschen, Statistiken Upload-Flow: Fotograf lädt Bild hoch (max 10MB), Wasserzeichen-Text eingeben, Titel eingeben, System erstellt Original + Wasserzeichen-Version + Kategorie aus erstem Wort PHP 8.4, GD Library, PDO, CSRF, Bcrypt
🎨 InkVault - Tattoo Portal 📋 Inhaltsverzeichnis 1. [Überblick](überblick) 2. [Features](features) 3. [Systemanforderungen](systemanforderungen) 4. [Installation](installation) 5. [Datenbank-Struktur](datenbank-struktur) 6. [Account-Typen](account-typen) 7. [Funktionen](funktionen) 8. [Werbung-System](werbung-system) 9. [Dateistruktur](dateistruktur) 10. [Konfiguration](konfiguration) 11. [Troubleshooting](troubleshooting) 12. [Sicherheit](sicherheit) 📖 Überblick InkVault ist ein professionelles Tattoo-Portal, das Tätowierer und Tattoo-Enthusiasten zusammenbringt. Benutzer können ihre fertigen Tattoos und Vorlagen hochladen, während Tätowierer vollständige Studio-Profile mit Kontaktmöglichkeiten erstellen können. **Hauptmerkmale:** - 🎨 Separate Bereiche für Tattoos & Vorlagen - 👨🎨 Vollständige Tätowierer-Profile mit Studio-Infos - 🖼️ Automatische WebP-Konvertierung aller Uploads - 💬 Kommentar-System mit Admin-Freigabe - ❤️ Like-System - 🔍 Erweiterte Suche & Filter - 📧 Kontaktformular für Tätowierer - 💬 WhatsApp-Integration - 📢 Flexibles Werbung-System - 🔒 Benutzer-Verwaltung mit Sperr-Funktion ✨ Features Für alle Besucher: - ✅ Tattoo-Galerie durchsuchen (24 pro Seite) - ✅ Vorlagen-Galerie durchsuchen (24 pro Seite) - ✅ Tätowierer finden (nach Stadt/PLZ) - ✅ Lightbox für Bilder - ✅ Filter nach Tags - ✅ Tätowierer kontaktieren Für registrierte User: - ✅ Tattoos hochladen - ✅ Vorlagen hochladen - ✅ Bilder liken ❤️ - ✅ Kommentare schreiben - ✅ Eigene Uploads verwalten Für Tätowierer (Artist-Account): - ✅ Vollständiges Studio-Profil - ✅ Geschäftsadresse & Kontaktdaten - ✅ Öffnungszeiten & Preise - ✅ WhatsApp-Button - ✅ Portfolio (Tattoos & Vorlagen) - ✅ Kontaktanfragen empfangen - ✅ Nachrichtenverwaltung Für Admins: - ✅ Benutzer sperren/löschen - ✅ Kommentare freigeben/ablehnen - ✅ Werbung an 4 Positionen schalten - ✅ Statistiken ansehen - ✅ Vollständige Moderation 💻 Systemanforderungen - **PHP:** 8.0 oder höher - **MySQL:** 5.7 oder höher - **Apache/Nginx** mit mod_rewrite - **Schreibrechte** für /uploads Ordner **PHP Extensions:** - PDO - PDO_MySQL - **GD** (für WebP-Konvertierung - WICHTIG!) - mbstring 📥 Installation Schritt 1: Dateien hochladen bash Alle Dateien in Ihr Webverzeichnis hochladen Beispiel: /public_html/tattoo-portal/ Schritt 2: Ordner-Berechtigungen bash chmod 755 uploads/ chmod 755 uploads/tattoos/ chmod 755 uploads/templates/ chmod 755 uploads/profiles/ Schritt 3: Installation starten 1. **Browser öffnen:** `https://ihre-domain.de/install.php` 2. **Datenbank-Informationen:** - DB Host: `localhost` - DB Name: `tattoo_db` - DB User: `ihr_db_user` - DB Password: `ihr_db_passwort` 3. **Admin-Account erstellen:** - Username: `admin` - Email: `admin@ihre-domain.de` - Password: `sicheres-passwort` 4. **PayPal Email (Optional):** - Leer lassen (Portal ist kostenlos) - Nur für spätere Monetarisierung 5. **Installieren klicken** 6. **install.php wird automatisch gelöscht** Schritt 4: Fertig! Die Installation erstellt automatisch: - ✅ 9 Datenbank-Tabellen - ✅ 4 Werbeplätze (Header, Sidebar, Between, Footer) - ✅ Admin-Account - ✅ config.php mit allen Einstellungen 🗄️ Datenbank-Struktur Tabelle: tp_users sql - id (Primary Key) - username (UNIQUE) - email (UNIQUE) - password_hash - account_type (ENUM: 'user', 'artist') - is_admin (0/1) - is_blocked (0/1) - avatar (WebP) - created_at Tabelle: tp_artist_profiles sql - id (Primary Key) - user_id (Foreign Key → users) - studio_name - bio - address - city - postal_code - phone - whatsapp - email - website - instagram - facebook - opening_hours (TEXT) - price_info (TEXT) - banner (WebP) Tabelle: tp_tattoos sql - id (Primary Key) - user_id (Foreign Key → users) - title - image_path (WebP) - tag (automatisch aus erstem Wort) - views - likes - created_at Tabelle: tp_templates sql - id (Primary Key) - user_id (Foreign Key → users) - title - image_path (WebP) - tag (automatisch aus erstem Wort) - views - likes - created_at Tabelle: tp_likes sql - id (Primary Key) - user_id (Foreign Key → users) - item_id - item_type (ENUM: 'tattoo', 'template') - created_at - UNIQUE: (user_id, item_id, item_type) Tabelle: tp_comments sql - id (Primary Key) - user_id (Foreign Key → users) - item_id - item_type (ENUM: 'tattoo', 'template') - comment (TEXT) - approved (0/1) - created_at Tabelle: tp_ads sql - id (Primary Key) - position (ENUM: 'header', 'sidebar', 'between', 'footer') - title - code (TEXT - HTML/JavaScript) - status (ENUM: 'active', 'inactive') - created_at Tabelle: tp_messages sql - id (Primary Key) - artist_id (Foreign Key → users) - sender_name - sender_email - subject - message (TEXT) - is_read (0/1) - created_at 👤 Account-Typen Bei Registrierung wählbar: **1. Privat (User):** - Tattoos hochladen - Vorlagen hochladen - Liken & Kommentieren - Tätowierer kontaktieren **2. Tätowierer (Artist):** - Alles was User kann PLUS: - Studio-Profil erstellen - Kontaktanfragen empfangen - Portfolio aufbauen - Geschäftsinformationen hinterlegen **3. Admin:** - Wird in Datenbank gesetzt (is_admin = 1) - Volle Kontrolle über Portal 🛠️ Funktionen Upload-System: **1. Tattoos hochladen:** 1. Login 2. Navigation → Upload 3. Typ: \"Tattoo\" wählen 4. Titel eingeben (z.B. \"Tribal Oberarm\") 5. Bild hochladen (JPG/PNG/GIF/WebP) 6. Upload → Automatisch zu WebP konvertiert 7. Tag automatisch generiert (\"tribal\") **2. Vorlagen hochladen:** Gleicher Ablauf, nur Typ: \"Vorlage\" wählen **Tag-System:** - Erstes Wort vom Titel = automatischer Tag - \"Tribal Oberarm\" → Tag: \"tribal\" - \"Drache Rücken\" → Tag: \"drache\" - Suchbar über Filter Tätowierer-Profil einrichten: 1. Als \"Tätowierer\" registrieren 2. Navigation → \"Mein Studio\" 3. Alle Felder ausfüllen: ├─ Profilbild & Banner ├─ Studio-Name ├─ Bio ├─ Adresse (Straße, PLZ, Stadt) ├─ Telefon ├─ WhatsApp (mit Ländercode: +49...) ├─ E-Mail ├─ Website ├─ Instagram & Facebook ├─ Öffnungszeiten └─ Preis-Informationen 4. Speichern 5. Profil ist öffentlich sichtbar Kontaktaufnahme: **Besucher → Tätowierer:** 1. **E-Mail-Formular:** - Auf Artist-Profil - Nachricht senden - Tätowierer erhält Nachricht in \"Nachrichten\" 2. **WhatsApp:** - Click auf WhatsApp-Button - Öffnet WhatsApp Web/App 3. **Telefon:** - Click auf Telefonnummer - Click-to-Call Galerie & Suche: **Tattoos durchsuchen:** 1. Navigation → Tattoos 2. Filter verwenden: ├─ Suche nach Titel └─ Suche nach Tag 3. 24 Bilder pro Seite 4. Click auf Bild → Detail-Ansicht 5. Liken & Kommentieren **Tätowierer finden:** 1. Navigation → Tätowierer 2. Filter: ├─ Nach Stadt └─ Nach PLZ 3. Click auf Profil → Vollständige Infos 📢 Werbung-System 4 Werbeplätze (nur Admin): **1. Header Banner (728x90)** - Position: Unter Navigation - Dateien: index.php - Ideal für: Hauptwerbung **2. Sidebar (300x250)** - Position: Rechte Spalte - Dateien: index.php - Ideal für: Produkte, Dienstleistungen **3. Between Gallery (468x60)** - Position: Zwischen Galerien in Artist-Profil - Dateien: artist.php - Ideal für: Contextual Ads **4. Footer (728x90)** - Position: Vor </body> - Dateien: tattoos.php, templates.php, artists.php, artist.php - Ideal für: Zusätzliche Werbung Werbung verwalten: 1. Als Admin einloggen 2. Navigation → Admin 3. Sektion \"Werbeplätze\" 4. Position wählen 5. Titel eingeben 6. HTML/JavaScript Code einfügen 7. Status: Aktiv/Inaktiv 8. Speichern **Beispiel-Code:** html <div style=\"text-align:center;padding:20px;background:f0f0f0\"> <img src=\"banner.jpg\" alt=\"Werbung\" style=\"max-width:100%\"> </div> oder html <script async src=\"https://pagead2.googlesyndication.com/...\"></script> 📁 Dateistruktur tattoo-portal/ │ ├── config.php Konfiguration (von install.php erstellt) ├── functions.php Hilfsfunktionen ├── install.php Installation │ ├── style.css Design (Lila/Pink Tattoo-Theme) ├── header.php Header mit Logo ├── nav.php Navigation │ ├── index.php Startseite ├── tattoos.php Tattoo-Galerie (24 pro Seite) ├── templates.php Vorlagen-Galerie (24 pro Seite) ├── artists.php Tätowierer-Übersicht ├── artist.php Einzelnes Tätowierer-Profil ├── view.php Detail-Ansicht (Likes, Kommentare) ├── upload.php Upload-Formular │ ├── login.php Login ├── logout.php Logout ├── register.php Registrierung (User/Artist) │ ├── my-studio.php Studio-Verwaltung (nur Artist) ├── messages.php Kontaktanfragen (nur Artist) │ ├── admin.php Admin-Panel │ └── uploads/ ├── tattoos/ Tattoo-Bilder (WebP) │ └── index.php Schutz ├── templates/ Vorlagen-Bilder (WebP) │ └── index.php Schutz └── profiles/ Profilbilder (WebP) └── index.php Schutz ⚙️ Konfiguration config.php (wird von install.php erstellt) php <?php // Datenbank define(\"DB_HOST\", \"localhost\"); define(\"DB_NAME\", \"tattoo_db\"); define(\"DB_USER\", \"db_user\"); define(\"DB_PASS\", \"db_password\"); define(\"DB_PREFIX\", \"tp_\"); // Site define(\"SITE_NAME\", \"InkVault\"); define(\"ITEMS_PER_PAGE\", 24); Anpassungen: **Site-Name ändern:** php define(\"SITE_NAME\", \"Tattoo Gallery\"); **Bilder pro Seite ändern:** php define(\"ITEMS_PER_PAGE\", 48); // Standard: 24 📸 Bildverarbeitung Automatische WebP-Konvertierung: **Alle hochgeladenen Bilder werden automatisch zu WebP konvertiert:** - ✅ JPG → WebP - ✅ JPEG → WebP - ✅ PNG → WebP (mit Transparenz) - ✅ GIF → WebP - ✅ WebP → WebP (kopiert) **Qualität:** 85% **Vorteile:** - Kleinere Dateigröße - Schnellere Ladezeiten - Moderne Browser-Unterstützung **Funktion in functions.php:** php convertToWebP($source, $destination, $quality = 85) uploadImage($file, $folder, $maxSize = 10000000) 👥 Benutzung Als Besucher (nicht eingeloggt): 1. **Startseite besuchen** 2. **Galerien durchsuchen:** - Tattoos anschauen - Vorlagen anschauen - Tätowierer finden 3. **Tätowierer kontaktieren** (via Formular) Als User (Privat-Account): 1. **Registrieren:** Account-Typ \"Privat\" wählen 2. **Tattoos hochladen:** - Upload → Typ \"Tattoo\" - Titel: \"Tribal Oberarm\" - Bild hochladen - Automatisch Tag: \"tribal\" 3. **Vorlagen hochladen:** - Upload → Typ \"Vorlage\" - Titel: \"Drache Rücken\" - Automatisch Tag: \"drache\" 4. **Interagieren:** - Bilder liken ❤️ - Kommentare schreiben - Tätowierer kontaktieren Als Tätowierer (Artist-Account): 1. **Registrieren:** Account-Typ \"Tätowierer\" wählen 2. **Studio-Profil erstellen:** - Navigation → \"Mein Studio\" - Alle Informationen eingeben: - Studio-Name: \"Ink & Art Studio\" - Bio: Beschreibung des Studios - Adresse: Straße, PLZ, Stadt - Telefon: 0123456789 - WhatsApp: +49123456789 - E-Mail: studio@example.de - Website: https://studio-website.de - Instagram: username (ohne @) - Facebook: Seitenname - Öffnungszeiten: Mo-Fr: 10-18 Uhr Sa: 10-16 Uhr So: Geschlossen - Preise: Beratung: Kostenlos Ab 80€ pro Stunde Mindestsatz: 60€ - Profilbild & Banner hochladen - Speichern 3. **Portfolio aufbauen:** - Tattoos hochladen - Vorlagen hochladen - Alles erscheint im Profil 4. **Kontaktanfragen verwalten:** - Navigation → \"Nachrichten\" - Neue Nachrichten sehen - Per E-Mail antworten - Als gelesen markieren - Löschen Als Admin: 1. **Admin-Panel öffnen:** - Navigation → Admin - Dashboard mit Statistiken 2. **Benutzer verwalten:** - User sperren (🚫) - User löschen (🗑️) - Account-Typ sehen - Registrierungsdatum 3. **Kommentare moderieren:** - Wartende Kommentare anzeigen - Freigeben (✓) - Ablehnen/Löschen (🗑️) - Zum Bild springen 4. **Werbung schalten:** - 4 Positionen verfügbar - Code einfügen (HTML/JS) - Status setzen (Aktiv/Inaktiv) - Titel bearbeiten 🎯 Tag-System Automatische Tag-Generierung: **Wie es funktioniert:** Titel: \"Tribal Oberarm Schwarz\" → Tag: \"tribal\" Titel: \"Drache Rücken Bunt\" → Tag: \"drache\" Titel: \"Rose Klein Handgelenk\" → Tag: \"rose\" **Erstes Wort wird kleingeschrieben und als Tag gespeichert.** Suche nach Tags: 1. Tattoos/Vorlagen-Seite 2. Filter: Tag eingeben 3. Nur Bilder mit diesem Tag anzeigen **Beliebte Tags:** - tribal - drache - rose - skull - mandala - blackwork - realistisch - oldschool 🔍 Suche & Filter Tattoos/Vorlagen: **Filter-Optionen:** - 🔤 **Titel:** Freitext-Suche - 🏷️ **Tag:** Nach Kategorie filtern **Beispiel:** Titel: \"Drache\" Tag: \"tribal\" → Zeigt alle Tribal-Tattoos mit \"Drache\" im Titel Tätowierer: **Filter-Optionen:** - 🏙️ **Stadt:** z.B. \"Berlin\" - 📮 **PLZ:** z.B. \"10115\" oder \"101\" (Teilsuche) **Beispiel:** Stadt: \"München\" → Zeigt alle Tätowierer in München 💬 Kommentar-System Ablauf: 1. **User schreibt Kommentar:** - Auf Tattoo/Vorlage Detail-Seite - Kommentar eingeben - Abschicken - Status: **Pending** (approved = 0) 2. **Admin prüft Kommentar:** - Admin-Panel → Wartende Kommentare - Kommentar lesen - Freigeben oder Löschen 3. **Kommentar wird sichtbar:** - Nach Freigabe - Unter dem Bild angezeigt - Chronologisch sortiert **Schutz vor Spam/Hate:** - Alle Kommentare müssen genehmigt werden - Admin kann unangemessene Kommentare löschen 📧 Kontakt-System Kontaktformular: **Besucher kontaktiert Tätowierer:** 1. **Artist-Profil öffnen** 2. **Kontakt-Bereich:** - Name eingeben - E-Mail eingeben - Betreff (optional) - Nachricht schreiben - Senden 3. **Tätowierer erhält Nachricht:** - Navigation → Nachrichten - Benachrichtigung \"NEU\" - Kann per E-Mail antworten WhatsApp-Integration: **WhatsApp-Button auf Artist-Profil:** Telefon: +49123456789 → WhatsApp-Button erscheint → Click öffnet wa.me/49123456789 **Format:** Ländercode ohne + in URL 🖼️ Lightbox Funktion: - Click auf Bild in Galerie - Bild öffnet sich groß - Dunkler Hintergrund - Click außerhalb → Schließen - X-Button → Schließen **JavaScript:** javascript function openLightbox(src, title) { document.getElementById('lightbox').classList.add('active'); document.getElementById('lightbox-img').src = src; document.getElementById('lightbox-img').alt = title; } function closeLightbox() { document.getElementById('lightbox').classList.remove('active'); } 🐛 Troubleshooting Problem: WebP-Konvertierung funktioniert nicht **Lösung:** 1. PHP GD Extension installiert? bash php -m | grep -i gd 2. WebP-Support in GD aktiviert? php <?php phpinfo(); ?> // Suche nach \"WebP Support\" 3. Falls nicht installiert: bash Ubuntu/Debian sudo apt-get install php-gd sudo systemctl restart apache2 Problem: \"DB Error\" bei Installation **Lösung:** 1. Datenbank existiert? 2. User hat CREATE TABLE Rechte? 3. Credentials korrekt? 4. MySQL-Server läuft? Problem: Bilder werden nicht angezeigt **Lösung:** 1. Ordner-Berechtigungen: bash chmod 755 uploads/ chmod 755 uploads/tattoos/ chmod 755 uploads/templates/ chmod 755 uploads/profiles/ 2. PHP upload_max_filesize erhöhen 3. Pfad in Datenbank prüfen (sollte OHNE \"uploads/\" sein) Problem: \"Headers already sent\" **Lösung:** 1. Keine Ausgabe vor session_start() 2. UTF-8 ohne BOM speichern 3. Keine Leerzeilen am Anfang Problem: Kommentare werden nicht angezeigt **Checklist:** - ✅ Kommentar geschrieben? - ✅ Admin hat freigegeben? (approved = 1) - ✅ Browser-Cache geleert? Problem: WhatsApp-Button funktioniert nicht **Lösung:** 1. Telefonnummer mit Ländercode: +49123456789 2. Keine Leerzeichen oder Sonderzeichen 3. Format wird automatisch bereinigt in Link Problem: Upload schlägt fehl **Lösung:** 1. Datei zu groß? (max 10 MB) 2. Richtiges Format? (JPG, PNG, GIF, WebP) 3. GD Extension aktiv? 4. Schreibrechte auf uploads/? 🔐 Sicherheit Implementierte Schutzmaßnahmen: 1. **SQL Injection geschützt:** - PDO Prepared Statements - Keine direkte String-Konkatenation 2. **XSS geschützt:** - htmlspecialchars() für alle Ausgaben - e() Helper-Funktion 3. **CSRF Schutz:** - Session-basierte Authentifizierung - Regeneration nach Login 4. **File Upload Sicherheit:** - Whitelist für Dateitypen - Größenbeschränkung (10 MB) - Eindeutige Dateinamen (uniqid()) - Directory Listing deaktiviert (index.php) 5. **Session-Sicherheit:** - session_regenerate_id() - Sichere Logout-Funktion - HTTPOnly Cookies Beste Praktiken: 1. **SSL/HTTPS verwenden** (Let's Encrypt kostenlos) 2. **Starkes Admin-Passwort** 3. **Regelmäßige Backups** 4. **PHP aktuell halten** 5. **Mod_Security aktivieren** .htaccess für uploads/: apache <FilesMatch \"\.(php|php3|php4|php5|phtml)$\"> Order Allow,Deny Deny from all </FilesMatch> 💡 Tipps & Tricks Performance optimieren: 1. **Bilder vor Upload optimieren** - Auflösung max 1920x1920 - WebP spart Speicher 2. **Datenbank-Indizes nutzen** - Bereits vorhanden für: - Tags - Städte - PLZ - created_at 3. **Caching aktivieren:** php // In .htaccess <IfModule mod_expires.c> ExpiresActive On ExpiresByType image/webp \"access plus 1 year\" </IfModule> SEO optimieren: 1. **Alt-Tags:** - Titel wird automatisch als alt= verwendet - Gut für Suchmaschinen 2. **Sitemap erstellen:** - Für Tattoos/Vorlagen - Für Artist-Profile 3. **Meta-Tags hinzufügen:** - Open Graph für Social Sharing - Description Tags Werbung optimieren: 1. **A/B Testing:** - Verschiedene Positionen testen - Click-Through-Rate messen 2. **Responsive Ads:** - Mobile-freundliche Banner - Flexible Größen 3. **Google AdSense:** - Code in Admin einfügen - Auto-Ads aktivieren 📊 Admin-Panel Dashboard: **Statistiken:** - Anzahl Benutzer - Anzahl Tattoos - Anzahl Vorlagen - Wartende Kommentare Funktionen: **1. Werbeplätze verwalten:** Header Banner → 728x90 → Unter Navigation Sidebar → 300x250 → Rechts Between Gallery → 468x60 → In Artist-Profil Footer → 728x90 → Am Ende **2. Kommentare moderieren:** Für jeden Kommentar: ├─ Username sehen ├─ Kommentar lesen ├─ ✓ Freigeben ├─ 🗑️ Löschen └─ 👁️ Zum Bild springen **3. Benutzer verwalten:** User-Tabelle: ├─ ID ├─ Username ├─ Email ├─ Typ (User/Artist/Admin) ├─ Status (Aktiv/Gesperrt) ├─ Registrierungsdatum └─ Aktionen: ├─ 🚫 Sperren/Entsperren └─ 🗑️ Löschen 🎨 Design-Anpassungen Farben ändern (style.css): css :root { --primary: 667eea; /* Lila */ --secondary: 764ba2; /* Dunkellila */ --accent: e94560; /* Pink/Rot */ --dark: 1a1a2e; /* Dunkelblau */ --darker: 0f0f1e; /* Fast Schwarz */ } Header-Bild ändern: **In style.css:** css .header { background: linear-gradient(...), url('IHR-BILD.jpg') center/cover; } **Kostenlose Tattoo-Bilder:** - Pixabay: https://pixabay.com/de/images/search/tattoo/ - Unsplash: https://unsplash.com/s/photos/tattoo - Pexels: https://www.pexels.com/search/tattoo/ Layout anpassen: **Bilder pro Zeile ändern (style.css):** css .gallery { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Kleinerer Wert = mehr Bilder pro Zeile */ } 📱 Responsive Design **Breakpoints:** - Desktop: > 768px (volle Navigation) - Mobile: ≤ 768px (Icons only) **Mobile Optimierungen:** - Navigation klappt zu Icons - Sidebar verschwindet - Grid passt sich an - Touch-optimiert 🔄 Backup & Wartung Regelmäßige Backups: **1. Datenbank:** bash mysqldump -u user -p tattoo_db > backup_$(date +%Y%m%d).sql **2. Uploads:** bash tar -czf uploads_backup_$(date +%Y%m%d).tar.gz uploads/ Updates: 1. Backup erstellen 2. Neue Dateien hochladen 3. config.php NICHT überschreiben 4. Testen 📞 Support Bei Problemen: 1. **README durchlesen** (diese Datei) 2. **Troubleshooting-Sektion** checken 3. **PHP Error Logs** prüfen 4. **Browser Console** (F12) prüfen Häufige Fehler: **500 Error:** - PHP Syntaxfehler - Fehlende Extension (GD) - Dateiberechtigungen **404 Error:** - mod_rewrite nicht aktiviert - .htaccess fehlt **Blank Page:** - PHP Error Reporting aktivieren - error_log prüfen 📜 Changelog Version 1.0 (Aktuell) **Features:** - ✅ Dual Account-System (User/Artist) - ✅ Automatische WebP-Konvertierung - ✅ Tag-Generierung aus Titel - ✅ Kommentar-System mit Moderation - ✅ Like-System - ✅ Studio-Profile für Tätowierer - ✅ Kontaktformular - ✅ WhatsApp-Integration - ✅ 4 Werbeplätze - ✅ Admin-Panel - ✅ Suche & Filter - ✅ Lightbox - ✅ Responsive Design 🎯 Roadmap (Zukünftige Features) Mögliche Erweiterungen: - [ ] **Bewertungs-System** (1-5 Sterne für Tätowierer) - [ ] **Buchungs-System** (Termine online buchen) - [ ] **Portfolio-Downloads** (ZIP mit allen Bildern) - [ ] **Social Sharing** (Teilen auf Instagram/Facebook) - [ ] **Newsletter-System** - [ ] **Favoriten-Liste** für User - [ ] **Erweiterte Analytics** (Google Analytics) - [ ] **Multi-Sprache** (EN/DE) - [ ] **Push-Benachrichtigungen** - [ ] **API für Mobile Apps** 🏆 Best Practices Für Tätowierer: 1. **Qualitativ hochwertige Fotos verwenden** 2. **Profil vollständig ausfüllen** 3. **Regelmäßig Portfolio aktualisieren** 4. **Auf Kontaktanfragen schnell antworten** 5. **Öffnungszeiten aktuell halten** Für User: 1. **Aussagekräftige Titel wählen** - ✅ \"Tribal Oberarm Schwarz\" - ❌ \"Mein Tattoo\" 2. **Gute Fotos hochladen** - Heller Hintergrund - Gute Auflösung - Tattoo im Fokus 3. **Tags nutzen** - Erste Wort = wichtig - Beschreibende Begriffe Für Admins: 1. **Kommentare zeitnah freigeben** 2. **Spam/Hate konsequent löschen** 3. **User nur bei Verstößen sperren** 4. **Werbung dezent platzieren** 5. **Regelmäßig Statistiken prüfen** 🌟 Highlights Was macht InkVault besonders? 1. **🎨 Dual-System:** - Tattoos UND Vorlagen getrennt - Verschiedene Zielgruppen 2. **👨🎨 Tätowierer-freundlich:** - Vollständige Studio-Profile - WhatsApp-Integration - Kontaktformular - Portfolio-Präsentation 3. **⚡ Performance:** - WebP = schnelle Ladezeiten - Optimierte Datenbank - Responsive Images 4. **🛡️ Sicherheit:** - Kommentar-Moderation - User-Sperre möglich - Upload-Schutz 5. **🔍 Benutzerfreundlich:** - Automatische Tags - Intuitive Suche - Lightbox - Mobile-optimiert 📄 Lizenz Proprietär - Alle Rechte vorbehalten 🎉 Viel Erfolg mit InkVault! **Entwickelt mit ❤️ für die Tattoo-Community** Bei Fragen oder Problemen: README durchlesen oder Admin kontaktieren. **Version:** 1.0 **Letzte Aktualisierung:** Januar 2025 **Sprache:** Deutsch 🇩🇪