» Project “Ragtime”: your first PHP site ♣ php.w3clubs.com

Project “Ragtime”: your first PHP site

How about you take what you've learned so far since the beginning of this PHP tutorial and build your first PHP site? Let's see how.

Project "Ragtime"

Imagine the following scenario: your girlfriend's parents run a tire store. You think it's a shame that they don't have a website yet and (without even being asked) you volunteer to create a simple "business card" type of site for them. This will help you practice your PHP skills but also help you earn Her parents' respect, so that you have a better shot when you ask her hand in marriage. Ah, and the company name is Ragtime, hence the project name.

Basic site

The site you think about coding will have 4 pages - index (home) page, products page, contact information and "about us". You can create 4 static interlinked HTML pages and call it a day. And what if your girlfriend's parents like what you've done, but decide they want to add another page? Well, in this case you'll have to create the new page but also update all of the existng pages, adding a link to the new page. This is tedious, especially if it starts happening on regular basis. Let's see how PHP can help.

Includes to the rescue

You'd want to have all the repeating parts of the code (namely header, footer and menu) in separate files and just include them in the pages. This is much better than copy-pasting repeating HTML code. Also this way if you want to add a new page, you create the page and update only one file - the menu include. As for creating the page, actually you only need the content part, since the header and footer parts are the same and they come "for free" with the include files.

The files you'll have are the four pages and the three includes.

index.php - Homepage
products.php - Products page
aboutus.php - About us page
contact.php - Contact info page
header.inc.php - The header, common include
footer.inc.php - The footer, common include
menu.inc.php - Navigation menu, include

Apart from the PHP code there's also the CSS stylesheet - ragtime.css.

Live demo

Before we start looking at the individual files, here's a live demo of the final result.

The includes

header.inc.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
  <title>Ragtime</title>
  <link rel="stylesheet" href="ragtime.css" type="text/css" />
</head>
<body>

<?php
include 'menu.inc.php';
?>

<div id="content">

As you can see the header includes the common menu file, this makes it a little easier, so each page needs to include only header and footer.

footer.inc.php

Really nothing special here, only closing the tags that were opened in the header.inc.php

</div>

</body>
</html>

menu.inc.php

The menu is only an unordered list of links.

<ul id="menu">
  <li><a href="index.php">Home</a></li>
  <li><a href="products.php">Products</a></li>
  <li><a href="contact.php">Contact Us</a></li>
  <li><a href="aboutus.php">About Us</a></li>
</ul>

The pages

All of the pages include the header and the footer and contain the actual text for the page.

index.php

<?php
include 'header.inc.php';
?>

<h1>Welcome to Ragtime!</h1>

<p>Select a link from our nice menu</p>

<?php
include 'footer.inc.php';
?>

products.php

<?php
include 'header.inc.php';
?>

<h1>Products</h1>

<p>Check out our wide selection of tires. We have:</p>
<ul>
  <li>Winter tires</li>
  <li>Summer tires</li>
  <li>All-season tires</li>
</ul>

<?php
include 'footer.inc.php';
?>

contact.php

<?php
include 'header.inc.php';
?>

<h1>Contact us</h1>

<div id="hcard-Ragtime" class="vcard">
 <a class="url fn" href="http://www.ragtimebg.com">Ragtime</a>
 <div class="adr">
  <span class="locality">Sofia</span>,
  <span class="country-name">Bulgaria</span>
 </div>
 <div class="tel">1-888-123-4567</div>
</div>

<?php
include 'footer.inc.php';
?>

As a side note - if you wonder why I used all these class names - well, this page is using the hCard microformat

aboutus.php

<?php
include 'header.inc.php';
?>

<h1>About us</h1>

<p>This is the "about us" page, always very popular place.</p>

<p>Our company was found in year 1467 by ...</p>

<?php
include 'footer.inc.php';
?>

Download

Pretty straightforward, eh? Very simple, yet could be a huge time-saver compared to creating large numbers of static HTML files.

Here's a zip file with all the files if you want to play with the code - Project "Ragtime": your first PHP site.

This entry was posted on Sunday, August 10th, 2008 and is filed under PHP Tutorial. 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.

« to the PHP tutorial table of contents

♣ php.w3clubs.com