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.
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:
a. Follow the login instructions located in the iLab tab in Course Home.
b. 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.
Place this order with us and get 18% discount now! to earn your discount enter this code: special18 If you need assistance chat with us now by clicking the live chat button.