Merge branch 'main' of https://git.bib.de/PBBFA23AHR/kurs-app

CSS/Element/button.css

@@ -1,3 +1,10 @@
+.buttons-container{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 10px;
+}
+
 .btn{
   padding: 5px 10px;
   font-weight: var(--font-weight-semibold);
@@ -6,7 +13,9 @@
   color: var(--brand-white);
   display: flex;
   flex-direction: row;
+  justify-content: center;
   align-items: center;
+  cursor: pointer;
 }
 
 .btn-primary {
@@ -14,6 +23,11 @@
   border-radius: 3px;
 }
 
+.btn-secondary{
+  background: var(--fullblock);
+  border-radius: 3px;
+}
+
 .btn-user {
   border-radius: 9999px;
   color: var(--brand-primary);
@@ -27,6 +41,18 @@
   aspect-ratio: 1/1;
 }
 
+.btn-form{
+    padding: 10px 20px;
+}
+
+.btn-login{
+  background-color: transparent;
+}
+
 .btn-user > span {
   font-size: 28px;
 }
+
+.btn-logout{
+  background-color: red;
+}

CSS/Element/card.css

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

CSS/Element/form.css

@@ -72,3 +72,26 @@ form .error {
     margin-block-end: 0;
     outline-color: var(--error);
 }
+.form-user{
+    justify-content: center!important;
+    grid-template-columns: auto!important;
+}
+
+/* fix radio buttons registration */
+.input:nth-child(5){
+    flex-direction: row;
+    justify-content: space-between;
+    max-width: 290px;
+    align-items: center;
+}
+
+.input:nth-child(5) label{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 10px;
+}
+
+.input:nth-child(5) label input{
+    margin-top: 0;
+}

CSS/style.css

@@ -1,9 +1,11 @@
 @import url(variables.css);
+@import url(style_columns.css);
 @import url(Block/header.css);
 @import url(Block/footer.css);
 @import url(Element/logo.css);
 @import url(Element/form.css);
 @import url(Element/button.css);
+@import url(Element/card.css);
 
 *, *:before, *:after {
   -moz-box-sizing: border-box;
@@ -35,7 +37,6 @@ h2 {
 
 main {
     margin-top: 190px;
-    padding: 10px;
 }
 
 .msg {
@@ -106,3 +107,7 @@ main {
     text-decoration: none;
 }
 
+.paragraph{
+    font-size: var(--font-size-smalltext);
+    color: var(--brand-white);
+}

CSS/style_columns.css

@@ -6,6 +6,13 @@
 /*** 12 spaltiges Grid mit Flexboxen ***/
 
 /*** Container ***/
+
+.container{
+    max-width: 90%;
+    padding: 24px 42px 24px 42px;
+    margin: 0 auto;
+}
+
 .row {
     display: flex;
     flex-flow: row;

Controller/UserController.php

@@ -10,13 +10,32 @@ class UserController{
     private $validData = array();
     private $errors = array();
 
+    private $labels = [
+    "name" => "Vorname*",
+    "lastname" => "Nachname*",
+    "email" => "E-Mail*",
+    "password" => "Passwort*",
+    "role" => "Rolle*"
+    ];
+
+    private $validLoginData = array();
+    private $loginErrors = array();
+    private $loginLabels = [
+        "email" => "E-Mail*",
+        "password" => "Passwort*",
+    ];
+
     public function __construct($view){
         $this->db = new UserModel();
         $this->view = $view;
     }
 
     public function showUserRegisterForm(){
-
+        $this->view->setVars([
+                    'labels' => $this->labels,
+                    'errors' => $this->errors,
+                    'validData' => $this->validData
+                ]);
     }
 
     public function showUserRegisterConfirmation(){
@@ -24,23 +43,63 @@ class UserController{
     }
 
     public function showUserLoginForm(){
+        $this->view->setVars([
+                    'labels' => $this->loginLabels,
+                    'errors' => $this->loginErrors,
+                    'validData' => $this->validLoginData
+                ]);
+    }
 
+    private function validateForm() {
+        foreach ($this->labels as $key => $label) {
+            if (!isset($_POST[$key]) || trim($_POST[$key]) === '') {
+                $this->errors[$key] = "Bitte $label angeben";
+            } else {
+                $this->validData[$key] = trim($_POST[$key]);
+            }
+        }
+
+        if (isset($this->validData['password'])) {
+            if (strlen($this->validData['password']) < 6) {
+                $this->errors['password'] = "Das Passwort muss mindestens 6 Zeichen lang sein.";
+            }
+        }
+
+        if (isset($this->validData['email']) && !filter_var($this->validData['email'], FILTER_VALIDATE_EMAIL)) {
+            $this->errors['email'] = "Bitte eine gültige E-Mail-Adresse eingeben.";
+        }
+    }
+
+    public function validateLoginForm(){
+        foreach ($this->loginLabels as $key => $label) {
+            if (isset($this->validData['password'])) {
+                if (strlen($this->validData['password']) < 6) {
+                    $this->errors['password'] = "Das Passwort muss mindestens 6 Zeichen lang sein.";
+                }
+             }
+
+            if (isset($this->validData['email']) && !filter_var($this->validData['email'], FILTER_VALIDATE_EMAIL)) {
+                $this->errors['email'] = "Bitte eine gültige E-Mail-Adresse eingeben.";
+            }
+        }
     }
 
     public function showUserLoginConfirmation(){
         $userId = $this->getCurrentUserId();
         $user = null;
-        var_dump($user . "user");
         if($userId){
             $user = $this->db->getUserById($userId);
         }
-        include 'Views/User/showUserLoginConfirmation.phtml';
+
+        $path = "Views/User/showUserLoginConfirmation.phtml";
+            if(file_exists($path)){
+            include $path;
+       }
     }
 
     public function register(){
         $this->db->createUser($_POST);
-        $this->view->setDoMethodName("showUserRegisterConfirmation");
+        $this->login();
-        $this->showUserRegisterConfirmation();
     }
 
     public function login(){
@@ -73,7 +132,8 @@ class UserController{
 
     public function logout(){
         $this->clearUserSession();
-        echo "Erfolgreich ausgeloggt";
+        header("Location: index.php?controller=user&do=showUserLoginForm");
+        exit();
     }
 
     public function isUserLoggenIn(){
@@ -83,4 +143,8 @@ class UserController{
     public function getCurrentUserId(){
         return $_SESSION["user_id"] ?? null;
     }
+
+    public function showUserAccountPage (){
+        
+    }
 }

Views/User/showUserAccountPage.phtml

@@ -0,0 +1,17 @@
+<?php
+    include dirname(__DIR__).'/header.phtml';
+?>
+
+<article>
+    <div class="container">
+        <div class="row">
+            <div class="col-12">
+                <form method="post">
+                    <input type="hidden" name="controller" value="user">
+                    <input type="hidden" name="do" value="logout">
+                    <button type="submit" class="btn btn-logout">Ausloggen</button>
+                </form>
+            </div>
+        </div>
+    </div>
+</article>

Views/User/showUserLoginConfirmation.phtml

@@ -2,16 +2,23 @@
     include dirname(__DIR__).'/header.phtml';
 ?>
 
-<?php if ($user): ?>
+<div class="container">
-    <p>Hallo, <?= htmlspecialchars($user['vorname']) ?> <?= htmlspecialchars($user['name']) ?>!</p>
+    <div class="row">
-<?php else: ?>
+        <div class="col-12">
-    <p>Benutzerdaten konnten nicht geladen werden.</p>
+            <h1>Erfolgreiche Anmeldung!</h1>
-<?php endif; ?>
 
-<h1>Sie haben sich erfolgreich angemeldet</h1>
+            <?php if ($user): ?>
+            <p class="paragraph">Hallo, <?= htmlspecialchars($user['vorname']) ?> <?= htmlspecialchars($user['name']) ?>!</p>
 
+            <div class="row" style="gap: 10px">
+                <a class="btn btn-primary" href="index.php">Unsere Kurse ansehen</a>
+                <a class="btn btn-secondaty" href="?controller=User&do=showUserAccountPage">Zu meinem Account</a>
+            </div>
 
+            <?php else: ?>
+                <p>Benutzerdaten konnten nicht geladen werden.</p>
+            <?php endif; ?>
 
-<?php
+        </div>
-include dirname(__DIR__).'/footer.phtml';
+    </div>
-?>
+</div>

Views/User/showUserLoginForm.phtml

@@ -2,22 +2,33 @@
     include dirname(__DIR__).'/header.phtml';
 ?>
 
-<h1>Als Benutzer anmelden</h1>
+<div class="container">
+    <div class="row">
+        <div class="col-12">
+            <h1>Als Benutzer anmelden</h1>
 
-<form method="post">
+            <form method="post" class="form-grid form-user">
+                <?php foreach ($labels as $key => $label): ?>
+                    <div class="input">
+                        <label for="reg_<?= $key ?>"><?= $label ?></label>
+                        <?php if ($key === 'password'): ?>
+                        <input type="password" name="<?= $key ?>" id="reg_<?= $key ?>" required>
+                        <?php elseif($key === 'email'): ?>
+                        <input type="email" name="<?= $key ?>" id="reg_<?= $key ?>" required>
+                        <?php else: ?>
+                            <input type="text" name="<?= $key ?>" id="reg_<?= $key ?>" value="<?= htmlspecialchars($validData[$key] ?? '') ?>" required>
+                        <?php endif; ?>
 
-    <label for="reg_email">Email:</label>
+                        <?php if (!empty($errors[$key])): ?>
-    <input type="email" name="email" id="reg_email" required>
+                            <div class="error"><?= $errors[$key] ?></div>
+                        <?php endif; ?>
+                        </div>
+                <?php endforeach; ?>
 
-    <label for="reg_password">Passwort:</label>
+                <input type="hidden" name="controller" value="user">
-    <input type="password" name="password" id="reg_password" required>
+                <input type="hidden" name="do" value="login">
-    
+                <button type="submit" class="btn btn-primary btn-form" style="display: block">Login</button>
-    <input type="hidden" name="controller" value="user">
+            </form>
-    <input type="hidden" name="do" value="login">
+        </div>
-    <button type="submit" class="btn" style="display: block">Login</button>
+    </div>
-</form>
+</div>
-
-
-<?php
-include dirname(__DIR__).'/footer.phtml';
-?>

Views/User/showUserRegisterForm.phtml

@@ -2,38 +2,36 @@
     include dirname(__DIR__).'/header.phtml';
 ?>
 
-<h1>Benutzer erstellen</h1>
+<div class="container">
+    <div class="row">
+        <div class="col-12">
+            <h1>Benutzer erstellen</h1>
 
-<form method="post">
+            <form method="post" class="form-grid">
-    <h2>Registrieren</h2>
 
-    <label for="reg_name">Vorname:</label>
+                <?php foreach ($labels as $key => $label): ?>
-    <input type="text" name="name" id="reg_name" required>
+                    <div class="input">
+                        <label for="reg_<?= $key ?>"><?= $label ?></label>
+                        <?php if ($key === 'password'): ?>
+                        <input type="password" name="<?= $key ?>" id="reg_<?= $key ?>" required>
+                        <?php elseif ($key === 'role'): ?>
+                            <label><input type="radio" name="role" value="user" required<?= (isset($validData['role']) && $validData['role'] === 'user') ? 'checked' : '' ?>> User</label>
+                            <label><input type="radio" name="role" value="leiter" <?= (isset($validData['role']) && $validData['role'] === 'leiter') ? 'checked' : '' ?>> Leiter</label>
+                        <?php else: ?>
+                            <input type="text" name="<?= $key ?>" id="reg_<?= $key ?>" value="<?= htmlspecialchars($validData[$key] ?? '') ?>" required>
+                        <?php endif; ?>
 
-    <label for="reg_lastname">Nachname:</label>
+                        <?php if (!empty($errors[$key])): ?>
-    <input type="text" name="lastname" id="reg_lastname" required>
+                            <div class="error"><?= $errors[$key] ?></div>
+                        <?php endif; ?>
+                        </div>
+                <?php endforeach; ?>
 
-    <label for="reg_email">Email:</label>
+                <input type="hidden" name="controller" value="user">
-    <input type="email" name="email" id="reg_email" required>
+                <input type="hidden" name="do" value="register">
 
-    <label for="reg_password">Passwort:</label>
+                <button type="submit" class="btn btn-primary btn-form">Registrieren</button>
-    <input type="password" name="password" id="reg_password" required>
+            </form>
-
+        </div>
-    <p>Wähle deine Rolle:</p>
+    </div>
-    <label>
+</div>
-        <input type="radio" name="role" value="user" required> User
-    </label>
-    <label>
-        <input type="radio" name="role" value="leiter"> Leiter
-    </label>
-    
-    <input type="hidden" name="controller" value="user">
-    <input type="hidden" name="do" value="register">
-    <button type="submit" class="btn" style="display: block">Registrieren</button>
-</form>
-
-<a href="?controller=User&do=showUserLoginForm">Haben Sie schon ein Benutzer Konto?</a>
-
-<?php
-include dirname(__DIR__).'/footer.phtml';
-?>

Views/Welcome/showWelcome.phtml

@@ -1,9 +1,60 @@
 <?php
-include dirname(__DIR__).'/header.phtml';
+include dirname(__DIR__) . '/header.phtml';
 ?>    
 
-<article>
+<div class="container">
-    HIER LANDING PAGE
+    <div class="row">
-</article>
+        <div class="col-12">
-<?php include dirname(__DIR__).'/footer.phtml'; ?>
+        <h1 class="welcome-heading">KURSE & ERLEBNISSE JEDER ART</h1>
+        <p class="welcome-subheading">Alle Kurse in deiner Nähe – auf einen Blick</p>
+        <div class="course-grid">
+        <?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="course-card col-4">
+                <div class="course-image"></div>
+                <div class="course-content">
+                    <div class="course-left">
+                        <div><?= $kurs['bewertung'] ?> ★</div>
+                        <div><?= $kurs['titel'] ?></div>
+                        <div>Kursleiter: <?= $kurs['leiter'] ?></div>
+                        <div><?= $kurs['adresse'] ?></div>
+                    </div>
+                    <div class="course-right">
+                        <div><?= $kurs['preis'] ?></div>
+                        <div><?= $kurs['ort'] ?></div>
+                    </div>
+                </div>
+            </div>
+        <?php endforeach; ?>
+    </div>
+        </div>
+    </div>
+</div>

Views/header.phtml

@@ -16,16 +16,25 @@
 <body>
     <header>
         <nav class="d-flex-between">
-            <a id="logo" href="/">bib<span>course</span></a>
+            <a id="logo" href="index.php">bib<span>course</span></a>
             <div style="column-gap: 8px;" class="d-flex-between">
                 <div style="column-gap: 8px;" class="d-flex-between">
                     <?php if (isset($_SESSION['user_id']) && $_SESSION['user_id'] !== null): ?>
+                        <?php if($_SESSION['user_role'] == 'admin'): ?>
                         <a style="column-gap: 16px;" class="btn" href="?controller=Admin&do=showAdminForm">
-                            <?php echo ($_SESSION['vorname'] ?? "") . " " . ($_SESSION['name'] ?? "") ?>
+                            <?php echo ($_SESSION['vorname'] ?? "") . " " . ($_SESSION['name'] ?? "") . ", " . ($_SESSION['user_role']) ?>
                             <span class="btn btn-user">
                                 <span class="material-icons">person</span>
                             </span>
                         </a>
+                        <?php else: ?>
+                        <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>
+                        <?php endif; ?>
                     <?php else: ?>
                         <a class="btn" href="?controller=User&do=showUserLoginForm">Anmeldung</a>
                         <a class="btn btn-primary" href="?controller=User&do=showUserRegisterForm">Registration</a>