|
Reducing Redundancy with Server-Side Includes |
|
| Web Toolkit Tutorial Home | Table of Contents | Using Query Strings | Server-Side Includes with Logic |
|
We are about to create a mutlitude of SSP files and it is important that all the 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 J3 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 j2eeheader4.inc. The file would look something like this:
<html>
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 j2eefooter4.inc. The file would look
something like this:
<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> <!-- Main content goes here -->
<!-- Main content ends here -->
6.
Start with the file logon3.ssp. Delete all lines up to (and including) the last
<hr> tag. Insert the include statement for j2eeheader4.inc. Remove the
last 3 lines. Insert the include statement for j2eefooter4.inc. Change the ACTION
attribute of the FORM tag to ServletVerify4. Save file as logon4.ssp.
The first line of this file should be the following:
Copyright ToyzInc. 2003 </center> </body> </html>
<jsp:include page="j2eeheader4.inc" flush="true" />
The last line should be:
<jsp:include page="j2eefooter4.inc" flush="true" />
The attribute flush is a boolean (mandatory) parameter indicating whether or not
to flush the page, i.e., “true” will cause the page to be flushed. This is always a good
idea for include files.
7. Create servlet ServletVerify4 and copy the doPost:response: method from ServletVerify3 into this class. 8. Modify the two lines that contain the redirectTo: method. The change would be as follows:
ifTrue: [ aResponse redirectTo: '/teach/main4.ssp'. ]
9.
Accept the changes to ServletVerify4.
ifFalse: [ aResponse redirectTo: '/teach/logon4.ssp?msg=111'.]. 10. Start with the file main3.ssp from the previous lesson. 11. Delete all lines up to (and including) the last <hr> tag. Insert the include statement for j2eeheader4.inc. Remove the last 3 lines and insert the include statement for j2eefooter4.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 main4.ssp. The change would be as follows:
<jsp:include page="j2eeheader4.inc" flush="true" />
12.
Test your changes.
<% signon := session at: 'signon' ifPresent: [ :signon | response write: ('<h3>Hello ', signon firstName,'</h3>'). response write: '<br><br>'. response write: '<a href=j2ee_employees4>List of Employee Courses</a>'. ]. session at: 'signon' ifAbsent: [ response write: '<h5>Your session has timed out.</h5>'. response write: '<a href=logon4.ssp?msg=222>Please Login Again</a>'. ]. %> <h4>Welcome to the TEACH home page</h4> <jsp:include page="j2eefooter4.inc" flush="true" /> |
||||||
|
Let's test the impact of server-side include files by getting the employee page workingSo 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 indded 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
j2ee_employees4.ssp. The file should look like the following:
<jsp:include page="j2eeheader4.inc" flush="true" />
14.
Test your changes.
<table width=90% border=0> <tr> <td width=200 align=center> <a href=main4.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> <jsp:include page="j2eefooter4.inc" flush="true" /> 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 j2eeheader4.inc file should look like the following (with the changes highlighted):
<html>
The j2eefooter4.inc file should look like the following (with the changes highlighted):
<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> <!-- Main content goes here -->
<!-- Main content ends here -->
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.
<br><br><br> Copyright ToyzInc. 2003 </center> </body> </html> 17. From the System Browser, <Operate-Click> the category of ToyzInc and select File Out As.... Enter ToyzInc_j4.st as the filename. |
||||||
|
|
Congratulations! Phase 4 of the logon process is complete
You now should be able to:
|
| Web Toolkit Tutorial Home | Table of Contents | Using Query Strings | Server-Side Includes with Logic |