<!doctype html>
<html>
<head>
<title>The Title</title>
</head>
<body>
</body>
</html>
That's about as barebones as you can get - but functionally not really useful to us. Lets add some common elements we will need on all pages like stylesheets and javascript libraries as well as our masthead, nav and footer.
<?php
require_once('includes/common.php');
$page = empty($_REQUEST['page']) ? 'home' : preg_replace('/[^a-zA-Z0-9\-_]/', '', $_REQUEST['page']);
$pagepath = "includes/$page.class.php";
if (file_exists($pagepath)) {
require_once($pagepath);
$pageclass = $page . 'Class';
}
else {
$pageclass = 'BasePage';
}
$mainframe = new $pageclass($page);
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><?php $mainframe->title();?></title>
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/custom.css" />
<script src="js/vendor/modernizr.js"></script>
</head>
<body id="<?php echo $page;?>_page">
<div id="wrapper">
<div id="topbar" class="small bottomShadow">
<div class="row">
<div class="large-2 columns"><a href="index.html" id="logo"><img id="logo" src="css/images/logo.png" alt="Experts Exchange"/></a></div>
<div class="large-10 columns" style="margin-top: 10px; text-align: right">
<a href="login.html" class="login">Login</a>
<nav>
<ul>
<li><a href="index.php?page=home">Home</a></li>
<li><a href="index.php?page=aboutus">About US</a></li>
<li><a href="index.php?page=products">Products</a></li>
<li><a href="index.php?page=contact">Contact US</a></li>
</ul>
</nav>
</div>
</div>
</div>
<div class="mainContent">
<!-- CONTENT AREA STARTS HERE -->
<?php $mainframe->render();?>
<!-- CONTENT AREA ENDS HERE -->
</div>
</div>
<div id="footer">
<div class="row">
<div class="large-9 columns">
<div class="row">
<div class="large-4 columns">
<h6>NAVIGATE<h6>
<ul>
<li><a href="/" data-ga-label="Footer" data-ga-action="MasterPage" data-ga-category="HomePage" class="track-click" id="Body_lnkHome">Home</a></li>
<li><a href="/" data-ga-label="Footer" data-ga-action="MasterPage" data-ga-category="HomePage" class="track-click" id="Body_lnkHome">Home</a></li>
<li><a href="/" data-ga-label="Footer" data-ga-action="MasterPage" data-ga-category="HomePage" class="track-click" id="Body_lnkHome">Home</a></li>
<li><a href="/" data-ga-label="Footer" data-ga-action="MasterPage" data-ga-category="HomePage" class="track-click" id="Body_lnkHome">Home</a></li>
</ul>
</div>
<div class="large-4 columns">
<h6>EVENTS<h6>
<ul>
<li><a href="/" data-ga-label="Footer" data-ga-action="MasterPage" data-ga-category="HomePage" class="track-click" id="Body_lnkHome">Home</a></li>
<li><a href="/" data-ga-label="Footer" data-ga-action="MasterPage" data-ga-category="HomePage" class="track-click" id="Body_lnkHome">Home</a></li>
<li><a href="/" data-ga-label="Footer" data-ga-action="MasterPage" data-ga-category="HomePage" class="track-click" id="Body_lnkHome">Home</a></li>
<li><a href="/" data-ga-label="Footer" data-ga-action="MasterPage" data-ga-category="HomePage" class="track-click" id="Body_lnkHome">Home</a></li>
</ul>
</div>
<div class="large-4 columns">
<h6>NETWORK<h6>
<ul>
<li><a href="/" data-ga-label="Footer" data-ga-action="MasterPage" data-ga-category="HomePage" class="track-click" id="Body_lnkHome">Home</a></li>
<li><a href="/" data-ga-label="Footer" data-ga-action="MasterPage" data-ga-category="HomePage" class="track-click" id="Body_lnkHome">Home</a></li>
<li><a href="/" data-ga-label="Footer" data-ga-action="MasterPage" data-ga-category="HomePage" class="track-click" id="Body_lnkHome">Home</a></li>
<li><a href="/" data-ga-label="Footer" data-ga-action="MasterPage" data-ga-category="HomePage" class="track-click" id="Body_lnkHome">Home</a></li>
</ul>
</div>
</div>
</div>
<div class="large-4 columns"></div>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/scripts.js"></script>
<script>
$(document).foundation();
</script>
<?php $mainframe->dump_scripts();?>
</body>
</html>
That was a big jump but we will go through each of the sections one at a time.
<?php
// INCLUDE OUR COMMON LIBRARY CODE - WE WILL DEFINE THIS A BIT LATER */
require_once('includes/common.php');
// GET OUR PAGE VARIABLE FROM THE URL (OR POST IF IT WAS POSTED).
// IF THE $page PARAMETER EXISTS THEN SANITIZE IT i.e. STRIP IT OF
// INVALID CHARS. IF THE PARAMETER DOES NOT EXIST DEFAULT IT TO home
$page = empty($_REQUEST['page']) ? 'home' : preg_replace('/[^a-zA-Z0-9\-_]/', '', $_REQUEST['page']);
// CREATE A PATH TO THE FILE THAT CONTAINS THE CODE FOR THIS PAGE
$pagepath = "includes/$page.class.php";
// IF IT DOES EXIST SET THE PAGECLASS TO THE PAGE NAME
if (file_exists($pagepath)) {
require_once($pagepath);
$pageclass = $page . 'Class';
}
// OTHERWISE DEFAULT IT TO THE BASE
else {
$pageclass = 'BasePage';
}
// AND INSTANTIATE THE CLASS
$mainframe = new $pageclass($page);
?>
<?php
// OUR DEFAULT TITLE TO USE IF WE DON'T SPECIFICALLY SET ONE
define('gb_title', 'DEFAULT TITLE');
// THE BasePage CLASS THAT CONTAINS THE DEFUALT FUNCTIONALITY
// FOR OUR PAGES.
class BasePage
{
// THE TITLE PROPERTY THAT CAN BE OVERWRITTEN IN THE
// PAGE CLASS. REFER TO THE ProductClass FOR EXAMPLE
protected $title = gb_title;
// PUBLIC PROPERTY TO STORE THE CURRENT PAGE
public $page;
function __construct($page)
{
$this->page = $page;
}
function title()
{
echo $this->title;
}
// METHOD TO RETURN A PATH TO OUR VIEW FILE
// OR THE ERROR VIEW IF PAGE NOT FOUND
function get_view()
{
$view = "view/" . $this->page . '.view.php';
if (file_exists($view)) {
return $view;
}
return 'view/error.view.php';
}
// DEFAULT RENDER METHOD TO OUTPUT THE
// HTML CONTAINED IN THE VIEW FILE
function render()
{
$view = $this->get_view();
require_once($view);
}
}
?>
<div class="row">
<div class="large-12 columns">
<div class="row">
<div class="small-6 large-2 columns"> </div>
<div class="small-6 large-8 columns">
<h1>Home Page</h1>
</div>
<div class="small-12 large-2 columns"> </div>
</div>
</div>
</div>
<?php
class ProductsClass extends BasePage
{
// DEMONSTRATE HOW TO OVERRIDE THE TITLE
// WE CAN ALSO MAKE THIS DYNAMIC BY SETTING
// THIS PROPERTY IN THE CONSTRUCTOR
protected $title = "Products Page";
// CUSTOM RENDER FUNCTION DEMONSTRATING
// HOW TO SET A VARIABLE FOR USE IN THE VIEW
function render()
{
$view = $this->get_view();
$pagevariable = "Products Page";
require_once($view);
}
}
?>
<div class="row">
<div class="large-12 columns">
<div class="row">
<div class="small-6 large-2 columns"> </div>
<div class="small-6 large-8 columns">
<h1><?php echo $pagevariable;?></h1>
</div>
<div class="small-12 large-2 columns"> </div>
</div>
</div>
</div>
The above will give us a working framework that is based on a master template, a base class containing default functionality that can then be extended in subclasses for particular pages.
AddType x-mapp-php5 .php
Options +FollowSymLinks
RewriteEngine on
RewriteBase /
# REDIRECT REQUESTS FOR index.html TO OUR TEMPLATE
RewriteRule index\.html$ index.php [L,NC,QSA]
#IF THE REQUESTED FILE DOES NOT EXIST PASS THIS
#TO index.php WITH THE PAGENAME AS A PARAMETER
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule (.*)\.html$ index.php?page=$1 [L,NC,QSA]
That's it - we can now request products.html and the request will be routed to
<nav>
<ul>
<li<?php echo ($page=='home') ? ' class="active"' : '';?>><a href="index.html">Home</a></li>
<li<?php echo ($page=='aboutus') ? ' class="active"' : '';?>><a href="aboutus.html">About US</a></li>
<li<?php echo ($page=='products') ? ' class="active"' : '';?>><a href="products.html">Products</a></li>
<li<?php echo ($page=='contact') ? ' class="active"' : '';?>><a href="contact.html">Contact US</a></li>
</ul>
</nav>
We could also extend our BasePage class to include a method called route_link that renders the <li> menu items for us complete with class and href values.
function route_link($page, $class, $text)
{
$classtext = ($this->page == $page) ? ' class="' . $class . '"' : '';
echo '<li' . $classtext . '><a href="' . $page . '.html">' . $text . '</a></li>';
}
And modifying our <nav> section to look like this
<nav>
<ul>
<?php
$mainframe->route_link('home','active','Home');
$mainframe->route_link('About Us','active','About Us');
$mainframe->route_link('products','active','Products');
$mainframe->route_link('contact','active','Contact');
?>
</ul>
</nav>
Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.
Comments (4)
Commented:
Commented:
Commented:
RewriteBase / in the .htaccess file to the root folder name of you're project e.g RewriteBase /MyprojectName else it will be redirecting to the localhost/dashboard.
i hope this will help someone as this post help too.
Author
Commented: