From c482e7b076c9dfdd237e7edfcc1e7e3a7932c6b8 Mon Sep 17 00:00:00 2001
From: Silas Meister <silas.meister@stud.h-da.de>
Date: Mon, 2 Oct 2023 11:02:08 +0200
Subject: [PATCH] Show article on separate page
---
php/Index.php | 2 +-
php/NewsArticle.html | 26 ++++++++++++++++++++++++++
php/NewsArticle.php | 26 ++++++++++++++++++++++++--
styles.css | 39 +++++++++++++++++++++++++++++++++++++--
4 files changed, 88 insertions(+), 5 deletions(-)
create mode 100644 php/NewsArticle.html
diff --git a/php/Index.php b/php/Index.php
index 4ae99fa..2e2fc75 100644
--- a/php/Index.php
+++ b/php/Index.php
@@ -40,7 +40,7 @@ class Index extends Page {
$news[] = new News($title, $imgurl, $content);
}
- $resultSet->close();
+ $resultSet->free();
return $news;
}
diff --git a/php/NewsArticle.html b/php/NewsArticle.html
new file mode 100644
index 0000000..39ff816
--- /dev/null
+++ b/php/NewsArticle.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+ <title>News Article</title>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" style="text/css" href="../styles.css" />
+</head>
+<body>
+ <header class="news-article-header">
+ <h1>Europe Wants Ideas for Cave-Spelumking Moon Robots</h1>
+ </header>
+
+ <main class="news-article-main">
+ <div class="news-article-image-container">
+ <img src="../img/astronaut.jpg" />
+ </div>
+
+ <p class="news-article-content">dfg sfgggggggfsdfsdfsdfsdfsdfth.</p>
+ </main>
+
+ <footer class="news-article-footer">
+ <h4><a href="Index.php">Back to NASA page</a></h4>
+ </footer>
+</body>
+</html>
\ No newline at end of file
diff --git a/php/NewsArticle.php b/php/NewsArticle.php
index fba88a4..aba8725 100644
--- a/php/NewsArticle.php
+++ b/php/NewsArticle.php
@@ -56,11 +56,33 @@ class NewsArticle extends Page
$data = $this->getViewData();
$this->generatePageHeader('News Article');
- var_dump($data);
+ $title = "";
+ $imgurl = "";
+ $content = "";
+
+ if (count($data) !== 0) {
+ $title = $data[self::TITLE];
+ $imgurl = $data[self::IMGURL];
+ $content = $data[self::CONTENT];
+ }
echo <<<EOT
<body>
- <header></header>
+ <header class="news-article-header">
+ <h1>$title</h1>
+ </header>
+
+ <main class="news-article-main">
+ <div class="news-article-image-container">
+ <img src="$imgurl" />
+ </div>
+
+ <p class="news-article-content">$content</p>
+ </main>
+
+ <footer class="news-article-footer">
+ <h4><a href="Index.php">Back to NASA page</a></h4>
+ </footer>
</body>
EOT;
diff --git a/styles.css b/styles.css
index bfcd7b1..7920a80 100644
--- a/styles.css
+++ b/styles.css
@@ -140,7 +140,6 @@ a {
display: block;
word-wrap: break-word;
white-space: pre-wrap;
- background-color: blue;
}
.admin-button a {
@@ -451,7 +450,7 @@ main {
height: 100%;
}
-/* admin.html Page */
+/* Admin.php */
.admin-header, .login-header {
text-align: center;
@@ -529,6 +528,42 @@ main {
border-radius: 0.1rem;
}
+/* NewsArticle.php */
+
+.news-article-header {
+ font-size: 1rem;
+ text-align: center;
+}
+
+.news-article-main {
+ margin: 0;
+ padding: 0;
+ width: 100%;
+}
+
+.news-article-main > .news-article-image-container {
+ display: block;
+ width: 100%;
+ margin: 0 auto;
+ text-align: center;
+}
+
+.news-article-image-container > img {
+ width: 20rem;
+}
+
+.news-article-main > .news-article-content {
+ display: block;
+ font-size: 1.1rem;
+ padding: 0.5rem;
+ margin: 0;
+}
+
+.news-article-footer {
+ font-size: 0.9rem;
+ text-align: center;
+ width: 100%;
+}
--
GitLab