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

Modified:

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

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:

Open in Windows Explorer the directory containing the file, either the XML file or one referenced by the XML.

Right click on the file and open Properties.

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:

Download Streams, copy Streams.exe to Windows directory if possible.

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 have been implemented in home work 3 and 4. The purpose of this assignment is to:

Complete left navigation for trading functions,
Perform data validation for some user input,
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:

Interface for site welcome (Welcome.htm) - Completed.
Interface for registration (Register.htm) - Completed.
Interface for login (Login.htm) - Completed.
Interface for current stock holdings and value (Portfolio.htm) - Started in class.
Interface for trader summary (TraderSummary.htm).
Interface for available stocks to buy (BuyList.htm).
Interface for stocks owned to sell (SellList.htm).
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:

```
<a href="TraderSummary.asp">Account</a>
```
```
<a href="Portfolio.asp">Portfolio</a>
```
```
<a href="BuyList.asp">Buy</a>
```
```
<a href="SellList.asp">Sell</a>
```
```
<a href="CartSummary.asp">Cart</a>
```
```
<a href="CartCommit.asp">Commit</a>
```

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

TradingNavigation.xml

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

Starting

Download Home Work 5 files.
Copy, paste and load TradingNavigation.xml into a browser.

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

Login.xml

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

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

Starting

Open FrontPage.
Open:
- W:\N341\Project\submitinputForm.htm
Replace the comment with your name between <td> and </td> of:
- <tr><td></td></tr>
Test using the browser address line of:
- W:\N341\Project\Login.xml

Debugging

Open a COMMAND prompt window.
Change to the W: drive by:
- W:
Change directories by:
- CD W:\N341\Project
Generate HTML by:
- msxsl Login.xml Login.htm
To write the HTML to file test.htm:
- msxsl Login.xml Login.htm > test.htm
The test.htm HTML can then be opened in FrontPage and reformatted to see what the transformation produces; it can also be opened by a browser.

Assignment 2 - Modify submitinputForm.htm to:

Validate on the client that all input fields have an entry (i.e. are non-empty) 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 within the Login.htm and then copy to the submitinputForm.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.

Portfolio.XML

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

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.

basic.css

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:

<xsl:include href="PortfolioContent.htm" /> copies PortfolioContent.htm into the current file.
<xsl:call-template name="PortfolioContent" /> is where the style sheet template PortfolioContent is applied.
The XML file now references Poliofolio.htm instead of PortfolioContent.htm to produce the complete user interface.
<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.

Starting

Download Home Work 5 files.
Requires PortfolioContent.htm in the directory.
Test using the IE browser address line of:
- W:\N341\Project\Portfolio.xml

Assignment 3 - 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 defining a background color for use in the top and left navigation tables,
- define a background color for the body,
- other improvements?
Modify:
- Portfolio.htm - 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
- 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 for each of the above (i.e. Portfolio.xml needs an href="Portfolio.htm", etc.) for testing.
- If your N342 testing has overwritten the Portfolio.XML file, add as the first line:
  
  <?xml-stylesheet type="text/xsl" href="Portfolio.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:

Interface for application navigation (TraderNavigation.htm).

Validation for login and registration input (submitinputForm.htm).

Interface for current stock holdings and value (Portfolio.htm).

Interface for trader summary (TraderSummary.htm).

Interface for available stocks to buy (BuyList.htm).

Interface for stocks owned to sell (SellList.htm).

Interface for shopping cart contents (CartSummary.htm).

Cascading style sheet for site (Basic.css)

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

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.
IUS server
1. Copy files to W:\N341\Project drive or FTP to webftp.ius.edu
  - In browser address enter: ftp://webftp.ius.edu
  - Login using your IUS ADS\username and password.
  - Copy the contents of the Project directory onto ftp page.
2. Test in IE.
Email notification to rwisman@ius.edu with subject: YOUR NAME - N341 HW5 - username