You are here: Home > Useful Guides > Step 3) Creating The Files - Part 1

Step 3) Creating The Files - Part 1

Tuesday, 02 September 2008

Step 3 will be split into 3 sub-steps. Firstly, I've going to take a look at the basic template system I'm going to use together with the basic pages required. Next I'll look at populating the stylesheet and starting work on a basic template. Finally, I'll look at the htaccess file and robots.txt file, together with the code on the crucial pages.

So, let's delve into the overall directory layout.
 
Folders

Create a master folder on your computer. This will contain all the relevant files required. In it, create an "images" folder and an "includes" folder. Your images folder will be home to your recipe images and your includes folder will be home to all the template sub-components.

Create a file called "index.php" within images.php. Edit it so it reads:

<?php
header("Location: /");
?>
This means that when index.php is executed, the page redirects to your site's home page. Why bother? Well some servers don't have decent directory protection so if someone comes along and types in yourdomain.com/images/, they'll see all your images. Not a major security risk but it is in your includes folder, so copy index.php to your includes folder too.

So what else goes into this includes folder? You'll need 3 other files:
  • head.php
  • foot.php
  • connect.php
Head will be all the template information before the page content (i.e. the basic HTML <head> info). Footer contains all the bits beneath the content and Connect contains the database connection details.

The database connect occurs outside of the header file as we'll need some database info to generate the page.

Here's the content required for each file.

connect.php
<?php
$host = "localhost";
$database = "databasename";
$user = "username";
$password = "password";
$connection = @mysql_connect($host,$user,$password) or die(mysql_error);
$db = @mysql_select_db($database,$connection) or die(mysql_error);
?>
head.php
<?php
echo "<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>";
echo "<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>";
echo "<head><meta http-equiv='content-type' content='text/html; charset=iso-8859-1'
/>";
echo "<title>".$pagetitle."</title>";
echo "<meta name='description' content='".$pagedescription."' />";
echo "<meta name='keywords' content='".$pagekeywords."' />";
echo "<link rel='stylesheet' type='text/css' href='/style.css' />";
echo "<link rel='alternate' type='application/rss+xml' title='RSS' href='/rss.php'
/>";
echo "</head><body><div id='wrapper'>";
echo "<div id='head'></div>";
echo "<div id='content'>";
?>
foot.php
<?php
echo "</div>";
echo "<div id='foot'>";
echo "<p>&copy; ".date("Y")."</p>";
echo "<p><a href='/terms-and-conditions.html' title='Terms' rel='nofollow'>Terms</a> | <a
href='/disclaimer.html' title='Disclaimer' rel='nofollow'>Disclaimer</a> | <a
href='/privacy-policy.html' title='Privacy Policy' rel='nofollow'>Privacy</a> | <a
href='/contact.html' title='Contact'>Contact</a></p>";
echo "</div>";
echo "</div>";
echo "</body></html>";
?>
There's a few pages you'll need to setup in your main directory. For the time being, use the following content in all the files:
<?php
include "includes/head.php";
echo "page to follow";
include "includes/foot.php";
?>
Use this for all the following pages in your root directory:
  • index.php
  • category.php
  • recipe.php
  • terms-and-conditions.php
  • disclaimer.php
  • privacy-policy.php
  • contact.php
  • rss.php
  • 404.php
Also create blank files called:
  • style.css
  • robots.txt
  • htaccess.txt
That's it! Phew!

Here's what we've done. We've created a set of empty files ready for code and/or content. We've set up a basic file structure template using head.php and foot.php together with style.css to control the look and feel of the site. Finally, we've prepared the site ready for a database connection.

Next we'll look at introducing some CSS techniques to control the overall feel, whilst starting to look at SEO tips early on in the build. Some would recommend leaving the CSS until the end but I would prefer to do it all as we go along, simple because it's easier to make small changes throughout than bigger changes at the end.

Go and grab a cup of coffee and chill!

Bookmark Bookmark this article in Bumpzee, Del.icio.us, Digg and Stumble Upon
Technorati Technorati tags: , ,

You may also be interested in reading:

CommentsCare to Comment?

Comments are manually approved and hence can a while to appear. Questions, informative posts, and feedback comments are gladly accepted. Spam is deleted. Spam-type comments have their links removed (Comment Policy)