• 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: a. Follow the login instructions located in the iLab tab in Course Home. b. Upload the file you downloaded from Doc Sharing into your BIS450Labs folder on your Citrix drive. (You created this folder in Week 1). STEP 1: Open Web Site on the DeVry Web Server 1. Launch Microsoft Visual Studio 2010. You must use Visual Studio 2010 in the Citrix environment. 2. Pull down the File menu and select Open, then select Web Site. In the Open Web site dialog, select FTP Site in the left column. The connection information you used in the previous lab should be displayed: • Server: bisweb.devry.edu • Port: 21 • Directory: coursefolder/yourname, where coursefolder = folder on the web server for your course (provided by your professor), and yourname = your first initial and last name, (e.g. jsmith for student John Smith). • Passive Mode and Anonymous Login: Both unchecked. • Username: 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. 2. Pull down the Website menu and select Add Existing Item. 3. In the Add Existing Item dialog, navigate to where you saved the HealthyEating.mdb database file that you downloaded from Doc Sharing. (If you are working on the Citrix iLab server, and you saved the file on your local computer, remember that your local computer’s disk drives are the ones with dollar signs $.) Select the HealthyEating.mdb file and click Add. You should now be able to see the HealthyEating.mdb file located under the database folder in the Solution Explorer window. (You may need to click the + symbol beside the database folder to expand it, in order to see this.) STEP 3: Create Food Information Guide Web Form 1. In the Solution Explorer window, click on the Web site root (ftp://bisweb.devry.edu/coursefolder/yourname) to select it; then add a new Web form 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. 5. Inside div#main, type Food Information Guide as a heading for the form, followed by a blank line. Bold this heading. 6. 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 7. Use the Enter key to move to the next line on the form. Drag an AccessDataSource control from the Data section of the Toolbox onto the Web form. When you first place the AccessDataSource on the form, it will have a “smart tag” labeled “Access Data Source Tasks” beside it. We will use this later when we configure the data source. TIP: You can display or hide the smart tag by selecting the control and then clicking the < or=""> at the right corner of the control. 8. Click to the right of the AccessDataSource control on the form and use the Enter key to move to the next line. Drag a GridView control from the Data section of the Toolbox onto the form. If necessary, hide the smart tag (by clicking the < button)="" and="" drag="" the="" right="" edge="" of="" the="" gridview="" control="" to="" stretch="" it="" across="" the=""> Your Web form should now look like the following in Design View: 9. Save the Web form. STEP 4: Configure AccessDataSource Control 1. Click the AccessDataSource1 control and, if necessary, click the > button in the upper right corner to display the control’s smart tag. Click the Configure Data Source task in the smart tag. 2. In the first screen of the Configure Data Source wizard, 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