From c86bba1596911dbbd9cb648630e9a193e0af6ef1 Mon Sep 17 00:00:00 2001
From: Kilian Hofmann <llego03@yahoo.com>
Date: Fri, 10 May 2024 13:44:58 +0200
Subject: [PATCH] Guest Book (and components, yea)

---
 base/icons.php                            |  5 ++
 base/meta.php                             |  4 +
 tasks/guestBook/components/.htaccess      |  2 +
 tasks/guestBook/components/comment.php    | 16 ++++
 tasks/guestBook/components/error.php      |  7 ++
 tasks/guestBook/components/newComment.php | 27 +++++++
 tasks/guestBook/components/pagination.php | 19 +++++
 tasks/guestBook/index.php                 | 96 +++--------------------
 8 files changed, 92 insertions(+), 84 deletions(-)
 create mode 100644 base/icons.php
 create mode 100644 base/meta.php
 create mode 100644 tasks/guestBook/components/.htaccess
 create mode 100644 tasks/guestBook/components/comment.php
 create mode 100644 tasks/guestBook/components/error.php
 create mode 100644 tasks/guestBook/components/newComment.php
 create mode 100644 tasks/guestBook/components/pagination.php

diff --git a/base/icons.php b/base/icons.php
new file mode 100644
index 0000000..fa24ada
--- /dev/null
+++ b/base/icons.php
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+  <symbol id="exclamation-triangle-fill" fill="currentColor" viewBox="0 0 16 16">
+    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
+  </symbol>
+</svg>
\ No newline at end of file
diff --git a/base/meta.php b/base/meta.php
new file mode 100644
index 0000000..3500810
--- /dev/null
+++ b/base/meta.php
@@ -0,0 +1,4 @@
+<meta charset="utf-8" />
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
\ No newline at end of file
diff --git a/tasks/guestBook/components/.htaccess b/tasks/guestBook/components/.htaccess
new file mode 100644
index 0000000..54aa684
--- /dev/null
+++ b/tasks/guestBook/components/.htaccess
@@ -0,0 +1,2 @@
+DENY FROM ALL
+ALLOW FROM 127.0.0.1
\ No newline at end of file
diff --git a/tasks/guestBook/components/comment.php b/tasks/guestBook/components/comment.php
new file mode 100644
index 0000000..8a4c6e7
--- /dev/null
+++ b/tasks/guestBook/components/comment.php
@@ -0,0 +1,16 @@
+<div class="col">
+  <div class="card h-100">
+    <div class="card-header">
+      <h5 class="card-title"><?= $comment->title ?></h5>
+      <h6 class="card-subtitle mb-2 text-muted"><?= $comment->name ?></h6>
+    </div>
+    <div class="card-body">
+      <p class="card-text"><?= $comment->comment ?></p>
+    </div>
+    <div class="card-footer">
+      <small class="text-muted">
+        <?php echo date("d.m.Y H:i", $comment->time) ?>
+      </small>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/tasks/guestBook/components/error.php b/tasks/guestBook/components/error.php
new file mode 100644
index 0000000..30a6855
--- /dev/null
+++ b/tasks/guestBook/components/error.php
@@ -0,0 +1,7 @@
+<div class="alert alert-danger alert-dismissible fade show mt-3 mb-0">
+  <svg class="bi flex-shrink-0 me-2" width="24" height="24">
+    <use xlink:href="#exclamation-triangle-fill" />
+  </svg>
+  <?= $error ?>
+  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
+</div>
\ No newline at end of file
diff --git a/tasks/guestBook/components/newComment.php b/tasks/guestBook/components/newComment.php
new file mode 100644
index 0000000..a2c792a
--- /dev/null
+++ b/tasks/guestBook/components/newComment.php
@@ -0,0 +1,27 @@
+<form action="comment.php" method="post" class="needs-validation row m-0" novalidate>
+  <div class="col">
+    <h4 class="mb-3">Leave a Comment!</h4>
+    <div class="mb-3">
+      <input class="form-control" type="text" name="title" required placeholder="A catching title" />
+      <div class="invalid-feedback">
+        Please enter a title.
+      </div>
+    </div>
+    <div class="mb-3">
+      <input class="form-control" type="text" name="name" required placeholder="Your name" />
+      <div class="invalid-feedback">
+        Please enter a name.
+      </div>
+    </div>
+    <div class="mb-3 position-relative">
+      <textarea class="form-control" id="comment" name="comment" rows="3" maxlength="250" required placeholder="Comment here"></textarea>
+      <small class="text-muted position-absolute" id="comment-count" style="right: 20px; bottom: 0;">
+        0/250
+      </small>
+      <div class="invalid-feedback">
+        Please enter text.
+      </div>
+    </div>
+    <button class="btn btn-primary mb-3">Comment</button>
+  </div>
+</form>
\ No newline at end of file
diff --git a/tasks/guestBook/components/pagination.php b/tasks/guestBook/components/pagination.php
new file mode 100644
index 0000000..ae47de8
--- /dev/null
+++ b/tasks/guestBook/components/pagination.php
@@ -0,0 +1,19 @@
+<nav>
+  <ul class="pagination justify-content-center">
+    <li class="page-item">
+      <a class="page-link <?php if ($page === 0) echo "disabled" ?>" href="?p=<?= $page > 0 ? $page - 1 : 0 ?>">
+        <span aria-hidden="true">&laquo;</span>
+      </a>
+    </li>
+    <?php for ($i = 0; $i <= $maxPage; $i++) { ?>
+      <li class="page-item <?php if ($page === $i) echo "active" ?>">
+        <a class="page-link" href="?p=<?= $i ?>"><?= $i + 1 ?></a>
+      </li>
+    <?php } ?>
+    <li class="page-item">
+      <a class="page-link <?php if ($page === $maxPage) echo "disabled" ?>" href="?p=<?= $page < $maxPage ? $page + 1 : $maxPage ?>">
+        <span aria-hidden="true">&raquo;</span>
+      </a>
+    </li>
+  </ul>
+</nav>
\ No newline at end of file
diff --git a/tasks/guestBook/index.php b/tasks/guestBook/index.php
index ebde3f3..28f8906 100644
--- a/tasks/guestBook/index.php
+++ b/tasks/guestBook/index.php
@@ -2,20 +2,19 @@
 <html lang="de">
 
 <head>
-  <meta charset="utf-8" />
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <?php include_once "../../base/meta.php" ?>
 
   <title>Guest Book</title>
 
-  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
-
-  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
   <script src="formValidation.js"></script>
   <script src="textarea.js"></script>
 </head>
 
 <body>
   <?php
+  // HTML
+  include_once "../../base/icons.php";
+  // PHP
   include_once "../../base/errors.php";
   include_once "../../base/headers.php";
 
@@ -50,96 +49,25 @@
       </div>
     </nav>
 
-    <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
-      <symbol id="exclamation-triangle-fill" fill="currentColor" viewBox="0 0 16 16">
-        <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
-      </symbol>
-    </svg>
-
     <div class="row m-0">
       <div class="col">
-        <?php foreach ($errors as $error) { ?>
-          <div class="alert alert-danger alert-dismissible fade show mt-3 mb-0">
-            <svg class="bi flex-shrink-0 me-2" width="24" height="24">
-              <use xlink:href="#exclamation-triangle-fill" />
-            </svg>
-            <?= $error ?>
-            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
-          </div>
-        <? } ?>
+        <?php foreach ($errors as $error) {
+          include "./components/error.php";
+        } ?>
       </div>
     </div>
 
     <div class="row row-cols-1 row-cols-lg-3 g-4 m-0 mb-3">
-      <?php foreach ($data as $comment) { ?>
-        <div class="col">
-          <div class="card h-100">
-            <div class="card-header">
-              <h5 class="card-title"><?= $comment->title ?></h5>
-              <h6 class="card-subtitle mb-2 text-muted"><?= $comment->name ?></h6>
-            </div>
-            <div class="card-body">
-              <p class="card-text"><?= $comment->comment ?></p>
-            </div>
-            <div class="card-footer">
-              <small class="text-muted">
-                <?php echo date("d.m.Y H:i", $comment->time) ?>
-              </small>
-            </div>
-          </div>
-        </div>
-      <?php } ?>
+      <?php foreach ($data as $comment) {
+        include "./components/comment.php";
+      } ?>
     </div>
 
-    <nav>
-      <ul class="pagination justify-content-center">
-        <li class="page-item">
-          <a class="page-link <?php if ($page === 0) echo "disabled" ?>" href="?p=<?= $page > 0 ? $page - 1 : 0 ?>">
-            <span aria-hidden="true">&laquo;</span>
-          </a>
-        </li>
-        <?php for ($i = 0; $i <= $maxPage; $i++) { ?>
-          <li class="page-item <?php if ($page === $i) echo "active" ?>">
-            <a class="page-link" href="?p=<?= $i ?>"><?= $i + 1 ?></a>
-          </li>
-        <?php } ?>
-        <li class="page-item">
-          <a class="page-link <?php if ($page === $maxPage) echo "disabled" ?>" href="?p=<?= $page < $maxPage ? $page + 1 : $maxPage ?>">
-            <span aria-hidden="true">&raquo;</span>
-          </a>
-        </li>
-      </ul>
-    </nav>
+    <?php include "./components/pagination.php" ?>
 
     <hr />
 
-    <form action="comment.php" method="post" class="needs-validation row m-0" novalidate>
-      <div class="col">
-        <h4 class="mb-3">Leave a Comment!</h4>
-        <div class="mb-3">
-          <input class="form-control" type="text" name="title" required placeholder="A catching title" />
-          <div class="invalid-feedback">
-            Please enter a title.
-          </div>
-        </div>
-        <div class="mb-3">
-          <input class="form-control" type="text" name="name" required placeholder="Your name" />
-          <div class="invalid-feedback">
-            Please enter a name.
-          </div>
-        </div>
-        <div class="mb-3 position-relative">
-          <textarea class="form-control" id="comment" name="comment" rows="3" maxlength="250" required placeholder="Comment here"></textarea>
-          <small class="text-muted position-absolute" id="comment-count" style="right: 20px; bottom: 0;">
-            0/250
-          </small>
-          <div class="invalid-feedback">
-            Please enter text.
-          </div>
-        </div>
-        <button class="btn btn-primary mb-3">Comment</button>
-      </div>
-    </form>
+    <?php include "./components/newComment.php" ?>
   </div>
 </body>