23.05.2017 Views

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.

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!