A346 Home Work 4 - Project

 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 stock trading site has two main functions: managing access to the site and managing site functions.

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 - This home work will complete 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.

Our concern will be the user interface exclusively; managing the data and maintaining system integrity (i.e. programming logic) is the responsibility of software development. In the following, we will develop methods that allow testing each user interface module without the programming logic.

There are three main site functions.

  1. Account - Displays current account information such as name, address and balance.
  2. Portfolio - Displays the stocks owned, the value and total worth at current price.
  3. Shopping cart - The shopping cart metaphor describes much of the fundamental site operation.

User Interface - A common user interface structure with site navigation at top, application navigation at left and content in the center. The major user interface content is implemented by the following style sheets:

  1. List current stock holdings and value (PortfolioContent.htm) - Completed in class.
  2. List the trader summary (TraderSummaryContent.htm) - Mostly completed in class.
  3. List available stocks to buy (BuyListContent.htm). - Mostly completed in class.
  4. List stocks owned to sell (SellListContent.htm).
  5. List shopping cart contents (CartSummaryContent.htm).

 

Review of PortfolioContent.htm

The portfolio is the list of an individual's stock SYMBOL, stock NAME, SHARES owned, PRICE, STOCK VALUE and TOTAL worth. The PortfolioContent.htm style sheet transforms the following XML data set to the HTML rendering at right.

Portfolio.XML
<?xml-stylesheet type="text/xsl" href="PortfolioContent.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>

PortfolioContent.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:output method="html" />

   <xsl:template name="PortfolioContent">
               <h1>Portfolio Summary</h1>
               <xsl:for-each select="xml/rs:data/z:row">
                           <xsl:value-of select="@SYMBOL" />  - <xsl:value-of select="@SHARES" /> - 
                           <xsl:value-of select="@PRICE" /> - <xsl:value-of select="@STOCKVALUE" /> <br />
               </xsl:for-each>
   </xsl:template>

   <xsl:template match="/">
      <xsl:call-template name="PortfolioContent" />
   </xsl:template>
</xsl:stylesheet>

The key points to review are:

  1. References the same node names in the XML from the Stock and Portfolio database tables and the computed stock value field (i.e. SYMBOL, NAME, SHARES, PRICE, STOCKVALUE).
  2. Iteration over all children nodes of the XML tree using:

    This is how all XML trees are defined (i.e. node names) when generated using the Microsoft MSXML2.DOMDocument class.

  • Starting
  1. Open FrontPage.
  2. Copy the two files above and save as:
    • C:\Project\PortfolioContent.htm
    • C:\Project\Portfolio.xml
  3. Test using the browser address line of:
    • C:\Project\Portfolio.xml
  • PortfolioContent.htm
  1. Modify PortfolioContent.htm to output NAME of stock also.
  2. Save and test using the browser address line of:
    • C:\Project\Portfolio.xml
  3. Your results should appear similar to above but with the NAME field displayed.

Improvements

The key improvements to make are:

  1. Output in a table organization.
  2. Formatting of numeric and currency values using:
  3. Summation over all STOCKVALUE children nodes in the XML tree by: 
PortfolioContent.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:output method="html" />

  <xsl:template name="PortfolioContent">
    <h1>Portfolio</h1>
    <table border="1">
       <tr>
         <td>Symbol</td>
         <td>Shares</td>
         <td>Price</td>
         <td>Value</td>
        </tr>
        <xsl:for-each select="xml/rs:data/z:row">
          <tr>
            <td><xsl:value-of select="@SYMBOL" /></td>
            <td><xsl:value-of select="@SHARES" /></td>
            <td><xsl:value-of select="format-number(@PRICE, '$#,###,###.00')" /></td>
            <td><xsl:value-of select="format-number(@STOCKVALUE, '$#,###,###.00')" /></td>
           </tr>
        </xsl:for-each>
        <tr>
          <td></td>
          <td></td>
          <td>Total</td>
          <td>
            <xsl:value-of select="format-number(sum(xml/rs:data/z:row/@STOCKVALUE), '$#,###,###.00')" />
          </td>
         </tr>
        </table>
     </xsl:template>

<xsl:template match="/">
     <xsl:call-template name="PortfolioContent" />
</xsl:template>		
</xsl:stylesheet>

Portfolio

Symbol Shares Price Value
MSFT 100 $10.11 $1,011.00
GMC 20 $38.10 $762.00
FORD 15 $15.67 $235.05
FORD 100 $15.67 $1,567.00
UAL 230 $7.64 $1,757.20
IBM 10 $15.05 $150.50
Total $5,482.75

 

  • Starting
  1. Download Home Work 4 files.
  2. Unzip to the C:\Project directory.
  • PortfolioContent.htm
  1. Test using the browser address line of:
    • C:\Project\Portfolio.xml
  2. Modify PortfolioContent.htm to output NAME of stock also.
  3. Save and test using the browser address line of:
    • C:\Project\Portfolio.xml
  4. Your results should appear similar to above but with the NAME field displayed.

 

TraderSummaryContent.htm

The trader summary is the account information of trader's ID, FIRSTNAME, LASTNAME, and BALANCE.

The XML below for testing has been copied to the Project directory.

TraderSummary.XML
<?xml-stylesheet type="text/xsl" href="TraderSummaryContent.htm"?>

<xml xmlns:rs="urn:schemas-microsoft-com:rowset" xmlns:z="#RowsetSchema">
	<rs:data>
		<z:row ID="Ray" FIRSTNAME="Raymond" LASTNAME="Wisman" BALANCE="990.0000"/>
	</rs:data>
</xml>

 

  • TraderSummaryContent.htm
  1. In FrontPage, open PortfolioContent.htm.
  2. Save as TraderSummaryContent.htm
  3. Test using the browser address line of:
    • C:/Project/TraderSummary.xml
  4. You should get an error.
  • Edit
  1. Modify TraderSummaryContent.htm to output trader's ID, FIRSTNAME, LASTNAME, and BALANCE.
    • Format BALANCE as currency.
  2. Save and test using the browser address line of:
    • C:/Project/TraderSummary.xml

 

BuyListContent.htm

  1. Lists stocks available to buy. Displays SYMBOL, NAME and PRICE.
  2. Provides a text box for entry of number of stocks to buy.
  3. Submits SYMBOL and number of each stock using a form defined as:

    <form name="StockListForm" method="get" action="BuyStock.asp">

The XML below for testing has been copied to the Project directory.

BuyList.XML
<?xml-stylesheet type="text/xsl" href="BuyListContent.htm"?>

<xml xmlns:rs="urn:schemas-microsoft-com:rowset" xmlns:z="#RowsetSchema">
	<rs:data>
		<z:row SYMBOL="MSFT" NAME="Microsoft" PRICE="10.0000"/>
		<z:row SYMBOL="GMC" NAME="General Motors" PRICE="38.1000"/>
		<z:row SYMBOL="FORD" NAME="Ford Motor" PRICE="15.6700"/>
		<z:row SYMBOL="UAL" NAME="United Airlines" PRICE="7.6400"/>
		<z:row SYMBOL="IBM" NAME="IBM" PRICE="15.0500"/>
	</rs:data>
</xml>

 

  • BuyListContent.htm
  1. In Frontpage, open PortfolioContent.htm.
  2. Save as BuyListContent.htm
  3. Test using the browser address line of:
    • C:/Project/BuyList.xml
  4. You should get an error.
  • First cut
  1. Modify BuyListContent.htm to output stock SYMBOL, NAME and PRICE.
  2. Save and test using the browser address line of:
    • C:/Project/BuyList.xml
  • Second cut - The table generated needs to be inside a form.
  1. Define the form above the <table.. by:
    • <form name="StockListForm" method="get" action="BuyStock.asp">
  2. Add a column titled Number to the table.
  3. Immediately after </table> terminate the form by:
    • </form>
  4. Save and test using the browser address line of:
    • C:/Project/BuyList.xml
  • Third cut - The form needs text boxes for each stock and a Submit button.
  1. Add text input in the Number column after the @PRICE is displayed:
    • <input type="text" value="0" name="IBM" />
  2. Add a Submit button to the form.
    • Hint:    Don't name the SUBMIT button. Defining a name attribute on the SUBMIT button will send the button on the URL along with the other input attributes.
  3. Save and test using the browser address line of:
    • C:/Project/BuyList.xml
    • Enter some numbers.
    • Submit.
  4. You may have received an error but, more importantly, the address line holds what was sent to the BuyStock.asp script. Note that IBM is repeated, we need the actual stock symbol instead.
  • Fourth cut - The input needs the @SYMBOL instead of name="IBM" for each stock.
  1. Change "IBM" to "@SYMBOL"
    • <input type="text" value="0" name="@SYMBOL" />
  2. Save and test using the browser address line of:
    • C:/Project/BuyList.xml
    • Enter some numbers.
    • Submit.
  3. That's worse!
  • Fifth cut - Problem is we need the @SYMBOL value by:
    • <xsl:value-of select="@SYMBOL" />
  1. Change @SYMBOL to <xsl:value-of select="@SYMBOL" />
    • <input type="text" name="<xsl:value-of select="@SYMBOL"/> "/>
  2. Save and test using the browser address line of:
    • C:/Project/BuyList.xml
  3. That's even worse! Now we have a syntax error!
  • Sixth cut - Problem is the '<' of '<xsl':
    • <input type="text" name="<xsl:value-of select="@SYMBOL"/> "/>
    which means the start of some tag. Since <input started a tag the <xsl confuses the parser.
    We need to hide the < of <input from the parser by using:
    •  <xsl:text>&lt;input type="text" name="</xsl:text>
where &lt; is < and &gt; is >, which must also be hidden.
  1. Change: <input type="text" name="<xsl:value-of select="@SYMBOL"/> "/>
    • <xsl:text>&lt;input type="text" name="</xsl:text>
    • <xsl:value-of select="@SYMBOL" />
    • <xsl:text>" value="0" /&gt;</xsl:text>

  2. Save and test using the browser address line of:
    • C:/Project/BuyList.xml 
  3. Still not right!
  • Seventh and FINAL cut - Problem is the &lt; and &gt; now which the browser is displaying as < and >. We need &lt; used as < and &gt; used as >. Done by  
    • <xsl:text disable-output-escaping="yes">
  1. Change <xsl:text> to:
    • <xsl:text disable-output-escaping="yes">
    • The complete XSL should be:
      <xsl:text disable-output-escaping="yes">&lt;Input Type="TEXT" Name='</xsl:text>
      <xsl:value-of select="@SYMBOL" />
      <xsl:text disable-output-escaping="yes">' value="0" size="4"/&gt;</xsl:text>      		 
     
  2. Save and test using the browser address line of:
    • C:/Project/BuyList.xml
    • Enter some numbers.
    • Submit.
  3. The browser address line should hold the SYMBOL and number of stock to buy similar to:
    • BuyStock.asp?MSFT=4&GMC=0&FORD=5&UAL=0&IBM=0

 

SellListContent.htm

  1. Lists all stocks owned by a trader.
  2. Displays SYMBOL, NAME, PRICE, SHARES, STOCKVALUE.
  3. Provides a text box for entry of number of stocks to buy.
  4. Submits SYMBOL and number of each stock using a form defined as:

    <form name="StockSellForm" method="get" action="SellStock.asp">

The below XML for testing has been copied to the Project directory.

SellList.XML
<?xml-stylesheet type="text/xsl" href="SellListContent.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>

 

  • SellListContent.htm

The solution is nearly the same as BuyListContent.htm.

  1. In FrontPage, open BuyListContent.htm.
  2. Save as SellListContent.htm
  • First cut
  1. Modify SellListContent.htm to output SYMBOL, NAME, PRICE, SHARES, STOCKVALUE.
  2. Save and test using the browser address line of:
    • C:/Project/SellList.xml
  • Second cut - Need column for Sell titled and text input.
  1. Add as the last column titled Sell to the table.
  2. Add text input in the last column by:
    • <input type="text" ...
    • Follow the same approach used in BuyListContent.htm for input.
  3. Change the <form action="BuyStock.asp"... to SellStock.asp.
  4. Test:
    • Enter a number of stocks to sell.
    • Submit. The address line should be similar to:

      SellStock.asp?MSFT=5&FORD=10&IBM=0

 

 

CartSummaryContent.htm

  1. Lists all stocks in the shopping cart.
  2. Displays TRADEID, SYMBOL, SHARES, PRICE, BUY.
  3. Provides a check box for whether to remove trade from cart.
  4. Submits boxes checked using a form defined as:
    <form name="CartListForm" method="get" action="CartEdit.asp">

The below XML for testing has been copied to the Project directory.

CartSummary.XML
<?xml-stylesheet type="text/xsl" href="CartSummaryContent.htm"?>

<xml xmlns:rs="urn:schemas-microsoft-com:rowset" xmlns:z="#RowsetSchema">
	<rs:data>
		<z:row TRADEID="95" ID="Ray" SYMBOL="IBM" PRICE="20.0000" SHARES="5" BUY="False"/>
		<z:row TRADEID="100" ID="Ray" SYMBOL="MSFT" PRICE="10.0000" SHARES="10" BUY="True"/>
		<z:row TRADEID="101" ID="Ray" SYMBOL="MSFT" PRICE="10.0000" SHARES="100" BUY="False"/>
	</rs:data>
</xml>

 

  • CartSummaryContent.htm

The solution is similar to BuyListContent.htm and SellListContent.htm.

  1. In FrontPage, open BuyListContent.htm.
  2. Save as CartSummaryContent.htm
  • First cut
  1. Modify CartSummaryContent.htm to output TRADEID, SYMBOL, SHARES, PRICE, BUY.
  2. Save and test using the browser address line of:
    • C:/Project/CartSummary.xml
  • Second cut - Need column for Remove titled and checkbox.
  1. Add as the last column titled Remove to the table.
  2. Add checkbox in the last column by:
    • <input type="checkbox" name="@TRADEID"/>
  3. Create the <form action="CartEdit.asp" file similar to the BuyStock.asp. The file must have at least one line.
  4. Save and test using the browser address line of:
    • C:/Project/CartSummary.xml
    • Check 2 boxes.
    • Submit.
  5. Address line looks similar to:
    • CartEdit.asp?@TRADEID=on&@TRADEID=on

    but we need each TRADEID identified. The address line should be:

    • CartEdit.asp?95=on&101=on
  • Third cut - Problem is same we had for the @SYMBOL in BuyListContent.htm but here we have:
    • <input type="checkbox" name="@TRADEID"/>

    Follow the same approach for @TRADEID.

     

  • Fourth cut - The BUY field of the Cart table has a True or False value. Rather than displaying True or False in the Buy/Sell column, display Buy when @BUY is True or Sell when @BUY is False. The <xsl:if was discussed earlier in class, click for the notes.
    • Use:
      •  <xsl:if
      • test="@BUY = 'True'"

 

Assignment

Implement:

  1. List current stock holdings and value (PortfolioContent.htm) - Completed in class.
  2. List the trader summary (TraderSummaryContent.htm) - Mostly completed in class.
  3. List available stocks to buy (BuyListContent.htm). - Mostly completed in class.
  4. List stocks owned to sell (SellListContent.htm).
  5. List shopping cart contents (CartSummaryContent.htm).

Turn in