Syllabus Schedule Project Labs Canvas Server Access CSS Tutorial Assignment 1 Assignment 2 Assignment 3 Assignment 4 Assignment 5 Assignment 6 Assignment 7 Assignment 8 Assignment 9

Assignment 6 -- Music Store 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:

  1. is built entirely using ASP.NET,
  2. uses Amazon's Product Advertising API to retrieve product information,
  3. incorporates a business layer (for shopping cart & checkout) and a data access layer,
  4. implements masterpages to eliminate duplicate page layout code,
  5. stores shopping cart and customer information in a Sql Server database.

To keep files organized it is a good idea to put images and include files in subfolders. A recommended directory structure for your music store:

-Root Folder (i.e. 141SmithB)

-MusicStore1

-controls (for your .ascx files)

-images (for logo, icons, etc.)

-bootstrap

  1. MasterPage.master - Copy your A05 UserControls folder and rename it "MusicStore1". Create a master page and paste in the page layout from the default page of your UserControls exercise. The ContentPlaceHolder control replaces the default text in the center column.

    You will need a store name and a custom logo for the final project. It may be added now or later. (Tip: try to keep the height of your header below 100 px. Excessively tall headers consume too much valuable space above the fold.)

    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 include:

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

    You may wish to add some of these enhancements to your site for the final project but they are not required on the assignments.

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

    • Add a new method named "SelectRandom()" to dbMusicStoreSample2008.cs. The sql looks like this:

      SELECT TOP 4 ASIN, Title, Artist, Price, Review
      FROM tblDescription
      ORDER BY NEWID()

    • 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.
    • Some of ASINs stored in the database have extra spaces at the beginning or end that can cause problems displaying images. Use the string object's Trim() method to trim off the extra spaces. Syntax:

      <%# Eval("ASIN").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). Create a new class called Utilities.cs and include truncate as a method. This will allow you to reuse this method (and others) on several pages.

  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:
    1. Amazon web services requries a developer key. You may use Prof. Sandvigs (included in the code) or go to Amazon's Product Advertising API page and sign up for for your own (they are free).

    2. Add Amazon Web Service classes to your application:

      1. 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 "Amazon2012" 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.
      2. http://webservices.amazon.com/AWSECommerceService/AWSECommerceService.wsdl
      3. VS will add a new folder "App_WebReferences" to your application.
      4. Note: the web reference must be named "Amazon2012" to work properly with the sample code provided.
      5. 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.
      6. 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.
      7. 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. Its job is to hide 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
        2. Amazon's classes are rather complicated and include many features that we won't use. Putting Amazons' classes behind a new class hides this complexity.
    3. Add your Amazon ID and secret key to AmazonWebService.cs
    4. Copy and modify AmazonSearchSample.aspx (source)
      1. The sample shows how to retrieve product information using the AmazonWebService class.
      2. 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.
      3. Modify the sample page to work with your masterpage.
      4. Modify the sample code to retrieve search information from the querystring and feed it into the web service.
      5. Once you have search working modify your page to search by style.
        • Use a "if else" statement to determine if the parameters in the querystring are requesting a KeyWord search or a BrowseNode search. Insert the appropriate parameters into the search.
        • Keyword search should like similar to this:

          dsResults = myAWS.AmazonSearch("keywords", "floyd", "1", "salesrank", "Music");

        • BrowseNode should look similar to this:

          dsResults = myAWS.AmazonSearch("BrowseNode", "30", "1", "salesrank", "Music");

      6. 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.
      7. Paging and sorting are not required but are nice enhancements.
    5. 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:
    1. Use SearchBrowse.aspx as a template.
    2. Display the additional fields shown in the sample. (note: AmazonService returns NumberOfTracks but this field is rarely populated.)
    3. 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).
    4. 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.
    5. 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.
    6. Descriptive page titles are important for search engines and for tabbed browsing. Add the title and artist to the page title with code similar to:

      string ProductTitle = dsProduct.Tables[0].Rows[0]["title"].ToString();
      string artist = dsProduct.Tables[0].Rows[0]["artist"].ToString();
      Page.Title = ProductTitle + " by " + artist + " - Music sample site";

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


Submission instructions: Submit assignments via the Canvas course management system. Submit the full URL for each exercise in the assignment, listing the URLs in the same order that they are listed in the assignment. To minimize typos in URLs it is strongly recommended that you copy the URLs from the address bar of the browser rather than trying to type them. Incorrect URLs will not be graded and no credit will be given.

When pages are connected via navigation (as in your music store project) it is only necessary to submit the URL of the first page.

Regular Expressions HTML Color Names Color Picker ASCII Character Codes Unicode Character Codes