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

• Download Project files
• Download Home Work 5 files

Note

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

Overview 

Modules of the stock trading site 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. Bring together 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 functions after user login, the center 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 major 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).

Left Navigation (TradingNavigation.htm)

The left navigation will appear on each page after a successful login, preferably on the left side. 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 - Currently the trading navigation is implemented as text links. Improve the left-side trading navigation design as you like (buttons, hyperlinks, images, table, etc.) but 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 XML file.

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

Validation (submitinputForm.htm)

• Verify that all inputs to the registration and login forms are non-blank 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 - Modify submitinputForm.htm to:

• Validate on the client that all input fields have an entry (i.e. are non-blank) before submitting the form to the server.
• Display an error message somewhere on the page for blank form inputs.
• The same submitinputForm.htm should work for either Login.htm or Register.htm forms without changes.

Hints

• Be warned of the "<" and ">" when in Javascript or any text that is embedded in XSL. Gives an error about invalid character.
• 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 == "".
• Use the debugging method above to see the HTML being generated. You may find it faster to write and debug the HTML first directly for Login.htm then change the sumbitinputForm.htm file.

Consistent Look & Feel (Portfolio.htm)

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 listed an individual's stock SYMBOL, stock NAME, SHARES owned, PRICE, STOCK VALUE and TOTAL worth. Portfolio.htm includes the content to construct a complete page with top and left navigation for user interfacing.

The essentials of Portfolio.htm are listed below.

<?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>

Portfolio.htm

<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>

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}

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. A cascading style sheet, basic.css, defines the global standard style conventions for the site.

Assignment - Implement a 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 for background color for the top and left navigation tables,
  • define a background color for the body,
  • other?

• Implement bottomNavigation.htm to:
  • Display a clickable email address for inquiries or problem report, use your email address.
  • Link to the Google or Yahoo stock quote.

   

• Modify:
  • Portfolio.htm - Add bottomNavigation.htm 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
  • 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, 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.
  • TraderSummary.htm
  • BuyList.htm
  • SellList.htm
  • CartSummary.htm

• Edit the appropriate name into the XML file (i.e. Portfolio.xml needs an href="Portfolio.htm", etc.) for testing.
  • If your A348 testing has overwritten the Portfolio.XML file, add as the first line:

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

• Test 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 (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

• Implementation
  1. FTP to www.csci.ius.edu
     • In browser address enter: ftp://www.csci.ius.edu
     • Login using your IUS username and password.
     • Copy the contents of the Project directory onto ftp page.
  2. Test in IE. The Welcome.xml is a default page.
     • In browser address enter: http://www.csci.ius.edu/username/Welcome.xml
  3. Email notification to rwisman@ius.edu with subject: A346 HW5