content/createArticle.php

@@ -0,0 +1,36 @@
+<!--
+    Seite: Beitrag erstellen
+    Inhalt: Formular für die Erstellung eines neuen Beitrags
+-->
+<form id="editor-form" class="wp-editor-scope editor-container">
+
+    <main class="editor-main">
+        <input type="text" id="post-title" name="title" placeholder="Titel hier eingeben" required>
+        <textarea id="post-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="post-category">Kategorie <span class="required">*</span></label>
+            <select id="post-category" name="category" required>
+                <option value="" disabled selected>Kategorie wählen...</option>
+                <option value="allgemein">Allgemein</option>
+                <option value="technik">Technik</option>
+                <option value="lifestyle">Lifestyle</option>
+            </select>
+        </div>
+
+        <div class="sidebar-block">
+            <label for="post-tags">Schlagwörter</label>
+            <input type="text" id="post-tags" name="tags" placeholder="z.B. Webdesign, HTML, CSS (mit Komma trennen)">
+        </div>
+
+    </aside>
+
+</form>

css/article.css

@@ -0,0 +1,99 @@
+/* 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 #post-title {
+    font-size: 2.5rem;
+    font-weight: 700;
+    border: none;
+    outline: none;
+    width: 100%;
+    background: transparent;
+}
+
+.wp-editor-scope #post-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;
+}

includes/navbar.php

@@ -126,7 +126,8 @@ Globales Menü, wird via PHP später in alle Seiten eingebunden
             include_once 'search.php';
         ?>
         </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=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

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

php/model/article.php

@@ -1,10 +1,53 @@
 <?php
+require_once articleDAO::class;
 /*
  * Klasse: Artikel
  * TODO Beschreibung hinzufügen
  */
-class article
-{
+class article implements articleDAO {
+
+    public function newArticle($title, $content, $author) {
+        $newData = array(
+            "title" => $title,
+            "content" => $content,
+            "author" => $author,
+            "email" => $_POST["Email"],
+            "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("gaestebuch.txt");
+        if (file_put_contents("gaestebuch.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/articleDAO.php

@@ -1,4 +1,7 @@
 <?php
+/*
+ * Die Klasse binhaltet alle Methoden für die Beiträge.
+ */
 
 interface articleDAO
 {