Using "includes" to save a lot of web work

[Trish]

About time for me to add to this section.  Thanks for setting it up, Pat!  

I'm going to share some tips that I have found along the way in hopes of sparing others some of the frustration and time I often had to go through as I learned to do various things. These won't be aimed at the pros, but I'll certainly welcome advice from pros on better ways to do things

"Includes" - these will save you a ton of time in site maintenance. Ever have, say, a site menu bar on about 30 pages, and find later that you need to add or remove something on the menu? What a pain to have to do it on each and every page, every time you want a change! Using 'includes' will allow you to make the change you need in one single place and have it reflected across your whole site. Below are 2 easy ways to achieve this.

Using the menu bar as an example, we will create it as an include.

I keep all my includes in one folder for organization. Make a folder called "_include" (without the quotes). Why the underscore? When I first used includes, I went through a horrendous time trying to find out why my included files wouldn't show up in my pages. Using the underscore was the cure. This may have only been the way my previous server was set up, but I stick to it just in case!

Place a blank index.html page in the _include folder to stop people browsing the contents of the folder. Now you can create your includes and save them in that folder. Your include pages will actually be just snippets of your web pages, the little sections that you want to show up on every page of your site.  Do not use the html, head, or body tags on your include pages. Only the portion of code for your menu bar should be saved in this include page. Save the page (let's call it "menu.html") to your _include folder. Remember, no html, head, or body tags should be in menu.html.

Now you have your menu section saved to its own file. In your web pages, you can use one of the 2 following methods to make that menu section show up:

The PHP way

Don't be scared off by the mention of PHP! Yes, it can look like scary programming gobbledygook to non-programmers (of which I am one). But even beginners can take advantage of some nifty PHP functions.

To use PHP includes, you must save your web pages with the .php extension, rather than .htm or .html (this does not apply to the actual included pages, such as our menu.html page). This won't affect anything else on your web pages, just allows any PHP code in them to be processed by the server.

To include our menu bar in our pages, we will insert one short PHP line into the code of each page where we want the menu to appear:

Code:

<?php include("_include/menu.html"); ?>

Wherever you place that line in your web page is where your menu will appear when the page is viewed through the web browser. Remember that PHP is processed on the server side, so if you don't see something there while creating your pages, upload them to the server and have a look through the web browser.

The SSI Way

SSI stands for Server Side Includes. Again, the server will handle the processing, taking your include pages and inserting their contents into your web pages when someone views them. To use this method, your pages must be saved with the .shtml extension.  Just like with the PHP method, you just add one simple line of code in your web pages where you want the menu to appear:

Code:

<!--#include file="_include/menu.html"-->

 
Whichever method you use, you now have just one file to change (menu.html) when you need to change your menu bar, and it will reflect that change on every page where you added the PHP or SSI line to your code.  

You can use includes for other things, such as an image. Anywhere you want the same thing repeated across different pages, using includes can save you a lot of time and work.

Hope this was clear enough...and if not, holler and I'll see if I can help

[WHSP-Jarrod]

Hi Trish,

Fantastic article, thanks for taking the time to write it up!

Here's an addition to the section on SSI includes.  Add the following code to your .htaccess file and you can leave the pages with the .html extension, rather than .shtml:

Code:

AddHandler server-parsed .html

It's a short time-saver, but makes it easier overall.

Thanks again Trish, if you've got any other articles like this, we'd love to see them!  

[Notawiz]

You raised an interesting problem, here:

Place a blank index.html page in the _include folder to stop people browsing the contents of the folder.

Here are 2 other solutions to avoid this:
a) put a .htaccess file in that folder, with this:

Code:

IndexIgnore *

or B), place your folder with includes OUTSIDE the public domain.
Needs to specify the exact path in your PHP code, but this architecture allows you to put all 'sensible' information, like database connection data, out of reach of most users...
Added 08/29: Another advantage is that if, for some reason, the PHP engine goes down, and you had placed your call for includes on top through a require(sensible.php), the page will NOT be completed and outputted to the browser (always as plain text when not parsed by the PHP engine, pay attention !!).

Hope this'll help.

Notawiz

[Trish]

Great extra tips!  

Just for the beginners - to make the .htaccess file, just open up Notepad and insert the lines noted above. Then save it as ".htaccess" - WITH the quote marks so Notepad doesn't save it as a .txt file - and upload it to the directory in question.