Server Side Includes (SSI)

Server Side Includes

My understanding so far...

The default SSI date reporting format is: Wednesday, 08-May-2024 19:13:36 EDT before you specify a format.

Today is Wednesday, May 08, 2024.

There is a Server Side Include (SSI) directive working in the code of this page to put the day and date into the boxed line just above. This version is formatted to show the date with fully spelled out names of day, month and the full four-digit year.

A typical SSI entry for a date and time, like the code displayed below has two parts: a configuration or format for the date, and an echo of the date information using that format. Each directive is set off in an html comment. The format looks like this:

<p style="font-weight:bold">Today is <!--#config timefmt="%A, %B %d, %Y" --> <!--#echo var="DATE_LOCAL" --></p>

I hope you noticed that the information is accurate for today as you access this page. SSI updates the page as needed.

Check the time listed here: 19:13:36 ... Wait a bit ... Refresh the page and check the time. If you waited long enough, the minute value changed. Cool! (The time is for the server, in this case a Central US timezone, which may not match your local time.)

For Greenwich Mean Time: 23:13:36 the code is:

Server side Include code can be embedded wherever we need to see the day/date/time information. It will be correct, assuming that the server operator has been vigilant to keep the server's clock correct. Fortunately most people who set up web servers have set the server to get its clock information from the standard time servers out on the Internet. Being synchronized is important in networked systems.

Some of the other common SSI directives do not need a format component. The next paragraph is "included" from an external file by using this short SSI directive:

The text and style formatting of a separate file have been inserted into the current page using a Server Side Include directive. SSI seems to be an early method for building dynamic web pages.

All the code for that paragraph, including the style information was from the external file. It got included here. The idea is to be able to build a page from component elements which can be manipulated independently. SSI is an older way to get dynamic content on a page. Much of the stuff of the dynamic pages we see today don't bother with SSI at all and build pages of dynamic content by using scripting languages like JavaScript, PHP, Python, Ruby and appropriate support frameworks instead.

#flastmod (file last modified ) is the SSI directive which picks up the modification date for any file on the server. The "virtual" component says you have access to any file on the server, not just in the immediate directory.

By using a slash, you can make the SSI start from the site's root directory  so that this version would show the date of the main index.html file instead of the one in the local directory.

If you used "file" instead, the file would have to be in the same directory as this page file (or in a subdirectory of the current location). To show the modification date of the index.html file, just enter the following short code into the paragraph where you want it: .

From this:

<!--#config timefmt="%A, %B %d, %Y (%H:%M:%S)" --><!--#flastmod file="index.html"-->

You get this: Saturday, March 25, 2023 (15:40:17) which is the day, date and time the index file in this programming directory was last modified. You should see that you can insert characters like the parentheses into the #config part.

Be alert. The most recent time format is in effect. Initially, I did not specify a format for this and it repeated the hour:minute:second layout from the preceding time directive. I had to add a more appropriate format to work with the #flastmod directive.

Another point to note, while developing the page, it had to be repeatedly transferred to the server. Trying to test SSI directives doesn't work when just opening a web file from your own local drive.

One practical application for SSI might be a page with a list of important files on a server which shows their last modification date. Paying attention to the age of pages can help me decide where to focus my next effort. Not all files need to be "New, new, NEW!" but they probably need occasional attention.

The formats shown below, which are then used in the following table, have lower case configuration formats for the day and month. The code %a produces a shortened day name like Wed while the %A format displays the full day name: Wednesday. You'll notice the formats used here include the time as well, shown in the 24 hour clock way using %H, and %M.

<tr>

    <td>/programming/index.html <!-- #config timefmt="%a, %b %d, %Y - %H:%M" -->>/td>
    <td style="background:#f9f9ff"> <!--#flastmod virtual="/programming/index.html" --> </td>
</tr>

File Name	Last Modified
/index.html	Tue, May 07, 2024 - 14:02 Note: If you change the name of a file as was done here for the site's main index file, you will get an error message.
/programming/index.html	Sat, Mar 25, 2023 - 15:40
/programming/javascript/index.html	Fri, Feb 17, 2023 - 13:16

Site Updates is a live example of the files I want to watch to have a sense of the "currency" of the site.

The server must have Server Side Includes active. The fact that you are able to see SSI results in this page indicates that my web host, Hostway, has SSI set up on the server instance allocated to me. Look closely to note that the file extension isn't the standard file.html. It is instead file.shtml so that the server knows there are SSI directives in it.

JavaScript can use the Document Object Model (DOM) of html to put information about the current file, too. The page footer shows the full address of the current file.

<script type="text/javascript"> document.write(document.URL); </script>

The DOM has access to information about the "current" document, but it cannot get to information about other files. That's the work which SSI does. Although the amount of code for SSI is small, the modification date in the footer instead uses longer JavaScript code to put in the date instead of using SSI. The footer is part of most of the pages on this site. Making all the html pages work with SSI is not practical. It slows down access to ordinary files. You may want to read more in the references linked below.

References

HTML Goodies Tutorial from which this page was developed
SSI information for the popular Apache Web Server
Time Format Codes
Document Object Model
Local Time - To put a person's local computer system time on your web page.