14
Web Data Management and XML L2: Web Programming 1 Web Programming © Leonidas Fegaras University of Texas at Arlington Web Data Management and XML L2: Web Programming 2 Dynamic Web Pages Static web page: every time you request this page, you get exactly the same content boring! Dynamic web page: the page content may change on each request the user interacts with the web site and the web site responds accordingly Common Gateway Interface (CGI) A simple protocol that can be used to communicate between Web forms and your program A CGI script can be written in any language Need to be able to read input, write to output, and read environment variables PHP, Java, C, C#, Python, Perl, Ruby, etc Web Data Management and XML L2: Web Programming 3 Web Programming We need both client-side and server-side programming to improve client-server interaction to reduce bandwidth, server load, response time, etc Client-side programming is needed to put dynamic content into an HTML page to react to user events interactively without bothering the server to mimic a GUI using graphics and animation to validate data/queries before they are submitted to the server Server-side programming is needed to limit the client interface to a server for security and performance to perform heavy-duty processing, not available at every client database processing file directory service as a broker to web services Web Data Management and XML L2: Web Programming 4 Current Situation For client-side programming, the choice is clear: JavaScript Adobe Flash for animations Java applets were a promising idea but failed For server-side, there are many choices: For rapid prototyping, many people use PHP scripts (some use ASP) For high-performance and portability, people now use servlets in Java A script is easy to develop and maintain but has a high overhead for the server for each client-server request, a script must be interpreted in a new thread Servlets are compiled Java programs The Java engine runs continuously and spawns a light-weight thread for each servlet call Most web servers use the apache web server Microsoft IIS is the second most popular choice, but is not portable Tomcat is the most popular servlet container

Dynamic Web Pages Current Situationlambda.uta.edu/cse5335/spring13/l2-4.pdf · L2:Web Programming 4 Current Situation For client-side programming, the choice isclear: JavaScript AdobeFlash

  • Upload
    others

  • View
    22

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Dynamic Web Pages Current Situationlambda.uta.edu/cse5335/spring13/l2-4.pdf · L2:Web Programming 4 Current Situation For client-side programming, the choice isclear: JavaScript AdobeFlash

Web

Dat

a M

anag

emen

t an

d X

ML

L2

:W

eb P

rogra

mm

ing

1

Web

Pro

gra

mm

ing

©L

eon

idas

Feg

aras

Un

iver

sity

of

Tex

asat

Arl

ing

ton

Web

Dat

a M

anag

emen

t an

d X

ML

L2

:W

eb P

rogra

mm

ing

2

Dy

nam

ic W

eb P

ages

Sta

tic

web

pa

ge:

ev

ery

tim

e y

ou

req

ues

tth

isp

age,

yo

uget

exac

tly

th

e sa

me

con

ten

t

bori

ng!

Dyn

am

ic w

eb p

ag

e: t

he

pag

e co

nte

nt

may

ch

ang

e o

n e

ach

req

ues

t

the

use

r in

tera

cts

wit

h t

he

web

sit

e an

d t

he

web

site

res

po

nds

acco

rdin

gly

Co

mm

on

Gat

eway

In

terf

ace

(CG

I)

A s

imp

le p

roto

col

that

can

be

use

d t

o c

om

mun

icat

e b

etw

een

Web

fo

rms

and

yo

ur

pro

gra

m

A C

GI

scri

pt

can

be

wri

tten

in

an

y l

ang

uag

e

Nee

d t

obe

able

to r

ead i

nput,

wri

te t

o o

utp

ut,

and r

ead

env

ironm

ent

var

iable

s

PH

P,

Java,

C,

C#,

Py

thon,

Per

l, R

uby

, et

c

Web

Dat

a M

anag

emen

t an

d X

ML

L2

:W

eb P

rogra

mm

ing

3

Web

Pro

gra

mm

ing

We

nee

d b

oth

cli

ent-

sid

e an

d s

erv

er-s

ide

pro

gra

mm

ing

to i

mp

rov

ecl

ien

t-se

rver

in

tera

ctio

n

to r

edu

ceb

and

wid

th,

serv

er l

oad

, re

spo

nse

tim

e, e

tc

Cli

ent-

sid

e p

rog

ram

min

g i

s n

eed

ed

to p

ut

dynam

ic c

on

tent

into

an

HT

ML

pag

e

to r

eact

to u

ser

even

ts i

nte

ract

ivel

yw

ith

ou

t b

oth

erin

g t

he

serv

er

to m

imic

a G

UI

usi

ng

gra

phic

s an

d a

nim

atio

n

to v

alid

ate

dat

a/q

uer

ies

bef

ore

th

eyar

e su

bm

itte

d t

o t

he

serv

er

Ser

ver

-sid

epro

gra

mm

ing

is

nee

ded

to l

imit

th

e cl

ien

tin

terf

ace

to a

serv

er

for

secu

rity

and

per

form

ance

to p

erfo

rm h

eavy-d

uty

pro

cess

ing

, n

ot

avai

lab

le a

t ev

ery c

lien

t

dat

abas

e pro

cess

ing

file

dir

ecto

ry s

ervic

e

asa

bro

ker

to

web

ser

vic

es

Web

Dat

a M

anag

emen

t an

d X

ML

L2

:W

eb P

rogra

mm

ing

4

Curr

ent

Sit

uat

ion

Fo

r cl

ien

t-si

de

pro

gra

mm

ing

, th

e ch

oic

e is

clea

r:J

av

aS

crip

t

Ad

ob

eF

lash

fo

r an

imat

ion

s

Jav

aap

ple

ts w

ere

a p

rom

isin

g i

dea

bu

t fa

iled

Fo

r se

rver

-sid

e,th

ere

are

man

y c

ho

ices

:

Fo

rra

pid

pro

toty

pin

g,

man

y p

eop

leuse

PH

P s

crip

ts (

som

e u

se A

SP

)

Fo

rh

igh-p

erfo

rman

cean

dpo

rtab

ilit

y,

peo

ple

no

w u

sese

rvle

ts i

n J

ava

A s

crip

t is

eas

y t

od

evel

op

an

d m

ain

tain

bu

t h

as a

hig

h o

ver

hea

dfo

r th

e se

rver

for

each

cli

ent-

serv

er r

equ

est,

a s

crip

tm

ust

be

inte

rpre

ted i

n a

new

thre

ad

Ser

vle

ts a

re c

om

pil

ed J

ava

pro

gra

ms

Th

e Ja

va

eng

ine

runs

conti

nu

ou

sly a

nd

sp

awns

ali

gh

t-w

eig

ht

thre

ad f

or

each

ser

vle

tca

ll

Most

web

ser

ver

su

se t

he

ap

ach

e w

eb s

erv

er

Mic

roso

ft I

IS i

s th

e se

cond

mo

stpo

pu

lar

cho

ice,

bu

tis

no

tpo

rtab

le

To

mca

t is

th

e m

ost

po

pula

r se

rvle

t co

nta

iner

Page 2: Dynamic Web Pages Current Situationlambda.uta.edu/cse5335/spring13/l2-4.pdf · L2:Web Programming 4 Current Situation For client-side programming, the choice isclear: JavaScript AdobeFlash

Web

Dat

a M

anag

emen

t an

d X

ML

L2

:W

eb P

rogra

mm

ing

5

HT

ML

Fo

rms

HT

ML

Fo

rms

are

a co

mm

on

met

ho

d t

om

ake

web

pag

esin

tera

ctiv

e

A f

orm

on

aw

eb p

age

allo

ws

the

use

rto

en

ter

req

ues

ted i

nfo

rmat

ion a

nd

subm

itit

for

pro

cess

ing

Ex

amp

le:

<fo

rmn

am

e=

"in

pu

t"acti

on=

"/cg

i-b

in/log

in.p

hp

"m

eth

od

="G

ET">

Usern

am

e:

<in

pu

t ty

pe=

"text"

nam

e=

"usern

am

e">

<b

r/>

Passw

ord

: <

inp

ut

typ

e=

"passw

ord

"n

am

e=

"passw

ord

"><

br/

>

<in

put

typ

e=

"su

bm

it"

valu

e=

"Sub

mit

">

</f

orm

>

The

use

r ty

pes

use

rnam

e “S

mit

h”

and

pas

swo

rd “

my

pas

s”

Wh

en t

he

use

r p

ress

es S

ub

mit

, th

e b

row

ser

sen

ds

the

form

dat

a to

th

e w

ebse

rver

. F

or

GE

T,

it's

th

e sa

me

as c

lick

ing

on

the

lin

k:

htt

p:/

/my

serv

er.c

om

/cgi-

bin

/login

.php?u

sern

ame=

Sm

ith&

pas

sword

=m

ypas

s

Web

Dat

a M

anag

emen

t an

d X

ML

L2

:W

eb P

rogra

mm

ing

6

HT

ML

Fo

rms

(co

nt.

)

Wh

en t

he

web

ser

ver

get

s th

is r

equ

est,

it

lau

nch

es t

he

CG

I p

rog

ram

wh

ich

was

wri

tten

to

pro

cess

th

is f

orm

The

CG

I p

rogra

m g

ener

ates

a w

eb p

age

in H

TM

L s

o t

hat

th

e u

ser

can

see

the

resu

lts

of

sub

mit

tin

g t

he

form

The

CG

I p

rogra

m p

asse

s th

e H

TM

L b

ack

to

th

e w

eb s

erver

The

web

ser

ver

pas

ses

the

HT

ML

bac

k t

oth

ebro

wse

r

Wh

at's

th

e d

iffe

ren

ce b

etw

een

th

eG

ET

an

d P

OS

T m

eth

od

s?

A w

eb b

row

ser

do

wn

load

s m

ost

HT

ML

fil

es b

y s

ub

mit

tin

g G

ET

req

ues

ts

GE

T i

s al

so u

sed

fo

r m

any

form

sub

mis

sio

ns,

wh

en t

he

form

dat

a ar

esm

all

(wh

en t

hey

can

fit

in t

he

UR

L)

and

do

no

tn

eed

en

crypti

on

When

an

HT

ML

form

is s

ub

mit

ted

usi

ng

PO

ST

, th

e fo

rm d

ata

are

atta

ched

to t

he

mes

sage

bod

y, at

the

end o

f th

e P

OS

T r

equ

est

bro

wse

rw

ebse

rver

HT

TP

GE

T/P

OS

T HT

ML

Web

Dat

a M

anag

emen

t an

d X

ML

L2

:W

eb P

rogra

mm

ing

7

Var

ious

Fo

rmty

pes

Ty

pic

ally

:

<in

put

typ

e=

“t”

nam

e=

“n

”valu

e=

“v”

...

/>

wh

ere

t is

a f

orm

ty

pe,

n i

s th

e in

pu

t n

ame,

v i

s th

e v

alu

e

Ap

pen

ds

&n

=v

to

the

UR

L s

trin

g(v

is

UR

L-e

nco

ded

)

So

me

form

ty

pes

:

hid

den

subm

itan

dre

set

chec

kb

ox

and

rad

io

tex

t an

d p

assw

ord

file

Oth

ers:

<te

xta

rea n

am

e=

“m

yte

xt”

row

s=

“4

” c

ols

=“4

5”>

som

ein

itia

lte

xt<

/texta

rea>

<sele

ct

nam

e=

“m

ym

enu”>

<opti

on>

choic

e1

</o

pti

on>

...<

/sele

ct>

UR

L e

nco

din

g:

rep

lace

s a

spac

ew

ith

a+

sig

n a

nd

un

safe

AS

CII

char

acte

rsw

ith

"%

" fo

llo

wed

by

two

hex

adec

imal

dig

its

Web

Dat

a M

anag

emen

t an

d X

ML

L2

:W

eb P

rogra

mm

ing

8

Web

Ser

vic

es

Dee

pW

eb:

w

eb d

ata

sou

rces

th

at a

pp

ear

as o

nli

ne

dat

abas

es

they

are

hid

den

beh

ind

qu

ery

form

s th

at p

rod

uce

dyn

amic

web

co

nte

nt

Thes

e d

ata

sou

rces

oft

en p

rov

ide

a se

con

d a

lter

nat

ive

to q

uer

yin

g

and

up

dat

ing

th

eir

con

ten

tth

rou

gh

a f

ixed

nu

mb

er o

f p

red

efin

ed

Web

Ser

vic

es

Web

Ser

vic

es a

re u

sed

in

use

rap

pli

cati

on

s an

d w

ebm

ash

ups

Aw

eb m

ash

up

is

a co

mp

osi

te w

eb a

pp

lica

tion

that

com

bin

esre

sou

rces

fro

m m

ult

iple

dat

a so

urc

es

Itca

nac

cess

, fi

lter

, jo

in,

and a

gg

reg

ate

dat

a fr

om

all

th

ese

dat

a so

urc

es

Most

web

mas

hu

ps

are

dy

nam

ic w

eb p

ages

dev

elo

ped

in

asc

rip

tin

g l

ang

uag

e

See

:h

ttp

://w

ww

.pro

gra

mm

able

web

.co

m/h

ow

to

Ther

e ar

em

any

mas

hu

p d

evel

op

men

t to

ols

:Y

aho

o P

ipes

, In

tel's

Mas

hm

aker

, IB

M's

Sw

ash

up

Th

ey e

ase

the

task

of

dev

elo

pin

gm

ash

up

sb

y p

rov

idin

g f

ixed

way

s o

f co

nn

ecti

ng

web

app

lica

tio

ns

and

of

tran

sfo

rmin

g d

ata

bet

wee

n t

hem

, w

ith

ou

tre

qu

irin

g a

ny p

rog

ram

min

gsk

ills

Page 3: Dynamic Web Pages Current Situationlambda.uta.edu/cse5335/spring13/l2-4.pdf · L2:Web Programming 4 Current Situation For client-side programming, the choice isclear: JavaScript AdobeFlash

Web

Dat

a M

anag

emen

t an

d X

ML

L2

:W

eb P

rogra

mm

ing

9

RE

ST

ful

Web

Ser

vic

es

Thes

e ar

e re

sou

rce-

ori

ente

d W

ebS

erv

ices

th

atar

ebas

ed o

n H

TT

P

RE

ST

= R

Ep

rese

nta

tio

nal

Sta

teT

ran

sfer

reso

urc

e:pro

vid

ed b

ya

serv

er a

nd

can

be

any d

ata

or

do

cum

ent

Cli

ents

may

acce

ss a

reso

urc

eusi

ng

its

UR

L

When

a s

erv

eris

req

ues

ted

a r

eso

urc

e, a

spec

ific

repre

sen

tati

on

is

retu

rned

Th

e re

pre

sen

tati

on m

ay c

on

tain

hyper

lin

ks

that

, w

hen

trav

erse

d,

acce

ss

oth

er r

eso

urc

es =

>th

is c

ause

s a

sta

te t

ran

sfer

Itp

rov

ides

sta

tele

ss s

erv

ices

for

bo

th q

uer

yin

g a

nd

up

dat

ing

th

rou

gh

a u

nif

orm

gen

eric

in

terf

ace

Itp

rov

ides

a p

red

efin

ed s

et o

f st

and

ard

met

ho

ds,

wh

ich

are

actu

ally

th

e H

TT

Pen

vel

op

met

ho

ds:

GE

T,

PO

ST

, P

UT

,D

EL

ET

E,

and H

EA

D

One

may

retr

ieve

dat

a fr

om

a W

eb S

ervic

e by

sen

din

g a

n H

TT

PG

ET

req

ues

t usi

ng

a ce

rtai

n U

RL

wit

h a

n e

mbed

ded

quer

y s

trin

g i

n t

he

UR

L

To r

epla

ce t

his

dat

a w

ith

new

dat

a, o

ne

sim

ply

nee

ds

to s

end a

n H

TT

PP

OS

T

reques

t usi

ng e

xac

tly

the

sam

e U

RL

and i

ncl

udin

g t

he

new

dat

a in

the

HT

TP

body

Web

Dat

a M

anag

emen

t an

d X

ML

L2

:W

eb P

rogra

mm

ing

10

RE

ST

ful

Web

Ser

vic

es (

cont.

)

Hea

vy

-du

ty W

eb S

erv

ices

use

th

e S

OA

P p

roto

col

Use

d m

ost

ly f

or

B2B

in

tera

ctio

ns

Su

pp

ort

s cu

sto

m m

etho

ds

for

qu

eryin

g a

nd

up

dat

ing

Bas

ed o

n s

tan

dar

ds:

XM

L,

SO

AP

, W

SD

L,

UD

DI

Most

Web

Ser

vic

es c

laim

to

be

RE

ST

In r

eali

ty,

they

wan

t to

indic

ate

that

th

eyar

e re

sou

rce-

ori

ente

d,

no

t S

OA

P

On

ly f

ewar

ere

ally

RE

ST

:

the

Ato

mP

ubli

shin

g P

roto

col

(AP

P)

for

pub

lish

ing t

o b

log

s

Am

azon S

3,

Su

n's

Clo

ud A

PI,

Apac

he

Sli

ng

Am

azo

n S

imp

le S

tora

ge

Ser

vic

e (S

3)

is u

sed

to s

tore

obje

cts

usi

ng t

he

Am

azon o

nli

ne

stora

ge

infr

astr

uct

ure

The

AP

I use

s B

uck

ets,

Obje

cts,

Key

san

d O

per

atio

ns

Obje

cts

are

store

d i

n b

uck

ets

An o

bje

ct h

asfo

ur

par

ts:

val

ue,

key

, m

etad

ata,

and a

n a

cces

s co

ntr

ol

poli

cy

Web

Dat

a M

anag

emen

t an

d X

ML

L2

:W

eb P

rogra

mm

ing

11

Yah

oo

Pip

es

htt

p:/

/pip

es.y

ahoo.c

om

/pip

es/p

ipe.

info

?_id

=_Ia

89

ose

3B

GM

Z6Y

Nlv

XiA

A

Web

Dat

a M

anag

emen

t an

d X

ML

L2

:W

eb P

rogra

mm

ing

12

Page 4: Dynamic Web Pages Current Situationlambda.uta.edu/cse5335/spring13/l2-4.pdf · L2:Web Programming 4 Current Situation For client-side programming, the choice isclear: JavaScript AdobeFlash

Web

Dat

a M

anag

emen

t an

d X

ML

L2

:W

eb P

rogra

mm

ing

13

Web

Dat

a M

anag

emen

t an

d X

ML

L2

:W

eb P

rogra

mm

ing

14

XH

TM

L

Nee

d t

oh

and

le H

TM

L c

onte

nt

as d

ata

so t

hat

we

can r

etri

eve

arb

itra

ry p

arts

of

the

HT

ML

do

cum

ent

usi

ng

ID

s

so t

hat

we

can s

elec

tivel

y c

han

ge

par

ts o

f th

eco

nte

nt

of

HT

ML

pag

es

requir

ed f

or

asy

nch

ronous

serv

er r

eques

ts (

see

Aja

x l

ater

)

The

ob

vio

us

cho

ice

isto

tre

at H

TM

Las

XM

L

Ple

nti

ful

stan

dar

ds

for

qu

eryin

g/m

od

ifyin

g X

ML

dat

a

XH

TM

L i

s H

TM

L i

nX

ML

fo

rm,

stan

dar

diz

ed b

y W

3C

Itw

ill

even

tual

ly r

epla

ce H

TM

L

XH

TM

L i

s a

stri

cter

an

d c

lean

er v

ersi

on

of

HT

ML

It's

ver

y w

ell

inte

gra

ted

wit

h C

asca

din

g S

tyle

Sh

eets

(C

SS

s)

“Qu

irk

s” m

od

e: c

urr

ent

bro

wse

rsre

cogn

ize

bo

thH

TM

L a

nd

X

HT

ML

Nee

d t

o d

ecla

re t

he

do

cum

ent

typ

e (D

TD

)if

yo

u w

ant

to e

nfo

rce

XH

TM

L

Jav

aScr

ipt

can

rea

d X

HT

ML

as

eith

erte

xt

or

XM

L (

usi

ng

aD

OM

par

ser)

It m

aygiv

e unex

pec

ted r

esult

s if

you p

arse

HT

ML

usi

ng D

OM

Web

Dat

a M

anag

emen

t an

d X

ML

L2

:W

eb P

rogra

mm

ing

15

Ho

w X

HT

ML

is

dif

fere

nt

from

HT

ML

?

elem

ent

and

att

rib

ute

nam

es m

ust

be

in l

ow

erca

se

elem

ents

mu

st b

epro

per

ly n

este

d (

wel

l-fo

rmed

)

inst

ead o

f <

p>

, yo

u w

rite

<p>

...<

/p>

inst

ead o

f <

br>

, yo

u w

rite

<b

r/>

mu

sth

ave

on

e ro

ot

elem

ent

all

attr

ibu

tes

mu

st h

ave

expli

cit

val

ues

, w

hic

h m

ust

be

in q

uo

tes

use

id i

nst

ead

of

na

me a

s an

id

enti

fier

spec

ial

char

acte

rs a

re a

lway

sch

arac

ter

enti

ties

(eg

, &

amp

;)

scri

pt

cod

e m

ust

be

con

tain

ed i

n a

CD

AT

Ase

ctio

n:

<scri

pt

type=

"type/javascri

pt"

>

//<

![C

DA

TA

[

...Ja

vaScri

pt

code

...

//]]

>

</s

cri

pt>

som

e n

esti

ng

res

tric

tio

ns

(eg

, no

nes

ted

<p

>..

.</p

>)

Web

Dat

a M

anag

emen

t an

d X

ML

L2

:W

eb P

rogra

mm

ing

16

div

an

dspan

elem

ents

div

: A

blo

ck (

log

ical

gro

up

ing

) o

f el

emen

ts

may

co

nta

in m

ult

iple

ele

men

ts

span

: a

gen

eric

in

line

elem

ent

mu

sto

nly

con

tain

sim

ple

tex

t

<span

cla

ss=

“phone”>

81

7-2

72

-36

29

</s

pan>

The

id a

ttri

bu

teg

ives

an

ele

men

t a

un

iqu

eid

enti

fyin

gn

ame

An

yX

HT

ML

ele

men

tm

ayh

ave

an i

d

Eac

h i

d m

ust

be

un

iqu

e w

ithin

th

e X

HT

ML

do

cum

ent

Must

star

tw

ith

ale

tter

;m

ay c

onta

in l

ette

rs,

nu

mb

ers,

-,

_, :,

an

d .

<div

id=

“x2

34

”>

...

</d

iv>

An

id

sel

ecto

r al

low

s y

ou

to

tar

get

an

ele

men

t b

y i

ts i

d v

alu

e

<a

hre

f=“in

dex.h

tml#

x2

34

”>

...<

/a>

Page 5: Dynamic Web Pages Current Situationlambda.uta.edu/cse5335/spring13/l2-4.pdf · L2:Web Programming 4 Current Situation For client-side programming, the choice isclear: JavaScript AdobeFlash

Web

Dat

a M

anag

emen

t an

d X

ML

L2

:W

eb P

rogra

mm

ing

17

En

forc

ing

XH

TM

L

Ho

wto

en

forc

e it

?<

htm

l xm

lns=

"htt

p:/

/ww

w.w

3.o

rg/1

999/x

htm

l">

<head>

<ti

tle>

Tit

le g

oes h

ere

</t

itle

>

</h

ead>

<body>

...

the b

ody

goes

here

</b

ody>

</h

tml>

A s

tric

ter

form

(en

forc

es c

hec

kin

g a

gai

nst

th

e X

HT

ML

DT

D):

<!D

OC

TYPE h

tml PU

BLIC

"-/

/W3C

//D

TD

XH

TM

L 1

.0Str

ict/

/EN

"

"htt

p:/

/ww

w.w

3.o

rg/T

R/x

htm

l1/D

TD

/xhtm

l1-s

tric

t.dtd

">

<head>

...

Web

Dat

a M

anag

emen

t an

d X

ML

L2

:W

eb P

rogra

mm

ing

18

Th

e P

rev

iou

sF

orm

in X

HT

ML

The

pre

vio

us

form

in

XH

TM

L:

<fo

rmnam

e=

"input"

acti

on=

"/cgi-

bin

/login

.php"

meth

od=

"GET">

<field

set>

<le

gend>

User

info

rmati

on:<

/legend>

<ul>

<li>

<la

bel>

Usern

am

e:

<in

put

type=

"text"

nam

e=

"usern

am

e"/

><

label>

</li>

<li>

<la

bel>

Passw

ord

:

<in

put

type=

"passw

ord

”nam

e=

"passw

ord

"/>

<la

bel>

</li>

</u

l>

<in

put

type=

"subm

it"

valu

e=

"Subm

it"/

>

</f

ield

set>

</f

orm

>

Web

Dat

a M

anag

emen

t an

d X

ML

L2

:W

eb P

rogra

mm

ing

19

Cas

cad

ing

Sty

le S

hee

ts (

CS

S)

Nee

d t

ose

par

ate

Fu

nct

ion

ali

ty:

do

ne

wit

h a

com

bin

atio

n o

f se

rver

- an

d c

lien

t-si

de

pro

gra

mm

ing

dev

eloped

by

web

appli

cati

on p

rogra

mm

ers

Co

nte

nt

(lay

out)

: sp

ecif

ied

wit

h H

TM

L/X

HT

ML

tag

s

des

igned

by

web

pag

e d

esig

ner

s

Sty

le(c

olo

r, f

onts

,etc

):sp

ecif

ied w

ith

CS

S

CS

S:

Ca

sca

din

g S

tyle

Sh

eets

allo

ws

dev

elo

per

sto

co

ntr

ol

the

style

of

mult

iple

ele

men

ts a

nd W

ebpag

es

The

CS

S s

yn

tax

is

mad

eup

of

thre

e p

arts

:sele

cto

r {

pro

pert

y:

valu

e;

…;

pro

pert

y:

valu

e;

}

Ex

amp

le:

p.c

ente

r{ t

ext-

align:

cente

r; c

olo

r:bla

ck;

font-

fam

ily:

ari

al; }

Use

d a

s:<

pcla

ss=

“cente

r”>

...<

/p>

Web

Dat

a M

anag

emen

t an

d X

ML

L2

:W

eb P

rogra

mm

ing

20

Wh

ere

to p

ut

CS

S?

Dec

lare

din

th

e <

hea

d>

... <

/hea

d>

<head>

<ti

tle>

My

Tit

le<

/tit

le>

<sty

lety

pe=

"text/

css">

h1

,h2

{colo

r:re

d;

}

p{

font-

siz

e:

sm

all;

font-

fam

ily:

sans-s

eri

f;}

ul{

list-

sty

le-t

ype:

square

;}

ulul{

list-

sty

le-t

ype:

cir

cle

;}

</s

tyle

>

</h

ead>

Em

bed

ded

as

an a

ttri

bu

testy

le=

“..

.”

<h1

sty

le=

"colo

r:blu

e;

marg

in-t

op:

10

px">

Intr

oducti

on<

/h1

>

Lin

ked

to

an

ex

tern

al.c

ssfi

le:

<head>

<ti

tle>

My

Tit

le<

/tit

le>

<link

rel=

"sty

lesheet"

hre

f="M

ySty

lesheet.

css"

type=

"text/

css"

/>

</h

ead>

Usi

ng

casc

adin

gto

res

olv

e st

yle

co

nfl

icts

Sty

leS

hee

t H

iera

rch

y

Page 6: Dynamic Web Pages Current Situationlambda.uta.edu/cse5335/spring13/l2-4.pdf · L2:Web Programming 4 Current Situation For client-side programming, the choice isclear: JavaScript AdobeFlash

Web

Dat

a M

anag

emen

t an

d X

ML

L2

:W

eb P

rogra

mm

ing

21

Co

ok

ies

Sm

all

bit

s o

f te

xt

sto

red

at

the

clie

nt

sid

e (o

n t

he

bro

wse

r)

Wh

en a

use

r co

nn

ects

to

a s

erv

er f

or

the

firs

t ti

me,

th

e se

rver

may

crea

te a

co

ok

ie,

wh

ich

wil

l b

e st

ore

d o

n t

he

clie

nt's

bro

wse

r

Th

e co

ok

ie i

s as

soci

ated

wit

h t

he

do

mai

n o

f th

is p

arti

cula

rse

rver

Co

okie

s ca

nbe

read

on

lyfr

om

the

do

mai

n t

hat

crea

ted

them

Co

okie

s ar

e p

art

of

the

HT

TP

hea

der

, so

set

tin

g a

co

ok

ie m

ust

be

pu

t in

HT

TP

bef

ore

any

ou

tpu

t is

sen

t to

th

e b

row

ser

Aft

er t

he

firs

t v

isit

to

a w

eb s

ite,

th

ebro

wse

r re

turn

s a

cop

y o

fth

e co

ok

ie t

o t

he

serv

er e

ach

tim

e it

co

nn

ects

Co

okie

s h

ave

anex

pir

atio

n d

ate

afte

r w

hic

h t

hey

are

del

eted

Aft

erth

eyex

pir

ed,

the

nex

t co

nnec

tio

n t

oth

ese

rver

is

lik

e th

e fi

rst

tim

e

Ex

amp

le:

Nam

e:F

PS

, D

om

ain

:yah

oo.c

om

, E

xp

ire:

07

/02

/20

13 0

1:0

0:0

0 P

M

Web

Dat

a M

anag

emen

t an

d X

ML

L2

:W

eb P

rogra

mm

ing

22

Ses

sio

n T

rack

ing

Mai

nta

ins

info

rmat

ion

ab

ou

t a

vis

ito

r as

sh

e n

avig

ates

th

rou

gh

ase

rver

sit

e

pre

serv

es c

erta

in d

ata

acro

ss s

ubse

qu

ent

acce

sses

mai

nta

ins

the

illu

sio

n o

f a

sess

ion

th

at s

pan

s m

ult

iple

pag

es

Kee

ps

trac

k o

f v

isit

ors

by

iss

uin

gth

em c

oo

kie

s w

ith

ran

do

mly

gen

erat

ed s

essi

on

IDs

Th

e se

rver

use

s th

ese

ssio

nID

co

ok

ie t

o r

emem

ber

the

vis

ito

r

Ses

sio

n d

ata

are

seri

aliz

ed a

nd

sto

red

at

the

serv

er a

fter

a v

isit

or

acce

ss f

inis

hes

Th

eyar

ere

crea

ted

and

load

ed o

n t

he

sub

seq

uen

tac

cess

Ifth

euse

r b

row

ser

do

esn

't ac

cep

t co

ok

ies,

it

auto

mat

ical

lyad

ds

the

sess

ion

ID

to

UR

Ls

and

to

the

form

ssu

bm

itte

d b

y t

he

use

r:F

or

exam

ple

:

<a

hre

f=“htt

p:/

/serv

er.

com

/index.h

tml”

>...<

a/>

gen

erat

es t

he

UR

L

htt

p:/

/ser

ver

.co

m/i

nd

ex.h

tml?

ID=

64

cc3

ab7

64

da6

98

64

ca3

87

4ab

32

76

Web

Dat

a M

anag

emen

t an

d X

ML

L2

:W

eb P

rogra

mm

ing

23

Jav

aScr

ipt

Fo

r cl

ien

t-si

de

pro

gra

mm

ing

th

e ch

oic

e is

cle

ar:

Ja

va

Scr

ipt

Itis

a s

crip

tin

g l

angu

age

(in

terp

rete

d)

Itis

usu

ally

em

bed

ded

dir

ectl

yin

to H

TM

L p

ages

Un

lik

e Ja

va,

it

is e

ven

t-b

ased

No m

ain p

rogra

m

HT

ML

ele

men

ts c

an b

e as

soci

ated

wit

h e

ven

ts(a

ctio

ns)

Lo

ok

s a

litt

lebit

lik

e C

but

it's

not

that

rel

ated

to J

ava

(alt

ho

ug

h i

t h

as O

O f

eatu

res

no

w)

unli

ke

C,

it's

no

tst

ron

gly

typed

var

x=

1;

More

in

form

atio

n a

t:

htt

p:/

/ww

w.w

3sc

ho

ols

.co

m/j

s/js

_in

tro

.asp

Web

Dat

a M

anag

emen

t an

d X

ML

L2

:W

eb P

rogra

mm

ing

24

Em

bed

din

g J

avaS

crip

t

To

emb

ed J

avaS

crip

t co

de

into

an

HT

ML

pag

e:<

scri

pt

type=

"text/

javascri

pt"

>

docum

ent.

wri

te("

<p>

Hello

Worl

d!<

/p>

");

</s

cri

pt>

Usi

ng

exte

rnal

Jav

aScr

ipt

cod

e:<

scri

pt

type=

"text/

javascri

pt"

src

="m

yScri

pt.

js">

</s

cri

pt>

In s

om

eac

tio

ns:

<in

put

type=

"butt

on"

onclick=

"copy()

;"/>

Yo

u m

ay e

mb

ed J

avaS

crip

t co

de

bef

ore

th

e H

TM

L b

od

y

… b

ut

this

is

bad

pro

gra

mm

ing

pra

ctic

e: u

se e

xte

rnal

co

de

The

Jav

aScr

ipt

cod

e ca

nch

ang

e th

e co

nte

nt

of

the

emb

edd

ing

H

TM

L p

age

inte

ract

ivel

y

Itse

es t

he

emb

eddin

gH

TM

L d

ocu

men

tas

a n

ode

tree

(H

TM

L D

OM

)

When

Jav

aScr

ipt

up

dat

es t

he

nod

e tr

ee,

the

bro

wse

rau

tom

atic

ally

red

raw

s o

nly

th

e p

arts

of

the

web

pag

eth

at c

orr

esp

on

d t

o t

he

up

dat

ed n

od

es

Th

is m

akes

th

e b

row

ser

look

lik

e a

reg

ula

r G

UI

Page 7: Dynamic Web Pages Current Situationlambda.uta.edu/cse5335/spring13/l2-4.pdf · L2:Web Programming 4 Current Situation For client-side programming, the choice isclear: JavaScript AdobeFlash

Web

Dat

a M

anag

emen

t an

d X

ML

L2

:W

eb P

rogra

mm

ing

25

Sy

nta

x

Itis

mo

stly

lik

e C

Arr

ays:

var

myC

ars

=["

Saab

","V

olv

o",

"BM

W"]

;

myC

ars

[0]

="O

pel"

;

for

(xin

myC

ars

)

docu

men

t.w

rite

(myC

ars

[x]

+"<

br

/>")

;

Ob

ject

s h

ave

pro

per

ties

an

d m

eth

od

s

Th

eyar

ea

sso

ciati

veli

sts:

uno

rder

ed c

oll

ecti

on

s o

fn

ame/

val

ue

pai

rs

pers

on

Obj=

new

Obje

ct(

);

pers

on

Obj.fi

rstn

am

e=

"Joh

n";

pers

on

Obj.la

stn

am

e=

"Doe";

pers

on

Obj.ag

e=

50

;

pers

on

Obj[

ph

on

e]

=“1

23

45

6”;

// s

ame

aspers

on

Ob

j.p

hon

eor

pers

on

Obj['

phon

e']

Met

ho

ds:

lik

ere

gula

r fu

nct

ion

s th

at h

ave

an i

mp

lici

t'this

'ob

ject

Str

ing

sar

e o

bje

cts

var

str

="H

ello

worl

d!"

;

docum

ent.

wri

te(s

tr.length

);

fun

cti

on

ch

an

geA

ge

(ag

e)

{th

is.a

ge

=ag

e;

};

pers

on

Ob

j.chan

geA

ge(4

5);

Web

Dat

a M

anag

emen

t an

d X

ML

L2

:W

eb P

rogra

mm

ing

26

Cla

ss C

onst

ruct

ors

Ifa

fun

ctio

n i

sca

lled

wit

h'n

ew',

itcr

eate

s an

ob

ject

functi

on

C(d

){

var

x=

d;

//p

riv

ate

var

iab

le

this

.y=

1;

// p

ub

lic

var

iab

le

this

.f=

ff;

//p

ub

lic

met

ho

d

functi

on

ff(z

){

//p

riv

ate

met

ho

d

retu

rnth

is.y

+z;

}}

var

myC

=new

C(3

);

var

z =

myC

.f(4

);

Alt

ern

ativ

e o

bje

ct c

on

stru

ctio

n:

var

car

={

make:

“H

onda”,m

odel:

“C

ivic

” }

;

An

on

ym

ou

s fu

nct

ion

s:var

f=

functi

on(x

,y)

{re

turn

x+

y}

;

var

f=

new

Functi

on('

x','y

','r

etu

rnx+

y')

;

Web

Dat

a M

anag

emen

t an

d X

ML

L2

:W

eb P

rogra

mm

ing

27

Th

e Ja

vaS

crip

tE

xec

uti

on

En

vir

onm

ent

A w

eb b

row

ser

dis

pla

ys

on

e H

TM

L d

ocu

men

t o

n t

he

bro

wse

rsc

reen

The

Jav

aScr

ipt

ob

ject

Win

dow

rep

rese

nts

th

e w

ind

ow

th

at d

isp

lay

sth

e d

ocu

men

t

The

Jav

aScr

ipt

ob

ject

Docum

ent

rep

rese

nts

the

HT

ML

do

cum

ent

Th

e g

lob

al v

aria

ble

docum

ent

is e

qual

tow

indow

.docum

ent

Ev

ent-

dri

ven

pro

gra

mm

ing

: p

rov

ide

even

t h

and

ler

fun

ctio

ns

for

cert

ain

ev

ents

on

the

bro

wse

r

eg,

am

ou

se-c

lick

on a

fo

rm b

utt

on

Ty

pes

of

even

ts:

onch

ang

e, o

ncl

ick,

on

focu

s, o

nm

ou

seo

ver

, o

nlo

ad, …

Ex

amp

le:

<in

put

type=

”butt

on” o

nclick=

”m

yH

andle

r();

”>

Web

Dat

a M

anag

emen

t an

d X

ML

L2

:W

eb P

rogra

mm

ing

28

HT

ML

DO

M

The

HT

ML

Do

cum

ent

Ob

ject

Mo

del

(DO

M)

def

ines

a s

tan

dar

d

way

fo

r ac

cess

ing

an

d m

anip

ula

tin

g H

TM

L d

ocu

men

ts

itpre

sen

ts a

nH

TM

L d

ocu

men

tas

a t

ree-

stru

ctu

re(a

nod

etr

ee),

wit

hel

emen

ts,

attr

ibu

tes,

and

text

Sim

ilar

to

XM

L D

OM

Ty

pes

of

no

des

:

Ele

men

t n

odes

, A

ttri

bu

te n

odes

, T

ext

no

des

, ...

No

de

pro

per

ties

:

x.in

nerH

TM

L-

the

tex

tv

alue

of

the

elem

entx

(y

ou

can

rep

lace

it!)

x.n

odeN

am

e-

the

nam

eo

fx

(ta

g n

ame

or

attr

ibu

te n

ame)

x.n

odeV

alu

e -

th

e v

alu

e o

fx

(x m

ust

be

a te

xt

no

de

or

attr

ibu

te n

od

e)

x.p

are

ntN

ode

-th

ep

aren

t n

ode

ofx

x.c

hildN

od

es

- t

he

chil

d n

od

es o

fx

(an

arra

yo

f el

emen

tn

od

es)

x.a

ttri

bute

s -

th

e at

trib

ute

s no

des

ofx

(an

arr

ay o

f at

trib

ute

no

des

)

Page 8: Dynamic Web Pages Current Situationlambda.uta.edu/cse5335/spring13/l2-4.pdf · L2:Web Programming 4 Current Situation For client-side programming, the choice isclear: JavaScript AdobeFlash

Web

Dat

a M

anag

emen

t an

d X

ML

L2

:W

eb P

rogra

mm

ing

29

DO

M M

eth

od

s

docum

en

t: T

he

roo

t o

f th

e em

bed

din

gH

TM

L d

ocu

men

t

Met

hod

s to

lo

cate

an

ele

men

t an

yw

her

ein

th

e H

TM

L d

ocu

men

t:

x.g

etE

lem

entB

yId

('id

')

//re

turn

s a

no

de

x.g

etE

lem

ents

ByTagN

am

e('

tag')

//

ret

urn

s an

arr

ayo

f n

od

es

Sh

ort

cut:

x.t

ag

is

the

sam

eas

x.g

etE

lem

ents

ByTagN

am

e('

tag')

Ex

amp

le:

<fo

rm id=

”m

yC

heckbox”>

<in

put

type=

”checkbox” n

am

e=

”oneC

hoic

e” v

alu

e=

”1

”>

A

<in

put

type=

”checkbox” n

am

e=

”oneC

hoic

e” v

alu

e=

”2

”>

B

<in

put

type=

”checkbox” n

am

e=

”oneC

hoic

e” v

alu

e=

”3

”>

C

</f

orm

>

Jav

aScr

ipt

cod

e:var

checked

=0

;

var

d=

docum

ent.

getE

lem

entB

yId

(“m

yC

heckbox”).

oneC

hoic

e;

for

(in

ti=

0;

i<

d.length

;i+

+)

if(d

[i].

checked)

checked+

+;

Web

Dat

a M

anag

emen

t an

d X

ML

L2

:W

eb P

rogra

mm

ing

30

DO

M M

eth

od

s(c

on

t.)

To

nav

igat

e, s

tart

ing

fro

m a

no

de

x,

use

th

e m

eth

ods:

x.p

are

ntN

ode()

x.f

irstC

hild

()

x.n

extC

hild()

x.c

hildN

od

es()

x.a

ppendC

hild(n

ode)

x.r

em

oveC

hild

(node)

To

retr

iev

e an

att

rib

ute

val

ue,

use

th

e at

trib

ute

nam

e as

pro

per

tydocum

ent.

getE

lem

entB

yId

("b2

0")

.src

="a

.gif";

<im

gsrc

="b

.gif"

id=

"b2

0"/

>

Web

Dat

a M

anag

emen

t an

d X

ML

L2

:W

eb P

rogra

mm

ing

31

Dy

nam

ic D

ocu

men

ts

To

mo

ve

an e

lem

ent

on

the

scre

en:

mu

stse

t th

eC

SS

po

siti

on

pro

per

ty t

o a

bso

lute

or

rela

tive

<div

id=

”X

3” s

tyle

=”posit

ion:

rela

tive;

top:

0px;”

>

<im

gsrc

=”x.jpg”/>

</d

iv>

Jav

aScr

ipt

cod

e to

mo

ve

the

imag

e:

docum

ent.

getE

lem

entB

yId

(“X

3”).

sty

le.t

op

=“1

0px”;

An

imat

ion

: m

ov

e th

e el

emen

t co

nti

nu

ou

sly

Use

set

Tim

eou

t(“.

..co

de.

..”,

del

ay)

to c

ontr

ol

spee

d

To

chan

ge

sty

le p

roper

ties

:docum

ent.

getE

lem

entB

yId

(“X

3”).

sty

le.c

olo

r=

“blu

e”;

To

hid

e el

emen

ts:

docum

ent.

getE

lem

entB

yId

(“X

3”).

sty

le.v

isib

ilit

y=

“hid

den”;

To

chan

ge

the

con

ten

t o

f an

ele

men

t:docum

ent.

getE

lem

entB

yId

(“X

3”).

innerH

TM

L=

“<

img

…/>

”;

Web

Dat

a M

anag

emen

t an

d X

ML

L2

:W

eb P

rogra

mm

ing

32

Inte

ract

ive

Act

ions

at t

he

Cli

ent

Sid

e

This

fo

rm d

oes

no

t p

erfo

rm a

ny

act

ion

at

the

serv

er s

ide

Bu

t, w

hen

th

e b

utt

on

is

pu

shed

, it

ch

anges

the

con

ten

t o

fyo

ur

web

pag

e<

form

>

You

rn

am

e:

<in

put

id=

"in

pu

t">

<in

put

typ

e=

butt

on

onclick=

"cop

y()

;"valu

e=

"pro

ceed

">

Gre

eti

ng

: <

inp

ut

id=

"dis

pla

y">

</f

orm

>

<div

id=

"ou

tpu

t">

&n

bsp;<

/div

>

The

cod

e o

f co

py

():

<scri

pt

typ

e=

"text/

javascri

pt"

>

fun

cti

on

cop

y()

{

var

text

=d

ocu

men

t.g

etE

lem

en

tById

("in

pu

t").

valu

e;

docu

men

t.g

etE

lem

en

tById

("dis

pla

y")

.valu

e=

"Hello

"+te

xt+

"!";

outp

ut

=docum

en

t.g

etE

lem

en

tById

("outp

ut"

);

outp

ut.

rep

laceC

hild

(docu

men

t.cre

ate

TextN

od

e("

Hello

"+te

xt+

"!")

,

ou

tpu

t.firs

tCh

ild);

} </s

cri

pt>

Page 9: Dynamic Web Pages Current Situationlambda.uta.edu/cse5335/spring13/l2-4.pdf · L2:Web Programming 4 Current Situation For client-side programming, the choice isclear: JavaScript AdobeFlash

Web

Dat

a M

anag

emen

t an

d X

ML

L2

:W

eb P

rogra

mm

ing

33

Asy

nch

ron

ou

sS

erv

er R

equ

ests

When

th

e u

ser

pu

shes

th

e S

ub

mit

bu

tto

n o

n a

form

:<

form

acti

on=

"scri

pt.

php">

the

curr

ent

pag

e is

era

sed

an

d r

epla

ced

wit

h a

new

pag

e, w

hic

h i

sth

e o

utp

ut

of

the

scri

pt.

ph

p

ver

yex

pen

siv

efo

rth

ese

rver

it m

ayhav

e to

res

end p

arts

of

the

eras

ed w

eb p

age

agai

n

ver

yan

no

yin

gfo

r th

e cl

ien

t

she

has

to

wai

t fo

rth

e new

web

pag

e, l

ookin

g a

imle

ssly

on a

n e

mpty

pag

e

Ch

eati

ng

: u

se h

idd

en f

ram

es

Cli

ent

get

s a

vec

tor

of

fram

es f

rom

the

serv

er

On

ly o

ne

fram

e is

dis

pla

yed

eac

h t

ime

Giv

es t

he

imp

ress

ion

of

inte

ract

ion

Ass

um

es t

hat

you

do

n't

nee

d s

erv

er d

ata

whil

en

avig

atin

g t

hro

ug

h f

ram

es

Gen

eral

so

luti

on

: D

yn

amic

HT

ML

(D

HT

ML

)

Usi

ng

asy

nch

ron

ous

serv

er r

equ

ests

Intr

od

uce

d b

y M

icro

soft

(AJA

X:

Asy

nch

ron

ous

JavaS

crip

t an

d X

ML

)W

eb D

ata

Man

agem

ent

and

XM

LL

2:

Web

Pro

gra

mm

ing

34

AJA

X

Use

s as

yn

chro

no

us

dat

a tr

ansf

er b

etw

een

a b

row

ser

and

a w

eb

serv

er,

allo

win

g w

eb p

ages

to

req

ues

t d

ata

fro

m t

he

serv

er

inst

ead

of

wh

ole

pag

es

When

the

clie

nt

sen

ds

a G

ET

/PO

ST

req

ues

t, i

td

oes

n't

wai

tfo

ra

resp

onse

it s

ets

a han

dle

r to

be

evoked

when

it

rece

ives

the

resp

onse

fro

m s

erver

the

serv

er r

esp

on

se i

s ty

pic

ally

XM

L o

rX

HT

ML

dat

a

when

the

clie

nt

han

dle

s th

e re

spon

se,

it u

ses

this

dat

a to

updat

e th

e w

eb p

age

usi

ng t

he

XM

L o

r th

e H

TM

L D

OM

This

is

acco

mp

lish

ed w

ith

th

e X

ML

Htt

pR

equ

est

ob

ject

call

ed A

ctiv

eXO

bje

cton

old

IE

(b

efo

re I

E7)

Yo

u c

an g

et m

ore

info

rmat

ion

at:

htt

p:/

/ww

w.w

3sc

ho

ols

.co

m/a

jax

/def

ault

.asp

Web

Dat

a M

anag

emen

t an

d X

ML

L2

:W

eb P

rogra

mm

ing

35

Ex

amp

le

On

cli

ck,

we

wan

t to

ev

ok

eserv

era

cti

on.p

hp

at

the

serv

er s

ide

asy

nch

ron

ou

sly

:<

form

>

Com

ment:

<in

put

nam

e=

"com

ment"

>

<in

put

type=

butt

on

onclick=

"sendR

equest(

);"

valu

e=

"pro

cess

XM

L">

</f

orm

>

<div

id=

"outp

ut"

>&

nbsp;<

/div

>

No

tice

th

at t

her

e is

no

Su

bm

it b

utt

on

We

wan

t al

soth

ere

sult

to

ap

pea

r in

th

e<

div

id=

“ou

tput”

>

sect

ion

inst

ead

of

red

raw

ing

th

e en

tire

pag

e

Web

Dat

a M

anag

emen

t an

d X

ML

L2

:W

eb P

rogra

mm

ing

36

Th

e X

ML

Htt

pR

equ

est

Ob

ject

Nee

d t

ocr

eate

an

XM

LH

ttp

Req

ues

t an

d b

ind

its

on

read

ym

eth

od

:<

scri

pt

type=

"text/

javascri

pt"

>

var

request

=new

XM

LH

ttpR

equest(

);

functi

ondisplayResult

(){

if(r

equest.

readySta

te=

=4

){

var

xm

lDoc

=re

quest.

responseX

ML.d

ocum

entE

lem

ent;

var

text

=xm

lDoc.g

etE

lem

ents

ByTagN

am

e("

deptn

am

e")

[0]

.childN

odes[0

].nodeV

alu

e;

docum

ent.

getE

lem

entB

yId

("outp

ut"

).in

nerH

TM

L=

text;

}}

functi

onsendRequest

(){

request.

onre

adysta

techange

=dis

pla

yR

esult

;

request.

open("

GET",

"serv

era

cti

on.p

hp?file

=cs.x

ml"

,tru

e);

request.

send(n

ull);

}

</s

cri

pt>

requ

est.

resp

onseText

retu

rns

the

tex

t co

nte

nt

of

the

resp

on

se

Page 10: Dynamic Web Pages Current Situationlambda.uta.edu/cse5335/spring13/l2-4.pdf · L2:Web Programming 4 Current Situation For client-side programming, the choice isclear: JavaScript AdobeFlash

Web

Dat

a M

anag

emen

t an

d X

ML

L2

:W

eb P

rogra

mm

ing

37

Cro

ss-D

om

ain

Res

tric

tio

n

The

do

mai

n n

ame

of

the

serv

er w

ho

pro

vid

ed t

he

web

pag

e w

ith

th

e X

ML

Htt

pR

equ

est

req

ues

t m

ust

be

exac

tly

the

sam

e as

th

ed

om

ain

nam

e o

f th

e X

ML

Htt

pR

equ

est

UR

L

Wh

y?

cro

ss-s

ite

scri

pti

ng

fla

ws

(XS

S)

are

no

w t

he

mo

st c

om

mo

n

rep

ort

edse

curi

ty v

uln

erab

ilit

y (

surp

asse

db

uff

er o

ver

flo

ws)

inje

ctin

g m

alic

iou

s sc

rip

ts i

nto

web

pag

es,

an a

ttac

ker

can

gai

n a

cces

s p

riv

ileg

es t

o s

ensi

tive

pag

e co

nte

nt

on

th

e b

row

ser

So

luti

on

: u

se a

pro

xy

scr

ipt

pro

xy.p

hp

on

yo

ur

serv

er<

?p

hp

header(

"Con

tent-

typ

e:

text/

xm

l\n

\n")

;

$u

rl=

$_S

ER

VE

R['

QU

ER

Y_S

TR

ING

'];

if(

str

pos($

url

,"h

ttp:/

/ap

i.lo

cal.yah

oo.c

om

/")

==

=0

)

{

$ch

=cu

rl_in

it($

url

);

cu

rl_exec($

ch

); }

?>

UR

L:

/cg

i-bin

/php

/pro

xy.p

hp?M

apsS

erv

ice/

V1/g

eoco

de?

appid

=X

YZ

123

456

&lo

cati

on

=A

rlin

gto

n

More

in

form

atio

n:

htt

p:/

/dev

eloper

.yah

oo.c

om

/jav

ascr

ipt/

how

to-p

roxy

.htm

l

Mu

stal

soen

forc

e se

curi

ty:

•o

nly

fo

ra

cert

ain

do

mai

n•

req

uir

e lo

gin

Web

Dat

a M

anag

emen

t an

d X

ML

L2

:W

eb P

rogra

mm

ing

38

Ex

amp

le

Usi

ng

a d

icti

on

ary

ser

vic

e p

rov

ided

by

ao

naw

are.

com

htt

p:/

/ser

vic

es.a

on

awar

e.co

m/D

ictS

ervic

e/D

ictS

ervic

e.as

mx/D

efin

eInD

ict?

dic

tId=

wn

&w

ord

=co

mp

ute

r

<W

ord

Definit

ion>

<W

ord

>com

pute

r</W

ord

>

<D

efinit

ions>

<D

efinit

ion>

<W

ord

>com

pute

r</W

ord

>

<D

icti

onary

><

Id>

wn<

/Id>

<N

am

e>

Word

Net

(r)

2.0

</N

am

e>

</D

icti

onary

>

<W

ord

Definit

ion>

com

pute

r

n1

:a m

achin

efo

rperf

orm

ing

calc

ula

tions

auto

mati

cally

[syn:

{com

puti

ng

machin

e}

,{

com

puti

ng

devic

e}

,{

data

pro

cessor}

,{

ele

ctr

onic

com

pute

r},

{in

form

ati

on

pro

cessin

gsyste

m}

]

2:

an

expert

at

calc

ula

tion

(or

at

opera

ting

calc

ula

ting

machin

es)

[syn:

{calc

ula

tor}

,{

reckoner}

,{

figure

r},{

esti

mato

r}]

</W

ord

Definit

ion>

</D

efinit

ion>

</D

efinit

ions>

</W

ord

Definit

ion>

Web

Dat

a M

anag

emen

t an

d X

ML

L2

:W

eb P

rogra

mm

ing

39

Ex

amp

le (

con

t.)

The

htm

lfi

le:

<htm

l>

<head>

<ti

tle>

JavaScri

pt

Exam

ple

</t

itle

>

<scri

pt

type=

"text/

javascri

pt"

>

...

</s

cri

pt>

</h

ead>

<body>

<fo

rm>

Word

or

phra

se:

<in

put

type=

"text"

id=

"form

-input"

>

<in

put

type=

"butt

on"

onclick=

"sendR

equest(

);"

valu

e=

"expla

in">

</f

orm

>

<div

id=

"outp

ut"

>&

nbsp;<

/div

>

</b

ody>

</h

tml>

Web

Dat

a M

anag

emen

t an

d X

ML

L2

:W

eb P

rogra

mm

ing

40

Ex

amp

le (

con

t.)

The

Jav

aScr

ipt

cod

e:<

scri

pt

typ

e=

"text/

javascri

pt"

>

var

req

uest

=n

ew

XM

LH

ttp

Requ

est(

);

fun

cti

on

dis

pla

yR

esu

lt()

{

if(r

equ

est.

read

ySta

te=

=4

){

var

xm

lDoc =

req

uest.

resp

on

seX

ML.d

ocu

men

tEle

men

t;

var

text

=xm

lDoc.g

etE

lem

en

tsB

yTag

Nam

e("

Word

Defi

nit

ion

")[0

].ch

ildN

od

es[0

].n

od

eV

alu

e;

docu

ment.

getE

lem

en

tById

("ou

tpu

t").

inn

erH

TM

L =

text;

} }

fun

cti

on

send

Req

uest

(){

nets

cap

e.s

ecu

rity

.Pri

vileg

eM

an

ag

er.

en

ab

lePri

vilege("

Un

ivers

alB

row

serR

ead

");

req

uest.

onre

adysta

tech

an

ge

=d

ispla

yR

esu

lt;

var

q=

docum

ent.

getE

lem

en

tById

("fo

rm-i

np

ut"

).valu

e;

req

uest.

open("

GET",

"htt

p:/

/serv

ices.a

on

aw

are

.com

/Dic

tServ

ice/D

ictS

erv

ice.a

sm

x/"

+"D

efi

neIn

Dic

t?dic

tId

=w

n&

word

="+

q,t

rue);

req

uest.

wit

hC

red

en

tials

="t

rue";

req

uest.

send

(nu

ll);

}

</s

cri

pt>

Page 11: Dynamic Web Pages Current Situationlambda.uta.edu/cse5335/spring13/l2-4.pdf · L2:Web Programming 4 Current Situation For client-side programming, the choice isclear: JavaScript AdobeFlash

Web

Dat

a M

anag

emen

t an

d X

ML

L2

:W

eb P

rogra

mm

ing

41

JSO

N:

an A

lter

nat

ive

to X

ML

JSO

N (

Jav

aScr

ipt

Obje

ctN

ota

tio

n)

is a

lig

htw

eig

ht

com

pu

ter

dat

a in

terc

han

ge

form

at

Itis

use

d m

ost

ly i

n J

avaS

crip

t to

get

dat

a fr

om

a w

eb s

erv

ice

to

the

web

bro

wse

r

Itis

a t

ext-

bas

ed,

hu

man

-rea

dab

le f

orm

at f

or

rep

rese

nti

ng

sim

ple

dat

a st

ruct

ure

s an

das

soci

ativ

ear

ray

s (J

avaS

crip

t o

bje

cts)

{"f

irst

Nam

e":

"John",

"las

tNam

e":

"Sm

ith",

"add

ress

": {

"str

eetA

ddre

ss":

"21

2nd S

tree

t",

"cit

y":

"N

ew Y

ork

", "

stat

e":

"NY

", "

post

alC

od

e":

10021

},

"phoneN

um

ber

s":

[

{"t

ype"

: "h

om

e",

"nu

mber

": "

21

2555-1

234"

},

{"t

ype"

: "f

ax",

"nu

mber

": "

64

6555-4

567"

} ]

}

Use

JSO

N.p

ars

e(t

ext)

to p

arse

th

e JS

ON

tex

t

don

'tuse

eval

The

par

sed

dat

a fi

eld

s ar

e ac

cess

ible

usi

ng

Jav

aScr

ipt

syn

tax

:p.f

irstN

am

e,p.p

honeN

um

bers

[0]

Web

Dat

a M

anag

emen

t an

d X

ML

L2

:W

eb P

rogra

mm

ing

42

Ser

ver

-sid

e P

rog

ram

min

g

Th

is i

s th

e h

eav

y-d

uty

web

pro

gra

mm

ing

Typ

ical

lyuse

s dat

abas

e co

nn

ecti

vit

y t

o

ver

ify

the

clie

nt

store

the

clie

nt's

stat

e an

d c

urr

ent

sess

ion d

ata

store

sit

e dat

a (p

roduct

s, t

ransa

ctio

ns,

etc

)

Pro

vid

es s

erv

ices

to

cli

ents

th

rou

gh c

om

ple

x a

ppli

cati

on

pro

gra

ms

May

use

web

ser

vic

es o

ffer

ed b

y a

th

ird p

arty

An

y p

rog

ram

min

g l

ang

uag

e ca

n b

e u

sed

C a

nd P

erl

scri

pts

in

CG

I u

sed

to

be

the

mo

st p

op

ula

r ch

oic

es

PH

P s

crip

ts a

re t

he

mo

st p

op

ula

r ch

oic

efo

r fa

st d

evel

op

men

t

AS

P s

crip

tsfr

om

.NE

Tar

e al

so p

opula

r but

they

are

par

ticu

lar

to I

IS

Fo

r h

igh

-per

form

ance

, w

eb d

evel

op

ers

use

Jav

a S

erv

lets

or

the

more

conven

ien

t Ja

vaS

erver

Pag

es (

JSP

) an

d J

avaS

erver

Fac

es (

JSF

),w

hic

h a

re t

ransl

ated

to s

ervle

ts

for

IIS

, th

eyuse

C#

Web

Dat

a M

anag

emen

t an

d X

ML

L2

:W

eb P

rogra

mm

ing

43

PH

P

Sta

nd

s fo

r "P

HP

: H

yp

erte

xt

Pre

pro

cess

or"

use

d t

o b

eP

erso

nal

Ho

me

Pag

e

A w

idel

y-u

sed

Op

enS

ou

rce

gen

eral

-pu

rpo

se s

crip

tin

g l

ang

uag

e

Esp

ecia

lly

su

ited

fo

r W

eb d

evel

op

men

t

Most

lyu

sed

at

the

serv

er s

ide

Can

be

emb

edded

in

to H

TM

L

Fac

ilit

ates

rap

id p

roto

typin

g

Eas

y t

ole

arn

by a

no

vic

e

Po

wer

ful

eno

ug

h f

or

a p

rofe

ssio

nal

web

ap

pli

cati

on d

evel

op

er

No

t a

go

od

ch

oic

e fo

r h

igh

-lo

adw

eb s

erv

ers

Eac

h P

HP

scri

pt

mu

st b

e in

terp

rete

dan

d e

val

uat

ed i

n a

new

thre

ad

More

in

form

atio

n a

nd

man

ual

s at

htt

p:/

/ww

w.p

hp

.net

/

htt

p:/

/ww

w.w

3sc

ho

ols

.co

m/p

hp

/def

ault

.asp

Web

Dat

a M

anag

emen

t an

d X

ML

L2

:W

eb P

rogra

mm

ing

44

Run

nin

g P

HP

A .

ph

p f

ile

is h

and

led

by

a w

ebse

rver

lik

e an

y .

htm

l fi

le

Itca

nac

tual

ly b

e p

lain

HT

ML

co

de

Itis

usu

ally

PH

Pco

de

that

gen

erat

es H

TM

L w

ith

em

bed

ded

JavaS

crip

tco

de

Imp

ort

ant:

The

PH

Pco

de

runs

on t

he

web

ser

ver

The

JavaS

crip

t co

de

runs

on t

he

web

bro

wse

r

<htm

l><

head>

<ti

tle>

My W

eb

Page<

/tit

le>

<scri

pt

type=

"text/

javascri

pt"

>

functi

on

copy

() {

docum

ent.

getE

lem

entB

yId

("out"

).in

nerH

TM

L =

'te

st'

;

} </s

cri

pt>

</h

ead>

<body>

<?php

pri

nt

"<fo

rm>

<in

put

type=

butt

on o

nclick=

'copy()

;' v

alu

e=

'click'/>

</f

orm

><

div

id=

'out'

>&

nbsp;<

/div

>\n

";

?>

</b

ody>

</h

tml>

Page 12: Dynamic Web Pages Current Situationlambda.uta.edu/cse5335/spring13/l2-4.pdf · L2:Web Programming 4 Current Situation For client-side programming, the choice isclear: JavaScript AdobeFlash

Web

Dat

a M

anag

emen

t an

d X

ML

L2

:W

eb P

rogra

mm

ing

45

PH

P S

yn

tax &

Op

erat

ions

Var

iab

le:

$x

Th

ere

isn

o w

ayto

dec

lare

a t

yp

e fo

ra

var

iab

le

Var

iab

les

hav

elo

cal

sco

pe

You m

aydef

ine

a var

iable

as

glo

bal

or

stat

ic:

glo

bal$

x;

An

un

bo

un

d v

aria

ble

has

a N

ull

val

ue

test

: Is

Set(

$x)

Tw

o k

ind

s o

f st

rin

gs:

sin

gle

-quo

test

rin

gs:

ev

eryth

ing

is

tak

en l

iter

ally

, n

o e

scap

ese

qu

ence

s:\n

dou

ble

-qu

ote

str

ing

s:su

bst

itute

emb

edded

var

iab

les

wit

h t

hei

r v

alu

es

(in

terp

ola

tio

n)

eg,

if$

x=

2th

en“valu

eis

$x”

is

the

sam

eas

'valu

eis

2'

Str

ing

co

nca

ten

atio

n:

“xyz”.”

12

3” i

s“xyz1

23

Web

Dat

a M

anag

emen

t an

d X

ML

L2

:W

eb P

rogra

mm

ing

46

Arr

ays

Thre

e k

ind

of

arra

ys:

Nu

mer

icar

ray

-A

n a

rray

wit

ha

num

eric

ind

ex

Ass

oci

ativ

e ar

ray -

An

arr

ay w

her

e ea

ch I

Dkey

is

asso

ciat

ed w

ith

a v

alu

e

Mult

idim

ensi

on

al a

rray

-A

n a

rray

co

nta

inin

g o

ne

or

more

arr

ays

$ca

rs=

arr

ay("

Saa

b",

"Vo

lvo

","B

MW

","T

oy

ota

");

Sam

e as

:

arra

y(

[0]=

>"S

aab

", [

1]=

>"V

olv

o",

[2

]=>

"BM

W",

[3

]=>

"To

yo

ta"

)

$ca

rs[1

]=

"H

ond

a";

$ca

rs[]

= "

VW

";

$ag

es =

arr

ay("

Pet

er"=

>3

2,

"Qu

agm

ire"

=>

30

, "J

oe"

=>

34);

$ag

es['

Joe'

]+

=1;

$m

= a

rray

(arr

ay(1

,2,3

),ar

ray

(),a

rray

(4,5

));

$m

[0][

2]

is

equ

al t

o 3

Web

Dat

a M

anag

emen

t an

d X

ML

L2

:W

eb P

rogra

mm

ing

47

Inte

ract

ing w

ith

a C

lien

t

The

HT

ML

co

de

at t

he

clie

nt

sid

e:<

form

acti

on=

"acti

on.p

hp"

meth

od=

"GET">

<p>

Your

nam

e:

<in

put

type=

"text"

nam

e=

"nam

e"

/><

/p>

<p>

Your

age:

<in

put

type=

"text"

nam

e=

"age"

/><

/p>

<p>

<in

put

type=

"subm

it"

/><

/p>

</f

orm

>

The

PH

Pfi

leacti

on

.ph

p a

t th

e se

rver

:<

htm

l><

body>

Hi <

?php

echo $

_G

ET['

nam

e']

;?>

.

You a

re <

?php

echo $

_G

ET['

age']

;?>

years

old

.

</b

ody>

</h

tml>

Web

Dat

a M

anag

emen

t an

d X

ML

L2

:W

eb P

rogra

mm

ing

48

HT

TP

Auth

enti

cati

on

wit

h P

HP

Use

th

e h

ead

er()

fu

nct

ion

to

sen

d a

n "

Au

then

tica

tio

n R

equ

ired

" m

essa

ge

toth

ecl

ien

t b

row

ser,

cau

sin

g i

tto

po

p u

p a

use

rnam

e/p

assw

ord

in

pu

t w

ind

ow

On

ce t

he

use

r h

asfi

lled

in

a u

sern

ame

and

a p

assw

ord

, th

e U

RL

con

tain

ing

th

e P

HP

scr

ipt

wil

l b

e ca

lled

agai

n w

ith

th

e p

red

efin

ed

var

iab

les

PH

P_

AU

TH

_U

SE

R a

nd

PH

P_

AU

TH

_P

Wse

t to

the

use

r n

ame

and

pas

swo

rd<

?php

if(

!isset(

$_SER

VER

['PH

P_A

UTH

_U

SER

'])

||!i

sset(

$_SER

VER

['PH

P_A

UTH

_PW

'])

){

header(

'WW

W-A

uth

enti

cate

:B

asic

realm

="M

em

ber

Are

a"'

);

header(

"HTTP/1

.04

01

Unauth

ori

zed")

;

echo

"You

must

ente

rin

a u

sern

am

eand

passw

ord

com

bin

ati

on!"

;

exit

;

} //validate

user

$_SER

VER

['PH

P_A

UTH

_U

SER

']

?>

Page 13: Dynamic Web Pages Current Situationlambda.uta.edu/cse5335/spring13/l2-4.pdf · L2:Web Programming 4 Current Situation For client-side programming, the choice isclear: JavaScript AdobeFlash

Web

Dat

a M

anag

emen

t an

d X

ML

L2

:W

eb P

rogra

mm

ing

49

Au

then

tica

tio

n u

sin

g M

yS

QL

Nee

d t

oco

nn

ect

to M

yS

QL

dat

abas

e fi

rst.

Fil

e co

nnec

t.p

hp

:<

?p

hp

inclu

de('

db

_lo

gin

.ph

p')

;

$con

necti

on

=m

ysq

l_con

nect(

$d

b_h

ost,

$d

b_u

sern

am

e,$

db_p

assw

ord

);

if(!

$con

necti

on

)

die

("C

ou

ldnot

conn

ect

toth

ed

ata

base:

<b

r/>

".m

ysq

l_err

or(

));

$d

b_sele

ct

=m

ysq

l_sele

ct_

db($

db

_d

ata

base);

if(!

$d

b_sele

ct)

die

("C

ou

ldnot

sele

ct

toth

ed

ata

base:

<br/

>".

mysql_

err

or(

));

?>

The

file

db

_lo

gin

.ph

p d

efin

es t

he

$d

b_

...

var

iab

les

<?php

$db_host=

'localh

ost'

;

$db_data

base=

'users

';

$db_usern

am

e=

'som

eM

ySQ

Luser'

;

$db_passw

ord

='x

xxx';

?>

Web

Dat

a M

anag

emen

t an

d X

ML

L2

:W

eb P

rogra

mm

ing

50

Th

e U

ser

Dat

abas

e

The

tab

lem

em

bers

in

th

e d

atab

ase

use

rs:

cre

ate

table

mem

bers

(

sid

char(

10)

pri

mary

key n

ot

null,

nam

evarc

har(

30)

not

null,

passw

ord

varc

har(

32)

not

null,

em

ail

varc

har(

40)

);

The

use

r v

alid

atio

n c

od

e:$

result

=m

ysql_

query

("SELEC

T* F

RO

M m

em

bers

WH

ER

E n

am

e=

'".$

_SER

VER

['PH

P_A

UTH

_U

SER

']."

'

AN

Dpassw

ord

='"

.MD

5($

_SER

VER

['PH

P_A

UTH

_PW

']).

"'")

;

if(!

$re

sult

||!m

ysql_

fetc

h_ro

w($

result

)){

header(

'WW

W-A

uth

enti

cate

:B

asic

realm

="M

em

ber

Are

a"'

);

header(

"HTTP/1

.04

01

Unauth

ori

zed")

;

echo

"Your

usern

am

eand

passw

ord

com

bin

ati

on

was

incorr

ect!

";

exit

;

}

Web

Dat

a M

anag

emen

t an

d X

ML

L2

:W

eb P

rogra

mm

ing

51

SQ

LIn

ject

ion

That

was

av

ery

un

safe

PH

P s

crip

t!

Yo

u s

ho

uld

nev

erfo

rm a

n S

QL

qu

ery

by

con

cate

nat

ing

in

put

stri

ng

s

Su

pp

ose

th

at y

ou

hav

e in

PH

P:

mysql_

query

("SELEC

T* F

RO

Mm

em

bers

WH

ER

E n

am

e=

'".$

_SER

VER

['user'

]."'

)

Wh

at i

f w

e p

ass

the

use

r:"x

xx';

dro

pta

ble

*;

sele

ct

* f

rom

mem

bers

where

nam

e=

'xxx”

The

qu

ery

bec

om

es:

SE

LE

CT

*FR

OM

mem

bers

WH

ER

En

am

e=

'xxx'; d

rop

tab

le*;

sele

ct

*fr

om

mem

bers

wh

ere

nam

e=

'xxx'

So

luti

on

s:

Use

par

amet

rize

d(p

repar

ed)

quer

ies

in P

HP

Ch

eck

th

euse

r n

ame

for

spec

ial

sym

bo

ls

don't

rely

on

cli

ent-

side

chec

kin

g

Rea

d h

ttp

://w

ww

.ib

m.c

om

/dev

elo

per

wo

rks/

op

enso

urc

e/li

bra

ry/o

s-p

hp

-sec

ure

-ap

ps/

ind

ex.h

tml

Web

Dat

a M

anag

emen

t an

d X

ML

L2

:W

eb P

rogra

mm

ing

52

Ap

pli

cati

on

: C

han

ge

Pas

swo

rd

HT

ML

at

the

clie

nt:

<fo

rmacti

on=

"upd

ate

.ph

p"

meth

od

="P

OS

T">

New

passw

ord

: <

inp

ut

typ

e=

"passw

ord

"nam

e=

"passw

ord

"siz

e=

20

/><

br/

>

<in

put

typ

e=

"su

bm

it"

valu

e=

"Ch

an

ge"

/>

</f

orm

>

PH

P a

t th

e se

rver

, fi

le u

pdat

e.p

hp

:<

?p

hp

req

uir

e_on

ce('

log

in.p

hp

');

$n

am

e=

$_S

ER

VE

R['

PH

P_A

UTH

_U

SE

R']

;

if(i

sset(

$_PO

ST['

passw

ord

'])

&&

str

len($

_PO

ST['

passw

ord

'])

>4

)

mysq

l_q

uery

("U

PD

ATE

mem

bers

SE

Tpassw

ord

='"

.M

D5

($_PO

ST['

passw

ord

'])

."'

WH

ER

En

am

e=

'".$n

am

e."'

")

or

die

('C

ann

ot

ch

an

ge

the

passw

ord

');

pri

nt

'Success!'

;

?>

Page 14: Dynamic Web Pages Current Situationlambda.uta.edu/cse5335/spring13/l2-4.pdf · L2:Web Programming 4 Current Situation For client-side programming, the choice isclear: JavaScript AdobeFlash

Web

Dat

a M

anag

emen

t an

d X

ML

L2

:W

eb P

rogra

mm

ing

53

App

lica

tio

n:

Su

bm

itti

ng

aF

ile

HT

ML

at

the

clie

nt:

<fo

rmen

cty

pe=

"mult

ipart

/form

-data

"acti

on

="h

and

in.p

hp

"m

eth

od

="P

OS

T">

<in

put

typ

e=

"hid

den

"n

am

e=

"MA

X_FIL

E_S

IZE"

valu

e=

"30

00

00

0"

/>

Su

bm

it t

his

file:

<in

pu

t n

am

e=

"userf

ile"

typ

e=

"file"

/><

br/

>

<in

put

typ

e=

"su

bm

it"

valu

e=

"Sen

dFile"

/>

</f

orm

>

PH

P a

t th

e se

rver

, fi

le h

and

in.p

hp:

<?p

hp

$fi

le=

$_FIL

ES

['u

serf

ile']

['n

am

e']

;

move_u

plo

ad

ed_fi

le($

_FIL

ES

['u

serf

ile']

['tm

p_n

am

e']

,"som

ed

ir/"

.$

file

);

?>

Web

Dat

a M

anag

emen

t an

d X

ML

L2

:W

eb P

rogra

mm

ing

54

Coo

kie

s an

dS

essi

on

s

Yo

u c

an s

et c

oo

kie

s u

sin

g t

he

setc

ook

ie()

fu

nct

ion

setc

ookie

("M

yC

ookie

",“som

ein

fo”,ti

me()

+3

60

0);

/*

expir

es in

1 h

ou

r*/

Can

be

acce

ssed

on

th

e n

ext

pag

e lo

ad u

sin

g $

_C

OO

KIE

echo $

_C

OO

KIE

["M

yC

ookie

"];

To

init

iali

ze a

ses

sio

n,

use

ses

sio

n_

star

t()

Itm

ust

ap

pea

r b

efo

re t

he

<h

tml>

tag

To

acce

ss/c

han

ge

a se

ssio

n v

aria

ble

, u

se $

_S

ES

SIO

N<

?php

sessio

n_sta

rt()

;

if (

!isset(

$_SESSIO

N['

count'

]))

$_SESSIO

N['

count'

]=

0;

$_SESSIO

N['

coun

t']+

+;

pri

nt

'you

have v

isit

ed ' .

$_SESSIO

N['

count'

] .

' ti

mes';

?>

Yo

u c

an d

estr

oy

th

e se

ssio

n b

y c

alli

ng

ses

sio

n_

des

tro

y()

Web

Dat

a M

anag

emen

t an

d X

ML

L2

:W

eb P

rogra

mm

ing

55

Wo

rkin

g w

ith

XM

L

DO

M:

has

all

met

hod

s u

sed

in

Jav

aScr

ipt

DO

M, p

lus

XP

ath

eval

uat

ion

$doc

=new

DO

MD

ocum

ent(

);

$doc->

load('

som

eU

RL.c

om

');

$xpath

=new

DO

MX

Path

($doc);

$nodes

= $

xpath

->evalu

ate

("//

@pri

ce")

;

fore

ach

($nodes

as

$n)

pri

nt

"{$

n->

nodeV

alu

e}

\n";

Sim

ple

XM

L:

To

acc

ess

all

chil

dre

nofx

wit

h t

agA

:x->

A

To

acc

ess

the

val

ue

of

an a

ttri

bu

teA

of

an e

lem

entx

:x['

A']

$xm

lstr

=file

_get_

conte

nts

('som

eU

RL.c

om

');

$xm

l=

new

Sim

ple

XM

LEle

ment(

$xm

lstr

);

fore

ach

($xm

l->

BookLis

t->

BookD

ata

as

$b)

fore

ach

($b->

Pri

ces->

Pri

ce

as

$p)

if($

p['

sto

re_id

']=

="a

mazon")

pri

nt

$b['

isbn']

.'

'.$

b->

Tit

le[0

].'

' .$

p['

pri

ce']

."\

n";