Site Construction Made Simple(r)

superterran.com · ~2002–2003 · my first big tutorial — PHP includes, before I knew everyone already did it

This was the one I was proudest of. “Site Construction Made Simple(r)” was the flagship of the “volumes of tutorials” on superterran.com — my pitch for why you should stop hand-copying your HTML interface into every single page and let PHP includes assemble it for you. The page itself was rendered by my own homemade engine, superterran Fussion 1.3 (yes, “Fussion”). Reproduced here in full, in my own 2002 voice.

Most sites are done with tables in html. Most newbies (and vets) make the interface and then modify that interface per page, making many html files with mostly identical code. This has many obvious problems, like if you want to update a link, you have to go threw every page and modify it accordingly… Annoying. The answer that most people come up with to fix it is to quit on their site. But, there’s hope.

PHP is a fairly simple coding language that has many uses. In this tutorial I am going to teach you how to build a simple interface by using PHP to assemble many html files in to one interface.

Please note that the server you’re using MUST support PHP or this will not work.

Lets make a simple table so I can show you how this will work:

<HTML>
<HEAD> <TITLE>template site</TITLE></HEAD>
<BODY>

<table width="98%" border="1" bordercolor="#000000" cellspacing="0" cellpadding="2">

<tr>
  <td colspan="2" bgcolor="#c0c0c0" align="center"><b>
  welcome to yoursite
  </td>
</tr>

<tr>
  <td width="20%">
  side bar<br><br>
  <ul>
  <li>selection 1
  <li>selection 2
  <li>selection 3
  <li>selection 4
  <li>selection 5
  <li>selection 6
  </ul>
  </td>

  <td width="80%" valign="top"><br>
  <p> site content goes here. </p>
  </td>
</tr>

<tr>
  <td colspan="2" bgcolor="#c0c0c0" align="center">
  some footer stuff here
  </td>
</tr>

</table>
</BODY>
</HTML>

Now, the goal is to split this up in to several different php files. This is really easy. Just split this up in to relevant section ‘blocks’. For example:

header.php

<HTML>
<HEAD> <TITLE>template site</TITLE></HEAD>
<BODY>
<table width="98%" border="1" bordercolor="#000000" cellspacing="0" cellpadding="2">

top.php

<tr>
  <td colspan="2" bgcolor="#c0c0c0" align="center"><b>
  welcome to yoursite
  </td>
</tr>
<tr>

side.php

  <td width="20%">
  side bar<br><br>
  <ul>
  <li>selection 1
  <li>selection 2
  <li>selection 3
  <li>selection 4
  <li>selection 5
  <li>selection 6
  </ul>
  </td>

body.php

  <td width="80%" valign="top"><br>
  <p> site content goes here. </p>
  </td>

footer.php

<tr>
  <td colspan="2" bgcolor="#c0c0c0" align="center">
  some footer stuff here
  </td>
</tr>
</table>
</BODY>
</HTML>

This puts all the sections that make the interface in separate files. To assemble the interface, we will use some basic php. Put this text in a html or php file, such as assemble.php:

<?
Include("header.php");
Include("top.php");
Include("side.php");
Include("body.php");
Include("footer.php");
?>

The <? and ?> tells the server to run php code. The include function tells the server to add the code in that file to the code in the file its running (in our case assemble.php). This way the files are easily manageable. If you run that script, you will see that it looks just the same as the original html file did. Pretty nifty eh?

You can take this farther. If you want to add extra content, make another page (for example home.php) and place the body of the page in there… Then all you have to do is replace the body.php inside the include tag with home.php, and save that version of assemble.php to something else.

I’m going to take this one step further, then your on your own. You don’t want all your pages to have the same title do you? At the top of assemble.php, include this within the <?:

$title = "whatever I want the page title to be";

…and open header.php and modify it to mirror this:

<HTML>
<HEAD> <TITLE><? Echo($title); ?></TITLE></HEAD>
<BODY>
<table width="98%" border="1" bordercolor="#000000" cellspacing="0" cellpadding="2">

See the echo tag up there? The $title is a variable. This variable gets passed to the header.php where it gets caught by the echo statement and placed in to the code.

One little tip since you are new to this: if your side bar has a lot of content and you don’t want the entire side bar on every page, split the side bar code into other php files too, and use include to build whatever side bar you want for whatever section of the site you’re working on. This way you can have customized sidebar content to complement your page.

Using these simple concepts will vastly increase your productivity, decrease your coding errors and preserve your sanity as a html coder. You can take this and expand it to be almost a full-blown content management system. My site for example (hate to plug but I think it’s a necessary evil) http://www.superterran.com has basically taken the above concept and expanded it to a full-blown site rendering system using basic PHP and html.

I hope this helps somebody out. I had to figure it out myself, then people said “well no duh Superterran! That’s how everybody does it!” when I would try and brag about it. Well, that’s a lie. Only matured and experienced coders do it like that, or closely related.

— Superterran

(Originally served by “superterran Fussion 1.3 — Superterran Web Dev.” The page-title variable name was lost in the archived copy and reconstructed here as $title.)