Update index-controller.php

article-Interface & -Klasse
+ createArticle.php mit article.css (Editor)
+ neuer "Beitrag erstellen"-Button in Navbar

content/createArticle.php

@@ -0,0 +1,83 @@
+<!--
+    Seite: Beitrag erstellen
+    Inhalt: Formular für die Erstellung eines neuen Beitrags
+-->
+<?php
+    include_once $abs_path . '/php/model/ArticleManagerDAO.php';
+    include_once $abs_path . '/php/model/ArticleManager.php';
+
+    if(isset($_POST['title']) && isset($_POST['content']) && isset($_POST['category'])) {
+
+    }else{
+        // TODO: Exception werfen.
+        echo"Fehler!";
+    }
+?>
+
+<form method="post" action="php/controller/createArticle-controller.php" id="editor-form" class="wp-editor-scope editor-container">
+
+    <main class="editor-main">
+        <input type="text" id="title" name="title" placeholder="Titel hier eingeben" required>
+        <textarea id="content" name="content" placeholder="Schreibe deinen Beitrag..."></textarea>
+    </main>
+
+    <!-- Seitenleiste -->
+    <aside class="editor-sidebar">
+
+        <div class="sidebar-block">
+            <button type="submit" class="btn-publish">Veröffentlichen</button>
+        </div>
+
+        <div class="sidebar-block">
+            <label for="category">Kategorie <span class="required">*</span></label>
+            <select id="category" name="category" required>
+                <option value="" disabled selected>Kategorie wählen...</option>
+
+                <optgroup label="Sprachen">
+                    <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>
+                </optgroup>
+
+                <optgroup label="MINT">
+                    <option value="mathe">Mathematik</option>
+                    <option value="biologie">Biologie</option>
+                    <option value="chemie">Chemie</option>
+                    <option value="physik">Physik</option>
+                    <option value="informatik">Informatik</option>
+                    <option value="astronomie">Astronomie</option>
+                </optgroup>
+
+                <optgroup label="Gesellschaft & Werte">
+                    <option value="geschichte">Geschichte</option>
+                    <option value="erdkunde">Erdkunde</option>
+                    <option value="sozialkunde">Sozialkunde</option>
+                    <option value="wirtschaft">Wirtschaftskunde</option>
+                    <option value="religion">Religion</option>
+                    <option value="ethik">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>
+                </optgroup>
+
+                <optgroup label="Technik & Praxis">
+                    <option value="technik">Technik</option>
+                    <option value="werken">Werken</option>
+                    <option value="hauswirtschaft">Hauswirtschaft</option>
+                    <option value="sport">Sport</option>
+                </optgroup>
+            </select>
+        </div>
+
+        <div class="sidebar-block">
+            <label for="tags">Schlagwörter</label>
+            <input type="text" id="tags" name="tags" placeholder="z.B. Technik, IT (mit Komma trennen)">
+        </div>
+
+    </aside>
+
+</form>

css/article.css

@@ -0,0 +1,123 @@
+/* editor in Flexbox */
+.wp-editor-scope.editor-container {
+    display: flex;
+    min-height: 100vh;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    color: #1e1e1e;
+    background-color: #f0f2f5;
+    box-sizing: border-box;
+}
+
+.wp-editor-scope * {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+/* Hauptbereich */
+.wp-editor-scope .editor-main {
+    flex: 1;
+    padding: 40px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    background: #ffffff;
+}
+
+.wp-editor-scope #title {
+    font-size: 2.5rem;
+    font-weight: 700;
+    border: none;
+    outline: none;
+    width: 100%;
+    background: transparent;
+}
+
+.wp-editor-scope #content {
+    flex: 1;
+    font-size: 1.1rem;
+    line-height: 1.6;
+    border: none;
+    outline: none;
+    resize: none;
+    width: 100%;
+    background: transparent;
+}
+
+/* Seitenleiste */
+.wp-editor-scope .editor-sidebar {
+    width: 300px;
+    background-color: #ffffff;
+    border-left: 1px solid #e0e0e0;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+}
+
+.wp-editor-scope .sidebar-block {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.wp-editor-scope .sidebar-block label {
+    font-weight: 600;
+    font-size: 0.9rem;
+}
+
+.wp-editor-scope .required {
+    color: #d94f4f;
+}
+
+/* Formularelemente innerhalb der Editor-Sidebar */
+.wp-editor-scope .editor-sidebar select,
+.wp-editor-scope .editor-sidebar input[type="text"] {
+    width: 100%;
+    padding: 8px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-size: 0.9rem;
+    background: #ffffff;
+}
+
+/* Button-Zeugs */
+.wp-editor-scope .btn-publish {
+    background-color: #007cba;
+    color: white;
+    border: none;
+    padding: 12px;
+    border-radius: 4px;
+    font-weight: 600;
+    cursor: pointer;
+    font-size: 1rem;
+    width: 100%;
+}
+
+.wp-editor-scope .btn-publish:hover {
+    background-color: #006ba1;
+}
+
+@media (max-width: 760px) {
+    .wp-editor-scope.editor-container {
+        /* Sidebar nach unten */
+        flex-direction: column;
+    }
+
+    .wp-editor-scope .editor-main {
+        /* weniger Innenabstand */
+        padding: 20px;
+    }
+
+    .wp-editor-scope #content {
+        /* Verhindert, dass das Textfeld auf kleinen Displays kollabiert */
+        min-height: 300px;
+    }
+
+    .wp-editor-scope .editor-sidebar {
+        width: 100%;
+        /* Entfernt den linken Rand und setzt ihn nach oben als Trenner */
+        border-left: none;
+        border-top: 1px solid #e0e0e0;
+    }
+}

css/main.css

@@ -17,8 +17,7 @@ a, button, input, select, textarea, label, main{
 
 .flexbox {
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
-    flex-wrap: wrap;
     gap: 20px;
     margin-top: 30px;
 }
@@ -30,7 +29,6 @@ a, button, input, select, textarea, label, main{
     border: 1px solid #dbe3ec;
     box-shadow: 0 4px 12px rgba(0,0,0,0.08);
     transition: transform 0.2s, box-shadow 0.2s;
-    flex: 1 1 300px;
 }
 
 .container:hover {

includes/navbar.php

@@ -15,9 +15,13 @@ Globales Menü, wird via PHP später in alle Seiten eingebunden
     </label>
 
     <ul id="mobile-nav" class="nav__mobile-menu">
+        <li>
+            <label for="nav-toggle" class="nav__close-btn">&times;</label>
+        </li>
         <li><a href="index.php?pfad=profile">Profil</a></li>
         <li><a href="index.php?pfad=login">Anmelden</a></li>
         <li><a href="index.php?pfad=register">Registrieren</a></li>
+        <li><a href="index.php?pfad=createArticle">Beitrag erstellen</a></li>
         <li>
             <label class="nav__mobile-label">Sprachen</label>
             <ul class="nav__mobile-submenu">
@@ -128,5 +132,6 @@ Globales Menü, wird via PHP später in alle Seiten eingebunden
         </div>
 	    <a href="index.php?pfad=login" class="nav__item nav__button">Anmelden</a>
 	    <a href="index.php?pfad=register" class="nav__item nav__button">Registrieren</a>
+        <a href="index.php?pfad=createArticle" class="nav__item nav__button">Beitrag erstellen</a>
     </div>
 </nav>

index.php

@@ -1,3 +1,11 @@
+
+<?php
+if (!isset($abs_path)) {
+    require_once "path.php";
+}
+require_once $abs_path . "/php/controller/index-controller.php";
+?>
+
 <!--
     Seite: Index der Lernplattform
     Funktion: Webseitengerüst, Anzeigen von Content
@@ -14,6 +22,7 @@
     <link rel="stylesheet" href="css/main.css">
     <link rel="stylesheet" href="css/navbar.css">
     <link rel="stylesheet" href="css/footer.css">
+    <link rel="stylesheet" href="css/article.css">
     <title>EduForge</title>
 </head>
 
@@ -21,18 +30,18 @@
 <body>
 
     <?php
-	include_once 'includes/navbar.php';
+	include_once $abs_path . '/includes/navbar.php';
 	//Dynamischer Inhalt:
     if (isset($_GET["pfad"])) {
-        if (file_exists('content/' . $_GET["pfad"] . '.php')) {
+        if (file_exists($abs_path . '/content/' . $_GET["pfad"] . '.php')) {
-            include_once 'content/' . $_GET["pfad"] . '.php';
+            include_once $abs_path . '/content/' . $_GET["pfad"] . '.php';
         } else {
-            include_once 'content/404.php';
+            include_once $abs_path . '/content/404.php';
         }
     } else {
-        include_once 'content/home.php';
+        include_once $abs_path . '/content/home.php';
     }
-    include_once 'includes/footer.php';
+    include_once $abs_path . '/includes/footer.php';
     ?>
 </body>
 

path.php

@@ -0,0 +1,3 @@
+<?php
+$abs_path = __DIR__;
+?>

php/controller/createArticle-controller.php

@@ -0,0 +1,9 @@
+<?php
+
+try {
+    $author = "max.mustermann@web.de"; // wird später aus session bezogen.
+    $articleManager->newArticle($_POST['post-title'], $_POST['post-content'], $author);
+} catch (Exception $e) {
+    echo "Fehler beim Erstellen des Artikels: " . $e->getMessage();
+}
+?>

php/controller/index-controller.php

@@ -0,0 +1,10 @@
+<?php
+require_once $abs_path . '/php/model/ArticleManager.php';
+require_once $abs_path . '/php/model/Article.php';
+
+try {
+    $articleManager = new ArticleManager();
+}catch (Exception $e){
+    die("Fehler bei der Initialisierung des Artikel-Managers: " . $e->getMessage());
+}
+?>

php/model/Article.php

@@ -0,0 +1,75 @@
+<?php
+/*
+ * Klasse: Artikel
+ * Diese Klasse stellt alle Daten eines Artikels (Beitrag) bereit
+ *
+ * @author Niklas Ortmann
+ */
+class Article
+{
+    private $id;
+    private $title;
+    private $content;
+    private $author;
+    private $date;
+
+    /*
+     * Gibt die ID eines Artikels zurück.
+     */
+    public function getId()
+    {
+        return $this->id;
+    }
+
+    /*
+     * Gibt den Titel eines Artikels zurück.
+     */
+    public function getTitle()
+    {
+        return $this->title;
+    }
+
+    /*
+     * Setzt den Titel eines Artikels.
+     */
+    public function setTitle($title)
+    {
+        $this->title = $title;
+    }
+
+    /*
+     * Gibt den Content eines Artikels zurück.
+     * TODO: Content muss noch definiert werden.
+     */
+    public function getContent()
+    {
+        return $this->content;
+    }
+
+    /*
+     * Setzt den Content eines Artikels.
+     * TODO: Content muss noch definiert werden.
+     */
+    public function setContent($content)
+    {
+        $this->content = $content;
+    }
+
+    /*
+     * Gibt den Autor eines Artikels zurück.
+     */
+    public function getAuthor()
+    {
+        return $this->author;
+    }
+
+    /*
+     * Gibt das Veröffentlichungsdatum des Artikels zurück.
+     */
+    public function getDate()
+    {
+        return $this->date;
+    }
+
+}
+?>

php/model/ArticleManager.php

@@ -0,0 +1,77 @@
+<?php
+require_once 'ArticleManagerDAO.php';
+/*
+ * Klasse: Eine lokale Lösung der DatenbankDAO.
+ * schreibt zunächst Daten lokal in das Verzeichnis und kann diese wieder auslesen.
+ *
+ * @author Niklas Ortmann
+ */
+class ArticleManager implements ArticleManagerDAO {
+    /*
+     * Gibt die Datenbank-Instanz zurück.
+     */
+    public static function getInstance()
+    {
+        if (self::$instance == null) {
+            self::$instance = new ArticleManager();
+        }
+
+        return self::$instance;
+    }
+
+
+    /*
+     * Prüft, ob die lokalen txt-Dateien existieren.
+     * Wenn nicht, werden diese erstellt.
+     */
+    public function __construct()
+    {
+
+    }
+
+    public function newArticle($title, $content, $author, $category) {
+        $newData = array(
+            "title" => $title,
+            "content" => $content,
+            "author" => $author,
+            "category" => $category,
+            //"tags" => isset($_POST["tags"]) ? $_POST["tags"] : '', TODO: Später hinzufügen
+            "date" => date("d.m.Y, H:i")
+        );
+        $newData = base64_encode(serialize($newData));
+        if (!file_exists("articles.txt")) {
+            $newData = fopen("articles.txt", "xb");
+            fclose($newData);
+        }
+        $previousData = file_get_contents("articles.txt");
+        if (file_put_contents("articles.txt", "$newData\n$previousData")) {
+            // TODO: Vernünftige Rückmeldung implementieren.
+            echo "Artikel erfolgreich gespeichert!";
+        } else {
+            // TODO: passende Exceptions werfen.
+            echo "Fehler!";
+        }
+    }
+
+    public function updateArticle($id, $title, $content, $author)
+    {
+        // TODO: Implement updateArticle() method.
+    }
+
+    public function deleteArticle($id)
+    {
+        // TODO: Implement deleteArticle() method.
+    }
+
+    public function getArticle($id)
+    {
+        // TODO: Implement getArticle() method.
+    }
+
+    public function getAllArticles()
+    {
+        // TODO: Implement getAllArticles() method.
+    }
+
+}
+?>

php/model/ArticleManagerDAO.php

@@ -0,0 +1,66 @@
+<?php
+/*
+ * Die Klasse binhaltet alle Methoden für die Operation auf der Datenbank.
+ *
+ * @author Niklas Ortmann
+ */
+
+interface ArticleManagerDAO
+{
+    /*
+     * Ein angemeldeter Nutzer erstellt einen neuen Beitrag.
+     * $title           Titel des Beitrags
+     * $content         Der Inhalt des Beitrags
+     * $author          dem Author des des Beitrags (NID oder email)
+     * $category        Kategorie des Beitrags
+     * $tags            optionale Schlagworte für eine bessere Suche
+     *
+     * Mögliche Exceptions:
+     * TODO Fehlerbeschreibung hinzufügen
+     */
+    public function newArticle($title, $content, $author, $category);
+
+    /*
+     * Ein angemeldeter Nutzer bearbeitet einen Beitrag.
+     * $id ID des Beitrags
+     * $title Titel des Beitrags
+     * $content Der Inhalt des Beitrags
+     * $author dem Author des des Beitrags (NID oder email)
+     *
+     * Mögliche Exceptions:
+     * TODO Fehlerbeschreibung hinzufügen
+     */
+    public function updateArticle($id, $title, $content, $author);
+
+    /*
+     * Ein angemeldeter Nutzer löscht einen seiner Beiträge.
+     * $id ID des Beitrags
+     * $title Titel des Beitrags
+     * $content Der Inhalt des Beitrags
+     * $author dem Author des des Beitrags (NID oder email)
+     *
+     * Mögliche Exceptions:
+     * TODO Fehlerbeschreibung hinzufügen
+     */
+    public function deleteArticle($id);
+
+    /*
+     * Beitrag aufrufen.
+     * $id ID des Beitrags
+     *
+     * Mögliche Exceptions:
+     * TODO Fehlerbeschreibung hinzufügen
+     */
+    public function getArticle($id);
+
+    /*
+     * Alle Beiträge aufrufen.
+     *
+     * Mögliche Exceptions:
+     * TODO Fehlerbeschreibung hinzufügen
+     */
+    public function getAllArticles();
+
+
+}
+?>