This lesson describes step-by-step how to build a website’s base structure using PHP. It is what WordPress does before sending your website to your user. Remember that the basic function of all content management systems is to separate layout (theme programming) and data (content creation and delivery). Yet a user always sees the website as a whole. That re-integration of layout and content is what we will discuss within the last four lessons.
Let us start by showing you how a basic PHP skeleton structures different elements of your website: your theme files (e.g. your header and footer) and your content and pages file.
If you attempt to follow this course, you should have at least read the following articles first:
However it is even better if you read all previous articles 🙂
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.
First of all you should think about what pages your website shall consist of, for example:
If you know that, think about the basic layout of your website, for example:
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.
The “request/response switch” we are about to develop will integrate the following PHP capabilities:
This article will demonstrate how to use those aspects for your advantage.
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? 🙂
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.
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.
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.
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 lessons we will concentrate on database functionality, used to actually fill the content file with the data from your database (e.g. the text of your post in WordPress).