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 7 - Music Store part 1

The music store project utilizes all of the tools and concepts covered so far in MIS 324 and adds a few more. In addition to models, views, controllers, Sql Server database, layouts, partial views, and cookies it also uses Amazon's Product Advertising API to retrieve music products from Amazon's database. When you have completed this project you will have a realistic e-commerce front-end with a shopping cart, checkout process, order history, and confirmation.

Parameter naming: The default routing includes an optional parameter named "id". We have not defined any additional routes so "id" is the only parameter name recognized. For example, the URL "/music/Detail/B0068CEGT0" is retrieved in the controller with the parameter "id":
public ActionResult Detail(string id) A parameter with a different name could be used but its name must be specified in the request. For instance the URL "/music/Detail?asin=B0068CEGT0" would be retrieved in the controller with: public ActionResult Detail(string asin)

  1. music/index - This page displays six random items selected from the music store database. Amazon's API does not support random items so the home page will utilize a Sql Server database.
    Steps:
    1. Database: Create a new Sql Server database named MusicStore. Use "New Query" in Visual Studio to execute the SQL scripts tblStylesAmazon.txt and tblDescription243.txt (paste the sql into VS and click "Execute.")  These scripts will create the two database tables and populate them with data.  tblSytles contains Amazon's music style names and search nodes IDs. tblDescription contains descriptions for 243 Amazon music items. tblDescriptions is used to display random items on the index page. The search,browse and details pages will retrieve item information from Amazon web services.
    2. web.config - Add two more connection strings for the MusicStore database.
    3. Model - Create a new model "MusicModels". Add a class named MusicItemModel with properties matching tblDescription. Add a second model named MusicStyleModel with properties matching tblStyles. 
    4. DataRepository - Copy CrudRepository and name it MusicRepository. Create a method named GetRandom() that selects six random records from tblDescription (similar to GetRandom() in BirdView).  The left menu also needs to be populated so copy GetColorCategories() from BirdView and name it GetMusicCategories. Modify the sql to query tblStyles (the SQL for categories does not require a join because all of Amazon's categories contain items).
    5. Controller - Copy BridViewController and name it MusicController. Use "replace all" to modify it to use MusicRepository. Comment out all the action methods except index() and _leftMenu(). The image below shows all of the action methods for the finished controller.
    6. View - index, search, and browse all have the same layout so we can use the same view. The following html & Razor code displays the music items. Create a view named index.cshtml and add the following code:
      @model IEnumerable<Mis324Assignments.Models.MusicItemModel>
      @using System.Text.RegularExpressions
      
      <h3 class="text-center">@ViewBag.message</h3>
      
      @if (Model != null)
      {
          <div class="row">
              @foreach (var item in Model)
              {
                  <div class="col-md-6 productContainerThumb ">
                      <a href='~/details/@item.ASIN'>
                          <div class="productTitle">@item.Title</div>
                      </a>
                      <div>
                          by <span class="productArtist">@item.Artists </span>
                      </div>
                      <a href='~/details/@item.ASIN'>
                          <img src="http://images.amazon.com/images/P@(item.ASIN).01._SCTHUMBZZZ_V1115763748_.jpg"
                               class='productImage' alt="@item.Title" title="@item.Title" />
                      </a>
                      <div class="productDescription">
                          @if (item.EditorialReviews != null)
                      {
                          //Remove HTML tags and truncate editorial review (partial HTML tags can
                          //mess up page layout.)
                          item.EditorialReviews = Regex.Replace(item.EditorialReviews, "<[^>]*>", String.Empty);
                          item.EditorialReviews =
                                  item.EditorialReviews.Substring(0, Math.Min(item.EditorialReviews.Length, 200));
                      }
                          @item.EditorialReviews
                          <a href='~/details/@item.ASIN'>
                              more...
                          </a>
                      </div>
                  </div>
              }
          </div>
      }
      
    7. _leftMenu partial view - Modify it to use MusicStyleModel and modify the other field names as needed to match MusicStyleModel
    8. Test
  2. Highslide JS
    Music Controller
    Music Controller (click to enlarge)
    Styling - Upgrade the styling. 
    1. Create a new CSS file named music.css and paste in the CSS from the sample site (unless you prefer to write your own). Modify the CSS tag in _Layout to point to the new CSS file.
    2. Edit the HTML in _Layout to achieve the look that you desire. (Tip: The inspection feature in Chrome's developer tools is a convenient way to see the styles that have been used in the sample site.)
    3. Links: Change the header to include links to about, cart, and account. The logo should link to index. Links should use the tilde (~) to point to the application root. For instance a link with this format in the browser:
      /students/174/csandvig/content/images/music/logo55.png
      
      uses this format in the MVC View:
      ~/content/images/music/logo55.png
      
      The tilde points to the application root both in VS and on the server.
    4. The index view will be used for index, search and browse. Each page should have an appropriate heading.  The Index view provided above already contains @ViewBag.message.  In the controller action methods assign an appropriate heading for the index page.
    5. The page title can also be set in the controller. Remove ViewBag.Title from index view and add the following to the index action handler in the controller.

      ViewBag.Title = "MVC Music";

  3. music/search - The search, browse, and details pages all utilize Amazon's Product Advertising API to retrieve product information. The search page takes a user query as an input parameter and displays products obtained from Amazon's API. The first few steps set up your project to access Amazon's API.
    Steps:
    1. To use Amazon's API you need to add Microsoft.Web.Web3.dll to your application.  In VS under "Tools" open the Nuget package manager console and type:
      Install-Package Microsoft.Web.Services3 
      
    2. Supporting files: Consistent with MVC's separation of concerns design pattern we will put the code for accessing Amazon's data in the data repository namespace and access it via class methods. AmazonSearch.zip contains the files needed to access Amazon's API. Add them to your project as described in the following table. The easiest way to add files to a VS solution is to use Windows Explorer to paste them into the appropriate folder in your solution. Add them to your solution in VS by clicking the "show all files" icon in Solution Explorer then right clicking on the files and selecting "include in project."
      File Role Location
      AmazonHmacAssertion.cs Authentication (do not modify) DataRepository
      AmazonProductAdvtApi.cs API properties and methods (do not modify) DataRepository
      AmazonService.cs Calls service and returns List<MusicItemModel> DataRepository
      MusicItemModel.cs Additional item properties Add additional properties to your MusicItemModel
      MusicController.cs Calls Amazon service, handles exceptions Add needed code to your controller
    3. AccessKey - The AccessKey and SecretKey are located in Canvas under files. Please do not share these keys (You can also get your own keys from Amazon. They are free but require a credit card. Make sure to use IAM (identity and access management) keys for your protection.)
    4. Controller - Copy the relevant lines of code from the provided MusicController to your controller.
    5. View: Search has the same layout as index and uses the index view. How to specify a specific view (first answer).  Add ViewBag.message to the controller with an appropriate heading for the page.
    6. Test!
    7. Behind the scenes: The response from Amazon is formatted as XML. The XML is then mapped to the ItemSearchResponse class.  Here is a sample of the ItemSearchResponse XML file (view source) returned from Amazon.
  4.  music/browse - This is very similar to Search.  The browse page takes a browse node id as an input parameter and displays products obtained from Amazon's API. 
    1. Controller: Copy the action method for search and change as needed. searchType needs to be changed to "browseNode".
    2. Browse also uses the index view. Add ViewBag.message to the controller with an appropriate heading for the page.
  5. music/details -  The details view includes more item properties that the previous views. Although it displays only one item for simplicity we will keep the foreach loop.
    1. Copy the index view and name it details.
    2. Use Razor syntax to calculate "Our Price" and "You Save" from ListPrice. Syntax is similar to the following:
        <b>Our Price: </b><span class="priceOurs">@String.Format("{0:c}", item.ListPrice / 100 * Convert.ToDouble(0.8))</span>
      
    3. Add the additional fields shown in the sample site.
    4. Test!
  6. Search, browse, and details all require input parameters and will throw exceptions if not provided. Handle this scenario by adding the following statement to the top of the three action methods:
    if (id == null) return RedirectToAction("index");
    


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
Top