Building Web Projects

with Server-Side Includes, a little Perl, and some JavaScript
Server-Dependent Content

Server-Dependent Content

Published: May 30, 2024
Revised: September 12, 2024
Post a comment

Overview

By using some simple server-side include (SSI) directives it's possible to write some code that works on different servers. Why is this necessary? Well, your development will usually take place on a server that's different from where the production code will eventually reside. Development servers can be your local machine, or maybe a separate development server for your organization. The simple examples shown below allow you to write code that will work on these different servers.

Use Cases

Here are a couple of simple use cases for this idea.

Displaing URLs

By using this code,

<!--#echo var="REQUEST_SCHEME" -->://<!--#echo var="SERVER_NAME" -->/path/file.html
in your .shtml page, the browser will display, https://www.buildingwebprojects.com/path/file.html

While this example just shows using this to create URLs to display on the page, it could also be used to create actual links on your page. Yes, it's true that if you use relative links in your page adding the server name and protocol (http or https) is not necessary, but using this code keeps displayed URLs consistent with any actual links that may be part of the discussion.

Building Form Action Links

A slightly more useful situation is where a form action depends on the server. In the code snippet below the SSI code allows it to work across different servers. So this,

<form action="<!--#echo var="REQUEST_SCHEME" -->://<!--#echo var="SERVER_NAME" -->/cgi-bin/script.pl" method="post">
   <input onclick="this.focus();this.select()" name="url" type="text" size="50" value="<!--#echo var="REQUEST_SCHEME" -->://<!--#echo var="SERVER_NAME" -->/path/file.html" /><br />
   <input type="submit" />
</form>

is converted to this,

<form action="http://bwp-dev/cgi-bin/script.pl" method="post">
   <input onclick="this.focus();this.select()" name="url" type="text" size="50" value="http://bwp-dev/path/file.html"><br />
   <input type="submit">
</form>

With Javascript

What if for some reason I was using JavaScript to output the HTML? Well, the previous example would look like this,

<script>
   document.write('<form action="<!--#echo var="REQUEST_SCHEME" -->:\/\/<!--#echo var="SERVER_NAME" -->\/cgi-bin\/script.pl" method="post"><input onclick="this.focus();this.select()" name="url" type="text" size="50" value="<!--#echo var="REQUEST_SCHEME" -->://<!--#echo var="SERVER_NAME" -->/path/file.html" \/><br /><input type="submit" \/><\/form>');
</script>

and it would produce the same output.

This last example shows that I can easlily integrate SSI directives in JavaScript.

Other Uses

What I've shown here are just some simple ideas. No doubt you'll be able to find other situations where this idea can be used in your projects.