Create a better HTML website

       1583 words, 8 minutes

We’ve recently seen how to create your corporate HTML website with only a few static pages. In fact, you may use this technics to create any website.

If you already read the previous article, you might remember that there is a small issue with dynamic content. As every pages where simple modified copies of each other, any modification in the common content has to be duplicated in every pages. This time, we’re gonna see how to solve this issue by using a include feature. This will require a bit a programming ; but I’ll try to use as much as possible and to explain far enough so that anyone can use it.

Overview

You may start reading the “What is PHP? ” and “What can PHP do? ” articles. This will give you a brief overview of the technical tool we are going to use.

What you must know about PHP is:

Among the differences between basic HTML and PHP, there is the file extension you will use. HTML pages have a .html extension. PHP pages usually have a .php extension. Pages mixing HTML and PHP code also have .php extension, most of the time.

In the HTML code, you shall surrender the PHP code with special tags so that the server knows it has to process the code in a special manner. In your pages, you will have ` for each blocks of PHP commands.

That’s all for the theory. Now let’s practice.

Switching to a much dynamic Web site

Check the PHP installation

In this article, you will need a PHP-enabled server zone. Either subscribe a hosting space, check if your Internet provider offers you a Web zone to play with or install a server bundle on your workstation. The server bundle is what is mostly referred as LAMP (Linux, Apache, MySQL, PHP) and provides a Web server (Apache) with database (MySQL) and programming language (PHP) on your operation system (Linux). If you have a Windows operation system or a Mac, you can find the equivalent systems : WAMP and MAMP.

I won’t detail how to install the *AMP software. Just read their manual, download and run the installer. ‘Shouldn’t be harder than this.

So you now have you PHP zone. Let’s see if it works.
Create a file containing the following code:

<?php echo "Hello World!"; ?>

Name it “test.php”, upload it to your hosting zone and browse it. If you see a white page with a “Hello World!” sentence, then you’re ready for PHP. If not, your hosting zone is not PHP-aware.

How we’ll use PHP

We are going to use two features of PHP. The file inclusion and the variables parsing.

The file inclusion will be used to “import” files inside another ones. This allows to have bits of the website (menu, various content, news…) in separate files and “create” a Web page using those contents. Various pages can use those contents in different manners. But you only have to modify the resource once and every pages will see the modifications.

The variable parsing will allow a single page to include various content depending on the parameter you use. This means that you won’t have an index, a contact, an about, etc pages but only one page that will decide what to display according to a parameter it is given. Once again, this simplifies the template and content management as you will only have one HTML page.

Split the content

Copy your previous index.html page and name it index.php.
Browse it and you’ll see nothing changed yet.

Now copy the whole <div id="links"> section from your index.php and paste it in a file named “links.php”. Then, replace the “links” section from the index.php by the following code <?php include_once "links.php"; ?>.

As a detailed example, here’s what links.php looks like:

<div id="links">
<ul>
        <li><a href="/cws/index.html">Home</a></li>
        <li><a href="/cws/about.html">About us</a></li>
        <li><a href="/cws/services.html">Services</a></li>
        <li><a href="mailto:joel@carnat.net">Contact us</a></li>
</ul>
</div>

And here’s what the index.php looks like:

(...)
    <div id="header">
      <div id="logo">
        <h1><a href="http://www.tumfatig.net/">TuM&#39;Fatig</a></h1>
        <h4>IT for the masses</h4>
      </div>
      <?php include_once "links.php"; ?>
    </div>
(...)

If you now browse to your index.php URL, you should see the same results as previously. If so, were are nearly ready for phase 2 : variable parsing.

Repeat the same “split” operation for every content of your website. In my example, I’ll create a home.php, a about.php and a services.php file. Each of those file will only content the main text to be displayed. Here’s a sum’up of the modifications.
The home.php file:

<h2>Corporate Website example</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam urna est,
porta vitae congue vitae, pretium eget tellus. Vestibulum elementum sapien a
turpis interdum nec placerat dolor facilisis. Nullam justo eros, ultricies eget
posuere sed, iaculis non tortor. Phasellus justo nisl, blandit id tempus eu,
tincidunt ac odio. Etiam nibh urna, commodo in hendrerit nec, placerat ac odio.
Phasellus laoreet, ligula non facilisis tincidunt, erat lacus dictum urna,
vitae congue mauris metus a risus. Duis sit amet lorem eget tellus rhoncus
pretium eget et ipsum. Morbi pretium convallis mi. Etiam quis arcu sed magna
tincidunt rutrum. Pellentesque condimentum, elit ut aliquam tincidunt, turpis
justo tincidunt nibh, tincidunt dapibus nisi turpis in mi.</p>
<br />

The about.php file:

<h2>About us</h2>
<p>TuM&#39;Fatig is my personnal website. This is a place where I write down
all the g33k stuff I do. It mainly deals with Free Software because what I like
to do is check what can be done with having to get an expensive peace of
software. If you read and like what I do, don&#39;t hesitate to leave a comment
on the main website section and share it.</p> 
<br />

The services.php file:

<h2>Services</h2>
<p>TuM&#39;Fatig is not a real company. It doesn&#39;t provide any services.
It&#39;s only there to demistifiate IT stuff. Computer things seem quite
frightening to many people. What we offer here is a bunch of articles that
users can do things with. Should you have some questions about how to do things
with your computer, you shall e-mail me and ask for it. If the subject looks
interesting and I have time for it, I shall write an article about it.</p> 
<br />

Then you may do the same thing with the “news” section. This would allow to only update a single news.php file available from the whole site.

From this point, you shouldn’t be able to see any difference if browsing from index.php. But you can try browsing directly to the various .php and you should see their individual content appearing as basic HTML text.

Assemble the puzzle

You have every bits of content splitter in various individual files. Now it’s time to have the main page deal with those bits.

First thing we’ll do is modify the menu so that it calls the various bits. This is done by using PHP variable. Open the links.php file and modify the content from:

<li><a href="/cws/index.html">Home</a></li>
<li><a href="/cws/about.html">About us</a></li>
<li><a href="/cws/services.html">Services</a></li>
<li><a href="mailto:joel@carnat.net">Contact us</a></li>

to

<li><a href="/cws/index.php">Home</a></li>
<li><a href="/cws/index.php?content=about">About us</a></li>
<li><a href="/cws/index.php?content=services">Services</a></li>
<li><a href="mailto:joel@carnat.net">Contact us</a></li>

Notice the use of index.php for every links and the use of the content variable. Those links all points to index.php. We’ll have to add PHP code to that file so that it checks if there is any variable passed and if so, include the correct content ; from the files we’ve created above. The algorithm is quite simple:

Edit the index.php file and replace:

(...)
    <div id="contentarea">
      <div id="leftbar">
        <h2>Corporate Website example</h2>
(...)
      </div>
      <div id="rightbar">
(...)

with:

(...)
    <div id="contentarea">
      <div id="leftbar">
        <h2>Corporate Website example</h2>
<?php
switch ($_GET["content"]) {
case "about":
        include_once "about.php";
        break;
case "services":
        include_once "services.php";
        break;
default:
        include_once "home.php";
        break;
}
?>
      </div>
      <div id="rightbar">
(...)

From this point, you should be able to browse the whole site from the sole index.php. All you need to do to update the content is edit the corresponding file once and the whole site will benefit from the modification. Quite great, isn’t it?

An online version of this article is available here . Remember that the PHP scripts will be processed by the server before being send to the user. Hence, you won’t be able to get my PHP source from the online version. If you want the sources, just ask and I’ll send them to you.

That’s All for today Folks!

Related posts: