Student Evaluation Student evaluation of course instruction is now available until 7am on April 25...

Internet Computing

Student Evaluation• Student evaluation of course instruction is

now available until 7am on April 25

• Questionnaire includes 9 multiple choice and 2 open comment questions

• Online evaluation information is confidential and anonymous

• Results will not be available to the instructor until after grades are posted

Where Are We

Done!

Last chapter – How to use DBMS from applications

This chapter

Overview• Internet Concepts

• Web data formats– HTML, XML, DTDs

• Three-tier architectures

• The presentation layer– HTML forms; HTTP Get and POST, URL encoding;

Javascript; Stylesheets. XSLT

• The middle tier– CGI, application servers, Servlets, JavaServerPages,

passing arguments, maintaining state (cookies)

This chapter

Uniform Resource Identifier (URI)

• Uniform naming schemeto identify resources on the Internet

• A resource can be anything:– Index.html– mysong.mp3– picture.jpg

• Example URIs:http://www.acmmm.org/2014/organizing_cmte.html

Structure of URIs

• URI has three parts:1. Name of the protocol used to access the resource

(http)2. Name of the host computer (www.cs.ucf.edu) 3. Name of the resource

(~kienhua/classes/COP4710/Ch7_internetapp.ppt)

• URLs are a subset of URIs– URL (Universal Resource Locator)– The distinction is not important for our purposes

http://www.cs.ucf.edu/~kienhua/classes/COP4710_internetapp.ppt1 2

3

Hypertext Transfer Protocol (HTTP)

• What is a communication protocol? – Set of standards that defines the structure of

messages– Examples: TCP, IP, HTTP

• What happens if you click on the following link ? www.cs.ucf.edu/~kienhua/classes/

1. Client (web browser) sends HTTP request to server2. Server replies with an HTTP response

http://www.cs.ucf.edu/~kienhua/classes/

HTTP Requests

GET ~/index.html HTTP/1.1 User-agent: Mozilla/4.0 Accept: text/html, image/gif, image/jpeg

HTTPMethod

URI field

HTTPversion

The type of the client (e.g., versions of Netscape

or Internet Explorer)

The type of files the client is willing to accept (e.g., this client cannot accept

an mpg video)

HTTP Requests consists of several lines of ASCII text, with an empty line at the end.

HTTP Responses• The server retrieves the page index.html and

uses it to assemble the HTTP response message

• The HTTP response message has three parts:– status line– several header lines– body of the message (which contains the

requested object)

index.html

~/index.htmlHTTP Request

HTTP Response

HTTP Response: Status Line

HTTP/1.1 200 OK

Common status codes and associated messages:• 200 OK: The request succeeded and the object is in the

body of the message• 400 Bad Request: The request could not be fulfilled• 404 Not Found: The requested object does not exist• 505 HTTP Version Not Supported: The protocol version used

by the client is not supported by the server

HTTPversion

Status code

Associated server

message

1

HTTP Responses: Header Lines

Date: Mon, 04 Mar 2002 12:00:00 GMT Server: Apache/1.3.0 (Linux) Last-Modified: Mon, 01 Mar 2002 09:23:24 GMT Content-Length: 1024Content-Type: text/html Date when

the object was created

Number of bytes

being sent

Type of object being sent

Server type

Server time

2

HTTP Response: Body

<HTML> <HEAD></HEAD><BODY><h1>Barns and Nobble Internet Bookstore</h1>Our inventory:<h3>Science</h3><b>The Character of Physical Law</b>...

Requested object

Display

3

HTTP is Stateless

• Implications for applications:– Any state information (shopping carts, user

login-information) need to be encoded in every HTTP request and response!

– Popular methods on how to maintain state:• Cookies (later this lecture)• Dynamically generate unique URL’s at the

server level (later this lecture)

• HTTP is stateless– No “sessions”– Every message is completely self-contained– No previous interaction is “remembered” by the protocol– Tradeoff between ease of implementation and ease of application

development: Other functionality has to be built on top

Web Data Formats

• HTML: The presentation language for the Internet

• XML: A self-describing, hierarchal data model

• DTD: Standardizing schemas for Xml

• XSLT: not covered in this lecture

HTML: Basic Contructs

<html>

</html>

An HTML document is enclosed by these two tags

Commands in HTML consist of a start tag and an end tag

STAR

TEN

D

HTML: Basic Contructs <html><head>…</head>

</html>

The head section contains information about the page including the title, author, etc.

HTML: Basic Contructs <html><head>…</head><body>

</body></html>

The body section contains the parts of the web page the browser will display: text, images, links, etc.

HTML: Basic Contructs <html><head>…</head><body><h1>Section 1</h1>

</body></html>

There are six levels of section headers: h1 through h6

HTML: Basic Contructs <html><head>…</head><body><h1>Section 1</h1> <ul> <li>This is the first item</li> </ul></body></html>

This is an unordered list


<ol><li>Coffee</li><li>Tee</li>

</ol></body></html>

This is an ordered list


<dl><dt>Coffee</dt><dd> … </dd><dt>Tee</dt><dd> … </dd>

</dl></body></html>

This is a definition list

HTML: Basic Contructs <html><head>…</head><body><h1>Section 1</h1> <ul> <li> This is the <b>first</b> item <\li> </ul></body></html>

Display “first” in boldface

HTML: An Example<html> <head></head> <body> <h1>Barns and Nobble Internet

Bookstore</h1>

<h3>Science</h3>

<b>The Character of Physical Law</b> <ul> <li>Author: Richard Feynman</li>

<li>Published 1980</li> <li>Hardcover</li>

</ul>

<h3>Fiction</h3>

<b>Oliver Twist</b> <ul>

<li>Author: Charles Dickens</li> <li>Published 2002</li>

</ul>

<b>Pride and Prejudice</b> <ul>

<li>Author: Jane Austen</li> <li>Published 1983</li> <li>Paperback</li>

</ul> </body></html>

h1

h3b

ul

h3

HTML: Summary

• HTML is a markup language

• Commands are tags:– Start tag and end tag– Examples:

• <HTML> … </HTML>• <UL> … </UL>

• Many editors automatically generate HTML directly from your document (e.g., Microsoft Word has an “Save as Web Page” facility)

HTML vs XML• HTML

– Supports a fixed set of tags– Not enough tags to describe the structures of the

content of more general applications

• XML– Allows users to define new tags to structure any

type of data or document (e.g., <firstname> tag)– It makes database systems more tightly integrated

into Web applications



</ul>

What is the first name ?

XML – The Extensible Markup Language

• Language– A way of communicating information

• Markup– Notes or meta-data that describe your data or

language

• Extensible– Limitless ability to define new languages or data

sets

XML Elements • Elements are primary building blocks of an XML

document• Elements are also called tags• Each element of a user-defined type ELM is

enclosed by <ELM> and </ELM>Example: <FIRSTNAME>Jessica</FIRSTNAME>

• Elements can be nested (forming a tree structure)

Example: <BOOK> <AUTHOR>

<FIRSTNAME>Charles</FIRSTNAME><LASTNAME>Dickens</LASTNAME>

<AUTHOR> </BOOK>

• XML elements are case sensitive: BOOK ≠ Book

XML Elements /w Attributes • An Element can have descriptive attributes • The values of attributes are set inside the start

tag of the element• All attribute values must be enclosed in quotes

Example: <BOOK GENRE=“Fiction” FORMAT=“Hardcover”> <AUTHOR>


<AUTHOR> </BOOK>

An attributeAttribute

value

XML - Structure • XML looks like HTML

• XML is a hierarchy of user-defined tags called elements with attributes and data

• Data are described by elements, elements are described by attributes

• Example: <BOOK GENRE=“Fiction” FORMAT=“Hardcover”> <AUTHOR><FIRSTNAME>Charles</FIRSTNAME><LASTNAME>Dickens</LASTNAME> <AUTHOR> </BOOK>

Element described by attributes

DataData described

by element

XML Entity References • XML Data must not contain the reserved

characters (e.g., “<“)• Whenever an entity reference appears in the

document, it is textually replaced by its content• Format: < “lt” is an entity reference for the

character “<“Reserved Characters Entity References

< lt> gt& amp“ quot‘ apos

'1<5'

‘1 < 5’

XML: Comments

• Comments start with <!- and end with ->Example: <!- comment ->

• Comments can contain arbitrary text except the string --

XML: An Example<?xml version="1.0" encoding="UTF-8" standalone="yes"?><BOOKLIST> <BOOK genre="Science" format="Hardcover"> <AUTHOR> <FIRSTNAME>Richard</FIRSTNAME><LASTNAME>Feynman</LASTNAME> </AUTHOR> <TITLE>The Character of Physical Law</TITLE> <PUBLISHED>1980</PUBLISHED> </BOOK> <BOOK genre="Fiction"> <AUTHOR> <FIRSTNAME>Charles</FIRSTNAME><LASTNAME>Dickens</LASTNAME> </AUTHOR> <TITLE>Oliver Twist</TITLE> <PUBLISHED>2002</PUBLISHED> </BOOK> <BOOK genre="Fiction"> <AUTHOR> <FIRSTNAME>Jane</FIRSTNAME><LASTNAME>Austen</LASTNAME> </AUTHOR> <TITLE>Pride and Prejudice</TITLE> <PUBLISHED>1983</PUBLISHED> </BOOK></BOOKLIST>

If used it must be the first line

A root element

contains all other

elements

All elements must be properly nested

References no external entities

XML – What’s The Point?

• You can include your data and a description of what the data represents– This is useful for defining your own language or

protocol

• Example: Chemical Markup Language<molecule><weight>234.5</weight><Spectra>…</Spectra><Figures>…</Figures></molecule>

Xml – Storage

Storage is done just like an n-ary tree <root>

<tag1>

Some Text

<tag2>More</tag2>

</tag1>

</root>

Node

Type: Element_NodeName: ElementValue: Root

Node

Type: Element_NodeName: ElementValue: tag1

NodeType: Text_NodeName: TextValue: More

Node

Type: Element_NodeName: ElementValue: tag2

NodeType: Text_NodeName: TextValue: Some Text

HTML vs XML: Review• HTML

– Supports a fixed set of tags

– Not enough tags to describe the structures of the content of more general applications

• XML– Allows users to define

new tags (elements) to structure any type of data or document



</ul>

What is the first name ?

<BOOK><AUTHOR>


<AUTHOR></BOOK>

Useful for defining your own language

XML vs. HTML• HTML describes presentation

– An HTML document rendered in a Web browser is human readable

• XML describes content– It provide the message syntax for request-response

message exchange between applications

– It facilitate loosely coupled heterogeneous applications

HTML is for machine-to-person communication, and XML is for machine-to-machine communication.

DTD – Document Type Definition

• Unlike HTML, XML allows user-defined elements (tags) → the user needs to describe these elements

• DTD is a set of rules that defines the user-defined elements for an XML document→ DTD is the schema for the XML data

→ DTD says what elements and attributes are required or optional (the formal structure of the language)

• A document is valid if it is structured according to the rules set by the DTD

DTD Structure<!DOCTYPE BOOKLIST [

]>

A DTD is enclosed in: <!DOCTYPE name [ . . . DTD declaration . . . ]>

DTD Structure<!DOCTYPE BOOKLIST [<!ELEMENT BOOKLIST (BOOK)*>

]>

• A DTD starts with the root element• The root element BOOKLIST consists

of zero or more BOOK elements* : zero or more occurrences+ : one or more occurrences? : zero or one occurrence


<!ELEMENT BOOK (AUTHOR, TITLE, PUBLISHED?)>

]>

• An element can have nested elements• This rule says that a BOOK element

contains an AUTHOR element, a TITLE element, and an optional PUBLISHED element


<!ELEMENT BOOK (AUTHOR, TITLE, PUBLISHED?)><!ELEMENT AUTHOR (FIRSTNAME, LASTNAME)>

<!ELEMENT FIRSTNAME (#PCDATA)><!ELEMENT LASTNAME (#PCDATA)>

]>

Instead of containing other elements, an element can contain actual text #PCDATA indicates character data (e.g., a nested element) EMPTY indicates the element has no content (e.g., no

nested element) ANY indicates that any content is permitted. No checking

inside this structure (avoided whenever possible)


<!ELEMENT BOOK (AUTHOR,TITLE,PUBLISHED?)><!ELEMENT AUTHOR (FIRSTNAME,LASTNAME)>


<!ELEMENT TITLE (#PCDATA)><!ELEMENT PUBLISHED (#PCDATA)>

<!ATTLIST BOOK GENRE (Science|Fiction) #REQUIRED><!ATTLIST BOOK FORMAT (Paperback|Hardcover) “Paperback”>

]>

Attribute not required. Default value is “Paperback”

• Attributes of elements are declared outside the element

• The BOOK element has two attributes The GENRE attribute is required and can have

the value ‘Science’ or ‘Fiction’ The FORMAT attribute can have the value

‘Paperback’ or ‘Hardcover’, and ‘Paperback’ is the default value

#REQUIRED is the default option

The whole DTD<!DOCTYPE BOOKLIST [<!ELEMENT BOOKLIST (BOOK)*>

<!ELEMENT BOOK (AUTHOR,TITLE,PUBLISHED?)><!ELEMENT AUTHOR (FIRSTNAME,LASTNAME)>


<!ELEMENT TITLE (#PCDATA)><!ELEMENT PUBLISHED (#PCDATA)>

<!ATTLIST BOOK GENRE (Science|Fiction) #REQUIRED><!ATTLIST BOOK FORMAT (Paperback|Hardcover) “Paperback”>

]>

Five Possible Content Types

<!ELEMENT element-name (contentType)>

• Other elements

• Special symbol #PCDATA, EMPTY, or ANY

• A regular expression constructed from the preceding four choices– exp1, exp2, exp3: An ordered list of regular expressions– Exp*: An optional expression (zero or more occurrence)– Exp?: An optional expression (zero or one occurrences)– Exp+: A mandatory expression (one or more occurrences)– Exp1 | exp2: exp1 or exp2

Element Declared Values

• PCDATA: Character data that is going to be parsed by a parser

<!ELEMENT TITLE (#PCDATA)>

• CDATA: Character data that is not supposed to be parsed by a parser - no markup

It may contain character data and/or child elements

Attribute Declared Values

<!ATTLIST Cherry flavor CDATA #IMPLIED>

• It may contain arbitrary character data

• Entity references are recognized and replaced

'1<5'

‘1 < 5’

PCDATA is not legal for attribute values

No value must be givenElement Attribute

Content type

Attribute list

DTD – An Example<?xml version='1.0'?><!ELEMENT Basket (Cherry+, (Apple | Orange)*) >

<!ELEMENT Cherry EMPTY><!ATTLIST Cherry flavor CDATA #REQUIRED>

<!ELEMENT Apple EMPTY><!ATTLIST Apple color CDATA #REQUIRED>

<!ELEMENT Orange EMPTY><!ATTLIST Orange location ‘Florida’>

<Basket> <Cherry flavor=‘good’/> <Apple color=‘red’/> <Apple color=‘green’/></Basket>

<Basket> <Apple/> <Cherry flavor=‘good’/> <Orange/></Basket>

Bad XML

Element has no content

Good XML

Apple’s color is required

Cherry should go first

DTD – Well-Formed and Valid<?xml version='1.0'?><!ELEMENT Basket (Cherry+)>


Well-Formed and Valid<Basket> <Cherry flavor=‘good’></Basket>

Not Well-Formed<basket> <Cherry flavor=good></Basket>

Well-Formed but Invalid<Job> <Location>Home</Location></Job>Case

sensitive

Location ?

Wrapping

<?xml version='1.0'?><!DOCTYPE Basket [<!ELEMENT Basket (Cherry+)>


]><Basket> <Cherry flavor=‘good’></Basket>

If DTD is to be included in the XML source file, it should be wrapped in

a DOCTYPE definition

XML and DTDs

• More and more standardized (domain-specific) DTDs will be developed– MathML (Mathematical Markup Language)– Chemical Markup Language

• Enable seamless data exchange among heterogeneous sources

• Sophisticated query languages for XML are available:– Xquery– XPath

Lecture Overview

• Internet Concepts• Web data formats

– HTML, XML, DTDs

• Three-tier architectures• The presentation layer

– HTML forms; HTTP Get and POST, URL encoding; Javascript; Stylesheets. XSLT


passing arguments, maintaining state (cookies)

Three-Tier Architecture

Application Logic

Net

wor

k

Client(Web Browser)...Database

Net

wor

k

Client(Web Browser)

Presentationtier

Middletier

Data managementtier

One or more standard database management systems

• Implements business logic (implements complex actions, maintains state between different steps of a workflow

• Accesses different data management systems

• Primary interface to the user

• Needs to adapt to different display devices (PC, PDA, cell phone, voice access?)

Technologies

Database System

(e.g., mySQL, DB2)

Application Server

(e.g., Tomcat, Apache)

Client Program

(Web Browser)HTMLJavascriptXSLT

JSPServletsCookiesCGIphp

XMLStored Procedures

Lecture Overview


– HTML, XML, DTDs

• Three-tier architectures• The presentation layer

– HTML forms; HTTP Get and POST, URL encoding; Javascript; Stylesheets.


passing arguments, php, maintaining state (cookies)

Overview of the Presentation Tier• Functionality of the presentation tier

– Primary interface to the user– Needs to adapt to different display devices (PC, PDA,

cell phone, voice access?)– Simple functionality, such as field validity checking

• We will cover:– HTML Forms: How to pass data to the middle tier– JavaScript: Simple functionality at the presentation tier

(e.g., simple animations)– Style sheets: Present the same webpage with different

formatting for clients with different capabilities.

HTML Forms• Common way to communicate data from

client to middle tier

• Inside an HTML form, – We have form elements that allow the user to

enter information in a form– We can use any HTML tags

HTML Form - General Format<FORM ACTION=“page.jsp” METHOD=“GET”

NAME=“LoginForm”>…</FORM>

• NAME: Name of the form; can be used in client-side scripts to refer to the form (more on this later)

• METHOD: Specifies HTTP GET or POST method for form submission (more on this later)

• ACTION: Specifies URI of the page to which the form contents are submitted (if absent, URI of current page is used)

→ the page provides logic for processing input from the form (more on this later)

Form Element - Example 1

• INPUT is the most used form tag:<FORM>First name:<INPUT TYPE=“text” NAME=“firstname”><br>Last name:<INPUT TYPE=“text” NAME=“lastname”></FORM>

• Display in a browser:First name:

Last name:

20 characters by default

Form Element - Example 2

• Using radio buttons:<FORM><INPUT TYPE=“radio” NAME=“under”>

Undergraduate<br>Last name:<INPUT TYPE=“radio” NAME=“grad”> Graduate</FORM>

• Display in a browser:Undergraduate

Graduate

Form Element - Example 3• Using Submit botton:

<FORM ACTION=“phone.jsp” METHOD=“GET” NAME=“Phone”>

Phone number:<INPUT TYPE=“text” NAME=“phonenum”><INPUT TYPE=“submit” VALUE=“Submit”></FORM>

• Display in a browser:Phone number:

• The page named action needs to be a program, script, or page that will process the user input

Submit

1

1

2

2

3

3

When clicked, content of the form is sent to the page called phone.jsp on the server

INPUT - General Format

<INPUT TYPE=“text” NAME=“username” VALUE=“Joe”>

text: a text input fieldpassword: a text field where the entered characters are displayed as starsreset: a button that resets all input fieldssubmit: a button that sends the values in the form to the server

• Specifies the symbolic name for this field

• Used to identify the input field when it is sent to the middle tier

• Specifies default value for text or password fields

• For submit or reset buttons, it determines the label of the button

Three Ways of Specifying User Input

1. INPUT tag (last page)2. TEXTAREA tag

<textarea name=“comments” cols=“45” row=“10”>Please give your input here – as many words as you like.</textarea>

Please give your input here – as many words as you like 3. SELECT tag Allows the user to choose from a fixed set of values; one or several at once.

Passing Arguments

Two methods for submitting HTML Form data to the Web server:

• GET • POST

<FORM ACTION=“page.jsp” METHOD=“GET”

NAME=“LoginForm”>…</FORM>

GET Method The form contents are

directly visible to the user as the constructed URI

The users can bookmark the page with the constructed URI

Before clinking on “Submit”

After clinking on “Submit”

Constructed URI - Contents of the form are assembled into

the query URI (i.e., Middle tier receives header that actually contains data from the form)

POST Method

The contents of the form are encoded as in the GET method, but they are sent in a separate data block

The form contents are sent inside the HTTP request message body and are not visible to the user

Before clinking on “Submit”

After clinking on “Submit”

Contents of the form not

included

Google Search

Using GET

Encoded URI

action?name1=value1&name2=value2&name3=value3

Only shown for GET method

Example:

page.jsp?username=John+Doe&password=secret

‘+’ represents a space character

<FORM ACTION=“page.jsp” METHOD=“GET” NAME=“loggin”>Login:<INPUT TYPE=“text” NAME=“username”> <br><INPUT TYPE=“password” NAME=“password”> <br><INPUTTYPE=“submit” VALUE=“Login”></FORM>

‘name=value’ pairs are the user inputs from the INPUT fields in the form

The action is the URI specified in the ACTION attribute of the FORM tag

HTTP GET: Encoding Form Fields• Form fields can contain general ASCII

characters that cannot appear in an URI (e.g., space character)

Name: Jane Doe

• A special encoding convention converts such field values into “URI-compatible” characters (next page)

Cannot have a space in an URI

HTTP GET: Encoding Form Fields• Form fields can contain general ASCII characters

that cannot appear in an URI (e.g., space character)

• A special encoding convention converts such field values into “URI-compatible” characters:

1. Convert all spaces to the “+” character

2. Glue (name,value)-pairs from the form INPUT tags together with “&” to form the URI

3. Convert all “special” characters to %xyz, were xyz is the ASCII code of the character. Special characters include &, =, +, %, etc.

page.jsp?coursename=Database+Systems&CourseID=COP4710

First INPUT Second INPUT

JavaScriptJavaScript is an interpreted scripting language

– A JavaScript is a program added to a Web page.– It runs at the client tier to add functionality to

the presentation

<HTML>

</HTML>

A Web page

<SCRIPT>

</SCRIPT>

A program running at

client

JavaScript• JavaScript is an interpreted scripting language

– A JavaScript is a program added to a Web page.– It runs at the client tier to add functionality to the

presentation

• Sample applications:– Browser Detection: Detect browser type and load

browser-specific page.– Form validation: Validate form input fields (e.g., an

email address contains ‘@’), or if all required fields have input data.

– Browser control: Open new windows (e.g., pop-up ads)

JavaScript: SCRIPT Tags

• A JavaScript is usually embedded inside the HTML with the <SCRIPT> … </SCRIPT> tag.

• <SCRIPT> tag has several attributes:– LANGUAGE: indicates language of the script (such

as JavaScript)– SRC: Specifies the external file with the script code

• Example: <SCRIPT LANGUAGE=“JavaScript” SRC=“validate.js”> </SCRIPT>

JavaScript without SRC Attribute• If <SCRIPT> tag does not have an SRC attribute, then the JavaScript

is directly in the HTML file.

Example: Create a pop-up box with a message <SCRIPT LANGUAGE=“JavaScript”>  </SCRIPT>

• Two different commenting styles– ” comment as it is

interpreted otherwise

HTML processor ignores this

JavaScript code

JavaScript processor

ignores “- ->”

Putting HTML comments into javascript code allows really old browsers to ignore the javascript they don’t understand

Two Different Commenting Styles

• “//…” is used for single-line comments

• “/* … */ ” is used for multi-line comments

JavaScript – Variables:

• numbers, Boolean values, strings, …• Variables do not have a fixed type, but implicitly have the type of

the data to which they have been assigned

– Assignments: =, +=, …– Comparison operators: <,>,… – Boolean operators: && for logical AND, || for logical

OR, ! for negation– Statements

• if (condition) {statements;} else {statements;}• Loops: for-loop, do-while, and while-loop

– Functions with return valuesfunction funcname(arg1, …, argk) {statements;}

A Complete Example <SCRIPT LANGUAGE=“JavaScript”></SCRIPT>

“document” is an implicitly defined variable referring to the current HTML pagei.e., the “LoginForm” form

in this page

HTML Page

<FORM NAME=“LoginForm” ……</FORM>

function testLoginEmpty … … = document.LoginForm …This slide

Next slide

A Complete Example – Cont’d<H1 ALIGN = “CENTER”>Barns and Nobble Internet Bookstore</H1><H3 ALIGN = “CENTER”>Please enter your userid and password:</H3><FORM NAME=“LoginForm” METHOD=“POST” ACTION=“TableOfContents.jsp”

onSubmit=“return testLoginEmpty()”>Userid: <INPUT TYPE=“TEXT” NAME=“userid”><P>Password: <INPUT TYPE=“PASSWORD” NAME=“password”><P><INPUT TYPE=“SUBMIT” VALUE=“Login” NAME=“SUBMIT”>

<INPUT TYPE=“RESET” VALUE=“Clear Input” NAME=“RESET”></FORM>

The form contents are submitted to server if function

returns true (more in next page)

1

243

1234

A form

Event Handler

<FORM NAME = “LoginForm” METHOD=“POST” ACTION=“TableOfContents.jsp”

onSubmit=“return testLoginEmpty()”>

• An event handler is a function that is called if an event happens on an object (e.g., submit button) in a webpage

• onSubmit is an event handler, which is called if the submit button is pressed

• If the event handler returns true, then the form contents are submitted to the server

Event handler

Style SheetsWe need different ways of displaying the same information to clients with different displays

– Using different font sizes or colors to provide better contrast on a black-and-white screen

– Rearranging objects on the page to accommodate small screens

– Highlighting different information to focus on some important part of the page

I have a small

screen

Style Sheets• A style sheet is a method to adapt the same

document contents to different presentation formats

• It tells a Web browser how to translate the data into a presentation that is suitable for the client’s display

Stylesheet

Same conte

nts

Differe

nt

prese

ntati

ons

Stylesheets• Idea: (1) Separate display from contents, and (2)

adapt display to different presentation formats

• Two aspects:– Document transformations to decide what parts of

the document to display in what order– Document rendering to decide how each part of the

document is displayed

Stylesheet Languages

• Cascading style sheets (CSS): For HTML documents

• Extensible stylesheet language (XSL): For XML documents

CSS: Cascading Style Sheets• Styles are normally stored in

style sheets, which are files that contain style definitions. They define how to display HTML documents.

• Many HTML documents (e.g., all in a website) can refer to the same CSS

• Can change format of a website by changing a single file (i.e., separation of content from presentation)

Style definitions

Style sheet

CSS: Cascading Style Sheets

Include the following line into an HTML file to link to the external CSS style sheet.

<LINK REL=“style sheet” TYPE=“text/css” HREF=“books.css” />

Relationship between current document and

linked documentThe type of the

linked documentLocation of the

linked document

CSS: Example<LINK REL=“style sheet” TYPE=“text/css” HREF=“books.css”/>

The books.css file: BODY {BACKGROUND-COLOR: yellow} H1 {FONT-SIZE: 36pt} H3 {COLOR: blue} P {MARGIN-LEFT: 50px; COLOR: red}

Each line consists of three parts: selector {property: value} Selector: Tag whose format is defined Property: Tag’s attribute whose value is set Value: value of the attribute

Same effect as:<BODY BACKGROUND-

COLOR=“YELLOW”> in HTML

Each line consists of three parts

Properties separated by semicolons

XSL• Language for expressing style sheets

– More at: http://www.w3.org/Style/XSL/

• Three components– XSLT: XSL Transformation language

• Can transform one document to another• More at http://www.w3.org/TR/xslt

– XPath: XML Path Language• Selects parts of an XML document• More at http://www.w3.org/TR/xpath

– XSL Formatting Objects• Formats the output of an XSL transformation• More at http://www.w3.org/TR/xsl/

http://www.w3.org/Style/XSL/

http://www.w3.org/TR/xslt

http://www.w3.org/TR/xpath

http://www.w3.org/TR/xsl/

Lecture Overview


– HTML, XML, DTDs• Three-tier architectures• The presentation layer

– HTML forms; HTTP Get and POST, URL encoding; Javascript; Stylesheets. XSLT


passing arguments, php, maintaining state (cookies)

Overview of the Middle Tier

• We will cover– CGI: Protocol for passing arguments to programs running at the

middle tier– Application servers: Runtime environment at the middle tier– Servlets: Java programs at the middle tier– JavaServerPages: Java scripts at the middle tier– php: HTML-embedded scripting language– Cookies: Used to maintain state at the middle tier.

DatabaseCONNECTION

1st tier 2nd tier

3rd tier

FORM

OUTPUT

Encodes business

logic

CGI: Common Gateway Interface

• Goal: Transmit arguments from HTML forms to application programs running at the middle tier

• Details of the actual CGI protocol unimportant libraries implement high-level interfaces (enable application programs to get arguments from the HTML form)

CGI Illustration: Request the Page

<FORM> …

InternetInternetRequest the page (HTTP)

Web Server

<FORM> …

CGI Illustration: Send Back the page

<FORM> …

InternetInternetFill the <FORM> and send back the page

Web Server

<FORM> …

CGI Illustration: Process <FORM>

<FORM> …

InternetInternet

<FORM> …

Web Server

XYZ.cgi(child

process)

parameters

Result

<FORM> … CGI

protocol

HTTP protocol

This is called a CGI script since many such programs are written in a scripting language, e.g., Perl

CGI: ExampleHTML form:<form action=“findbooks.cgi” method=POST>Type an author name:<input type=“text” name=“authorName”><input type=“submit” value=“Send it”><input type=“reset” value=“Clear form”></form>

Perl code:use CGI; $dataIn=new CGI;$dataIn->header();$authorName=$dataIn->param(‘authorName’);print(“<HTML><TITLE>Argument passing test</TITLE>”);print(“The author name is “, $authorName);print(“</HTML>”);exit;

Perl is often used for CGI scripting

When the user submits this page, the values in the input fields are passed to the program findbooks.cgi

CGI script

CGI: ExampleHTML form:<form action=“findbooks.cgi” method=POST>Type an author name:<input type=“text” name=“authorName”><input type=“submit” value=“Send it”><input type=“reset” value=“Clear form”></form>

Perl code:use CGI; $dataIn=new CGI;$dataIn->header();$authorName=$dataIn->param(‘authorName’);print(“<HTML><TITLE>Argument passing test</TITLE>”);print(“The author name is “, $authorName);print(“</HTML>”);exit;

Extract the argument of the HTML form – High level interface for CGI protocol

Dynamically construct the Webpage, i.e., result of user request

Instantiate a CGI object $dataIn

The header() function prints out the“Content-Type: text/html” statement.

param() returns the value of the parameter, i.e., authorName

Include the standard library CGI.pm – no need to deal with CGI protocol

CGI: Some Issues• CGI applications run in a separate process,

created at every invocation – not scalable.

– Remedy: FastCGI – using a single persistent process to handle many requests over its lifetime)

• No resource sharing between application programs (e.g., database connections)

– Remedy: Application servers (next few pages)

Application Servers• The application program is invoked using the

CGI protocol. Each page request results in the creation of a new process → Do not scale well to a large number of simultaneous requests.

• Avoid the process creation overhead: – Application server maintains a pool of threads or

processes and uses them to execute requests– Application server also provides other functionality

• Enable access to heterogeneous data sources (e.g., by providing JDBC drivers)

• Provide APIs for session management

Application Server: Process Structure

C++ Application

JavaBeans

DBMS 1

DBMS 2

HTTP

JDBC

ODBC

The client sends an HTTP request to the server The server directs the

request to be processed by appropriate servlets

The servlets do their processing, then return results to the client normally in the form of HTML documents

Pool of Servlets

Web Browser

Web Server(e.g., Apache)

Application Server

Web Browser

Web server

Servlets

What is a Servlet ?• Servlets are Java’s answer to CGI

programming

• Servlet is a Java class used to extend the capabilities of servers that host applications

• In most cases, servlets extend the specific HttpServlet class for Web servers that communicate with clients via HTTP– doGet (for HTTP GET) and doPost (for HTTP

POST) to receive arguments from HTML forms, and

– sending output back to the client via HTTP

ExtendHttpServlet

HTTP

doGet

GET

Java class

HttpServlet

HttpServlet

takes c

are of

“I/O” Output

Review: HTTP ResponsesThe HTTP response message has three

parts:– status line, e.g., “HTTP/1.1 200 OK” (The

request succeeded and the object is in the body of the message.)

– several header linesDate: Mon, 04 Mar 2002 12:00:00 GMT Server: Apache/1.3.0 (Linux) Last-Modified: Mon, 01 Mar 2002 09:23:24 GMT Content-Length: 1024Content-Type: text/html

– body of the message (which contains the requested object)

Dynamically generated by Servlet in response to an HTTP request

Servlet Generating Web Page as Output

public class ServletTemplate extends HttpServlet {public void doGet(HTTPServletRequest request,

HTTPServletResponse response) . . .

}}

Servlet-GeneratedWebpage Status line

Header lines

Body

Creat a PrintWriter object to compose the body (next page)

Three parts of a Webpage

Use response object to create status code and the headers of the http response

Use request object to read form data

Use response object to construct the output page

Template of a Generic Servlet StructureThis simple servlet just outputs two words “Hello World”import java.io.*;import java.servlet.*;import java.servlet.http.*;

public class ServletTemplate extends HttpServlet {public void doGet(HTTPServletRequest request,

HTTPServletResponse response)throws ServletException, IOException {

PrintWriter out=response.getWriter();out.println(“Hello World”); //Use ‘out’ to send content to

browser}

}

request object is used to read HTML form data. This example has no form to read response

object is used to print “Hello World”

Returns a PrintWriter object that can send character text to the client

Use ‘out’ to compose content that is returned to the client

Servlets: A Complete Examplepublic class ReadUserName extends HttpServlet {

public void doGet( HttpServletRequest request,HttpSevletResponse response)

throws ServletException, IOException {reponse.setContentType(“text/html”);PrintWriter out = response.getWriter();out.println(“<HTML><BODY>\n <UL> \n” +

“<LI>” + request.getParameter(“userid”) + “\n” +“<LI>” + request.getParameter(“password”) + “\n” +“<UL>\n<BODY></HTML>”);

}public void doPost( HttpServletRequest request,

HttpSevletResponse response)throws ServletException, IOException {doGet(request,response);

}}

We extend the servlet to dynamically generate HTML (by writing to the PrintWriter object)

Prepare“Content-Type: text/html” statement in the header of the Web page

Servlet Life Cycle• Servlet container (e.g., Tomcat) is the intermediary

between the Web server and the servlets in the container

HTTP

Pool of Servlets

Web Browser

Web Server(e.g., Apache)

Application Server



• When a request arrives from the Web server:– If an instance of the servlet does not exist, the

container• Loads the servlet class• Creates an instance of the servlet class• Initializes the servlet instance (i.e., places it into service)

– Container calls service() method to allow the servlet to respond to the request. Two objects are passed:

• The HttpServletRequest object contains the client’s HTTP request information, and

• The HttpServletResponse encapsulates the servlet’s response



• When a request arrives from the Web server:– If an instance of the servlet does not exist, the

container• Loads the servlet class• Creates an instance of the servlet class• Initializes the servlet instance (i.e., places it into service)

– Container calls service() method to allow the servlet to respond to the request. Two objects are passed:

• The HttpServletRequest object contains the client’s HTTP request information, and

• The HttpServletResponse encapsulates the servlet’s response• Servlet container calls the destroy method before

removing a servlet from service (e.g., to free memory)

Java Server Pages (JSP)

• Servlets– Generate HTML by writing it to the “PrintWriter”

object– Code first, webpage second

• JavaServer Pages– Written in HTML, Servlet-like code embedded in

the HTML– Webpage first, code second– They are usually compiled into a Servlet

JavaServer Pages• Change the file extensions to “.jsp” instead of “.html”• Embed Java expressions in JSP pages by putting them between

<%= and %>Example: The time is now <%= date %>

• Embed block of Java code (called scriplet) between <% and %>

HTML page

<html>

</html>

JSP page

<% …Java code…%>

scriplet<html>

</html>

Webpage first !

Code second !

Predefined Objects for ScripletA number of useful predefined objects for scriplet:

– out: used to generate HTML, e.g.,<% java.util.Date date = new java.util.Date(); %>

The time is now<% out.println( String.valueOf( date )); %>

– request: returns value of the requested parameter, e.g., request.getParameter(“username”) returns value of the variable username

JavaServer Pages: Example

<html><head><title>Welcome to B&N</title></head><body>

<h1>Welcome back!</h1><% String name=“NewUser”;

if (request.getParameter(“username”) != null) {name=request.getParameter(“username”);

}%>You are logged on as user <%=name%><p>

</body></html>

• If username not entered, log on as “NewUser”

• Scriptlet makes it possible to generate dynamic HTML pages

PHP• php is an HTML-embedded scripting language

• php syntax is borrowed from C, Java, and Perl with a couple of unique PHP-specific feature thrown in

Goal: Allow Web developers to write dynamically generated pages quickly

A Simple php Page<html>

<head>

<title>A Simple PHP Page</title>

</head>

<body>

<?php

Echo “Hello World!”;

Echo “Hello World!!”;

Echo “Hello World!!!”;

?>

</body>

</html>

Embe

dded

PH

P co

de

Start tag

End tag

Semicolon signifies end

of PHP statement

php Variable<html>

<head>

<title>A Simple PHP Page</title>

</head>

<body>

<?php

$hello = “Hello World”;

Echo “$hello ! <br/>”;

?>

</body>

</html>

Embe

dded

PH

P co

de

• Define variable using the form

$variable_name=Value• Variables do not have a fixed

type, but implicitly have the type of the data to which they have been assigned

• Variable names are case sensitive

• Must start with a letter or “_”• Variable with more than one

word should be separated with underscores

Need “$”

Data type determined by assigned value

Use the value in string

DISPLAY: Hello World!

PHP Operators

2 + 4 = 64 – 2 = 2

$addition = 2 + 4;$subtraction = 4 – 2;Echo “2 + 4 =”.$addition.“<br/>”;Echo “4 - 2 =”.$subtraction.“<br/>”;

Display

Concatenation operator

Writing program to generate HTML code

Some PHP Constructs• Basic arithmetic operators: +, -, *, /, % (modulus)

• Comparison operators: ==, !=, <, >, <=, >=

• Assignment operators: +=, -=, *=, /=, %=, =

• Numerically indexed array: $arrayname[index] = value;

• If statement: if (…) { … } else { … }

if (…) { … } elseif (…) { … } else { …}

• Case statement:

Switch ($city){case “Orlando”: echo “Orlando”; break;

case “Tampa”: echo “Tampa”; break; default: echo “Miami”; break}

• While loop: while ( conditional statement is true) { do this code; }

• For loop: for {initialize a counter; conditional statement; increment a counter) { do this code; }

• html forms: php can be used with html forms

• Function: function myfunction(){ … }

PHP Hypertext Processor

When a php webpage is visited, the Web server processes the php code

– Determines which parts to show

– Hides the file operations and math calculation, etc.

– Translates the php into HTML

– Sends the Web page to the visitor’s browser

php - Connecting to MySQL<?php

/*** mysql hostname ***/$hostname = ‘myhost';

/*** mysql username ***/$username = ‘myusername';

/*** mysql password ***/$password = ‘mypassword';

try { $dbh = new PDO("mysql:host=$hostname;dbname=mysql", $username, $password); /*** echo a message saying we have connected ***/ echo 'Connected to database'; }catch(PDOException $e) { echo $e->getMessage(); }?>

PDO (PHP Data Object) is a consistent way to access databases

• JAVA uses JDBC• Perl uses Perl DBI• php uses PDO

Connect to the mySQL

Prepared statement in PHP using PDO

$name = “Steven”;$stmt = $dbh->prepare("SELECT * FROM table WHERE NAME = ? ");$stmt->execute($name);

Create a prepared statement

Execute prepared statement – “?”

is set to the value of the variable $name

Maintaining State

HTTP is stateless• Advantages

– Easy to use: don’t need anything– Great for static-information applications– Requires no extra memory space

• Disadvantages– No record of previous requests means

• No shopping baskets• No user logins• No custom or dynamic content• Security is more difficult to implement

Application State• Server-side state

– Information is stored in a database, or in the application layer’s local memory

• Client-side state– Information is stored on the

client’s computer in the form of a cookie

• Hidden state– Information is hidden within

dynamically created web pagesCookies

Hidden state

Server-side state

Server-Side State

Many types of Server side state:

1. Store information in a database– Data will be safe in the database– BUT: requires a database access to query or update

the information

2. Use application layer’s local memory– Can map the user’s IP address to some state

without disk access– BUT: this information is volatile and takes up lots of

server main memory

Server-Side State

Should use Server-side state maintenance for information that needs to persist, e.g.,

– Old customer orders

– “Click trails” of a user’s movement through a site

– Permanent choices a user makes

Client-side State: Cookies• Storing text on the client which will be passed

to the application with every HTTP request.

• A cookie is a collection of (Name, Value) pairs

• Issues– Can be disabled by client

– Wrongfully perceived as "dangerous," and therefore will scare away potential site visitors if asked to enable cookies

Web serverSend

cookies to Web server

Client State: Cookies• Advantages

– Easy to use in Java Servlets / JSP– Provide a simple way to persist non-essential data on the

client (in the browser cache) even after the browser is closed

• Disadvantages– Limit of 4 KB of information (not bad for most applications)– Users can (and often will) disable them

• Should use cookies to store interactive state– The current user’s login information– The current shopping basket– Any non-permanent choices the user has made

Servlet ReviewUse request object to

read the form

Use response object to compose the Web page

Cookie - How it works• We create a cookie through the Java Cookie class in

the middle tier application code

• The cookie is added to the response object (within the java servlet) to be sent to the client (and stored in browser’s cache)

• Once a cookie is received, the client’s Web browser appends it to all HTTP requests it sends to this site, until the cookie expires

Middle tier

Note: Server does not get anything it does not already know

Creating A Cookie

Cookie myCookie = new Cookie(“username", “jeffd");response.addCookie(myCookie);

You can create a cookie at any time

Create new cookie object with the specified (name, value) pair

Add the cookie to the header of the page

response object in Servlet

Cookie Attributes

Cookie myCookie = new Cookie(“username”, “jeffd”);Cookie.setDomain(www.bookstore.com); // Web site that receives this cookie

Cookie.setSecure(false): // no SSL requiredCookie.setMaxAge(60*60*24*31) // one month lifetimeresponse.addCookie(myCookie);

SSL - Secured version of HTTP protocol

Three attributes of the cookie

http://www.bookstore.com/

Accessing A Cookie

Look for the cookie with name ‘username’

Cookie[] cookies = request.getCookies(); // returns an array of cookies

String theUser;for(int i=0; i < cookies.length; i++) { Cookie cookie = cookies[i]; if(cookie.getName().equals(“username”)) theUser = cookie.getValue();}

// at this point theUser == “username” Read the value of the cookie

Scan the array to find the “username” cookie

(Name, Value) (Name, Value) (Name, Value) (Name, Value) (Name, Value)

getName getValueCookie[]

Hidden State

• Often users will disable cookies

• You can “hide” data in two places:– Hidden fields within a form– Using the path information

• Requires no “storage” of information because the state information is passed inside of each web page

Hidden State: Hidden Fields• Declare hidden fields within a form:

– <input type=‘hidden’ name=‘user’ value=‘username’/>

• Users will not see this information (unless they view the HTML source)

• Typically used when we have variables we want to pass from one form to another without making the user to re-type the information over and over again– We can use this feature to maintain

state, e.g., remember the user in order to update the shopping cart

Send hidden state

Retrieve Hidden

state

1

2

Hidden State:Using Extra Path Information

• The middle tier can embed an identifier, as extra path information, within a document’s URL

• As a user traverses through the site, the dynamically generated html pages can pass the identifier from document to document

• Thus, we can track the documents requested by the user

URL1 + (Kay)

HTML 1

URL2 + (Kay) URL3 + (Kay)Servlet 2

Servlet3

HTML 2 HTML 3

Kay browsed three pages HTML1, HTML2, and HTML3

Hidden State:Using Extra Path Information

• Path information is stored in the URL request:http://server.com/index.htm?user=jeffd

• Can separate ‘fields’ with an & character:index.htm?user=jeffd&preference=pepsi

• There are mechanisms to parse this field in Java. Check out the javax.servlet.http.HttpUtils parserQueryString() method.

Extra information

PHP cookies<?php$cookie_name = "user";$cookie_value = "John Smith";setcookie($cookie_name, $cookie_value, time() + (86400 * 30), "/"); // 86400 = 1 day?><html><body>

<?phpif(!isset($_COOKIE[$cookie_name])) { echo "Cookie named '" . $cookie_name . "' is not set!";} else { echo "Cookie '" . $cookie_name . "' is set!<br>"; echo "Value is: " . $_COOKIE[$cookie_name];}?>

</body></html>

• Use setcookie() to create a cookie. • Setcookie() function must appear

before <html> tag• Use setcookie again to modify a cookie

“/” indicates that cookie is available in entire website.

Alternatively, a directory can be specified

Find out if the cookie is set

To delete a cookie, set the expiration date in the past, e.g., setcookie(“user”, “”, time() – 3600);

PHP Session• Start a session using: session_start();

• Close a session using: session_destroy();

• Name-value pairs are stored in an array called $_SESSION on server side– To register a name-value pair:

$_SESSION[“some_name”] = some_value;– To extract value of a session variable

$value = $_SESSION[“SOME_NAME”];

PHP Session

• A session stores name-value pairs to be used across multiple pages until the user closes the browser (e.g., It can be used to implement shopping cart)

PHP Session - Example 1<?php// Start the sessionsession_start();?><!DOCTYPE html><html><body>

<?php// Set session variables$_SESSION["favsport"] = “tennis";$_SESSION["favfood"] = “Italian";echo "Session variables are set.";?>

</body></html>

Result: Session variables are set.

Session_start() function must be the very first thing, before any HTML tags, in the document

They can be retrieved and used in subsequent pages

PHP Session - Example 2<?phpsession_start();?><!DOCTYPE html><html><body>

<?php// Echo session variables that were set on previous pageecho "Favorite sport is " . $_SESSION["favsport"] . ".<br>";echo "Favorite food is " . $_SESSION["favfood"] . ".";?>

</body></html>

Result: Favorite sport is tennis. Favorite food is Italian.

• Session variables are not automatically passed to the next page

• They must be retrieved from the session

Multiple state methodsTypically all methods of state maintenance are used:

– User logs in and this information is stored in a cookie– User issues a query which is stored in the path

information– User places an item in a shopping cart cookie– User purchases items and credit-card information is

stored/retrieved from a database– User leaves a click-stream which is kept in a log on

the web server (which can later be analyzed)

Summary

We covered:• Internet Concepts (URIs, HTTP)

• Web data formats– HTML, XML, DTDs

• Three-tier architectures

• The presentation layer– HTML forms, Javascript, Stylesheets.

• The middle tier– CGI, application servers, Servlets, JavaServer

Pages, php, maintaining state (cookies)

Date post:	25-Dec-2015
Category:	Documents
Upload:	todd-harrell
View:	214 times
Download:	0 times

Student Evaluation Student evaluation of course instruction is now available until 7am on April 25...

Documents