155 lines
4.2 KiB
Markdown
155 lines
4.2 KiB
Markdown
# 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]
|
|
```
|
|
|
|
---
|
|
|
|
## 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> |