ITSD 325 Unit 2 Individual Submission Instructional Guide

Guide to Creating Navigation

Complete the following steps:

1. Open Home.aspx (the page you created in Unit 1). 2. Switch to Design view mode. (This is in a trio of buttons just below the editing window.) 3. Drag Catalog.aspx from Solution Explorer onto the page where you want it to appear. 4. Repeat the above step to add a link to ShoppingCart.aspx.

Repeat these steps on the other two pages to ensure that each page in your site has navigation that can reach the other two pages.

Guide to Gathering Product Info

Complete the following steps:

1. Create a list of at least six and no more than eight products that you intend to offer on your e- commerce site. Each item on the list will need the following information:

a. The name of the product b. A brief description or catchy attention-getter (no more than 50 characters) c. A more detailed summary of the product (no more than 50 characters) d. The price you intend to sell the product for (no more than $1,000) e. An image to represent the product

2. In your project in Visual Studio, create a folder in Solution Explorer called “images”. Add the images you’ve collected to this folder. This can be accomplished via drag-and-drop, or by right-clicking on the new folder, then clicking “Add”, then clicking “Existing Item”.

Important Note: It is recommended that each image not exceed 200 pixels in height or width. Any size image can be used, but larger images may present challenges with the layout of the catalog in Unit 3. Similarly, images that are smaller than 50-75 pixels may create layout issues but are also allowed.

Guide to Creating the Database

Watch the tutorial “Creating the Database” (see Learning Activities), and then create a suitable database in your project following the steps below.

1. In your project (in Visual Studio), in Solution Explorer, right-click on the App_Data folder, then click on Add, then New Item

2. In the Add New Item screen, on the left side, under Visual C#, select the category Data 3. In the middle part of the screen, ensure that SQL Server Database is selected 4. Click Add

The database will appear under the App_Data folder. Next we need to add the products to the database. Complete the following steps:

1. Double-click on the database in the App_Data folder (Database1.mdf). This will cause the Server Explorer window to open in Visual Studio.

2. In Server Explorer, expand Data Connections, which should display your database (Database1.mdf) 3. Expand Database1.mdf to see the available folders for this database

4. Right-click on the Tables folder, then click on Add New Table. This will open Table Designer in the editing (center) window.

5. In Table Designer, add the following information (use the same capitalization as shown!): a. Replace Id with ProdID b. In the second row, enter the name ProdName and the Data Type varchar(50) c. In the third row, enter the name ProdDescription and the Data Type varchar(50) d. In the fourth row, enter the name ProdSummary and the Data Type varchar(50) e. In the fifth row, enter the name ProdPrice and the Data Type varchar(50) f. In the sixth row, enter the name ProdImage and the Data Type varchar(50)

6. Click the Update button (top left of the editing window) 7. In the query window (below), locate the first line of the query, which begins with CREATE TABLE.

Edit this line, replacing [Table] with [Products]. (This will change the name of the table from the generic name Table to the more specific name Products.)

8. In the Preview Database Updates window, click “Update Database”. (This may take a few seconds to complete.)

9. Close the Table Designer window.

10. Refresh the Server Explorer window by clicking the circular arrow icon: Or, if necessary, close and reopen Visual Studio and your project. Your new Products table should appear in the Tables folder.

Note: The “Allow Nulls” column should remain unchecked for the ProdID row, but may remain checked for the other rows.

Complete the steps below to add your products to the database:

1. In Server Explorer, right-click on the Products table and click Show Table Data 2. Enter the following information (as you type, red-circled exclamation points will appear, indicating

that the record has not yet been committed to the database): a. ProdID: 1 b. ProdName: The name of your first product c. ProdDescription: The brief, one-line description of the product d. ProdSummary: The longer summary of the product (max 50 characters, see note below) e. ProdPrice: The price of the product f. ProdImage: The image filename of the product (from the images folder in Solution

Explorer) g. When you reach the end of the line, hitting the TAB key will commit the record to the

database (the red-circled exclamation points will disappear)

Note: If your summary exceeds 50 characters, when you reach the end of the line you’ll get an error message from SQL Server saying “No row was updated” along with a technical explanation that the data “would be truncated”. If this happens, click “OK” and then shorten the product summary until the message no longer appears.

Important Tip: This input screen does not allow empty cells, so if you need to cancel data entry while amid a row, just hit the Escape key on your keyboard. If you need to remove a record that has already been committed to the database, you can either change its data or right-click on the row on the left row edge and then select Delete.

Repeat the above steps until all your products have been entered in the Products table in your database.