BIS 450 DeVry All Week I Labs

Downloading is very simple, you can download this Course here:

http://wiseamerican.us/product/bis-450-devry-week-ilabs/

Or

Contact us at:

SUPPORT@WISEAMERICAN.US

BIS 450 DeVry All Week iLabs

BIS450

BIS 450 DeVry Week 1 iLab 1

Scenario/Summary

You have been asked to help Dr. Dinewell, a local nutrition specialist, create a website that provides information on nutrition and healthy eating to the public. Dr. Dinewell is providing this educational site as a service to the community and also to promote awareness of her nutritional consulting practice.

Dr. Dinewell wants the site to include the following features:

a home page with an introduction, some information about her consulting practice, and links to the other pages on the site;

a body mass index (BMI) calculator that allows visitors to enter their height and weight to determine if they are underweight, normal, overweight, or obese. Dr. Dinewell wants the BMI calculator to be available through a web browser and also through an application that visitors can use on a smartphone or other mobile device so that they can check their BMI on the go;

a daily calorie needs calculator that allows visitors to determine how many calories they need to consume each day to maintain their weight;

a page that allows visitors to search for popular foods and display how many calories they contain to help them manage their calorie intake;

a form that allows Dr. Dinewell to maintain the information on the calorie content of foods by adding, modifying, or deleting food records as needed. This form should be protected by a user name and password so that only Dr. Dinewell can access it; and

a page where visitors can enter their e-mail addresses to sign up for Dr. Dinewell’s nutrition newsletter. After entering their e-mail addresses, visitors should receive an automatic e-mail message confirming that they are signed up for the newsletter.

Fortunately, you do not have to do all of this at once! At this time, you will just create the style sheet and home page for the site. The other elements will be added in future weeks

 

BIS 450 DeVry Week 2 iLab 2

iLab 2 of 8: Body Mass Index Calculator

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 Body Mass Index (BMI) Calculator to the Healthy Eating website. Body Mass Index is a number that indicates whether an individual is underweight, normal, overweight, or obese, based on the individual’s height and weight.

Dr. Dinewell has provided you with the following specifications for the BMI Calculator:

  • Inputs: Height (inches) and weight (pounds)
  • Processing Formula: BMI = [ (weight in pounds) / (height in inches) 2 ] • 703
  • Outputs: Display BMI value and interpretation of BMI according to the following:

o BMI < 18.5:=””>

o BMI 18.5 to 24.9: Normal

o BMI 25.0 to 29.9: Overweight

o BMI >= 30.0: Obese

(Source: US Center for Disease Control, http://www.cdc.gov/healthyweight/assessing/bmi/adult_bmi/)

You will create an ASP.NET web form to accept the user inputs and display the results. Because Dr. Dinewell eventually wants the BMI calculation feature to be made available through a mobile app as well as through the website, you will create a BMI class to perform the calculations that can be shared between the web form and the mobile app. This will make it so you won’t have to code the calculations twice.

Deliverables

  1. The following files are added to the Healthy Eating website on the DeVry Web server:
  • BMI Calculator web form (BmiCalc.aspx) and code-behind file (BmiCalc.aspx.vb)
  • BMI Class file (App_Code/BMI.vb)
  1. Word document with screenshot of BMI Calculator web form displayed in browser (Your Name BIS450 Lab2 Screenshot.docx). Screenshot must show calculator test inputs and results. Screenshot must show the complete browser window, including the URL of the page.

Grading Rubric

Criteria Points %

Step 2: Create Shared BMI Class for Calculations (App_Code/BMI.vb).

  • Class file for BMI class created in App_Code folder
  • Class file contains method Calculate()
  • Class file contains method Interpret() 6 24%

Step 3: Create BMI Calculator Web Form (BmiCalc.aspx).

  • BmiCalc.aspx created in your Web folder
  • Has standard page header, navigation menu, and page footer
  • Form title “Body Mass Index (BMI) Calculator” in bold
  • Input textboxes for height and weight
  • Button for BMI calculation
  • Literal control below Button for display of results 10 40%

Step 4: Add Calculate BMI Event Handler in Code-Behind File (BmiCalc.aspx.vb).

  • Click event handler created for Calculate BMI button in code-behind file
  • Calls BMI.Calculate() method to calculate BMI
  • Calls BMI.Interpret() method to interpret BMI
  • Displays BMI value and interpretation 6 24%

Step 6: Test, Capture ScreenShot, and Submit (Student Name BIS450 Lab2 Screenshot.docx).

  • Word document with screenshot of calculator showing correct test results in browser submitted to Week 2 iLab Dropbox 3 12%

Total 25 100%

i L A B S T E P S

Preparation

  1. Download the file BIS450 Lab2 Code Snippets.txt from the iLab Files folder in Doc Sharing and save it in your working folder for this iLab.
  2. Using the Citrix remote lab:
  3. Follow the log-in instructions located in the iLab tab in Course Home.
  4. Upload the file that you downloaded from Doc Sharing into your BIS450Labs folder on your Citrix drive. (You created this folder in Week 1).

STEP 1: Open Website on the DeVry Web Server.

  1. Launch Microsoft Visual Studio 2010.

You must use Visual Studio 2010 in the Citrix environment.

  1. 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 that 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 Log-in: Both unchecked.
  • Username: acadDnnnnnnnn, 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: Create Shared BMI Class for Calculations

  1. In the Solution Explorer window, click on the website root (ftp://bisweb.devry.edu/coursefolder/yourname) to select it; then pull down the website menu and click New Folder. Enter App_Code as the name of the new folder. (App_Code is a special folder name where shared code must be stored on an ASP.NET website).
  2. With the App_Code folder selected in Solution Explorer, pull down the website menu and select Add New Item, or click the Add New Item button on the toolbar. In the Add New Item dialog, select the Class template. Change the Name to BMI.vb. Check that under Installed Templates at the upper left, Visual Basic is selected. Click Add.
  3. The BMI.vb class file should be created in the App_Code folder and opened for editing. Make sure that BMI.vb appears under App_Code in the Solution Explorer window.
  4. Open the file BIS450 Lab2 Code Snippets.txt that you downloaded from Doc Sharing. Select and copy the code for the Calculate() and Interpret() functions and paste it into the editing window in between the Public Class BMI and End Class statements. (Notice that the code for the Interpret() function is incomplete). After pasting, your BMI.vb should look like this:
  5. Based on the specifications provided by Dr. Dinewell and the CDC (listed in the scenario at the top of these lab instructions), write the additional statements that are needed in between the Select Case BmiValue and End Select statements to complete the Interpret() function, so that this function will return a string containing a correct interpretation for any BMI value. Use the statements for the one case provided in the function as a model.

TIP: Case clauses are evaluated in order from top to bottom, and only the first one for which the Case condition is satisfied is performed. Also, remember that you can use a Case Else as the last Case clause, which will be performed if none of the other Case conditions are met.

  1. Click the Save button on the toolbar to save your work so far.

STEP 3: Create BMI Calculator Web Form.

  1. In the Solution Explorer window, click on the website root (ftp://bisweb.devry.edu/coursefolder/yourname) to select it; then pull down the website menu and click Add New Item, or click the Add New Item button on the toolbar. In the Add New Item dialog, select the Web Form template. Change the Name to BmiCalc.aspx. Make sure that under Installed Templates at the upper left, Visual Basic is selected, and that the checkbox for Place code in separate file is checked. Click Add.
  2. The BmiCalc.aspx web form and its associated code-behind file should be added to the website, and should be visible in Solution Explorer. The code-behind BmiCalc.aspx.vb is shown as “underneath” the web form file BmiCalc.aspx; click the + sign beside BmiCalc.aspx to see it. The web form is opened in the editing window in Source View.

3a. In the BIS450 Lab2 Code Snippets.txt file that you downloaded from Doc Sharing, copy the line <%@ Assembly Src=”App_Code/BMI.vb” %> and paste it into line 2 of BmiCalc.aspx, immediately below the <@ page=”” .=”” .=”” .=””> directive. After you have pasted in this directive, the page should look like this:

TIP: This “@ Assembly” directive is needed on our Weblab server to ensure that ASP.NET can find the shared class file for the BMI class. Most commercial Web sites are configured so that files in the App_Code folder are shared automatically, so this statement would not be necessary

3b. Click the Design tab below the editing window to switch to Design View.

  1. In the Properties window, select Document from the dropdown list at the top. For the Title property, enter BMI Calculator.
  2. Click the BMICalc.aspx tab at the top of the editing window to select the web form again. Pull down the Format menu and click Attach Style Sheet. In the Select Style Sheet dialog, under Contents of folder on the right, select StyleSheet.css, then click OK.
  3. In the Solution Explorer window, double-click Default.htm to open it. Switch to Design View if necessary. Locate the element-selector buttons in the center below the editing window, hover the cursor over the element selector button, and click the dropdown arrow that appears beside it. Click on Select Tag Content (this will select everything inside the body of the page, but not the and tags themselves).

Pull down the Edit menu and click Copy, or press Ctrl+C to copy the content.

  1. Click the BmiCalc.aspx tab at the top of the editing window to return to the BmiCalc.aspx web form. Click inside the div and paste in the content that you copied from Default.htm.
  2. Click to position the cursor anywhere inside div#main, that is, anywhere within the two paragraphs of text beginning “Almost 2,400 years ago . . . ” and “Dr. Dinewell is a board-certified . . . .” Hover the cursor over theelement selector below the editing window, click the dropdown arrow that appears, and click on Select Tag Content. Press the Delete key to delete the contents of the #main div.
  3. Inside div#main, type Body Mass Index (BMI) Calculator. Click to position the cursor at the end of this line, and press Enter twice to insert a blank line.
  4. Type Height (inches): followed by two spaces. In the Standard section of the Toolbox, double-click on the TextBox control to add it to the web form. In the Properties window, change the Textbox’s (ID) property to txtHeight.
  5. Click to position the cursor immediately to the right of the TextBox that you just added, and press Enter twice to create a blank line. Type Weight (pounds): followed by two spaces, and add another TextBox to the form. Set this second TextBox’s (ID) property to txtWeight.
  6. Insert another blank line using the Enter key, and in the Standard section of the Toolbox, double-click on the Button control to add it to the form. Set the Button’s (ID) property to btnCalculate and its Text property to Calculate BMI.
  7. Insert another blank line using the Enter key, and add a Literal to the form below the Button. Set this Literal’s (ID) property to litResult. Delete the contents of the Literal’s Text property (if any).
  8. Highlight “Body Mass Index (BMI) Calculator” at the top of the form. Pull down the Format menu, choose Font, set the Font style to Bold, and click OK; or just press Ctrl+B. Your web form at this point should look like the following:
  9. Click the Save button on the toolbar to save your work so far.

STEP 4: Add Calculate BMI Event Handler in Code-Behind File.

  1. Double-click the btnCalculate Button. Visual Studio will open the code-behind file for the web form and insert a skeleton procedure to handle the click event for this Button.
  2. In the BIS450 Lab2 Code Snippets.txt that you downloaded from Doc Sharing, select and copy the section of code beginning with the comment “Use methods of shared BMI class to calculate and interpret BMI.” Paste this code in between the Protected Sub btnCalculate_Click(. . . ) and End Sub statements in the code-behind file. After pasting in this code, the code-behind file should look like this:
  3. Click the Save button on the toolbar to save your work so far.

STEP 5: Create a Web.config File to Aid Debugging.

  1. At this point in the project, it is helpful to add a basic Web.config file to the site to enable the display of meaningful error messages in case there are any problems with your code. To create a Web.config file, pull down the website menu and click Add New Item, or click the Add New Item button on the toolbar. In the Add New Item dialog, select the Web Configuration File template. Accept the default name of Web.config and click Add.
  2. A default Web.config file will be created and will be opened in the editing window. Press Ctrl+A to select the entire contents of this file, then press the Delete key to delete it all, leaving the file empty.
  3. In the BIS450 Lab2 Code Snippets.txt that you downloaded from Doc Sharing, select and copy the section of XML code beginning withand ending with . Paste this into the editing window for Web.config, as shown:
  4. Click the Save button (floppy-disk icon) on the toolbar to save your work.

STEP 6: Test, Capture Screenshot, and Submit.

  1. To test the BMI calculator, in the Solution Explorer window, right-click on BmiCalc.aspx and select View in Browser.
  2. Enter some different values for height and weight into the calculator, click Calculate BMI and check the results. Some test values that you might want to try are:

Height Weight BMI Interpretation

66 90 14.5 Underweight

72 150 20.3 Normal

60 135 26.4 Overweight

54 200 48.2 Obese

  1. With input values of height: 54 and weight: 200, the calculator should look like this after you click the Calculate BMI button:
  2. Capture a screenshot of the calculator displaying the above result, paste it into a Word document, and save it as Your Name BIS450 Lab2 Screenshot.docx. (Make sure that the browser URL is visible in your screenshot). Submit this file to the Week 2 iLab Dropbox

 

BIS 450 DeVry Week 3 iLab 3

iLab 3 of 8: Daily Calorie Needs Calculator

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 Daily Calorie Needs Calculator to the Healthy Eating website. This feature will determine how many calories an individual needs to consume daily to maintain his or her current body weight. If the person consumes fewer calories, he or she will lose weight; if more calories are consumed, the person will gain weight. Dr. Dinewell has provided you with the following specifications for the Daily Calorie Needs Calculator:

  • Inputs: Gender, weight (pounds), height (inches), age (years), activity level
  • Processing:

o Basal Metabolic Rate (women) = 655 + (4.35*weight) + (4.7*height) – (4.7*age)

o Basal Metabolic Rate (men) = 66 + (6.23 * weight) + (12.7*height) – (6.8*age)

o Daily calorie needs = BMR * (activity factor)

o Activity factor = 1.2 if sedentary, 1.375 if lightly active, 1.55 if moderately active, 1.725 if very active, 1.9 if extra active

  • Source: http://www.bmi-calculator.net/bmr-calculator/harris-benedict-equation/
  • Outputs: Daily calories needed to maintain current weight

You will create an ASP.NET Web form to accept the user inputs and display the results. Because this is a more complex calculation involving more inputs than last week’s BMI Calculator, you will need to use several different types of server controls including radio buttons and a drop-down list for this task. You will also add input validation to ensure that the form will not malfunction or give erroneous results if some input values are missing or entered incorrectly.

Deliverables

  1. Calorie Needs Calculator Web form (CalNeeds.aspx) and associated code-behind file (CalNeeds.aspx.vb) added to the Healthy Eating website on the DeVry Web server.
  2. Word document with three screenshots of Calorie Needs Calculator Web form displayed in browser (Your Name BIS450 Lab3 Screenshot.docx). Screen shots must show calculator test inputs and results or appropriate error messages. Screenshots must show the complete browser window, including the URL of the page.

Grading Rubric

Criteria Points %

Step 2: Create Calorie Needs Web Form (CalNeeds.aspx)

  • CalNeeds.aspx created in your Web folder
  • Has standard page header, navigation menu, and page footer
  • Form title “Calorie Needs Calculator” in bold
  • Input controls: radio buttons for male and female; textboxes for height, weight and age; drop-down list for activity level
  • Button for BMI calculation
  • Literal control below button for display of results 10 40%

Step 3: Add Calculate BMI Event Handler in Code-Behind File (CalNeeds.aspx.vb)

  • Click event handler created for Calculate Calorie Needs button in code-behind file
  • Statement added to Else clause to calculate BMR for men using correct formula
  • Captures input values, calculates BMR, multiplies BMR by activity to calculate calories needed
  • Displays calories needed 6 24%

Step 4: Add Input Validation (CalNeeds.aspx)

  • RequiredFieldValidators added for height, weight, and age
  • RangeValidator added to check height is 48-84 type Double
  • RangeValidator added to check weight is 50-500 type Double
  • RangeValidator added to check age is 18-120 type Integer
  • Appropriate error messages displayed by all validators 6 24%

Step 5: Test, Capture Screen Shots, and Submit (Student Name BIS450 Lab3 Screenshot.docx)

  • Word file submitted to Dropbox with screen shots of:

o Calculator with correct inputs (calories should be 2173)

o Calculator with all fields blank (should display all required field error messages)

o Calculator with invalid inputs (should display all range error messages) 3 12%

Total 25 100%

PREPARATION

  1. Download the file BIS450 Lab3 Code Snippets.txt 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 Website on the DeVry Web Server

  1. Launch Microsoft Visual Studio 2010.

You must use Visual Studio 2010 in the Citrix environment.

  1. 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, (for example, jsmith for student John Smith).
  • Passive Mode and Anonymous Login: Both unchecked.
  • Username: acadDnnnnnnnn, 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: Create Calorie Needs Web Form

  1. Add a new Web form named CalNeeds.aspx to the site. (Review last week’s iLab if you need help remembering exactly how to do this.)
  2. Set the Title property of the Document to Calorie Needs Calculator.
  3. Attach StyleSheet.css to the Web form.
  4. As you did when setting up the BMI Calculator Web form in last week’s iLab, open Default.htm and copy the contents of its element (in HTML, everything in between the and tags, but not the and tags themselves). Paste these contents inside the div in CalNeeds.aspx (in HTML, in between the

and

tags). Delete the contents of the #main div after pasting.

  1. Inside div#main, type Daily Calorie Needs Calculator as a heading for the form, followed by a blank line. Bold this heading.
  2. Type the following input prompts, one per line with a blank line between each, and add the corresponding control from the Standard section of the Toolbox after each prompt. Set the properties of each control as indicated below.

Prompt Control (ID) Text

Gender: RadioButton

RadioButton rdoFemale

rdoMale Female

Male

Height (inches): TextBox txtHeight

Weight (pounds): TextBox txtWeight

Age (years): TextBox txtAge

Activity Level: DropDownList ddlActivity

  1. For each of the two RadioButtons, set the GroupName property to Gender. (Giving both RadioButtons the same GroupName ensures that only one can be “on” at a time.) Also, set the Checked property of the rdoFemale RadioButton to True (Female will be the default).
  2. Select the ddlActivity DropDownList control, click the Items property in the Properties pane, and then click on the button with three dots […] that appears. In the ListItem Collection Editor dialog, click Add. Enter Sedentary (little or no exercise) as the Text and 1.2 as the Value, and set Selected to True.

Continue clicking Add to add the following items to the list:

Text Value Selected

Lightly active (1-3 days/week) 1.375 False

Moderately active (3-5 days/week) 1.55 False

Very active (6-7 days/week) 1.725 False

Extra active (sports & physical job) 1.9 False

The completed list should look like the following:

After you have finished adding items to the list, click OK.

  1. Below the Activity Level input, insert a blank line and place the following additional controls, with a blank line between each one, setting properties as indicated:

Control (ID) Text

Button btnCalculate Calculate Calorie Needs

Literal litResults

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

  1. Save the Web form.

STEP 3: Add Calculate Calorie Needs Event Handler in Code-Behind File

  1. Double-click the btnCalculate button to create a skeleton click event handler procedure in the code-behind file.
  2. Open the BIS450 Lab3 Code Snippets.txt file that you downloaded from Doc Sharing, select and copy the section of code beginning with the comment “‘Calculate daily calorie needs”, and paste it in between the Protected Sub btnCalculate_Click(. . . ) and End Sub statements in the code-behind file. Notice that the code is incomplete. After pasting in this code, the code-behind file should look like this:
  3. Based on the specifications provided by Dr. Dinewell (listed in the scenario at the top of these lab instructions), write the additional statement needed in the Else clause to calculate the BMR for men. Use the formula for women provided in the function as a model.

Hint: You only need to replace the “‘TO DO:” line with the men’s BMR values.

  1. Save your work so far.

STEP 4: Add Input Validation

  1. Return to editing the CalNeeds.aspx Web form in Design View.
  2. Drag a RequiredFieldValidator control from the Validation section of the Toolbox and place it on the form just to the right of the txtHeight TextBox. Set its properties as follows to ensure that the user enters a value for height:

Property Setting

ControlToValidate txtHeight

Display Dynamic

ErrorMessage You must enter your height in inches.

  1. Drag a RangeValidator control from the Validation section of the Toolbox and place it on the form to the right of the RequiredFieldValidator you added in the previous action. (It’s OK if the validators wrap onto the next line in the editing window display.) Set the RangeValidator’s properties as follows to ensure that the user enters a height value that is a type Double (that is, a decimal number,) that is in the range of 48 to 84 inches:

Property Setting

ControlToValidate txtHeight

Display Dynamic

ErrorMessage Height must be a decimal number between 48 and 84 inches.

MaximumValue 84

MinimumValue 48

Type Double

Here is what part of your form should look like with both validation controls in place (what you see may vary depending on the width of your editing window):

  1. In a similar way, place a RequiredFieldValidator and a RangeValidator to the right of the txtWeight TextBox, and set their properties to ensure that the user enters a value for weight, and that value is a type Double (decimal number) that is between 50 pounds and 500 pounds. Compose your own reasonable error messages for these validators.
  2. Place a RequiredFieldValidator and a RangeValidator to the right of the txtAge TextBox, and set their properties to ensure that the user enters a value for age, and that value is a type Integer (whole number) that is between 18 and 120. Compose your own reasonable error messages for these validators.
  3. Save your work.

STEP 5: Test, Capture Screenshot, and Submit

  1. To test the Calorie Needs calculator, in the Solution Explorer window, right-click on CalNeeds.aspx and select View in Browser. If you experience problems viewing your page, perform the following:
  • In the Solution Explorer, right-click on your FTP address and select Property Pages.
  • Under the Start Options tab, make sure the Base URL is set to include the full HTTP address listing (example only: HTTP://bisweb.devry.edu/YourCourseFolder/YourPersonalFolder).
  1. Enter some different values for the various inputs into the calculator, click Calculate Calorie Needs, and check the results. Some test values you might want to try are:

Gender Height Weight Age Activity Calories

Female 60 120 35 Sedentary 1553

Female 66 150 47 Lightly Active 1921

Male 72 165 24 Moderately Active 2860

Male 68 144 54 Very Active 2518

Male 76 180 32 Extra Active 3677

Here is an example of what your form should look like with one set of inputs:

  1. You should also test that your input validation works correctly. Try leaving the height, weight, or age fields blank and verify that the correct error messages are displayed. Also try entering values that are too high or too low in these fields. Here is an example of what your form should look like with an invalid entry:
  2. Capture a screenshot of the calculator after you click the Calculate Calorie Needs button with the following inputs, and paste it into a Word document:

Gender Height Weight Age Activity

Female 62 135 28 Moderately Active

  1. Capture a second screen shot of the calculator after you click the Calculate Calorie Needs button with the height, weight, and age fields all blank, and paste it into the same Word document.
  2. Capture a third screen shot of the calculator after you click the Calculate Calorie Needs button with the following (invalid) values for height, weight, and age, and paste it into the same Word document.

Height Weight Age

42 600 50.5

  1. Save the Word document containing your three screenshots as Your Name BIS450 Lab3 Screenshot.docx. (Make sure that the browser URL is visible in all your screen shots.) Submit this file to the Week 3 iLab Dropbox.

 

BIS 450 DeVry Week 4 iLab 4

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.

  1. 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: acadDnnnnnnnn, 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.

  1. Pull down the Website menu and select Add Existing Item.
  2. 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 named FoodInfo.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, open Default.htm and copy the contents of its element (in HTML, everything in between the and tags, but not the and tags themselves). Paste these contents inside the div in FoodInfo.aspx (in HTML, in between the

and

tags). Delete the contents of the #main div after pasting.

  1. Inside div#main, type Food Information Guide as a heading for the form, followed by a blank line. Bold this heading.
  2. Type the prompt Food:. 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

  1. 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.

  1. 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=””>

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

  1. 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, type database/HealthyEating.mdb in 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.

  1. 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.

  1. 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.

  1. 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:

  1. 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. Enter lobster 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.

 

 

BIS 450 DeVry Week 5 iLab 5

iLab 5 of 8: Maintaining the Food Information Guide Database

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 form to the Healthy Eating Web site that will allow an administrator to maintain the database used by the Food Information Guide feature.

You will create an ASP.NET Web form to allow the administrator to find, view, edit, and delete food records, as well as add new food records to the Microsoft Access database.

Although you will create the Web form for this lab in a folder named “Secure”, you will not actually restrict access to the folder to administrators only at this time. That will be performed in a future iLab.

Deliverables

  1. Maintain Food Information Web form (Secure/Admin.aspx) added to the Healthy Eating Web site on the Web server.
  2. Word document submitted to Dropbox with screenshots of Maintain Food Information Web form displayed in browser (Your Name BIS450 Lab5 Screenshots.docx). Screenshots must show the complete browser window including the URL of the page.
  • Screen shot showing display of an existing record.
  • Screen shot showing adding a new record.
  • Screen shot of new record after a successful add.
  • Screen shot showing editing a record.
  • Screen shot of updated record after a successful edit.

Grading Rubric

Criteria Points %

Step 2: Create Maintain Food Information Web Form (Secure/Admin.aspx)

  • Secure folder created on the web server
  • Admin.aspx created in Secure folder
  • Has standard page header, navigation menu, and page footer
  • Form title “Maintain Food Information” in bold
  • Input controls: Textbox for food
  • Button for Find Food Info
  • AccessDataSource control
  • DetailsView control 10 40%

Step 3: Configure AccessDataSource Control

  • Connected to HealthyEating.mdb in database folder
  • Retrieves NDB_No, Food, Amount, and Calories columns from Foods table
  • Parameter query with LIKE operator bound to txtFood textbox
  • INSERT, UPDATE and DELETE statements 5 20%

Step 4: Configure DetailsView Control

  • Bound to AccessDataSource control on form
  • Displays columns NDB_No, Food, Amount, Calories
  • Classic AutoFormat applied 5 20%

Step 5: Test, Capture Screenshots, and Submit (Student Name BIS450 Lab5 Screenshots.docx)

  • Word file submitted to dropbox with the following screen shots:

o Fourth “beets” record displayed in DetailsView

o In process of adding a record

o Showing new record after successful add

o In process of editing a record

o Showing updated record after a successful edit 5 20%

Total 25 100%

i L A B S T E P S

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.

  1. 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: acadDnnnnnnnn, 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: Create Maintain Food Information Web Form

  1. In the Solution Explorer window, click on the Web site root (ftp://bisweb.devry.edu/coursefolder/yourname) to select it; then pull down the Website menu and click New Folder. Enter Secure as the name of the new folder.
  2. In the Solution Explorer window, click on the Secure folder to select it; then add a new Web form named Admin.aspx to the folder.

TIP: Putting this page in a separate folder on the site will make it easier to restrict its use to administrators only, later.

  1. Set the Title property of the Document to Maintain Food Information.
  2. Attach StyleSheet.css to the Web form. (Remember that since the page you are working on is inside the Secure folder, you will have to navigate up one level in the Select Style Sheet dialog to locate StyleSheet.css.)
  3. Because this form will use several elements that were also used in the Food Information Guide form, it will be more efficient to copy the body of that form as a starting point, rather than copy from Default.htm as we have done in some earlier iLabs. Open FoodInfo.aspx and copy the contents of its

element (in HTML, everything between the

?????? ?????

and

????? ?????

tags, but not the

?????? ?????

and

????? ?????

tags themselves). Paste these contents inside the div in Admin.aspx (in HTML, in between the

and

tags).

  1. Change the “Food Information Guide” heading to read Maintain Food Information.
  2. Delete the GridView control.
  3. Drag a DetailsView control from the Data section of the Toolbox and drop it onto the form where the GridView control was. Select and drag the right edge of the control to stretch it across the form.

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

  1. Save the Web form.

STEP 3: 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, add ../ in front of the Microsoft Access data file, so that it reads in full ../database/HealthyEating.mdb (this is the correct relative path to the database file from inside the Secure folder). Then click Next >.

TIP: As in last week’s iLab, typing in the path to the database file works more reliably than browsing to the database, given the way your personal site on the Web server is configured.

  1. 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 NDB_No, Food, Amount, and Calories. Click the WHERE… button.

TIP: In the previous lab, NDB_No was not selected because it was not meaningful to display it to the user. It is selected in this week’s lab because you will be allowing the user to update as well as view the records in the table. When a data source will be used for updates, the primary key of the table must always be selected.

  1. 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.
  2. Back on the Configure the Select Statement screen of the Configure Data Source wizard, click the Advanced button. In the Advanced SQL Generation Options dialog, check the option Generate INSERT, UPDATE, and DELETE statements. (These extra SQL statements are needed because you want to allow the administrator to add, edit, and delete records through this data source.) Click OK.

TIP: Although it is very convenient to have Visual Studio generate the INSERT, UPDATE, and DELETE statements for you, unfortunately it does not always do so correctly! So, you should always check the generated statements to be sure they are correct. In this lab, you will be checking and correcting these statements in a later step. This is why, even with “smart” tools like Visual Studio, it is still important to know the basics of SQL.

  1. Click Next > to move to the next screen of the Configure Data Source wizard.
  2. On the Test Query screen of the Configure Data Source wizard, click Test Query.

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 their NDB_Nos, amounts and calories. Click Finish.

  1. Now you need to check for errors in the INSERT, UPDATE, and DELETE SQL statements that you asked the configuration wizard to generate for you earlier. Click the AccessDataSource control to make sure it is selected. In the Properties window, click the InsertQuery property and then click the button with three dots […] that appears. The INSERT command should look like this:

This is correct, so click Cancel without making any changes.

  1. To check the UPDATE command, click the UpdateQuery property and then the […] button. The UPDATE command that the wizard generated may look like this:

Unfortunately, this is NOT quite correct; there is some extra “junk” code in the WHERE clause. Carefully select the part of the statement that is highlighted in the above image and delete it. Take care to delete only one of the two closing right parentheses. After you delete the “junk” your UPDATE command should look like:

Click the OK button to save your changes to the UPDATE command.

  1. To check the DELETE command, click the DeleteQuery property and then the […] button. The original DELETE command looks like:

Delete the highlighted “junk” portion, again taking care to delete only one of the two closing right parentheses. The resulting command should be:

Click the OK button to save your changes to the DELETE command.

  1. Save the Web form.

STEP 4: Configure DetailsView Control

  1. Click the DetailsView 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. Check the boxes for Enable Paging, Enable Inserting, Enable Editing, and Enable Deleting. Click Auto Format.
  3. In the AutoFormat dialog, choose the Classic scheme and click OK.

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

  1. Save the Web form.

STEP 5: Test, Capture Screenshot, and Submit

  1. To test the Food Information Guide form, in the Solution Explorer window, right-click on Admin.aspx and select View in Browser. Initially your form should look like this:
  2. Enter beets in the textbox and click the Find Food Info button. You should see the following display:
  3. The numbers at the bottom of the DetailsView control indicate there are 9 records in the database containing the word “beets.” Unlike the GridView, which showed all matching records at once, the DetailsView shows only one at a time. Click on some of the numbers to display different records.
  4. Capture a screen shot of your Web form with the fourth record containing “beets” displayed. Be sure to include the full browser window with the URL of the page. Paste this into a Word document.
  5. To test entering a new record, click the New button. A blank form should be displayed. For the NDB_No, enter 98765. For the Food value, enter YourName and a food item. (For example, if your name is Jane and you like cupcakes, enter Jane’s Cupcakes.) Enter an amount for consumption and a calorie count for the amount. Capture a screen shot showing your entry and paste it into the same Word document. Then click Insert.
  6. Enter the food you just added (YourName’s YourFood, e.g. Jane’s Cupcakes) in the Find Food textbox and click Find Food Info. The food record you added should be displayed. Capture a screen shot of this and paste it into the same Word document.
  7. To test editing a record, click the Edit button. The record should be displayed for editing. Notice that NDB_No, the primary key, cannot be changed. Change the Amount to 1 oz and the Calories to 456. Capture a screen shot and paste it into the same Word document. Click Update.
  8. Capture a screen shot showing your record displayed after completing the update, and paste it into the same Word document.
  9. To test deleting a record, click the Delete button. The record should disappear from the screen. Try clicking the Find Food Info button to search for your food again. Nothing should be displayed, indicating the record was deleted.
  10. Save your Word document containing 5 screenshots as Your Name BIS450 Lab5 Screenshots.docx. (Make sure that the browser URL is visible in all your screenshot.) Submit this file to the Week 5 iLab Dropbox

 

BIS 450 DeVry Week 5 iLab 6

iLab 6 of 8: Mobile Version of Food Information Form

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

Dr. Dinewell has been very happy with your work on her Healthy Eating website so far. However, for the first time, she tried visiting the site using the web browser on her cell phone. She was not pleased with how the site looked on the small screen, and the limitations of the mobile device made the site difficult to navigate.

Based on user feedback, Dr. Dinewell has found that the feature of the site that most people will find useful on their phones is the Food Information form. This form will allow people who are dining out the ability to check the number of calories in certain food items right at their restaurant table using their web-enabled cell phones. As a result, Dr. Dinewell has asked you to create a mobile version of the Food Information form that is adapted to browsing from mobile devices.

The most important issue with mobile versions of web pages is adapting the content for a much smaller screen size. After background research, you decide to target devices with a screen size of 240×320 pixels, as most web-enabled phones today have screens at least this large. Additionally, you have also learned that support for CSS in mobile devices is inconsistent; as such, you have decided for universal availability that your mobile version of the Food Information form will not use CSS.

Deliverables

  1. FoodInfo-M.aspx Web form adapted for use from a mobile device, with associated code-behind file
  2. TestMobile.htm page for testing FoodInfo-M.aspx
  3. Word document submitted to Dropbox with screenshot of food-search results displayed in mobile test page (Your Name BIS450 Lab7 Screenshot.docx)

Grading Rubric

Criteria Points %

Step 2: Create Mobile Version of Food Information Form (FoodInfo-M.aspx).

  • FoodInfo-M.aspx form created on the Web server by copying and renaming FoodInfo.aspx 5 20%

Step 3: Create Mobile Test Page (TestMobile.htm).

  • TestMobile.htm page created on the Web server
  • Displays FoodInfo-M.aspx form in a 240x320px iframe 5 20%

Step 4: Customize Mobile Version of Food Information Form.

  • Link to sylesheet removed
  • Heading “Healthy Eating with Dr. Dinewell” bolding used
  • Footer text made smaller using tags
  • GridView replaced by DataList showing Food, Amount, and Calories in a single column 10 40%

Step 5: Test, Capture Screenshots, and Submit (Student Name BIS450 Lab7 Screenshots.docx).

  • Word file submitted to Dropbox with screenshot of TestMobile.htm page showing food search results in the iframe 5 20%

Total 25 100%

i L A B S T E P S

Preparation

  1. Download the BIS450 Lab7 Code Snippets.txt file from Doc Sharing and save it in your working folder for this lab.
  2. Using the Citrix remote lab:
  3. Follow the log-in instructions located in the iLab tab in Course Home.
  4. Upload the file that you downloaded from Doc Sharing into your BIS450Labs folder on your Citrix drive. (You created this folder in Week 1).

STEP 1: Open Website on the DeVry Web Server.

  1. Launch Microsoft Visual Studio 2010.

You must use Visual Studio 2010 in the Citrix environment.

  1. Pull down the File menu and select Open, then select Website. In the Open Website dialog, select FTP Site in the left column. The connection information that 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 Log-in: Both unchecked.
  • Username: acadDnnnnnnnn, where Dnnnnnnnn = your DSI number.
  • Password: Enter the same password as the one that you use for Citrix iLab (must be re-entered each time).

Click Open.

STEP 2: Create Mobile Version of Food Information Form.

  1. In the Solution Explorer window, right-click on FoodInfo.aspx and select Copy; then pull down the Edit menu and select Paste, or press Ctrl+V. A new file named Copy of FoodInfo.aspx will appear in the Solution Explorer tree.
  2. Right-click on Copy of FoodInfo.aspx and select Rename. Rename the file as FoodInfo-M.aspx. This will become the mobile version of the form that is optimized for use on mobile devices.
  3. Right-click on FoodInfo-M.aspx and select View in Browser. Test the form to verify that it looks and works identically to the original FoodInfo.aspx. Close the browser when done.

STEP 3: Create Mobile Test Page.

  1. Before starting to customize the mobile Food Information form, you need a way to see what it will look like when displayed on a small screen similar to that of a mobile device. To simulate this action, add an HTML page named TestMobile.htm to the site.
  2. Open the file BIS450 Lab7 Code Snippets.txt that you downloaded from Doc Sharing. Select and copy the first two lines of this file, beginning with “Mobile Test Page

“. With TestMobile.htm open in Source View, paste these lines in between the and tags, as shown:

This creates a page that displays FoodInfo-M.aspx inside an inline frame (iframe) that is restricted to 240×320 pixels, a common screen size for Web browsers on low-end mobile phones.

  1. Save your changes to TestMobile.htm.
  2. Right-click on TestMobile.htm and select View in Browser. You should see something like the following:
  3. Try using the Food Information form to look up some foods while working through the small window. Notice what a difference the screen size makes! Now you are ready to start adapting the mobile version of the form to make it look and work better in the small format. Leave the web browser open while you work through the next steps; you will be able to see the effects of your changes by saving your work and refreshing the browser.

STEP 4: Customize Mobile Version of Food Information Form.

  1. At this time, support for Cascading Style Sheets is inconsistent on mobile devices. Developers choose to deal with this setback in various ways. Since you want to keep things as simple as possible, and because Dr. Dinewell expects the Healthy Eating site to be used by a wide variety of people, including many with low-end “feature phones” rather than Smartphones, you have decided to eliminate stylesheets completely for your mobile version of this page.

Open FoodInfo-M.aspx and in Source View, find and delete the “” tag that attaches the stylesheet to this form. Save the change and refresh the TestMobile.htm page in the web browser to see the result:

  1. You want to add some minimal formatting without using styles. In Source View, addandtags around the heading “Healthy Eating with Dr. Dinewell”. Also, putandtags around the text inside the footer div at the bottom of the form: “All information on this site . . . Healthy Eating, LLC”.
  2. You do not want the navigation links to appear on the mobile version of the page. Delete the nav div and all of its contents.
  3. You decide that the GridView, while well suited to displaying data in a full-width browser screen, is not ideal for the narrow screen. You want to replace it with a display component that will avoid the need for horizontal scrolling. In Design View, delete the GridView control. In its place, drag and drop a DataList control from the Data section of the Toolbox. Set the data source for the DataList control to AccessDataSource1.

TIP: If the DataList control doesn’t change to show the Food: Amount: and Calories: fields after you select the data source, click Refresh Schema under DataList Tasks in the smart tag. If you are prompted to supply a parameter value, enter any food (e.g. apples) under Value and click OK.

  1. Save your changes to the form, and refresh the TestMobile.htm page in the browser. Try searching for some foods and see whether this version of the application is easier to use on the narrow screen. You should see results like this:

STEP 5: Test, Capture Screenshot, and Submit

  1. Capture a screenshot of the TestMobile.htm page with the results of a food search displayed in the browser. Paste this screenshot into a Word document.
  2. Save the Word document conta