Update search-results.php

Reviewed-on: #51

content/search-results.php

@@ -5,17 +5,47 @@ if (session_status() === PHP_SESSION_NONE) {
 
 $all_results = $_SESSION["search_results"] ?? [];
 $query       = $_SESSION["search_query"] ?? "";
-$totalResultsCount = count($all_results);
+
+// ---------------------------------------------------------------
+// Parameter aus der URL lesen & validieren
+// ---------------------------------------------------------------
+$allowedCategories = [
+        'all', 'Deutsch', 'Englisch', 'Franzoesisch', 'Latein', 'Literatur',
+        'Mathematik', 'Biologie', 'Informatik', 'Chemie', 'Physik', 'Astronomie',
+        'Geschichte', 'Erdkunde', 'Sozialkunde', 'Wirtschaftskunde', 'Religion',
+        'Ethikunterricht', 'Philosophie', 'Psychologie', 'Kunst', 'Musik',
+        'Theater', 'Technik', 'Werken', 'Hauswirtschaft', 'Sport',
+];
+
+$category = $_GET['category'] ?? 'all';
+if (!in_array($category, $allowedCategories, true)) {
+    $category = 'all';
+}
 
 $limit = isset($_GET['limit']) ? (int)$_GET['limit'] : 10;
-if (!in_array($limit, [10, 20, 50, 100])) {
+if (!in_array($limit, [10, 20, 50, 100], true)) {
     $limit = 10;
 }
 
-// Gesamtseitenzahl
-$totalPages = max(1, ceil($totalResultsCount / $limit));
+$currentSort = $_SESSION['search_sort'] ?? 'alphabet';
+
+// ---------------------------------------------------------------
+// Diese Berechnung ist der Server-seitige Fallback für Nutzer ohne
+// JavaScript. Sobald JS aktiv ist, übernimmt js/search-results.js
+// Filterung, Sortierung und Pagination komplett im Browser (auf
+// Basis des unten eingebetteten JSON-Datensatzes) und überschreibt
+// diese Ausgabe live, ohne dass eine neue Seite geladen wird.
+// ---------------------------------------------------------------
+$filteredResults = $all_results;
+if ($category !== 'all') {
+    $filteredResults = array_values(array_filter($filteredResults, function ($item) use ($category) {
+        return ($item['category'] ?? '') === $category;
+    }));
+}
+
+$totalResultsCount = count($filteredResults);
+$totalPages = max(1, (int)ceil($totalResultsCount / $limit));
 
-// Aktuelle Seite auslesen und validieren
 $currentPage = isset($_GET['page']) ? (int)$_GET['page'] : 1;
 if ($currentPage < 1) {
     $currentPage = 1;
@@ -23,17 +53,45 @@ if ($currentPage < 1) {
     $currentPage = $totalPages;
 }
 
-// Startpunkt im Array berechnen (Offset)
 $offset  = ($currentPage - 1) * $limit;
-
-// Nur die Ergebnisse für die aktuelle Seite ausschneiden
-//$results = array_slice($all_results, $offset, $limit);
-$results = $all_results;
+$results = array_slice($filteredResults, $offset, $limit);
 $resultCount = count($results);
 
+// Hilfsfunktion, um Pagination-Links zu bauen, die alle aktuellen
+// Parameter (q, sort, limit, category) beibehalten.
+function buildPageUrl(int $page, string $query, string $sort, int $limit, string $category): string
+{
+    $params = [
+            'pfad'     => 'search-results',
+            'q'        => $query,
+            'sort'     => $sort,
+            'limit'    => $limit,
+            'category' => $category,
+            'page'     => $page,
+    ];
+    return 'index.php?' . http_build_query($params);
+}
+
+// ---------------------------------------------------------------
+// JSON-Datensatz für die clientseitige Aufbereitung (Filter,
+// Sortierung, Pagination) durch js/search-results.js. Enthält ALLE
+// Treffer der Suche (unabhängig von Kategorie/Sortierung/Seite),
+// damit im Browser ohne weitere Serveranfragen gearbeitet werden kann.
+// ---------------------------------------------------------------
+$jsonItems = array_map(function ($item) {
+    $likes = isset($item['likes']) && is_array($item['likes']) ? count($item['likes']) : ($item['likes'] ?? 0);
+    return [
+            'id'          => $item['id'] ?? null,
+            'title'       => $item['title'] ?? '',
+            'author'      => $item['author'] ?? '',
+            'category'    => $item['category'] ?? '',
+            'likes'       => $likes,
+            'creationDate'=> $item['creationDate'] ?? '',
+    ];
+}, $all_results);
 ?>
 <noscript>
-    Bitte JavaScript aktivieren!
+    Bitte JavaScript aktivieren, um die volle Funktionalität (Live-Filterung ohne Neuladen) zu nutzen. Die Seite funktioniert auch ohne JavaScript – Sortierung, Filterung und Seitenwechsel erfolgen dann über die Formular- bzw. Link-Auswahl.
 </noscript>
 <!--
  Seite: Suchergebnisse
@@ -41,24 +99,22 @@ $resultCount = count($results);
 -->
 <div class="s-res-layout-grid">
     <?php include_once "includes/alertMessages.php" ?>
-
     <!-- Links: Seitenleiste für Filter und Suche -->
     <aside class="s-res-sidebar">
-
         <!-- Sortierfuntion Box und Such Box -->
-        <form action="php/controller/search-results-controller.php" method="GET" id="search-form-id" class="s-res-sidebar-form">
+        <form action="php/controller/search-results-controller.php" method="GET" id="searchform-id" class="s-res-sidebar-form">
 
-            <input type="hidden" id="s-res-page-input" name="page" value="<?php echo $_GET['page'] ?? 1; ?>">
+            <input type="hidden" id="s-res-page-input" name="page" value="<?php echo (int)$currentPage; ?>">
 
             <div class="s-res-sidebar-box">
                 <h3 class="s-res-sidebar-title">Suche anpassen</h3>
-                <input type="search" id="site-search" name="q" placeholder="Suchen..." class="nav__search" value="<?php echo htmlspecialchars($query); ?>" maxlength="50" required>
+                <input type="search" id="site-search" name="q" placeholder="Suchen..."
+                       class="nav__search" value="<?php echo htmlspecialchars($query); ?>" maxlength="50" required>
                 <button type="submit" class="nav__search-button">Suchen</button>
             </div>
 
             <div class="s-res-sidebar-box">
                 <h3 class="s-res-sidebar-title">Sortierung</h3>
-                <?php $currentSort = $_SESSION['search_sort'] ?? 'alphabet'; ?>
                 <div class="s-res-filter-group">
                     <label class="s-res-filter-option">
                         <input type="radio" name="sort" value="alphabet" class="sort-radio" <?php echo $currentSort === 'alphabet' ? 'checked' : ''; ?>>
@@ -81,55 +137,36 @@ $resultCount = count($results);
 
             <div class="s-res-sidebar-box">
                 <h3 class="s-res-sidebar-title">Kategorie filtern</h3>
-                <select id="category-filter" class="s-res-limit-select" style="width: 100%; padding: 8px; border-radius: 6px; border: 1px solid #cbd5e1;">
-                    <option value="all">Alle Kategorien</option>
-                    <option value="Deutsch">Deutsch</option>
-                    <option value="Englisch">Englisch</option>
-                    <option value="Franzoesisch">Französisch</option>
-                    <option value="Latein">Latein</option>
-                    <option value="Literatur">Literatur</option>
-                    <option value="Mathematik">Mathematik</option>
-                    <option value="Biologie">Biologie</option>
-                    <option value="Informatik">Informatik</option>
-                    <option value="Chemie">Chemie</option>
-                    <option value="Physik">Physik</option>
-                    <option value="Astronomie">Astronomie</option>
-                    <option value="Geschichte">Geschichte</option>
-                    <option value="Erdkunde">Erdkunde</option>
-                    <option value="Sozialkunde">Sozialkunde</option>
-                    <option value="Wirtschaftskunde">Wirtschaftskunde</option>
-                    <option value="Religion">Religion</option>
-                    <option value="Ethikunterricht">Ethikunterricht</option>
-                    <option value="Philosophie">Philosophie</option>
-                    <option value="Psychologie">Psychologie</option>
-                    <option value="Kunst">Kunst</option>
-                    <option value="Musik">Musik</option>
-                    <option value="Theater">Theater</option>
-                    <option value="Technik">Technik</option>
-                    <option value="Werken">Werken</option>
-                    <option value="Hauswirtschaft">Hauswirtschaft</option>
-                    <option value="Sport">Sport</option>
+                <select id="category-filter" name="category" class="s-res-limit-select" style="width: 100%; padding: 8px; border-radius: 6px; border: 1px solid #cbd5e1;">
+                    <?php foreach ($allowedCategories as $catValue):
+                        $label = $catValue === 'all' ? 'Alle Kategorien' : ($catValue === 'Franzoesisch' ? 'Französisch' : $catValue);
+                        ?>
+                        <option value="<?php echo htmlspecialchars($catValue); ?>" <?php echo $category === $catValue ? 'selected' : ''; ?>>
+                            <?php echo htmlspecialchars($label); ?>
+                        </option>
+                    <?php endforeach; ?>
                 </select>
             </div>
 
+            <!-- Für Nutzer ohne JavaScript: expliziter Button, um Sortierung/Kategorie anzuwenden -->
+            <noscript>
+                <button type="submit" class="nav__search-button">Filter anwenden</button>
+            </noscript>
         </form>
-
     </aside>
 
     <main class="s-res-main-content">
-
         <div class="s-res-header">
             <h1 class="s-res-main-title">Suchergebnisse</h1>
-            <p class="s-res-meta"><?php echo $totalResultsCount; ?> Treffer für Ihre Suchanfrage "<?php echo htmlspecialchars($query); ?>"</p>
+            <p class="s-res-meta" data-query="<?php echo htmlspecialchars($query); ?>">
+                <?php echo $totalResultsCount; ?> Treffer für Ihre Suchanfrage "<?php echo htmlspecialchars($query); ?>"
+            </p>
         </div>
 
-        <!-- Ergebnisliste -->
+        <!-- Ergebnisliste: serverseitig gerendert (No-JS-Fallback). Wird bei aktivem JS durch js/search-results.js live ersetzt. -->
         <div class="s-res-list">
-            <?php 
-            if (!empty($results)): ?>
-    
+            <?php if (!empty($results)): ?>
                 <?php foreach ($results as $item):
-                    // Anzahl der Likes ermitteln (falls es ein Array ist, zählen; falls Zahl, direkt nutzen)
                     $likesCount = isset($item['likes']) && is_array($item['likes']) ? count($item['likes']) : ($item['likes'] ?? 0);
                     ?>
                     <div class="s-res-item" data-likes="<?php echo $likesCount; ?>" data-category="<?php echo strtolower($item['category'] ?? ''); ?>">
@@ -141,35 +178,25 @@ $resultCount = count($results);
                             </h2>
                             <div class="s-res-meta-row">
                                 <p class="s-res-author">Von: <span class="s-res-author-name"><?php echo htmlspecialchars($item['author']); ?></span></p>
-
-                                <span class="s-res-likes">
-                                    ❤️ <?php echo $likesCount; ?>
-                                </span>
+                                <span class="s-res-likes"> ❤️ <?php echo $likesCount; ?></span>
                             </div>
                         </div>
                         <div class="s-res-arrow">&rarr;</div>
                     </div>
                 <?php endforeach; ?>
-
-            <?php 
-            elseif (isset($_SESSION["search_query"]) && $_SESSION["search_query"] !== "" && $resultCount === 0): ?>
+            <?php elseif (isset($_SESSION["search_query"]) && $_SESSION["search_query"] !== "" && $resultCount === 0): ?>
                 <p>Keine Beiträge zu diesem Suchbegriff gefunden.</p>
-            <?php 
-            elseif (isset($_SESSION["message"]) && $_SESSION["message"] == "invalid_search_query"): ?>
+            <?php elseif (isset($_SESSION["message"]) && $_SESSION["message"] == "invalid_search_query"): ?>
                 <p>Unzulässige Suchanfrage</p>
-                
             <?php endif; ?>
-            <?php
-            unset($_SESSION["message"]);
-            ?>
-
+            <?php unset($_SESSION["message"]); ?>
         </div>
-        <div class="s-res-pagination-footer">
 
+        <div class="s-res-pagination-footer">
             <!-- Auswahl der Ergebnisse pro Seite -->
             <div class="s-res-limit-selector">
                 <label for="s-res-per-page" class="s-res-limit-label">Ergebnisse pro Seite:</label>
-                <select id="s-res-per-page" name="limit" class="s-res-limit-select">
+                <select id="s-res-per-page" name="limit" form="searchform-id" class="s-res-limit-select">
                     <option value="10" <?php echo $limit === 10 ? 'selected' : ''; ?>>10</option>
                     <option value="20" <?php echo $limit === 20 ? 'selected' : ''; ?>>20</option>
                     <option value="50" <?php echo $limit === 50 ? 'selected' : ''; ?>>50</option>
@@ -177,15 +204,29 @@ $resultCount = count($results);
                 </select>
             </div>
 
+            <!-- No-JS-Fallback: echte Links, die serverseitig neu paginieren -->
             <div class="s-res-page-navigation">
-                <button type="button" class="s-res-page-btn" id="prev-page-btn" data-page="0">«</button>
+                <?php if ($currentPage > 1): ?>
+                    <a class="s-res-page-btn" href="<?php echo htmlspecialchars(buildPageUrl($currentPage - 1, $query, $currentSort, $limit, $category)); ?>">&laquo;</a>
+                <?php else: ?>
+                    <span class="s-res-page-btn" aria-disabled="true">&laquo;</span>
+                <?php endif; ?>
 
-                <span id="dynamic-page-numbers"></span>
+                <span id="dynamic-page-numbers">Seite <?php echo $currentPage; ?> von <?php echo $totalPages; ?></span>
 
-                <button type="button" class="s-res-page-btn" id="next-page-btn" data-page="2">»</button>
+                <?php if ($currentPage < $totalPages): ?>
+                    <a class="s-res-page-btn" href="<?php echo htmlspecialchars(buildPageUrl($currentPage + 1, $query, $currentSort, $limit, $category)); ?>">&raquo;</a>
+                <?php else: ?>
+                    <span class="s-res-page-btn" aria-disabled="true">&raquo;</span>
+                <?php endif; ?>
             </div>
-
         </div>
     </main>
-
 </div>
+
+<!-- Vollständiger, ungefilterter Ergebnis-Datensatz für die clientseitige
+     Filterung/Sortierung/Pagination (siehe js/search-results.js).
+     JSON_HEX_* verhindert das Ausbrechen aus dem <script>-Tag bzw. XSS. -->
+<script type="application/json" id="s-res-data">
+<?php echo json_encode($jsonItems, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP); ?>
+</script>

content/showArticle.php

@@ -45,8 +45,8 @@ include_once 'php/controller/showArticle-controller.php';
         </h1>
 
         <div class="article-view-meta">
-            <?php if (isset($author) && !empty($author)): ?>
-                <span class="article-view-author">Von: <strong><?php echo htmlspecialchars($author); ?></strong></span>
+            <?php if (isset($name) && !empty($name)): ?>
+                <span class="article-view-author">Von: <strong><?php echo htmlspecialchars($name); ?></strong></span>
             <?php endif; ?>
         </div>
 

content/showCategory.php

@@ -1,32 +1,111 @@
 <?php
 include_once "php/controller/showCategory-controller.php";
+
+$currentSort = isset($sortStyle) ? $sortStyle : 'alphabet';
+$currentPage = isset($page) ? $page : 1;
 ?>
 
-<main>
-    <?php include_once "includes/alertMessages.php"?>
+<noscript>
+    Bitte JavaScript aktivieren!
+</noscript>
 
-    <h1><?php if (isset($category) && !empty($category)){ echo htmlspecialchars($category); } ?></h1>
+<!-- Das Formular umschließt jetzt das gesamte Layout -->
+<form id="search-form-id" action="index.php" method="GET" style="display: contents;">
+    <input type="hidden" name="pfad" value="showCategory">
+    <input type="hidden" name="category" value="<?php echo (isset($category) && !empty($category)) ? htmlspecialchars($category) : ''; ?>">
+    <input type="hidden" id="s-res-page-input" name="page" value="<?php echo $currentPage; ?>">
 
-    <div class="s-res-list">
-        <?php
-        if (!empty($articles)): ?>
+    <div class="cat-view-container">
+
+        <!-- LINKE SPALTE: SEITENLEISTE FÜR SORTIERUNG -->
+        <aside class="cat-sidebar">
+            <div class="cat-sidebar-box">
+                <h3 class="cat-sidebar-title">Sortierung</h3>
+                <div class="cat-filter-group">
+                    <label class="cat-filter-option">
+                        <input type="radio" name="sort" value="alphabet" <?php echo ($currentSort === 'alphabet') ? 'checked' : ''; ?> onchange="this.form.submit();">
+                        Alphabetisch
+                    </label>
+                    <label class="cat-filter-option">
+                        <input type="radio" name="sort" value="likes" <?php echo ($currentSort === 'likes') ? 'checked' : ''; ?> onchange="this.form.submit();">
+                        Beliebtheit (Likes)
+                    </label>
+                    <label class="cat-filter-option">
+                        <input type="radio" name="sort" value="newest" <?php echo ($currentSort === 'newest') ? 'checked' : ''; ?> onchange="this.form.submit();">
+                        Neueste Beiträge
+                    </label>
+                    <label class="cat-filter-option">
+                        <input type="radio" name="sort" value="oldest" <?php echo ($currentSort === 'oldest') ? 'checked' : ''; ?> onchange="this.form.submit();">
+                        Älteste Beiträge
+                    </label>
+                </div>
+            </div>
+        </aside>
+
+        <!-- RECHTE SPALTE: INHALT & PAGINATOR -->
+        <main class="cat-view-main">
+            <div class="cat-view-header">
+                <h1 class="cat-view-title">Kategorie: <?php echo (isset($category) && !empty($category)) ? htmlspecialchars($category) : 'Unbekannt'; ?></h1>
+                <p class="cat-view-meta-text">
+                    <?php echo (isset($totalArticles)) ? $totalArticles : 0; ?> Treffer in dieser Kategorie
+                </p>
+            </div>
+
+            <!-- Beiträge -->
+            <div class="cat-view-list">
+                <?php if (isset($articles) && !empty($articles)): ?>
                     <?php foreach ($articles as $article): ?>
-                <div class="s-res-item">
-                    <div class="s-res-content">
-                        <h2 class="s-res-item-title">
-                            <a href="index.php?pfad=showArticle&id=<?php echo $article->getId(); ?>" class="s-res-link">
-                                <?php echo htmlspecialchars($article->getTitle()); ?>
+                        <div class="cat-view-item">
+                            <div class="cat-view-content">
+                                <h2 class="cat-view-item-title">
+                                    <a href="index.php?pfad=showArticle&id=<?php echo htmlspecialchars($article->getID()); ?>" class="cat-view-link">
+                                        <?php echo (isset($article) && !empty($article->getTitle())) ? htmlspecialchars($article->getTitle()) : 'Kein Titel'; ?>
                                     </a>
                                 </h2>
-                        <p class="s-res-author">Von: <span class="s-res-author-name"><?php echo htmlspecialchars($article->getAuthor()); ?></span></p>
+
+                                <div class="cat-view-meta-row">
+                                    <p class="cat-view-author">
+                                        von <span class="cat-view-author-name"><?php echo (isset($article) && !empty($article->getAuthor())) ? htmlspecialchars($article->getAuthor()) : 'Anonym'; ?></span>
+                                    </p>
+                                    <span class="cat-view-likes">
+                                        ❤️ <?php echo (isset($article) && !empty($article->getLikes())) ? htmlspecialchars($article->getLikes()) : '0'; ?>
+                                    </span>
                                 </div>
-                    <div class="s-res-arrow">&rarr;</div>
+                                
+                            </div>
+                            <div class="cat-view-arrow">&rarr;</div>
                         </div>
                     <?php endforeach; ?>
-        <?php
-        else: ?>
-        <p> Es sind noch keine Beiträge in dieser Kategorie enthalten.</p>
+                <?php else: ?>
+                    <p class="cat-view-meta-text">Keine Artikel in dieser Kategorie gefunden.</p>
                 <?php endif; ?>
             </div>
 
+            <!-- Footer Paginator -->
+            <?php if (isset($totalPages) && $totalPages > 1): ?>
+                <div class="cat-view-pagination-footer">
+                    <div></div>
+                    <div class="s-res-page-navigation">
+                        <button type="button" class="s-res-page-btn" data-page="<?php echo $currentPage - 1; ?>" <?php echo ($currentPage <= 1) ? 'disabled' : ''; ?>>
+                            &laquo;
+                        </button>
+
+                        <?php for ($i = 1; $i <= $totalPages; $i++): ?>
+                            <button type="button"
+                                    class="s-res-page-btn <?php echo ($i === $currentPage) ? 'cat-active-btn' : ''; ?>"
+                                    data-page="<?php echo $i; ?>"
+                                    <?php echo ($i === $currentPage) ? 'disabled' : ''; ?>>
+                                <?php echo $i; ?>
+                            </button>
+                        <?php endfor; ?>
+
+                        <button type="button" class="s-res-page-btn" data-page="<?php echo $currentPage + 1; ?>" <?php echo ($currentPage >= $totalPages) ? 'disabled' : ''; ?>>
+                            &raquo;
+                        </button>
+                    </div>
+                </div>
+            <?php endif; ?>
         </main>
+
+    </div>
+</form>

css/showCategory.css

@@ -0,0 +1,227 @@
+/* --- ZWEISPALTIIGES GRID-LAYOUT --- */
+.cat-view-container {
+    box-sizing: border-box;
+    max-width: 95%; /* 95% Monitorbreite wie das Original */
+    width: 95%;
+    margin: 2rem auto;
+    padding: 0 1rem;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    color: #212529;
+    line-height: 1.5;
+
+    /* Grid für die Zweispaltigkeit */
+    display: grid;
+    grid-template-columns: 320px 1fr; /* 320px Sidebar, Rest für Content */
+    gap: 2.5rem;
+}
+
+.cat-view-container * {
+    box-sizing: border-box;
+}
+
+/* --- SEITENLEISTE (SORTIERUNG) --- */
+.cat-sidebar {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+.cat-sidebar-box {
+    background-color: #ffffff;
+    border: 1px solid #e2e8f0;
+    border-radius: 8px;
+    padding: 1.25rem;
+}
+
+.cat-sidebar-title {
+    font-size: 1rem;
+    font-weight: 700;
+    color: #1a202c;
+    margin: 0 0 1rem 0;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.cat-filter-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.cat-filter-option {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    cursor: pointer;
+    font-size: 0.95rem;
+    color: #4a5568;
+}
+
+.cat-filter-option input[type="radio"] {
+    margin: 0;
+    accent-color: #3182ce;
+}
+
+/* --- HAUPTINHALT --- */
+.cat-view-main {
+    min-width: 0;
+}
+
+.cat-view-header {
+    margin-bottom: 2rem;
+    border-bottom: 2px solid #dee2e6;
+    padding-bottom: 1rem;
+}
+
+.cat-view-title {
+    font-size: 2rem;
+    color: #1a202c;
+    margin: 0 0 0.5rem 0;
+    font-weight: 700;
+}
+
+.cat-view-meta-text {
+    color: #6c757d;
+    font-size: 0.95rem;
+    margin: 0;
+}
+
+/* --- BEITRÄGE LISTE --- */
+.cat-view-list {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.cat-view-item {
+    background-color: #ffffff;
+    border: 1px solid #e2e8f0;
+    border-radius: 8px;
+    padding: 1.25rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+}
+
+.cat-view-item:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+    border-color: #cbd5e1;
+}
+
+.cat-view-content {
+    flex: 1;
+}
+
+.cat-view-item-title {
+    font-size: 1.25rem;
+    margin: 0 0 0.25rem 0;
+    font-weight: 600;
+}
+
+.cat-view-link {
+    color: #3182ce;
+    text-decoration: none;
+}
+
+.cat-view-link:hover {
+    text-decoration: underline;
+    color: #2b6cb0;
+}
+
+.cat-view-meta-row {
+    display: flex;
+    gap: 15px;
+    align-items: center;
+    margin-bottom: 0.5rem;
+}
+
+.cat-view-author {
+    font-size: 0.875rem;
+    color: #4a5568;
+    margin: 0;
+}
+
+.cat-view-author-name {
+    font-weight: 600;
+    color: #2d3748;
+}
+
+.cat-view-likes {
+    font-size: 0.9em;
+    color: #475569;
+}
+
+.cat-view-arrow {
+    font-size: 1.5rem;
+    color: #a0aec0;
+    padding-left: 1rem;
+    transition: color 0.2s ease, transform 0.2s ease;
+}
+
+.cat-view-item:hover .cat-view-arrow {
+    color: #3182ce;
+    transform: translateX(3px);
+}
+
+/* --- FOOTER PAGINATION --- */
+.cat-view-pagination-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 2rem;
+    padding-top: 1.5rem;
+    border-top: 1px solid #e2e8f0;
+}
+
+.cat-view-pagination-footer .s-res-page-navigation {
+    display: flex;
+    gap: 0.25rem;
+}
+
+.cat-view-pagination-footer .s-res-page-btn {
+    background-color: #ffffff;
+    border: 1px solid #cbd5e1;
+    color: #4a5568;
+    padding: 0.35rem 0.75rem;
+    font-size: 0.9rem;
+    font-weight: 500;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.cat-view-pagination-footer .s-res-page-btn:hover:not(:disabled) {
+    background-color: #f8f9fa;
+    border-color: #cbd5e1;
+    color: #2d3748;
+}
+
+.cat-view-pagination-footer .cat-active-btn {
+    background-color: #3182ce;
+    border-color: #3182ce;
+    color: #ffffff;
+    cursor: default;
+}
+
+.cat-view-pagination-footer .s-res-page-btn:disabled:not(.cat-active-btn) {
+    background-color: #f1f5f9;
+    border-color: #e2e8f0;
+    color: #94a3b8;
+    cursor: not-allowed;
+}
+
+/* RESPONSIVE ANPASSUNG (Unter 768px) */
+@media (max-width: 768px) {
+    .cat-view-container {
+        grid-template-columns: 1fr; /* Stapelt Sidebar und Inhalt untereinander */
+        gap: 1.5rem;
+        margin: 1rem auto;
+    }
+    .cat-view-pagination-footer {
+        flex-direction: column;
+        gap: 1rem;
+        align-items: flex-start;
+    }
+}

index.php

@@ -63,12 +63,14 @@ if ($pfad === "deleteAccount") {
         <link rel="stylesheet" href="css/profile.css">
         <link rel="stylesheet" href="css/showArticle.css">
         <link rel="stylesheet" href="css/message.css">
+        <link rel="stylesheet" href="css/showCategory.css">
 
-        <script src="js/paginator.js" async></script>
-        <script src="js/sorter.js" async></script>
+        <!--<script src="js/paginator.js" async></script>
+        <script src="js/sorter.js" async></script>-->
         <script src="js/comments.js" defer></script>
         <script src="js/editor.js" async></script>
-        <script src="js/filter.js" async></script>
+        <!--<script src="js/filter.js" async></script>-->
+        <script src="js/search-results.js" async></script>
 
         <title>EduForge</title>
     </head>

js/editor.js

@@ -1,13 +1,13 @@
-console.log("Die JavaScript-Datei wurde erfolgreich geladen!");
+console.log("editor.js wurde erfolgreich geladen!");
 
 function initEditor() {
     const form = document.getElementById("editor-form");
 
     if (!form) {
-        console.error("Skript abgebrochen: Formular nicht gefunden!");
+        console.error("editor.js wurde abgebrochen: Formular nicht gefunden!");
         return;
     } else {
-        console.log("Formular gefunden und Editor initialisiert:", form);
+        console.log("Formular gefunden und editor.js initialisiert:", form);
     }
 
     const container = document.getElementById("block-container");

js/paginator.js

@@ -1,27 +1,203 @@
-function initPaginator() {
-    const form = document.getElementById('search-form-id');
-    const pageInput = document.getElementById('s-res-page-input');
-    const pageButtons = document.querySelectorAll('.s-res-page-navigation .s-res-page-btn');
+/**
+ * Übernimmt Filterung (Kategorie), Sortierung und Pagination der
+ * Suchergebnisse vollständig clientseitig, ohne Neuladen der Seite.
+ *
+ * Voraussetzung: Im HTML liegt ein <script type="application/json" id="s-res-data">
+ * mit allen Treffern der aktuellen Suche (siehe content/search-results.php).
+ *
+ * Ist kein JavaScript aktiv, bleibt die serverseitig gerenderte Ausgabe
+ * (inkl. echter Pagination-Links und Formular-Submit) unverändert nutzbar.
+ */
+(function () {
+    const DEFAULT_PER_PAGE = 10;
 
-    pageButtons.forEach(button => {
-        button.addEventListener('click', function() {
-            if (this.disabled) return;
+    const state = {
+        all: [],
+        filtered: [],
+        category: 'all',
+        sort: 'alphabet',
+        perPage: DEFAULT_PER_PAGE,
+        page: 1,
+    };
 
-            const targetPage = this.getAttribute('data-page');
+    const els = {};
 
-            if (targetPage && form && pageInput) {
-                pageInput.value = targetPage;
-                form.submit();
+    function init() {
+        const dataScript = document.getElementById('s-res-data');
+        const listContainer = document.querySelector('.s-res-list');
+        if (!dataScript || !listContainer) {
+            return; // keine Ergebnisliste auf dieser Seite vorhanden
         }
+
+        try {
+            state.all = JSON.parse(dataScript.textContent);
+        } catch (e) {
+            console.error('Suchergebnis-Daten konnten nicht gelesen werden.', e);
+            return;
+        }
+
+        els.list = listContainer;
+        els.categorySelect = document.getElementById('category-filter');
+        els.perPageSelect = document.getElementById('s-res-per-page');
+        els.sortRadios = document.querySelectorAll('.sort-radio');
+        els.pagerContainer = document.querySelector('.s-res-page-navigation');
+        els.metaCount = document.querySelector('.s-res-meta');
+
+        // Ausgangszustand aus dem serverseitig gerenderten Markup übernehmen,
+        // damit Browser-zurück / geteilte Links konsistent bleiben.
+        if (els.categorySelect) state.category = els.categorySelect.value || 'all';
+        if (els.perPageSelect) state.perPage = parseInt(els.perPageSelect.value, 10) || DEFAULT_PER_PAGE;
+        const checkedSort = document.querySelector('.sort-radio:checked');
+        if (checkedSort) state.sort = checkedSort.value;
+
+        // Ab hier übernimmt JS: Formular-Steuerelemente lösen keinen
+        // Seiten-Reload mehr aus, sondern rendern direkt neu.
+        if (els.categorySelect) {
+            els.categorySelect.addEventListener('change', function () {
+                state.category = this.value;
+                state.page = 1;
+                render();
             });
+        }
+        if (els.perPageSelect) {
+            els.perPageSelect.addEventListener('change', function () {
+                state.perPage = parseInt(this.value, 10) || DEFAULT_PER_PAGE;
+                state.page = 1;
+                render();
+            });
+        }
+        els.sortRadios.forEach(function (radio) {
+            radio.addEventListener('change', function () {
+                state.sort = this.value;
+                state.page = 1;
+                render();
+            });
+        });
+
+        render();
+    }
+
+    function sortItems(items, sortValue) {
+        const copy = items.slice();
+        switch (sortValue) {
+            case 'likes':
+                copy.sort(function (a, b) { return (b.likes || 0) - (a.likes || 0); });
+                break;
+            case 'newest':
+                copy.sort(function (a, b) { return (b.creationDate || '').localeCompare(a.creationDate || ''); });
+                break;
+            case 'oldest':
+                copy.sort(function (a, b) { return (a.creationDate || '').localeCompare(b.creationDate || ''); });
+                break;
+            case 'alphabet':
+            default:
+                copy.sort(function (a, b) { return a.title.localeCompare(b.title, 'de', { sensitivity: 'base' }); });
+                break;
+        }
+        return copy;
+    }
+
+    function render() {
+        let items = state.all;
+        if (state.category && state.category !== 'all') {
+            items = items.filter(function (it) {
+                return (it.category || '').toLowerCase() === state.category.toLowerCase();
+            });
+        }
+        state.filtered = sortItems(items, state.sort);
+
+        const totalResults = state.filtered.length;
+        const totalPages = Math.max(1, Math.ceil(totalResults / state.perPage));
+        if (state.page > totalPages) state.page = totalPages;
+        if (state.page < 1) state.page = 1;
+
+        const start = (state.page - 1) * state.perPage;
+        const pageItems = state.filtered.slice(start, start + state.perPage);
+
+        renderList(pageItems);
+        renderPager(totalPages);
+        renderMeta(totalResults);
+    }
+
+    function renderList(items) {
+        els.list.innerHTML = '';
+
+        if (items.length === 0) {
+            const p = document.createElement('p');
+            p.textContent = 'Keine Beiträge zu diesem Suchbegriff gefunden.';
+            els.list.appendChild(p);
+            return;
+        }
+
+        items.forEach(function (item) {
+            const div = document.createElement('div');
+            div.className = 's-res-item';
+            div.setAttribute('data-likes', item.likes || 0);
+            div.setAttribute('data-category', (item.category || '').toLowerCase());
+
+            div.innerHTML =
+                '<div class="s-res-content">' +
+                '<h2 class="s-res-item-title">' +
+                '<a class="s-res-link"></a>' +
+                '</h2>' +
+                '<div class="s-res-meta-row">' +
+                '<p class="s-res-author">Von: <span class="s-res-author-name"></span></p>' +
+                '<span class="s-res-likes"></span>' +
+                '</div>' +
+                '</div>' +
+                '<div class="s-res-arrow">&rarr;</div>';
+
+            const link = div.querySelector('.s-res-link');
+            link.href = 'index.php?pfad=showArticle&id=' + encodeURIComponent(item.id);
+            link.textContent = item.title;
+            div.querySelector('.s-res-author-name').textContent = item.author;
+            div.querySelector('.s-res-likes').textContent = item.likes || 0;
+
+            els.list.appendChild(div);
         });
     }
 
-// ist das DOM bereits vollständig aufgebaut?
+    function renderPager(totalPages) {
+        if (!els.pagerContainer) return;
+        els.pagerContainer.innerHTML = '';
+
+        const prevBtn = document.createElement('button');
+        prevBtn.type = 'button';
+        prevBtn.className = 's-res-page-btn';
+        prevBtn.textContent = '\u00AB';
+        prevBtn.disabled = state.page <= 1;
+        prevBtn.addEventListener('click', function () { goToPage(state.page - 1); });
+        els.pagerContainer.appendChild(prevBtn);
+
+        const span = document.createElement('span');
+        span.id = 'dynamic-page-numbers';
+        span.textContent = 'Seite ' + state.page + ' von ' + totalPages;
+        els.pagerContainer.appendChild(span);
+
+        const nextBtn = document.createElement('button');
+        nextBtn.type = 'button';
+        nextBtn.className = 's-res-page-btn';
+        nextBtn.textContent = '\u00BB';
+        nextBtn.disabled = state.page >= totalPages;
+        nextBtn.addEventListener('click', function () { goToPage(state.page + 1); });
+        els.pagerContainer.appendChild(nextBtn);
+    }
+
+    function renderMeta(totalResults) {
+        if (!els.metaCount) return;
+        const query = els.metaCount.getAttribute('data-query') || '';
+        els.metaCount.textContent = totalResults + ' Treffer für Ihre Suchanfrage "' + query + '"';
+    }
+
+    function goToPage(page) {
+        state.page = page;
+        render();
+        els.list.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+
     if (document.readyState === 'loading') {
-    // Falls noch geladen wird, auf das Event warten
-    document.addEventListener('DOMContentLoaded', initPaginator);
+        document.addEventListener('DOMContentLoaded', init);
     } else {
-    // Falls das HTML bereits komplett da ist, sofort ausführen
-    initPaginator();
+        init();
     }
+})();

js/search-results.js

@@ -0,0 +1,203 @@
+/**
+ * Übernimmt Filterung (Kategorie), Sortierung und Pagination der
+ * Suchergebnisse vollständig clientseitig, ohne Neuladen der Seite.
+ *
+ * Voraussetzung: Im HTML liegt ein <script type="application/json" id="s-res-data">
+ * mit allen Treffern der aktuellen Suche (siehe content/search-results.php).
+ *
+ * Ist kein JavaScript aktiv, bleibt die serverseitig gerenderte Ausgabe
+ * (inkl. echter Pagination-Links und Formular-Submit) unverändert nutzbar.
+ */
+(function () {
+    const DEFAULT_PER_PAGE = 10;
+
+    const state = {
+        all: [],
+        filtered: [],
+        category: 'all',
+        sort: 'alphabet',
+        perPage: DEFAULT_PER_PAGE,
+        page: 1,
+    };
+
+    const els = {};
+
+    function init() {
+        const dataScript = document.getElementById('s-res-data');
+        const listContainer = document.querySelector('.s-res-list');
+        if (!dataScript || !listContainer) {
+            return; // keine Ergebnisliste auf dieser Seite vorhanden
+        }
+
+        try {
+            state.all = JSON.parse(dataScript.textContent);
+        } catch (e) {
+            console.error('Suchergebnis-Daten konnten nicht gelesen werden.', e);
+            return;
+        }
+
+        els.list = listContainer;
+        els.categorySelect = document.getElementById('category-filter');
+        els.perPageSelect = document.getElementById('s-res-per-page');
+        els.sortRadios = document.querySelectorAll('.sort-radio');
+        els.pagerContainer = document.querySelector('.s-res-page-navigation');
+        els.metaCount = document.querySelector('.s-res-meta');
+
+        // Ausgangszustand aus dem serverseitig gerenderten Markup übernehmen,
+        // damit Browser-zurück / geteilte Links konsistent bleiben.
+        if (els.categorySelect) state.category = els.categorySelect.value || 'all';
+        if (els.perPageSelect) state.perPage = parseInt(els.perPageSelect.value, 10) || DEFAULT_PER_PAGE;
+        const checkedSort = document.querySelector('.sort-radio:checked');
+        if (checkedSort) state.sort = checkedSort.value;
+
+        // Ab hier übernimmt JS: Formular-Steuerelemente lösen keinen
+        // Seiten-Reload mehr aus, sondern rendern direkt neu.
+        if (els.categorySelect) {
+            els.categorySelect.addEventListener('change', function () {
+                state.category = this.value;
+                state.page = 1;
+                render();
+            });
+        }
+        if (els.perPageSelect) {
+            els.perPageSelect.addEventListener('change', function () {
+                state.perPage = parseInt(this.value, 10) || DEFAULT_PER_PAGE;
+                state.page = 1;
+                render();
+            });
+        }
+        els.sortRadios.forEach(function (radio) {
+            radio.addEventListener('change', function () {
+                state.sort = this.value;
+                state.page = 1;
+                render();
+            });
+        });
+
+        render();
+    }
+
+    function sortItems(items, sortValue) {
+        const copy = items.slice();
+        switch (sortValue) {
+            case 'likes':
+                copy.sort(function (a, b) { return (b.likes || 0) - (a.likes || 0); });
+                break;
+            case 'newest':
+                copy.sort(function (a, b) { return (b.creationDate || '').localeCompare(a.creationDate || ''); });
+                break;
+            case 'oldest':
+                copy.sort(function (a, b) { return (a.creationDate || '').localeCompare(b.creationDate || ''); });
+                break;
+            case 'alphabet':
+            default:
+                copy.sort(function (a, b) { return a.title.localeCompare(b.title, 'de', { sensitivity: 'base' }); });
+                break;
+        }
+        return copy;
+    }
+
+    function render() {
+        let items = state.all;
+        if (state.category && state.category !== 'all') {
+            items = items.filter(function (it) {
+                return (it.category || '').toLowerCase() === state.category.toLowerCase();
+            });
+        }
+        state.filtered = sortItems(items, state.sort);
+
+        const totalResults = state.filtered.length;
+        const totalPages = Math.max(1, Math.ceil(totalResults / state.perPage));
+        if (state.page > totalPages) state.page = totalPages;
+        if (state.page < 1) state.page = 1;
+
+        const start = (state.page - 1) * state.perPage;
+        const pageItems = state.filtered.slice(start, start + state.perPage);
+
+        renderList(pageItems);
+        renderPager(totalPages);
+        renderMeta(totalResults);
+    }
+
+    function renderList(items) {
+        els.list.innerHTML = '';
+
+        if (items.length === 0) {
+            const p = document.createElement('p');
+            p.textContent = 'Keine Beiträge zu diesem Suchbegriff gefunden.';
+            els.list.appendChild(p);
+            return;
+        }
+
+        items.forEach(function (item) {
+            const div = document.createElement('div');
+            div.className = 's-res-item';
+            div.setAttribute('data-likes', item.likes || 0);
+            div.setAttribute('data-category', (item.category || '').toLowerCase());
+
+            div.innerHTML =
+                '<div class="s-res-content">' +
+                '<h2 class="s-res-item-title">' +
+                '<a class="s-res-link"></a>' +
+                '</h2>' +
+                '<div class="s-res-meta-row">' +
+                '<p class="s-res-author">Von: <span class="s-res-author-name"></span></p>' +
+                '<span class="s-res-likes"></span>' +
+                '</div>' +
+                '</div>' +
+                '<div class="s-res-arrow">&rarr;</div>';
+
+            const link = div.querySelector('.s-res-link');
+            link.href = 'index.php?pfad=showArticle&id=' + encodeURIComponent(item.id);
+            link.textContent = item.title;
+            div.querySelector('.s-res-author-name').textContent = item.author;
+            div.querySelector('.s-res-likes').textContent = item.likes || 0;
+
+            els.list.appendChild(div);
+        });
+    }
+
+    function renderPager(totalPages) {
+        if (!els.pagerContainer) return;
+        els.pagerContainer.innerHTML = '';
+
+        const prevBtn = document.createElement('button');
+        prevBtn.type = 'button';
+        prevBtn.className = 's-res-page-btn';
+        prevBtn.textContent = '\u00AB';
+        prevBtn.disabled = state.page <= 1;
+        prevBtn.addEventListener('click', function () { goToPage(state.page - 1); });
+        els.pagerContainer.appendChild(prevBtn);
+
+        const span = document.createElement('span');
+        span.id = 'dynamic-page-numbers';
+        span.textContent = 'Seite ' + state.page + ' von ' + totalPages;
+        els.pagerContainer.appendChild(span);
+
+        const nextBtn = document.createElement('button');
+        nextBtn.type = 'button';
+        nextBtn.className = 's-res-page-btn';
+        nextBtn.textContent = '\u00BB';
+        nextBtn.disabled = state.page >= totalPages;
+        nextBtn.addEventListener('click', function () { goToPage(state.page + 1); });
+        els.pagerContainer.appendChild(nextBtn);
+    }
+
+    function renderMeta(totalResults) {
+        if (!els.metaCount) return;
+        const query = els.metaCount.getAttribute('data-query') || '';
+        els.metaCount.textContent = totalResults + ' Treffer für Ihre Suchanfrage "' + query + '"';
+    }
+
+    function goToPage(page) {
+        state.page = page;
+        render();
+        els.list.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', init);
+    } else {
+        init();
+    }
+})();

php/controller/search-results-controller.php

@@ -2,30 +2,29 @@
 if (session_status() === PHP_SESSION_NONE) {
     session_start();
 }
-require_once '../model/LocalArticleManager.php';
 require_once '../model/ArticleManager.php';
+require_once '../model/UserManager.php';
 require_once '../model/Article.php';
 require_once '../validator/search-validator.php';
 
 if ($_SERVER["REQUEST_METHOD"] === "GET" && isset($_GET["q"])) {
-
     $search = trim($_GET["q"]);
+
     if (!searchQueryValidator($search)) {
         $_SESSION["search_results"] = [];
         $_SESSION["search_query"] = "";
         $_SESSION["message"] = "invalid_search_query";
     } else {
         try {
-            
             $articleManager = ArticleManager::getInstance();
-            
+            $userManager    = UserManager::getInstance();
             $results        = $articleManager->search($search);
 
             $sortStyle = $_GET['sort'] ?? 'alphabet';
             $_SESSION['search_sort'] = $sortStyle;
 
             if ($sortStyle === 'alphabet') {
-                // Titel aufsteigend alphabetiisch sortiert
+                // Titel aufsteigend alphabetisch sortiert
                 usort($results, function ($a, $b) {
                     return strcasecmp($a->getTitle(), $b->getTitle());
                 });
@@ -45,14 +44,14 @@ if ($_SERVER["REQUEST_METHOD"] === "GET" && isset($_GET["q"])) {
                 });
             }
 
-            // Ergebnisse werden in ein flaches array umgewandelt, da sont incomplete-PHP error im Ergebnis
+            // Ergebnisse werden in ein flaches Array umgewandelt, da sonst incomplete-PHP-Fehler im Ergebnis
             $safeArrayResults = [];
             foreach ($results as $obj) {
                 $safeArrayResults[] = [
                     "id"           => $obj->getId(),
                     "title"        => $obj->getTitle(),
                     "content"      => $obj->getContent(),
-                    "author" => $obj->getAuthor(),
+                    "author"       => $userManager->findUser($obj->getAuthor())["vorname"] . " " . $userManager->findUser($obj->getAuthor())["nachname"],
                     "category"     => $obj->getCategory(),
                     "tags"         => $obj->getTags(),
                     "creationDate" => $obj->getCreationDate(),
@@ -63,7 +62,6 @@ if ($_SERVER["REQUEST_METHOD"] === "GET" && isset($_GET["q"])) {
             $_SESSION["search_results"] = $safeArrayResults;
             $_SESSION["search_query"] = $search;
             $_SESSION["message"] = "new_search_results";
-
         } catch (Exception $e) {
             $_SESSION["message"] = "internal_error";
         }
@@ -75,9 +73,17 @@ if ($_SERVER["REQUEST_METHOD"] === "GET" && isset($_GET["q"])) {
         $limit = 10;
     }
     $page = isset($_GET['page']) ? (int)$_GET['page'] : 1;
-    header("Location: ../../index.php?pfad=search-results&q=" . urlencode($search) . "&sort=" . urlencode($sort) . "&limit=" . $limit . "&page=" . $page);
+
+    // Kategorie-Filter durchreichen (Whitelist-Prüfung erfolgt in der View)
+    $category = isset($_GET['category']) ? $_GET['category'] : 'all';
+
+    header(
+        "Location: ../../index.php?pfad=search-results&q=" . urlencode($search) .
+        "&sort=" . urlencode($sort) .
+        "&limit=" . $limit .
+        "&category=" . urlencode($category) .
+        "&page=" . $page
+    );
     exit();
-    
 }
-
 ?>

php/controller/showArticle-controller.php

@@ -5,6 +5,7 @@ if (session_status() === PHP_SESSION_NONE) {
 
 require_once 'php/model/Article.php';
 require_once 'php/model/ArticleManager.php';
+require_once 'php/model/UserManager.php';
 require_once 'php/model/CommentManager.php';
 
 if (isset($_GET["id"]) && !empty($_GET["id"])){
@@ -19,6 +20,9 @@ if (isset($_GET["id"]) && !empty($_GET["id"])){
             $author = $article->getAuthor();
             $tags = $article->getTags();
             $articleObj = $article; // Objekt für die Like-Abfagen sichern
+
+            $userManager = UserManager::getInstance();
+            $name = $userManager->findUser($author)["vorname"]." ".$userManager->findUser($author)["nachname"];
         }else{
             //header("location: index.php?pfad=404");
             include_once "content/404.php";

php/controller/showCategory-controller.php

@@ -1,13 +1,59 @@
 <?php
+if (session_status() === PHP_SESSION_NONE) {
+    session_start();
+}
+
 require_once 'php/model/Article.php';
 require_once 'php/model/ArticleManager.php';
+require_once 'php/model/UserManager.php';
 require_once 'php/validator/article-validator.php';
 
 if (isset($_GET["category"]) && !empty($_GET["category"]) && articleCategoryValidator($_GET["category"])){
     $category = $_GET["category"];
+
+    // Sortierung auslesen (Standard: alphabet)
+    $sortStyle = isset($_GET['sort']) ? trim($_GET['sort']) : 'alphabet';
+
+    // Aktuelle Seite auslesen
+    $page = isset($_GET['page']) ? (int)$_GET['page'] : 1;
+    if ($page < 1) { $page = 1; }
+
     try {
         $articleManager = ArticleManager::getInstance();
-        $articles = $articleManager->getArticlesByCategory($category);
+        $userManager = UserManager::getInstance();
+        $allArticles = $articleManager->getArticlesByCategory($category);
+        foreach ($allArticles as $article) {
+            $article->setAuthor($userManager->findUser($article->getAuthor())["vorname"] . " " . $userManager->findUser($article->getAuthor())["nachname"]);
+        }
+        $totalArticles = count($allArticles);
+
+        // --- SORTIERUNG LOGIK ---
+        if ($sortStyle === 'alphabet') {
+            usort($allArticles, function($a, $b) {
+                return strcasecmp($a->getTitle(), $b->getTitle());
+            });
+        } elseif ($sortStyle === 'likes') {
+            usort($allArticles, function($a, $b) {
+                return $b->getLikes() <=> $a->getLikes(); // Absteigend nach Likes
+            });
+        } elseif ($sortStyle === 'newest') {
+            usort($allArticles, function($a, $b) {
+                return strtotime($b->getCreationDate()) <=> strtotime($a->getCreationDate()); // Neueste zuerst
+            });
+        } elseif ($sortStyle === 'oldest') {
+            usort($allArticles, function($a, $b) {
+                return strtotime($a->getCreationDate()) <=> strtotime($b->getCreationDate()); // Älteste zuerst
+            });
+        }
+
+        // Paginierung konfigurieren
+        $limit = 10;
+        $totalPages = ceil($totalArticles / $limit);
+        if ($page > $totalPages && $totalPages > 0) { $page = $totalPages; }
+
+        $offset = ($page - 1) * $limit;
+        $articles = array_slice($allArticles, $offset, $limit);
+
     } catch (Exception $e) {
         $_SESSION["message"] = "internal_error";
         include_once "content/404.php";

php/model/Article.php

@@ -97,6 +97,16 @@ class Article
         return $this->author;
     }
 
+    /**
+     * Setzt einen neuen Autor eines Beitrages.
+     * @param string $author
+     * @return void
+     */
+    public function setAuthor(string $author)
+    {
+        $this->author = $author;
+    }
+
     /**
      * Gibt das Veröffentlichungsdatum des Beitrags zurück.
      * @return string