Server-side and Client-side includes, explanations, applications, and examples
Many webmasters have heard the term include file user at least in passing concerning building websites. Even more webmasters are familiar with the term server-side include and how they are used. However, many library webmasters would not know that CSI stands for client-side include because they are used very infrequently in web design today.
So what is an include file? What do they do and what is the difference between client side includes and server side includes. First, the basic idea of an include file is code content that appears an many webpages. A good example of this would be the organiztions header and logo that is on every one of your library’s pages.
This content is seperated and made into its own file which gets “included” on the pages that need that code. The advantage of this is simple. As a web designer you only need to change this code one place rather than changing it on every individual page.
So in essence include files are time savers. Particularly if you have repeating design elements such as navigation bard or repeatable scripting such as database connection string if you are using database-driven webpages.
So what’s this whole SSI, CSI things. Well, include files come in two flavors and the difference between the flavors has to do with how the includes get added into the page. The processing of server-side includes happens on your web server. In contrast, client side includes are process on the client (basically the user’s mamchine and specifically the web browser being used to view the page). Each of these flavors of includes have their pros and cons.
Server-side includes place the burden of processing on your web server, which means that your web server needs to be able to deal with this increased load. However, in truth today this is really a non-issue because web servers are capable of supporting the load of a variety of applications of which server-side includes are just one. The advantages of server side includes are tremendous. Because the processing takes place on your server you are there are no issues of cross platform and browser compatibility. The results are predictable and relatively uniform. This is true of all server-side scripting because you can write code geared to a particular machine, your server.
Client-side includes place the burden of the processing on the user’s mcahine and web browser. This reduces the fload on your web server but creates a chole new set of ussues. Client-side includes are typically done using the quintessential client-side scripting language, JavaScript. Anyone who has written and used JavaScript as part of their web site can tell you that is inherently unpredictable. This is particularly true of older web browsers that used drastically different implmentations of the language. Although today there is much more consistancy, personally I still feel nervous using JavaScript and am particularly careful to thoroughly test any Javascript code I intend to use. Unlike CSS it does not degrade gracefully. In addition, for those of us in public, academic, and school libraries, the issue of web accesibility is becoming an important aspect of maintaining and desgning our sites. Client-side scripting languages are inherently inaccessible even with the noscript tag, JavaScript driven pages continuity can be destroyed with JavaScript not present.
For these reasons, server-side includes are the reccomended method of doing includes. However, I think that it is important for a library webmaster to understand and know how to utilize both. There are two reasons for this. The first reason is web-based library products that the library purchases that have limited customizability. Server-side includes are widely supported in today’s library systems products. However, there is always a possibility that you may encounter a library systems product in which it is not possible to use server-side includes.
The second reason is that you may not control your own web server and the person or persons managing it may decide that server-side includes are not allowed. I know this sound kind of crazy but at smaller libraries the servers are controlled by information technology staff who have their own agenda and rational for why things are done their way. When I first came to Cortland, the library’s web site was on the campus web server. This meant there were certain things we could and could not do. Nothing as big as not being able to use server-side includes, however there were rules. As a result, the best course of action is to be prepared for a variety of scenarios by gaining a basic knowledge of a variety of web technologies. In addition, a strong understanding of these technologies can help you make a compelling case to the campus information technology people about why you need to have a particular web-technology available to you.
Below are examples of SSI (server-side includes) and CSI (client-side includes) with links to pages with the code in action.
Server-side Include Example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Library Web Chic - Server Side Include Demo</title>
<link rel="stylesheet" type="text/css" href="wc_main.css">
</head>
<body>
<div id="banner">
<h3 class="page_title">Include Demo</h3>
</div>
<div id="content">
<h3 class="page_title">Server Side Include Demo</h3>
<h4>This is a test page.</h4>
<p>
With some test text. With some test text. With some test text. With some test text. With some test text. With some test text. With some test text. With some test text. With some test text. With some test text. With some test text. With some test text. With some test text. With some test text.
</p>
</div>
<!--#include virtual="testinclude.asp"-->
</body>
</html>
Client-side Include Example
<html>
<head>
<title>Library Web Chic - Client Side Include Demo</title>
<link rel="stylesheet" type="text/css" href="wc_main.css">
</head>
<body>
<div id="banner">
<h1>Library Web Chic</h1>
</div>
<div id="content">
<h3 class="page_title">IClient Side Include Demo</h3>
<h4>This is a test page.</h4>
<p>
With some test text. With some test text. With some test text. With some test text. With some test text. With some test text. With some test text. With some test text. With some test text. With some test text. With some test text. With some test text. With some test text. With some test text.
</p>
</div>
<SCRIPT LANGUAGE="JavaScript" type="text/javascript" src="links.js"></SCRIPT>
</body>
</html>
Coding notes and differences between SSI and CSI
The only difference between these two files is the line of code that inserts the include. In the SSI example, this is the line
<!–#include virtual=”testinclude.asp”–>
While in the CSI example the line is
<SCRIPT LANGUAGE=”JavaScript” type=”text/javascript” src=”links.js”></SCRIPT>
The rest of the code for the page is identical. The major difference coding wise is in the include files themselves.
Client-side includes are written in JavaScript which means that they aren’t just the snippet of code that you pulled out of the page. They are the JavaScript for writing that code to the screen. See the example below which is the client-side include file (links.js)
document.write('<div id="links">'
+ ''
+ '<div class="sidetitle"> </div>'
+ '<div class="side">'
+ ''
+ '<h4><a href="http:/www.librarywebchic.net">Home</a></h4>'
+ ' <h4><a href="../about.asp">About</a></h4>'
+ '<h4><a href="../articles.asp">Articles and Presentations</a></h4> '
+ ' <h4><a href="../work.asp">Work</a></h4>'
+ ' <h4><a href="../reading.asp">Reading List</a></h4>'
+ ''
+ '<h4>Resources</h4>'
+ ' <ul style="list-style-type:none;">'
+ ' <li><a href="../resources.asp?topic=asp">ASP</a></li>'
+ ' <li><a href="../resources.asp?topic=cataloging">Cataloging</a></li>'
+ ' <li><a href="../resources.asp?topic=css">CSS</a></li>'
+ ' <li><a href="../resources.asp?topic=databases">Databases</a></li>'
+ ' <li><a href="../resources.asp?topic=html">HTML</a></li>'
+ ' <li><a href="../resources.asp?topic=Information%20Architecture">Information Architecture</a></li>'
+ ' <li><a href="../resources.asp?topic=javascript">JavaScript</a></li>'
+ ' <li><a href="../resources.asp?topic=php">PHP</a></li>'
+ ' <li><a href="../resources.asp?topic=web%20design">Web Design</a></li>'
+ ' <li><a href="../resources.asp?topic=xml">XML</a></li>'
+ ' </ul>'
+ ' <h4><a href="../stories/">Stories -Tutorials, Code Demostrations</a></h4>'
+ ' <h4><a href="../code_playground.asp">On the BLeading Edge</a></h4>'
+ ' <p><a href="../rss.xml"><img src="http://www.librarywebchic.net/images/xml.gif" alt="XML RSS Feed" width="36" height="14" border="0"></a></p>'
+ ' <h4><a href="../email_me.asp">Email Me</a></h4>'
+ ' <h4><a href="../web_chic_feeds.asp">My Feeds</a></h4>'
+ '</div>'
+ '</div>');
In contrast, the code for the server-side include just contains plain html that gets added into the page. That isn’t to saw it can’t contain other things like server-side scripting. It just in this case it doesn’t. The point is that the file is EXACTLY what I pulled from the page. See below
<div id="links">
<div class="sidetitle"> </div>
<div class="side">
![](http://www.librarywebchic.net">home</a><a href="http://www.librarywebchic.net">http://www.librarywebchic.net</a>">Home</a></h4><br /> <h4><a href="../about.asp">About</a></h4><br /><h4><a href="../articles.asp">Articles and Presentations</a></h4> <br /> <h4><a href="../work.asp">Work</a></h4><br /> <h4><a href="../reading.asp">Reading List</a></h4></p>
<p><h4>Resources</h4><br /> <ul style="list-style-type:none;"><br /> <li><a href="../resources.asp?topic=asp">ASP</a></li><br /> <li><a href="../resources.asp?topic=cataloging">Cataloging</a></li><br /> <li><a href="../resources.asp?topic=css">CSS</a></li><br /> <li><a href="../resources.asp?topic=databases">Databases</a></li><br /> <li><a href="../resources.asp?topic=html">HTML</a></li><br /> <li><a href="../resources.asp?topic=Information%20Architecture">Information Architecture</a></li><br /> <li><a href="../resources.asp?topic=javascript">JavaScript</a></li><br /> <li><a href="../resources.asp?topic=php">PHP</a></li><br /> <li><a href="../resources.asp?topic=web%20design">Web Design</a></li><br /> <li><a href="../resources.asp?topic=xml">XML</a></li><br /> </ul><br /> <h4><a href="../stories/">Stories -Tutorials, Code Demostrations</a></h4><br /> <h4><a href="../code_playground.asp">On the BLeading Edge</a></h4><br /> <p><a href="../rss.xml"><img src="<a href="http://www.librarywebchic.net/images/xml.gif"></a><a href="http://www.librarywebchic.net/images/xml.gif">http://www.librarywebchic.net/images/xml.gif</a>" alt="XML RSS Feed" width="36" height="14" border="0"></a></p><br /> <h4><a href="../email_me.asp">Email Me</a></h4><br /> <h4><a href="../web_chic_feeds.asp">My Feeds</a></h4><br /></div><br /></div></p>
<p></code></p>
<p>In addition, the file which is the server side include file can have any extension. Sometimes people use .inc for include or htmlf for HTML fragment. Recently, I have started using the ASP extension though. The reason for this is security. Your include file may have information in it like your database connection string (which contains a username and password) that you don’t want other people to be able to see. If you save it with an extension other than one for a file that has server side processing all this code can be seen. By using the ASP or PHP extension you hide the server-side scripting code that contains the sensitive information. It is important to note that you can’t do this with a client-side includes and that the file must have a .js extension (to denote the fact that it is JavaScript).</p>
<p></p>
</div><!--end entry-->
</div><!--end content-->
<div id="sidebar">
<ul>
<li id="search-3" class="widget widget_search"><h2 class="widgettitle">Search</h2>
<form method="get" id="search_form" action="http://www.librarywebchic.net/">
<div>
<input type="text" value="type and press enter" name="s" id="s" onfocus="if (this.value == ){kind=link}