Scripte-Pay
InkVault - Tattoo Portal für Tätowierer und Liebhaber
🎨 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 🇩🇪
📋 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
- website
- 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...)
├─ 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
├─ 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 🇩🇪
