BIS 450 DeVry Week 4 I Lab 4
Create successful ePaper yourself
Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.
<strong>BIS</strong> <strong>450</strong> <strong>DeVry</strong> <strong>Week</strong> 4 I <strong>Lab</strong> 4<br />
Downloading is very simple, you can download this Course here:<br />
http://wiseamerican.us/product/bis-<strong>450</strong>-devry-week-4-ilab-4/<br />
Or<br />
Contact us at:<br />
SUPPORT@WISEAMERICAN.US<br />
<strong>BIS</strong> <strong>450</strong> <strong>DeVry</strong> <strong>Week</strong> 4 i<strong>Lab</strong> 4<br />
<strong>BIS</strong><strong>450</strong><br />
<strong>BIS</strong> <strong>450</strong> <strong>DeVry</strong> <strong>Week</strong> 4 i<strong>Lab</strong> 4<br />
i<strong>Lab</strong> 4 of 8: Food Information Guide<br />
Submit your assignment to the Dropbox located on the silver tab at the top of this page.<br />
(See Syllabus/”Due Dates for Assignments & Exams” for due dates.)<br />
i L A B O V E R V I E W<br />
Scenario/Summary<br />
You have been asked to add a Food Information Guide page to the Healthy Eating Web site. This feature will allow the<br />
user to search for a specific food, and will display the number of calories in that food. Dr. Dinewell tells you that calorie<br />
information for about 7,000 foods is available from the U.S. government in the form of a Microsoft Access database.<br />
You will create an ASP.NET Web form to allow the user to search for a food, and retrieve and display the calorie<br />
information for that food from a Microsoft Access database.<br />
Source of food data: US Department of Agriculture National Nutrient Database for Standard Reference (SR22),<br />
http://www.ars.usda.gov/Services/docs.htm?docid=18879<br />
Deliverables<br />
1. Microsoft Access database file (HealthyEating.mdb) uploaded to database folder on the Web server.<br />
2. Food Information Web form (FoodInfo.aspx) added to the Healthy Eating Web site on the Web server.<br />
3. Word document with screenshot of Food Information Web form displayed in browser (Your Name <strong>BIS</strong><strong>450</strong> <strong>Lab</strong>4<br />
Screenshot.docx). Screenshot must show the complete browser window including the URL of the page.<br />
Grading Rubric<br />
Criteria Points %<br />
Step 2: Upload Microsoft Access Database File (HealthyEating.mdb)<br />
• Database file uploaded to database folder on the Web server 2 8%<br />
Step 3: Create Food Information Guide Web Form (FoodInfo.aspx)<br />
• FoodInfo.aspx created in your web folder<br />
• Has standard page header, navigation menu, and page footer<br />
• Form title “Food Information Guide” in bold<br />
• Input controls: textbox for food
• Button for Find Food Info<br />
• AccessDataSource control<br />
• GridView control 10 40%<br />
Step 4: Configure AccessDataSource Control<br />
• Connected to HealthyEating.mdb in database folder<br />
• Retrieves Food, Amount, and Calories columns from Foods table<br />
• Parameter query with LIKE operator bound to txtFood textbox 5 20%<br />
Step 5: Configure GridView Control<br />
• Bound to AccessDataSource control on form<br />
• Displays columns Food, Amount, Calories<br />
• Simple AutoFormat applied 5 20%<br />
Step 6: Test, Capture Screen Shot, and Submit (Student Name <strong>BIS</strong><strong>450</strong> <strong>Lab</strong>4 Screenshot.docx)<br />
• Word file submitted to Dropbox with screen shot of search results for “lobster” 3 12%<br />
Total 25 100%<br />
i L A B S T E P S<br />
PREPARATION<br />
1. Download the HealthyEating.mdb Microsoft Access database file from Doc Sharing and save it in your working folder<br />
for this lab.<br />
2. Using the Citrix remote lab:<br />
a. Follow the login instructions located in the i<strong>Lab</strong> tab in Course Home.<br />
b. Upload the file you downloaded from Doc Sharing into your <strong>BIS</strong><strong>450</strong><strong>Lab</strong>s folder on your Citrix drive. (You created this<br />
folder in <strong>Week</strong> 1).<br />
STEP 1: Open Web Site on the <strong>DeVry</strong> Web Server<br />
1. Launch Microsoft Visual Studio 2010.<br />
You must use Visual Studio 2010 in the Citrix environment.<br />
2. Pull down the File menu and select Open, then select Web Site. In the Open Web site dialog, select FTP Site in the<br />
left column. The connection information you used in the previous lab should be displayed:<br />
• Server: bisweb.devry.edu<br />
• Port: 21<br />
• Directory: coursefolder/yourname, where coursefolder = folder on the web server for your course (provided by your<br />
professor), and yourname = your first initial and last name, (e.g. jsmith for student John Smith).<br />
• Passive Mode and Anonymous Login: Both unchecked.<br />
• Username: acadDnnnnnnnn, where Dnnnnnnnn = your DSI number.<br />
• Password: Enter the same password as you use for Citrix i<strong>Lab</strong> (must be re-entered each time).<br />
Click Open.<br />
STEP 2: Upload Microsoft Access Database File<br />
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<br />
the correct permissions assigned to allow ASP.NET to work with the database. The database file must be located in<br />
this folder in order to work correctly.<br />
2. Pull down the Website menu and select Add Existing Item.<br />
3. In the Add Existing Item dialog, navigate to where you saved the HealthyEating.mdb database file that you<br />
downloaded from Doc Sharing. (If you are working on the Citrix i<strong>Lab</strong> server, and you saved the file on your local<br />
computer, remember that your local computer’s disk drives are the ones with dollar signs $.) Select the<br />
HealthyEating.mdb file and click Add.<br />
You should now be able to see the HealthyEating.mdb file located under the database folder in the Solution Explorer<br />
window. (You may need to click the + symbol beside the database folder to expand it, in order to see this.)<br />
STEP 3: Create Food Information Guide Web Form<br />
1. In the Solution Explorer window, click on the Web site root (ftp://bisweb.devry.edu/coursefolder/yourname) to select<br />
it; then add a new Web form named FoodInfo.aspx to the site.<br />
2. Set the Title property of the Document to Food Information Guide.<br />
3. Attach StyleSheet.css to the Web form.<br />
4. As you did when setting up the Web forms in the previous labs, open Default.htm and copy the contents of its element<br />
(in HTML, everything in between the and tags, but not the and tags themselves). Paste these contents inside the div in<br />
FoodInfo.aspx (in HTML, in between the<br />
and<br />
tags). Delete the contents of the #main div after pasting.<br />
5. Inside div#main, type Food Information Guide as a heading for the form, followed by a blank line. Bold this heading.<br />
6. Type the prompt Food:. To the right of this prompt, place a TextBox from the Standard section of the Toolbox. To<br />
the right of the TextBox (on the same line), place a Button. Set the properties of each control as indicated below:<br />
Control (ID) Text<br />
TextBox txtFood<br />
Button btnFindFood Find Food Info<br />
7. Use the Enter key to move to the next line on the form. Drag an AccessDataSource control from the Data section of<br />
the Toolbox onto the Web form. When you first place the AccessDataSource on the form, it will have a “smart tag”<br />
labeled “Access Data Source Tasks” beside it. We will use this later when we configure the data source.<br />
TIP: You can display or hide the smart tag by selecting the control and then clicking the < or=""> at the right corner of<br />
the control.<br />
8. Click to the right of the AccessDataSource control on the form and use the Enter key to move to the next line. Drag<br />
a GridView control from the Data section of the Toolbox onto the form. If necessary, hide the smart tag (by clicking the<br />
< button)="" and="" drag="" the="" right="" edge="" of="" the="" gridview="" control="" to="" stretch="" it="" across=""<br />
the=""><br />
Your Web form should now look like the following in Design View:<br />
9. Save the Web form.<br />
STEP 4: Configure AccessDataSource Control<br />
1. Click the AccessDataSource1 control and, if necessary, click the > button in the upper right corner to display the<br />
control’s smart tag. Click the Configure Data Source task in the smart tag.<br />
2. In the first screen of the Configure Data Source wizard, type database/HealthyEating.mdb in the Microsoft Access<br />
data file box; then click Next >.<br />
TIP: It is best to type in the path and name of the database file; clicking the Browse… button to select the database is<br />
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<br />
ASP.NET can find your database folder inside your personal folder on the Web server.<br />
3. In the second screen of the Configure Data Source wizard, select the Specify columns from a table or view option.<br />
In the list of columns, place checks beside Food, Amount, and Calories. Click the WHERE… button. In the Add WHERE<br />
Clause dialog, select Food from the Column drop-down list. Select LIKE from the Operator drop-down list. Select<br />
Control from the Source drop-down list. Under Parameter Properties, set the Control ID to txtFood. Click the Add button<br />
and review the SQL WHERE clause expression that the wizard has built. Click OK.<br />
In the Configure Data Source wizard, review the complete SQL SELECT statement that the wizard has built, then click<br />
Next > button.<br />
4. In the third screen of the Configure Data Source wizard, click the Test Query button.<br />
In the Parameter Values Editor, enter apple in the Value column and click OK.<br />
You should see a list of foods containing the word “apple”, with amounts and calories. Click Finish.<br />
5. Save the Web form.<br />
STEP 5: Configure GridView Control<br />
1. Click the GridView control to select it. If necessary, click the > at the upper right to display the control’s smart tag.<br />
2. Beside Choose Data Source, select AccessDataSource1, and then click Auto Format.<br />
3. In the AutoFormat dialog, choose the Simple scheme and click OK.<br />
Your Web form should now look like this in Design View:<br />
4. Save the Web form.<br />
STEP 6: Test, Capture Screenshot, and Submit<br />
1. To test the Food Information Guide form, in the Solution Explorer window, right-click on FoodInfo.aspx and select<br />
View in Browser. Initially your form should look like this:<br />
2. Enter lobster in the textbox and click the Find Food Info button. You should see the following display:<br />
3. Capture a screen shot of the calculator displaying the above result, paste it into a Word document, and save it as<br />
Your Name <strong>BIS</strong><strong>450</strong> <strong>Lab</strong>4 Screenshot.docx. (Make sure that the browser URL is visible in your screenshot.) Submit this<br />
file to the <strong>Week</strong> 4 i<strong>Lab</strong> Dropbox.