Assignment 1 - E-Commerce Site Backend - Part I

Many e-commerce sites need a convenient and reliable method for non-technical people to maintain product and customer information. Providing clients with direct access to the database is risky since it allows them to inadvertently delete data, change settings, modify key fields, enter invalid data, etc. A better approach is to provide a web interface that validates inputs, allows access to only the fields that are needed to maintain the content, maintains referential integrity between database tables and provides a convenient way to upload product images. In this exercise you will construct administration pages for maintaining the product descriptions in simple e-commerce site.

ASP.NET drag-and-drop DataSource controls are a convenient tool for building administration page. While they lack flexibility, Visual Studio's wizards will write most of the SQL statements and the controls automatically handle the page events.

The site will use a database named RetailStore with the following tables:

tblProducts

tblProductCategories

tblCategories

1. Create database and populate with sample items: The products sold by your store can be anything you like as long as they are legal, tasteful and images are available. The products can be CD's, which will make it easier to recycle code from MIS 324. The sample site sells photographs.

Use VWD to create the tables shown above and add data for 2 or 3 products. To add data in VWD right-click on the table and select "Show Table Data."  Also add a few product categories appropriate for your products and add rows to tblProductCategories to assign products to categories.

2. default.aspx - Although the focus of this assignment is the administrative backend page you will also need a few front-end pages for displaying the products in the database. The default page displays a few randomly selected products from the database. It uses a MasterPage for the layout and user controls for the header, footer and menu. You may either copy the design from your MIS 324 music store project or create a new design.  The data access can be done using the DataAccess class (from MIS 324) or with the sqlDataSource controls.

To simplify the transfer of .aspx files from Visual Studio to Yorktown I recommend using the same directory structure in both environments. The name of your application root folder does not have to be the same, but subdirectories should use the same names and organization. For instance, your parallel directory structure could look something like this:

Visual Studio:     VSWeb--> MIS424 --> RetailStore --> admin

Yorktown:         SmithA --> MIS424 --> RetailStore --> admin

where "VSWeb" and "SmithA" are the application root folders.

This file organization will allow you to take advantage of ASP.NET's tilde (~) feature for relative file paths. ASP.NET's server controls interpret the ~ as "start at the application root folder." For instance, if you have a hyperlink in your master page that you always want to point to RetailStore/default.aspx, regardless of the location of the page with the hyperlink, the syntax would be:

<asp:HyperLink NavigateUrl="~/MIS424/RetailStore/default.aspx">Home</asp:HyperLink> 

This article Using the Tilde ~ in ASP.NET describes this convenient feature in greater detail.

 

2. Admin/default.aspx - This page provides a login-protected menu of administrative functions. The username and password for the sample site are both "mis424".

The sample site uses the MasterPage created for the front-end. This is optional.

Create a page default.aspx with links to admin pages as shown in the sample.

 

3. Admin/Login.aspx - Only authorized users are allowed to access the admin pages.  ASP.NET provides a number of options for authenticating and authorizing users. We will use "forms authentication" which allows users to be authenticated against any data source (database, web.config file, static code, LDAP, etc).  The credentials for authorized users will be stored in web.config as shown in the article Using Forms Authentication. (MacDonald pp. 718-720 also shows how to set up web.config files and pp. 726-728 describe the login page) Steps:

1. Copy the code from the 15Seconds.com article above for Login.aspx.

2. Configure forms authentication for your application: The following code snippet configures your application to use forms authentication and allows anonymous users to access the files. Add the following to the system.web section of the web.config file located in your application root folder. Authentication methods can be configured only in the application root folder.

<authentication mode="Forms">
<forms name="appNameAuth" path="/" loginUrl="~/RetailStore/admin/login.aspx" protection="All" timeout="30">
<credentials passwordFormat="Clear">
<user name="jeff" password="test" />
<user name="mike" password="test" />
<user name="mis424" password="mis424" />
</credentials>
</forms>
</authentication>
<authorization>
<allow users="*" />
</authorization>


3. The following code denies authorization to anonymous users.  Add it to a web.config file in your "admin" folder:
   
   <system.web>
   <authorization>
   <deny users="?" />
   </authorization>
   </system.web>
   

4. Return to the admin menu page (default.aspx) and add a logout button. The code for signing out of FormAuthentication is simple.

5. Note: ASP.NET includes a login control. However the method used above is less complicated.

4. EditProducts.aspx - This page uses a GridView control to display the products in the database and a DetailsView control to edit individual database records. Each control uses a separate DataSource control. The steps below use Visual Studio's wizards to configure the controls.

Steps:

1. In your admin folder add a new .aspx page named EditProducts.aspx

2. Switch the view to "design" and from the toolbox drag a GridView onto the design surface.

3. Click on the Gridview's smart tag and from "Choose data source" dropdown list select "new data source."

4. In the Data Source Configuration Wizard select "Database" and click OK. In the Configure Data Source window select "RetailStore" and click "next."

5. Configure Select Statement: Select tblProducts and check each of the fields. Order by ItemName. Click next and test the query. Click finish.

6. Add a "Select" column by clicking the smart tag and checking "enable selection."

7. The next step is to configure a DetailsView to edit individual records.

8. From the toolbox drag a DetailsView control onto the design surface below the GridView.

9. Click the DetailsView smart tag and and from "Choose data source" dropdown list select "new data source."

10. In the Data Source Configuration Wizard select "Database" and click OK. In the Configure Data Source window select "RetailStore" and click "next."

11. Configure Select Statement: Select tblProducts and check each of the fields. Click the "Where" button, select column: ProductID, Source: Control, Control ID: GridView1, click "Add" and OK.

12. Click the "Advanced" button and select "Generate Insert, Update and Delete statements." Note: this option will not be available if you have not defined a primary key on tblProducts. Click OK.

13. Click "next >" and test the query. It will prompt you for a product ID. Click Finish.

14. Expand the width of the DetailsView by dragging the edge with the mouse.

15. Click the DetailsView smart tag again and click enable inserting, editing and deleting. Close the smart tag and test the page.

16. Product descriptions can be quite long and in edit mode the description field is displayed in a single-line textbox. The next step is to convert this to a template field so the textbox can be enlarged.

17. Click on the DetailsView smart tag, click "edit fields", from selected fields click on "Description". Click "Convert this field into a TemplateField." Click OK.

18. Still in the smart tag, click "Edit Templates."  Select "EditItemTemplate" Use the mouse to expand the size of the textbox and change its TextMode property to "MultiLine." Do the same for the InsertItemTemplate.

19. Add an anchor tag "Refresh Page." This is needed because the GridView control is not updated when changes are made in the DetailsView.

5. ImageManager.aspx - Many e-commerce sites need a convenient way to upload and resize images. In this exercise you are provided with a simple image upload and resize utility. You will modify it to save each image in three different sizes. 

Steps:

1. Copy ImageManagerOriginal.aspx.txt into you admin folder, rename it "ImageManager.aspx," and get it running. It requires a folder named "ProductImages" located in your RetailStore folder for saving product images.
2. Modify the code so that it automatically saves each uploaded file in three sizes (thumb, medium and large). You can specify whatever sizes will work well on your site.
3. The image upload code consist of five basic steps:
   1. Upload file from client into an image object named _img
   2. Calculate the height and width of the new image to retain its height/width ratio and avoid distortion.
   3. Resize image into a new image object named _newImg
   4. Delete the image file if it already exist on the server
   5. Save resized image to server
4. You will need to modify the code so that step 1 is done once and steps 2-5 are done 3 times. I recommend creating a new subroutine that accepts four parameters: _fileName, _LargestDimension, NewImageNameExtension, _img.
5. Move steps 2-5 into the new subroutine and modify code as needed.
6. It is necessary to insert a size designation into the file name. For instance, change Baker.jpg to Baker.Large.jpg. One approach is to search for the final dot (.jpg, .gif, etc.) and replace it with the file designation. The syntax is:
   
   int indexOfDot = _fileName.LastIndexOf(".");
   _fileName = _fileName.Insert(indexOfDot, NewImageNameExtension);
   
   where NewImageNameExtension is something like ".Large."

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 other correspondence to ).
2. cc. a copy to yourself.

The subject line of your email should read "MIS424 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.