MIS 324 - Intermedidate Web Development Management Fall 2009

Last updated: 11/2/2009 12:13:54 PM

Assignment 6 -- MusicStore default, search and product pages

The goal of the music store project is to solidify your knowledge of ASP.NET and to provide you a significant item to add to your online portfolio. The project will be similar in functionality to the bookstore project that you constructed in MIS 314 but with the following enhancements:

  1. built entirely using in ASP.NET
  2. product information obtained from Amazon Product Advertising API (application interface).
  3. all database access via custom class (DataAccess)
  4. masterpages used to eliminate duplicate page layout script.
  5. improved design techniques, such as unique customer IDs (generated by the autonumber feature of the database), music style IDs, Order IDs and all user inputs will be validated using validation controls.

To keep files organized it is a good idea to put images and include files in subdirectories. This keeps the number of files in the main application directory from growing out of control. A recommended directory structure for your music store:

-Root Directory (i.e. SmithB)

-MusicStore

-includes (for your .ascx files)

-images (for logo, icons, etc.)

  1. MasterPage.master - Create a master page for your music store that contains a template for your page layout, including the header, footer, search/browse menu and page content. Create a store name and a custom logo. User controls that are used in the master page (header, menu, etc.) are declared in the master page.

    The browse menu should pass a styleID for each category, as shown on the sample site (default.aspx). The Music store database uses Amazon's style IDs which will be used in conjunction with Amazon web services on the SearchBrowse page. The sample also passes the style name which it displays on the search/browse page.

    Enhancements: the sample site contains several enhancements that are not required. Enhancements displayed on the sample site are:

    • graphics upgrade
    • right-column features: cart info, best sellers, visited pages
    • SearchBrowse page: sorting, paging
    • Product page: tracks, customer reviews, product recommendations
    • Checkout: city/zip database validation.
  2. You may wish to add some of these enhancements to your site for the final project but they are not required on the assignments.

  3. default.aspx - This page displays a few randomly selected items from the database. Steps:

    • Create the page using VWD. In the "Add New Item" dialogue box check the box "Select master page."  Test the page with some static text inside the "<asp:Content" tags.

    • Use a DataList to display a few random CD's from the database in default.aspx. SeachBrowse.aspx from assignment 5 is a good template. It retrieves data from a database using the DataAcess class and displays it in a DataList control. The SQL statement syntax for randomly selecting four records is as follows:

      SELECT TOP 4 strASIN, strTitle, strArtist, dblPrice, strImageDir, strReview
      FROM tblDescription
      ORDER BY NEWID()

    • Some of strASINs stored in the database has extra spaces at the beginning or end that can cause problems. Use the string object's Trim() method to trim off the extra spaces. Syntax:
          <%# Eval("strASIN").ToString().Trim() %>

    • The editorial description may be too long for the default page. Truncate the description using a function as shown in AmazonSearchSample.aspx.txt (view source).

    • If you would like to use a database with more items (105) for your default page you may use the Musicstore database located on the reliant server.

      • NOTE: This database cannot be accessed from off campus computers. It can be accessed by code running on Yorktown as well from Visual Studio via the campus network.
      • Add a new datasource using VWD:

        Data Source=reliant.cbe.wwu.edu,2767
        Initial Catalog=SandvigMusicStore
        User ID=WebGuest
        Password=guest

        • Two of the fields in my database have slightly different names than the one you downloaded previously. This is easily fixed by modifying your SQL statement as follows:
          Select ASIN as strASIN, decPrice as dblPrice, ...
           
  1. SearchBrowse.aspx - This page uses Amazon's Product Advertising API to retrieve product information from Amazon's massive product database. It is used to display both search and browse results.
    Steps:
    • Go to Amazon's Product Advertising API page and sign up for a free Amazon Web Services Developer key.

    • Add a reference to Amazon web services to your application WebReference folder. Add the web reference in VWD by right clicking on your application root (C:\....) and selecting "Add Web Reference." Paste in the following URL, name the web reference "Amazon2009" and click Add Reference.  This creates classes in your application that are a "proxy" for Amazon's API.  These new classes are visible with Intellisense.
    • http://webservices.amazon.com/AWSECommerceService/AWSECommerceService.wsdl

    • VS will add a new folder "App_WebReferences" to your application.
    • Note: the web reference must be named "Amazon2009" to work properly with the sample code provided.
    • Amazon's web service also requires that three additional classes be added to your application. Unzip the files AmazonWebServiceFiles.zip and add the three .cs files to your App_code folder.
    • Amazon's new security policy uses features from Microsoft's Web Service Enhancements which are not part of the standard .NET installation. The enhancements can be added to your Visual Studio application by adding the Bin folder from the zip in your application root directory. The Bin (binary) folder contains a file named Microsoft.Web.Services3.dll.
    • The Bin folder does not need to be uploaded to the Yorktown server since this feature is already installed.
    •  One of the three .cs files you added to your App_Code folder is named AmazonWebService.cs. This class acts as an intermediary between Amazon's complex classes and your .aspx pages. It's job is to hide some of the complexity of Amazon's classes and expose only the features that are needed for this project.  The advantages of this approach are:
      1. Amazon's services are used on two pages (SearchBrowse and Product) and the class eliminates the need to repeat the Amazon's code on both pages
      • Amazon's classes are rather complicated and includes many features that we won't use. Putting Amazons' classes into a new class hides these messy details.
    • Add your Amazon ID and secret key to AmazonWebService.cs
    • web.config - Amazon utilizes some newer classes introduced with .NET 3.5. The web.config file must reference these classes. This is achieved by using the large web.config file created by Visual Studio. If you have "small" web.config file (no assembly references) in your root directory, rename it (so you don't lose your database connection string), right click on your application root folder, select "add new item" and select web.config file. This will add a new complete web config file to your root folder. Copy and paste the connection strings from your old web.config file into the new one.
    • AmazonSearchSample.aspx (source) shows how to retrieve product information using the AmazonWebService class and display it with a DataList. Copy this code to your application and it should run.
      • If you receive an error about missing an assembly reference to Microsoft.Web.Service3 it means that .NET cannot find the .dll file inside the bin folder. Make sure that you put the Bin folder in your application root folder.
    • Modify the sample page to work with your masterpage.
    • Use Intellisense to display the parameter options for AmazonServices's ExecuteQuery method. It provides detailed information about the required parameters.
    • Modify the code to retrieve search information from the querystring and feed it into the web service.
    • Once you have search working modify your page to search by style. This is called a BrowseNode search. Replace the "Keywords" parameter with "BrowseNode".
    • Some of Amazon's product descriptions include HTML tags (tables, images, etc). These can cause problems when you truncate the descriptions since it may leave opening tags without closing tags. The solution is to use regular expressions to remove the tags with Regex.Replace(). If you have started a Utilities class a function something like "StripHTMLTags()" would be a usful addition.
    • Paging and sorting are not required but are nice enhancements.
    • Helpful documentation on Amazon E-Commerce Web Services:
  1. ProductPage.aspx - This page is very similar to SearchBrowse.aspx. It retrieves the item's ASIN from the querystring and performs a keyword search using the ASIN. Steps:
    • Use SearchBrowse.aspx as a template.
    • Display the additional fields shown in the sample. (note: AmazonService returns NumberOfTracks but this field is rarely populated.)
    • Display Amazon's medium sized image (see image properties on the sample site for src). Clicking on the image should display the large size image (example). The sample site uses LightBox to display the large image (this is an enhancement and not required).
    • Amazon provides price in cents (i.e. $14.95 is provided as 1495). Use the function "FormatCurrency" provided in AmazonSearchSample.aspx to reformat the currency.
    • Release date is returned as a string in the format "2007-09-18". There are two ways to make this more readable. The first is to use the string object's substring method to rearrange the string to something like "09-18-2007" The second and more elegant way is to parse out the year, month and day to populate a DateTime object (i.e. DateTime(year, month, day)).  The DateTime object provides many tools for working with dates, including formatting options. Its ToString() method can be used to output the date in a format such as "September 18, 2007" (DateTime Format documentation). Using the second method is considered to be a small extra-credit enhancement on the final project.  
    • Amazon's web service provides many additional data fields. Displaying additional fields, such as tracks, reviews, label, sales rank etc. is not required but are considered to be enhancements. AmazonService.cs must be modified to return these fields.
        
    • Remember, when you upload your files to Yorktown you do not need to upload the Bin folder or Microsoft.Web.Service3.dll which is inside the folder.

 


To submit your assignment for grading send an email with the URLs for your assignment to:

  1. Professor Sandvig at (note: this address is for homework assignments only. Please send correspondence to )
  2. cc. Kraig Pencil ( )
  3. cc. a copy to yourself

The subject line of your email should read "MIS324 AXX YourName" where XX is the assignment number. Please check that your URLs are correct before submitting them for grading. Files with incorrect URLs will not be graded.