N341/N342 Project

Downloads Project.zip

Overview

The project will be common to the N341 and N342 courses. Generally, the main project responsibilities are divided between the two courses as follows:

N341 perform user and task analysis determine site content and organization design web site structure implement navigation design user interface for each page implement user interface test and validate site usability

N342 implement site logic interact with the client implement shopping cart logic access databases control access to data through site login maintain session control  test and validate site operation

Fundamental elements of the project will be completed as home works providing details as the project develops. The following provides some but not all of the project details for general discussion and project grading. 

Project Description - The Blue Sky

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

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. 

Project Overview

The project is to analyze, design, and implement an e-commerce site using the concepts and techniques of the course that have or will be examined. The site is to support online stock trading, where online traders have a personal account from which they can buy or sell stock. Traders can move money into or out of the account via a credit card. All trades are 100% cash, margin trading is not allowed.

The system used by the traders is modeled after a shopping cart. Buy or sell stock trades are added to the cart until trades are committed, removed from the cart or the trading session times out.

The following processes are needed to become a stock trader, manage a trading account, and track the trading performance. As the projects develops through home work and exercises, modifications will be made.

1. Registration (N342 HW2) - To become a trader, register online providing personal, credit card information, and amount to place in an account for trading. A unique ID and corresponding password must be entered for the new client. The credit card number and initial amount is also required.
2. Log in (N342 HW2) - Armed with an ID and password, log on to the site. A trader ID may be logged in only once at any given time. If the session times out, all incomplete trades are discarded and the trader must log in again.
3. Log out (N342 HW2) - The session is terminated, no stock trader functions can be performed. Ideally, someone else is prevented from backing through the browser pages, reopening the stock client's account, and performing trades without going through a login.
4. Manage trading - The logged in trader can elect to do any of the following functions:
1. log out (N342 HW2),
2. examine current stock holdings and value (HW3),
3. examine summary of planned trades (shopping cart),
4. view available stocks and prices (HW3)
5. make a trade (add to the cart a buy or sell of stock),
6. remove some or all trades (delete from the cart a trade)
7. commit trades (perform the trades in the cart)
8. money transfer - trader provides credit card information and amount to transfer in or out of account. The card and amount is verified by an online service bureau that confirms either Yes or No.
9. Password change - trader enters plain text password locally, encoded and transmitted to site server.
5. Trade - To make a trade:
1. Select a stock for trading. The stock's information is displayed for review (HW3).
2. Select the number of shares to buy or sell (HW4).
6. Summary of planned trades - Displays the stocks in the cart. Provides:
1. For each stock
1. Stock symbol and name.
2. Price per share.
3. Number of shares to buy or sell (can be edited) or removed completely.
4. 5% of the trade as a commission cost.
5. Total price of stock including commission, indicate whether buying or selling.
2. Total cost or return of all current trades.
3. Current account balance (i.e. the cash amount not held in stock) after trades have been applied.
4. Remove all stocks from cart.
5. Commit to trade of all stocks in the cart.
1. Uses current stock price.
2. Verifies that account has sufficient funds. 
3. Transfer stock trades from cart to permanent database table of trades.
4. Deducts the 5% commission.
5. Updates trader account balance.
7. Current stock holdings - Displays:
1. For each trade:
1. Date of trade.
2. Buy or sell.
3. Stock symbol and name.
4. Purchase price per share.
5. Number of shares traded.
2. For each stock:
   1. Total current value of stock based on current stock value.
   2. Option to list or graphically chart the price of a stock share at the past 10 trades.
3. Total value of all stocks in account.
4. Current account cash balance (amount not in stock holdings)

Data Base Tables

The following database and tables can be downloaded as Project.zip. If it becomes necessary to modify the database or table definitions, please email the instructor so that the rest of the class can be notified.
 

Trader - Contains personal (name, address, phone)  and account (ID primary key, password, balance)  information. LOGGED, a yes/no field, can be used to track whether a trader is already logged in.
Trades - Each trade of each stock must be recorded.  Contains data on trader (ID foreign key), stock (symbol, price per share at time of trade), trade (date, number of  shares, buy or sell). Note that when inserting into the table TIMEDATE is by default inserted with the current date/time. INSERT into TRADES (ID, SYMBOL,PRICE,SHARES,BUY) VALUES                                  'Ray','IBM',5.23,40,true);
Portfolio - List of all stocks held by each trader. Contains  data on trader (ID foreign key), stock (symbol), shares held.
Cart - Each potential trade of each stock must be recorded. Contains data on trader (ID foreign key), stock (symbol,  current price per share), trade (number of shares, buy or sell).  Emptied by trader, timeout or when valid trade committed.
Stock - Contains the current stock share price. Each stock that can be traded must be in table. Contains  data on stock (symbol primary key, real company name and current price). Note that Stock table would not be part of the database if the stock share price is retrieved from an online system in real-time.

Relationships - Note that Stock table would not be part of the database if the stock share price is retrieved from an online system in real-time. 

Examples

Three functions of the project have been partially completed to serve as examples. The functions and corresponding entry files are:

1. Welcome.xml - The main point of entry to the trading system.
2. Registration.xml - Register new traders.
3. Login.xml - Login as a trader.

These are part of the Project.zip files.

Starting the Project

The project implementation is designed so that N341 course implements the user interface using mostly JavaScript, XSL, XML, and HTML while the N342 course implements the project logic using mostly ASP and databases. 

Note: Some browsers, such as IE, automatically block execution of active content (e.g. JavaScript) in files residing on your computer. To enable execution under IE:

1. Open Tools | Internet Options | Advanced tab
2. Scroll down to the Security section
3. R Allow active content to run in files on My Computer

N341

Welcome - The simplest part is the Welcome page shown above. It displays a top-of-page navigation bar and some welcome text. It uses 5 files to build the page:

1. Welcome.xml - the start page the loads Welcome.xsl
2. Welcome.xsl - Overall page layout by a table divided into three sections.
   1. top-of-page navigation bar - topNavigation.xsl 
   2. left-of-page navigation - internally defined
   3. center-of-page content - welcomeContent.xsl
3. topNavigation.xsl - the top-of-page navigation bar with links to other pages.
4. welcomeContent.xsl - the center-of-page content
5. basic.css - a cascading style sheet (not shown) discussed later in course.

Welcome.xml <?xml-stylesheet type="text/xsl" href="welcome.xsl"?> <top> </top> topNavigation.xsl <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.xsl <xsl:stylesheet xmlns="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="2.0"> <xsl:output method="html"/> <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> <li> <div align="left">Logout to exit.</div> </li> </ul> </xsl:template> </xsl:stylesheet>

Welcome.xsl <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:include href="topNavigation.xsl" /> <xsl:include href="welcomeContent.xsl" /> <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>

Register - Presents a registration page as a top-of-page navigation bar, a left-of-page navigation for submitting or resetting form, and the center-of-page registration form. It directly uses 6 files to implement the page function:

1. Register.xml - the start page the loads Register.xsl
2. Register.xsl - Overall page layout by a table divided into three sections.
   1. top-of-the-page navigation bar - topNavigation.xsl 
   2. left-of-page navigation - submitinputForm.xsl
   3. center-of-page content - registration form
3. topNavigation.xsl - the top-of-page navigation bar with links to other pages. Listing not repeated below.
4. submitinputForm.xsl - the left-of-page navigation to submit or reset input form.
5. Registration.asp - ASP script to receive form input and update database.
6. basic.css - a cascading style sheet

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

<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" ID="Table1">
  <tr>
   <td>
    <a href="" onclick="submitform(); return false;">
         Submit
    </a>
   </td>
  </tr>
  <tr>
   <td>
    <a href="" onclick="resetform(); return false;">
         Reset
    </a>
   </td>
  </tr>
 </table>
 <script language="javascript">
   function submitform(){
    document.inputform.submit();
   }
   function resetform(){
    document.inputform.reset();
   }
 </script>
</xsl:template>
</xsl:stylesheet>

<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:include href="topNavigation.xsl" />
<xsl:include href="submitinputForm.xsl" />

<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="submitinputForm" />
      </td>
      <td>
       <blockquote> 
         <!-- Content -->
         <center><h1>Registration Form</h1>
         <form name="inputform" action="registration.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>
	  <tr>
              <td>Credit card:</td>
              <td><input name="creditcard" type="text" /></td>
             </tr>
             <tr>
              <td>Amount:</td>
              <td><input name="amount" type="text" /></td>
             </tr>
            </table>
           </form>
         </center>
       </blockquote>
      </td>
     </tr>
    </table>
   </center>
  </body>
 </html>
</xsl:template>
</xsl:stylesheet>

Login - Presents a login page as a top-of-page navigation bar, a left-of-page navigation for submitting or resetting form, and the center-of-page registration form. It directly uses 6 files to implement the page function:

1. Login.xml - the start page the loads Register.xsl
2. Login.xsl - Overall page layout by a table divided into three sections.
   1. top-of-the-page navigation bar - topNavigation.xsl 
   2. left-of-page navigation - submitinputForm.xsl
   3. center-of-page content - login form
3. topNavigation.xsl - the top-of-page navigation bar with links to other pages. Listing not repeated below.
4. submitinputForm.xsl - the left-of-page navigation to submit or reset input form. Listing not repeated below.
5. Login.asp - ASP script to receive form input and update database.
6. basic.css - a cascading style sheet

Parameter passing from Registration to Login - When a user registers as a trader, the login page is loaded and passed the user name to automatically enter in the login form. The steps are:

1. Register.asp - User successfully registers. Login.xsl page loaded by Response.Redirect("login.xml?"+username); and passed username in the URL. For example, a user name of "rwisman" would be passed as: "Login.xsl?rwisman".
2. Login.xsl is loaded executing any JavaScript. The JavaScript serves to capture the user name from the URL (e.g. "Login.xsl?rwisman") and assign as the form user name. The JavaScript is:

   <script language="javascript">
       document.inputform.username.value = location.search.substring(1,location.search.length);
   </script>

   • location.search - the string value is the URL parameter, in the example: ?rwisman
   • location.search.substring(1,location.search.length) - is everything after the first character, the ?. For the example: rwisman.
   • document.inputform.username.value - assigns the username form input field. The effect is to fill in the form from input passed to the Login.xsl page. For the example:

   • document.inputform.username.value = "rwisman";

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

<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:include href="topNavigation.xsl" />
<xsl:include href="submitinputForm.xsl" />

<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="submitinputForm" />
      </td>
      <td>
       <blockquote> 
        <!-- Content -->
        <center><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>
         </center>
        </blockquote>
        <script language="javascript">
          document.inputform.username.value=
                    location.search.substring(1,location.search.length);
        </script>
       </td>
      </tr>
     </table>
    </center>
   </body>
  </html>
</xsl:template>
</xsl:stylesheet>

N342

Registration.asp - Inputs user name from Register.xsl form and updates Trader database table if new user name. It directly uses 8 files to implement the page function though only the Register.asp and Project.mdb files are of direct concern:

1. Register.asp - the registration login and database table access.
2. Login.xml - load the Login.xsl page.
3. Login.xsl - Implements the login page. Passed the user name from registration to automatically fill in part of the login form.
4. usernameMissing.xml - loads the usernameMissing.xsl page.
5. usernameMissing.xsl - displays message that no user name was enter on the registration form.
6. usernameInuse.xml - loads the usernameInuse.xsl page.
7. usernameInuse.xsl - displays message that user name enter on the registration form is in use by another. The user name entered is passed in the URL and displayed.
8. Project.mdb - the project database file.

The key registration steps are:

1. Request("username").Count == 0 || Request("username")=="") - Verify that a user name has been entered. If no user name, execution is ended and the usernameMissing.xml is loaded.
2. rs = conn.Execute("SELECT ID FROM Trader where ID='rwisman' "); - Access the Trader table for user name ID. Assign rs the resulting record set from the table.
3. if (rs.EOF) - If true the ID was not in the table so this is a new user. Otherwise name already in use, end execution and load usernameInuse.xml page.
4. conn.Execute("Insert into Trader (ID) values ('rwisman');"); - Insert new user name ID into the Trader table.

<%@ Language=JScript%>
<%	
// Test username !defined || username empty

 if(Request("username").Count == 0 || Request("username")=="") 
    Response.Redirect("usernameMissing.xml");
 else {
   var username = Request("username");

   conn = Server.CreateObject("ADODB.Connection");
   conn.Mode = 3;
   conn.Open ("DRIVER={Microsoft Access Driver (*.mdb)};DBQ=" + Server.MapPath("Project.mdb"));
   rs = conn.Execute("SELECT ID FROM Trader where ID='"+username+"' ");

   if (rs.EOF) {
    conn.Execute( "Insert into Trader (ID) values ('"+username+"');");
    conn.Close();
    Response.Redirect("login.xml?"+username);
 }
 else
   Response.Redirect("usernameInuse.xml?"+username);
}
%>	

Login.asp - Inputs user name from Login.xsl form and updates Trader database table if login successful. Allows only one login under a given user name. It directly uses 4 files to implement the page function though only the Login.asp and Project.mdb files are of direct concern:

1. Login.asp - the registration login and database table access
2. usernameMissing.xml - loads the usernameMissing.xsl page.
3. usernameMissing.xsl - displays message that no user name was enter on the registration form.
4. Project.mdb - the project database file.

The key login steps are:

1. Request("username").Count == 0 || Request("username")=="") - Verify that a user name has been entered. If no user name execution is ended and the usernameMissing.xml is loaded.
2. rs = conn.Execute("SELECT * FROM Trader where ID='rwisman' "); - Access the Trader table for user name ID. Assign rs the resulting record set from the table.
3. if (rs.EOF) - If true the ID was not in the table so not a registered user. Display curt message that user not registered trader to browser.
4. if(rs("LOGGED")) - If user already logged in display curt message that user already logged in.
5. if(Session("trader")==undefined) - Test whether attempt to login as another trader before logging out.
6. conn.Execute("Update Trader SET LOGGED=true where ID ='rwisman';"); - If not logged in, update the record of Trader table that user is logged in.
7. Session("trader")=username; - Record the user name for the current trader as a session variable in order to access in other scripts.

<%@ Language=JScript%>
<%	
// Test username !defined || username empty

 if(Request("username").Count == 0 || Request("username")=="")
   Response.Redirect("usernameMissing.xml");

 var username = Request("username")+"";	// Convert to string
 conn = Server.CreateObject("ADODB.Connection"); 
 conn.Mode = 3;
 conn.Open ("DRIVER={Microsoft Access Driver (*.mdb)};DBQ=" + Server.MapPath("Project.mdb"));
 
 rs = conn.Execute("SELECT * FROM Trader where ID='"+username+"'");
	
 if (rs.EOF) {
    conn.Close();
    Response.Write(username+" is not registered.");
 }
 else {
    if(rs("LOGGED").Value){
      Response.Write(username+" already logged in");
      conn.Close();
    }
    else {
      if(Session("trader")==undefined) {
        conn.Execute("Update Trader SET LOGGED=true where ID='"+username+"';");
        conn.Close();
        Session("trader")=username;        
        Response.Write(Session("trader")+" logged in");
      }
      else
        Response.Write(Session("trader") + " is logged in. Please logout first.");
    }
 }
%>

Reset.asp - Provides a means of forcing all traders to logout. The trader table is cleared of logins and session variables are abandoned.

Files Provided

Login.xsl Login.xml Register.xsl Register.xml RegistrationError.xsl Welcome.xsl Welcome.xml welcomeContent.xsl

Login.asp Logout.asp Registration.asp Reset.asp

basic.css leftNavigation.xsl topNavigation.xsl submitinputForm.xsl usernameError.xsl usernameError.xml usernameInuse.xsl usernameInuse.xml usernameMissing.xsl usernameMissing.xml

Project.mdb

Grading

Each part of the project has been or will be assigned a point value, for a total of about 100. Projects will be ranked by the following criteria that is generally applied in roughly equal portions to design and implementation assignments:

1. Correctness - Project requirements were correctly implemented.
2. Thoroughness - All cases handled. All specified outputs turned in.
3. Clarity - Solution clear and concise.
4. Innovation - Demonstration of original approach to solution.
5. Completeness - The project works as specified.

Feel free to borrow ideas or code from any of the notes or assignments.