Step 6: Create a layout template

artingo · Nov 13, 2023 · 614c40a · 614c40a
1 parent 95c5223
commit 614c40a
Show file tree

Hide file tree

Showing 13 changed files with 271 additions and 210 deletions.
diff --git a/ReadMe.md b/ReadMe.md
@@ -14,4 +14,11 @@ Follow these steps to continuously build a server-side Blog web app with PhP.
        For example: [AdminLTE starter page](https://adminlte.io/themes/v3/starter.html)
    3. Open the `controllers\posts.php` page in your browser and check the result.
    4. Correct all the CSS, JS and image references using CDN links (for starters).
-   5. Remove all unnecessary UI elements and place your own labels.
+   5. Remove all unnecessary UI elements and place your own labels.
+6. Create a `layout template`. To do so, follow these steps:
+   1. Create a `views\partials` sub-directory. 
+   2. Cut the code of HTML `<head>`, top navigation, sidebar and footer and paste it into their corresponding PhP files.
+   3. `require` all partials in the `loadView()` function.
+   4. Create a `public` folder and `css`, `img`, `js` and `webfonts` sub-folders. Download the corresponding resources to these directories and modify the links to use the local copies.
+   5. Tell the PhP server to use the `public` directory with these parameters:<br/>
+   `php -S localhost:8080 -t public`
diff --git a/functions.php b/functions.php
@@ -5,7 +5,7 @@
  * @param $key - keyword identifying the view
  * @return void
  */
-function loadData($key)
+function loadData($key) : array
 {
     $data = [];
     $filename = "../data/" . $key . ".json";
@@ -14,9 +14,8 @@ function loadData($key)
         $content = file_get_contents($filename);
         $data = json_decode($content);
     }
-
-    extract($data);
     $GLOBALS[$key] = $data;
+    return $data;
 }
 
 /**
@@ -26,7 +25,12 @@ function loadData($key)
  */
 function loadView($view)
 {
-    loadData($view);
-    require("../views/" . $view . ".php");
+    $data = loadData($view);
+    extract($data);
 
+    require("views/partials/html-head.php");
+    require("views/partials/top-navbar.php");
+    require("views/partials/sidebar.php");
+    require("views/" . $view . ".php");
+    require("views/partials/footer.php");
 }
diff --git a/public/css/adminlte.min.css b/public/css/adminlte.min.css
diff --git a/public/css/fontawesome.all.min.css b/public/css/fontawesome.all.min.css
diff --git a/public/css/fonts.css b/public/css/fonts.css
@@ -0,0 +1,35 @@
+/* latin */
+@font-face {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-weight: 300;
+    font-display: fallback;
+    src: url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwlxdu.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin */
+@font-face {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-weight: 400;
+    font-display: fallback;
+    src: url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}/* latin */
+@font-face {
+    font-family: 'Source Sans Pro';
+    font-style: italic;
+    font-weight: 400;
+    font-display: fallback;
+    src: url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7nsDI.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin */
+@font-face {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-weight: 700;
+    font-display: fallback;
+    src: url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdu.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
diff --git a/public/img/favicon.ico b/public/img/favicon.ico
diff --git a/public/index.php b/public/index.php
@@ -0,0 +1 @@
+<?php require("../controllers/posts.php"); ?>
diff --git a/public/webfonts/fa-solid-900.woff2 b/public/webfonts/fa-solid-900.woff2
diff --git a/views/partials/footer.php b/views/partials/footer.php
@@ -0,0 +1,10 @@
+<footer class="main-footer">
+    <strong>Write your footer message here...
+</footer>
+</div>
+
+<script src="https://adminlte.io/themes/v3/plugins/jquery/jquery.min.js"></script>
+<script src="https://adminlte.io/themes/v3/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+<script src="https://adminlte.io/themes/v3/dist/js/adminlte.min.js?v=3.2.0"></script>
+</body>
+</html>
diff --git a/views/partials/html-head.php b/views/partials/html-head.php
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Travel Blog</title>
+
+    <link rel="icon" href="/img/favicon.ico">
+
+    <link rel="stylesheet" href="/css/fonts.css">
+    <link rel="stylesheet" href="/css/fontawesome.all.min.css">
+    <link rel="stylesheet" href="/css/adminlte.min.css">
+</head>
+<body class="hold-transition sidebar-mini">
+<div class="wrapper">
+
diff --git a/views/partials/sidebar.php b/views/partials/sidebar.php
@@ -0,0 +1,33 @@
+<aside class="main-sidebar sidebar-dark-primary elevation-4">
+    <a href="#" class="brand-link">
+        <i class="fa-solid fa-suitcase"></i>
+        <span class="brand-text">Travel Blog</span>
+    </a>
+    <div class="sidebar">
+        <nav class="mt-2">
+            <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu"
+                data-accordion="false">
+
+                <li class="nav-item">
+                    <a href="#" class="nav-link active">
+                        <i class="nav-icon fas fa-blog"></i>
+                        <p>Posts</p>
+                    </a>
+                </li>
+                <li class="nav-item">
+                    <a href="#" class="nav-link">
+                        <i class="nav-icon fas fa-shapes"></i>
+                        <p>Categories</p>
+                    </a>
+                </li>
+                <li class="nav-item">
+                    <a href="#" class="nav-link">
+                        <i class="nav-icon fas fa-users"></i>
+                        <p>Users</p>
+                    </a>
+                </li>
+            </ul>
+        </nav>
+
+    </div>
+</aside>
diff --git a/views/partials/top-navbar.php b/views/partials/top-navbar.php
@@ -0,0 +1,56 @@
+<nav class="main-header navbar navbar-expand navbar-light">
+    <ul class="navbar-nav">
+        <li class="nav-item">
+            <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
+        </li>
+        <li class="nav-item d-none d-sm-inline-block">
+            <a href="#" class="nav-link">Posts</a>
+        </li>
+        <li class="nav-item d-none d-sm-inline-block  dropdown">
+            <a href="#" class="nav-link dropdown-toggle" id="navbarDropdown2" role="button"
+               data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                Categories
+            </a>
+            <div class="dropdown-menu" aria-labelledby="navbarDropdown2">
+                <?php foreach ($GLOBALS['categories'] as $category) : ?>
+                    <a class="dropdown-item" href="#"><?= $category->name ?></a>
+                <?php endforeach; ?>
+
+            </div>
+        </li>
+    </ul>
+
+    <ul class="navbar-nav ml-auto">
+        <li class="nav-item">
+            <a class="nav-link" data-widget="navbar-search" href="#" role="button">
+                <i class="nav-icon fas fa-search"></i>
+            </a>
+            <div class="navbar-search-block">
+                <form class="form-inline">
+                    <div class="input-group input-group-sm">
+                        <input class="form-control form-control-navbar" type="search" placeholder="Search"
+                               aria-label="Search">
+                        <div class="input-group-append">
+                            <button class="btn btn-navbar" type="submit">
+                                <i class="fas fa-search"></i>
+                            </button>
+                            <button class="btn btn-navbar" type="button" data-widget="navbar-search">
+                                <i class="fas fa-times"></i>
+                            </button>
+                        </div>
+                    </div>
+                </form>
+            </div>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link" data-toggle="dropdown" href="#">
+                <i class="fas fa-users"></i>
+            </a>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link" data-widget="fullscreen" href="#" role="button">
+                <i class="fas fa-expand-arrows-alt"></i>
+            </a>
+        </li>
+    </ul>
+</nav>