A Method To Minimize HTML Code Duplication Server-side Includes A Method To Minimize HTML Code Duplication
What Is SSI? Server-side Includes (SSI) are a collection of commands you can use to make web pages more dynamic You can use SSI to: Include another HTML file at a specific point in a file Display when a specific file was last modified Display information about the environment in which this page is generated For example: include the HTML code for a common footer that appears on all pages.
So, What Really Happens? The Web uses a “request/response” architecture The “normal” process is: The browser sends a request to the server The server locates the requested HTML file and reads it The server sends the HTML code to the browser Request Response
And…? With SSI, there is a slightly different process The browser sends a request to the web server The web server locates the requested file The web server reads the requested file The web server locates and executes any SSI directives found in the file The web server replaces the SSI directive in the file with the result of that directive’s execution The web server sends the resulting HTML to the browser
SSI in Action Request Sent Locate File Respond with the Updated File Read File <body> <div id=header) … <!—SSI--> </div> <body> <div id=header) … <div id=“footer”> Copyright © 2010 All rights reserved </div> Locate File to Include SSI in Action <div id=“footer”> Copyright © 2010 All rights reserved </div> Replace the SSI directive with the included file
When Will the Server Look For SSI? The “trigger” that tells the server to search for and process SSI directives will vary from server to server We are using an Apache server on Banjo Apache has three ways it can be configured to look for SSI directives: Parse all the files processed, looking for SSI directives Parse only those files with an .shtml extension Parse any .html files that have the execute bit set in the file permissions UNDERLINED bullet is how Banjo does it.
SSI Includes Of all the SSI directives, the ability to include the content of a file within another file is the most popular There are two ways in which to include a file: The include file directive – used when we can specify the file in the current directory or lower The include virtual directive – used when we need to go outside the current directory The file must be on the same server
“Including” an Example … <div id=“sidebar”> … </div> <footer> <!--#include file="includes/footer.html"--> </footer> </body> </html> For this code, the server would locate the file footer.html in the includes subdirectory The server would substitute the contents of footer.html for the #include directive The directive: <!--#include virtual="includes/footer.html"--> would achieve the same result If we needed to go outside the current directory, we’d need to use virtual: <!--#include virtual=”../includes/footer.html"-->
But Wait… There’s More! SSI is not limited to only including one file in another! SSI has many commands that can report on the environment in which a page is processed SSI can also give us information about the pages themselves
SSI and the Environment As a quick exercise, create a web page named: system.shtml In the body of the page, include only this command: <!--#printenv--> Mount the page on Banjo and view it See if you can identify what the different parts or the report mean
More SSI directives Command Description <!--#echo var="DATE_LOCAL"--> Return the current date and time <!--#echo var="DOCUMENT_NAME"--> The name of the web page file containing this command <!--#echo var="HTTP_REFERER"--> The link you used to get to this page <!--#echo var="DATE_GMT"--> Greenwich Mean Time <!--#echo var="REMOTE_ADDR"--> The IP address of your computer! <!--#echo var="HTTP_USER_AGENT"--> Information about your browser and operating system <!--#fsize file="filename"--> The size of the named file in bytes <!--#flastmod file="filename"--> The date/time the named file was last updated Relate the variable names to the identifiers dumped with the #printenv command
Look at the examples In the example SSIDemo.shtml you see many examples of information you can obtain about the current page and the browser/server environment In the example SSIDates.shtml you will see: A way to use SSI to create a dynamic “backwards link” A way to modify how dates are displayed using SSI This technology is the basis for PHP, which you’ll be exploring in 330 (Rich Media Web App Dev I).
Try It Yourself! Today’s ICE will let you try using SSI to bring more dynamic information and content into your web pages