4-1: Dynamic web pages with PHP – A simple (yet useful) example

We have already seen in chapter 3 how to write the code for a basic HTML page. Let’s image we want to create several pages, instead of a single one, and link them together, maybe through a navigation menu, in order to build a full fledged web site.

What is the difference between a bunch of interlinked pages and a proper website? For one, in a website all the pages somehow “look the same”. We have the feel, while navigating from a page to another, that we are still within the same website. When we do click on an external link that brings us to a different website, we immediately notice. Of course, the reason we notice is that the graphical aspect of the pages, the style of the pages, changes. Within the same website, maybe the layout of a certain section could differ from the layout of other sections, but generally there are still enough graphical elements (such as the logo, the choice of colors, the fonts and others) to tell that on navigating from page to page, we are still inside a coherent, related set of web pages. Each site has generally a distinctive graphical character, present in each single page, that will let us recognise it and let us know when we are navigating inside it (and when we are leaving it). Having gone through chapter 3, you already know that this is largely achievable by web developers through the implementation of an original style sheet by using CSS.

For the sake of simplicity, let us assume for this example that all the web pages of our hypothetical web site have in common the style sheet, the header section (that may include a navigation menu)  and the footer section. Let us also assume our website is composed of just 3 pages, with the following minimal code:

Page 1, index.php

Page 2, page2.php

Page 3, page3.php

Let us now imagine we want to perform one of the following operations:

– switch to a different style sheet, not located at css/style.css
– change the id of the main contents div, from “main-navigation” to something different
– add another page to the web site, and therefore update the navigation menu to reflect the new situation
– change the contact e-mail address (in the “footer” section)
– add an image in the header section, to all pages

An all these cases (and several others), we do need to perform the same modification to all our 3 pages. While this is plenty feasible, especially with a 3 pages website, what if we have a 500 pages instead. What is the number of pages grow every day, for some reason. The occasions to make mistakes, or to forget to modify some of the pages, could easily make the website quite hard to manage.

Such a situation can be easily fixed by turning to dynamic web pages generated with PHP.

By looking at the code of the three pages, it is immediately evident that they do have a lot in common. The only thing that changes from one page to another is the content of the “main-contents” div, all the rest is exactly the same.

Here is our plan: we will move all the code that is in common between the pages, out of the pages themselves, to different files. Then, by using PHP, we will import this common code into each page.

For this example we can divide the common code in just 2 parts: an “header” part, that will be stored in a text page called “header.html” and a “footer” part, stored in a page called “footer.html”. This is not to be confused with the header and footer HTML tags used in the code itself, we are using these terms is a more broad sense here.

Check out the code for these two pages below:

The header part, header.html

The footer part, footer.html

We will store these pages on the filesystem, in a subdirectory of the directory containing the index.php, page1.php and page2.php pages. Let’s name this subdirectory “html”.

Our current directory structure will therefore be as follows

website-dir (directory)
    index.php
    page1.php
    page2.php
    css (directory)
        style.css
    html (directory)
        header.html
        footer.html

The path of the header.html page relative to the “main” pages will be:

html/header.html

The path of the footer.html page relative to the “main” pages will be:

html/footer.html

We can now use the “file_get_contents()” built-in PHP function to import the contents of the header and footer pages into each of our main pages. This function takes as argument the path (absolute, relative or even an URL) to a page and turns the contents into a string, that can be displayed on our web pages with an “echo” statement. Learn more about the file_get_contents() function on the php.net website or the w3schools website.

The code of our three pages is changed to the following:

Page 1, index.php

Page 2, page2.php

Page 3, page3.php

With just a couple of lines of PHP in each page we have turned our static pages in a dynamic web site. If we now wish to do any of the operations listed above, say move to a different style sheet, add an image to the header section, change the contact e-mail, we can now do it in a “central” location (the header and footer pages), once, and this will reflect on all the pages of our website. Isn’t that great and useful?

A few points to consider:

• In oder for the PHP to be executed, PHP must be installed together with Apache on the web server (extremely common situation, most web servers support PHP). If you have installed a full LAMP server as described here, you are set

. If on loading the page you see raw PHP code that is being executed it probably means that either PHP is not active on the web server, or that you did not grant the proper .php extension to your file(s).

• In general, unless the web server has a specific configuration, PHP code is only executed in pages with a “.php” extension. PHP in pages with an “.html” extension is not executed but rather show “as it is”, as raw code
• Since our header and footer pages only contain html, we gave them a .html extension, while our main pages have a .php extension
• Within a web page, or PHP script, the PHP code is surrounded by "<?php" and "?>" tags, that tell where PHP code starts and ends
• A page with a .php extension could contain plain html, just php, or a mixture of both, as in our example above

What if we wanted, in the 3 pages website example above, make so that each page has it’s own title in the head section? This would be quite reasonable as it is unlikely that all the 3 pages would have exactly the same topic. An easy solution to this would be to split the “header” part in two. Instead of just one “header.html” file we could have the following two header files, called “header1.html” and “header2.html” and then introduce a third line of PHP in our main .php files to manage that. We will provide here the code for the home page “index.php” only, for the sake of brevity, but you can easily see how this would work for the other pages.

The header part 1, header1.html

The header part 2, header2.html

Page 1, index.php, with it’s own title

Chapter Sections

[pagelist include=”435″]

[siblings]