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:
- is built entirely using ASP.NET,
- uses Amazon's Product Advertising API to retrieve product information,
- incorporates a business layer (for shopping cart & checkout) and a data access layer,
- implements masterpages to eliminate duplicate page layout code,
- 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)
-controls (for your .ascx files)
-images (for logo, icons, etc.)
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.
- 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
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
<%# 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.
- 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
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).
Add Amazon Web Service classes to your application:
- 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.
- VS will add a new folder "App_WebReferences" to your application.
- Note: the web reference must be named "Amazon2012" to work properly with the sample
- 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.
- 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:
- 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 include many features that we won't
use. Putting Amazons' classes behind a new class hides this complexity.
- Add your Amazon ID and secret key to AmazonWebService.cs
- Copy and modify AmazonSearchSample.aspx (source)
- The sample shows how to retrieve product information using the AmazonWebService
- 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.
- Modify the sample 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.
- 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");
- 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:
- 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.
- 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.Rows["title"].ToString();
string artist = dsProduct.Tables.Rows["artist"].ToString();
Page.Title = ProductTitle + " by " + artist + " - Music sample site";
- 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
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.