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: Underweight 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)
2. 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:
a. Follow the log-in instructions located in the iLab tab in Course Home.
b. 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.
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 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: 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: 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.
6. 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.
4. In the Properties window, select Document from the dropdown list at the top. For the Title property, enter BMI Calculator.

5. 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.
6. 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.
7. 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.
8. 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 the element 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.
9. 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.
10. 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.
11. 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.
12. 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.
13. 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).
14. 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:

15. 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 with and 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
3. With input values of height: 54 and weight: 200, the calculator should look like this after you click the Calculate BMI button:

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