Need more organization? Make a template-focused site! – Part 2

When we last left off, our site was equipped with a simple templating system. Of course, the benefits mentioned in part 1 are not yet achieved. That’s why our venture must continue to build the ideal template-focused site.

Issue: DRY Coding

In our main processing file, index.php, you may have noticed that we don’t yet follow the DRY (don’t repeat yourself) coding paradigm. That is, when we make multiple files, parts of the page such as our navigation, sidebar, header, and footer remain constant, but our pages reuse code. For example, consider the following unordered list navigation:

<ul>
	<li><a href="/">Home</a></li>
	<li><a href="/about">About</a></li>
	<li><a href="/portfolio">Portfolio</a></li>
	<li><a href="/gallery">Gallery</a></li>
</ul>

Using our previous system, each page that you make would have to include the code above. This defeats the purpose of the template; rather than saving you code, it makes you write more. Thus, we need to make a few changes.

Solution

Because everything is redirected through index.php, why not just create a few auxiliary files and include them? For example, we can create a header.php, sidebar.php, and footer.php. Consequently, by including them in index.php, the problem is solved:


<?php include_once( 'header.php' ); ?>

	<div id="main">
		<?php
			$request = isset( $_GET[ 'cur' ] ) ? $_GET[ 'cur' ] : 'home';

			$pathToFile = dirname( __FILE__ ) . '/pages/';
			$fullPath = $pathToFile . $request . '.php';

			if( file_exists( $fullPath ) )
				require_once $fullPath;
			else
				require_once $pathToFile . '404.php';
		?>
	</div>

	<?php include_once( 'sidebar.php' ); ?>

<?php include_once( 'footer.php' ); ?>

Note that div#main is just a container for the content.

How to Organize the Change

So, what should header.php, sidebar.php, and footer.php contain? Well, if you’ve ever used WordPress, which has a very similar structure, you probably know without an explanation. Regardless, consider the following site layout (click on the image to view it at full size):

This can be easily split up like so:

So, our header.php, sidebar.php, and footer.php would look something like this:

header.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>Page Title</title>

	<!-- styles -->
	<link rel="stylesheet" href="css/styles.css" type="text/css" media="screen" />
	<link rel="stylesheet" href="css/more-styles.css" type="text/css" media="screen" />
</head>

<body>

	<div id="wrapper">

sidebar.php:

<div id="sidebar">
	<!-- sidebar content here -->
</div>

footer.php:

	<div id="footer">
		<!-- footer content here -->
	</div>
</div> <!-- end content -->

	<!-- script files -->
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
	<script type="text/javascript" src="js/script.js"></script>

</body>
</html>

Benefits

So, what was the benefit of all that? Well, instead of having a huge about.php file that is a page on its own, all you need now is:

<h1>All About Us!</h1>
<p>This page contains information all about us!</p>

<!-- more content -->

How simple is that? Our template now takes full advantage of the DRY coding paradigm!

Just as the saying goes, content is king. With this template running your site, that’s all you’ll ever need to focus on!

Join us next time when we continue constructing this template-focused site! If you have any comments, suggestions, or concerns, please leave us a comment below!

Leave a Reply

Need more organization? Make a template-focused site! – Part 2