fusionfox

The Indispensable Server Side Include

March 17, 2008 \ 0 Comments

As a pursuer of both code and design, a web designer has to make a lot of decisions along the way about what they won't worry about. There's a lot of art out there to stare at, and software development has oodles syntax waiting to be understood. A web designer has to take bits and pieces of both to seek for balance between the two disciplines.

A server-side include, or simply an “include,” is a technology that likely gets ignored by most XHTML/CSS coders simply because it delves into the world of server-side scripting. The include, however, is something that I believe is wildly useful to the front-end coder. If you are such a coder, you likely use CSS as a global solution to control a variety of styles. It's a helpful and intuitive thing to want global control.

But what do you do about global markup? Surely there are parts of your site where the code gets repeated over and over again. This is where the include makes your life much easier.

For me, using includes comes in most handy when taking care of that ever-important header information. There are scripts to include, stylesheets to reference, and more. The include allows you to write all that code in one place and have the rest of your site reference it. Let's look at an example.

I first create a separate HTML file called header.html. In that file, I put the following:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="..." />

<meta name="keywords" content="..." />

<link rel="alternate" type="application/atom+xml" title="Atom" href="/atom.xml" />

<title>fusionfox</title>

<link rel="stylesheet" href="/ff7style.css" type="text/css" />



<script src="/juice/jquery-1.2.1.pack.js" type="text/javascript"></script>

After that file is created, I can now reference that block of code anywhere. Here's how I do it in another HTML file inside the <head> tags:

<head>
<? include "path/to/header.html" ?>
</head>

Pretty easy, right? Well, there are a couple catches. The first (and most obvious) is that your server needs to be running PHP. For local development, I recommend running MAMP if you're using a Mac. It's a snap to use, and it comes with a Dashboard widget to turn the servers on and off. The second catch is that header.html may need to be header.php if your server isn't configured to allow PHP calls from within an HTML file. On my remote server, all I had to do was add this to my .htaccess file.

AddHandler application/x-httpd-php5 .php .html

Those catches are into the neety greety of getting a server up and running, but the include principle is simple. Doing this you can keep one instance of a block of code and use it everywhere, making global changes a snap. Just edit header.html, save, and you're done. This technique can save the front-end coder a ton of time, especially on a site with lots of pages.

Tags: front-end, html, include, php, php include, server side include