N341 Home Work 5 - Project Validation, Modular Construction, Consistent Look & Feel

• Download Home Work 5 files to Project directory.

Note

• FrontPage reformats HTML by:
   
  • Open in Code
  • Right click | Reformat HTML

   

• IE caches files by default which can prevent opening of a later version. The effect is particularly noticeable during repeated tests when XML references an XSL file that has been changed but is not opened because of a cached version of the XSL.

The solution is to require IE to check for new versions on every visit to a page. In IE: Tools | Internet Options | Temporary Internet Files | Settings | Every Visit to Page

• Access denied - Blocked

The following error may occur when accessing XML files downloaded from one computer to another such as the ZIP files for the assignment. Vista (and perhaps XP) blocks access to files, presumably attempting to protect you from using files you have copied to your computer.

Unblock access to individual files by the following:

1. Open in Windows Explorer the directory containing the file, either the XML file or one referenced by the XML.
2. Right click on the file and open Properties.
3. Click Unblock.

The XML page cannot be displayed Cannot view XML input using XSL style sheet. Please correct the error and then click the Refresh button, or try again later. Access is denied. Error processing resource 'file:///W:/N341/Project/TraderSummaryContent.htm'.

 

Unblock access to all files in a directory by the following:

1. Download Streams, copy Streams.exe to Windows directory if possible.
2. To unblock all the files in directory c:\temp and any subdirectories enter:

   Streams –d –s c:\temp

Overview

Modules of the stock trading site, top and bottom navigation and content, have been implemented in home work 3 and 4.

The purpose of this assignment is to:

1. Complete left navigation for trading functions,
2. Perform data validation for some user input,
3. Organize the modules into a complete Web site.

Managing access - Home work 3 completed the user interface for registration and logging in of stock traders and logging out the current trader out. The user view to manage access appears at right.

Managing function - Home work 4 completed the bulk of the user interface for the site function.

The user view to manage site function appears at right.

The new left menu provides access to the trading functions after user login, the center content provides display of function results.

Look & Feel - A common user interface structure with site navigation at top, application navigation at left and content in the center.

The majority of the user interface is implemented by the following:

1. Interface for site welcome (Welcome.htm) - Completed.
2. Interface for registration (Register.htm) - Completed.
3. Interface for login (Login.htm) - Completed.
4. Interface for current stock holdings and value (Portfolio.htm) - Started in class.
5. Interface for trader summary (TraderSummary.htm).
6. Interface for available stocks to buy (BuyList.htm).
7. Interface for stocks owned to sell (SellList.htm).
8. Interface for shopping cart contents (CartSummary.htm).

1. Left Navigation (TradingNavigation.htm)

The trading navigation will appear on each page after a successful login, preferably on the left side.

Currently trading navigation provides access to trading applications through the following hyperlinks:

1. <a href="TraderSummary.asp">Account</a>

2. <a href="Portfolio.asp">Portfolio</a>

3. <a href="BuyList.asp">Buy</a>

4. <a href="SellList.asp">Sell</a>

5. <a href="CartSummary.asp">Cart</a>

6. <a href="CartCommit.asp">Commit</a>
   

Assignment 1

Currently the trading navigation is implemented as text links.

Improve the trading navigation design following Designing for Users guidelines and using buttons, hyperlinks, images, table, etc. For page space considerations organize as a column.

Implement the links inside the template defined below for compatibility with the overall site architecture:

TradingNavigation.htm

<xsl:stylesheet version="2.0" 
   xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
   xmlns="http://www.w3.org/1999/xhtml">
   <xsl:output method="html" />

   <xsl:template name="TradingNavigation">
      <!-- Navigation -->
      <h1></h1>
      <a href="TraderSummary.asp">Account</a><br/>
      <a href="Portfolio.asp">Portfolio</a><br/>
      <a href="BuyList.asp">Buy</a><br/>
      <a href="SellList.asp">Sell</a><br/>
      <a href="CartSummary.asp">Cart</a><br/>
      <a href="CartCommit.asp">Commit</a>
    </xsl:template>

    <xsl:template match="/">
       <xsl:call-template name="TradingNavigation" />
    </xsl:template>
</xsl:stylesheet>

<?xml-stylesheet type="text/xsl" 
               href="TradingNavigation.htm"?>
<top>
</top>

Testing - To see the navigation in a browser you'll need to load the TradingNavigation.XML file.

Hints - Build the navigation in FrontPage first, then paste into the template.

2. Validation (submitinputForm.htm)

Verify that all inputs to the registration and login forms are non-empty before submitting the form.

The Register.htm and Login.htm display input forms, site navigation and links to submit or reset the form.

The login page is assembled from topNavigation.htm and submitinputForm.htm by the Login.htm file.

The submit and reset links are produced by the "submitinputForm" template at:

<xsl:call-template name="submitinputForm" />

Login.htm

<xsl:stylesheet version="2.0" 
   xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
   xmlns="http://www.w3.org/1999/xhtml">
   <xsl:include href="topNavigation.htm" />
   <xsl:include href="submitinputForm.htm" />
   <xsl:output method="html" />

   <xsl:template match="/">
    <!-- Top Navigation -->
      <xsl:call-template name="topNavigation" />
      <!-- Left Navigation -->
      <xsl:call-template name="submitinputForm" />

    <!-- Content -->
      <h1>Login</h1>
      <form name="inputform" action="login.asp" method="get">
         <table border="0">
            <tr>
               <td>User name:</td>
               <td><input name="username" type="text" value="" /></td>
            </tr>
            <tr>
               <td>Password:</td>
               <td><input name="password" type="text" /></td>
            </tr>
         </table>
      </form>
   </xsl:template>
</xsl:stylesheet>

<?xml-stylesheet type="text/xsl" 
               href="Login.htm"?>
<top></top>

The current submitinputForm.htm is listed below. The document.inputform form is defined in the Login.htm file above. Remember that:

• <xsl:include href="submitinputForm.htm" />

copies the file contents so that submitinputForm.htm is combined within Login.htm.

<xsl:stylesheet version="2.0" 
   xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
   xmlns="http://www.w3.org/1999/xhtml">

   <xsl:template name="submitinputForm">
      <table border="0" cellpadding="10" cellspacing="0" align="left" bgcolor="fuchsia">
         <tr>
            <td><a href="" onclick="submitform(); return false;">Submit</a></td>
         </tr>
         <tr>
            <td><a href="" onclick="resetform(); return false;">Reset</a></td>
         </tr>
         <tr><td><!-- Your name--></td></tr>
      </table>

      <script language="javascript">

         function submitform(){
            document.inputform.submit();
         }

         function resetform(){
            document.inputform.reset();
         }

      </script>
   </xsl:template>
</xsl:stylesheet>

Assignment 2 - Modify submitinputForm.htm, Login.htm and Register.htm to:

• Validate on the client that all input fields of the form named inputform have an entry (i.e. are non-empty) before submitting the form to the server.
   
• Display an error message next to the user input or in an alert box for blank form inputs.
   
• Reset should clear the form inputs and the error messages.
   
• The same submitinputForm.htm should work for either the 2 inputs of Login.htm or the 4 inputs of Register.htm forms.

Hints

• This is a good opportunity to learn the Internet Explorer debugger. When an error occurs in the JavaScript, use the IE debugger.
   
• Login.htm and Register.htm contain a form named inputform that should be validated in submitinputForm.htm file. Use an array of span tags and form inputs, see Large Forms for Multiple Input Validation for an example.
   
• Use the <span id="Blank"></span> tags and Blank.innerHTML attribute discussed in class to display an error message.
   
• A form text input is empty in JavaScript when the value == ""
   
• Use the msxsl debugging method above to see the HTML being generated.
   
• Be warned of the "<" and ">" when in Javascript or any text that is embedded in XSL. Gives an error about invalid character. Use != rather than < in for-statement.
   
• JavaScript syntax errors can be narrowed down by commenting out code that might be causing the error.

3. Consistent Look & Feel (Portfolio.htm)

The basic idea is for one file to include others to construct the overall user interface.

Maintaining a consistent look and feel to a site improves user efficiency and accuracy. Applying good software engineering principles of modular design and implementation produces consistency automatically.

The PortfolioContent.htm style sheet of Homework 4 listed an individual's stock SYMBOL, stock NAME, SHARES owned, PRICE, STOCK VALUE and TOTAL worth and a corresponding pie chart.

Portfolio.htm includes the content to construct a complete page with top and left navigation for user interfacing, as illustrated above.

The essential purpose of Portfolio.htm is to include and organize the layout presentation of other interface files.

<xsl:stylesheet version="2.0" 
   xmlns:xsl="http://www.w3.org/1999/XSL/Transform"  xmlns="http://www.w3.org/1999/xhtml" 
   xmlns:rs="urn:schemas-microsoft-com:rowset" xmlns:z="#RowsetSchema">

 <xsl:include href="topNavigation.htm" />
 <xsl:include href="PortfolioContent.htm" />
 <xsl:include href="TradingNavigation.htm" />
 <xsl:output method="html" />

   <xsl:template match="/">
        <head>
            <link rel="stylesheet" type="text/css" href="basic.css" />
	<title>Stock Trader</title>
        </head>

        <!-- Top Navigation -->
         <xsl:call-template name="topNavigation" />
         <!-- Left Navigation -->
         <xsl:call-template name="TradingNavigation" />
         <!-- Content -->
         <xsl:call-template name="PortfolioContent" />
    </xsl:template>
</xsl:stylesheet>

<?xml-stylesheet type="text/xsl" href="Portfolio.htm"?>

<xml  xmlns:rs="urn:schemas-microsoft-com:rowset"  xmlns:z="#RowsetSchema">
  <rs:data>
    <z:row SYMBOL="MSFT" NAME="Microsoft" SHARES="100" PRICE="10.0000" STOCKVALUE="1000.0000"/>
    <z:row SYMBOL="FORD" NAME="Ford Motor" SHARES="500" PRICE="15.6700" STOCKVALUE="7835.0000"/>
    <z:row SYMBOL="IBM" NAME="IBM" SHARES="10" PRICE="15.0500" STOCKVALUE="150.5000"/>
  </rs:data>
</xml>

<xsl:stylesheet version="2.0" 
 xmlns:xsl="http://www.w3.org/1999/XSL/Transform"  xmlns="http://www.w3.org/1999/xhtml" 
 xmlns:rs="urn:schemas-microsoft-com:rowset" xmlns:z="#RowsetSchema">
   <xsl:output method="html" />

   <xsl:template name="PortfolioContent">
               <h1>Portfolio Summary</h1>
               <xsl:for-each select="xml/rs:data/z:row">
                           <xsl:value-of select="@SYMBOL" />  - <xsl:value-of select="@SHARES" /> - 
                           <xsl:value-of select="@PRICE" /> - <xsl:value-of select="@STOCKVALUE" /> <br />
               </xsl:for-each>
   </xsl:template>

   <xsl:template match="/">
      <xsl:call-template name="PortfolioContent" />
   </xsl:template>
</xsl:stylesheet>

The key points to note are:

1. <xsl:include href="PortfolioContent.htm" /> copies PortfolioContent.htm into the current file.
    
2. <xsl:call-template name="PortfolioContent" /> is where the style sheet template PortfolioContent is applied.
    
3. The XML file now references Poliofolio.htm instead of PortfolioContent.htm to produce the complete user interface.
    
4. <link rel="stylesheet" type="text/css" href="basic.css" /> uses the cascading style sheet, basic.css, defining the global standard style conventions for the site.

Cascading style sheets provides a means of defining a standard style that can be applied to all Web pages of a site (or to other sites) and provides a singe location for defining styles, making changes to the entire site relatively easy.

The following defines the current style sheet for the project pages.

A:hover 	{background-color:yellow;}
h3              	{font-family:"Verdana"}
body		{font-family:"Verdana"; font-size:11pt}
tr           	{ vertical-align: top; font-family:"Verdana"; font-size:11pt}
td           	{ vertical-align: top; font-family:"Verdana"; font-size:11pt}
tt           	{ vertical-align: top; font-family:"Verdana"; font-size:11pt}
pre           	{ vertical-align: top; font-family:"Verdana"; font-size:11pt}
blockquote      	{ vertical-align: top; font-family:"Verdana"; font-size:11pt}

Assignment 3 - Implement a distinctive but consistent look and feel for your site by changing the current site page layout, color scheme, background, etc.

• Modify Basic.css to:
  • define a navigation class defining a background color for use in the top and left navigation tables,
  • define a background color or image for the body,
  • incorporate other improvements.
     
• Modify and improve:
  • Portfolio.htm
    • Organize top, left, bottom navigation and content.
    • Add bottomNavigation.htm from Homework 3 to appear at the bottom of the page.
  • topNavigation.htm - (which currently uses a tasteless fuchsia color) to use the navigation class defined in the cascading style sheet Basic.css above,
  • PortfolioContent.htm - from Homework 4, which dynamically creates a pie chart,
  • TradingNavigation.htm - to use the navigation class defined in the cascading style sheet Basic.css above,
  • any other files?

  as needed to establish your site presentation.

   

• After designing a standard site presentation layout and overall look-and-feel, use Portfolio.htm as a model to create the following files, making relatively minor changes to include the appropriate style sheet, content files and template calls.
  1. TraderSummary.htm
  2. BuyList.htm
  3. SellList.htm
  4. CartSummary.htm

• Edit the appropriate name into the XML file for each of the above for testing:
  • Portfolio.xml needs href="Portfolio.htm"
  • TraderSummary.xml needs href="TraderSummary.htm"
  • CartSummary.xml needs href="CartSummary.htm"
  • BuyList.xml needs href="BuyList.htm"
  • SellList.xml needs href="SellList.htm"
     
• We are still testing individual components of the project. Test each modified above by loading the appropriate XML file into browser (e.g. to test Portfolio.HTM use Portfolio.XML as the address).

Assignment Summary

Implement or modify:

1. Interface for application navigation (TraderNavigation.htm).
2. Validation for login and registration input (Login.htm, Registration.htm and submitinputForm.htm).
3. Interface for current stock holdings and value (Portfolio.htm).
4. Interface for trader summary (TraderSummary.htm).
5. Interface for available stocks to buy (BuyList.htm).
6. Interface for stocks owned to sell (SellList.htm).
7. Interface for shopping cart contents (CartSummary.htm).
8. Cascading style sheet for site (Basic.css)

Turn in - Due before class on the date listed in the syllabus.

1. OnCourse Drop Box
   1. Compress the Project folder containing the homework files.
      • In Windows Explorer, right-click on the Project folder.
      • Click Send to then click Compressed (zipped) Folder.
      • Project.zip will be created.
   2. Upload Project.zip to your CSCI N341 OnCourse Drop Box using the Display Name of HW5.
       
2. Web server
   1. Copy files to W:\N341\Project.
   2. Test in IE.