# HUGE - Elias Fähnrich

---

## Anpassung der Useranmeldung

#### Registrierung ohne Captcha und E-Mail-Verifikation

**Beschreibung:**
Die Registrierung wurde so angepasst, dass Benutzer ohne Captcha und E-Mail-Verifikation registriert werden können. Benutzer werden nach der Registrierung automatisch aktiviert.

**Technische Umsetzung:**
- Entfernung des Captcha-Features aus dem Registrierungsprozess
- Deaktivierung der E-Mail-Verifizierung
- Automatische Aktivierung neuer Benutzerkonten
- Vereinfachung des Registrierungsformulars

**Admin-Funktion:**
- Nur Administratoren können über das gleiche Formular neue Benutzer anlegen
- Sicherstellung, dass nur autorisierte Personen Benutzerkonten erstellen können

```
<!-- Screenshot Platzhalter -->
[📸 Screenshot: Vereinfachtes Registrierungsformular]
[📸 Screenshot: Admin-Benutzererstellung]
[📸 Screenshot: Automatisch aktivierter Benutzer]
```

---

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