Intelligent Footers
Overview
By the term "intelligent footers" I mean footers that are able to provide page-specific information automatically. The "Basic Footer" below, really has no intelligence but by using server-side includes (SSI) it can consist of a single file that is used across your website. The advantage is that if it needs updating there's just a single file to update.
The next version, named "A Little Better," adds a little more SSI so that the last modified date, as well as the copyright date, are automatically generated, and for its simple use requires no updating.
The third version, "Better Yet," takes this even further and by employing a little Perl creates a footer that really is intelligent because it can modify itself depending on the page it's on, and it can also provide an actual last modified date for a webpage that is using includes to insert snippets. In other words, it will show the last updated date as the date of the most recent change, whether that's in the file itself, or an included snippet.
A Basic Footer
The basic footer employ SSI in its simplest form, to include one file (the included snippet) into another (the host file). Supposed we a footer on each page on our website. The way to do this is will SSI is to use this,
<!--#include virtual="/inc/footer.html" -->
Where footer.html might look like this.
<div class="footer">
Last Updated: November 3, 2023
Copyright © 2024 My Company
<a href="/about.shtml">About this site</a>
</div>This would produce the following.
A Little Better
The problem with the basic footer is that the date information is hardcoded and will be difficult and time-consuming to update, if we even remember to do it.
Instead of including footer.html we can include the file footer.shtml as shown here,
<div class="footer">
<!--#config timefmt="%A, %B %d, %Y" -->
Last Updated: <!--#echo var="LAST_MODIFIED" -->
<!--#config timefmt="%Y" -->
Copyright © <!--#echo var="DATE_LOCAL" --> My Company
<a href="/about.shtml">About this site</a>
</div>This would produce the following.
Since the included file is itself a file containing SSI code, it is processed prior to being output. The information displayed in the footer will now be dynamically generated so the last modified date as well as the copyright date will be current for that page, and the current year. Notice that the config directive is used twice to modify the date format as needed.
Better Yet
When I use,
I am getting the last modified date of the host file, that is the file in which this SSI directive is included.
If I want the last modified date of the included latest news snippet, I can do this,
where the flastmod directive returns the last modified date of the specified file.
However I still don't know which file is more recent and I want to display the most recent date only.
In order to do this, I need to add some intelligence to the footer. SSI will allow me to execute a file so instead of including footer.shtml, I created footer.pl and have SSI execute it using,
Footer.pl takes as a parameter the name of the latest news HTML snippet, compares the last modified date of this file to the last modified date of the host file, and then outputs a footer with the most recent date.
intelligent-footer.pl
intelligent-footer.html
Some Explanation
The intelligent-footer.pl does a couple of things. First, it looks to make sure that there is a QUERY_STRING in the URL and if so, sets it to the variable, $INCLUDED_SNIPPET. If not, it set the $NEWEST_FILE to the host file for dating.
In the case of an included file, the script creates the complete path to that file, shown in lines 24-31. This is assuming that the included snippet is in the same directory as the host file. If your location differs you'll need to modify line 31 accordingly.
The script then compares the LAST_MODIFIED date of the hsot file to the included file and sets $NEWEST_FILE to that file. It then accesses the LAST_MODIFIED date of that file using "stat."
The last part of the script then opens FOOTER_FILE. Now, it is not necessary to actually do this but I have it because I've used this idea over the years (including in my "Adding CSS to External Webpages" article) so have it here. What it does is open a separate file, reads it in, and replaces sections with infomration determined in the script. So <!--Date-->, <!--YEAR-->, and <!--URL--> are each replaced values determined in the script. Also, in lince 5 of the intelligent-footer.html file you'll notice I have a "printonly" class in the span element which encloses the line URL: <--URL-->. The CSS for the example code has this but I'll show it here.
I did this because I don't want the URL to be displayed on the page when it's being viewed in the browser because that's really unnecssary. However, if the visitor was to print this page then the URL will be displayed and provide that on the printed page.
