N341 Home Work 4 - Project

 Modified: 

Thanks to Ken Bell and Ryan Hughes for suggesting to use variables to simplify embedding values from XML into HTML. Much simpler than my method. The source reference is: http://www.w3.org/TR/xslt20/#attribute-value-templates

Note

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

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:

  1. Open in Windows Explorer the directory containing the file, either the XML file or one referenced by the XML.
  2. Right click on the file and open Properties.
  3. 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:

  1. Download Streams, copy Streams.exe to Windows directory if possible.
  2. To unblock all the files in directory c:\temp and any subdirectories enter:

    Streams –d –s c:\temp

 

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 below.
  2. List the trader summary (TraderSummaryContent.htm) - Mostly completed below.
  3. List available stocks to buy (BuyListContent.htm). - Mostly completed below.
  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:
    • W:\N341\Project\PortfolioContent.htm
    • W:\N341\Project\Portfolio.xml
  3. Test using the browser address line of:
    • W:\N341\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:
    • W:\N341\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 W:\N341\Project directory.
  • PortfolioContent.htm
  1. Test using the browser address line of:
    • W:\N341\Project\Portfolio.xml
  2. Modify PortfolioContent.htm to output NAME of stock also.
  3. Save and test using the browser address line of:
    • W:\N341\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:
    • W:\N341\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:
    • W:\N341\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:
    • W:\N341\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:
    • W:\N341\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:
    • W:\N341\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:
    • W:\N341\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:
    • W:\N341\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:
    • W:\N341\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.
    While we cannot follow one < by another <, we can use XSL variables to accomplish the desired results:

    <xsl:variable name="x" select="@SYMBOL"/>

    assigns variable x the value of @SYMBOL. Then use the variable x within the HTML.

    <input Type="TEXT" Name='{$x}' value="0" size="4"/>
     

  1. Change: <input type="text" name="<xsl:value-of select="@SYMBOL"/> "/>
    <xsl:variable name="x" select="@SYMBOL"/>
    <input Type="TEXT" Name='{$x}' value="0" size="4"/>

  2. Save and test using the browser address line of:
    • W:\N341\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:
    • W:\N341\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:
    • W:\N341\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:
    • W:\N341\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).
  2. List the trader summary (TraderSummaryContent.htm).
  3. List available stocks to buy (BuyListContent.htm).
  4. List stocks owned to sell (SellListContent.htm).
  5. List shopping cart contents (CartSummaryContent.htm).

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

  1. 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 HW4.
  2. 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
  3. Email notification to rwisman@ius.edu with subject: YOUR NAME - N341 HW4 - username