Developed

controller/aboutUsPage.php

@@ -0,0 +1,14 @@
+<?php
+
+class AboutController extends Controller
+{
+
+  function defaultAction()
+  {
+    echo "about controller";
+    $variables['title'] = 'About Us';
+    $variables['content'] = 'We are the developers';
+    $template = new Template('default');
+    $template->view('static-page', $variables);
+  }
+}

controller/contactPage.php

@@ -1,3 +1,53 @@
 <?php
 
-require("view/contact-page.html");
+// require("src/Controller.php");
+class ContactController extends Controller
+{
+
+
+  function defaultAction()
+  {
+    $variables['inputOneLabel'] = 'Your Message';
+    $variables['inputTwoLabel'] = 'You Email';
+    $variables['buttonText'] = 'Submit';
+    $template = new Template('default');
+    $template->view('contact/contact-page', $variables);
+  }
+
+
+  function runBeforeAction()
+  {
+    if ($_SESSION['has_submitted_form'] ?? 0 == 1) {
+      $variables['title'] = 'Already Submitted';
+      $variables['content'] = 'You already submitted a message to us. We will try to reach you as soon as possible!';
+      $template = new Template('default');
+      $template->view('static-page', $variables);
+      return true;
+    }
+    return false;
+  }
+
+  function submitContactFormAction()
+  {
+    $variables['title'] = 'Thank You Contacting Us!';
+    $variables['content'] = 'We will try to reach you as soon as possible!';
+    $template = new Template('default');
+    $template->view('static-page', $variables);
+    $_SESSION['has_submitted_form'] = 1;
+  }
+
+
+  /**
+   * @method showPageAction includes views on condition
+   */
+  // function showPageAction($action)
+  // {
+  //   if ($action == 'show') {
+  //     require("view/contact-page.html");
+  //   } else if ($action == 'submit') {
+  //     require("view/contact-us-thank-you.html");
+  //   } else {
+  //     echo $action;
+  //   }
+  // }
+}

controller/homePage.php

@@ -1,3 +1,13 @@
 <?php
 
-require_once("view/home-page.html");
+// require("src/Controller.php");
+class HomeController extends Controller
+{
+  function defaultAction()
+  {
+    $variables['title'] = 'Home Page';
+    $variables['content'] = 'You are on the home page. Welcome!';
+    $template = new Template('default');
+    $template->view('static-page', $variables);
+  }
+}

index.php

@@ -1,10 +1,39 @@
 <?php
 
-$section = $_GET['section'];
-if ($section == 'home-page') {
-  require_once("./controller/homePage.php");
-} else if ($section == 'contact-page') {
+session_start();
+
+include "src/template.php";
+include "src/controller.php";
+
+$section = $_GET['section'] ?? $_POST['section'] ?? 'home-page';
+$action = $_GET['action'] ?? $_POST['action'] ?? 'default';
+
+/**
+ * @param $section = 'contact-page', execute the else-if block
+ */
+if ($section == 'contact-page') {
   require_once("./controller/contactPage.php");
-} else {
+  $contactController = new ContactController();
+  $contactController->runAction($action);
+}
+
+/**
+ * @param $section = 'about-us', execute the else-if block
+ */
+
+else if ($section == 'about-us') {
+  require_once("./controller/aboutUsPage.php");
+  $aboutCrontroller = new AboutController();
+  $aboutCrontroller->runAction($action);
+}
+
+/**
+ * Default condition block, include home-page
+ *
+ * @param $section = 'home-page', execute the else-if block
+ */
+else {
   require_once("./controller/homePage.php");
+  $homeController = new HomeController();
+  $homeController->runAction($action);
 }

src/controller.php

@@ -0,0 +1,24 @@
+<?php
+
+class Controller
+{
+  function runAction($actionName)
+  {
+
+    if (method_exists($this, 'runBeforeAction')) {
+      $result = $this->runBeforeAction();
+      if ($result) {
+        return;
+      }
+    }
+
+    $actionName .= 'Action';
+
+    if (method_exists($this, $actionName)) {
+      $this->$actionName();
+    } else {
+      // var_dump($actionName);
+      require_once("view/status-pages/404.html");
+    }
+  }
+}

src/template.php

@@ -0,0 +1,17 @@
+<?php
+
+class Template
+{
+  private $layout;
+
+  function __construct($layout)
+  {
+    $this->layout = $layout;
+  }
+
+  function view($template, $variables)
+  {
+    extract($variables);
+    include "view/layout/" . $this->layout . ".html";
+  }
+}

view/contact/contact-page.html

@@ -0,0 +1,14 @@
+<div class="container" style="margin-top: 100px;">
+  <form>
+    <input type="hidden" name="section" value="contact-page">
+    <input type="hidden" name="action" value="submitContactForm">
+    <div class="mb-3">
+      <label for="message" class="form-label"><?php echo $inputOneLabel ?></label>
+      <input type="text" class="form-control" id="message">
+    </div>
+    <div class="mb-3">
+      <label for="email" class="form-label"><?php echo $inputTwoLabel ?></label>
+      <input type="email" class="form-control" id="email" aria-describedby="emailHelp">
+    </div>
+    <button type="submit" class="btn btn-primary"><?php echo $buttonText ?></button>
+  </form>

view/layout/default.html

@@ -0,0 +1,73 @@
+<!doctype html>
+<html lang="en" class="h-100">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="description" content="">
+  <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
+  <meta name="generator" content="Hugo 0.84.0">
+  <title>Sticky Footer Navbar Template · Bootstrap v5.0</title>
+
+  <link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/sticky-footer-navbar/">
+
+
+
+  <!-- Bootstrap core CSS -->
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+
+  <!-- Favicons -->
+  <link rel="apple-touch-icon" href="https://getbootstrap.com/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+  <link rel="icon" href="https://getbootstrap.com/docs/5.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+  <link rel="icon" href="https://getbootstrap.com/docs/5.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+  <link rel="manifest" href="https://getbootstrap.com/docs/5.0/assets/img/favicons/manifest.json">
+  <link rel="mask-icon" href="https://getbootstrap.com/docs/5.0/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3">
+  <link rel="icon" href="https://getbootstrap.com/docs/5.0/assets/img/favicons/favicon.ico">
+  <meta name="theme-color" content="#7952b3">
+
+
+  <style>
+    .bd-placeholder-img {
+      font-size: 1.125rem;
+      text-anchor: middle;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      user-select: none;
+    }
+
+    @media (min-width: 768px) {
+      .bd-placeholder-img-lg {
+        font-size: 3.5rem;
+      }
+    }
+  </style>
+
+
+  <!-- Custom styles for this template -->
+  <link href="sticky-footer-navbar.css" rel="stylesheet">
+</head>
+
+<body class="d-flex flex-column h-100">
+
+  <?php include "view/layout/navigation.html"; ?>
+
+  <!-- Begin page content -->
+  <main class="flex-shrink-0">
+
+    <?php
+      include "view/". $template . ".html";
+      ?>
+
+  </main>
+
+  <?php include "view/layout/footer.html"; ?>
+
+
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
+
+
+</body>
+
+</html>

view/layout/footer.html

@@ -0,0 +1,5 @@
+<footer class="footer mt-auto py-3 bg-light">
+  <div class="container">
+    <span class="text-muted">Place sticky footer content here.</span>
+  </div>
+</footer>

view/layout/navigation.html

@@ -0,0 +1,31 @@
+<header>
+  <!-- Fixed navbar -->
+  <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
+    <div class="container-fluid">
+      <a class="navbar-brand" href="index.php">CMS</a>
+      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarCollapse">
+        <ul class="navbar-nav me-auto mb-2 mb-md-0">
+          <li class="nav-item">
+            <a class="nav-link active" aria-current="page" href="index.php">Home</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="index.php?section=contact-page">Contact</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="index.php?section=about-us">About-us</a>
+          </li>
+          <!-- <li class="nav-item">
+            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
+          </li> -->
+        </ul>
+        <form class="d-flex">
+          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
+          <button class="btn btn-outline-success" type="submit">Search</button>
+        </form>
+      </div>
+    </div>
+  </nav>
+</header>

view/static-page.html

@@ -0,0 +1,4 @@
+<div class="container" style="margin-top: 100px;">
+  <h1 class="mt-5"><?php echo $title ?></h1>
+  <p class="lead"><?php echo $content ?></p>
+</div>

view/home-page.html → view/status-pages/404.html

@@ -81,8 +81,7 @@
   <!-- Begin page content -->
   <main class="flex-shrink-0">
     <div class="container" style="margin-top: 100px;">
-      <h1 class="mt-5">Content Management System</h1>
-      <p class="lead">Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code class="small">padding-top: 60px;</code> on the <code class="small">main &gt; .container</code>.</p>
+      <h1 class="mt-5">404! Page not found.</h1>
     </div>
   </main>