Build a CMS Step 5a
Appearance
Currently, the appearance of our website depends on a single CSS file and collection of fonts. Our next step is to create a new folder for 'themes' so that we have some choices of appearance.
A theme folder will contain a CSS file, a folder for fonts and a file called 'build-theme-header'.
The administrative pages will use the 'admin-style.css' file.
Styles that are likely to be common to any theme, such as column definitions, will be found in the 'default-style.css' file.
Files and folders
Contents of the 'theme1' folder:
There are now 2 themes available for our website. You can select them from the bottom of the Control Panel page.
The original CSS file has been divided up so that there is now an 'admin-style.css' and a 'default-style.css' as well as the CSS files for each theme.
CLICK HERE FOR DEMO
admin.php ▾
<?php
session_start();
include ("inc/functions.php");
$loggedin = false;
if (isset ($_SESSION['admin'])) {
if ($_SESSION ['admin'] === true) {
$loggedin = true;
}
}
$title = file_get_contents ('data/title.txt');
include ('admin/admin-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 "<br><br><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;
}
}
$title = file_get_contents ('data/title.txt');
$theme = file_get_contents ('data/theme.txt') ;
$description = file_get_contents ('data/description.txt') ;
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=add-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");
?>
Pages
about.txt ▾
PAGE-BLOCK:about contact.txt ▾
PAGE-BLOCK:contact,PAGE-BLOCK:holiday-hours home.txt ▾
PAGE-BLOCK:home,PAGE-BLOCK:holiday-hours login.txt ▾
PAGE-BLOCK:login logout.txt ▾
PAGE-BLOCK:logout new.txt ▾
PAGE-BLOCK:holiday-hoursadmin
add-page.php ▾
<?php
$pageaddedflag = false;
if ($_SERVER ["REQUEST_METHOD"] == "POST" ) {
if (isset ($_POST['title'])) {
$title = $_POST['title'];
//Check if this is a new page
$pageid = "";
if ($pageid === ""){
$pageid = createRecordKey ('pages', $title);
if ($pageid !== "") {
file_put_contents ('data/pages/' . $pageid . ".txt", "");
$pageaddedflag = true;
}
}
}
}
?>
<h3>Add Page</h3>
<div class = 'content-column'>
<?php
if ($pageaddedflag === true) {
echo "<h3>Page added: " . $pageid . "</h3>";
}
else {
?>
<form method = 'post' action = 'admin.php?adminpage=add-page'>
<label for= 'title'>Page Title</label><br>
<textarea id = 'title' name = 'title' rows = '1' ></textarea><br><br>
<input class = 'submitbutton' type = 'submit' name = 'submit' value = 'Submit' />
</form>
<?php
}
?>
<br><br>
</div><div class = 'sidebar-column'>
<a class = 'adminbutton' href = 'admin.php?adminpage=control-panel'>Control Panel</a>
<a class = 'adminbutton' href = 'admin.php?adminpage=update-page&page=<? echo pageid; ?>'>Edit Page</a>
<a class = 'adminbutton' href = 'admin.php?adminpage=remove-page&page=<?php echo $pageid; ?>'>Remove Page</a>
<a class = 'adminbutton' href = 'index.php'>View Website</a>
</div>
add-update-block.php ▾
<?php
$blockid = "";
if (isset ($_GET['block'])) {
if ($_GET['block'] !== ""){
$blockid = filter_input(INPUT_GET, "block", FILTER_SANITIZE_STRING) ;
$blockid = trim ($blockid);
}
}
if (file_exists ('data/blocks/' . $blockid . '.txt') || $blockid === "") {
$content = "";
if (file_exists ('data/blocks/' . $blockid . '.txt')) {
$content = file_get_contents ('data/blocks/' . $blockid . '.txt');
}
if ($_SERVER ["REQUEST_METHOD"] == "POST" ) {
if (isset ($_POST['content'])) {
$content = $_POST['content'];
}
if (isset ($_POST['title'])) {
$title = $_POST['title'];
}
//Check if this is a new block
if ($blockid === ""){
$blockid = createRecordKey ('blocks', $title);
}
if ($blockid !== "") {
file_put_contents ('data/blocks/' . $blockid . ".txt", $content);
}
}
?>
<h3>Update block: <?php echo $blockid; ?></h3>
<div class = 'content-column'>
<form method = 'post' action = 'admin.php?adminpage=add-update-block&block=<?php echo $blockid; ?>'>
<?php
if ($blockid === ""){
echo "<label for= 'title'>Block Title</label><br>";
echo "<textarea id = 'title' name = 'title' rows = '1' ></textarea><br><br>";
}
?>
<label for='text'>Block Content</label><br>
<textarea name = 'content' rows = '10' ><?php echo $content; ?> </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 = 'admin.php?adminpage=remove-block&block=<?php echo $blockid; ?>'>Remove block</a>
<a class = 'adminbutton' href = 'index.php'>View Website</a>
</div>
<?php
}
admin-header.php ▾
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CMS-Step 5a</title>
<link rel= 'stylesheet' type='text/css' href= 'admin/admin-style.css'>
<link rel= 'stylesheet' type='text/css' href= 'inc/default-style.css'>
<meta name = 'robots' content = 'nofollow, noindex'>
</head>
<body>
<header>
<?php
echo "<a class = 'return' href = '../../build-a-cms-step-5a'>← Return to CMS Step 5a</a><br> ";
echo "<a href = 'index.php' ><h1>" . $title . "</h1></a><br>";
$menustring = file_get_contents ('data/menu.txt');
$menuarray = explode (',', $menustring);
foreach ($menuarray as $item) {
$item = trim ($item);
echo "<a class = 'menuitem' href = 'index.php?page=" . $item . "'>" . ucwords (str_replace ('-', " ", $item)) . "</a>";
}
?>
</header>
<main class = 'admin'>
admin-style.css ▾
@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, h2 {
text-align: center;
}
b {
color: navy;
}
a {
text-decoration: none;
color: purple;
}
a:hover {
color: purple;
}
img {
max-width: 100%;
}
label {
font-size: 14px;
font-weight: bold;
}
.error {
color: red;
padding: 20px;
font-size: 18px;
}
textarea {
width: 100%;
max-width: 100%;
}
main.admin {
width: 1300px;
text-align: left;
}
.manage-heading {
background-color: #3e4871;
padding: 5px;
margin: 20px auto 10px auto;
color: white;
text-transform: uppercase;
text-align: center;
font-size: 14px;
}
.manage-sidebar-column, .instructions {
text-align: left;
display: inline-block;
vertical-align: top;
width: 35%;
max-width: 100%;
box-sizing: border-box;
margin-top: 30px;
font-size: 14px;
}
.instructions {
width: 100%;
margin: 20px auto;
padding: 12px 15px;
border: 1px solid #bbb;
background-color: #eee;
}
.resource-blocks {
border: 1px solid #bbb;
cursor: pointer;
padding: 5px;
word-break: break-all;
font-size: 14px;
margin: 3px auto;
display: inline-block;
vertical-align: top;
}
button.slot {
color: white;
margin: 5px;
padding: 7px 12px;
font-size: 14px;
cursor: pointer;
text-align: center;
text-decoration: none;
background-color: blue;
display: inline-block;
border-radius: 2px;
font-style: normal;
width: 160px;
}
.jssort1 {
display: inline-block;
padding: 5px;
border: 1px solid #bbb;
margin: 3px 5px;
max-width: 100%;
font-size: .9em;
cursor: pointer;
background-color: #eee;
min-height: 40px;
vertical-align: top;
}
.jssort1.pink {
background-color: #eac0c7;
}
.hidden {
display: none;
}
.highlighted {
border: 2px solid blue;
}
input.submitbutton2 {
background-color: #3e4871;
color: white;
padding: 5px 7px;
border: 1px solid black;
margin: 10px auto;
width: 140px;
display: inline-block;
}
control-panel.php ▾
<?php
$username = file_get_contents ('data/username.txt');
$password = file_get_contents ('data/password.txt');
$title = file_get_contents ('data/title.txt');
$theme = file_get_contents ('data/theme.txt') ;
$description = file_get_contents ('data/description.txt') ;
if ($_SERVER ["REQUEST_METHOD"] == "POST" ) {
if (isset ($_POST['title'])){
$title = $_POST['title'];
file_put_contents ('data/title.txt', $title);
}
if (isset ($_POST['description'])) {
$description = $_POST['description'];
file_put_contents ('data/description.txt', $description);
}
if (isset ($_POST['username']) ){
$username = $_POST['username'];
file_put_contents ('data/username.txt', $username) ;
}
if (isset ($_POST['password'])) {
$password = $_POST['password'];
file_put_contents ('data/password.txt', $password) ;
}
if (isset ($_POST['theme'])) {
$theme = $_POST['theme'];
file_put_contents ('data/theme.txt', $theme) ;
}
if (isset ($_POST['checkboxarray'])) {
$menuarray = $_POST['checkboxarray'];
$menuarray = array_filter ($menuarray);
$string = implode (",", $menuarray);
file_put_contents ('data/menu.txt', $string);
}
}
?>
<h2>Control Panel</h2>
<div class = 'left'>
<div class = 'manage-heading'>Pages</div>
<div class = 'content-column-left'>
<?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-right'>
<a class = 'adminbutton' href = 'admin.php?adminpage=add-page'>New Page</a>
</div>
<div class = 'manage-heading'>Page Blocks</div>
<div class = 'content-column-left'>
<?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=add-update-block&block=" . $blockid . "'>" . $blockid . "</a><br>";
}
}
}
?>
</div><div class = 'sidebar-column-right'>
<a class = 'adminbutton' href = 'admin.php?adminpage=add-update-block'>New BLock</a>
</div>
<div class = 'manage-heading'>Menu</div>
<div class = 'third-column-1'>
<h3>Available Pages</h3>
<?php
$array1 = scandir ("data/pages");
foreach ($array1 as $item) {
if ($item !== "." && $item !== "..") {
$pageid = str_replace('.txt', '', $item);
$pageid = trim ($pageid);
$pagetitle = ucwords (str_replace ('-', " ", $pageid));
if (in_array ($pageid, $menuarray)) {
echo "<div id = '" . $pageid . "' class = 'resource-blocks highlighted' onclick = 'selectResource(id)'>" . $pageid . "</div><br>";
}
else {
echo "<div id = '" . $pageid . "' class = 'resource-blocks ' onclick = 'selectResource(id)'>" . $pageid . "</div><br>";
}
}
}
?>
</div><div class = 'third-column-2'>
<h3>Current Menu </h3>
<form method = 'post' action = 'admin.php?adminpage=control-panel'>
<?php
echo "<div id = 'slots'>";
//add extra slot at beginning
echo "<div id = '0' class = 'jssort1 pink' onclick = 'clickOnList(id)'></div>";
echo "<input class = 'jssort4 hidden' type = 'checkbox' name = 'checkboxrray[]' value = '' checked />" ;
//fill in slots with menuitems
$limit = 100;
$id = 1;
$length = count ($menuarray);
foreach ($menuarray as $x => $item){
$item = trim($item);
if ($id < $limit) {
echo "<div id = '". $id . "' class = 'jssort1' onclick = 'clickOnList(id)'>" . $item . "</div>";
//Create a checkbox for this slot
echo "<input class = 'jssort4 hidden ' type = 'checkbox' name = 'checkboxarray[]' value = '" . $item . "' checked />" ;
$id++;
//add empty slot after each filled slot
echo "<div id = '" . $id . "' class = 'jssort1 pink' onclick = 'clickOnList(id)'></div>";
echo "<input class = 'jssort4 hidden' type = 'checkbox' name = 'checkboxarray[]' value = '' checked />";
$id++;
}
}
echo "</div>";
?>
<br><input class = 'submitbutton2' type = 'submit' name = 'submit' value = 'Update' />
</form>
</div><div class = 'third-column-3'>
<div class = 'instructions'>
<h3>Instructions </h3>
<b>To Add a Page: </b> - click available page(s), then click vertical bar to insert
<br><br><b>To Rearrange </b>- click item(s) to select, then click vertical bar to insert
<br><br><button class = 'slot' onclick = 'chooseToDelete()' >Click here to delete selected page items (blue)</button>
</div>
</div>
<div style = 'display: none;'>
Selected Resources: <div id = 'saved-resources'></div>
</div>
<div class = 'manage-heading'>Settings</div>
<form method = 'post' action = 'admin.php?adminpage=control-panel'>
<div class = 'content-column'>
<label for= 'title'>Title</label><br>
<input id = 'title' type = 'text' name = 'title' value = '<?php echo $title;?>'/>
<br><br><label for= 'description'>Description</label><br>
<input id = 'descripton' type = 'text' name = 'description' value = '<?php echo $description;?>'/>
<br><br><label for= 'username'>Username</label><br>
<input id = 'username' type = 'text' name = 'username' value = '<?php echo $username;?>'/>
<br><br><label for= 'password'>Password - Letters, Numbers and/or special characters: '-$!?\#*' </label><br>
<input id = 'password' type = 'text' name = 'password' value = '<?php echo $password;?>'/>
<br>
<h4>Select Theme</h4>
<?php
$theme = file_get_contents ("data/theme.txt");
$array1 = scandir ('themes');
foreach ($array1 as $item1) {
if ($item1 !== "." && $item1 !== "..") {
$item1 = trim ($item1);
if ($item1 === $theme) {
echo "<input type = 'radio' name = 'theme' value = '" . $item1 . "' checked /><label for='theme'>" . $item1 . "<br>";
}
else {
echo "<input type = 'radio' name = 'theme' value = '" . $item1 . "' /><label for='theme'>" . $item1 . "<br>";
}
}
}
?>
<br><input class = 'submitbutton' type = 'submit' name = 'submit-settings' value = 'Submit' />
</div>
</form>
</div>
remove-block.php ▾
<?php
echo "<div class = 'content-column'>";
$blockid = "";
if (isset ($_GET["block"])){
$blockid = filter_input(INPUT_GET, "block", FILTER_SANITIZE_STRING) ;
}
if ($_SERVER ["REQUEST_METHOD"] == "POST" ) {
if (isset($_POST ['removeflag'])) {
$removeflag = trim($_POST['removeflag']);
if ($removeflag === "REMOVE") {
if (file_exists ("data/blocks/" . $blockid . ".txt")) {
$oldfilename = 'data/blocks/' . $blockid . '.txt';
$newfilename = 'data/trash/' . $blockid . ".txt";
rename ($oldfilename, $newfilename);
//Remove this block from all pages
$array1 = scandir ('data/pages');
foreach ($array1 as $item1) {
if ($item1 !== "." & $item1 !== "..") {
$item1 = trim ($item1);
$pageid = str_replace ('.txt', '', $item1);
$pageblockstring = file_get_contents ('data/pages/' . $pageid . '.txt');
echo $pageblockstring;
$pageblockarray = explode (',' , $pageblockstring);
foreach ($pageblockarray as $id => $item2) {
$item2 = trim ($item2);
if ($item2 === 'TEXT-BLOCK:' . $blockid) {
unset ($pageblockarray [$id]);
}
}
array_values ($pageblockarray);
$pageblockstring = implode (',', $pageblockarray);
file_put_contents ('data/pages/' . $pageid . '.txt', $pageblockstring);
}
}
}
}
}
}
if (file_exists ("data/blocks/" . $blockid . ".txt") ) {
echo "<h2>Remove block: " . $blockid . "</h2>";
?>
<form method = 'post' action = 'admin.php?adminpage=remove-block&block=<?php echo $blockid ;?>'>
<h3>Are you sure you want to move <?php echo $blockid ; ?> to the Trash Bin?</h3><br>
NO: <input type = 'radio' name = 'removeflag' value = '' checked />
YES <input type = 'radio' name = 'removeflag' value = 'REMOVE' />
<br><br><input class = 'submitbutton' type = 'submit' name = 'submit' value='Remove'/>
</form>
<?php
}
else {
echo "This block has been removed";
}
echo "</div><div class = 'sidebar-column'>";
echo "<br><a class = 'adminbutton' href = 'admin.php?adminpage=control-panel'>Control Panel</a>";
echo "</div>";
?>
remove-page.php ▾
<?php
echo "<div class = 'content-column'>";
$pageid = "";
if (isset ($_GET["page"])){
$pageid = filter_input(INPUT_GET, "page", FILTER_SANITIZE_STRING) ;
}
if ($_SERVER ["REQUEST_METHOD"] == "POST" ) {
if (isset($_POST ['removeflag'])) {
$removeflag = trim($_POST['removeflag']);
if ($removeflag === "REMOVE") {
if (file_exists ("data/pages/" . $pageid . ".txt")) {
$oldfilename = 'data/pages/' . $pageid . '.txt';
$newfilename = 'data/trash/' . $pageid . ".txt";
rename ($oldfilename, $newfilename);
foreach ($menuarray as $id => $item) {
if (trim ($item) === $pageid) {
unset ($menuarray[$id]);
$string = implode (",", $menuarray);
file_put_contents ('data/menu.txt', $string);
}
}
}
}
}
}
if (file_exists ("data/pages/" . $pageid . ".txt") ) {
echo "<h2>Remove page: " . $pageid . "</h2>";
?>
<form method = 'post' action = 'admin.php?adminpage=remove-page&page=<?php echo $pageid ;?>'>
<h3>Are you sure you want to move <?php echo $pageid ; ?> to the Trash Bin?</h3><br>
NO: <input type = 'radio' name = 'removeflag' value = '' checked />
YES <input type = 'radio' name = 'removeflag' value = 'REMOVE' />
<br><br><input class = 'submitbutton' type = 'submit' name = 'submit' value='Remove'/>
</form>
<?php
}
else {
echo "This page has been removed";
}
echo "</div><div class = 'sidebar-column'>";
echo "<br><a class = 'adminbutton' href = 'admin.php?adminpage=control-panel'>Control Panel</a>";
echo "</div>";
?>
update-page.php ▾
<?php
$pageblockarray = array();
$pageid = "";
if (isset ($_GET['page'])) {
if ($_GET['page'] !== ""){
$pageid = filter_input(INPUT_GET, "page", FILTER_SANITIZE_STRING) ;
$pageid = trim ($pageid);
if (file_exists ('data/pages/' . $pageid . '.txt')) {
$pageblockstring = file_get_contents ('data/pages/' . $pageid . '.txt');
$pageblockarray = explode (',', $pageblockstring);
}
}
}
if ($_SERVER ["REQUEST_METHOD"] == "POST" ) {
if (isset ($_POST['checkboxarray'])) {
$pageblockarray = $_POST['checkboxarray'];
$pageblockarray = array_filter ($pageblockarray);
$pageblockstring = implode (",", $pageblockarray);
}
if (isset ($_POST['title'])) {
$title = $_POST['title'];
}
//Check if this is a new page
if ($pageid === ""){
$pageid = createRecordKey ('pages', $title);
}
if ($pageid !== "") {
file_put_contents ('data/pages/' . $pageid . '.txt', $pageblockstring);
}
}
echo "<h1>Edit Page </h1>";
if ($pageid !== "" && file_exists ('data/pages/' . $pageid . ".txt")) {
?>
<h2>Page: <?php echo ucwords (str_replace ('-', ' ', $pageid)); ?></h2>
<div class = 'left'>
<div class = 'third-column-1'>
<h3>Available Content</h3>
<?php
$array1 = scandir ("data/blocks");
foreach ($array1 as $item) {
if ($item !== "." && $item !== "..") {
$item = trim ($item);
$blockid = str_replace ('.txt', '', $item);
$blockid = str_replace ('.php', '', $blockid);
if (in_array ($blockid, $pageblockarray)) {
echo "<div id = '" . $blockid . "' class = 'resource-blocks highlighted' onclick = 'selectResource(id)'>PAGE-BLOCK:" . $blockid . "</div><br>";
}
else {
echo "<div id = '" . $blockid . "' class = 'resource-blocks ' onclick = 'selectResource(id)'>PAGE-BLOCK:" . $blockid . "</div><br>";
}
}
}
?>
</div><div class = 'third-column-2'>
<h3>Current Page Content</h3>
<form method = 'post' action = 'admin.php?adminpage=update-page&page=<?php echo $pageid; ?>'>
<?php
echo "<div id = 'slots'>";
//add extra slot at beginning
echo "<div id = '0' class = 'jssort1 pink' onclick = 'clickOnList(id)'></div>";
echo "<input class = 'jssort4 hidden' type = 'checkbox' name = 'checkboxarray[]' value = '' checked />" ;
//fill in slots with pageitems
$limit = 100;
$id = 1;
$length = count ($pageblockarray);
foreach ($pageblockarray as $x => $item){
$item = trim($item);
if ($id < $limit) {
echo "<div id = '". $id . "' class = 'jssort1' onclick = 'clickOnList(id)'>" . $item . "</div>";
//Create a checkbox for this slot
echo "<input class = 'jssort4 hidden ' type = 'checkbox' name = 'checkboxarray[]' value = '" . $item . "' checked />" ;
$id++;
//add empty slot after each filled slot
echo "<div id = '" . $id . "' class = 'jssort1 pink' onclick = 'clickOnList(id)'></div>";
echo "<input class = 'jssort4 hidden' type = 'checkbox' name = 'checkboxarray[]' value = '' checked />";
echo "<br>";
$id++;
}
}
echo "</div>";
?>
<br><input class = 'submitbutton2' type = 'submit' name = 'submit' value = 'Update' />
</form>
</div><div class = 'third-column-3'>
<div class = 'instructions'>
<h3>Instructions: </h3>
<b>To Add Content: </b> - click available item(s), then click vertical bar to insert
<br><br><b>To Rearrange Items </b>- click item(s) to select, then click vertical bar to insert
<br><br>
<button class = 'slot' onclick = 'chooseToDelete()' >Click here to selected page items </button><br><br>
</div>
<div style = 'display: none;'>
Selected Resources: <div id = 'saved-resources'></div>
</div>
<a class = 'adminbutton' href = 'admin.php?adminpage=control-panel'>Control Panel</a>
<a class = 'adminbutton' href = 'index.php?page=<?php echo $pageid; ?>'>View Page</a>
<a class = 'adminbutton' href = 'admin.php?adminpage=remove-page&page=<?php echo $pageid; ?>'>Remove Page</a>
</div>
</div>
<?php
}?>
Inc
admin-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'>← Return to CMS Step 4a</a><br>
<a href = 'index.php' ><h1>The Nip Shoppe</h1></a>
<?php
$string = file_get_contents ('data/menu.txt');
$menuarray = explode (",", $string);
foreach ($menuarray as $item) {
$item = trim ($item);
echo "<a class = 'menuitem' href = 'index.php?page=" . $item . "'>" . ucwords (str_replace ('-', " ", $item)) . "</a>";
}
?>
<main class = 'admin'>
default-style.css ▾
@font-face {
font-family:Open_Sans;
src: url('../data/fonts/OpenSans-Regular.ttf');
}
body {
font-family: "Open_Sans", sans-serif;
text-align: center;
margin: 0 auto;
text-align: center;
width: 1100px;
max-width: 100%;
padding: 0 20px;
box-sizing: border-box;
}
img {
max-width: 100%;
}
label {
font-size: 14px;
font-weight: bold;
}
.error {
color: red;
padding: 20px;
font-size: 18px;
}
.return {
font-size: 12px;
}
/* Outerwrap */
.outerwrap, main, .headerwrap {
margin: 0 auto;
text-align: center;
padding: 0;
text-align: center;
max-width: 100%;
box-sizing: border-box;
}
/* Header */
.header-column1, .header-column2, .header-column3 {
display: inline-block;
box-sizing: border-box;
vertical-align: top;
max-width: 100%;
}
/** Menu */
a.menuitem {
text-transform: uppercase;
text-decoration: none;
display: inline-block;
margin: 5px 15px;
font-size: 14px;
line-height: 130%;
text-align: center;
box-sizing: border-box;
cursor: pointer;
max-width: 100%;
}
a.menuitem.current {
border-bottom: 1px solid #bbb;
}
a.menuitem:hover {
color: #333;
}
/** MAIN */
main {
text-align: center;
display: block;
margin: auto;
margin-top: 30px;
width: 1000px;
max-width: 100%;
}
/** COLUMNS */
.content-column-left, .content-column-right,.sidebar-column-left, .sidebar-column-right , .half-column-1,.half-column-2, .third-column-1, .third-column-2 , .third-column-3, .two-thirds-column-2, .two-thirds-column-2 {
display: inline-block;
box-sizing: border-box;
max-width: 100%;
vertical-align: top;
}
.content-column-left, .content-column-right {
width: 65%;
text-align: left;
}
.sidebar-column-left, .sidebar-column-right {
width: 35%;
text-align: center;
}
.third-column-1, .third-column-2, .third-column-3 {
width: 33%;
text-align: left;
}
.two-thirds-column-1, .two-thirds-column-2 {
width: 66%;
}
.half-column-1, .half-column-2 {
width: 50%;
}
.full-column {
width: 100%;
}
.edit-block {
border: 1px solid #bbb;
width: 120px;
max-width: 100px;
padding: 5px 7px;
margin: 10px auto;
}
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;
}
/** FOOTER */
footer {
font-size: .8em;
margin: 40px auto;
}
footer.php ▾
<footer>
<br><br>
<br><br><br>Copyright © The Nip Shoppe<br>
</footer>
<script src= 'inc/script.js'></script>
</body>
</html>
functions.php ▾
<?php
function createRecordKey ($folder, $newname) {
$newkey = "";
if ($newname === '') {
echo "<div class = 'error'>Missing Name</div>";
}
else {
if (strlen ($newname) > 50) {
echo "<div class = 'error'>Title must be less than 50 characters</div>";
}
else {
$newkey = str_replace(" ", "-", $newname);
$newkey = strtolower ($newkey);
$newkey = html_entity_decode($newkey, ENT_QUOTES);
$newkey = preg_replace('/[^A-Za-z0-9-]/', '', $newkey);
$newkey = preg_replace('/-+/', '-', $newkey);
if ($newkey === "") {
echo "<div class = 'error'>Invalid Record Name</div>";
}
else {
// CHECK THAT THIS RECORD DOESN'T ALREADY EXIST
$filename = "data/" . $folder . "/" . $newkey . ".txt";
if (file_exists ($filename)) {
echo "<div class = 'error'>'" . $folder . "' record with this name already exists</div>";
$newkey = "";
}
}
}
}
return $newkey;
}
?> header.php ▾
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CMS-Step 5a</title>
<link rel= 'stylesheet' type='text/css' href= 'inc/default-style.css'>
<link rel= 'stylesheet' type='text/css' href= 'themes/<?php echo $theme; ?>/style.css'>
</head>
<body>
<header>
<a class = 'return' href = '../../build-a-cms-step-5a'>← Return to CMS Step 5a</a><br>
<?php
include ('themes/'. $theme . "/build-theme-header.php");
?>
</header>
<main>
script.js ▾
function selectResource(id) {
// Called when a resource in Column 1 is clicked
//Save selected resource
var newvalue = document.getElementById(id).innerHTML ;
var oldvalue = document.getElementById('saved-resources').innerHTML;
//alert ('new: ' + newvalue);
//Item has already been selected - need to remove it from saved resources
if (document.getElementById(id).style.backgroundColor === 'pink') {
document.getElementById(id).style.backgroundColor = 'white';
newvalue = oldvalue.replace (newvalue, '');
}
else {
newvalue = oldvalue + ',' + newvalue;
document.getElementById(id).style.backgroundColor = 'pink';
}
document.getElementById('saved-resources').innerHTML = newvalue;
}
function clickOnList(id) {
//Column 1 - Resources
var resourcearray = document.getElementsByClassName ('resource-blocks');
//Column2 All slots, filled and empty
var array1 = document.getElementsByClassName('jssort1');
//Column 2 - Innut form checkboxes
var array4 = document.getElementsByClassName('jssort4');
//Reset background in resources
for (i = 0; i < resourcearray.length ; i++) {
resourcearray[i].style.backgroundColor = '#fff';
}
//Reset background and color in list
var limit = array1.length;
for (var i = 0; i < limit ; i++) {
if (array1[i].innerHTML.includes("DROPDOWN") || array1[i].innerHTML.includes("COLUMN")) {
array1[i].style.color = 'red';
}
}
//NON-EMPTY SLOT - item is saved and can be moved or deleted
if (array1[id].innerHTML !== "" ) {
//Item to be moved or deleted
var newvalue = array1[id].innerHTML;
var oldvalue = document.getElementById('saved-resources').innerHTML;
if (document.getElementById(id).style.backgroundColor === 'blue') {
document.getElementById(id).style.backgroundColor = '#eee';
newvalue = oldvalue.replace (newvalue, '');
}
else {
newvalue = oldvalue + ',' + newvalue;
document.getElementById(id).style.backgroundColor = 'blue';
}
document.getElementById('saved-resources').innerHTML = newvalue;
}
else {
//EMPTY SLOT - any previously saved resources and list items will be moved to slot
//Retrieve list of new resources
var savedResources = document.getElementById('saved-resources').innerHTML;
var savedResourcesArray = savedResources.split(',');
var savedlength = savedResourcesArray.length;
//delete items with blue background
for ( i = 0; i < limit ; i++) {
if (array1[i].style.backgroundColor === 'blue') {
//remove contents of slot
array1[i].innerHTML = "";
array4[i].value = "";
}
}
//create array of non-empty slots
var updatedarray = new Array();
for (i = 0; i < limit ; i++) {
if (i == id) {
for (j = 0; j < savedlength; j++){
//insert saved resources into updated array
updatedarray.push (savedResourcesArray[j]);
}
}
else if (array1[i] !== '') {
updatedarray.push (array1[i].innerHTML);
}
}
//show updated resource list on page
var newlimit = updatedarray.length;
document.getElementById('slots').innerHTML = "<div id = '0' class = 'jssort1 pink' onclick = 'clickOnList(id)'></div><input class = 'jssort4 hidden ' type = 'checkbox' name = 'checkboxarray[]' value = '' checked />" ;
var j = 1;
for (i = 0; i < newlimit ; i++) {
if (updatedarray[i] !== "" && updatedarray[i] !== ','){
//Filled slot
//Check if this is a column or a dropdown
var c = updatedarray[i].search("COLUMN");
var n = updatedarray[i].search("DROPDOWN");
//alert ("C: " + c + " N: " + n);
if ( (c > -1 || n > -1) && i > 1) {
document.getElementById('slots').innerHTML += '<br>';
}
document.getElementById('slots').innerHTML +=
"<div id = '" + j + "' class = 'jssort1' onclick = 'clickOnList(id)'>" + updatedarray[i] + "</div><input class = 'jssort4 hidden ' type = 'checkbox' name = 'checkboxarray[]' value = '" + updatedarray[i] + "' checked />";
//Check if item is to be colored red
if (n === -1 && c === -1) {
//no action
}
else {
document.getElementById (j).style.color = 'red';
}
j++;
//empty slot
document.getElementById('slots').innerHTML +=
"<div id = '" + j + "' class = 'jssort1 pink' onclick = 'clickOnList(id)'></div><input class = 'jssort4 hidden ' type = 'checkbox' name = 'checkboxarray[]' value = '' checked />" ;
j++;
if ( (c > -1 || n > -1) && i < newlimit - 1) {
document.getElementById('slots').innerHTML += '<br>';
}
}
}
//Return saved resources list to empty
document.getElementById('saved-resources').innerHTML = "";
}
}
function chooseToDelete() {
//Array1 - all itmes inlist, empty and filled
var array1 = document.getElementsByClassName('jssort1');
//array4 - Input form checkboxes
var array4 = document.getElementsByClassName('jssort4');
//Remove item with blue background
var limit = array1.length;
for (var i = 0; i < limit ; i++) {
if (array1[i].style.backgroundColor === 'blue') {
//remove contents of slot
array1[i].innerHTML = "";
array4[i].value = "";
array1[i].style.backgroundColor = '#eac0c7';
}
}
//remove item from saved resources.
document.getElementById('saved-resources').innerHTML = '';
}