GNS | Tutorial #001

Tutorial One | HTML → PHP

Introduction

Welcome! For those of you stumbling onto this page, this is the first in a series of articles where I walk through creating a simple website for a fictional friend of mine. We will start with the complete HTML source for the index page, and then analyze it to determine which parts can be repeated in our other pages. Then, we will create a dynamically -generated PHP index page from the original HTML source.

• index.html

So, let us get this party started, right? Okay! What you see below is the HTML of our friend Louie's index page. It's not too fancy. Take a look here, then come back and read the next section.


		<!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">

		<head>

		   <link rel="Stylesheet" type="text/css" href="design-by-louie.css" media="screen" />

		   <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

		   <title>Design by Louie | Home</title>

		</head>

		<body>

		   <div id="header">

		      <a href="index.html">

		         <img alt="" src="images/louie-logo.png" />

		      </a>

		   </div>

		   <div id="bodytext">

		      <div>

		         <p>

		            <span class="de1">DESIGN</span><span class="de2"> | by Louie™</span>.
 
		            Creating custom, clean imagery for everyone. Bold, but understated. Bright, not flashy. Set your 

		            brand apart from a sea of monotonous look-alikes. Get <span class="de1">DESIGN</span>ed.

		         </p>

		      </div>

		      <div id="navigate">

		         <ul>

		            <li>

		               <a href="stock-images.html">

		                  <img alt="" src="images/stock.png" title="Browse Louie's pre-made imagery." />

		                  <br />Stock Imagery...

		               </a>

		            </li>

		            <li>

		               <a href="custom-design.html">

		                  <img alt="" src="images/custom.png" title="Request a custom design." />

		                  <br />Custom Design...

		               </a>

		            </li>

		            <li>

		               <a href="about.html">

		                  <img alt="" src="images/louie.png" title="Learn more about Louie." />

		                  <br />Louie is...

		               </a>

		            </li>

		         </ul>

		      </div>

		   </div>

		   <div id="footer">

		      &copy; 2008. All rights reserved. 

		      <small>•</small> Last Update: May 5 2008.
 
		      <small>•</small> <a href="">Valid XHTML</a>

		   </div>

		</body>

		</html>

Not bad, eh? Louie is a minimalist. He likes things simple. As you can see, he has created zones in his code with ID'd <div> tags, to separate the page into sections he can style separately. The header div will contain his site logo, which he has also made a link back to the index page. That is very common, since it gives our visitors a fail-safe way of getting back to the first page. Next, he defined a zone for the page content. Lastly, we see he has created a footer zone, where he can place his copyright information, the date this page was last modified, and a link to the W3C code validator.

Also, those of you with keen eyes may have noticed that there is some extra info within the <head> tag. I will cover that in later tutorials, or you can go here if you want to read what I have to say about CSS. Basically, it is a link to an external cascading stylesheet.

Analyze the Code

So, let's think about this page for a minute. What do we see that we will probably be able to reuse on the other pages? Hmm...

Well, we know that all that nice stuff above the bodytext div tag will be the same on every page, with the exception of the title. So let's snip that and place it in another file.

What else? We definitely know we will be re-using the code from the footer div on down, so snip that into another file...

And I would say that is it. You could argue that we need to make a separate file for the section surrounded by the navigate div tag. But... this specific setup will only be used on the index page. As you will see in later tutorials, the other pages will employ a similiar, but smaller, version of that menu.

So what do we have now? Look:

• Snipped sections


						<!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">

						<head>

						   <link rel="Stylesheet" type="text/css" href="design-by-louie.css" media="screen" />

						   <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

						   <title>Design by Louie | Home</title>

						</head>

						<body>

						   <div id="header">

						      <a href="index.html">

						         <img alt="" src="images/louie-logo.png" />

						      </a>

						   </div>


						   <div id="bodytext">

						      <div>

						         <p>

						            <span class="de1">DESIGN</span><span class="de2"> | by Louie™</span>.
 
						            Creating custom, clean imagery for everyone. Bold, but understated. Bright, not flashy. Set your 

						            brand apart from a sea of monotonous look-alikes. Get <span class="de1">DESIGN</span>ed.

						         </p>

						      </div>

						      <div id="navigate">

						         <ul>

						            <li>

						               <a href="stock-images.html">

						                  <img alt="" src="images/stock.png" title="Browse Louie's pre-made imagery." />

						                  <br />Stock Imagery...

						               </a>

						            </li>

						            <li>

						               <a href="custom-design.html">

						                  <img alt="" src="images/custom.png" title="Request a custom design." />

						                  <br />Custom Design...

						               </a>

						            </li>

						            <li>

						               <a href="about.html">

						                  <img alt="" src="images/louie.png" title="Learn more about Louie." />

						                  <br />Louie is...

						               </a>

						            </li>

						         </ul>

						      </div>

						   </div>


						   <div id="footer">

						      &copy; 2008. All rights reserved. 

						      <small>•</small> Last Update: May 5 2008.
 
						      <small>•</small> <a href="">Valid XHTML</a>

						   </div>

						</body>

						</html>

And now for the Maaaa-gic!

First, we need to save each of these files. I like to use obvious names. Also, each file is now saved as a .php file, which yields the best results for ensuring our php code is parsed correctly. So, we should now have: header.php, index.php, and footer.php.

And the page title?

We can take care of that issue with a simple PHP trick. First, we add a PHP zone to the top of the index.php page. Add a PHP start tag, like this: <?php, and an end tag, like so: ?>. In between we put this code: $page_title=DESIGN by Louie | Home. To wrap up our site surgery, go back to our header.php file, and where we see the text for the page title (the <title> tag), we replace that text with this: <?php echo($page_title); ?>.

• Snipped Section, with added PHP


        					<?php

						   $page_title=DESIGN by Louie | Home; 

						?>


						<!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">

						<head>

						   <link rel="Stylesheet" type="text/css" href="design-by-louie.css" media="screen" />

						   <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

						   <title> <?php echo($page_title); ?> </title>

						</head>

						<body>

						   <div id="header">

						      <a href="index.html">

						         <img alt="" src="images/louie-logo.png" />

						      </a>

						   </div>

				
						   <div id="bodytext">

						      <div>

						   ...


						   ...

						      </div>

						   </div>

The last step is really quite simple. Simply add the php include directive to index.php whereever we want insert our new php files. Like so:

•Finished Product: index.php

	
        					<?php

						   $page_title=DESIGN by Louie | Home; 

						?>


						<?php include('includes/header.php'); ?>

						

						   <div id="bodytext">

						      <div>

						         <p>

						            <span class="de1">DESIGN</span><span class="de2"> | by Louie™</span>.
 
						            Creating custom, clean imagery for everyone. Bold, but understated. Bright, not flashy. Set your 

						            brand apart from a sea of monotonous look-alikes. Get <span class="de1">DESIGN</span>ed.

						         </p>

						      </div>

						      <div id="navigate">

						         <ul>

						            <li>

						               <a href="stock-images.html">

						                  <img alt="" src="images/stock.png" title="Browse Louie's pre-made imagery." />

						                  <br />Stock Imagery...

						               </a>

						            </li>

						            <li>

						               <a href="custom-design.html">

						                  <img alt="" src="images/custom.png" title="Request a custom design." />

						                  <br />Custom Design...

						               </a>

						            </li>

						            <li>

						               <a href="about.html">

						                  <img alt="" src="images/louie.png" title="Learn more about Louie." />

						                  <br />Louie is...

						               </a>

						            </li>

						         </ul>

						      </div>

						   </div>

						

						<?php include('includes/footer.php'); ?>

While not necessary, it is common practice to place our partial files in a separate directory, which is normally given the name includes. This helps make sure that a user couldn't accidently navigate to those files, which could happen if they are left in the root directory.

The Wrap Up

Hopefully, if I have been clear enough, you were able to follow along with this tutorial. We started with a nice, valid XHTML file, and were able to reduce it to it's unique parts. Employing this same technigue on every page that follows, we should be able to create a easily-maintained, dynamic web site. I encourage you to leave comments below, and above all, ASK QUESTIONS!