diff --git a/Diplomarbeitsbuch-individueller-teil-Adam-Gaiswinkler.md b/Diplomarbeitsbuch-individueller-teil-Adam-Gaiswinkler.md index c8d7a17..facf6b0 100644 --- a/Diplomarbeitsbuch-individueller-teil-Adam-Gaiswinkler.md +++ b/Diplomarbeitsbuch-individueller-teil-Adam-Gaiswinkler.md @@ -38,9 +38,55 @@ Das Projektteam wurde im Verlauf des Projekts von sechs auf drei Personen reduzi ### Architekturentscheidungen --- ## 6. Entwicklung des Oqtane Themes -### Ziel des Themes -### Technische Umsetzung -### Herausforderungen +### 6.1 Ziel des Themes + +Im Rahmen des Projekts AlumniHub wurde ein eigenes Theme für das Content-Management-System Oqtane entwickelt. Ziel dieser Entwicklung war es, das Standarddesign von Oqtane vollständig durch eine projektspezifische Benutzeroberfläche zu ersetzen, die den Anforderungen des Absolventenvereins entspricht. Dabei standen Übersichtlichkeit, Benutzerfreundlichkeit sowie eine moderne und konsistente Gestaltung im Vordergrund. Das Theme sollte zudem auf unterschiedlichen Endgeräten – sowohl Desktop als auch mobil – optimal dargestellt werden. + +--- + +### 6.2 Technische Umsetzung + +Als technische Grundlage diente die Theme-Architektur von Oqtane. Das Layout wurde in einer Razor-Datei (`Theme.razor`) definiert, welche von der Basisklasse `ThemeBase` erbt. Dadurch stehen zentrale Funktionen wie Seitenzustand (`PageState`), Navigation und Systemeinstellungen automatisch zur Verfügung. + +#### Navigationsleiste + +Im oberen Bereich wurde eine fixierte Navigationsleiste implementiert, die drei Hauptbereiche umfasst: links das Logo der Schule, in der Mitte die dynamisch generierten Navigationspunkte und rechts die Benutzerfunktionen (Login, Registrierung, Profil). Da die Standardkomponente `` von Oqtane auch interne Systemseiten wie Login, Register oder NotFound ausgibt, wurde auf diese verzichtet. Stattdessen wurden eigene Komponenten implementiert, die von `MenuBase` bzw. `MenuItemsBase` erben. Die Seitenliste wird dabei über `PageState.Pages` abgerufen und mittels LINQ gefiltert – es werden nur Root-Seiten (`ParentId == null`) angezeigt, die als Navigationsseite markiert sind und nicht in einer definierten Ausschlussliste (`hiddenNames`) stehen. + +```csharp +var hiddenNames = new[] +{ + "Login", "Register", "Reset", "Profile", + "Search", "Privacy", "Terms", "Not Found", "Admin" +}; + +foreach (var item in PageState.Pages + .Where(p => p.ParentId == null + && !hiddenNames.Contains(p.Name))) +{ + + @item.Name + +} +``` + +#### Responsive Design / Burger-Menü + +Für mobile Endgeräte wurde ein Burger-Menü implementiert. Das Öffnen und Schließen der Sidebar erfolgt über eine CSS-Checkbox-Lösung ohne zusätzliche Frameworks. Die Sidebar zeigt alle Navigationspunkte vertikal untereinander an, wobei Login- und Registrierungsfunktionen am unteren Rand fixiert sind und unabhängig von der Anzahl der Menüpunkte stets sichtbar bleiben. + +#### Pane-Struktur + +Für den Inhaltsbereich wurden mehrere Panes definiert (z.B. `Top 100%`, `Left 50%`, `Right Sidebar 33%`, `Bottom 100%`), die als flexible Platzhalter für Module dienen. Dadurch können Seiteninhalte ohne Änderungen am Theme-Code strukturiert werden. + +#### Weitere Integrationen + +Zusätzlich wurden die Cookie-Consent-Komponente sowie das ControlPanel für Administratoren integriert. Login- und Registrierungsoptionen werden über den `SettingService` aus den Site-Einstellungen geladen, sodass diese ohne Code-Anpassung gesteuert werden können. + +--- + +### 6.3 Herausforderungen + +Eine der zentralen Herausforderungen bei der Entwicklung des Themes war die korrekte Filterung der Navigationsseiten. Die von Oqtane bereitgestellten Blazor-Standardkomponenten für die Navigation verhielten sich dabei nicht wie erwartet, da sie auch interne Systemseiten wie Login, Register oder NotFound in der Hauptnavigation ausgaben und keine ausreichende Möglichkeit boten, diese gezielt auszublenden. Aus diesem Grund wurde auf die Standardkomponenten verzichtet und stattdessen eine eigene Implementierung entwickelt. Durch den direkten Zugriff auf `PageState.Pages` sowie eine LINQ-basierte Filterlogik konnten die anzuzeigenden Seiten vollständig kontrolliert und Systemseiten zuverlässig ausgeblendet werden. + --- ## 7. Umsetzung der Module ### 7.1 Anmeldetool