Matthew A PriceUpdate April 14, 2013: The following sites are using this tool: http://uchooseslider.com
I have made some static webpages recently and I have been meaning to make an extremely simple template engine that will drive these sites. I always have a library of functions for getting html headers, footers and common functions, but I didn't have the template portion. Here is a very easy to implement system that allows you to make static websites that do not need databases that load very fast. It basically lets you define a set of pages and then will automatically serve the correct page from a folder. This is instead of having to make new folders and index files for each new page. I am using the Twitter Bootstrap for this example Here is the folder structure:
/css/bootstrap.css /css/bootstrap-responsive.css /img/ <!-- contains all of the site images --> /inc/min <!-- contains the minifier --> /inc/functions.php <!-- contains the php functions that drive the site --> /view/ <!-- contains all of the template files that are dynamically served --> /index.php <!-- this file determines which files to serve
View the demo here (note: the demo links that work are in the header. you can also try to put in url like '/dfgkjdf/' and you will see the 404 page) The first thing we need to to is setup some global variables that will enable the site to function
<?php
// define a list of the pages that exist on your site. these will be the page slugs
$PAGE_ARRAY = array(
'home','about','contact'
);
$URI = $_SERVER['REQUEST_URI'];
$PAGE_TO_SERVE = preg_replace( '///', '', $URI );
define( 'PAGE_TO_SERVE', $PAGE_TO_SERVE ); // Get current page slug
?>
Next we need to setup some functions that load the site's header and footer. There are two functions in here that will be explained after the header and footer (load_css() and load_javascript())
function display_header() {
global $PAGE_ARRAY;
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<?php load_css(); ?>
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
.sidebar-nav {
padding: 9px 0;
}
</style>
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<p class="navbar-text pull-right">
Logged in as <a href="#" class="navbar-link">Username</a>
</p>
<ul class="nav">
< // loop over each page created in the global to create the li's for the navigation >
<?php foreach ( $PAGE_ARRAY as $page ) : ?>
<li<?php echo ( PAGE_TO_SERVE == $page ) ? ' class="active"' : ''; ?>><a href="<?php echo ( $page == 'home' ) ? '/' : '/' . $page . '/'; ?>"><?php echo ucfirst( $page ); ?></a></li>
<?php endforeach; ?>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<?
}
function display_footer() {
load_javascript();
?>
<div class="container" id="footer">
<p><?php echo date( 'Y' ); ?></p>
</div>
</body>
</html>
<?php
}
So there are two functions in there that output the CSS and Javascript. My code uses Minify to server as few requests as possible.
function load_css() {
$css = array(
'/css/bootstrap.css',
'/css/bootstrap-responsive.css',
'/css/application.css'
);
?>
<link id="template-styles" rel="stylesheet" media="all" href="/inc/min/index.php?f=<?php echo implode( ',', $css ); ?>">
<?php
}
function load_javascript() {
$javascript = array(
'/js/jquery.js',
'/js/bootstrap.js',
'/js/scripts.js'
);
?><script id="template-scripts" src="/inc/min/index.php?f=<?php echo implode( ',', $javascript ); ?>"></script>
<?php
}
Now that we have the main php library of of functions written, we can attack the index.php file at the root that controls what template to serve. This file will serve template files within a "view" folder. Your urls will not show the "view", it is just a folder where to store the templates.
<?php
// go and get the functions file
require $_SERVER['DOCUMENT_ROOT'] . '/inc/functions.php';
// declare the page array global
global $PAGE_ARRAY;
// if there is a page to serve then we need to figure out which one
if ( PAGE_TO_SERVE ) :
// before we just go and serve anything we want to make sure that the page exists and is in the array of defined pages
if ( in_array( PAGE_TO_SERVE, $PAGE_ARRAY ) ) :
// if it is, then we can go to the view folder and grab the file that bears the same name
require $_SERVER['DOCUMENT_ROOT'] . '/view/' . PAGE_TO_SERVE . '.php';
else :
// otherwise serve the 404 page from the view folder
require $_SERVER['DOCUMENT_ROOT'] . '/view/404.php';
endif;
else :
// if there is no page to serve, then we are on the homepage. in this case go get the "home.php" file
require $_SERVER['DOCUMENT_ROOT'] . '/view/home.php';
endif;
?>
So now here is an example of a template file. It calls the display_header() and display_footer() functions
<?php display_header(); ?>
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">
<!-- Sidebar here -->
</div>
<div class="span3">
<!-- Static Content Here -->
</div>
</div>
</div>
<?php display_footer(); ?>
That's it! You can definitely go ahead and create a display_sidebar() function, or anything else you need and just place it in the functions.php file. Download source files from GitHub Repository
^