CP3024 Lecture 5 State Maintenance, Cascading Style Sheets and Dynamic HTML

Typical Web-based Purchase  Number of steps –View X –Add X to shopping cart –ViewY –Add Y to shopping cart –Purchase goods  Relies on server remembering prior purchases

Recording State  HTTP is stateless  Need mechanism to impose state on top of HTTP  Session recording –Cookies –URL rewriting

Sessions  Sessions are a group of interactions between a client and the server  Typically begun via an initial request  May terminate due to server action, client action or timeout (client inaction)  Every session will have a unique id

State Maintenance  For each session the server application will maintain state information  Each request from client will be accompanied by session id  Applications can retrieve the state of transaction for that session  Session id indicated via cookie or URL

Cookies  Introduced by Netscape  Small files sent by server and stored by the client (<4KB)  On revisiting a page or site the client presents the cookie to the server  Maybe short term or long lasting  Sometimes considered insecure  Can be seen as an invasion of privacy

URL Rewriting  Can be used where cookies have been forbidden  Session id is appended to URLs in the page returned to the browser  E.g. becomes

Session Handling in PHP  Session handling was added in version 4 of PHP  Previously implemented in an external library PHPLIB  Library routines allow variables to be associated with a session number  See local doc:

PHP Session Handling Routines  session_start  session_destroy  session_name  session_module_name  session_save_path  session_id  session_register  session_unregister  session_unset  session_is_registered  session_get_cookie_params  session_set_cookie_params  session_decode  session_encode

Simple Session Example SessionTest <? session_register("scount"); $scount++; $pcount++; ?> Page count: Session count:

Screenshot of Example

URL Rewriting in PHP  Can be done automatically with appropriate server set up  Otherwise must append session number to every URL using SID constant

URL Rewrite Example <?php session_register("count"); $count++; ?> Hello visitor, you have seen this page times. To continue, "> click here

Cascading Style Sheets  HTML meant to define content not style  Browser has control over presentation  Later additions have emphasised presentation issues  1996 W3C created CSS to deal with presentation external to HTML  Browser support is growing

What Is a Style?  Styles tell the browser how to render a item tagged in HTML  If browser cannot support style result should still be legible  Three types –Inline styles –Document level styles –External style sheets

Why Cascading?  Document presentation may be affected with reference to more than set of rules  Inline styles override document-level styles  Document-level styles override external style sheet styles  All styles override browser defaults

Inline Styles  Style attached to a specific tag on the HTML page  E.g. Red Bold Text

Document-level Styles  Styles defined within the head of an HTML page  Defined using the tag  Effect is to define a style to be applied to all the tags of a given type in a document

Document-Level Example Style Example <!-- H1 {color: red; font-style: bold} -->

External Style Sheets  Styles contained in an external file referenced by HTML page  Style file must have MIME type text/css  Normally called ??????.css  Referenced by a tag in the page’s head section  Pages may refer to more than one style sheet

Typical Style Sheet File BODY { background:#ccffff; color:#000099; font-family:"Bookman Old Style"; margin: 2em 2em 4em 4em; } A:link { color:#ff0000; }

Using a Stylesheet Wolverhampton Methodist Churches

Stylesheets in Action

Style Syntax  The general syntax for a style rule is: tag-selector {property1:value1; property2:value2; ……..} body {color:blue; margin-left: 0.5cm;}

Multiple Selectors  The same style can be applied to a number of tags  E.g. h1, h2, h3, h4, h5, {text-align: center}

Contextual Selectors  Styles applied to nested tags  E.g. ol ol ol li {list-style: lower-alpha} h1 em {color: blue} h1 em, p strong, address {color: blue}

Style classes  Allows the creation of several styles for the same tag distinguished by a name  Name of style to be used is given in tag  Can also define generic styles which are independent of specific tags  Pseudo classes define styles for tag states

Class Example  Style for an abstract of a project report p.abstract { font-style: italic; margin-left: 0.5cm; margin-right: 0.5cm; } text

Generic class  Not associated with a given tag.italic {font-style: italic} Italic text para1 para2

Pseudo Classes (CSS1)  3 apply to the tag: link, active, visited  2 apply to any text tag: first-line and first- letter a:link{color:red} a:active{color:green; font-weight:bold} a:visited{color:darkblue} p:first-line{font-size: 200%}

Current State of CSS  1996 CSS1  1998 CSS2  Now CSS3 in development!  Not fully supported by any browser

Applets  Code which downloads and executes within a browser –ActiveX –Flash –Java Applets –Shockwave

What is Dynamic HTML?  A term which encompasses: –JavaScript/JScript –Applets –CSS –Server side scripting –ActiveX –Client Pull –Server Push

Summary  Session Control  Cascading Style Sheets (CSS)  Dynamic HTML