Member Sign In
Not a member?

A Wired.com user account lets you create, edit and comment on Webmonkey articles. You will also be able to contribute to the Wired How-To Wiki and comment on news stories at Wired.com.


It's fast and free.

Sign in with OpenID
Sign In
Webmonkey is a property of Wired Digital.
processing...
Join Webmonkey
Please send me occasional e-mail updates about new features and special offers from Wired/Webmonkey.
Yes No
Please send occasional e-mail offers from Wired/Webmonkey affiliated web sites and publications, and carefully selected companies.
Yes No
I understand and agree that registration on or use of this site constitutes agreement to Webmonkey's User Agreement and Privacy Policy.
Webmonkey is a property of Wired Digital.
processing...

Retrieve Sign In

Please enter your e-mail address or username below. Your username and password will be sent to the e-mail address you provided us.

or
Webmonkey is a property of Wired Digital.
processing...

Welcome to Webmonkey

A private profile page has been created for you.
As a member of Webmonkey, you can now:
  • edit articles
  • add to the code library
  • design and write a tutorial
  • comment on any Webmonkey article
Close
Webmonkey is a property of Wired Digital.

Sign In Information Sent

An e-mail has been sent to the e-mail address registered in this account.
If you cannot find it in your in-box, please check your bulk or junk folders.
Sign In
Webmonkey is a property of Wired Digital.

Use includes with CFML

/skill level/
/viewed/
0 Times

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 needed to make a change to that code, you'd 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">

My Site

- <a href="index.cfm">Home</a>
- <a href="aboutus.cfm">About Us</a>
- <a href="products.cfm">Products</a>
- <a href="services.cfm">Services</a>

Super-cool content goes here.

© Copyright Vivio Technologies, 2008

</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">

</code> menu.cfm - <a href="index.cfm">Home</a>
- <a href="aboutus.cfm">About Us</a>
- <a href="products.cfm">Products</a>
- <a href="services.cfm">Services</a>
footer.cfm </tr> </table>
© Copyright Vivio Technologies, 2008

</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!
Retrieved from "http://www.webmonkey.com/tutorial/Use_includes_with_CFML"
Edit this article
Reddit Digg
 
Subscribe now

Special Offer For Webmonkey Users

WIRED magazine:
The first word on how technology is changing our world.

Subscribe for just $10 a year

My Site