Posted: May 26th, 2015

Web-Based Solutions

iLab 4 of 8: Food Information Guide

Submit your assignment to the Dropbox located on the silver tab at the top of this page. (See Syllabus/”Due Dates for Assignments & Exams” for due dates.)

 

i L A B O V E R V I E W

 

Scenario/Summary

You have been asked to add a Food Information Guide page to the Healthy Eating Web site. This feature will allow the user to search for a specific food, and will display the number of calories in that food. Dr. Dinewell tells you that calorie information for about 7,000 foods is available from the U.S. government in the form of a Microsoft Access database.

You will create an ASP.NET Web form to allow the user to search for a food, and retrieve and display the calorie information for that food from a Microsoft Access database.

Source of food data: US Department of Agriculture National Nutrient Database for Standard Reference (SR22), http://www.ars.usda.gov/Services/docs.htm?docid=18879

Deliverables

1. Microsoft Access database file (HealthyEating.mdb) uploaded to database folder on the Web server.
2. Food Information Web form (FoodInfo.aspx) added to the Healthy Eating Web site on the Web server.
3. Word document with screenshot of Food Information Web form displayed in browser (Your Name BIS450 Lab4 Screenshot.docx). Screenshot must show the complete browser window including the URL of the page.

Grading Rubric

 

Criteria	Points	%
Step 2: Upload Microsoft Access Database File (HealthyEating.mdb) Database file uploaded to database folder on the Web server	2	8%
Step 3: Create Food Information Guide Web Form (FoodInfo.aspx) FoodInfo.aspx created in your web folder Has standard page header, navigation menu, and page footer Form title “Food Information Guide” in bold Input controls: textbox for food Button for Find Food Info AccessDataSource control GridView control	10	40%
Step 4: Configure AccessDataSource Control Connected to HealthyEating.mdb in database folder Retrieves Food, Amount, and Calories columns from Foods table Parameter query with LIKE operator bound to txtFood textbox	5	20%
Step 5: Configure GridView Control Bound to AccessDataSource control on form Displays columns Food, Amount, Calories Simple AutoFormat applied	5	20%
Step 6: Test, Capture Screen Shot, and Submit (Student Name BIS450 Lab4 Screenshot.docx) Word file submitted to Dropbox with screen shot of search results for “lobster”	3	12%
Total	25	100%

 

 

i L A B S T E P S

 

PREPARATION

1. Download the HealthyEating.mdb Microsoft Access database file from Doc Sharing and save it in your working folder for this lab.
2. Using the Citrix remote lab:
3. Follow the login instructions located in the iLab tab in Course Home.
4. Upload the file you downloaded from Doc Sharing into your BIS450Labs folder on your Citrix drive. (You created this folder in Week 1).

STEP 1: Open Web Site on the DeVry Web Server

1. Launch Microsoft Visual Studio 2010.

You must use Visual Studio 2010 in the Citrix environment.

2. Pull down the File menu and select Open, then select Web Site. In the Open Web site dialog, select FTP Site in the left column. The connection information you used in the previous lab should be displayed:

• Server:bisweb.devry.edu
• Port: 21
• Directory: coursefolder/yourname, where coursefolder = folder on the web server for your course (provided by your professor), and yourname = your first initial and last name, (e.g. jsmith for student John Smith).
• Passive Mode and Anonymous Login: Both unchecked.
• Username: acad\Dnnnnnnnn, where Dnnnnnnnn = your DSI number.
• Password: Enter the same password as you use for Citrix iLab (must be re-entered each time).

Click Open.

STEP 2: Upload Microsoft Access Database File

1. In the Solution Explorer window, click on the database folder to select it.

TIP: The database folder should have been created automatically when your personal Web folder was created. It has the correct permissions assigned to allow ASP.NET to work with the database. The database file must be located in this folder in order to work correctly.

2. Pull down the Website menu and select AddExistingItem.

3. In the Add Existing Item dialog, navigate to where you saved the HealthyEating.mdb database file that you downloaded from Doc Sharing. (If you are working on the Citrix iLab server, and you saved the file on your local computer, remember that your local computer’s disk drives are the ones with dollar signs $.) Select the HealthyEating.mdb file and click Add.

You should now be able to see the HealthyEating.mdb file located under the database folder in the Solution Explorer window. (You may need to click the + symbol beside the database folder to expand it, in order to see this.)

STEP 3: Create Food Information Guide Web Form

1. In the Solution Explorer window, click on the Web site root (ftp://bisweb.devry.edu/coursefolder/yourname) to select it; then add a new Web form namedFoodInfo.aspx to the site.
2. Set the Title property of the Document to Food Information Guide.
3. Attach StyleSheet.css to the Web form.
4. As you did when setting up the Web forms in the previous labs, openDefault.htm and copy the contents of its<body> element (in HTML, everything in between the <body> and </body>tags, but not the <body> and </body> tags themselves). Paste these contents inside the div in FoodInfo.aspx (in HTML, in between the <div> and </div> tags). Delete the contents of the #main div after pasting.
5. Insidediv#main, type Food Information Guide as a heading for the form, followed by a blank line. Bold this heading.
6. Type the promptFood:. To the right of this prompt, place a TextBox from the Standard section of the Toolbox. To the right of the TextBox (on the same line), place a Button. Set the properties of each control as indicated below:

Control	(ID)	Text
TextBox	txtFood
Button	btnFindFood	Find Food Info

7. Use the Enter key to move to the next line on the form. Drag an AccessDataSource control from the Data section of the Toolbox onto the Web form. When you first place the AccessDataSource on the form, it will have a “smart tag” labeled “Access Data Source Tasks” beside it. We will use this later when we configure the data source.

TIP: You can display or hide the smart tag by selecting the control and then clicking the < or > at the right corner of the control.

8. Click to the right of the AccessDataSource control on the form and use the Enter key to move to the next line. Drag a GridView control from the Data section of the Toolbox onto the form. If necessary, hide the smart tag (by clicking the < button) and drag the right edge of the GridView control to stretch it across the form.

Your Web form should now look like the following in Design View:

9. Save the Web form.

STEP 4: Configure AccessDataSource Control

1. Click the AccessDataSource1 control and, if necessary, click the> button in the upper right corner to display the control’s smart tag. Click the Configure Data Source task in the smart tag.
2. In the first screen of the Configure Data Source wizard, typedatabase/HealthyEating.mdbin the Microsoft Access data file box; then click Next >.

TIP: It is best to type in the path and name of the database file; clicking the Browse… button to select the database is NOT recommended. If you do select the database by browsing, Visual Studio may insert a “~/” in front of the database folder. If you see this, delete the “~/”; make sure the path begins with “database”. This is necessary to make sure that ASP.NET can find your database folder inside your personal folder on the Web server.

3. In the second screen of the Configure Data Source wizard, select the Specify columns from a table or view option. In the list of columns, place checks beside Food, Amount, and Calories. Click the WHERE… button. In the Add WHERE Clause dialog, select Food from the Column drop-down list. Select LIKE from the Operator drop-down list. Select Control from the Source drop-down list. Under Parameter Properties, set the Control ID to txtFood. Click the Add button and review the SQL WHERE clause expression that the wizard has built. Click OK.

In the Configure Data Source wizard, review the complete SQL SELECT statement that the wizard has built, then click Next > button.

4. In the third screen of the Configure Data Source wizard, click the Test Query button.

In the Parameter Values Editor, enter apple in the Value column and click OK.

You should see a list of foods containing the word “apple”, with amounts and calories. Click Finish.

5. Save the Web form.

STEP 5: Configure GridView Control

1. Click the GridView control to select it. If necessary, click the> at the upper right to display the control’s smart tag.
2. Beside Choose Data Source, select AccessDataSource1, and then click Auto Format.
3. In the AutoFormat dialog, choose the Simple scheme and click OK.

Your Web form should now look like this in Design View:

4. Save the Web form.

STEP 6: Test, Capture Screenshot, and Submit

1. To test the Food Information Guide form, in the Solution Explorer window, right-click on FoodInfo.aspx and select View in Browser. Initially your form should look like this:
2. Enterlobster in the textbox and click the Find Food Info button. You should see the following display:
3. Capture a screen shot of the calculator displaying the above result, paste it into a Word document, and save it as Your Name BIS450 Lab4 Screenshot.docx. (Make sure that the browser URL is visible in your screenshot.) Submit this file to the Week 4 iLab Dropbox.