Build a CMS Step 4a

Creating building blocks for pages

Currently, each page shows only content dedicated to that page. In this step we will allow pages to display multiple pieces of content.
Let's save our current content in a new folder called 'blocks' - these are building blocks for a page.
Instead of dedicated content, our page files will now show a list of blocks, separated by commas. We can use the PHP array functions to display them in the order they appear in the page file.
For example, the 'home' page:
data folder

CLICK HERE FOR DEMO
 admin.php ▾
<?php
session_start();

$pageid = "";
$loggedin = false;

if (isset ($_SESSION['admin'])) {
    if ($_SESSION ['admin'] === true) {
        $loggedin = true;
    }
}

include ('inc/header.php');
if ($loggedin === true){
    $adminpage = 'control-panel';
    if (isset ($_GET['adminpage'])) {
        $adminpage = filter_input(INPUT_GET, "adminpage", FILTER_SANITIZE_STRING) ;  
    }
   include ("admin/" . $adminpage . ".php");   
}
else {
    echo "You must be logged in to access this page: <a href = 'index.php?page=loginp'>LOGIN</a>";
}


echo "<a class = 'adminbutton' href = 'index.php?page=logout'>Log Out</a>"; 
include ("inc/footer.php");

?>
       
 index.php ▾
<?php
session_start();
$loggedin = false;
if (isset ($_SESSION['admin'])) {
    if ($_SESSION['admin'] === true) {
        $loggedin = true;
    }
}
include ('inc/header.php');
  
//The default page is 'home'     
$pageid = 'home';

//Use the $_GET statement to check the query string 
if (isset ($_GET['page'])) {
    $pageid = filter_input(INPUT_GET, "page", FILTER_SANITIZE_STRING) ;  
}
if (file_exists ('data/pages/' . $pageid . '.txt')) {
    $pageblockstring = file_get_contents ('data/pages/' . $pageid . ".txt");   
    $pageblockarray = explode (',', $pageblockstring);
    foreach ($pageblockarray as $item) {
        $item = trim ($item);
     
        $pos1 = strpos ($item, ":");
        $blockid = substr ($item, $pos1 + 1); 
        if (file_exists ('data/blocks/' . $blockid . '.txt')){
            $content = file_get_contents ('data/blocks/' . $blockid . '.txt');
            echo $content;
            if ($loggedin === true){
                echo "<a class = 'edit-block' href = 'admin.php?adminpage=update-block&block=" . $blockid . "' >Edit Block</a>";
            }
        }
        else if (file_exists ('data/blocks/' . $blockid . '.php')) {
            include ('data/blocks/' . $blockid . '.php');
        }
    }
}
 
if ($loggedin === true){
    if ($pageid !== 'login' && $pageid !== 'logout') {
        echo "<a class = 'adminbutton' href = 'admin.php?adminpage=update-page&page=" . $pageid . "' >Edit Page</a>";
    }
    echo "<a class = 'adminbutton' href = 'admin.php?page=control-panel'</a>Control Panel</a>";  
    echo "<a class = 'adminbutton' href = 'index.php?page=logout'>Log Out</a>";
}
else if ($pageid !== 'login'){
    echo "<a class = 'adminbutton' href = 'index.php?page=login'>Login</a>";
}
include ("inc/footer.php");

?>
       
Blocks about.txt ▾
<h2>About the Nip Shoppe</h2>
<img src = 'data/images/tom-and-martin.png' alt = 'Tom and Martin, Nip Shoppe founders' /> 

<p>The Nip Shopped was founded in 1979 by two college cats, Tom Twitchitail and Martin Pawclaw, during their sophomore year at Felinia College. They met in a marketing class where they discovered that they both shared an interest in the pyschological and medical benefits of catnip.</p>

<p>Athough at the time, catnip was barely legal, they started a small business to procure nip for their fellow fraternity brothers. To their surprise, their customer base expanded rapidly, partly due to their thorough knowledge of catnip quality and variety.</p> 


       
 contact.txt ▾
<h2>Contact the Nip Shoppe</h2>
<div class = 'content-column'>
    <h3>Location:</h3> 
    <p> 222 Scratching Post Road<br>
    Felinia, Ohio 45222</p>
    <h3>Email: </h3>
    thenipshippe@furmail.com
    <h3>Phone</h3>
    (513) 418-1480
    </div><div class = 'sidebar-column'>
    <h2>Big Sale!!!</h2>
    <p><b>Hard Days Night Package </b></p>
    <p>20oz Purple Haze<br>20oz Lucy in the Sky<br>20oz Stairway to Heaven<br>$82.76</p> 
</div>
 holiday-hours.txt ▾
<h2>Holiday Hours</h2>

<h3> Due to popular demand, we will be open on Mondays through the month of December.   Wake up, you lazy cats and get prepared for your parties!</h3>
 home.txt ▾
<h2>Welcome to The Nip Shoppe!</h2> 
<h3> We carry a VAST selection of QUALITY catnip! </h3>
<h3>Visit our showroom in beautiful downtown Felinia and prepare be AMAZED!</h3> 
<img src = 'data/images/showroom.png' alt = 'THe Nip Shoppe Showroom' />  
<h2>Hours</h2>
<p>Monday 4pm - 11pm<br>Tuesday 4pm - 6pm<br>Wednesday 11am - 3pm<br>Thursday 11am - 11pm<br>Friday 7pm - midnight<br>Saturday 2pm - 3pm<br>Sunday - closed</p>   
<h2>Location</h2>
<p>
222 Scratching Post Road  
<br>Felinia, Ohio 45222
<br> </p>
 login.php ▾
<?php
//Copyright (c) 2021, Susan V. Rodgers, Lila Avenue, LLC,  lilaavenue@gmail.com 

$password = file_get_contents ('data/password.txt');
$username = file_get_contents ('data/username.txt');

if ($_SERVER ["REQUEST_METHOD"] === "POST" ) {      
           
    if (isset ($_POST['username']) && isset ($_POST ['password'])) {
       if (trim($_POST['username']) === $username && trim($_POST['password']) === $password ){
                             
           $_SESSION['admin'] = true;  
           $loggedin = true;
           echo "<h3>You are now logged in to your administrator account</h3><br>";               
       }
        else {
            echo "<div class = 'error'>Invalid username or password</div>";
        }        
    } 
    else {
        echo "<div class = 'error'>Missing username or password</div>";
    }
}
if ($loggedin !== true) {    
?>
<main>
<h2>Administrator Log In</h2>
<div class = 'content-column'>    
    <h3> Please enter your username and password </h3>

    <form method="post" action="index.php?page=login">
         <b>Username:</b><br>
          <input type="username"  name="username" value = '<?php echo $username; ?>' />
        
          <br><b>Password:</b><br>
          <input type="password"  name="password" value = '<?php echo $password; ?>' /><br><br>  
           
         <input class = 'button' type = 'submit' name = 'submit'  value = 'Submit' /> 
    </form> <br> 
    
<?php
 }

 ?>
    


 
 logout.php ▾
<?php

session_unset();
session_destroy();
echo "<h3>You are now logged out.&nbsp;&nbsp;</h3> ";
$loggedin = false;


?>
Pages about.txt ▾
TEXT-BLOCK:about
 contact.txt ▾
TEXT-BLOCK:contact,TEXT-BLOCK:holiday-hours
 home.txt ▾
TEXT-BLOCK:home,TEXT-BLOCK:holiday-hours
 login.txt ▾
CODE-BLOCK:login
 logout.txt ▾
CODE-BLOCK:logout
admin control-panel.php ▾
<?php 
$username = file_get_contents ('data/username.txt');
$password = file_get_contents ('data/password.txt');

if ($_SERVER ["REQUEST_METHOD"] == "POST" ) { 
    if (isset ($_POST['submit-settings'])) {
        
        if (isset ($_POST['title'])) {
            $settingsrecord['title'] = $_POST['title'];            
        }
        if (isset ($_POST['description'])) {
            $settingsrecod['description'] = $_POST['description'];            
        }
        if (isset ($_POST['username']) ){
            $settingsrecord['username'] = $_POST['username'];           
        }
        if (isset ($_POST['password'])) {
            $settingsrecord['password'] = $_POST['password'];           
        }
       
        writeDatabaseRecord('settings', $settingsrecord,"" , 'data/settings.txt');
    }   
    else if (isset ($_POST['checkboxarray'])) {        
        $menuarray = $_POST['checkboxarray'];
        $menuarray = array_filter ($menuarray);      
        $string = implode (",", $menuarray);        
        file_put_contents ('data/menu.txt', $string);
    }
    else if (isset ($_POST['submit-css'])) {       
   
        if (isset ($_POST['newcssstring'])) {
            $newcssstring = trim ($_POST['newcssstring']);    
            
            //Save current style in versions folder
            $versionfile = "themes/css-versions/" . date ("Y-m-d-h-ia") . ".css";  
            file_put_contents ($versionfile, $cssstring);  

            //copy this version to current css file
            $filename = "themes/style.css";
            file_put_contents ($filename, $newcssstring);
        }    
    }
}
?>

<h2>Control Panel</h2>
<div class = 'left'>
    
    <div class = 'manage-heading'>Pages</div>
    <div class = 'content-column'>
        <?php  
       
        $array1 = scandir ("data/pages");
        foreach ($array1 as $item) {
            if ($item !== "." && $item !== "..") {
               $pageid = str_replace('.txt', '', $item);    
               $pageid = trim ($pageid);  
                echo  "<a href = 'admin.php?adminpage=update-page&page=" . $pageid . "'>" . $pageid . "</a><br>";
            }
        }    
        ?> 
    </div><div class = 'sidebar-column'>
    <a class = 'adminbutton' href = 'admin.php?adminpage=update-page'>New Page</a>
    </div>
    
    
    <div class = 'manage-heading'>Page Blocks</div>
    <div class = 'content-column'>
        <?php  
        
        $array1 = scandir ("data/blocks");
        foreach ($array1 as $item) {
            if ($item !== "." && $item !== "..") {
               $item = trim ($item);
               $pos1 = strpos ($item, '.');
               $blockid = substr ($item, 0, $pos1);
               $extension = substr ($item, $pos1); 
                
               if ($extension === '.php') {
                   echo $blockid . "<br>";
               }
                else if ($extension === '.txt'){                   
                    echo  "<a href = 'admin.php?adminpage=update-block&block=" . $blockid . "'>" . $blockid . "</a><br>";  
                }
            }
        }    
        ?> 
    </div><div class = 'sidebar-column'>
    <a class = 'adminbutton' href = 'admin.php?adminpage=update-block'>New BLock</a>
    </div>
    
    
   
 update-block.php ▾
<?php
$blockid = $blockcontent = $blocktitle = "";

if (isset ($_GET['block'])) {     
    if ($_GET['block'] !== ""){       
        $blockid =   filter_input(INPUT_GET, "block", FILTER_SANITIZE_STRING) ;  
       
        $blockid = trim ($blockid);
        $blockcontent = file_get_contents ('data/blocks/' . $blockid . ".txt");  
        $blocktitle = ucwords(str_replace ('-', '', $blockid));
    }
}

if ($_SERVER ["REQUEST_METHOD"] == "POST" ) { 
    if (isset ($_POST['block-content'])) {
        $blockcontent = trim($_POST['block-content']);      
        file_put_contents ('data/blocks/'. $blockid . '.txt', $blockcontent);
    }
}

?>

<h3>Update block: <?php echo $blockid; ?></h3>  
<div class = 'content-column'>
<form method = 'post' action = 'admin.php?adminpage=update-block&block=<?php echo $blockid; ?>'>
    
    <label for='text'>block Content</label><br>
    <textarea name = 'block-content' rows = '10' cols = '100'  ><?php echo $blockcontent; ?> </textarea>
    <br><br>
    <input class = 'submitbutton' type = 'submit' name = 'submit' value = 'Submit' />
</form>
<br><br>
</div><div class = 'sidebar-column'>
    <a class = 'adminbutton' href = 'admin.php?adminpage=control-panel'>Control Panel</a>   
<a  class = 'adminbutton' href = 'index.php'>View Website</a>
</div>


 update-page.php ▾
<?php

if (isset ($_GET['page'])) {     
    if ($_GET['page'] !== ""){       
        $pageid =   filter_input(INPUT_GET, "page", FILTER_SANITIZE_STRING) ;  
       
        $pageid = trim ($pageid);
        $pagecontent = file_get_contents ('data/pages/' . $pageid . ".txt");  
        $pagetitle = ucwords(str_replace ('-', '', $pageid));
    }
}

if ($_SERVER ["REQUEST_METHOD"] == "POST" ) { 
    if (isset ($_POST['page-content'])) {
        $pagecontent = trim($_POST['page-content']);      
        file_put_contents ('data/pages/'. $pageid . '.txt', $pagecontent);
    }
}

?>

<h3>Update Page: <?php echo $pageid; ?></h3>  
<div class = 'content-column'>
<form method = 'post' action = 'admin.php?adminpage=update-page&page=<?php echo $pageid; ?>'>
    
    <label for='text'>Page Content</label><br>
    <textarea name = 'page-content' rows = '10' cols = '100'  ><?php echo $pagecontent; ?> </textarea>
    <br><br>
    <input class = 'submitbutton' type = 'submit' name = 'submit' value = 'Submit' />
</form>
<br><br>
</div><div class = 'sidebar-column'>
    <a  class = 'adminbutton' href = 'index.php?page=<?php echo $pageid; ?>'>View Page</a>
    <a class = 'adminbutton' href = 'admin.php?adminpage=control-panel'>Control Panel</a>   
<a  class = 'adminbutton' href = 'index.php'>View Website</a>
</div>


Inc footer.php ▾
</main>
<footer>
   
    <br><br><br>Copyright &copy;  The Nip Shoppe<br>
     
</footer>

</body>
</html>
        
 header.php ▾
<!DOCTYPE html>
<html>
<head>    
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">  
   <title>CMS-Step 4a</title>  
   
   <link rel= 'stylesheet' type='text/css' href= 'inc/style.css'> 
    <?php
    if ($loggedin === true) {
        echo "<meta name = 'robots' content = 'nofollow, noindex'>  ";
    }
    ?>
</head> 
<body>  
   <header>  
       <a class = 'return' href = '../../build-a-cms-step-4a'>&larr; Return to CMS Step 4a</a><br> 
       <a href = 'index.php' ><h1>The Nip Shoppe</h1></a>  
      
       <a class = 'menuitem' href = 'index.php' >Home</a>
       <a class = 'menuitem' href = 'index.php?page=about' >About</a>
       <a class = 'menuitem' href = 'index.php?page=contact'>Contact</a>
    </header>  
       <main>
       
 style.css ▾
@font-face {
  font-family: Chelsea_Market;
  src: url('../data/fonts/ChelseaMarket-Regular.ttf');
}
@font-face {
  font-family:Open_Sans;
  src: url('../fonts/data/OpenSans-Regular.ttf');
}
body {
    font-family: "Open_Sans", sans-serif;
    text-align: center;  
    color: black;  
    margin: 0 auto;
    text-align: center;
    width: 1100px;
    max-width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

h1 {    
  font-family: 'Chelsea_Market', cursive;
    margin: 10px auto;
}
h2 {
   text-align: center;
    color: #3e4871;
}
h3  {
    font-size: 16px;
    color: #0d4a4d;   
}
b {
    color: navy;
}
a {
   text-decoration: none; 
   color:  #3e4871;
}

a:hover {
    color: purple;
}
img {   
    max-width: 100%;
}
label {   
    font-size: 14px;
    font-weight: bold;
   
}
.error {
    color: red;
    padding: 20px;
    font-size: 18px;    
}
.return {
    font-size: 12px;
}
textarea {
    width: 100%;
    max-width: 100%;
}
/** HEADER */
.header  {    
    text-align: center;     
    display: block;
    margin: auto;      
    padding: 20px 0;
}
a.title {   
    color: black;
}
a.menuitem {
    display: inline-block;
    margin: 0 10px;
    padding: 3px 7px;
   text-decoration: underline;
    font-size: 14px;
   
}
/** MAIN */
main {    
    text-align: center;
    display: block;
    margin: auto;   
    margin-top: 30px;
    width: 1000px;
    max-width: 100%;
}

/** COLUMNS */
.content-column, .sidebar-column , .half-column-1,.half-column-2, .manage-column, .third-column {
    display: inline-block;
    box-sizing: border-box;    
    max-width: 100%;
    vertical-align: top;
}
.content-column {
    width: 65%; 
    text-align: left;
}
.sidebar-column {
    width: 35%; 
    text-align: center;
}
.third-column {
    width: 33%;
}
.half-column-1, .half-column-2 {
    width: 50%;   
   
}
.full-column {
    text-align: left;
    width: 100%;
    padding: 20px;
}
/** Admin */
.manage-heading {
    background-color: #3e4871;
    padding: 5px;       
    margin: 20px auto 10px auto;  
    color: white;   
    text-transform: uppercase;
    text-align: center;
    font-size: 14px;
}

a.adminbutton, input.submitbutton {   
    background-color: #3e4871;
    color: white;
    padding: 5px 7px;
    border: 1px solid black;
    margin: 10px auto;
    width: 140px;
    display: block;
}
input.submitbutton{
    background-color: purple;   
    border: 1px solid black;
    border-radius: 3px;
    margin-bottom: 20px;
    width: 100px;
}

.edit-block {
    border: 1px solid #bbb;
    width: 120px;
    max-width: 100px;
    padding: 5px 7px;
    margin: 10px auto;
}
/** FOOTER */
footer {
    font-size: .8em;
    margin: 40px auto;
}
/**BREAKPOINTS */
@media only screen and (max-width: 600px) {
    .content-column, .sidebar-column {
        width: 100%;
        text-align: center;
    }    
}
Website Projects

Build a CMS Step 4a

Creating building blocks for pages

data folder

Blocks

Pages

admin

Inc
