1 CS 3870/CS 5870: Note05 Prog3 Web Application with Database

1

CS 3870/CS 5870: Note05

Prog3

Web Application with Database

https://xray.ion.uwplatt.edu/yangq/grader.aspx

2

Master Page

• All Web pages will be similar

• Should be created before other web pages

• Add New Items

• Master Page

• Check “Place code in separate file”

• Uncheck “Select master page”– Could create a master page based on another master page

• May be incomplete

3

Controls on the Master page

• Form– All controls should be inside Form for dynamic pages

• Two ContentPlaceHolder controls

One in <head> and one in <body>

Leave ContentPlaceHolder empty

• Add controls before/after ContentPlaceHolder– Title and Names

– Adding navbar

– External CSS file

4

CSS File

body {

padding-left: 12em;

}

.navbar {

list-style-type: none;

padding: 0;

margin: 0;

position: absolute;

top: 4em;

left: 1em;

width: 11em

}

5

Navbar

<ul class="navbar">

<li> All Products </li>

<li> Updating Products </li>

<li> Shopping </li>

</ul>

No links yet!

Content Pages• Create the three pages using the master page

– Web Form (with master)– Select master page– Make sure selecting folder first

• No Form control on content pages

• Control Content– ContentPlaceHolderID references

ContentPlaceHolder control on master page– Could be empty for <head>

6

7

Complete the Navbar on Master Page

<ul class="navbar">

<li> <a href="Default.aspx"> All Products </a></li>

<li> <a href="Updating.aspx"> Updating Products </a></li>

<li> <a href="Shopping.aspx"> Shopping </a></li>

</ul>

8

The Database

• UWPCS3870

• SQL Server Express on Xray

• User: jim

(not case sensitive)

• Password: UWPCS3870

(case sensitive)

Table Product

Four Columns

ProductID : nchar(3), primary key,

not updatable

ProductNmae: nvarchar(50)

UnitPrice : smallmoney

Description : nvarchar(MAX), allow nulls

9

10

Accessing Database

• Data Source Controls– SqlDataSource

– AccessDataSource

– . . .

• Code class– Connection

– Command

– DataAdpater

– AdapterBuilder

• Prog3– Use Code class

ASP.NET Folders

• Solution Explorer

• Right click Web site

• Add ASP.NET Folder

• App_Code

• (App_Data)

• . . .

11

SQLDataClass

• Code class in folder App_Code

• No code module

• All variables and procedures should be

Shared

• Otherwise, need to create object

12

Variables

Public Class SQLDataClass

Private Const ConStr As String = "Data Source=Xray\Sqlexpress;” &

“Initial Catalog=UWPCS3870;Persist Security Info=True;” &

“User ID=jim;Password=UWPCS3870"

Private Shared prodAdapter As System.Data.SqlClient.SqlDataAdapter

Private Shared prodBuilder As System.Data.SqlClient.SqlDataAdapter

Private Shared prodCmd As New Data.SqlClient.SqlCommand

Private Shared con As New Data.SqlClient.SqlConnection

Public Shared tblProduct As New Data.DataTable("Product")

. . .

End Class

The objects are available all the times.

13

Setup Command and Adapter

‘ Sets up the connection, command and adapter

Public Shared Sub setupProdAdapter()

con.ConnectionString = ConStr

prodCmd.Connection = con

prodCmd.CommandType = Data.CommandType.Text

prodCmd.CommandText = "Select * from Product order by ProductID"

prodAdapter = New System.Data.SqlClient.SqlDataAdapter(prodCmd)

prodAdapter.FillSchema(tblProduct, Data.SchemaType.Source)

End Sub

14

Retrieve Data Records‘ Gets the table records and the table schema

Public Shared Sub getAllProdcts()

‘ Need to reset the command

prodCmd.CommandText = "Select * from Product order by ProductID"

Try

If Not tblProduct Is Nothing Then

tblProduct.Clear()

End If

prodAdapter.Fill(tblProduct)

Catch ex As Exception

Throw ex

Finally

con.Close()

End Try

End Sub 15

Setting up the Adapter

‘ Global.asax

Sub Application_Start(. . .)

SQLDataClass.setupProdAdapter()

End Sub

Do it just once for the application for all sessions of all users.

16

Binding Gridview

Protected Sub Page_Load(. . .) Handles Me.Load

DataClass.getAllProducts()

GridView1.DataSource = DataClass.tblProducts

GridView1.DataBind()

End Sub

Refill the data table for each page request.

17

Page Updating

• Display record one at a time

• Display the first record for the first visit

• Display the same record for return visit

• Need Session variable

• Begin with “Prog3_”

18

Session Variables

Sub Session_Start(. . .)

Session(“Prog3_Index”) = 0

End Sub

Protected Sub Page_Load(…) Handles Me.Load

DisplayRow(Session(“Prog3_Index”))

End Sub

19

Display Record

Private Sub DisplayRow(Index As Integer)

Dim row As Data.DataRow

row = SQLDataClass.tblProduct.Rows(index)

‘ May need formatting

txtID.Text = row(0)

txtName.Text = row(1)

txtPrice.Text = row(2)

txtDescription.Text = row(3)

End Sub

20

Navigation Buttons

Partial Class Prog3_Updating

Protected Sub Button6_Click(…) Handles btnNext.Click

Session(“Prog3_Index”) += 1


End Sub

Protected Sub Button6_Click(…) Handles btnPrevious.Click

Session(“Prog3_Index”) -= 1


End Sub

21

Enable/Disable Buttons

Could make a private Sub.

Your choice.

22

Navigation Buttons


Protected Sub Button6_Click(…) Handles btnNext.Click

Session(“Prog3_Index”) += 1


EnableDisableButtons()

End Sub

Protected Sub Button6_Click(…) Handles btnPrevious.Click

Session(“Prog3_Index”) -= 1


EnableDisableButtons()

End Sub

23

SQL Statements

Update Product

Set ProductName = ‘NewName’,

UnitPrice = newPrice

Description = ‘NewDescription’,

Where ProductID = ‘theID’;

Insert Into Product

Values(‘ID’, ‘Name’, Price, ‘Description’);

Delete From Product

Where ProductID = ‘theID’;

24

Button Update

‘ID not to be modified

Protected Sub Button6_Click(…) Handles btnUpdate.Click

Dim theID As String = txtID.Text

Dim newName As String = txtName.Text

Dim newPrice As Double = txtPrice.Text

Dim newDesc As String = txtDesc.Text

SQLDataClass.UpdateProduct(theID, newName,

newPrice, newDesc)

End Sub

25

UpdateProduct

Public Shared Sub UpdateProduct(theID As String,

newName As String, newPrice As Double, newDesc As String)

‘ Building SQL statement with variables

prodCmd.CommandText = ". . ."

Try

con.Open()

prodCmd.ExecuteNonQuery()

Catch ex

Throw ex

Finally

con.Close()

End Try

End Sub

26

UpdateProduct


newName As String, newPrice As Double, newDesc As String)

prodCmd.CommandText =

" Update Product" & _

" Set ProductName = ‘newName', " & _

" UnitPrice = newPrice, " & _

" Description = ‘newDesc'" & _

" Where ProductID = 'theID‘”

Try

. . .

End Try

End Sub

27

UpdateProduct


newName As String, newPrice As Double)



" Update Product " & _

" Set ProductName = " & newName & “, " & _

" UnitPrice = " & newPrice & ", " & _

" Description = " & newDesc & _

" Where ProductID = " & theID

Try

. . .

End Try

End Sub

28

UpdateProduct


newName As String, newPrice As Double)



" Update Product " & _

" Set ProductName = '" & newName & "'," & _

" UnitPrice = " & newPrice & ", " & _

" Description = '" & newDesc & "'" & _

" Where ProductID = '" & theID & "'“

Try

. . .

End Try

End Sub

29

Try-CatchPublic Shared Sub UpdateProduct(oldID As String,

newID As String, newName As String, newPrice As Double)


Try

con.Open()

prodCmd.ExecuteNonQuery()

con.Close()

Catch ex

‘ To see what is wrong

Throw ex(prodCmd.CommandText)

End Try

End Sub30

Try-Catch-FinallyPublic Shared Sub UpdateProduct(oldID As String,

newID As String, newName As String, newPrice As Double)


Try

con.Open()

prodCmd.ExecuteNonQuery() ‘ update database

Catch ex

Throw new Exception(ex.Message & “ ” &

myCmd.CommandText)

Finally

con.Close() ‘ always close it

End Try

End Sub

31

Button Update

Protected Sub Button6_Click(…) Handles btnUpdate.Click

Dim . . .

Try

DataClass.UpdateProduct(theID, newName,

newPrice, newDesc)

‘ must update tblProducts

SQLDataClass.getAllProduct()

Catch ex

txtMsg.Text = ex.Message ‘including myCmd.CommandText

Finally

con.Close() ‘ always close it

End Try

End Sub

32

33

Updating


Inherits System.Web.UI.Page


txtMsg.Text = ""

DisplayRow(Session(“Prog3_Index"))

End Sub

Cannot Update Correctly!

34

Updating




txtMsg.Text = ""


End Sub

Cannot Update Correctly!

Post Back!

35

PostBack




txtMsg.Text = “”

If Not IsPostBack Then


Else

‘ Do not do anything

‘ Textboxes keep their values from client

End If

End Sub

Buttons

• btnNew– New– Save New

• btnDelete– Delete– Cancel

• Enabled/Disabled

36

Documents

1 CS 3870/CS 5870: Note05 Prog3 Web Application with Database