Server Side Includes | Still Plugging Away

Note: Below I've chosen to use the term "directives" to identify SSI statements in order to distinguish them from HTML statements.

Hands on exercise

This exercise focuses on these objectives:

Retrofitting our existing solution files (index.html and tripsite.html) to use server side includes

Note that from now on, all page names should end with .shtml
- This involves creating several include files, then modifying index.html and tripsite.html to use these files
Using a supplied file ("shtml_starter.txt") to create a couple of new pages

First, create some include files based on your current pages:
1. TNFstartPage.txt comprised of:
  - A doctype statement
  - A copyright statement (optional)
  - An <html> start tag with a language specified
  - A <head> start tag
  - A <meta> statement for the character set
  - Links to the workStyles.css and photos.css files
2. TNFafterHead.txt comprised of:
  - A </head> end tag
  - A <body> start tag, with "class=back"
3. TNFtripBox.txt comprised of a <p> tag with class=norm containing:
  - A link to the tripsite home page (that is, to itself, tripsite.shtml)
  - A link to a page about the Style of the trip (tripStyle.shtml)
  - A link to a page with the Detailed itinerary (itinerary.shtml)
  - A link to a page with the Prices for the trip (prices.shtml)
  - A link to a page that provides a Plot summary of the novel (tripPlot.shtml)
  - A link to a page for people to Sign up to go on the trip (signUp.shtml)
4. TNFendBox.shtml which contains:
  - All lines in index.html after the </div> end tag for the element with class=contentColumn, to the end of the file
  - Use #config and #echo directives to display the copyright year
  - Use #config and #echo directives to display the last-updated date
    
    Important Note: this file must have an extension of ".shtml" so that the #config and #echo directives are looked for
Second, upload these files to your server
Third, update index.html as follows:
1. Replace the lines up to your <title> element with an include directive for TNFstartPage.txt
2. Leave your <title> element as it was
3. Replace your </head> end tag and your <body> start tag with an include directive for TNFafterHead.txt
4. In your links box, after the <p> element containing the internal links, add a new <p> element with a link to "SuggestionBox.shtml" with text "Suggestion Box"
5. Replace all lines after the </div> element end tag with class=contentColumn, with an include directive for TNFendBox.shtml
6. Rename the file to end with ".shtml"
7. Upload the renamed file to your server
8. Test index.shtml to ensure all the links work
  (Well, the link to SuggestionBox.shtml won't work until after you've completed the fifth step in this exercise)
Fourth, update tripsite.html as follows:
1. Replace the lines up to your <title> element with an include directive for TNFstartPage.txt
2. Leave your <title> element as it was
3. Replace your </head> end tag and your <body> start tag with an include directive for TNFafterHead.txt
4. The <div> element with class=sidePanelContents should contain:
  - A <p> element with class=norm10 and a link to the Activities home page (i.e.: index.shtml)
  - An include directive for TNFtripBox.txt
  - The remainder of the navBoxes <div> element remains unchanged
5. Replace all lines after the </div> element end tag with class=contentColumn with an include directive for TNFendBox.shtml
6. Rename the file to end with ".shtml"
7. Upload the renamed file to your server
Fifth, use the supplied file "shtml_starter.txt" to create a new page, "SuggestionBox.shtml"
Note that "shtml_starter.txt" expects TNFstartPage.txt, TNFafterHead.txt, and TNFendBox.shtml to be available
1. Merge the lines in "suggestionStyles.txt" in to your workStyles.css (copy and paste, put in alphabetical sequence)
2. Upload the updated workStyles.css to your server
3. Create an include file named "Webmaster.txt" with a name (yours or a made up one) as the only content; upload this to your server
4. Create an include file named "Webemail.txt" with an email address in it (yours or a made up one); upload it to your server
5. Open shtml_starter.txt and save it as SuggestionBox.shtml
6. Delete the first line (the comment)
7. Replace the value in the <title> element with "Feedback"
8. Delete the line containing "**sub_topic"
9. After the line containing <div> with class=contentColumn, insert an include directive for "suggest.shtml"
10. Save this updated version of "SuggestionBox.shtml" then upload it to your server
11. Test that the link from index.shtml works and that SuggestionBox.shtml displays as you would like.
  (Note that the form submission will not work yet)
Sixth, use the supplied file "shtml_starter.txt" to create a new page, "signUp.shtml"
1. Open shtml_starter.txt and save it as signUp.shtml
2. Delete the first line (the comment)
3. Replace the value in the <title> element with "Trip sign up"
4. Replace the value "**activities_page" with "Sign up to join our trip to ...
5. Remove one of the <br> elements after this text
6. Replace the value "**sub_topic" with "Wales, following: 'Welsh Rarebit Gone'"
7. Replace "**Links" with "Links for trip"
8. The include file= should be "TNFtripBox.txt"
9. In the contentColumn DIV element, replace the blank lines with an include directive for "signUpForm.txt"
10. Save this updated version of "signUp.shtml" then upload it to your server
11. Test that the link for "Sign up to go" works.
  (Note that the form submission will not work yet)

Supplemental materials

A cumulative summary of the contents of this course so far: Click here
For a combined cumulative summary of both Web courses so far, Click here

Lesson 4: Server Side Includes