File Under: Programming, Software

Use Includes with CFML

The concept of using “includes” when programming is not a new one, and just about every programming language has this feature in one form or another. However, if you are new to programming, the basic idea of an “include” is to take a piece of code that you will use over and over, and put it in one simple place. That way, whenever you need to make a change to that code, you only have to update one page, instead of updating every page on your site that you used that code on.

In the following example, I’ll be demonstrating how to use includes with the CFML development language. CFML has been around for almost 10 years now, with commercial servers available from Adobe and NewAtlanta, and is widly regarded as one of the easiest web development languages to learn because of it’s HTML-like tag-based structure. A free CFML server is available from the Open BlueDragon project, which is licensed under the GPLv3 and can be used freely on any web server.

Some good examples of code you would use over and over on a site would be your site header, or your site menu, or your site footer. All are relatively basic aspects of your site that usually don’t change much as a visitor moves from page to page throughout your site. This makes those aspects of your site perfect to use includes with.

The following is an example of some web site code we might want to break down into re-usable pieces:

index.cfm

<HTML>

<head>

<title>My page</title>

</head>

<body bgcolor="#CCCCCC">



<br>

<table width="780" height="400" cellpadding="1" cellspacing="1" border="1" align="center" bgcolor="black">

	<tr>

		<td colspan="2" align="center" valign="top" height="30" bgcolor="#DDDDDD">

		<font color="#000099"><h1>My Site</h1></font><br>



		</td>

	</tr>

	<tr>

		<td width="120" bgcolor="whitesmoke" valign="top" height="370">

		- <a href="index.cfm">Home</a><br>



		- <a href="aboutus.cfm">About Us</a><br>

		- <a href="products.cfm">Products</a><br>

		- <a href="services.cfm">Services</a><br>



		</td>

		<td width="480" bgcolor="#FFFFFF" valign="top">

		Super-cool content goes here.

		</td>

	</tr>

</table>

<div align="center"><font face="Verdana" size="1">© Copyright Vivio Technologies, 2008</font></div>



</body>

</HTML>

As a visitors moves from page to page on my site, the header, the menu, and the footer are not going to change. Those are going to say the same no matter what page the user is on while visiting my site. This is the perfect opportunity to use includes.

The first thing we need to do is identify what part of our code that we’re going to use repeatedly. In the case above, those pieces would be the header, the menu, and the footer, which can be broken down into the following pieces of code:

header.cfm

<HTML>

<head>

<title>My page</title>



</head>

<body bgcolor="#CCCCCC">

<br>

<table width="780" height="400" cellpadding="1" cellspacing="1" border="1" align="center" bgcolor="black">

	<tr>

		<td colspan="2" align="center" valign="top" height="30" bgcolor="#DDDDDD">

		<font color="#000099"><h1>My Site</h1></font><br>



		</td>

	</tr>

	<tr>

menu.cfm

- <a href="index.cfm">Home</a><br>



- <a href="aboutus.cfm">About Us</a><br>

- <a href="products.cfm">Products</a><br>

- <a href="services.cfm">Services</a><br>



footer.cfm

	</tr>

</table>

<div align="center"><font face="Verdana" size="1">© Copyright Vivio Technologies, 2008</font></div>



</body>

</HTML>

Once you create these files and put the code you will be reusing over and over inside them, it’s a good practice to put the files into a subdirectory so they don’t clutter up the main directory of your site. In the example file structure below, I’ll be putting the include files into a directory called “includes”:

  • includes/
    • header.cfm
    • menu.cfm
    • footer.cfm
  • index.cfm
  • aboutus.cfm
  • products.cfm
  • services.cfm

Keeping our directories clean help us stay organized when working on large projects in particular!

Okay, so we’ve got our includes created and neatly organized. All that’s left is to update our actual pages to use the includes we just made. To do that using CFML, we need to use the <CFINCLUDE> tag, which looks something like this:

<CFINCLUDE template="includes/header.cfm">



As you can see, the “template” attribute of this tag points to where the file that you’ll be including on your page is, in relation to the file that you’re including it on. Since all of our main files are located in the main directory, and all of our include files are located in a subdirectory called “includes”, the include files we’ll be using will all point to a file in our “includes” folder.

To use this include tag, just replace the HTML code that you put in your include files with the <CFINCLUDE> tag, like so:

index.cfm

<CFINCLUDE template="includes/header.cfm">

		<td width="120" bgcolor="whitesmoke" valign="top" height="370">

		<CFINCLUDE template="includes/menu.cfm">



		</td>

		<td width="480" bgcolor="#FFFFFF" valign="top">

		Super-cool content goes here.

		</td>

<CFINCLUDE template="includes/footer.cfm">

Looks a lot simpler doesn’t it! Now do that to the rest of your content pages. In addition to simplifying the code for your content pages, you get the added benefit of being able to make wide-scale changes to your site’s header, menu, and footer, just by editing the code that’s in your include files.

Good luck and have fun!