Cincom VisualWorks Web Toolkit Tutorial : Server-Side Includes

Reducing Redundancy with Server-Side Includes

We are about to create a mutlitude of SSP files and it is important that all pages look consistent across the application. The use of server-side include files allow us to have the same code (or HTML) on many pages but stored in just one place.

In this lesson, we will create 2 server-side include files. This will allow us to makes changes in just one file and have it propogated across the entire site (or application).

1. If VisualWorks is not already running, please start running it now, load the Web Toolkit parcel and start a Wave HTTP server. You should also file in the code from Toyz Inc 1 and make sure the initialize method of the Filestuff class sets the correct location of the directory variable (i.e. the directory that contains the 3 data files).

2. The concept of "include" files has been around for quite some time. The COBOL language referred to them as copybooks and the language of C still refers to them as include files. The idea is to take code that more than one program could use and store it in one place. Should you make a change to an include file, all the programs that pull it in would change as well.

Below is a diagram depicting the concept.

Figure 1. Code (or text) that is common to more than 1 file

Figure 2. The common code kept "outside" in a separate file.

In this lesson, we will put this theory into practice.

3. It's time to compare the login page with the home page. Since both files originally started out from the file template.htm, this would be a good place to start. In comparing both files (and knowing where we started to make changes), it can be determined that all the lines are the same, starting with the first <html> tag all the way down to the first <hr> tag. These lines of code would make the perfect candidate for our first include file.

4. Starting with the file template.htm, delete all lines after the last <hr> tag. Save the file as header3.inc. The file would look something like this:

<html>
<head>
<title>The Toyz Inc. TEACH System</title>
<link rel="stylesheet" type="text/css" href="toyzinc.css">
</head>
<body bgcolor=white>
<center>
<hr width="75%" size=4>
<table border=0 cellpadding=2 cellspacing=2 width=75% bgcolor=#FFFFFF>
<tr>
<td width="40%" align=right>
<img src=images/toyzinc.gif>
</td>
<td width="50%" align=left>
<h3>
Toyz Inc.
<br>
Employee
<br>
Accreditation &
<br>
Course
<br>
History
</h3>
</td>
</tr>
</table>
<hr width="75%" size=4>

5. Starting with the file template.htm, delete all lines except for the last 3 lines. Add a "copyright" statement before the <center> tag. Save the file as footer3.inc. The file would look something like this:

Copyright ToyzInc. 2003
</center>
</body>
</html>

6. Start with the file login2.ssp. Delete all lines up to (and including) the last <hr> tag. Insert the include statement for header3.inc. Remove the last 3 lines. Insert the include statement for footer3.inc. Change the ACTION attribute for the FORM tag to validate3.ssp. Save file as login3.ssp. The first 2 lines of this file should be the following:

<form action=validate3.ssp method=post name=form3>

The last 2 lines should be:

</form>

7. Start with the file validate2.ssp from the previous lesson.

8. Modify the two lines that contain the redirectTo: method. The change would be as follows:

ifTrue: [ response redirectTo: 'home3.ssp'.]
ifFalse: [ response redirectTo: ('login3.ssp?msg=111').].

9. Save the file as validate3.ssp.

10. Start with the file home2.ssp from the previous lesson.

11. Delete all lines up to (and including) the last <hr> tag. Insert the include statement for header3.inc. Remove the last 3 lines and insert the include statement for footer3.inc. Also, let's start to adhere to the layout that the HTML Author has provided - links on the left side and general information/data in the main section. Save the file as home3.ssp. The change would be as follows:

<table width=90% border=0>
<tr>
<td width=200 align=center>

<%
employeeCookie := request cookieValueAt: 'employee'.
(employeeCookie size) = 0
ifTrue:
[
response write: '<a href=login3.ssp?msg=222>Login Again</a>'.
response write: '</td>'.
response write: '<td align=center>'.
response write: '<h3>Your cookie has expired. Please login again.'.
]
ifFalse:
[
response write: '<a href=employees3.ssp>List of Employee Courses</a>'.
response write: '</td>'.
response write: '<td align=center>'.
response write: ('<h3>Hello ',employeeCookie,'</h3>').
].
%>
</td>
</tr>
</table>

12. Test your changes.

Let's test the impact of server-side include files by getting the employee page working

So far, our include files are pulled into just 2 files. In this section of the lesson, we will take the employee list page from a few lessons back and incorporate it into our application. We will then make a change to both include files and verify that the change did indeed propogate across all pages.

13. Start with the employees.ssp file from the sandbox directory and incorporate the include files as well as our layout. Save the file in the teach directory as employees3.ssp. The file should look like the following:

<table width=90% border=0>
<tr>
<td width=200 align=center>
<a href=home3.ssp>Home Page</a>
</td>
<td align=center>
<table border=1>
<h2>Employees at Toyz Inc.</h2>
<%
toyz := Toyz new.
employees := toyz getEmployees.
employees do: [ :each |
response write: '<tr>'.
response write: ('<td>',each number,'</td>').
response write: ('<td>',each level,'</td>').
response write: ('<td>',each firstName,' ',each lastName,'</td>').
response write: '</tr>'.
].
%>
</table>
</td>
</tr>
</table>

14. Test your changes.

15. The HTML author thinks that the "TEACH" title in the header should be blue. Also, there is not much room between the end of the main content and the copyright notice. The header3.inc file should look like the following (with the changes highlighted):

<html>
<head>
<title>The Toyz Inc. TEACH System</title>
<link rel="stylesheet" type="text/css" href="toyzinc.css">
</head>
<body bgcolor=white>
<center>
<hr width="75%" size=4>
<table border=0 cellpadding=2 cellspacing=2 width=75% bgcolor=#FFFFFF>
<tr>
<td width="40%" align=right>
<img src=images/toyzinc.gif>
</td>
<td width="50%" align=left>
<font color=blue>
<h3>
Toyz Inc.
<br>
Employee
<br>
Accreditation &
<br>
Course
<br>
History
</h3>
</font>
</td>
</tr>
</table>
<hr width="75%" size=4>

The footer3.inc file should look like the following (with the changes highlighted):

<br><br><br>
Copyright ToyzInc. 2003
</center>
</body>
</html>

16. Test your changes. Verify that the title in the header is blue and that we now have a little more space before the copyright notice.

Congratulations! Phase 3 of the login process is complete

You now should be able to:

	Create an include file
	Modify an SSP page that pulls in an include file
	Verify that a change to an include file changes all files that pull it in