# 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

```
<!-- Screenshot Platzhalter -->
[📸 Screenshot: Registrierungsformular]
[📸 Screenshot: reCAPTCHA Badge]
```

---

## 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]
```

---

## 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>