Build a CMS Step 2b
Make our pages dynamic
A 'static' website uses a separate file for each page. A 'dynamic' website uses the index.php file to build each page according to some instructions.
First, we need to put the 'main' sections for each page into a new folder called 'pages'.
Contents of the 'pages' folder:
Next, we need to add a little message to each menu item to tell index.php what page we want to see. This is called a 'query'.
Last, we need to have index.php check for this query using the PHP 'get' command.
Updated folders and files:
CLICK HERE FOR DEMO
index.php ▾
<?php
include ('inc/header.html');
//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) ;
}
include ('pages/' . $pageid . '.html');
include ("inc/footer.html");
?>
style.css ▾
@font-face {
font-family: Chelsea_Market;
src: url('fonts/ChelseaMarket-Regular.ttf');
}
@font-face {
font-family:Open_Sans;
src: url('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;
}
/** MAIN */
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;
}
}Inc
footer.html ▾
<footer>
<br><br>
<br><br><br>Copyright © The Nip Shoppe<br>
</footer>
</body>
</html>
header.html ▾
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CMS-Step 2 b</title>
<link rel= 'stylesheet' type='text/css' href= 'style.css'>
</head>
<body>
<header>
<a class = 'return' href = '../../build-a-cms-step-2b'>← Return to CMS Step 2b</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>
Pages
about.html ▾
<main>
<h2>About the Nip Shoppe</h2>
<img src = '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.html ▾
<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.html ▾
<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 = '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>