A346 - Analysis, Prototyping and Testing

 Modified: 

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 

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

Chapters 7 and 8 discusses 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 prototype 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

  1. If you have not already done so, download Project files and unzip, defaults to \Project directory.
  2. Define the data source of Project for the C:\Project\Project.mdb file.
  3. Define a virtual drive of Project for C:\Project.
  4. Enter the browser address of: localhost/Project/Welcome.xml
  5. Register.
  6. Login.
  7. Logout.
  8. That's all it does for now.

Project parts - There are three main parts:

  1. ASP - The logic.
  2. XML/HTML - The user interface.
  3. 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 A348 logic implementations are listed below:

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

User Interface - Note that not all necessary user interface files are provided. For example, the following two files are the interface for user password missing. While it seems overly complex to have two files, the XML to invoke the HTML, it provides a way to implement a consistent and modular user interface.

userpasswordMissing.xml 
<?xml-stylesheet type="text/xsl" 
               href="userpasswordMissing.htm"?>
<top>
</top>
 userpasswordMissing.htm 
<h1>User password missing</h1>

 

Step 1

  • Starting  - Generally our interest is in the user interface implementation so its makes sense to focus on those first.
  1. Open FrontPage.
  2. Copy and paste the above.
  3. Save the above userpasswordMissing.xml to a virtual drive (i.e. C:\Project).
  4. Repeat steps 2 and 3 and save for userpasswordMissing.htm
  5. Test by loading userpasswordMissing.xml into the browser.

Building User Interfaces - include and call-template

We would like to build user interfaces from small modules of common user interface elements. For example, 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 user password missing:

  1. topNavigation.htm - separate file for the top navigation interface element
  2. <xsl:include href="topNavigation.htm" /> - the means to copy the file
  3. <xsl:call-template name="topNavigation" /> - the means to generate the interface element
userpasswordMissing.xml 
<?xml-stylesheet type="text/xsl" 
               href="userpasswordMissing.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>
 userpasswordMissing.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  - Create the topNavigation module and use in another file.
  1. Open File | New.
  2. Select the Code tab at the bottom left.
  3. Copy and paste topNavigation.htm.
  4. Save to a virtual drive (i.e. C:\Project).
  5. Repeat steps 2 and 3 and save for the new userpasswordMissing.htm
  6. Test by loading userpasswordMissing.xml into the 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, and provide a way of creating 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 is placed in the center right of the page.

The following presents the Welcome page consisting of four modules:

  1. Welcome.xml - The entry file that loads Welcome.htm
  2. Welcome.htm - The page that displays the top and left navigation, and the content.
  3. topNavigation.htm - The top navigation.
  4. 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 is complete enough for now but should serve as a model for implementing other files listed above needed for the limited user interface implemented for this assignment. For most pages listed above, 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 are already located in the Project directory. We will modify the files for the user password missing page.
  1. Modify the userpasswordMissing.htm to include and display the welcomeContent template of welcomeContent.htm.
  2. Test by refreshing userpasswordMissing.xml into the browser.
    • If the file fails to refresh in IE, try:
      1. Tools
      2. Internet Options
      3. Delete files

       

  3. Copy and paste Welcome.htm to overwrite the userpasswordMissing.htm.
  4. Modify the userpasswordMissing.htm to include and display content of <h1>User password missing</h1> instead of calling the welcomeContent template.
  5. Test by loading userpasswordMissing.xml into the browser.
  1. Modify the leftNavigation template in userpasswordMissing.htm to display two HREF links between the <td></td>:
    1. your IUS homepage
    2. Welcome.xml page
  2. Test by loading userpasswordMissing.xml into the browser.

Assignment

Implement the following based on the model from Step 3, parts 1-5 above which displays the same top navigation bar defined in topNavigation.htm:

  1. User name not registered - usernameNotregistered.xml
  2. User name already logged in - usernameLoggedinAlready.xml
  3. Successful login - manageTrading.xml
  4. Attempt to login as another trader before logging out - logoutRequired.xml
  5. User password fails - userpasswordFails.xml
  6. User password missing - userpasswordMissing.xml - Completed in class
  7. Amount missing - amountMissing.xml
  8. User logged out - logoutSuccessFul.xml

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 HW3