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. TNFlinksBox.txt comprised of the following:
  - An <h5> element, class=sideBoxTitle, content: Website links
  - A <div> element, class=sidePanelContents containing:
    - A <p> element, class=norm10, a link to index.shtml, text: Activities home page
    - A <p> element, class=norm10, a link to index.shtml#acts, text: Coming events
      
      followed by a <br> element
      then a link to index.shtml#docs, text: Supporting documents
    - A <p> element, class=norm10, a link to SuggestionBox.shtml, text: Suggestion Box
    - A <p> element, class=norm10, a link to tripsite.shtml, text: Travel with us
4. TNFtripBox.txt, another links box set up, this one for our trip, comprised of the following:
  - An <h5> element, class=sideBoxTitle, content: Links for the trip
  - A <div> element, class=sidePanelContents containing:
    - A <p> element, class=norm10, a link to tripsite.shtml, text: Tripsite home page
      followed by a <br> element
      
      then a link to tripStyle.shtml, text: Style of the trip
      followed by a <br> element
      
      then a link to itinerary.shtml, text: Detailed itinerary
      followed by a <br> element
      
      then a link to prices.shtml, text: Prices
      followed by a <br> element
      
      then a link to tripPlot.shtml, text: Plot summary
      followed by a <br> element
      
      then a link to signUp.shtml, text: Sign up to go
    - A <p> element, class="norm10 ph", text: Destinations
    - A <ul> element, class=norm10, with three <li> elements:
      - a link to cardiff.shtml, text: Cardiff
      - a link to tenby.shtml, text: Tenby
      - a link to stdavids.shtml, text: St. David's
5. 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 processed
Second, upload the above 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. Replace all lines between your <div class=sideBox> and the end tag </div> with an include for TNFlinksBox.txt
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 links to SuggestionBox.shtml and tripsite.shtml won't work until after you've completed the remaining 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. Replace all lines between your <div class=sideBox> and the end tag </div> with an include for TNFlinksBox.txt, followed by an include for TNFtripBox.txt
5. Replace all lines after the </div> element end tag for 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, update your workStyles.css by
1. Merging in the lines from "suggestionStyles.txt" (copy and paste then arrange in alphabetical order)
2. Upload the resulting workStyles.css to your server
Sixth, create a couple of include files:
1. 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
2. Create an include file named "Webemail.txt" with an email address in it (yours or a made up one); upload it to your server
Seventh, 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. Open shtml_starter.txt and save it as SuggestionBox.shtml
2. Delete the first line (the comment)
3. Replace the value in the <title> element with "Feedback"
4. Delete the line containing "**sub_topic"
5. Replace the comment about inserting links boxes with an 'include' for TNFlinksBox.txt
6. After the line containing <div> with class=contentColumn, insert an include directive for "suggest.shtml" (this file is already in your AdvancedWebFiles directory)
7. Save this updated version of "SuggestionBox.shtml" then upload it to your server
8. 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)
Eighth, 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 string "**activities_page" with "Sign up to join our trip to ..."
5. Remove one of the <br> elements after this text
6. Replace the string "**sub_topic" with "Wales, following: 'Welsh Rarebit Gone'"
7. Replace the comment about inserting links boxes with an 'include' for TNFlinksBox.txt
8. Then add an include for TNFtripBox.txt
9. In the contentColumn DIV element, replace the blank lines with an include directive for signUpForm.shtml ("signUpForm.shtml" is already included in your AdvancedWebFiles directory)
10. Save this as "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