Server-Side Includes


Now that I've described a number of popular web application platforms, let me describe something much simpler that you may find more useful, at least in the immediate future. Most web servers support an extension called server-side includes (SSI) that enable you to place directives in your pages that are processed by the server when the pages are downloaded. All directives follow the same format. The basic format is

<!--#directive attribute=value attribute=value .. -->


Note that SSI directives are cleverly disguised as HTML comments. The advantage is that if the server doesn't process the directives, the browser will ignore them. This is particularly useful when you're previewing pages that have SSI directives embedded in them locally.

Let's look at the directive in more detail. The directive name indicates how the directive should be used. In the ASP section earlier in this lesson, you saw that the include directive is used to include external files in an HTML document. The directive is followed by one or more attribute and value pairs. These pairs define how the directive is used. For example, the include directive has two possible attributes (which are mutually exclusive): file and virtual. The values associated with both of them are paths to files to include. As mentioned previously, the file attribute is used to load files from the current directory or below it. The virtual attribute indicates that the file can appear anywhere in the document root.

Here are a couple of examples of include directives:

<!--#include file="includes/footer.html" --> <!--#include virtual="/includes/footer.html" -->


Any web server that claims to support server-side includes will support the include directive. Apache, the torchbearer for SSI, supports many other directives as well.

Table 19.1 contains a list of all the directives supported by Apache. You can read more about them at http://httpd.apache.org/docs/mod/mod_include.html.

Table 19.1. SSI Directives Supported by Apache

Directive

Usage

config

Enables you to configure the error message to be displayed if a directive fails, and the format for displaying date and time information and file size information.

echo

Prints out the value of an include variable.

exec

Executes a CGI program or command and includes the results in the page. (This directive is usually disabled for security reasons.)

fsize

Prints out the size of the specified file. The virtual and file attributes are used with this directive, just as they are with the include directive.

flastmod

Prints the date the specified file was last modified. Supports the file and virtual attributes.

include

Includes a file in the page.

printenv

Prints a list of all environment variables and their values.

set

Sets a variable to a value.


Using Server-Side Includes

Let's look at how you might use server-side includes on a real site. As I said before, includes are the most common SSI directives used on most sites. Using includes, you can save a ton of work by bundling up content that's common to more than one page into separate files that are included on each of those pages. Let's look at an example that demonstrates how to use SSI on a real site. On many sites, you'll find that navigational elements are shared among pages, and the header and footer are common to every page.

First of all, let's take a look at the files common to every page, the header and footer. Here's the source code to the header file:

<div > <img src="/books/2/631/1/html/2/header.gif" alt="Baseball Online" /><br /> Welcome to the largest baseball site on the Web. </div>


The header consists of a single <div> containing a banner image and the tagline for the site. I've assigned the ID header to the <div> so that I can use CSS to modify how it is presented. Now let's look at the footer. It contains some basic copyright information that's found on every page.

<div > Copyright 2003, Baseball Online.<br /> Send questions to <a href="mailto:webmaster@example.com">webmaster</a>. </div>


Now for the navigational elements for the site. If I were going the easy route, I'd just create one navigation file to be used on all the pages on the site, but that's not appropriate in many cases. One purpose of navigation is to enable users to move to various areas of the site. However, another purpose is to give users a sense of where they are on the site. So, instead of creating one navigation file to be used everywhere, I'm going to create three navigation files, one for each section of the site.

The content of the three files follows. First is the navigation for the games section:

<div > <a href="/">Home</a><br /> Games<br /> <a href="/teams/">Teams</a><br /> <a href="/leagues/">Leagues</a> </div>


Here's the navigation for the teams section:

<div > <a href="/">Home</a><br /> <a href="/games/">Games</a><br /> Teams<br /> <a href="/leagues/">Leagues</a> </div>


And, finally, here's the navigation for the leagues section:

<div > <a href="/">Home</a><br /> <a href="/games/">Games</a><br /> <a href="/teams/">Teams</a><br /> Leagues </div>


Now that I've created all of my included files, I can stuff them in a directory called includes off of the root directory. In this example, they'll be called header.html, footer.html, nav_games.html, nav_teams.html, and nav_leagues.html. Now let's look at a real page that uses these includes:

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Games: A Games Page</title> <link rel="stylesheet" type="text/css" href="/includes/styles.css" /> </head> </head> <body> <!--#include virtual="/includes/header.html" --> <!--#include virtual="/includes/nav_games.html" --> <div >This is the content for a games page.</div> <!--#include virtual="/includes/footer.html" --> </body> </html>


As you can see, the page I created consists mainly of includes. There are a few other things to note as well. Both in the includes and in the main page, there are no tags that modify how the data is presented. Instead, I just put everything inside <div> tags with IDs. The linked style sheet in this document contains all the style rules for the page, and controls the layout of the entire page. Here's the source for the page once all the included files have been included by the web server:

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Games: A Games Page</title> <link rel="stylesheet" type="text/css" href="/includes/styles.css" /> </head> </head> <body> <div > <img src="/books/2/631/1/html/2/header.gif" alt="Baseball Online" /><br /> Welcome to the largest baseball site on the Web. </div> <div > <a href="/">Home</a><br /> Games<br /> <a href="/teams/">Teams</a><br /> <a href="/leagues/">Leagues</a> </div> <div >This is the content for a games page.</div> <div > Copyright 2003, Baseball Online.<br /> Send questions to <a href="mailto:webmaster@example.com">webmaster</a>. </div> </body> </html>





Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day
Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day (5th Edition)
ISBN: 0672328860
EAN: 2147483647
Year: 2007
Pages: 305

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net