Build a CMS Step 3

Password Protected Administrator Functions

These functions will allow us to edit our website securely without needing to upload files to a web hosting account. In the following demo, you will find a 'login' button at the bottom of each page.
CLICK HERE FOR DEMO Download Files
We will need the following additions to our website folder:
Two text files in the data folder - 'username.txt' and 'password.txt'
Two php files in the pages folder - 'login.php' and 'logout.php'
An 'admin' folder to hold an administrator file and a file for updating page content
A specialized version of index.php - 'admin.php' that produces pages from the 'admin' folder
Links in the footer.php file to the login page and the logout page
Files and Folders for CMS-03

File and folders in the data folder

File and folders in the admin folder

Code files:

 admin.php ▾
<?php
session_start();

$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=login'>LOGIN</a>";
}

echo "<br><br><a class = 'adminbutton' href =  'index.php?page=logout'>LOGOUT</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');
?>

<main>    
    <?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')) {
        include ('data/pages/' . $pageid . '.txt');
    }
    else if (file_exists ('data/pages/' . $pageid . ".php")) {        
        include ('data/pages/' . $pageid . '.php');   
    }
    
     ?>
    <br>
</main>


<?php

 if ($loggedin === true) {
    echo "<a class = 'adminbutton' href = 'admin.php?page=control-panel'</a>Control Panel</a>";
    echo "<br><br><a class = 'adminbutton' href =  'index.php?page=logout'>LOGOUT</a>";
 }
 else if ($pageid !== 'login') {
     echo "<a class = 'adminbutton' href = 'index.php?page=login'>Login </a>";
 } 

include ("inc/footer.php");
?>
       
Pages about.txt ▾
<main>
    <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> 
</main>
 contact.txt ▾
<main>
    <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>
</main>
 home.txt ▾
<main>
    <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>
    222 Scratching Post Road  
    <br>Felinia, Ohio 45222
    <br>
</main>
 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;


?>
admin control-panel.php ▾
 
<h2>Contol Panel</h2>
<div class = 'content-column'>
    <div class = 'manage-heading'>Pages</div>

    <?php  
   
    $array1 = scandir ("data/pages");
    foreach ($array1 as $item) {
        if ($item !== "." && $item !== "..") {
           $item = trim ($item);
           $pos1 = strpos ($item, '.');
           $pageid = substr ($item, 0, $pos1);
           $extension = substr ($item, $pos1); 
                
           if ($extension === '.php') {
               echo $pageid . "<br>";
           }
            else if ($extension === '.txt'){                   
                echo  "<a href = 'admin.php?adminpage=update-page&page=" . $pageid . "'>" . ucwords ($pageid) . "</a><br>";  
            }        
        }
    }    
    ?>  
    
</div><div class = 'sidebar-column'>      
   <br><a  class = 'adminbutton' href = 'index.php'>View Website</a>  
</div>

 update-page.php ▾
<?php
$pageid = $pagecontent = $pagetitle = "";

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 = 'admin.php?adminpage=control-panel'>Manage Website</a>   
<a  class = 'adminbutton' href = 'index.php'>View Website</a>
</div>


Inc footer.php ▾
 <footer>
    <br><br>
    <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 3</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-3'>&larr; Return to CMS Step 3</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>
 style.css ▾
@font-face {
  font-family: Chelsea_Market;
  src: url('../data/fonts/ChelseaMarket-Regular.ttf');
}
@font-face {
  font-family:Open_Sans;
  src: url('../data/fonts/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: purple;
}
a {
   text-decoration: none; 
   color:  #3e4871;
}

a:hover {
    color: purple;
}
img {   
    max-width: 100%;
}
label {   
    font-weight: bold;
   
}
.error {
    color: red;
    padding: 20px;
    font-size: 18px;    
}
.return {
    font-size: 12px;
}
/** 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;   
}

textarea {
    width: 100%;
    max-width: 100%;
}

main {    
    text-align: center;
    display: block;
    margin: auto;   
    margin-top: 30px;
    width: 1000px;
    max-width: 100%;
}

/** COLUMNS */
.content-column, .sidebar-column , .half-column, .manage-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;
}
.half-column {
    width: 50%;   
   
}
.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 {
    display: block;
    background-color: darkmagenta;
    color: white;
    padding: 5px 7px;
    border: 1px solid black;
    margin: 10px auto;
    width: 140px;
}
input.submitbutton {
    background-color: blue;   
    border: 1px solid black;
    border-radius: 3px;
    margin-bottom: 20px;
    
}

/** 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
