Currently Browsing: Home » Need more organization? Make a template-focused site! – Part 2

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.

Building a 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):

Site Layout

This can be easily split up like so:

Site Layout Split Up

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="http://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!

This entry was posted on Wednesday, December 23rd, 2009 at 05:00:58. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply

Want to be notified when someone replies? Subscribe to this post's comment RSS feed.
Any field marked with a * is required.