From 7c741c17fb6ab6d33e9b51df19b85889c7ab1c77 Mon Sep 17 00:00:00 2001
From: Silas Meister <silas.meister@stud.h-da.de>
Date: Mon, 18 Sep 2023 19:11:15 +0200
Subject: [PATCH] WIP change news file
---
admin.html | 20 ++++
index.html | 4 +-
index.php | 12 ++-
php/Admin.php | 83 +++++++++++++++
php/Index.php | 261 ++++++++++++++++++++++++++++++++++++++++++++++
php/Page.php | 68 ++++++++++++
php/constants.php | 4 +
styles.css | 55 ++++++++--
8 files changed, 493 insertions(+), 14 deletions(-)
create mode 100644 php/Admin.php
create mode 100644 php/Index.php
create mode 100644 php/Page.php
create mode 100644 php/constants.php
diff --git a/admin.html b/admin.html
index e69de29..8813c11 100644
--- a/admin.html
+++ b/admin.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="de">
+ <head>
+ <title>NASA - Admin</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="admin-header"><h1>Admin-Page</h1></header>
+
+ <form class="admin-form" action="admin.html" method="post" accept-charset="UTF-8">
+ <fieldset>
+ <legend>Select a News file</legend>
+ <input id="news-file" name="news-file" type="file" accept=".json" required />
+ <input type="submit" value="Apply" />
+ </fieldset>
+ </form>
+ </body>
+</html>
\ No newline at end of file
diff --git a/index.html b/index.html
index 06e7c29..1a37ffb 100644
--- a/index.html
+++ b/index.html
@@ -7,8 +7,8 @@
<script src="functions.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
- <body onload="">
- <header>
+ <body class="nasa-body">
+ <header class="nasa-header">
<img class="nasa-img" src="img/nasa.png" alt="" />
<nav>
diff --git a/index.php b/index.php
index eda76f0..688df69 100644
--- a/index.php
+++ b/index.php
@@ -2,6 +2,12 @@
ini_set("display_errors", 1);
ini_set("display_startup_errors", 1);
+ $file = "data/news_01.json";
+
+ if (!file_exists($file)) {
+ die("File not found");
+ }
+
$fileContents = file_get_contents('data/news_01.json');
if ($fileContents === NULL)
@@ -19,8 +25,8 @@
<script src="functions.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
- <body onload="">
- <header>
+ <body class="nasa-body">
+ <header class="nasa-header">
<img class="nasa-img" src="img/nasa.png" alt="" />
<nav>
@@ -39,7 +45,7 @@
</form>
</li>
<li><img src="img/share_icon.png" alt="" /></li>
- <li class="admin-button"><a href="admin.html">Admin</a></li>
+ <li class="admin-button"><a href="php/admin.php">Admin</a></li>
</ul>
<ul class="center-nav">
diff --git a/php/Admin.php b/php/Admin.php
new file mode 100644
index 0000000..d6f5483
--- /dev/null
+++ b/php/Admin.php
@@ -0,0 +1,83 @@
+<?php declare(strict_types=1);
+
+require_once 'Page.php';
+require_once 'constants.php';
+
+class Admin extends Page
+{
+ private const FILE_NAME = "fileName";
+
+ protected function __construct()
+ {
+ parent::__construct();
+
+ session_start();
+
+ /*if (isset($_SESSION['EXPIRES']) && (time() - $_SESSION['EXPIRES'] > 3600)) {
+ session_unset();
+ session_destroy();
+ header("Location: login.php");
+ } else {
+ header("Location: login.php");
+ }*/
+ }
+
+ public function __destruct()
+ {
+ parent::__destruct();
+ }
+
+ protected function getViewData():array
+ {
+ return array();
+ }
+
+ protected function generateView():void
+ {
+ $data = $this->getViewData();
+ $this->generatePageHeader('NASA Admin');
+
+ $fileName = self::FILE_NAME;
+
+ echo <<<EOT
+<header class="admin-header"><h1>Admin-Page</h1></header>
+
+<form class="admin-form" action="Admin.php" method="post" accept-charset="UTF-8">
+ <fieldset>
+ <legend>Select a News file</legend>
+ <input id="$fileName" name="$fileName" type="file" accept=".json" required />
+ <input type="submit" value="Apply" />
+ </fieldset>
+</form>
+EOT;
+
+ $this->generatePageFooter();
+ }
+
+ protected function processReceivedData():void
+ {
+ parent::processReceivedData();
+
+ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+ if (isset($_POST[self::FILE_NAME])) {
+ $_SESSION[NEWS_FILE] = $_POST[self::FILE_NAME];
+ header("Location: ../index.php");
+ die();
+ }
+ }
+ }
+
+ public static function main():void
+ {
+ try {
+ $page = new Admin();
+ $page->processReceivedData();
+ $page->generateView();
+ } catch (Exception $e) {
+ header("Content-type: text/html; charset=UTF-8");
+ echo $e->getMessage();
+ }
+ }
+}
+
+Admin::main();
\ No newline at end of file
diff --git a/php/Index.php b/php/Index.php
new file mode 100644
index 0000000..3cb4110
--- /dev/null
+++ b/php/Index.php
@@ -0,0 +1,261 @@
+<?php declare(strict_types=1);
+
+require_once 'Page.php';
+require_once 'constants.php';
+
+class Index extends Page {
+
+ protected function __construct()
+ {
+ parent::__construct();
+
+ session_start();
+ }
+
+ public function __destruct()
+ {
+ parent::__destruct();
+ }
+
+ protected function getViewData():array
+ {
+ return array();
+ }
+
+ protected function generateView():void
+ {
+ $data = $this->getViewData();
+ $this->generatePageHeader('NASA');
+
+ $news = $this->fetchNews();
+
+ echo <<<EOT
+<header class="nasa-header">
+<img class="nasa-img" src="img/nasa.png" alt="" />
+
+<nav>
+ <ul class="top-nav">
+ <li><a href="#">Missions</a></li>
+ <li><a href="#">Galleries</a></li>
+ <li><a href="#">NASA TV</a></li>
+ <li><a href="#">Follow NASA</a></li>
+ <li><a href="#">Downloads</a></li>
+ <li><a href="#">About</a></li>
+ <li><a href="#">NASA Audiences</a></li>
+ <li>
+ <form class="search-form" method="post" accept-charset="UTF-8">
+ <input type="search" placeholder="Search" />
+ <input type="button" value="" />
+ </form>
+ </li>
+ <li><img src="img/share_icon.png" alt="" /></li>
+ <li class="admin-button"><a href="php/admin.php">Admin</a></li>
+ </ul>
+
+ <ul class="center-nav">
+ <li><a href="#">International Space Station</a></li>
+ <li><a href="#">Journey to Mars</a></li>
+ <li><a href="#">Earth</a></li>
+ <li><a href="#">Technology</a></li>
+ <li><a href="#">Aeronautics</a></li>
+ <li><a href="#">Solar System and Beyond</a></li>
+ <li><a href="#">Education</a></li>
+ <li><a href="#">History</a></li>
+ <li><a href="#">Benefits to You</a></li>
+ </ul>
+</nav>
+</header>
+
+<main>
+ <article class="content-large">
+ <div>
+ <div class="article-content-container">
+ <a class="article-link" href="#"></a>
+
+ <img id="slide-image" class="article-image" src="img/nasa_news_1.jpg" alt="" />
+
+ <div class="article-content">
+ <div id="slide-container" class="news-headline">
+ <h3>Space Station</h3>
+ <h2>Expedition 48 Crew Lands Safely on Earth</h2>
+ </div>
+
+ <div class="camera-triangle"></div>
+ <img class="camera-img" src="img/camera.png" alt="" />
+ </div>
+ </div>
+ </div>
+ </article>
+ <article class="content-small">
+ <div>
+ <div class="article-content-container">
+ <a class="article-link" href="#"></a>
+
+ <div class="article-content nasa-events-container">
+ <div class="nasa-events-top">
+EOT;
+ $news = $newsList[0];
+
+ $title = htmlspecialchars($news["title"]);
+ $imageurl = htmlspecialchars($news["imgurl"]);
+ $content = htmlspecialchars($news["content"]);
+
+ echo <<<EOT
+ <p class="nasa-events-title">$title</p>
+
+ <div class="line"></div>
+
+ <a class="nasa-event" href="#">$content</a>
+ </div>
+
+ <div class="nasa-events-bottom">
+ <div class="line"></div>
+
+ <div class="nasa-events-bottom-horizontal">
+ <a href="#">Calendar</a>
+ <a href="#">Launches and Landings</a>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </article>
+
+ <article class="content-small">
+ <div>
+ <div class="article-content-container">
+EOT;
+ $news = $newsList[1];
+
+ $title = htmlspecialchars($news["title"]);
+ $imageurl = htmlspecialchars($news["imgurl"]);
+ $content = htmlspecialchars($news["content"]);
+
+ echo <<<EOT
+
+ <a class="article-link" href="#"></a>
+
+ <img class="article-image" src="$imageurl" alt="" />
+
+ <div class="article-content overlay">
+ <h4 class="overlay-title">$title</h4>
+ <h4 class="overlay-description">$content</h4>
+ </div>
+ </div>
+ </div>
+ </article>
+ <article class="content-medium">
+ <div>
+ <div class="article-content-container">
+EOT;
+ $news = $newsList[0];
+
+ $title = htmlspecialchars($news["title"]);
+ $imageurl = htmlspecialchars($news["imgurl"]);
+ $content = htmlspecialchars($news["content"]);
+
+ echo <<<EOT
+
+ <a class="article-link" href="#"></a>
+
+ <img class="article-half-image" src="$imageurl" alt="" />
+
+ <div class="article-triangle"></div>
+
+ <div class="article-content-second-half nasa-launch">
+ <h4>$title</h4>
+
+ <p>$content</p>
+
+ <div class="nasa-launch-links">
+ <a href="#">Mission Site</a>
+ <a href="#">Briefing Schedule</a>
+ <a href="#">Launch Updates</a>
+ <a href="#">Video to Bennu and Back</a>
+ </div>
+ </div>
+ </div>
+ </div>
+ </article>
+ <article class="content-small">
+ <div>
+ <div class="article-content-container">
+ <a class="article-link" href="#"></a>
+
+ <div class="article-content">
+ <iframe src="https://www.youtube.com/embed/XY6idnRlPsU?si=HnFL8-if6-zB6tU2" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+ </div>
+ </div>
+ </div>
+ </article>
+ <article class="content-medium">
+ <div>
+ <div class="article-content-container">
+ <a class="article-link" href="#"></a>
+
+ <img class="article-image" src="img/ocean_worlds.jpg" alt="" />
+ </div>
+ </div>
+ </article>
+ <article class="content-small">
+ <div>
+ <div class="article-content-container">
+ <a class="article-link" href="#"></a>
+
+ <img class="article-image article-image-full" src="img/tweet.png" alt="" />
+ </div>
+ </div>
+ </article>
+</main>
+EOT;
+
+ $this->generatePageFooter();
+ }
+
+ protected function processReceivedData():void
+ {
+ parent::processReceivedData();
+
+ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+ if (isset($_POST[self::FILE_NAME])) {
+ $_SESSION[NEWS_FILE] = $_POST[self::FILE_NAME];
+ header("Location: ../index.php");
+ die();
+ }
+ }
+ }
+
+ private function fetchNews(): array {
+ $file = DEFAULT_NEWS_FILE;
+
+ if (isset($_SESSION[NEWS_FILE]))
+ $file = $_SESSION[NEWS_FILE]
+
+ if (!file_exists($file)) {
+ die("File not found");
+ }
+
+ $fileContents = file_get_contents('data/news_01.json');
+
+ if ($fileContents === NULL)
+ return;
+
+ $json = json_decode($fileContents, true);
+
+ return $json["news"];
+ }
+
+ public static function main():void
+ {
+ try {
+ $page = new Index();
+ $page->processReceivedData();
+ $page->generateView();
+ } catch (Exception $e) {
+ header("Content-type: text/html; charset=UTF-8");
+ echo $e->getMessage();
+ }
+ }
+}
+
+Index::main();
\ No newline at end of file
diff --git a/php/Page.php b/php/Page.php
new file mode 100644
index 0000000..d2f31a5
--- /dev/null
+++ b/php/Page.php
@@ -0,0 +1,68 @@
+<?php declare(strict_types=1);
+
+abstract class Page {
+
+ protected mysqli $database;
+
+ protected function __construct() {
+ return;
+
+ error_reporting(E_ALL);
+
+ $host = "localhost";
+
+ /********************************************/
+ // This code switches from the the local installation (XAMPP) to the docker installation
+ if (gethostbyname('mariadb') != "mariadb") { // mariadb is known?
+ $host = "mariadb";
+ }
+ /********************************************/
+
+ $this->database = new mysqli("localhost","my_user","my_password","my_db");
+
+ // Check connection
+ if ($this->database->connect_errno) {
+ echo "Failed to connect to MySQL: " . $mysqli -> connect_error;
+ exit();
+ }
+
+ // set charset to UTF8!!
+ if (!$this->database->set_charset("utf8")) {
+ throw new Exception($this->_database->error);
+ }
+ }
+
+ protected function __destruct() {
+
+ }
+
+ protected function generatePageHeader(string $title = ""):void
+ {
+ $title = htmlspecialchars($title);
+ header("Content-type: text/html; charset=UTF-8");
+
+ echo <<<EOT
+<!DOCTYPE html>
+<html lang="de">
+<head>
+ <title>$title</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>\n
+EOT;
+ }
+
+ protected function generatePageFooter():void
+ {
+ echo <<<EOT
+</body>
+</html>
+EOT;
+ }
+
+ protected function processReceivedData():void {
+
+ }
+}
\ No newline at end of file
diff --git a/php/constants.php b/php/constants.php
new file mode 100644
index 0000000..6cf2f45
--- /dev/null
+++ b/php/constants.php
@@ -0,0 +1,4 @@
+<?php
+ define("NEWS_FILE", "news_file");
+ define("DEFAULT_NEWS_FILE", "data/news_01.json");
+?>
\ No newline at end of file
diff --git a/styles.css b/styles.css
index 46a075e..b3f742d 100644
--- a/styles.css
+++ b/styles.css
@@ -1,7 +1,6 @@
* {
font-family: Verdana, Geneva, Tahoma, sans-serif;
box-sizing: border-box;
- color: #eeeeee;
}
body, html {
@@ -10,12 +9,20 @@ body, html {
width: 100%;
}
-body {
+a {
+ text-decoration: none;
+}
+
+.nasa-body {
position: relative;
background-color: #050914;
}
-header {
+.nasa-body * {
+ color: #eeeeee;
+}
+
+.nasa-header {
position: sticky;
top: 0;
z-index: 1;
@@ -25,17 +32,13 @@ header {
background-size: auto 100%;
}
-a {
- text-decoration: none;
-}
-
-nav ul {
+.top-nav ul, .center-nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
-nav ul li a {
+.top-nav ul li a, .center-nav ul li a {
text-decoration: none;
}
@@ -414,6 +417,40 @@ main {
height: 100%;
}
+/* admin.html Page */
+
+.admin-header {
+ text-align: center;
+}
+
+.admin-header > h1 {
+ font-size: 1.5rem;
+}
+
+.admin-form {
+ text-align: center;
+}
+
+.admin-form > fieldset {
+ font-size: 1rem;
+ display: inline;
+}
+
+.admin-form input[type="submit"] {
+ background-color: lightgray;
+ cursor: pointer;
+ font-size: 0.8rem;
+ padding: 0.5rem;
+ border-radius: 0.1rem;
+}
+
+.admin-form input[type=file]::file-selector-button {
+ padding: 0.5em;
+ font-size: 0.8rem;
+ border-radius: 0.1em;
+ background-color: lightgray;
+}
+
/*.content-small div div, .content-medium div div, .content-large div div {
background-color: blue;
--
GitLab