1 / 34

CP3024 Lecture 5

This lecture discusses the state maintenance in web-based purchase systems and the use of cascading style sheets (CSS) to control webpage presentation. Topics covered include session handling, cookies, URL rewriting, and the basics of CSS.

aterri
Download Presentation

CP3024 Lecture 5

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. 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

  3. Recording State • HTTP is stateless • Need mechanism to impose state on top of HTTP • Session recording • Cookies • URL rewriting

  4. 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

  5. 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

  6. 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

  7. 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. <a href="/store/catalog"> becomes <a href="/store/catalog?PHPSESSID=DA32242SSGE">

  8. 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: http://www.scit.wlv.ac.uk/appdocs/php/ref.session.html

  9. 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 PHP Session Handling Routines

  10. 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>

  11. Screenshot of Example

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

  13. URL Rewrite Example <?php session_register("count"); $count++; ?> <p>Hello visitor, you have seen this page <? echo $count; ?> times.</p> To continue, <a HREF="nextpage.php?<?=SID?>"> click here</a>

  14. 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

  15. 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

  16. 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

  17. 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>

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

  19. Document-Level Example <head> <title>Style Example</title> <style type=“text/css”> <!-- H1 {color: red; font-style: bold} --> </style> </head>

  20. 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 <link> tag in the page’s head section • Pages may refer to more than one style sheet

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

  22. 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>

  23. Stylesheets in Action

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

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

  26. 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}

  27. 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

  28. 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>

  29. 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>

  30. Pseudo Classes (CSS1) • 3 apply to the <a> 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%}

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

  32. Applets • Code which downloads and executes within a browser • ActiveX • Flash • Java Applets • Shockwave

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

  34. Summary • Session Control • Cascading Style Sheets (CSS) • Dynamic HTML

More Related