How to build a website — PHP navigational skeleton step by step

This brief article describes step-by-step how to build a website’s base structure using PHP.

If you attempt to follow this course, you should have at least read the following articles first:

  1. HTML coding basics
  2. Learning PHP — output, calculation and variables
  3. PHP control structures — loops and conditions
  4. PHP inter-script GET and POST parameters

However it is even better if you read all previous articles :)

Why create a navigational skeletal structure?

There are various parts of your website which always stay the same. Think of your header and your footer for example. For integrity and maintenance reasons we only want to load content that is different from one request to another. All other content will be created once and integrated when needed.

Otherwise you would need to copy/paste your header and footer code for every sub page you are creating. This can result in errors and is hard to maintain since you’ll have to change every single page for just one tiny header detail, for example.

Prerequisites of your base structure

First of all you should think about what pages your website shall consist of, for example:

  • Home
  • About
  • Privacy
  • Contact

If you know that, think about the basic layout of your website, for example:

  • Header
  • Content
  • Footer

You could also think about a sidebar etc., but we will not focus on positioning elements for now. At first we want to clarify the technical background required to build your skeleton.

Technical background of our skeleton

The “request/response switch” we are about to develop will integrate the following PHP capabilities:

  • Include command
  • Array carrying page definitions
  • $_GET inter-script parameter functionality

This article will demonstrate how to use those aspects for your advantage.

Overall base structure

Let’s talk about the base structure of your base structure :)

The following code shows header, content and footer areas, each of which include other PHP files.

1
2
3
4
5
6
7
8
<html><?php include "inc-pages.php"; ?>
       <head><title>...</title></head>
       <body>
              <div id="header"><?php include "inc-header.php" ?></div>
              <div id="content"><?php include "inc-content.php" ?></div>
              <div id="footer"><?php include "inc-footer.php" ?></div>
       </body>
</html>

You can save this file as your future index.php. It is carrying both our request/response switch and the actual content files. You may have noticed that there is an additional file called in-pages.php included at the top. We will cover this in a second.

You also see that there are so called DIV-tags with IDs. You can ignore this for now, I just put it there for you to have a mental marker on how to beautify your website later on using Cascading Style Sheets (CSS). However there is no need to talk about colors and border thickness at this point, since we want to learn how that stuff works technically.

So how does it work? :)

Static content first: inc-header.php and inc-footer.php

The files inc-header.php and inc-footer.php are directly responsible to deliver desired content. inc-header.php could show an image, inc-footer.php could print your copyright information. I will not go deeper here, since it’s entirely up to you what to include within those files, e.g. login forms.

However it is a good idea to include your menu within inc-header.php. By menu I mean your links pointing to index.php?section=home, for example. We will discuss this shortly.

Defining our dynamic content files: inc-pages.php

To be able to load different kinds of content files, we first need to define which files to load and by which name to call requests upon them. The actual loading process is done within the inc-content.php, which we will cover in a second. The file inc-pages.php is just to define an array which we will call $files[], which shall look like this:

1
2
3
4
5
6
7
<?php
     $files = array();
     $files['home'] = "content-home.php";
     $files['about'] = "content-about.php";
     $files['privacy'] = "content-privacy.php";
     $files['contact'] = "content-contact.php";
?>

You notice that we are defining four positions within that array: home, about, privacy and contact. Those are pages that we discussed earlier as our website content. Each of these positions point to a simple string. That string is carrying a file name, which we will use in a second.

Building a request/response switch: inc-content.php

Now we will make everything work. The following code is your way to respond to various link requests using the $files[] array as reference:

1
2
3
4
5
6
7
8
9
<?php
     if ( isset( $_GET["section"] ) 
          AND
          isset( $files[ $_GET["section"] ] )
     ) { include $files[$_GET["section"]];
     }else {
          include $files[$_GET["home"]];
     }
?>

Let’s talk about what we’re doing right here. First of all inc-content.php asks if a GET parameter is set AND if the value of that GET parameter is defined within the array $files[]. If both is the case, the file belonging to that request is being included.

Example: Your menu (within inc-header.php) carries a link with anchor text “Home” and link target “index.php?section=home”. If the user clicks on “Home”, inc-content.php recognizes a parameter called “section” with value “home”. It further looks up if $files[“home”] exists. Since this is the case, the file “content-home.php” (as defined in inc-pages.php) is included.

If there is either no section parameter set or the value of section is not within the $files[] array, the home page (content-home.php) is loaded.

Conclusion

I am fully aware that there are thousands of other ways to implement such a switch. The advantage of the solution above, however, is that you do not have to touch the actual switching functionality ever. You just include more positions within your $files[] array, and add some more links to your menu.

You can now use this skeleton frame to build a website delivering the content you need. Within the next articles we will concentrate on database functionality.

Leave a Reply