N341 - Homework 3
Project Start

Modified:

Note

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

XML/XSL - Syntax checking of XML/XSL is rigorous, flagging errors that would be ignored in HTML by the browser. For example, the following is acceptable as HTML:

<FORM NAME=ONE>
<INPUT type=text name="TWO" >
</form>

but has the following errors as XML/XSL:

ONE must be quoted,

text must be quoted,

INPUT requires a matching end tag </INPUT>

</form> must match <FORM>

Below is valid XML/XSL:

<FORM NAME="ONE">
<INPUT type="text" name="TWO"/>
</FORM>

Overview

The assignment is for familiarization with the project basics and how to build user interface components in a moderately complex Web system.

We have discussed prototyping and testing. The class project will serve as an example for analysis, prototyping, testing and implementation.

Homework 2 performed the initial analysis and design; a partial prototyped user interface was implemented using paper.

Homework 3 will develop the skills needed to implement an interactive Web site for trading stocks.

Analysis - Separating the User Interface from the Blue Sky

Project Description

Our class is creating a stock trading Web-site that will undercut the brick-and-mortar stock brokers by allowing traders to perform all trading functions online without a broker: from registration, stock analysis, to buying and selling stocks. For our services, each stock trade will incur a small fee.

The site must be easy to use but traders need to feel that our Web-site and their money is secure. Security will be enforced by requiring traders to first register to create a unique trader identification and password that controls access to their account; to access an account, the trader must first provide their chosen identification and password. Further security is enforced by limiting account access to a single trader account at a time.

Stocks are traded in a usual way. In order to buy stocks, traders must transfer funds from a valid credit card to their account; sufficient funds must be in the account to cover the cost of the stock and trading fees before a stock can be purchased. Stocks held in the trader's portfolio can be sold and the funds added to their account, minus the trading fee of course. Account funds are withdrawn by transference to a credit card account.

Trading is modeled as a shopping cart to which stocks can be added or removed for buying or selling until the trader decides to finalize the trade. When the trade is finalized, the portfolio and account are updated to reflect the trade and the cart is emptied.

Planned additions to the basic stock trading site include our own mutual fund and a random number generator for selecting stocks to trade.

Implementation

Download project files and extract to a directory named \N341. A subdirectory named Project will contain the project files.
Enter the browser address of: www.ius.edu/username/N341/Project/Welcome.xml
Register.
Login.
Logout.
That's all it does for now.

Project parts - There are three main parts:

ASP - The logic.
XML/HTML - The user interface.
Database - The data.

The project discussion presented a partial user interface for welcome, registration and log in of stock traders, these are to be completed. Additional interface elements and corresponding names used in the N342 logic implementations are listed below:

User name not registered - usernameNotregistered.xml
User name already logged in - usernameLoggedinAlready.xml
Successful login - manageTrading.xml
Attempt to login as another trader before logging out - logoutRequired.xml
User password fails - userpasswordFails.xml
User password missing - userpasswordMissing.xml
Credit card number missing - creditcardMissing.xml
Amount missing - amountMissing.xml
User logged out - logoutSuccessFul.xml

Starting

User Interface - The following two files are a simple user interface for indicating user password missing. While it seems overly complex to have two files, the XML to invoke the HTML, it provides a method for implementing a consistent and modular user interface.

Missing.xml

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

Missing.htm

<h1>User password missing</h1>

Step 1

A simple example

Open FrontPage.
Copy and paste the above.
Save the above Missing.xml to a virtual drive (i.e. W:\N341\Project).
Repeat steps 2 and 3 and save for Missing.htm
Test by loading Missing.xml into the IE browser.

Building User Interfaces - include and call-template

We would like to build user interfaces from several small modules of common user interface elements. For the example at right, the top navigation of the stock trading program appears on every page of the site, it should be implemented once and shared by all pages.

To implement a modular error page for display when user password missing:

topNavigation.htm - separate file for the top navigation interface element
<xsl:include href="topNavigation.htm" /> - the include copies the file
<xsl:call-template name="topNavigation" /> - the call-template generates the interface element

Missing.xml

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

topNavigation.htm

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

<xsl:template name="topNavigation">
   <title>Stock Trader</title>
  <table cellSpacing="5" cellPadding="0" width="100%" 
           		bgColor="fuchsia" border="0">
    <tr>
      <td><A href="welcome.xml">Welcome</A></td>
      <td><A href="Register.xml">Register</A></td>
      <td><A href="Login.xml">Login</A></td>
      <td><A href="Logout.asp">Logout</A></td>
    </tr>
   </table>
</xsl:template>
</xsl:stylesheet>

Missing.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:template match="/">
      <xsl:call-template name="topNavigation" />
       <h1>User password missing</h1>
</xsl:template>
</xsl:stylesheet>

Step 2

Modules - Example using the topNavigation module in another file. topNavigation.htm is already in the Project directory.

In FrontPage, open File | New.
Select the Code tab at the bottom left.
Copy and paste Missing.htm.
Save to a virtual drive (i.e. W:\N341\Project).
Test by loading Missing.xml into the IE browser.

Duplicate the <xsl:call-template name="topNavigation" /> line several times and refresh the browser.

User Interface Standardization

Modules make it easier to implement and maintain user interfaces by breaking the interface into smaller pieces and provide a way of automatically generating a standard user interface across all pages.

One common Web page organization is Top, Left and Center (TLC) using two navigation bars: the top for site navigation and the left for application navigation; for example the Submit and Reset buttons for the registration and login applications. Page content, unique for the page, is placed in the center right of the page.

The following presents the Welcome page consisting of the four files:

Welcome.xml - The entry file that loads Welcome.htm
Welcome.htm - The page that displays the top and left navigation, and the content.
topNavigation.htm - The top navigation.
welcomeContent.htm - The content.

The preferred entry to the stock trading site is through a welcome page named Welcome.xml which is listed with supporting files below. The welcome page should serve as a model for implementing other files listed above needed for the limited user interface implemented for this assignment.

For most project pages, the only significant change required is to the content of the page implemented by the "welcomeContent.htm" file in the example.

Welcome.xml

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

topNavigation.htm

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

<xsl:template name="topNavigation">
  <table cellSpacing="5" cellPadding="0" width="100%" 
           		            bgColor="fuchsia" border="0">
    <tr>
      <td><A href="welcome.xml">Welcome</A></td>
      <td><A href="Register.xml">Register</A></td>
      <td><A href="Login.xml">Login</A></td>
      <td><A href="Logout.asp">Logout</A></td>
    </tr>
   </table>
</xsl:template>
</xsl:stylesheet>

welcomeContent.htm

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

<xsl:template name="welcomeContent">
 <h1 align="center">Welcome to Stock Trader</h1>
 <UL>
  <LI>
   <DIV align="left">Register to open an account.</DIV>
  </LI>
  <LI>
   <DIV align="left">Login to access your account.</DIV>
  </LI>
 </UL>
</xsl:template>
</xsl:stylesheet>

Welcome.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="welcomeContent.htm" />

<xsl:template name="leftNavigation">
  <table border="0" cellpadding="10" 
             cellspacing="0" align="left">
   <tr><td></td></tr>
   <tr><td></td></tr>
  </table>
</xsl:template>

<xsl:template match="/">
 <html>
  <head>
   <link rel="stylesheet" type="text/css" href="basic.css" />
   <title>Stock Trader</title>
  </head>
  <body>
   <center>
    <table border="0" cellpadding="0" cellspacing="0" 
               width="100%">
     <tr>
      <td></td>
      <td>
	<!-- Top Navigation -->
	<center>
               <xsl:call-template name="topNavigation" />
             </center>
      </td>
     </tr>
     <tr>
      <td><br/></td>
     </tr>
    <tr>
     <td>
      <!-- Left Navigation -->
      <xsl:call-template name="leftNavigation" />
     </td>
     <td>
       <!-- Content -->
       <center>
         <xsl:call-template name="welcomeContent" />
       </center>
     </td>
    </tr>
   </table>
  </center>
 </body>
</html>
</xsl:template>
</xsl:stylesheet>

Step 3

Standard navigation - The Welcome page files listed above are already located in the Project directory. For practice, we will modify the Missing files for the user password missing page.

Modify the Missing.htm from Step 2 to include and call the welcomeContent template of welcomeContent.htm.
Test by refreshing Missing.xml in the browser.
- If the file fails to refresh in IE, try: Tools | Internet Options | Temporary Internet Files | Settings | Every Visit to Page
Copy and paste the text of Welcome.htm to overwrite the text Missing.htm
Modify the Missing.htm:
1. Display <h1>User password missing</h1> instead of calling the welcomeContent template.
2. Delete the statement: <xsl:include href="welcomeContent.htm" />
Test by loading Missing.xml into the browser.

Modify the leftNavigation template in Missing.htm to include two HREF links between the each of the <td></td>:
1. your IUS homepage
2. Welcome.xml page
Test by loading Missing.xml into the browser.

Assignment

The following project interface files have already been implemented similar to the model from User Interface Standardization and Step 3, parts 1-5 above.

Welcome - Welcome.htm

User name not registered - usernameNotregistered.htm

User name already logged in - usernameLoggedinAlready.htm

Successful login - manageTrading.htm

Attempt to login as another trader before logging out - logoutRequired.htm

User password fails - userpasswordFails.htm

User password missing - userpasswordMissing.htm

Amount missing - amountMissing.htm

User logged out - logoutSuccessful.htm

Part 1

Define bottomNavigation.htm with a template named bottomNavigation to:

Display a clickable email address for inquiries or problem report, use your email address.

Form with a text box for entering a stock symbol and linking to the Google or Yahoo stock quote page.

Display your name.

Copyright notice.

Modify each of the above 1-9 files to:

Display the bottom navigation centered at the end (last few lines) of the page.

Include bottomNavigation.htm

Call the bottomNavigation template.

Test each. Remember that each of the 9 files have a companion XML file. Welcome.htm can be tested by either of the following:

www.ius.edu/username/N341/Project/Welcome.xml

W:\N341\Project\Welcome.xml

msxsl Welcome.xml Welcome.htm

Hints:

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

Verify that bottomNavigation works in Welcome.htm first, then modify the other 8 files.

Part 2

Copy and save the following data to a file named HW3-2.xml
<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="HW3-2-1.htm"?>
<Portfolio>
    <STOCK>
	<ID>Ray</ID><SYMBOL>IBM</SYMBOL><PRICE>10</PRICE>
    </STOCK>
    <STOCK>
	<ID>Ray</ID><SYMBOL>MSFT</SYMBOL><PRICE>100</PRICE>
    </STOCK>
    <STOCK>
	<ID>Harold</ID><SYMBOL>FORD</SYMBOL><PRICE>15</PRICE>
    </STOCK>
    <STOCK>
	<ID>Robin</ID><SYMBOL>UAL</SYMBOL><PRICE>230</PRICE>
    </STOCK>
    <STOCK>
	<ID>Robin</ID><SYMBOL>FORD</SYMBOL><PRICE>100</PRICE>
    </STOCK>
</Portfolio>
Implement the XSL to display the above XML data as the table below using for-each.

Add a hyperlink (e.g. Google or Yahoo) to each SYMBOL to look up information on the stock.

Save the XSL file in the Project directory as: HW3-2-1.htm

ID Symbol

Ray IBM

Ray MSFT

Harold FORD

Robin UAL

Robin FORD

Implement the XSL to display the XML data as the table below using apply-templates only.

Add a hyperlink (e.g. Google or Yahoo) to each SYMBOL to look up information on the stock.

Save the XSL file in the Project directory as: HW3-2-2.htm

Edit HW3-2.xml to use the transformations from HW3-2-2.htm file.

Hints:

Start by generating a table without hyperlinks. Use the example from ADO-XML-XSL as a starting point.

Remember that start and end tags are case-sensitive in the XML and XSL.

Remember that the browser View | Source only displays the XML file not the HTML. To examine the HTML produced by the XML and XSL use:

msxsl HW3-2.xml HW3-2-2.htm

Add hyperlinks using <xsl:variable or <xsl:text disable-output-escaping="yes"> to automatically produce the hyperlink:
<a href='http://finance.yahoo.com/q?s=IBM> IBM </a>

See XML-XSL Intro for a discussion.

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 HW3.
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. The Welcome.xml is a default page.
  - In browser address enter: http://www.ius.edu/username/N341/Project/Welcome.xml
Email notification to rwisman@ius.edu with subject: YOUR NAME - N341 HW3 - username

N341 - Homework 3 Project Start