Chapter 17: Creating Web Pages With PHP

Chapter 17:
Creating Web Pages With PHP

Making Dynamic Web Pages

I'll define dynamic pages as those that can look different each time they appear on a visitor's monitor. There can be any number of reasons why they are different. The point is that they do. If you're providing content that changes often, you don't really want to rewrite pages every time the content changes, do you? Why not store the content in text files or a database and let a script construct a new page from it. Now you just update the database or upload a new version of the text file and your pages are automatically made current.

Let's suppose that you have a page describing your newsletter. It may have a link to a file containing your most recent issue. This link might also call a script that creates an HTML page with all of your content plus any banners or ads that you'd like to display. The script might call another script that rotates the banners. Now you can display a page with a random banner, your current content and any graphical enhancements that make your page more attractive and interesting. Perhaps you'll use a script to insert the Photo of the Day.

Affiliate pages

Now let's personalize it. Let's say you run an affiliate program. Your affiliates have their own personalized links to your sales and order pages. They will probably look similar to this:

http://www.goodstuff.com/details.html?id=4609

The variable $id will be created automatically and its value is 4609.

Since we started with an affiliate link, the affiliate ID must be important, right? What you probably want to do is use the ID to make sure the right affiliate gets credit for the sale. This is usually done by including it in the order form as a "hidden" field. It's not all that well hidden; it just doesn't appear on the page. Unless your code is encrypted anyone can see it by using View->Source.

Let's look at how this is done. Here's a small form that we'll use as an example:

<form action="order.php">
<table>
<tr><td>First Name:</td><td><input type="text" name="fname"></td></tr>
<tr><td>Last Name:</td><td><input type="text" name="lname"></td></tr>
<tr><td>Email:</td><td><input type="text" name="email"></td></tr>
<tr><td> </td><td><input type="submit" name="submit" value="I Want It Now!"></td></tr>
</table></form>

Copy and paste this code into file1.php and view it. As you can see, it asks for the customer's first name, last name and email address. These items of information will be passed to the script "order.php." But it doesn't pick up the affiliate ID. Let's fix that now. Edit the form on file1.php to this:

<form action="order.php">
<input type="hidden" name="aid" value="<?php echo "$id"; ?>">
<table>
<tr><td>First Name:</td><td><input type="text" name="fname"></td></tr>
<tr><td>Last Name:</td><td><input type="text" name="lname"></td></tr>
<tr><td>Email:</td><td><input type="text" name="email"></td></tr>
<tr><td> </td><td><input type="submit" name="submit" value="I Want It Now!"></td></tr>
</table></form>

When someone visits the page by clicking on an affiliate link, the affiliate ID is captured and added to the form as a hidden field. It will then be passed to order.php when the button is clicked. Now we're getting somewhere. But suppose your visitor has arrived directly at http://www.goodstuff.com/details.html. There's no affiliate ID to capture and the hidden field would have an empty value.

Depending on how order.php works, this might be a problem. Or you might want to have a special affiliate ID for non-affiliate orders. Just use the same trick as before to pass a default ID. Add this line anywhere above the form so that it will be processed before the form gets displayed:

<?php if ($id == "") {$id = "direct";}?>

Now the value of aid will be set to "direct" by default. You can set it to a number or whatever you prefer. I'm not telling you what to do; I'm just showing you how to do it.

Save time by reducing your workload

Let's first consider a really scary example. Suppose you have a 200-page website and every page is a separate HTML file. My guess is that most of the pages have a lot in common. They probably have a header and footer section that's the same on every page. They might also have a set of navigation links or buttons as well.

In ancient times (or as recently as last week) you might have used a template to make new pages. You'd load the template which had a blank content area into your editor. Add the content for that page and save it with a new file name. Then you'd upload the new page. Sounds easy enough but there's a hidden problem.

What do you do when you have to change something on all 200 pages? What if you've moved and you have to update the physical address shown in the footer of each page? Ouch! Worst case scenario: you load the pages into your editor one at a time and make the changes. Then you have to upload all the updated pages. That's way too much work!

Better option: you load all the pages into EditPlus or any editor with global search-and-replace capability and edit them all at once. That's better. But what if you missed a few pages? You run the risk of having some of your pages show the old address. That's not good at all.

Best way: let PHP do the work for you. How, you ask? It's done by using the incredible power of the "include()" function. There's two basic scenarios here. One would be to develop a brand-new site and avoid this problem from day one. The other would be to fix the problem on an existing site. I've done it both ways and I recommend the first scenario whenever possible!

PHP scenario #1 First, design your template in HTML. Get the exact look and feel you want. If you plan to use some JavaScript on every page, be sure to put it in at this stage. Resist the temptation to add any content to the page, unless you want it to be on every page. Just make a page that has a place left blank for all the unique content to be added later.

If your page template is well-designed, there's going to be a section at the top with your graphic header and your mission statement or tag line. There will be a section at the bottom with your contact information and probably a set of plain text links. There will often be a set of links on the left side of the page between the header and footer sections.

I find it helpful to put just a tiny bit of "throwaway" content in the area where the real content will be placed and use HTML's "comment" tags to put in markers that remind me exactly where the unique content goes. My code looks like this:

This is where the real content goes...

Save this file as template.html in the folder where you'll design the web site. Make a backup copy of it in case you mess up the original! Be sure you create a folder for your images, and name it "images" or whatever the real image folder will be named. You need to be able to create pages without having to go back and change folder names in the image links. You also need to be able to preview your template before you upload it to a web server.

In general, the template is where you'll do your hardest and (hopefully) best work. But even if you're not 100% pleased with the results and the whole web site needs a new look (or even a small tweak here and there), it won't be very hard to fix.

Previous Page Table of Contents Next Page