22.05.2017 Views

BIS 450 DeVry Week 5 iLab 5

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> 5 I Lab 5<br />

Downloading is very simple, you can download this Course<br />

here:<br />

http://mindsblow.us/question_des/<strong>BIS</strong><strong>450</strong><strong>DeVry</strong><strong>Week</strong>5<strong>iLab</strong>5/<br />

4403<br />

Or<br />

Contact us at:<br />

help@mindblows.us<br />

<strong>BIS</strong> <strong>450</strong> <strong>DeVry</strong> <strong>Week</strong> 5 <strong>iLab</strong> 5<br />

<strong>BIS</strong><strong>450</strong><br />

<strong>BIS</strong> <strong>450</strong> <strong>DeVry</strong> <strong>Week</strong> 5 <strong>iLab</strong> 5<br />

<strong>iLab</strong> 5 of 8: Maintaining the Food Information Guide Database<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 form to the Healthy Eating Web site that will allow an administrator to maintain the<br />

database used by the Food Information Guide feature.<br />

You will create an ASP.NET Web form to allow the administrator to find, view, edit, and delete food records, as well as<br />

add new food records to the Microsoft Access database.<br />

Although you will create the Web form for this lab in a folder named “Secure”, you will not actually restrict access to the<br />

folder to administrators only at this time. That will be performed in a future <strong>iLab</strong>.<br />

Deliverables<br />

1. Maintain Food Information Web form (Secure/Admin.aspx) added to the Healthy Eating Web site on the Web server.<br />

2. Word document submitted to Dropbox with screenshots of Maintain Food Information Web form displayed in browser<br />

(Your Name <strong>BIS</strong><strong>450</strong> Lab5 Screenshots.docx). Screenshots must show the complete browser window including the<br />

URL of the page.<br />

• Screen shot showing display of an existing record.<br />

• Screen shot showing adding a new record.<br />

• Screen shot of new record after a successful add.<br />

• Screen shot showing editing a record.


• Screen shot of updated record after a successful edit.<br />

Grading Rubric<br />

Criteria Points %<br />

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

• Secure folder created on the web server<br />

• Admin.aspx created in Secure folder<br />

• Has standard page header, navigation menu, and page footer<br />

• Form title “Maintain Food Information” in bold<br />

• Input controls: Textbox for food<br />

• Button for Find Food Info<br />

• AccessDataSource control<br />

• DetailsView control 10 40%<br />

Step 3: Configure AccessDataSource Control<br />

• Connected to HealthyEating.mdb in database folder<br />

• Retrieves NDB_No, Food, Amount, and Calories columns from Foods table<br />

• Parameter query with LIKE operator bound to txtFood textbox<br />

• INSERT, UPDATE and DELETE statements 5 20%<br />

Step 4: Configure DetailsView Control<br />

• Bound to AccessDataSource control on form<br />

• Displays columns NDB_No, Food, Amount, Calories<br />

• Classic AutoFormat applied 5 20%<br />

Step 5: Test, Capture Screenshots, and Submit (Student Name <strong>BIS</strong><strong>450</strong> Lab5 Screenshots.docx)<br />

• Word file submitted to dropbox with the following screen shots:<br />

o Fourth “beets” record displayed in DetailsView<br />

o In process of adding a record<br />

o Showing new record after successful add<br />

o In process of editing a record<br />

o Showing updated record after a successful edit 5 20%<br />

Total 25 100%<br />

i L A B S T E P S<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


• 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 <strong>iLab</strong> (must be re-entered each time).<br />

Click Open.<br />

STEP 2: Create Maintain Food Information 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 pull down the Website menu and click New Folder. Enter Secure as the name of the new folder.<br />

2. In the Solution Explorer window, click on the Secure folder to select it; then add a new Web form named Admin.aspx<br />

to the folder.<br />

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

3. Set the Title property of the Document to Maintain Food Information.<br />

4. Attach StyleSheet.css to the Web form. (Remember that since the page you are working on is inside the Secure<br />

folder, you will have to navigate up one level in the Select Style Sheet dialog to locate StyleSheet.css.)<br />

5. Because this form will use several elements that were also used in the Food Information Guide form, it will be more<br />

efficient to copy the body of that form as a starting point, rather than copy from Default.htm as we have done in some<br />

earlier <strong>iLab</strong>s. Open FoodInfo.aspx and copy the contents of its<br />

element (in HTML, everything between the<br />

?????? ?????<br />

and<br />

????? ?????<br />

tags, but not the<br />

?????? ?????<br />

and<br />

????? ?????<br />

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

and<br />

tags).<br />

6. Change the “Food Information Guide” heading to read Maintain Food Information.<br />

7. Delete the GridView control.<br />

8. Drag a DetailsView control from the Data section of the Toolbox and drop it onto the form where the GridView control<br />

was. Select and drag the right edge of the control to stretch it across the form.<br />

Your Web form should now look like the following in Design View:<br />

9. Save the Web form.<br />

STEP 3: 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.


2. In the first screen of the Configure Data Source wizard, add ../ in front of the Microsoft Access data file, so that it<br />

reads in full ../database/HealthyEating.mdb (this is the correct relative path to the database file from inside the Secure<br />

folder). Then click Next >.<br />

TIP: As in last week’s <strong>iLab</strong>, typing in the path to the database file works more reliably than browsing to the database,<br />

given the way your personal site on the Web server is configured.<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 NDB_No, Food, Amount, and Calories. Click the WHERE… button.<br />

TIP: In the previous lab, NDB_No was not selected because it was not meaningful to display it to the user. It is selected<br />

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<br />

source will be used for updates, the primary key of the table must always be selected.<br />

4. In the Add WHERE Clause dialog, select Food from the Column drop-down list. Select LIKE from the Operator dropdown<br />

list. Select Control from the Source drop-down list. Under Parameter Properties, set the Control ID to txtFood.<br />

Click the Add button and review the SQL WHERE clause expression that the wizard has built. Click OK.<br />

5. Back on the Configure the Select Statement screen of the Configure Data Source wizard, click the Advanced button.<br />

In the Advanced SQL Generation Options dialog, check the option Generate INSERT, UPDATE, and DELETE<br />

statements. (These extra SQL statements are needed because you want to allow the administrator to add, edit, and<br />

delete records through this data source.) Click OK.<br />

TIP: Although it is very convenient to have Visual Studio generate the INSERT, UPDATE, and DELETE statements for<br />

you, unfortunately it does not always do so correctly! So, you should always check the generated statements to be sure<br />

they are correct. In this lab, you will be checking and correcting these statements in a later step. This is why, even with<br />

“smart” tools like Visual Studio, it is still important to know the basics of SQL.<br />

6. Click Next > to move to the next screen of the Configure Data Source wizard.<br />

7. On the Test Query screen of the Configure Data Source wizard, click Test Query.<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 their NDB_Nos, amounts and calories. Click Finish.<br />

8. Now you need to check for errors in the INSERT, UPDATE, and DELETE SQL statements that you asked the<br />

configuration wizard to generate for you earlier. Click the AccessDataSource control to make sure it is selected. In the<br />

Properties window, click the InsertQuery property and then click the button with three dots […] that appears. The<br />

INSERT command should look like this:<br />

This is correct, so click Cancel without making any changes.<br />

9. To check the UPDATE command, click the UpdateQuery property and then the […] button. The UPDATE command<br />

that the wizard generated may look like this:<br />

Unfortunately, this is NOT quite correct; there is some extra “junk” code in the WHERE clause. Carefully select the part<br />

of the statement that is highlighted in the above image and delete it. Take care to delete only one of the two closing<br />

right parentheses. After you delete the “junk” your UPDATE command should look like:<br />

Click the OK button to save your changes to the UPDATE command.<br />

10. To check the DELETE command, click the DeleteQuery property and then the […] button. The original DELETE<br />

command looks like:<br />

Delete the highlighted “junk” portion, again taking care to delete only one of the two closing right parentheses. The<br />

resulting command should be:<br />

Click the OK button to save your changes to the DELETE command.<br />

11. Save the Web form.<br />

STEP 4: Configure DetailsView Control<br />

1. Click the DetailsView 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. Check the boxes for Enable Paging, Enable Inserting,<br />

Enable Editing, and Enable Deleting. Click Auto Format.


3. In the AutoFormat dialog, choose the Classic scheme and click OK.<br />

Your Web form should now look like this in Design View:<br />

4. Save the Web form.<br />

STEP 5: Test, Capture Screenshot, and Submit<br />

1. To test the Food Information Guide form, in the Solution Explorer window, right-click on Admin.aspx and select View<br />

in Browser. Initially your form should look like this:<br />

2. Enter beets in the textbox and click the Find Food Info button. You should see the following display:<br />

3. The numbers at the bottom of the DetailsView control indicate there are 9 records in the database containing the<br />

word “beets.” Unlike the GridView, which showed all matching records at once, the DetailsView shows only one at a<br />

time. Click on some of the numbers to display different records.<br />

4. Capture a screen shot of your Web form with the fourth record containing “beets” displayed. Be sure to include the<br />

full browser window with the URL of the page. Paste this into a Word document.<br />

5. To test entering a new record, click the New button. A blank form should be displayed. For the NDB_No, enter 98765.<br />

For the Food value, enter YourName and a food item. (For example, if your name is Jane and you like cupcakes, enter<br />

Jane’s Cupcakes.) Enter an amount for consumption and a calorie count for the amount. Capture a screen shot showing<br />

your entry and paste it into the same Word document. Then click Insert.<br />

6. Enter the food you just added (YourName’s YourFood, e.g. Jane’s Cupcakes) in the Find Food textbox and click<br />

Find Food Info. The food record you added should be displayed. Capture a screen shot of this and paste it into the<br />

same Word document.<br />

7. To test editing a record, click the Edit button. The record should be displayed for editing. Notice that NDB_No, the<br />

primary key, cannot be changed. Change the Amount to 1 oz and the Calories to 456. Capture a screen shot and paste<br />

it into the same Word document. Click Update.<br />

8. Capture a screen shot showing your record displayed after completing the update, and paste it into the same Word<br />

document.<br />

9. To test deleting a record, click the Delete button. The record should disappear from the screen. Try clicking the Find<br />

Food Info button to search for your food again. Nothing should be displayed, indicating the record was deleted.<br />

10. Save your Word document containing 5 screenshots as Your Name <strong>BIS</strong><strong>450</strong> Lab5 Screenshots.docx. (Make sure<br />

that the browser URL is visible in all your screenshot.) Submit this file to the <strong>Week</strong> 5 <strong>iLab</strong> Dropbox

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

Saved successfully!

Ooh no, something went wrong!