An Introduction to Server Side Includes

server side includes technicianServer Side Includes (SSI) are a minimalistic approach to web technology that allows dynamic behavior within HTML pages that are innately static. Server Side Includes predate servlets such as JSP and ASP. The Server Side technologies belong to the family of Common Gateway Interface (CGI) techniques. SSI syntax is simple. An absence of external dependencies and extremely low barriers to entry has helped maintain SSI’s popularity. Currently Apache, Nginx, Lighttpd, and IIS are the four major web servers supporting this technology.

How It Works

Server Side Includes are too primitive to be considered a scripting language. SSI comprises of directives of the following generic form:

<!--#directive parameter=value parameter=value -->

These directives are placed within regular HTML files that are saved with the extension .shtml, .stm, or .shtm. The special extension enables web server support for SSI to distinguish pages that have directives and to subsequently execute those directives.

The directives’ syntax has the form of an HTML comment. The comment syntax ensures that the directives are not visible to the end user. Corresponding pages can be hosted in a web server that does not support this technology.

Learn more about Server Side Includes by taking a course at Udemy.com

Include Directive

The include directive is the most used and most useful of all directives. The following example depicts the syntax of an include directive.

<!--#include file="pagefooter.html" -->

or

<!--#include virtual="sitemenu.cgi" -->

When placed in an HTML file, include directives display the content of another file or resource in place of the code that calls that file or resource.

For example, consider a file called “pagefooter.html” with the following content:

<p>This is a footer</p>

Next, consider a regular HTML file saved as a SHTML file with the following content:

<html><body>

This is some regular content.<br>

<!--#include file="pagefooter.html" -->

</body></html>

Because the bold include directive is a placeholder for a resource or some object, the final HTML content that is sent to the client browser is:

<html><body>

This is some regular content.<br>

<p>This is a footer</p>

</body></html>

Note that the original SHTML file stored on the server does not get modified as a result of this operation. All dynamic content is generated in memory and at runtime.

Want to learn more about Server Side Includes? Take a course at Udemy.com

Exec Directive

The Exec directive is used nearly as much as the include directive. This directive’s syntax is the following:

<!--#exec cgi="/cgi-bin/somescript.cgi" -->

or

<!--#exec cmd="ls -l" -->

The Exec directive executes a program, script, or shell command on the server and inserts the corresponding output in the place of the directive code.

Control Directives

The control directives incorporate a very basic if-then-else control flow and conform to the following syntax:

<!--#if expr="${expression}" -->

...

Block to be displayed if the expression evaluates to true.

...

<!--#endif -->

OR

<!--#if expr="${expression2}" -->

...

Block to be displayed if the expression evaluates to true.

...

<!--#elif expr="${expression3}" -->

...

Block to be displayed only if the first expression is not true and the second expression evaluates to true.

...

<!--#endif -->

OR

<!--#if expr="${expression4}" -->

...

Block to be displayed if the expression evaluates to true.

---

<!--#else -->

...

Block to be displayed if the expression evaluates to false.

...

<!--#endif -->

The Echo Directive

The Echo directive displays the content of a specified HTTP environment variable with the following syntax:

<!--#echo var="{variable_name}" -->

The variable name can be one of the following:

Screen1
The following is an example of displaying the current date at the time of page rendering:

<!--#configtimefmt="%m/%d/%y" -->

<!--#echo var="DATE_LOCAL" -->

The preceding directives produce the following output within HTML content.

05/29/14

The Set Directive

The set directive sets the value of an SSI variable and has the following syntax:

<!--#set var="key1" value="value1" -->

The set directive is not supported by all web server implementations; currently, it is being supported by Apache Web Server and Lighttpd.

Enabling Server Side Includes on the Server

The following description only pertains to Apache Web Servers running on Unix/Linux. The configuration will vary according to the underlying server platform and operating system, but the following, general instructions show you the steps to enable SSI on the server:

Create a file called .htaccess with the following content:

AddType text/html .shtml

AddHandler server-parsed .shtml

Options Indexes FollowSymLinks Includes

Place the .htaccess file in the root of the web directory. This placement enables Server Side Includes for all web pages with .shtml extensions across the entire site. To restrict this feature to a given sub-folder, copy the .htaccess file to the root path of the specific directory.

The enabled configuration requires HTML pages to have an .shtml extension in order to trigger Server Side Includes. If Server Side Includes are needed across all pages, turn on SSI for standard .html and .htm pages. That way, there is no need to rename files or adhere to specific naming conventions. In order to do this, add the below code to the .htaccess file:

AddHandler server-parsed .html

AddHandler server-parsed .htm

Learn more about Servlets by taking a course at Udemy.com

Conclusion

Unlike other technologies – ASP, JSP and servlets-, Server Side Includes do not require any extra engines or modules plugged into the Web server platform. The whole interpretation and inclusion logic is integrated into the Web server itself, so you have fast and efficient generation of content.

With the include directive, complex HTML pages are broken down into simpler blocks with each block placed in a separate file. If the site follows a consistent structure across all pages, then some of the blocks (e.g. header, footer) can be reused across the pages. This modularity simplifies development of the web site and improves manageability.