# HUGE - Elias Fähnrich

---

## Anpassung der Useranmeldung

#### Registrierung mit Google reCAPTCHA v3

**Beschreibung:**
Die Registrierung wurde mit Google reCAPTCHA v3 abgesichert. reCAPTCHA v3 arbeitet unsichtbar im Hintergrund und analysiert das Benutzerverhalten, um Bots zu erkennen. E-Mail-Verifizierung ist deaktiviert - Benutzer werden nach der Registrierung automatisch aktiviert.

**Technische Umsetzung:**
- Integration von Google reCAPTCHA v3 (unsichtbar, keine Checkbox)
- Score-basierte Validierung (0.0 = Bot, 1.0 = Mensch)
- Blockierung bei Score unter 0.5
- Konfiguration über `RECAPTCHA_SITE_KEY` und `RECAPTCHA_SECRET_KEY`

**Code-Beispiel (View):**
```html
<script src="https://www.google.com/recaptcha/api.js?render=SITE_KEY"></script>
<script>
grecaptcha.ready(function() {
    grecaptcha.execute('SITE_KEY', {action: 'register'}).then(function(token) {
        document.getElementById('recaptcha-response').value = token;
    });
});
</script>
```

**Code-Beispiel (Server-Validierung):**
```php
$response = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret=' . $secret_key . '&response=' . $recaptcha_response);
$response_data = json_decode($response);
if (!$response_data->success || $response_data->score < 0.5) {
    // Bot erkannt oder Validierung fehlgeschlagen
}
```

**Vorteile von v3:**
- Keine Benutzerinteraktion erforderlich
- Bessere User Experience
- Intelligente Bot-Erkennung durch Verhaltensanalyse

![img.png](assets/screenshots/img.png)
![img.png](assets/screenshots/img2.png)
![img.png](assets/screenshots/img3.png)
---

## Erweiterung der Admin-Funktionen

#### 👥 Benutzergruppen-Verwaltung

**Beschreibung:**
Implementierung einer erweiterten Benutzerverwaltung mit Gruppen-System. Anstelle des einfachen Typen-Feldes wurde eine vollwertige Gruppenverwaltung eingeführt.

**Gruppenstruktur:**
- **Admin (Typ 7)**: Voll administrative Rechte
- **Gast (Typ 1)**: Leserechte für öffentliche Inhalte
- **Normaler Benutzer (Typ 2)**: Standard-Benutzerrechte
- **Typen 3-6**: Reserviert für zukünftige Gruppenerweiterungen

**Technische Umsetzung:**
- Erstellung einer neuen Tabelle `user_groups` zur Gruppendefinition
- Zuweisung von Gruppennamen zu den Typen
- Integration in die Benutzerverwaltung des Admins

#### Öffentliches Benutzerverzeichnis mit DataTables

**Beschreibung:**
Implementierung einer öffentlichen Benutzerliste, die alle Benutzer und ihre Gruppen anzeigt. Diese Liste ist für alle zugänglich, jedoch schreibgeschützt.

**Technische Features:**
- Integration von DataTables/jQuery für interaktive Tabellen
- Sortier- und Filterfunktionen
- Paginierung der Benutzerliste
- Responsive Darstellung auf verschiedenen Geräten

**Zugriffsrechte:**
- **Öffentlicher Zugriff**: Nur Anzeige der Benutzerliste
- **Admin-Zugriff**: Vollständige Verwaltungsfunktionen

```
<!-- Screenshot Platzhalter -->
[📸 Screenshot: Admin-Gruppenzuweisung]
[📸 Screenshot: Öffentliches Benutzerverzeichnis mit DataTables]
[📸 Screenshot: jQuery DataTables in Aktion]
```

---

## Notizen-App

#### Persönliche Notizen mit Markdown-Unterstützung

**Beschreibung:**
Implementierung einer vollständigen Notizen-Anwendung mit CRUD-Funktionalität (Create, Read, Update, Delete). Benutzer können persönliche Notizen erstellen, bearbeiten und löschen.

**Features:**
- **Markdown-Unterstützung**: Notizen werden mit SimpleMarkdown gerendert
- **AJAX-Integration**: Alle Operationen ohne Seiten-Neuladung
- **Benutzergebunden**: Jeder Benutzer sieht nur seine eigenen Notizen
- **Echtzeit-Vorschau**: Markdown wird direkt in HTML umgewandelt

**Technische Umsetzung:**
- NoteController mit vollständiger CRUD-Implementierung
- NoteModel für Datenbankoperationen
- SimpleMarkdown-Library für Markdown-Parsing
- AJAX-Endpoints für dynamische Interaktion

**Zugriffsrechte:**
- Nur für angemeldete Benutzer verfügbar
- Jeder Benutzer hat nur Zugriff auf seine eigenen Notizen

```
<!-- Screenshot Platzhalter -->
[📸 Screenshot: Notizen-Übersicht]
[📸 Screenshot: Notiz erstellen/bearbeiten]
[📸 Screenshot: Markdown-Vorschau]
```

---

## Bildergalerie mit Verschlüsselung

#### Sichere Bildergalerie mit AES-256 Verschlüsselung

**Beschreibung:**
Implementierung einer vollständigen Bildergalerie mit clientseitiger Vorschau und serverseitiger AES-256-CBC Verschlüsselung. Alle hochgeladenen Bilder werden verschlüsselt gespeichert und erst beim Abruf entschlüsselt.

**Features:**
- **AES-256-CBC Verschlüsselung**: Jedes Bild wird mit einem einzigartigen Schlüssel verschlüsselt
- **Automatische Thumbnail-Generierung**: Optimierte Vorschaubilder für schnelles Laden
- **Drag & Drop Upload**: Moderne Upload-Oberfläche mit Datei-Drag & Drop
- **AJAX-Upload mit Fortschrittsanzeige**: Echtzeit-Feedback während des Uploads
- **Öffentliche/Private Bilder**: Benutzer können Sichtbarkeit ihrer Bilder steuern
- **Bildvorschau vor Upload**: Clientseitige Vorschau des ausgewählten Bildes

**Technische Umsetzung:**

*Verschlüsselung (Upload):*
```php
$encryption_key = bin2hex(random_bytes(32));
$iv = random_bytes(openssl_cipher_iv_length('AES-256-CBC'));
$encrypted_image = openssl_encrypt($image_data, 'AES-256-CBC', $encryption_key, OPENSSL_RAW_DATA, $iv);
$encrypted_image = base64_encode($iv . $encrypted_image);
```

*Entschlüsselung (Anzeige):*
```php
$encrypted_data = base64_decode(file_get_contents($filepath));
$iv = substr($encrypted_data, 0, $iv_length);
$encrypted_data = substr($encrypted_data, $iv_length);
$decrypted = openssl_decrypt($encrypted_data, 'AES-256-CBC', $encryption_key, OPENSSL_RAW_DATA, $iv);
```

**Datenbankstruktur:**
```sql
CREATE TABLE `gallery` (
    `id` int(11) NOT NULL AUTO_INCREMENT,
    `user_id` int(11) NOT NULL,
    `filename` varchar(255) NOT NULL,
    `thumb_filename` varchar(255) NOT NULL,
    `title` varchar(255) NOT NULL,
    `description` text,
    `is_public` tinyint(1) NOT NULL DEFAULT 1,
    `file_size` int(11) NOT NULL DEFAULT 0,
    `mime_type` varchar(100) NOT NULL,
    `encryption_key` varchar(64) NOT NULL,
    `created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
    PRIMARY KEY (`id`)
);
```

**Unterstützte Formate:**
- JPEG / JPG
- PNG (mit Transparenz-Erhaltung)
- GIF
- WebP

**Zugriffsrechte:**
- **Öffentliche Galerie**: Alle öffentlichen Bilder für jeden sichtbar
- **Meine Bilder**: Nur eigene Bilder (öffentlich und privat)
- **Upload/Bearbeiten/Löschen**: Nur für angemeldete Benutzer

```
<!-- Screenshot Platzhalter -->
[📸 Screenshot: Galerie-Übersicht mit Bildraster]
[📸 Screenshot: Upload-Formular mit Drag & Drop Zone]
[📸 Screenshot: Upload-Fortschrittsanzeige]
[📸 Screenshot: Einzelbildansicht]
[📸 Screenshot: Meine Bilder - Verwaltung]
```

---

## jQuery - Einführung und Grundlagen

#### JavaScript Basics
jQuery ist eine JavaScript-Bibliothek, die grundlegende JavaScript-Kenntnisse voraussetzt. Wichtige Grundlagen umfassen:

- DOM-Manipulation
- Event-Handling
- Asynchrone Programmierung
- Objektorientierte Programmierung

#### jQuery Grundlagen
Die jQuery-Bibliothek ist zentral für die Interaktivität der Benutzeroberfläche:

**Einbindung:**
```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
```

**Zentrale Elemente:**
- **Dollarzeichen ($)**: Hauptselektor für DOM-Elemente
- **Basis-Syntax**: `$("element")`
- **Document Ready**: `$(document).ready(function(){ ... })`

**Wichtige Selektoren:**
```javascript
// ID-Selektor (schnellste Methode)
$("#elementId")

// Klassen-Selektor
$(".klassenname")

// Multi-Selektor
$("div, p, a, span")

// Komplexe Selektoren
$("#container .item:first-child")
```

**DOM-Manipulation:**
```javascript
// Einzelne Eigenschaft ändern
$("#test").css("color", "#FFFFFF");

// Mehrere Eigenschaften ändern
$("#test").css({ 
    "color": "#FFFFFF", 
    "height": "25px" 
});

// Methodenverkettung (Chaining)
$("#test")
    .css({ "color": "#FFFFFF", "height": "25px" })
    .html("Neuer Text")
    .show();
```

#### DataTables Integration
DataTables erweitert HTML-Tabellen um leistungsstarke Funktionen:

```javascript
$(document).ready(function() {
    $('#benutzerTabelle').DataTable({
        "language": {
            "url": "//cdn.datatables.net/plug-ins/1.10.25/i18n/German.json"
        },
        "pageLength": 25,
        "responsive": true
    });
});
```

**Features:**
- Automatische Sortierung aller Spalten
- Suchfunktion in Echtzeit
- Paginierung mit anpassbarer Seitenlänge
- Responsive Darstellung auf mobilen Geräten
- Mehrsprachige Unterstützung (Deutsch implementiert)

---

<div align="center">
  <img src="./assets/footer/gray0_ctp_on_line.svg"  alt="Gadze"/>
</div>