unit 27 - web server scriptingwiki.hct.ac.uk/_media/computing/btec/level3/2011_2... · unit 27 -...

38
1

Upload: others

Post on 10-Oct-2020

0 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Unit 27 - Web Server Scriptingwiki.hct.ac.uk/_media/computing/btec/level3/2011_2... · Unit 27 - Web Server Scripting Lesson 5 - Data Access with ASP.NET 3 . Last Week •Capturing

1

Page 2: Unit 27 - Web Server Scriptingwiki.hct.ac.uk/_media/computing/btec/level3/2011_2... · Unit 27 - Web Server Scripting Lesson 5 - Data Access with ASP.NET 3 . Last Week •Capturing

2

Page 3: Unit 27 - Web Server Scriptingwiki.hct.ac.uk/_media/computing/btec/level3/2011_2... · Unit 27 - Web Server Scripting Lesson 5 - Data Access with ASP.NET 3 . Last Week •Capturing

Unit 27 - Web Server Scripting

Lesson 5 - Data Access with ASP.NET

3

Page 4: Unit 27 - Web Server Scriptingwiki.hct.ac.uk/_media/computing/btec/level3/2011_2... · Unit 27 - Web Server Scripting Lesson 5 - Data Access with ASP.NET 3 . Last Week •Capturing

Last Week

• Capturing User Information

• Processing User Input

• Validation

• Server Side Processing

4

Page 5: Unit 27 - Web Server Scriptingwiki.hct.ac.uk/_media/computing/btec/level3/2011_2... · Unit 27 - Web Server Scripting Lesson 5 - Data Access with ASP.NET 3 . Last Week •Capturing

This week

• Data display

• Storing Data

• Accessing Database data

5

Page 6: Unit 27 - Web Server Scriptingwiki.hct.ac.uk/_media/computing/btec/level3/2011_2... · Unit 27 - Web Server Scripting Lesson 5 - Data Access with ASP.NET 3 . Last Week •Capturing

Multiline display

6

Page 7: Unit 27 - Web Server Scriptingwiki.hct.ac.uk/_media/computing/btec/level3/2011_2... · Unit 27 - Web Server Scripting Lesson 5 - Data Access with ASP.NET 3 . Last Week •Capturing

7

Page 8: Unit 27 - Web Server Scriptingwiki.hct.ac.uk/_media/computing/btec/level3/2011_2... · Unit 27 - Web Server Scripting Lesson 5 - Data Access with ASP.NET 3 . Last Week •Capturing

Using Arrays to store data

8

An array is created and

loaded with data (colours) at

page load time into a list

box control. It will only be

loaded the first time the

page is displayed –

ispostback property!

When the button is clicked

the text is concatenated

with the colour selected and

the forecolor property of the

label control is changed to

the selected colour.

When the program is run, a

colour is selected from the

drop down lost box and the

button is clicked. The text is

then displayed in the correct

colour in the text box.

Page 9: Unit 27 - Web Server Scriptingwiki.hct.ac.uk/_media/computing/btec/level3/2011_2... · Unit 27 - Web Server Scripting Lesson 5 - Data Access with ASP.NET 3 . Last Week •Capturing

9

When the

user selects

a colour –

the text is

displayed

using the

colour

selected.

Page 10: Unit 27 - Web Server Scriptingwiki.hct.ac.uk/_media/computing/btec/level3/2011_2... · Unit 27 - Web Server Scripting Lesson 5 - Data Access with ASP.NET 3 . Last Week •Capturing

ArrayLists

10

Using ArrayLists which are a

special kind or array that can store

a collection of elements and add or

remove elements easily. They do

have performance considerations

as are they require more

processing power. So if it just a

simple list of elements then use an

ordinary array.

In this example- additional controls

have been added to the form so

that the user can select the font for

display as well as the colour.

The font names are added to the

fontlist on page load and the

datasource (fontlist) is identified as

the source of data and bound to

the dropdownlistbox.

Notice that the databinding is done

in one statement – you do not have

to iterate through the whole

collection to add it to the list. You

can do this ordinary arrays as

well!!

The messages output are changed

to reflect the font.

Page 11: Unit 27 - Web Server Scriptingwiki.hct.ac.uk/_media/computing/btec/level3/2011_2... · Unit 27 - Web Server Scripting Lesson 5 - Data Access with ASP.NET 3 . Last Week •Capturing

11

Page 12: Unit 27 - Web Server Scriptingwiki.hct.ac.uk/_media/computing/btec/level3/2011_2... · Unit 27 - Web Server Scripting Lesson 5 - Data Access with ASP.NET 3 . Last Week •Capturing

Adding Array items

12

Page 13: Unit 27 - Web Server Scriptingwiki.hct.ac.uk/_media/computing/btec/level3/2011_2... · Unit 27 - Web Server Scripting Lesson 5 - Data Access with ASP.NET 3 . Last Week •Capturing

13

Page 14: Unit 27 - Web Server Scriptingwiki.hct.ac.uk/_media/computing/btec/level3/2011_2... · Unit 27 - Web Server Scripting Lesson 5 - Data Access with ASP.NET 3 . Last Week •Capturing

Hash Tables

14

Page 15: Unit 27 - Web Server Scriptingwiki.hct.ac.uk/_media/computing/btec/level3/2011_2... · Unit 27 - Web Server Scripting Lesson 5 - Data Access with ASP.NET 3 . Last Week •Capturing

Hashtables

15

Hash tables are used to associate keys with values that can identify them.

An array has an index number which we can refer to but you would need to

know the index number to find the list entry you wanted. A hash table

replaces the index number system with a key that is specified for each list

item which relates to a corresponding value.

A good use of hash tables is with country codes where the abbreviations

would be UK for example and then when selected the whole country name

would be displayed.

Have amended the example to allow the user to select a value from a list

and then to display the associated text item.

Notice that the databind this time is for the hashtable keys!!

There is a sortedlist collection that works in exactly the same way as the

hashtable but the keys are automatically sorted into alphabetical order as

they are entered. In this example we would just need to change the

declaration of quotelist to sortedlist rather than hashtable

Page 16: Unit 27 - Web Server Scriptingwiki.hct.ac.uk/_media/computing/btec/level3/2011_2... · Unit 27 - Web Server Scripting Lesson 5 - Data Access with ASP.NET 3 . Last Week •Capturing

16

Page 17: Unit 27 - Web Server Scriptingwiki.hct.ac.uk/_media/computing/btec/level3/2011_2... · Unit 27 - Web Server Scripting Lesson 5 - Data Access with ASP.NET 3 . Last Week •Capturing

Using Database Data

• SQL or Access database connections available.

• DataSource Controls

• Gridview (and other controls) available.

17

Page 18: Unit 27 - Web Server Scriptingwiki.hct.ac.uk/_media/computing/btec/level3/2011_2... · Unit 27 - Web Server Scripting Lesson 5 - Data Access with ASP.NET 3 . Last Week •Capturing

CAM04 Database

18

Page 19: Unit 27 - Web Server Scriptingwiki.hct.ac.uk/_media/computing/btec/level3/2011_2... · Unit 27 - Web Server Scripting Lesson 5 - Data Access with ASP.NET 3 . Last Week •Capturing

AccessDataSource

19

Drag an

AccessDataSource

Control onto the

form and use

Configure Data

Source (from its

associated task list)

to point to the

Access database,

the relevant table

and fields.

Page 20: Unit 27 - Web Server Scriptingwiki.hct.ac.uk/_media/computing/btec/level3/2011_2... · Unit 27 - Web Server Scripting Lesson 5 - Data Access with ASP.NET 3 . Last Week •Capturing

AccessDataSource

20

Page 21: Unit 27 - Web Server Scriptingwiki.hct.ac.uk/_media/computing/btec/level3/2011_2... · Unit 27 - Web Server Scripting Lesson 5 - Data Access with ASP.NET 3 . Last Week •Capturing

AccessDataSource

21

Page 22: Unit 27 - Web Server Scriptingwiki.hct.ac.uk/_media/computing/btec/level3/2011_2... · Unit 27 - Web Server Scripting Lesson 5 - Data Access with ASP.NET 3 . Last Week •Capturing

AccessDataSource

22

If the table is

updatable you will

have the option of

generating the

necessary Insert,

Update and Delete

SQL statements.

Page 23: Unit 27 - Web Server Scriptingwiki.hct.ac.uk/_media/computing/btec/level3/2011_2... · Unit 27 - Web Server Scripting Lesson 5 - Data Access with ASP.NET 3 . Last Week •Capturing

AccessDataSource

23

The query

can be

tested to

show that

the database

connection

has been

established.

Page 24: Unit 27 - Web Server Scriptingwiki.hct.ac.uk/_media/computing/btec/level3/2011_2... · Unit 27 - Web Server Scripting Lesson 5 - Data Access with ASP.NET 3 . Last Week •Capturing

Gridview control

24

From the

Gridview

tasklist we can

choose Data

Source which

will then link to

the

AccessDataSo

urce we have

created.

Page 25: Unit 27 - Web Server Scriptingwiki.hct.ac.uk/_media/computing/btec/level3/2011_2... · Unit 27 - Web Server Scripting Lesson 5 - Data Access with ASP.NET 3 . Last Week •Capturing

Gridview control

25

Page 26: Unit 27 - Web Server Scriptingwiki.hct.ac.uk/_media/computing/btec/level3/2011_2... · Unit 27 - Web Server Scripting Lesson 5 - Data Access with ASP.NET 3 . Last Week •Capturing

Gridview control

26

Page 27: Unit 27 - Web Server Scriptingwiki.hct.ac.uk/_media/computing/btec/level3/2011_2... · Unit 27 - Web Server Scripting Lesson 5 - Data Access with ASP.NET 3 . Last Week •Capturing

Gridview control in action

27

Page 28: Unit 27 - Web Server Scriptingwiki.hct.ac.uk/_media/computing/btec/level3/2011_2... · Unit 27 - Web Server Scripting Lesson 5 - Data Access with ASP.NET 3 . Last Week •Capturing

Formating Gridview Columns

28

The Columns property

of the GridView is a

collection of editable

items. We want to alter

the format of the

Release Date column.

Change it to {0:dd MMM

yyyy} – note may need

to set HTML Encode

property for this item to

False.

Page 29: Unit 27 - Web Server Scriptingwiki.hct.ac.uk/_media/computing/btec/level3/2011_2... · Unit 27 - Web Server Scripting Lesson 5 - Data Access with ASP.NET 3 . Last Week •Capturing

Formating Gridview Columns

29

We now have the

date column

looking much tidier.

Page 30: Unit 27 - Web Server Scriptingwiki.hct.ac.uk/_media/computing/btec/level3/2011_2... · Unit 27 - Web Server Scripting Lesson 5 - Data Access with ASP.NET 3 . Last Week •Capturing

Formating Gridview Columns

30

To get the album

images we need

to include an

image field in the

GridView table

Page 31: Unit 27 - Web Server Scriptingwiki.hct.ac.uk/_media/computing/btec/level3/2011_2... · Unit 27 - Web Server Scripting Lesson 5 - Data Access with ASP.NET 3 . Last Week •Capturing

Formating Gridview Columns

31

It must be

bound to the

correct

datafield

Page 32: Unit 27 - Web Server Scriptingwiki.hct.ac.uk/_media/computing/btec/level3/2011_2... · Unit 27 - Web Server Scripting Lesson 5 - Data Access with ASP.NET 3 . Last Week •Capturing

Formating Gridview Columns

32

And here is

the latest

result.

Page 33: Unit 27 - Web Server Scriptingwiki.hct.ac.uk/_media/computing/btec/level3/2011_2... · Unit 27 - Web Server Scripting Lesson 5 - Data Access with ASP.NET 3 . Last Week •Capturing

Formating Gridview Columns

33

And by

adding a final

hyperlink

column we

have the final

result.

Page 34: Unit 27 - Web Server Scriptingwiki.hct.ac.uk/_media/computing/btec/level3/2011_2... · Unit 27 - Web Server Scripting Lesson 5 - Data Access with ASP.NET 3 . Last Week •Capturing

DetailsView Control

34

Page 35: Unit 27 - Web Server Scriptingwiki.hct.ac.uk/_media/computing/btec/level3/2011_2... · Unit 27 - Web Server Scripting Lesson 5 - Data Access with ASP.NET 3 . Last Week •Capturing

DetailsView Control

35

Page 36: Unit 27 - Web Server Scriptingwiki.hct.ac.uk/_media/computing/btec/level3/2011_2... · Unit 27 - Web Server Scripting Lesson 5 - Data Access with ASP.NET 3 . Last Week •Capturing

FormsView Control

36

Page 37: Unit 27 - Web Server Scriptingwiki.hct.ac.uk/_media/computing/btec/level3/2011_2... · Unit 27 - Web Server Scripting Lesson 5 - Data Access with ASP.NET 3 . Last Week •Capturing

FormsView Control

37

Page 38: Unit 27 - Web Server Scriptingwiki.hct.ac.uk/_media/computing/btec/level3/2011_2... · Unit 27 - Web Server Scripting Lesson 5 - Data Access with ASP.NET 3 . Last Week •Capturing

Tutorial

38

In the tutorial this week

you will create this page.

It contains a GridView

showing all the records

from a database. When

the user clicks on the

album cover picture they

will be able to display

more details from

another page.

Do not implement other

page.!!