cp3024 lecture 5 state maintenance, cascading style sheets and dynamic html
Post on 20-Jan-2016
219 views
TRANSCRIPT
![Page 1: CP3024 Lecture 5 State Maintenance, Cascading Style Sheets and Dynamic HTML](https://reader033.vdocuments.us/reader033/viewer/2022051417/56649d6c5503460f94a4be21/html5/thumbnails/1.jpg)
CP3024 Lecture 5
State Maintenance, Cascading Style Sheets and Dynamic HTML
![Page 2: CP3024 Lecture 5 State Maintenance, Cascading Style Sheets and Dynamic HTML](https://reader033.vdocuments.us/reader033/viewer/2022051417/56649d6c5503460f94a4be21/html5/thumbnails/2.jpg)
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
![Page 3: CP3024 Lecture 5 State Maintenance, Cascading Style Sheets and Dynamic HTML](https://reader033.vdocuments.us/reader033/viewer/2022051417/56649d6c5503460f94a4be21/html5/thumbnails/3.jpg)
Recording State
HTTP is statelessNeed mechanism to impose state on top of
HTTPSession recording
– Cookies– URL rewriting
![Page 4: CP3024 Lecture 5 State Maintenance, Cascading Style Sheets and Dynamic HTML](https://reader033.vdocuments.us/reader033/viewer/2022051417/56649d6c5503460f94a4be21/html5/thumbnails/4.jpg)
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
![Page 5: CP3024 Lecture 5 State Maintenance, Cascading Style Sheets and Dynamic HTML](https://reader033.vdocuments.us/reader033/viewer/2022051417/56649d6c5503460f94a4be21/html5/thumbnails/5.jpg)
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
![Page 6: CP3024 Lecture 5 State Maintenance, Cascading Style Sheets and Dynamic HTML](https://reader033.vdocuments.us/reader033/viewer/2022051417/56649d6c5503460f94a4be21/html5/thumbnails/6.jpg)
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
![Page 7: CP3024 Lecture 5 State Maintenance, Cascading Style Sheets and Dynamic HTML](https://reader033.vdocuments.us/reader033/viewer/2022051417/56649d6c5503460f94a4be21/html5/thumbnails/7.jpg)
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">
![Page 8: CP3024 Lecture 5 State Maintenance, Cascading Style Sheets and Dynamic HTML](https://reader033.vdocuments.us/reader033/viewer/2022051417/56649d6c5503460f94a4be21/html5/thumbnails/8.jpg)
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
![Page 9: CP3024 Lecture 5 State Maintenance, Cascading Style Sheets and Dynamic HTML](https://reader033.vdocuments.us/reader033/viewer/2022051417/56649d6c5503460f94a4be21/html5/thumbnails/9.jpg)
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
![Page 10: CP3024 Lecture 5 State Maintenance, Cascading Style Sheets and Dynamic HTML](https://reader033.vdocuments.us/reader033/viewer/2022051417/56649d6c5503460f94a4be21/html5/thumbnails/10.jpg)
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>
![Page 11: CP3024 Lecture 5 State Maintenance, Cascading Style Sheets and Dynamic HTML](https://reader033.vdocuments.us/reader033/viewer/2022051417/56649d6c5503460f94a4be21/html5/thumbnails/11.jpg)
Screenshot of Example
![Page 12: CP3024 Lecture 5 State Maintenance, Cascading Style Sheets and Dynamic HTML](https://reader033.vdocuments.us/reader033/viewer/2022051417/56649d6c5503460f94a4be21/html5/thumbnails/12.jpg)
URL Rewriting in PHP
Can be done automatically with appropriate server set up
Otherwise must append session number to every URL using SID constant
![Page 13: CP3024 Lecture 5 State Maintenance, Cascading Style Sheets and Dynamic HTML](https://reader033.vdocuments.us/reader033/viewer/2022051417/56649d6c5503460f94a4be21/html5/thumbnails/13.jpg)
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>
![Page 14: CP3024 Lecture 5 State Maintenance, Cascading Style Sheets and Dynamic HTML](https://reader033.vdocuments.us/reader033/viewer/2022051417/56649d6c5503460f94a4be21/html5/thumbnails/14.jpg)
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
![Page 15: CP3024 Lecture 5 State Maintenance, Cascading Style Sheets and Dynamic HTML](https://reader033.vdocuments.us/reader033/viewer/2022051417/56649d6c5503460f94a4be21/html5/thumbnails/15.jpg)
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
![Page 16: CP3024 Lecture 5 State Maintenance, Cascading Style Sheets and Dynamic HTML](https://reader033.vdocuments.us/reader033/viewer/2022051417/56649d6c5503460f94a4be21/html5/thumbnails/16.jpg)
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
![Page 17: CP3024 Lecture 5 State Maintenance, Cascading Style Sheets and Dynamic HTML](https://reader033.vdocuments.us/reader033/viewer/2022051417/56649d6c5503460f94a4be21/html5/thumbnails/17.jpg)
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>
![Page 18: CP3024 Lecture 5 State Maintenance, Cascading Style Sheets and Dynamic HTML](https://reader033.vdocuments.us/reader033/viewer/2022051417/56649d6c5503460f94a4be21/html5/thumbnails/18.jpg)
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
![Page 19: CP3024 Lecture 5 State Maintenance, Cascading Style Sheets and Dynamic HTML](https://reader033.vdocuments.us/reader033/viewer/2022051417/56649d6c5503460f94a4be21/html5/thumbnails/19.jpg)
Document-Level Example
<head>
<title>Style Example</title>
<style type=“text/css”>
<!--
H1 {color: red; font-style: bold}
-->
</style>
</head>
![Page 20: CP3024 Lecture 5 State Maintenance, Cascading Style Sheets and Dynamic HTML](https://reader033.vdocuments.us/reader033/viewer/2022051417/56649d6c5503460f94a4be21/html5/thumbnails/20.jpg)
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
![Page 21: CP3024 Lecture 5 State Maintenance, Cascading Style Sheets and Dynamic HTML](https://reader033.vdocuments.us/reader033/viewer/2022051417/56649d6c5503460f94a4be21/html5/thumbnails/21.jpg)
Typical Style Sheet File
BODY{background: #ccffff;color: #000099;font-family: "Bookman Old Style";margin: 2em 2em 4em 4em;}
A:link{color: #ff0000;}
![Page 22: CP3024 Lecture 5 State Maintenance, Cascading Style Sheets and Dynamic HTML](https://reader033.vdocuments.us/reader033/viewer/2022051417/56649d6c5503460f94a4be21/html5/thumbnails/22.jpg)
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>
![Page 23: CP3024 Lecture 5 State Maintenance, Cascading Style Sheets and Dynamic HTML](https://reader033.vdocuments.us/reader033/viewer/2022051417/56649d6c5503460f94a4be21/html5/thumbnails/23.jpg)
Stylesheets in Action
![Page 24: CP3024 Lecture 5 State Maintenance, Cascading Style Sheets and Dynamic HTML](https://reader033.vdocuments.us/reader033/viewer/2022051417/56649d6c5503460f94a4be21/html5/thumbnails/24.jpg)
Style Syntax
The general syntax for a style rule is:
tag-selector {property1:value1; property2:value2; ……..}
body {color:blue; margin-left: 0.5cm;}
![Page 25: CP3024 Lecture 5 State Maintenance, Cascading Style Sheets and Dynamic HTML](https://reader033.vdocuments.us/reader033/viewer/2022051417/56649d6c5503460f94a4be21/html5/thumbnails/25.jpg)
Multiple Selectors
The same style can be applied to a number of tags
E.g.
h1, h2, h3, h4, h5, {text-align: center}
![Page 26: CP3024 Lecture 5 State Maintenance, Cascading Style Sheets and Dynamic HTML](https://reader033.vdocuments.us/reader033/viewer/2022051417/56649d6c5503460f94a4be21/html5/thumbnails/26.jpg)
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}
![Page 27: CP3024 Lecture 5 State Maintenance, Cascading Style Sheets and Dynamic HTML](https://reader033.vdocuments.us/reader033/viewer/2022051417/56649d6c5503460f94a4be21/html5/thumbnails/27.jpg)
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
![Page 28: CP3024 Lecture 5 State Maintenance, Cascading Style Sheets and Dynamic HTML](https://reader033.vdocuments.us/reader033/viewer/2022051417/56649d6c5503460f94a4be21/html5/thumbnails/28.jpg)
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>
![Page 29: CP3024 Lecture 5 State Maintenance, Cascading Style Sheets and Dynamic HTML](https://reader033.vdocuments.us/reader033/viewer/2022051417/56649d6c5503460f94a4be21/html5/thumbnails/29.jpg)
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>
![Page 30: CP3024 Lecture 5 State Maintenance, Cascading Style Sheets and Dynamic HTML](https://reader033.vdocuments.us/reader033/viewer/2022051417/56649d6c5503460f94a4be21/html5/thumbnails/30.jpg)
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%}
![Page 31: CP3024 Lecture 5 State Maintenance, Cascading Style Sheets and Dynamic HTML](https://reader033.vdocuments.us/reader033/viewer/2022051417/56649d6c5503460f94a4be21/html5/thumbnails/31.jpg)
Current State of CSS
1996 CSS11998 CSS2Now CSS3 in development!Not fully supported by any browser
![Page 32: CP3024 Lecture 5 State Maintenance, Cascading Style Sheets and Dynamic HTML](https://reader033.vdocuments.us/reader033/viewer/2022051417/56649d6c5503460f94a4be21/html5/thumbnails/32.jpg)
Applets
Code which downloads and executes within a browser– ActiveX– Flash– Java Applets– Shockwave
![Page 33: CP3024 Lecture 5 State Maintenance, Cascading Style Sheets and Dynamic HTML](https://reader033.vdocuments.us/reader033/viewer/2022051417/56649d6c5503460f94a4be21/html5/thumbnails/33.jpg)
What is Dynamic HTML?
A term which encompasses:– JavaScript/JScript– Applets– CSS– Server side scripting– ActiveX– Client Pull– Server Push
![Page 34: CP3024 Lecture 5 State Maintenance, Cascading Style Sheets and Dynamic HTML](https://reader033.vdocuments.us/reader033/viewer/2022051417/56649d6c5503460f94a4be21/html5/thumbnails/34.jpg)
Summary
Session ControlCascading Style Sheets (CSS)Dynamic HTML