Update showCategory.php

css

content/showCategory.php

@@ -2,31 +2,86 @@
 include_once "php/controller/showCategory-controller.php";
 ?>
 
-<main>
+<div class="cat-view-container">
-    <?php include_once "includes/alertMessages.php"?>
+    <div class="cat-view-header">
+        <!-- Kategorie-Titel sicher ausgeben -->
+        <h1 class="cat-view-title">Kategorie: <?php echo (isset($category) && !empty($category)) ? htmlspecialchars($category) : 'Unbekannt'; ?></h1>
+        <p class="cat-view-meta-text">Beiträge in dieser Kategorie</p>
+    </div>
 
-    <h1><?php if (isset($category) && !empty($category)){ echo htmlspecialchars($category); } ?></h1>
+    <!-- Die Artikel-Liste  -->
-
+    <div class="cat-view-list">
-    <div class="s-res-list">
+        <?php if (isset($articles) && !empty($articles)): ?>
-        <?php
-        if (!empty($articles)): ?>
             <?php foreach ($articles as $article): ?>
-                <div class="s-res-item">
+                <div class="cat-view-item">
-                    <div class="s-res-content">
+                    <div class="cat-view-content">
-                        <h2 class="s-res-item-title">
+                        <!-- Titel als klickbarer Link -->
-                            <a href="index.php?pfad=showArticle&id=<?php echo $article->getId(); ?>" class="s-res-link">
+                        <h2 class="cat-view-item-title">
-                                <?php echo htmlspecialchars($article->getTitle()); ?>
+                            <a href="#" 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>
+
+                        <!-- Meta-Zeile für Autor und Likes -->
+                        <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">
+                                &#x2764; <?php echo (isset($article) && !empty($article->getLikes())) ? htmlspecialchars($article->getLikes()) : '0'; ?>
+                            </span>
                         </div>
-                    <div class="s-res-arrow">&rarr;</div>
+
+                        <!-- Beschreibungstext -->
+                        <p style="margin: 0; color: #4a5568;">
+                            <?php echo (isset($article) && !empty($article->getContent())) ? htmlspecialchars($article->getContent()) : 'Kein Inhalt'; ?>
+                        </p>
+                    </div>
+                    <!-- Interaktiver Pfeil rechts -->
+                    <div class="cat-view-arrow">&rarr;</div>
                 </div>
             <?php endforeach; ?>
-        <?php
+        <?php else: ?>
-        else: ?>
+            <p class="cat-view-meta-text">Keine Artikel in dieser Kategorie gefunden.</p>
-        <p> Es sind noch keine Beiträge in dieser Kategorie enthalten.</p>
         <?php endif; ?>
     </div>
 
-</main>
+    <!-- Der Paginator  -->
+    <?php if (isset($totalPages) && $totalPages > 1): ?>
+        <div class="cat-view-pagination-footer">
+            <div></div> <!-- Hält die Buttons auf der rechten Seite -->
+
+            <form id="search-form-id" action="index.php" method="GET" style="display: inline;">
+                <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 (isset($page) && !empty($page)) ? $page : 1; ?>">
+
+                <!-- JS benötigt die Klasse 's-res-page-navigation' -->
+                <div class="s-res-page-navigation">
+                    <?php $currentPage = $page ?? 1; ?>
+
+                    <!-- Zurück-Button (Nutzt JS-Klasse 's-res-page-btn') -->
+                    <button type="button" class="s-res-page-btn" data-page="<?php echo $currentPage - 1; ?>" <?php echo ($currentPage <= 1) ? 'disabled' : ''; ?>>
+                        &laquo; Zurück
+                    </button>
+
+                    <!-- Seitenzahlen generieren -->
+                    <?php for ($i = 1; $i <= $totalPages; $i++): ?>
+                        <!-- Der aktive Button erhält zusätzlich die neue Klasse 'cat-active-btn' -->
+                        <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; ?>
+
+                    <!-- Vor-Button -->
+                    <button type="button" class="s-res-page-btn" data-page="<?php echo $currentPage + 1; ?>" <?php echo ($currentPage >= $totalPages) ? 'disabled' : ''; ?>>
+                        Weiter &raquo;
+                    </button>
+                </div>
+            </form>
+        </div>
+    <?php endif; ?>
+</div>

css/showCategory.css

@@ -0,0 +1,157 @@
+/* --- NEUES LAYOUT FÜR KATEGORIEN --- */
+.cat-view-container {
+    min-width: 0;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    color: #212529;
+    line-height: 1.5;
+}
+
+.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;
+}
+
+/* --- LISTE DER BEITRÄGE --- */
+.cat-view-list {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+/* Einzelne Beitrags-Box */
+.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;
+    transition: color 0.2s ease;
+}
+
+.cat-view-link:hover {
+    text-decoration: underline;
+    color: #2b6cb0;
+}
+
+/* Meta-Zeile für Autor & Likes */
+.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);
+}
+
+/* --- PAGINATOR FOOTER --- */
+.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;
+}
+
+/* Styling der Buttons (Zugeordnet zu den JS-Klassen) */
+.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;
+}
+
+/* Aktiver Button-Zustand */
+.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;
+}

index.php

@@ -63,6 +63,7 @@ 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>

php/controller/showCategory-controller.php

@@ -1,19 +1,39 @@
 <?php
+if (session_status() === PHP_SESSION_NONE) {
+    session_start();
+}
+
 require_once 'php/model/Article.php';
 require_once 'php/model/ArticleManager.php';
 require_once 'php/validator/article-validator.php';
 
 if (isset($_GET["category"]) && !empty($_GET["category"]) && articleCategoryValidator($_GET["category"])){
     $category = $_GET["category"];
+
+    $page = isset($_GET['page']) ? (int)$_GET['page'] : 1;
+    if ($page < 1) { $page = 1; }
+
     try {
         $articleManager = ArticleManager::getInstance();
-        $articles = $articleManager->getArticlesByCategory($category);
+
+        $allArticles = $articleManager->getArticlesByCategory($category);
+
+        // Paginierung konfigurieren
+        $limit = 10; // Wie viele Artikel pro Seite?
+        $totalArticles = count($allArticles);
+        $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";
         exit();
     }
-}else{
+} else {
     $_SESSION["message"] = "invalid_category";
     include_once "content/404.php";
     exit();