Unit 8.1: Introducing Databases

Learning Objectives• How data can be used – The Money Ball Example• The Role of Data Warehouses

– Group Exercise• Creating Database Driven Websites

– The Big Picture : Client Server Technology Framework– Data control objects

• The SQL DataSource Object• SQL Data Display options

– Hands on exercise

How

Dat

a ca

n be

use

dExample: Moneyball• Batting average• Stolen bases• Runs batted in• On-base %• Slugging %• On-base + Slugging

(OPS)

Databases

Real world ApplicationMoney Ball

Business IntelligenceMicrosoft BI, IBM Cognos

Database and Query Development

Database creation and useMS Visual Web Developer

MS SQL Server

Data warehouses

Please answer the following questions based on Intricity’s Video on Benefits of a Data Warehouse

1. What is a Data Warehouse?

2. What is the impact of the fact that databases can take in one row of data at a time?

3. When the video says “You are doing it anyway, what is it talking about?”

4. List any two benefits of data warehousing.

The Client Server Process

Browsere.g. FireFox

Request

Web servere.g. Windows Server

SQL request

Database servere.g. MS SQL Server

Data & status or exceptionsRespons

e

HTML ASPX SQL

The Client Server Process of a data enabled web page

Browsere.g. FireFox

Request

Web servere.g. Windows Server

Database servere.g. MS SQL Server

HTML ASPX SQL

List Fee table

["1",“Registration Fee",5.00,”2”, “Vehicle License Fee",7.5,”3”, “Weight Fee“, 12.500]

SQL DataSource

Display

format

1 2

34

The SQL Data Source Object

Image Source: TopGear.com

The SQL Data Source Object

• Used with MS SQL Server• Embodies – SQL command– Connection String

• Database Name• Database Location

sdsFeescs320

0sql3200

Characterize this: Format/Number of Records

Data Display Controls

L1 - 1

• For this exercise we are going to convert the fee table used in Unit 5 to a database table

• Copy your ASPPub folder from ASPNET to your desktop and open it in Visual Studio

• First we need to create a database and the fee table– Right click on your App_data folder & select Add New Item– Scroll down and select SQL Server Database– Name the Database MIS3200.mdf and click Add

L1 - 2You should now see the database in your App_Data folder

• Double-click the MIS3200.mdf database file to open the Database Explorer (it could be on either side of Visual Web Developer)

• Right-click on the Tables folder and select Add New Table to open the database table editor

L1-3: Auto-increment

• Name the first column FID, for fee ID• Set the data type Int• Uncheck Allow Nulls• Move down to the Column Properties window

• Scroll down to Identify Specification• Click the arrow to expand the choices• Change (Is Identity) to Yes (see next slide)

L1-4: PK

When (IsIdentity) is set to true SQL Server will automatically generate a unique integer for each record added to the table. If you don’t have something better to use, this makes a great primary key

• Select the row and click the Primary Key icon

L1 – 5: Adding ColumnsAdd columns• Add a second column

• Column Name = FeeDescription• Data Type = nvarchar(50)• Allow Nulls = not checked

• Add a third column• Column Name = Fee• Data Type = money• Allow Nulls = not checked

L1 - 6

• Close the table definition• Save the changes• Name the table Fees and click OK• If you don’t already have one, create a Unit8

folder under your MIS3200 folder– Right click on the MIS3200 folder– Click New Folder– Name it Unit8

L1 - 7

• Create a new item in the Unit8 folder – Add a Visual C# web form with your standard master page

and name it YourlastnameU8L1.aspx• We are going to use this page to display, edit, modify and

potentially delete fees that we will use on another page• Make sure that your U8L1.aspx page is open

– Switch to Design view– Click in the MainContent area a press Return twice– Type the following, without the quotes:

“To change a fee or its cost, press Select” and then press return twice more

L1 - 8– Copy a GridView from the Data section of the Toolbox to below

the text you just entered

– Use the ID field to name it: gvFees

– Click the dropdown next to Choose Data Source and select <New data source>

L1 - 9

– Click SQL Database and change the ID to sdsFees and click OK

L1 -10• We don’t have any connections yet

A. So Click New Connection, B. Select the Microsoft SQL Server Database file as the Data Source (driver), C. Browse to MIS3200.mdfD. Click OK

C:\Users\Joe Bobcat\Desktop\ASPPUB\App_Dat

A

B

C

D

L1-11

If you see a message like this

• Ensure that the database is not open elsewhere, and • Cancel your attempt to add the connection

– In the App_Data folder, delete the .ldf file associated with the database and create the New Connection again.

L1 - 12– You should now see your database listed in the dropdown

box…– Click Next– Click Yes, save this connection as:

• Change the name to cs3200• Click Next

– The next screen lets you select the table and columns to use.• Select the Fees table• Select all three columns individually, don’t select *

This will create a Connection String called cs3200 that we will be able to use to connect to the database another time.

L1 - 13– Click the Advanced button and you should see

– Click the Generate INSERT, … checkbox and then click OK• If this is gray it means either

– FID wasn’t marked as the primary key, or– The primary key wasn’t selected

Checking this box tells the system that you want it to generate the SQL statements necessary to insert, update and delete data. If you don’t click this you will only get the Select statement.

L1 - 14– Click Next on the Configure Data Source window– The next window gives you a chance to run a test query

but we don’t have any data yet so just click Finish– Your GridView may not show the column headings you

selected in the data source. If it doesn’t, click Refresh Schema

– You won’t see the Editing and Deleting choices unless selected the Advanced Options

If you don’t see this, click the Smart Menu, where the < is now

L1 - 15– Click Enable Selection on the GridView smart menu

(see previous slide)– Format the GridView

• Click Auto Format on the SmartMenu• Select between on different schema• After you have selected one, click OK

L1 - 16

14. Now run the page– What happens?– Why?

• You should have seen something like this– No GridView

• No records to display

• GridViews don’t support data insertion so we need another control

15. Close the page and add a DetailsView under your GridView– Change the (ID) to dvFee

L1 - 17

L1 - 18– Select “Choose Data Source” from the DetailsView’s smart

menu and pick “<New data source>”

– Select SQL Database and give it the ID “sdsFee” (this is a singular

name because a DetailsView shows one record at a time). – Click OK

L1 - 19– Click the dropdown list on the Choose Your Data Connection

screen and select “cs3200” (the connection you saved earlier)

– Click Next– Select the Fee table and all the fields like you did earlier– Click Advanced and select Generate Insert, … as you also did

before– Click OK

L1 - 20– We are going to use the DetalsView to insert new fees but

we are also going to use it to modify or delete fees selected in the GridView so we need a way to link the two controls

Click WHERE

L1 - 21– Click Column and select the

primary key, FID– Click Operator and select =– Click Source and select Control– Then select gvFees from the

Control ID list– Finally, click Add– The end result of all of

this is that your SQL will contain a WHERE clause with [FID]=@FID and a parameter that assigns the selected value of the GridView to @FID

L1 - 22– If you haven’t already done so, click OK to finish the WHERE

clause and then Next>– We still don’t have any data so click Finish from the Text Query

window– Click on the DetailsView

• Select Enable Inserting, Enable Editing and Enable Deleting• Pick an Auto Format for the DetailsView (using the same one you used

for the GridView often looks best)

L1 - 23

16. Now try to run the web again– What happens?– Why?

L1 - 24

• Same problem as before…– There is no data for the GridView to display– The DetailsView is supposed to show the fee selected in the GridView,

but no fee is selected– The DetailsView has a New button but you can only see it when a

record is displayed – it doesn’t help us enter the first record

17. Right-click the DetailsView– Select Edit Template– Click the drop down list– Select EmptyDataTemplate

L1 - 25– The EmptyDataTemplate

Displayed when NO records areselected (when there are no records and when no record is selected in the GridView)

– Copy a LinkButton from the Toolbox into the EmptyDataTemplete• Change the (ID) to lbNewFee• Change the Text to “Add a fee”• Change the CommandName to “new” (no quotes)

– Click the DetailsView’s SmartMenu and then End Template Editing

L1 - 26

18. Try to run the page again– That happens this time?– What happens when you click Add a fee?– Enter

• 5.00 for Fee• Registration Fee for FeeDescription• Click Insert

– What happens?– Close the web page and then run it again– What happens now?– What happens if you click Select?

L1 – 27

• Why wasn’t the new fee displayed in the GridView?– The GridView and the DetailsView have separate DataSources

• Each DataSource gets its own copy of the data but,• They are independent of each other. Neither one automatically knows

if the other one changes that data• Both DataSources get a fresh copy of the data when the page initially

loads so they will see and display changes made earlier• To “force” the DataSource to check for changes we tell it to use

its .DataBind() method (see next page)

L1 - 28

• The Control that changes the data needs to let the other controls know…

19. So, select the DetailsView– Click the Lightening Bolt icon in the properties window– This displays a list of common events associated with a DetailsView

L1 - 29– Notice that many events appear in pairs

• ItemUpdating – happens just before the record is updated• ItemUpdated – happens just after the record is updated• ItemInserting – just before the insert• ItemInserted – just after the insert• Etc.

– We want to tell the GridView to check the data after the DetailsView inserts a new record, so

L1 - 30

20. Double-click your mouse in the box to the right of ItemInserted– This should create a method to process the event and switch you into

code view

– Like the click events you saw before, the method name is formed from the name of the control, dvFee and the name of the event, ItemInserted

– In this case all we need to do is tell the GridView to do a DataBind

L1 - 31

21. Run the page again– Add a new fee

• Vehicle License Fee• 7.50

– What happens when you insert it?– Add the following fees

– Select any fee in the GridView and modify it in the DetailsView - What Happens?

– Select any fee in the GridView and delete it in the DetailsView – What happens?

Weight Fee 12.50

County/District Fee 4.50

Owner Responsibility Fee 10.00

L1 - 32

22. When you modify (update) data in the DetailsView the change isn’t shown in the GridView– Same problem we had inserting data – the GridView doesn’t know

that the data has changed– Select the DetailsView’s events– Double-click on ItemUpdated to generate the method– Add gvFees.DataBind() to the method

23. Deleting has the same problem– Add gvFees.DataBind() to the DetailsView’s ItemDeleted event

method.

L1 - 33– Is it safe to delete data the first time a user says to delete it?– It is generally a good idea to ask for confirmation– To do that we need to modify the delete button on the

DetailsViewA. Click the DetailsView’s SmartMenuB. Click Edit FieldsC. The Delete button is in the CommandField (Selected fields window)

and to get to you need to click on CommandField and thenD. Click “Convert this field into a TemplateField” (see next slide)

E. Finally, click OK

L1 - 34

A

B

C

D

E

L1 - 35– Next, from the DetailsView’s SmartMenu – click Edit

Templates– In the Template Editing box, click the dropdown arrow to

see what templates are available– Field numbering starts are zero and the current commands

are in field #3 (0, 1, 2, 3). Select the ItemTemplate in Field[3] if it isn’t already selected

– You should see three LinkButtons in the ItemTemplate

L1 - 36– Click the Delete LinkButton and look at its properties

• Change the (ID) to lbDelete• Scroll down to a property called OnClientClick

– This property allows us to write JavaScript code that will run when the user clicks the button and before the page is posted back to the server

– The code we want is:return confirm(“Are you sure?”)

– Confirm causes a popup window with message and two buttons – OK and Cancel» If the user clicks Cancel the post-back is cancelled, so the delete is cancelled» If the user clicks OK the post-back is allowed to happen and the record will be

deleted» End Template editing

L1 - 37

• One more set of problems – what happens if you attempt to insert or update a fee but haven’t entered a description, or a fee? What happens if you try to enter a non-numeric value for the fee?

• How did you solve these problems earlier?

L1 - 38

24. As before, we can solve these problems with Validators, but, to do that we have to get to the TextBoxes where the data is entered and they are buried in the DetailsView and must be converted to templates.– So, open the DetailsView’s SmartMenu and click EditFields (see slide

L1-35 if you need help)– Click on the FeeDescription field and then Convert this field into a

TemplateField– Click on the Fee field and then Convert this field into a TemplateField– Click OK to close the Fields window

L1 - 39– Click Edit Templates from the DetailsView’s SmartMenu– Click the dropdown to Display the available templates.

• You can then click on an individual template or• You can click on the Field name to display all templates for the

field

– Click on Field[1] - FeeDescription

L1 - 40– Add a RequiredFieldValidator next to the TextBox in the

EditItemTemplate• Set the (ID) to rfvDescription• Set the ControlToValidate to TextBox1• Set the ErrorMessage to “Fee Description is Required”• Set ForeColor to Red• Set Text to *• Set Validation Group to Edit

– Repeat the previous step in the InsertItemTemplate but• Set Validation Group to Insert

L1 - 41– Change to templates for the Fee field (if the SmartMenu isn’t

displayed, click the DetailsView’s title bar, click the SmartMenu and change the Display to Field[2])

– Add RequiredFieldValidators to both the Edit and Insert templates. Change properties as before except…• Change the ErrorMessage to say the the Fee is Required• Change the ControlToValidate to TextBox2• Change the Display to Dynamic

L1 - 42– Add a CompareValidator to the Edit and Insert Templates

• Set the (ID) to cvFee• Set the ControlToValidate to TextBox2• Set the Display to Dynamic• Set the ErrorMessage to “Fee must be a positive number”• Set the ForeColor to Red• Set the Operator to Greater Than• Set the Text to *• Set the Type to Double• Set the ValidationGroup to Edit or Insert• Set the ValuetoCompare to 0

L1 - 43– Open the template for Field[3], the field with the buttons– In the EditItemTemplate

• Click on the Update LinkButton• Change the (ID) to lbUpdate• Change the ValidationGroup to Edit

– Make similar changes in the Insert button on the InsertItemTemplate• But set the ValidationGroup to Insert

L1 - 44– Close the templates– Add a ValidationSummary after the DetailsView

• Set the (ID) of the first to vsEdit• Set ShowMessageBox to True• Set ShowSummary to False• Set the ValidationGroup to Edit

– Add a second ValidationSummary changing• (ID) to vsInsert• ValidationGroup to Insert

L1 - 45

25. Run the page, make sure all validators work, that you get the delete confirmation and that you can insert, edit and delete fees

26. Link the page to your MIS3200 homepage27. Copy ASPPub back to your ASPNET account and

submit your MIS Portfolio public URL to the Unit 8.1 L1 drop box

Think About It!

• Why was it necessary to add validators to the insert and edit pages?

• How could the database be changed to eliminate the need for the validators

• What are some of the potential negative consequences of those changes?