course-seite ohne styles

# Conflicts:
#	Views/Welcome/showWelcome.phtml

CSS/Block/header.css

@@ -3,6 +3,7 @@ header {
     top: 0px;
     left: 0px;
     width: 100%;
+    background-color: var(--brand-background);
 }
 
 nav {

CSS/Element/button.css

@@ -18,6 +18,13 @@
   cursor: pointer;
 }
 
+.btn-link {
+  text-decoration: underline;
+  background-color: transparent;
+  color: var(--brand-white);
+  border: none;
+}
+
 .btn-primary {
   background: var(--brand-primary);
   border-radius: 3px;

CSS/Element/card.css

@@ -1,104 +1,108 @@
-/* === Grundlayout === */
+
 body {
-  margin: 0;
+    margin: 0;
-  font-family: var(--font-family-main);
+    font-family: var(--font-family-main);
-  background-color: var(--brand-background);
+    background-color: var(--brand-background);
-  color: var(--brand-white);
+    color: var(--brand-white);
 }
 
-/* === Header-Bereich === */
 .welcome-header {
-  text-align: center;
+    text-align: center;
-  margin: 60px 20px 40px 20px;
+    margin: 60px 20px 40px 20px;
 }
 
 .welcome-heading {
-  font-size: 50px;
+    font-size: 50px;
-  font-weight: 500;
+    font-weight: 500;
-  color: var(--brand-primary);
+    color: var(--brand-primary); 
-  margin-bottom: 20px;
+    margin-bottom: 20px;
 }
 
 .welcome-subheading {
-  font-size: 28px;
+    font-size: 28px;
-  font-weight: bold;
+    font-weight: bold;
-  color: white;
+    color: white;
-  text-align: left;
+    text-align: left;
-  max-width: 1000px;
+    max-width: 1000px;
-  margin: 0 auto;
+    margin-bottom: 30px;
-  padding-left: 230px;
 }
 
-/* === Kurs-Grid === */
+.course-grid {
-.courses-view {
+    display: flex;
-  display: flex;
+    flex-wrap: wrap;
-  flex-direction: row;
+    gap: 40px;
-  flex-wrap: wrap;
+    margin-left: 20px;
-  gap: 30px;
-  justify-content: center;
-  padding: 30px 0 30px 0;
 }
 
-/* === Kurs-Karte === */
+@media screen and (max-width: 765px) {
+    .course-grid{
+        margin-left: 0;
+    }
+}
+
+
 .course-card {
-  background: var(--brand-white);
+    background: var(--brand-white);
-  border-radius: 12px;
+    border-radius: 12px;
-  overflow: hidden;
+    overflow: hidden;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-  min-height: 300px;
+    min-height: 300px;
-  display: flex;
+    display: flex;
-  flex-direction: column;
+    flex-direction: column;
-  width: 100%;
-  max-width: 600px;
 }
 
-/* Optional: Kurs-Bildbereich */
 .course-image {
-  background-color: #ddd; /* Platzhalter – kannst du durch echte Bilder ersetzen */
+    background-color: #ddd; 
-  height: 180px;
+    height: 180px;
-  width: 100%;
+    width: 100%;
 }
 
-/* === Kurs-Inhalt === */
 .course-content {
-  background-color: var(--brand-primary); /* Orange */
+    background-color: var(--brand-primary);
-  color: var(--brand-white);
+    color: var(--brand-white);
-  padding: 20px;
+    padding: 20px;
-  font-size: 16px;
+    font-size: 16px;
-  display: flex;
+    display: flex;
-  justify-content: space-between;
+    justify-content: space-between;
-  align-items: flex-start;
+    align-items: flex-start;
-  gap: 10px;
+    gap: 10px;
 }
 
 .course-left,
 .course-right {
-  display: flex;
+    display: flex;
-  flex-direction: column;
+    flex-direction: column;
-  font-size: 14px;
+    font-size: 14px;
-  line-height: 1.4;
+    line-height: 1.4;
 }
 
 .course-left div:first-child,
 .course-right div:first-child {
-  font-weight: bold;
+    font-weight: bold;
-  font-size: 16px;
+    font-size: 16px;
 }
 
 .course-right {
-  text-align: right;
+    text-align: right;
 }
 
 @media screen and (max-width: 1024px) {
+    .course-card {
+        flex: 0 0 calc(50% - 20px);
+    }
 }
 
 @media screen and (max-width: 640px) {
-  .welcome-heading {
+    .course-card {
-    font-size: 36px;
+        flex: 0 0 100%;
-  }
+    }
 
-  .welcome-subheading {
+    .welcome-heading {
-    font-size: 20px;
+        font-size: 36px;
-    text-align: center;
+    }
-  }
+
+    .welcome-subheading {
+        font-size: 20px;
+        text-align: center;
+    }
 }

CSS/Element/filter_box.css

@@ -0,0 +1,32 @@
+.filter-box {
+    background: #EB8202;
+    color: #fff;
+    padding: 1em;
+    border-radius: 8px;
+    font-family: sans-serif;
+    margin-bottom: 1em;
+}
+
+.filter-box label {
+    display: block;
+    margin-top: 0.5em;
+}
+
+.filter-box select,
+.filter-box input[type="text"],
+.filter-box input[type="range"] {
+    width: 100%;
+    margin-top: 0.25em;
+}
+
+.filter-box button {
+    margin-top: 1em;
+    width: 100%;
+    background: white;
+    color: #000;
+    border: none;
+    padding: 0.5em;
+    font-weight: bold;
+    cursor: pointer;
+    border-radius: 4px;
+}

CSS/Element/form.css

@@ -51,6 +51,12 @@ textarea {
   margin: auto;
 }
 
+@media screen and (max-width: 1024px) {
+  .form-grid {
+    grid-template-columns: repeat(1, 1fr);
+  }
+}
+
 .form-grid-3 {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
@@ -91,25 +97,31 @@ form .error {
   outline-color: var(--error);
 }
 .form-user {
-  justify-content: center !important;
+  /*justify-content: center !important;*/
   grid-template-columns: auto !important;
 }
 
-/* fix radio buttons registration */
 .radio {
   flex-direction: row;
-  justify-content: space-between;
   max-width: 290px;
   align-items: center;
-}
+  gap: 24px;
   
-.radio {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 10px;
 }
 
 .radio input {
   margin-top: 0;
+  height: var(--h-sm);
+  width: var(--h-sm);
+}
+
+.input-transparent{
+  background: transparent!important;
+  border: transparent!important;
+}
+
+@media only screen and (max-width: 500px) {
+ .input-transparent{
+   display: none;
+ }
 }

CSS/Element/modal.css

@@ -0,0 +1,34 @@
+.modal-overlay {
+    display: none;
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.6);
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+}
+
+.modal-overlay.is-visible {
+    display: flex;
+}
+
+.modal {
+    background: var(--brand-background);
+    padding: 1.5rem;
+    border-radius: 6px;
+    text-align: center;
+    max-width: 320px;
+    width: 90%;
+}
+
+@media only screen and (min-width: 900px) {
+    .modal nav {
+        padding: 24px 42px 24px 42px;
+    }
+}
+
+@media only screen and (max-width: 800px) {
+    .modal nav {
+        padding: 0;
+    }
+}

CSS/style.css

@@ -7,6 +7,8 @@
 @import url(Element/button.css);
 @import url(Element/card.css);
 @import url(Element/sidebar.css);
+@import url(Element/filter_box.css);
+@import url(Element/modal.css);
 
 *,
 *:before,
@@ -22,6 +24,7 @@ body {
   color: var(--brand-white);
   font-size: 15px;
   margin: 0;
+  overflow-x: hidden;
 }
 
 h1 {
@@ -46,6 +49,13 @@ main {
   margin-top: 190px;
 }
 
+@media screen and (max-width: 1024px) {
+  main{
+    margin-top: 50px;
+  }
+}
+
+
 .msg {
   text-align: center;
   font-size: 17px;
@@ -108,6 +118,14 @@ main {
   align-items: center;
 }
 
+@media only screen and (max-width: 500px) {
+  .d-flex-between{
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 20px;
+  }
+}
+
 .hover:hover {
   opacity: 0.75;
   text-decoration: none;

CSS/style_columns.css

@@ -7,19 +7,31 @@
 
 /*** Container ***/
 
-.container{
+.container {
     max-width: 90%;
-    padding: 24px 42px 24px 42px;
+  /*  padding: 24px 42px 24px 42px; */
     margin: 0 auto;
     color: var(--brand-white);
 }
 
+@media only screen and (max-width: 500px) {
+    .container {
+        padding: 5px;
+    }
+}
+
 .row {
     display: flex;
     flex-flow: row;
     flex-wrap: wrap;
 }
 
+@media (max-width: 800px) {
+    .row {
+        display: block;
+    }
+}
+
 /*** Spaltendefinitionen Smartphone Ansicht ***/
 @media (max-width: 529px) {
     .col-s-12 {
@@ -33,16 +45,19 @@
 }
 
 /*** Spaltendefinitionen Tablet Ansicht ***/
-@media (min-width: 530px) {
+@media (min-width: 750px) {
     .col-m-1 {
         flex: 0 0 100%;
     }
+
     .col-m-4 {
         flex: 0 0 33.3333333%;
     }
+
     .col-m-6 {
         flex: 0 0 50%;
     }
+
     .col-m-12 {
         flex: 0 0 100%;
     }
@@ -53,21 +68,35 @@
     .col-1 {
         flex: 0 0 8.3333333%;
     }
+
     .col-3 {
         flex: 0 0 25%;
     }
+
     .col-4 {
         flex: 0 0 33.3333333%;
     }
+
+    .col-card-4{
+        flex: 1 1 calc((100% - (3 - 1) * 40px) / 3);
+    }
+
     .col-5 {
         flex: 0 0 41.6666667%;
     }
+
     .col-6 {
         flex: 0 0 50%;
     }
+
     .col-8 {
         flex: 0 0 66.66666667%;
     }
+
+    .col-9{
+        flex: 0 0 75%;
+    }
+
     .col-12 {
         flex: 0 0 100%;
     }

CSS/variables.css

@@ -21,6 +21,7 @@
     /*Font-Weight*/
     --font-weight-semibold: 600;
 
+    --h-sm: 24px;
     --h-md: 48px;
     --border-primary: 1px solid #998E82;
 

Controller/CourseController.php

@@ -0,0 +1,35 @@
+<?php
+
+namespace Blog\Controller;
+
+use Blog\Model\CourseModel;
+
+class CourseController{
+    private $view;
+    private $db;
+
+    public function __construct($view){
+        $this->db = new CourseModel();
+        $this->view = $view;
+    }
+
+   public function showCourse(){
+        $id = $_GET["courseId"] ?? null;
+        if(!$id){
+            header('Location: index.php');
+            exit;
+        }
+
+        $kurs = $this->db->getCourseById($id);
+        if(!$kurs){
+            new \Blog\Library\ErrorMsg("Kurs nicht gefunden");
+        }
+
+        $this->view->setVars([
+            "kurs" => $kurs
+        ]);
+
+   }
+
+
+}

Controller/UserController.php

@@ -26,10 +26,10 @@ class UserController{
     ];
 
     private $changeUserLabels = [
-        'vorname'  => 'Vorname*',
+        'vorname'  => 'Vorname',
-        'name'     => 'Nachname*',
+        'name'     => 'Nachname',
-        'email'    => 'E-Mail*',
+        'email'    => 'E-Mail',
-        'password' => 'Passwort*',
+        'password' => 'Passwort',
     ];
 
     private $kursValidData = array();
@@ -267,7 +267,7 @@ class UserController{
 
         $currentUser = $this->db->getUserById($userId);
         if(!$currentUser){
-            throw new \Exception("User nicht gefunden");
+            new \Blog\Library\ErrorMsg("User nicht gefunden");
         }
 
         $validData = [
@@ -296,7 +296,7 @@ class UserController{
 
         $currentUser = $this->db->getUserById($userId);
         if (!$currentUser) {
-            throw new \Exception('User nicht gefunden');
+            new \Blog\Library\ErrorMsg('User nicht gefunden');
         }
 
         $submitted = [
@@ -388,5 +388,20 @@ class UserController{
 
     }
 
+    public function enroll() {
+        $courseId = $_POST['id'] ?? null;
+        $userId = $_SESSION['user_id'] ?? null;
 
+        if ($userId === null) {
+            new \Blog\Library\ErrorMsg("Nicht eingeloggt.");
+        }
+
+        if ($courseId === null) {
+            new \Blog\Library\ErrorMsg("Kein Kurs ausgewählt");
+        }
+
+        $this->db->enroll($courseId, $userId);
+
+        $this->view->setDoMethodName("showEnrollmentConfirmation");
+    }
 }

JS/modal.js

@@ -0,0 +1,34 @@
+document.addEventListener('DOMContentLoaded', () =>{
+    const deleteForm = document.getElementById("deleteForm")
+    const confirmModal = document.getElementById("confirmModal");
+    const btnCancel = document.getElementById("btnCancel");
+    console.log(btnCancel);
+    const btnConfirm = document.getElementById("btnConfirm");
+
+    deleteForm.addEventListener('submit',e => {
+        e.preventDefault();
+        confirmModal.classList.add('is-visible');
+    })
+
+    btnCancel.addEventListener('click', e => {
+        confirmModal.classList.remove('is-visible');
+    })
+
+    btnConfirm.addEventListener('click', e => {
+        confirmModal.classList.remove('is-visible');
+        deleteForm.submit();
+    });
+
+    deleteForm.addEventListener('click', e => {
+        if (e.target === deleteForm) {
+            confirmModal.classList.remove('is-visible');
+        }
+    });
+
+    document.addEventListener('keydown', e => {
+        if (e.key === 'Escape' && deleteForm.classList.contains('is-visible')) {
+            confirmModal.classList.remove('is-visible');
+        }
+    });
+
+});

Model/CourseModel.php

@@ -0,0 +1,24 @@
+<?php
+
+namespace Blog\Model;
+
+use Blog\Model\Database;
+use PDOException;
+use Random\RandomException;
+
+class CourseModel extends Database
+{
+    public function getCourseById(string $id){
+        $pdo = $this->linkDB();
+        $sql = "SELECT  k.id, k.name, k.preis, k.dauer, k.rabatt, k.kategorie, k.beschreibung, k.ort_id,
+                        o.stadt, o.strasse, o.plz, b.note, b.kommentar
+            FROM kurs k
+            JOIN ort o ON k.ort_id = o.id
+            LEFT JOIN bewertungen AS b ON b.kurs_id = k.id
+            WHERE k.id = :id";
+        $sth = $pdo->prepare($sql);
+        $sth->execute([':id' => $id]);
+        $result = $sth->fetch(\PDO::FETCH_ASSOC);
+        return $result ?? null;
+    }
+}

Model/UserModel.php

@@ -157,17 +157,67 @@ class UserModel extends Database
     }
 
     public function getMyCourses() {
-        $sql = "SELECT k.id, k.name, k.preis, k.dauer, k.rabatt, k.kategorie, k.beschreibung, k.ort_id, o.stadt, o.strasse, o.plz, b.note, b.kommentar
+        $personId = $_SESSION["user_id"];
-                FROM kurs AS k
+        $isKursleiter = $_SESSION["user_role"] === "leiter";
-                JOIN ort AS o ON o.id = k.ort_id
-                LEFT JOIN bewertungen AS b ON b.kurs_id = k.id
-                ORDER BY k.name;";
 
         $pdo = $this->linkDB();
 
+        if ($isKursleiter) {
+            $sql = "SELECT k.id, k.name, k.preis, k.dauer, k.rabatt, k.kategorie, k.beschreibung, k.ort_id,
+                        o.stadt, o.strasse, o.plz, b.note, b.kommentar
+                    FROM kurs AS k
+                    JOIN ort AS o ON o.id = k.ort_id
+                    LEFT JOIN bewertungen AS b ON b.kurs_id = k.id
+                    WHERE k.kursleiter = :personId
+                    ORDER BY k.name";
+        } else {
+            $sql = "SELECT k.id, k.name, k.preis, k.dauer, k.rabatt, k.kategorie, k.beschreibung, k.ort_id,
+                        o.stadt, o.strasse, o.plz, b.note, b.kommentar
+                    FROM kurs_user AS ku
+                    JOIN kurs AS k ON k.id = ku.kurs_id
+                    JOIN ort AS o ON o.id = k.ort_id
+                    LEFT JOIN bewertungen AS b ON b.kurs_id = k.id
+                    WHERE ku.user_id = :personId
+                    ORDER BY k.name";
+        }
+
         try {
             $sth = $pdo->prepare($sql);
-            $sth->execute();
+            $sth->execute([':personId' => $personId]);
+            return $sth->fetchAll(\PDO::FETCH_ASSOC);
+        } catch (PDOException $e) {
+            new \Blog\Library\ErrorMsg("Fehler beim Lesen der Daten.", $e); 
+            die;
+        }
+    }
+    public function getAllCourses() {
+        $pdo = $this->linkDB();
+        $userId = $_SESSION['user_id'] ?? null;
+
+        if ($userId === null) {
+            $sql = "SELECT 
+                        k.id, k.name, k.preis, k.dauer, k.rabatt, k.kategorie, k.beschreibung, k.ort_id,
+                        o.stadt, o.strasse, o.plz, b.note, b.kommentar,
+                        0 AS isTeilnehmer
+                    FROM kurs AS k
+                    JOIN ort AS o ON o.id = k.ort_id
+                    LEFT JOIN bewertungen AS b ON b.kurs_id = k.id";
+            $params = [];
+        } else {
+            $sql = "SELECT 
+                        k.id, k.name, k.preis, k.dauer, k.rabatt, k.kategorie, k.beschreibung, k.ort_id,
+                        o.stadt, o.strasse, o.plz, b.note, b.kommentar,
+                        CASE WHEN ku.user_id IS NULL THEN 0 ELSE 1 END AS isTeilnehmer
+                    FROM kurs AS k
+                    JOIN ort AS o ON o.id = k.ort_id
+                    LEFT JOIN bewertungen AS b ON b.kurs_id = k.id
+                    LEFT JOIN kurs_user AS ku ON ku.kurs_id = k.id AND ku.user_id = :userId";
+            $params = ['userId' => $userId];
+        }
+
+        try {
+            $sth = $pdo->prepare($sql);
+            $sth->execute($params);
             return $sth->fetchAll(\PDO::FETCH_ASSOC);
         } catch (PDOException $e) {
             new \Blog\Library\ErrorMsg("Fehler beim Lesen der Daten.", $e); 
@@ -244,4 +294,35 @@ class UserModel extends Database
 
         return true;
     }
+
+    public function enroll($courseId, $userId) {
+        $pdo = $this->linkDB();
+
+        try {
+            $checkSql = "SELECT COUNT(*) FROM kurs_user WHERE user_id = :user_id AND kurs_id = :kurs_id";
+            $checkStmt = $pdo->prepare($checkSql);
+            $checkStmt->execute([
+                ':user_id' => $userId,
+                ':kurs_id' => $courseId
+            ]);
+
+            if ($checkStmt->fetchColumn() > 0) {
+                return false;
+            }
+
+            $insertSql = "INSERT INTO kurs_user (user_id, kurs_id) VALUES (:user_id, :kurs_id)";
+            $insertStmt = $pdo->prepare($insertSql);
+            $insertStmt->execute([
+                ':user_id' => $userId,
+                ':kurs_id' => $courseId
+            ]);
+
+        } catch (PDOException $e) {
+            new \Blog\Library\ErrorMsg("Fehler beim Einschreiben in den Kurs.", $e);
+            die;
+        }
+
+        return true;
+    }
+
 }

Views/Course/showCourse.phtml

@@ -0,0 +1,20 @@
+<?php
+include dirname(__DIR__).'/header.phtml';
+?>
+
+    <div class="container">
+        <div class="row">
+            <div class="col-6">
+                <h1><?= htmlspecialchars($kurs['name']) ?></h1>
+            </div>
+            <div class="col-6">
+                <p><strong>Bewertung:</strong> <?= $kurs['note'] ?> ★</p>
+                <p><strong>Preis:</strong> <?= htmlspecialchars($kurs['preis']) ?>€</p>
+                <p><strong>Adresse:</strong> <?= htmlspecialchars($kurs['strasse']) ?>, <?= htmlspecialchars($kurs['plz']) ?> <?= htmlspecialchars($kurs['stadt']) ?></p>
+                <p><?= nl2br(htmlspecialchars($kurs['beschreibung'] ?? '')) ?></p>
+                <a href="index.php">‹ Zurück zur Kursübersicht</a>
+            </div>
+        </div>
+    </div>
+
+<?php include dirname(__DIR__).'/footer.phtml'; ?>

Views/User/showEnrollmentConfirmation.phtml

@@ -0,0 +1,12 @@
+<?php
+include dirname(__DIR__).'/header.phtml';
+?>    
+
+<div class="msg">
+<p>Erfolgreich aufgenommen!</p>
+<a href="?controller=welcome">Weiter</a>
+</div>
+
+
+
+<?php include dirname(__DIR__).'/footer.phtml'; ?>

Views/User/showUserAccountPage.phtml

@@ -3,6 +3,15 @@
 ?>
 
 <article>
+    <div id="confirmModal" class="modal-overlay">
+        <div class="modal">
+            <p>Sind Sie sicher, dass Sie Ihren Account löschen möchten?</p>
+            <div class="row" style="flex-wrap: nowrap">
+                <button id="btnCancel" class="btn btn-secondary">Abbrechen</button>
+                <button id="btnConfirm" class="btn btn-logout">Ja, Account löschen</button>
+            </div>
+        </div>
+    </div>
     <div class="container">
         <div class="row">
             <div class="col-12">
@@ -32,7 +41,7 @@
                                    </form>
                                </li>
                                <li>
-                                   <form method="post">
+                                   <form method="post" id="deleteForm">
                                        <input type="hidden" name="controller" value="user">
                                        <input type="hidden" name="do" value="deleteAccount">
                                        <button type="submit" class="btn btn-logout">Meinen Account löschen</button>
@@ -52,5 +61,4 @@
     </div>
 </article>
 
-
 <?php include dirname(__DIR__).'/footer.phtml'; ?>

Views/User/showUserChangeAccountSettings.phtml

@@ -5,7 +5,7 @@ include dirname(__DIR__).'/header.phtml';
 <div class="container">
     <div class="row">
         <div class="col-12">
-            <h1>Change Account Info</h1>
+            <h1>Meine Daten ändern</h1>
 
             <form method="post" class="form-grid form-user">
                 <?php foreach ($changeUserLabels as $key => $label): ?>
@@ -32,3 +32,5 @@ include dirname(__DIR__).'/header.phtml';
         </div>
     </div>
 </div>
+
+<?php include dirname(__DIR__).'/footer.phtml'; ?>

Views/User/showUserDeleteConfirmation.phtml

@@ -12,3 +12,5 @@
         </div>
     </div>
 </div>
+
+<?php include dirname(__DIR__).'/footer.phtml'; ?>

Views/User/showUserLoginConfirmation.phtml

@@ -22,3 +22,5 @@
         </div>
     </div>
 </div>
+
+<?php include dirname(__DIR__).'/footer.phtml'; ?>

Views/User/showUserLoginForm.phtml

@@ -32,3 +32,5 @@
         </div>
     </div>
 </div>
+
+<?php include dirname(__DIR__).'/footer.phtml'; ?>

Views/User/showUserRegisterConfirmation.phtml

@@ -9,3 +9,5 @@
 <?php
 include dirname(__DIR__).'/footer.phtml';
 ?>
+
+

Views/User/showUserRegisterForm.phtml

@@ -6,11 +6,9 @@
     <div class="row">
         <div class="col-12">
             <h1>Registration</h1>
-
             <form method="post" class="form-grid">
-
                 <?php foreach ($labels as $key => $label): ?>
-                    <div class="input">
+                    <div class="input <?= $key === 'role' ? "radio" : "" ?>">
                         <label for="reg_<?= $key ?>"><?= $label ?></label>
                         <?php if ($key === 'password'): ?>
                         <input type="password" name="<?= $key ?>" id="reg_<?= $key ?>" required>
@@ -30,8 +28,11 @@
                 <input type="hidden" name="controller" value="user">
                 <input type="hidden" name="do" value="register">
 
+                <input type="text" class="input-transparent">
                 <button type="submit" class="btn btn-primary btn-form">Registrieren</button>
             </form>
         </div>
     </div>
 </div>
+
+<?php include dirname(__DIR__).'/footer.phtml'; ?>

Views/Welcome/showWelcome.phtml

@@ -1,60 +1,107 @@
 <?php
 include dirname(__DIR__) . '/header.phtml';
+
+$rating   = $_GET['rating'] ?? '';
+$price    = $_GET['price'] ?? '';
+$location = $_GET['location'] ?? '';
 ?>
 
 <div class="container">
     <div class="row">
         <div class="col-12">
-        <h1 class="welcome-heading">KURSE & ERLEBNISSE JEDER ART</h1>
+            <h1 class="welcome-heading">KURSE & ERLEBNISSE JEDER ART</h1>
-        <p class="welcome-subheading">Alle Kurse in deiner Nähe – auf einen Blick</p>
+            <p class="welcome-subheading">Alle Kurse in deiner Nähe – auf einen Blick</p>
-        <div class="courses-view">
-        <?php
-        // Beispiel-Kurse
-        $kurse = [
-            [
-                'bewertung' => 5,
-                'titel' => 'Marketing Pro',
-                'adresse' => 'Bulu ulu Straße 17',
-                'preis' => '59,99€',
-                'ort' => '33333 Frankfurt',
-                'leiter' => 'Max Mustermann'
-            ],
-            [
-                'bewertung' => 4,
-                'titel' => 'Design Basics',
-                'adresse' => 'Musterstraße 10',
-                'preis' => '39,99€',
-                'ort' => '10115 Berlin',
-                'leiter' => 'Lisa Beispiel'
-            ],
-            [
-                'bewertung' => 5,
-                'titel' => 'Excel Masterclass',
-                'adresse' => 'Tabellenweg 5',
-                'preis' => '49,99€',
-                'ort' => '20457 Hamburg',
-                'leiter' => 'Thomas Tabelle'
-            ]
-        ];
 
-        foreach ($kurse as $kurs): ?>
+            <div class="row">
-            <div class="course-card col-4">
+                <div class="col-3 col-m-12">
-                <div class="course-image"></div>
+                    <div class="filter-box">
-                <div class="course-content">
+                        <form method="get">
-                    <div class="course-left">
+                            <label for="rating">Bewertung:</label>
-                        <div><?= $kurs['bewertung'] ?> ★</div>
+                            <select name="rating" id="rating">
-                        <div><?= $kurs['titel'] ?></div>
+                                <option value="">Alle</option>
-                        <div>Kursleiter: <?= $kurs['leiter'] ?></div>
+                                <option value="5" <?= $rating == '5' ? 'selected' : '' ?>>5 Sterne</option>
-                        <div><?= $kurs['adresse'] ?></div>
+                                <option value="4" <?= $rating == '4' ? 'selected' : '' ?>>4 Sterne+</option>
-                    </div>
+                                <option value="3" <?= $rating == '3' ? 'selected' : '' ?>>3 Sterne+</option>
-                    <div class="course-right">
+                            </select>
-                        <div><?= $kurs['preis'] ?></div>
+
-                        <div><?= $kurs['ort'] ?></div>
+                            <label for="price">Preis:</label>
+                            <select name="price" id="price">
+                                <option value="">Alle</option>
+                                <option value="asc" <?= $price == 'asc' ? 'selected' : '' ?>>Aufsteigend</option>
+                                <option value="desc" <?= $price == 'desc' ? 'selected' : '' ?>>Absteigend</option>
+                            </select>
+                            <button type="submit">Anwenden</button>
+                        </form>
                     </div>
                 </div>
+
+                <div class="col-9">
+                    <div class="course-grid row">
+                        <?php
+                        $userModel = new \Blog\Model\UserModel();
+                        $kurse = $userModel->getAllCourses();
+
+                    $filteredKurse = array_filter($kurse, function($kurs) use ($rating, $location) {
+                        if ($rating && $kurs['note'] < $rating) return false;
+                        if ($location && stripos($kurs['ort'], $location) === false) return false;
+                        return true;
+                    });
+
+                    if ($price) {
+                        usort($filteredKurse, function($a, $b) use ($price) {
+                            $priceA = floatval(str_replace(',', '.', str_replace('€', '', $a['preis'])));
+                            $priceB = floatval(str_replace(',', '.', str_replace('€', '', $b['preis'])));
+                            return $price === 'asc' ? $priceA <=> $priceB : $priceB <=> $priceA;
+                        });
+                    }
+
+                    $doc = new DOMDocument('1.0', 'UTF-8');
+
+                    if (!empty($filteredKurse)) {
+                        foreach ($filteredKurse as $kurs) {
+                            foreach ($filteredKurse as $kurs) {
+                                $id = htmlspecialchars($kurs['id']);
+                                $note = htmlspecialchars($kurs['note'] ?? 'Keine Bewertung') . ' ★';
+                                $name = htmlspecialchars($kurs['name']);
+                                $address = htmlspecialchars($kurs['strasse'] . ', ' . $kurs['stadt'] . ' ' . $kurs['plz']);
+                                $preis = htmlspecialchars($kurs['preis']) . ' €';
+                                $kategorie = htmlspecialchars($kurs['kategorie'] ?? 'Keine Kategorie');
+
+                                echo <<<HTML
+                                <a style="flex: 0 0 calc(50% - 20px);" href="?controller=course&do=showCourse&courseId=$id">
+                                <div class="course-card">
+                                    <div class="course-image"></div>
+                                    <div class="course-content">
+                                        <div class="course-left">
+                                            <div>$note</div>
+                                            <div>$name</div>
+                                            <div>$address</div>
+                                        </div>
+                                        <div class="course-right">
+                                            <div>$preis</div>
+                                            <div>$kategorie</div>
+                                            <form method="POST" class="course-card-form">
+                                                <input type="hidden" name="do" value="enroll">
+                                                <input type="hidden" name="controller" value="user">
+                                                <input type="hidden" name="id" value="$id">
+                                                <button type="submit" class="btn-link">Teilnehmen</button>
+                                            </form>
+                                        </div>
+                                    </div>
+                                </div>
+                                HTML;
+                            }
+                        }
+                    } else {
+                        echo '<p>Keine Kurse gefunden.</p>';
+                    }
+
+                    ?>
+                </div>
             </div>
-        <?php endforeach; ?>
+        </div>
-    </div>
+
+
         </div>
     </div>
 </div>

Views/footer.phtml

@@ -1,6 +1,6 @@
 </main>
     <footer>
-        footer
     </footer>
+    <script src="JS/modal.js"></script>
     </body>
 </html>

Views/header.phtml

@@ -14,25 +14,31 @@
 </head>
 
 <body>
-    <header>
+    <div class="container">
-        <nav class="d-flex-between">
+        <div class="row">
-            <a id="logo" href="index.php">bib<span>course</span></a>
+            <div class="col-12">
-            <div style="column-gap: 8px;" class="d-flex-between">
+                <header>
-                <div style="column-gap: 8px;" class="d-flex-between">
+                    <nav class="d-flex-between">
-                    <?php if (isset($_SESSION['user_id']) && $_SESSION['user_id'] !== null): ?>
+                        <a id="logo" href="index.php">bib<span>course</span></a>
-                        <a style="column-gap: 16px;" class="btn" href="?controller=User&do=showUserAccountPage">
+                        <div style="column-gap: 8px;" class="d-flex-between">
-                            <?php echo ($_SESSION['vorname'] ?? "") . " " . ($_SESSION['name'] ?? "") . ", " . ($_SESSION['user_role']) ?>
+                            <div style="column-gap: 8px;" class="d-flex-between">
-                            <span class="btn btn-user">
+                                <?php if (isset($_SESSION['user_id']) && $_SESSION['user_id'] !== null): ?>
+                                    <a style="column-gap: 16px;" class="btn" href="?controller=User&do=showUserAccountPage">
+                                        <?php echo ($_SESSION['vorname'] ?? "") . " " . ($_SESSION['name'] ?? "") . ", " . ($_SESSION['user_role']) ?>
+                                        <span class="btn btn-user">
                                 <span class="material-icons">person</span>
                             </span>
-                        </a>
+                                    </a>
-                    <?php else: ?>
+                                <?php else: ?>
-                        <a class="btn" href="?controller=User&do=showUserLoginForm">Anmeldung</a>
+                                    <a class="btn" href="?controller=User&do=showUserLoginForm">Anmeldung</a>
-                        <a class="btn btn-primary" href="?controller=User&do=showUserRegisterForm">Registration</a>
+                                    <a class="btn btn-primary" href="?controller=User&do=showUserRegisterForm">Registration</a>
-                    <?php endif; ?>
+                                <?php endif; ?>
-                </div>
+                            </div>
+                        </div>
+                    </nav>
+                </header>
             </div>
-        </nav>
+        </div>
-    </header>
+    </div>
     <!-- TODO Transparent mit Fehleranzeige bei der Anmeldung -->
     <main>