208 lines
5.9 KiB
Markdown
208 lines
5.9 KiB
Markdown
# 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> |