278 lines
8.5 KiB
Markdown
278 lines
8.5 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
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
## 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> |