Slim It with Includes

Before we get cracking on using PHP includes, let's take a second and clean up our folder (or directory). Previously I showed how a clean topic architecture should look.

We're going to do the same thing with our website folder by adding sub-folders for diffent document types. Open your website folder and add folders for "images", "css" and the soon to be used "includes". Keep the names lowercase since a lot of servers are CaSe SeNsItIvE.

Now move all your images and css into their correct folders. Your website folder should now look like this...

But wait! Try opening "index.php" in a browser and you'll see all of our images are missing and the stylesheet isn't hooked up. Let's fix that by opening "default.css" and change the paths to the images from...

To...

It just says, go back one folder and in the folder "images" find/use "body.gif". I'm sure you knew that already. Apply that path to the rest of the images in your stylesheet. Now fix the stylesheet import, open "index.php" and change the stylesheet path from...

to...

Onto PHP includes. If you've been coding for sometime, you might remember server-side includes. You would cut out a snippet of code from your document that is used on multiple pages, save it as fileName.html and call to that file with the following in your main HTML file. (Note: if you're using server-side includes, your file must have the extension ".shtml")

The reason we use includes is say you have a website with 50 different pages and on each of these page there's a masthead image. Now you need to change that masthead image. Since the code to embed that image is on all 50 pages of your website, you have update each page one-by-one. What's nice about includes is you only have to change one line of code and it will be applied to all the sections that call that file as an include. PHP includes are almost exactly the same except the syntax is a tad bit different which I showed you previously.

Our masthead appears on every page of our website so we'll start with that. Open your "index.php" and cut out the code...

Next create a new document and paste the code we just cut out into this new document. Save this file in our "includes" folder and name it "masthead.php". Jump back into "index.php". We need to call the file "masthead.php" into the file "index.php". On the exact same line we cut the code from, add the include...

You already know the basics of PHP syntax so this should be straight forward. Instead of "echo" we are using "include" to call the document "masthead.php" into "index.php".

Now do the same with the "main menu", "side menu", "topic heading" "footer" and <title>...</title> since these are used on multiple pages. Cut our each of these divisions separatly from "index.php", create a new file for each and save them in the "includes" folder. I used the following document names if you'd like to do the same.

Now that's what I call clean code! Down the road if we ever want to add a new main menu button, remove a topic or change the masthead we only have to update one include file.

Alright, last one. Remember we declared a variable for "thisWebsite", well obviously the website name will not change from page to page so we should make this an include as well. "thisTopic" and "thisSection" variables should stay since they will change from page to page. Yes, you can use includes for variables as well. So go ahead and cut out...

Open a new document, paste the code, save the file in the "includes" folder naming it "config.php" and add the PHP include to "index.php". Why are we calling this file "config.php"? Well config stands for configuration and this file can be used down the road for other instructions configuring your website along with setting the title. That's a whole other chapter but I'm sure if you pass your code to a programmer they will thank you for this. And one last time, Double-check it and download the sample.