cp3024 lecture 5 state maintenance, cascading style sheets and dynamic html
Post on 20-Jan-2016
217 views
TRANSCRIPT
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– View Y– Add Y to shopping cart– Purchase goods
Relies on server remembering prior purchases
Recording State
HTTP is statelessNeed mechanism to impose state on top of
HTTPSession recording
– Cookies– URL rewriting
Sessions
Sessions are a group of interactions between a client and the server
Typically begun via an initial requestMay 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 NetscapeSmall files sent by server and stored by the
client (<4KB)On revisiting a page or site the client
presents the cookie to the serverMaybe short term or long lastingSometimes considered insecureCan be seen as an invasion of privacy
URL Rewriting
Can be used where cookies have been forbiddenSession id is appended to URLs in the page
returned to the browserE.g.
<a href="/store/catalog">
becomes
<a href="/store/catalog?PHPSESSID=DA32242SSGE">
Session Handling in PHP
Session handling was added in version 4 of PHPPreviously implemented in an external library
PHPLIBLibrary routines allow variables to be associated
with a session numberSee local doc:
http://www.scit.wlv.ac.uk/appdocs/php/ref.session.html
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
<html><head><title>SessionTest</title></head><body><?session_register("scount");$scount++;$pcount++;
?>Page count: <? echo $pcount; ?><br>Session count: <? echo $scount; ?><br></body></html>
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
<?phpsession_register("count"); $count++;
?> <p>Hello visitor, you haveseen this page <? echo $count; ?> times.</p> To continue, <a HREF="nextpage.php?<?=SID?>">click here</a>
Cascading Style Sheets
HTML meant to define content not styleBrowser has control over presentationLater additions have emphasised
presentation issues1996 W3C created CSS to deal with
presentation external to HTMLBrowser 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.<h1 style=“color: red; font-style: bold”>
Red Bold Text
</h1>
Document-level Styles
Styles defined within the head of an HTML page
Defined using the <style> tagEffect is to define a style to be applied to
all the tags of a given type in a document
Document-Level Example
<head>
<title>Style Example</title>
<style type=“text/css”>
<!--
H1 {color: red; font-style: bold}
-->
</style>
</head>
External Style Sheets
Styles contained in an external file referenced by HTML page
Style file must have MIME type text/cssNormally called ??????.cssReferenced by a <link> tag in the page’s
head sectionPages 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
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html><head><title>Wolverhampton Methodist Churches</title>
<link rel=StyleSheet href="Churchhistory.css" type="text/css" media=screen>
</head>
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 tagsE.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 tagCan also define generic styles which are
independent of specific tagsPseudo 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;
}
<p class=“abstract”> text </p>
Generic class
Not associated with a given tag
.italic {font-style: italic}
<p class=italic>Italic text </p>
<div class=italic> <p>para1</p> <p> para2</p></div>
Pseudo Classes (CSS1)
3 apply to the <a> tag: link, active, visited2 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 CSS11998 CSS2Now 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 ControlCascading Style Sheets (CSS)Dynamic HTML