ecmm 6000, fall 2004 net 1 network (internet) applications www client-server client & server...

ECMM 6000, Fall 2004 net 1

Network (internet) applications

• WWW• Client-server• Client & server side processing• (Web services)


World Wide Web

Your Machine

InternetBorg

Index.html

Web server

Web browser

Parts of the puzzle•URL•HTTP•HTML

Public_html


• Lightweight protocol that browsers and servers use to communicate with one another

• Internet protocol for transferring Web pages• Runs in the application layer of the TCP/IP model• HTTP session begins when a client’s browser requests a

Web page. Once the server responds by sending the page requested, the HTTP session ends

HTTP: Hyper Text Transfer Protocol


GET /index.html HTTP/1.1User-Agent: Lynx/2.4Connection: Keep-AliveHost: www.openaccess.comAccept: text/html

client request:

Server response: HTTP/1.1 200 OKDate: Thu, 22 July 1998 18:40:55 GMTServer: Apache 1.3.5 (Unix) PHP/3.0.6Last-Modified: Mon, 19 July 1997 16:03:22 GMTContent-Type: text/htmlContent-Length: 12987...

MIME type (Multipurpose Internet Mail Extension)


HTTP is stateless!!!

• stateless because every request that a browser makes opens a new connection that is immediately closed after the document is returned

• even a web page with many objects (graphics, sound, video, etc) requires separate HTTP requests for each object

• each operation is unaware of any other connection• the server cannot maintain state information about

successive requests easily


Client-Server Model

Client B

Client A Server X

Server Y

Internet

file

file

Not mainframe-terminal, not necessarily big vs. small (rather specialized)


Type of servers

• Database servers• Web servers• Mail servers• Print Servers• Object servers• Groupware servers• etc


A three-tier architecture

What is middleware?


Peer-to-peer vs. Client-Server

• The new hype• Uniform role of all nodes• Direct communication• Decentralized control• Scalable


Web client-server

• Web client (browser): an application program that runs on a client computer and requests and displays web pages– can also support other features such as email and

newsgroups

• Web server: a server-side application program that runs on a host computer and responds to requests for web pages


Commercial Web browsersStatistics from August 20021:• Internet Explorer (96%)• Netscape Navigator (3.4%)• Other browsers (0.6%)

– Opera – fastest browser– NeoPlanet - customizable,

including skins

• How has IE become such a dominant player in the browser market?

1Source: http://www.statmarket.com/cgi-bin/sm.cgi?sm&feature&week_stat retrieved Sept. 15, 2002.

http://www.statmarket.com/cgi-bin/sm.cgi?sm&feature&week_stat


Web client/server communication

• Like any other client/server application, web browsers and servers need a way to:1. Locate each other so they can send requests and

responses back and forth • Uniform Resource Locator (URL)

2. Communicate with one another• Hypertext Transport Protocols (HTTP)

(See networking section)


(X)HTML

• Hypertext Markup Language– presentation language – embedded text that tells the client’s browser how to

display the page elements– standard formatting language that all browsers

understand• theoretically !• example tag

– <h1> ECMM 6000 </h1>

ECMM 6000


Interactivity

• HTML is a presentation language – not a programming language

• controls the appearance of the information on the client’s screen but does not support processing or manipulating information

• early web browsers were limited to displaying static pages

• But … many business applications require interactivity Client-side & server-side processing


Thin vs. Fat Clients

• “where the processing takes place”

• Early browsers were thin clients – primary function was to display web documents containing text and simple graphics

• Today’s browsers are not thin, they provide a great deal of functionality and processing on the client side– Scripting, active object support, email, web page authoring,

audio, streaming media, Instant messaging


Client-side processing

• Examples:1. HTML

2. [Cascading style sheets (CSS)]

3. JavaScript

4. VBScript

5. Applet

6. Plug-ins


HTML

<html><TITLE> HTML HST Calculator </TITLE>

<BODY bgcolor="#FFFF80"><CENTER>

<H3>HST Calculator </H3>To compute the amount of HST you need to paytake the price of the item and multiply it by 0.15

</BODY></html>


Client-side interactivity

• Forms were added to HTML to provide data entry– radio buttons, check boxed, drop-down selection lists

• Still, no processing on the client side

• Solution, embed the necessary program logic in the HTML stream and let the browser execute the instructions on the client side


2. Plug-ins

• A plug-in is a software routine that extends the capability of a larger application

• Allows a browser to process nonstandard, often proprietary animation, video, and audio files embedded in HTML documents


3. Scripts

• a Script is a set of macro-like instructions– JavaScript, Jscript, VBScript

• Scripts are normally embedded in an HTML document as a text string between a set of <script> tags or reference a script file between the tags– can control the objects, content, and interactions within the browser– when first introduced one of its major purposes was to validate the

completeness and accuracy of data input to a browser-based form

• See http://www.w3.org/TR/REChtml40/interact/scripts.html for details

http://www.w3.org/TR/REChtml40/interact/scripts.html


3. Scripts (continued)

• Various script functions:– Client-side form validation– Client-side calculations– Client-side lookup databases– Client-side image maps– Providing interactive feedback– Personalizing a document before it is displayed– Manipulating Java applets or ActiveX objects within a page

Source: Turban et al., Appendix C, Table C.1


Forms and JavaScript<HTML> <TITLE> HST calculator </TITLE>

<SCRIPT LANGUAGE="JavaScript"> function HST(theForm) { var price=parseInt(theForm.price.value); var hst=price*.15; theForm.result.value=hst; } </SCRIPT>

<BODY> <CENTER> <H3>HST Calculator </H3> <FORM> <input type="text" name="price" size="6" value="0"> <input type="button" value="HST" onClick="HST(this.form)"> <input type="text" name="result" size="6" value=""> </FORM> </BODY></HTML>

http://www.cs.dal.ca/~tt/ECMM6010/hst.htm

http://www.cs.dal.ca/~tt/ECMM6010/hst.htm


DOM: Document Object Model


JavaScript example: form validation

<HTML> <HEAD> <TITLE>E-Commerce</TITLE> </HEAD>

<SCRIPT LANGUAGE = "JavaScript"> function valcheck() { if(document.forms[0].elements[0].value == "") {alert("Please enter a name"); } } </SCRIPT>

<BODY BGCOLOR = "#FFFFFF"> <H2>JavaScript Validation</H2> <FORM METHOD = POST> <P> Name: <INPUT TYPE = "text" NAME = "T1" SIZE ="32"> <P> <INPUT TYPE="button" NAME="B1" VALUE="Submit" onClick="valcheck()"> </FORM> </BODY></HTML>

http://www.cs.dal.ca/~tt/ECMM6010/validate.htm

http://www.cs.dal.ca/~tt/ECMM6010/validate.htm


JavaScript versions

• Originally introduced by Netscape

• Different versions of JavaScript (Jscript)

• ECMA standard (“ECMA International is an industry association founded in 1961 and dedicated to the standardization of Information and Communication Technology (ICT) Systems” http://www.ecma-international.org)

• Challenge of programming for different version and support of

JavaScript ( use object and method detection)

http://www.ecma-international.org/


VBScript

<HTML> <TITLE> HST calculator (VBScript) </TITLE>

<SCRIPT LANGUAGE="VBScript">

Sub HSTButton_OnClick() dim price, hst price=CInt( Document.Forms( 0 ).price.Value) hst = price * .15 Document.forms( 0 ).result.Value = hst End Sub

</SCRIPT>

<BODY> <CENTER> <H3>HST Calculator </H3> <FORM> <input type="text" name="price" size="6" value="0"> <input type="button" name="HSTButton" value="HST"> <input type="text" name="result" size="6" value=""> </FORM> </BODY></HTML>


4. Applets

• scripts are not full-featured programming languages• to add more interactivity, applets can be downloaded to a client• applets are small programs executed by an interpreter program

(included in browser)• an applet’s file name is inserted into the body of an HTML document

between <applet> tags• an applet is stored in a web server file and downloaded to the client

upon request• most applets are written in Java• CANNOT write to client’s machine (security)

NOT (anymore) widely supported, but can be still useful for specific user application


Applet (cont.)

<html><TITLE> HTML and forms sample </TITLE>

<BODY bgcolor="#FFFF80"><CENTER><H3>HST Calculator </H3>

To compute the amount of HST you need to pay, enter the price of the item and click the HST Button.<br>The information will be sent back to the server and yourGST computed

<applet code="com.mindprod.canadiantax.CanadianTaxCalculator.class" archive="canadiantax.jar" width="600" height="400" vspace="10" hspace="10" alt="Sorry, you need Java to run this Applet">

</applet>

</BODY></html>

Another example with mouse interaction

http://www.cs.dal.ca/~tt/ECMM6010/MouseApplet/MouseAppletExample.html


Cascading Style Sheets

• Allows you to specify the style of your web page elements separately from the structure of your document– “separation of presentation and content”

• Benefit of greater manageability

• Inline, Header, or External (examples)


Cascading style sheet - inline

<html><TITLE> CSS Inline Example </TITLE>

<BODY bgcolor="#FFFF80"><CENTER><H3 STYLE = "color: #0000FF">HST Calculator </H3>

To compute the amount of HST you need to pay, take the price of the item and multiply it by 0.15

<H3> End of Instructions </H3>

</BODY></html>


Cascading style sheet - header<html><HEAD><TITLE> CSS Header Example </TITLE>

<STYLE TYPE = "text/css">

H3 {color: #0000FF} A:hover {background-color: #CCFFCC} .red {color: red}

</STYLE></HEAD>


To compute the amount of HST you need to pay, take the price of the item and multiply it by 0.15 or go to the <a href=javascript_example.html>javascript_example.html</A>


<H3 CLASS = "red">END OF WEB PAGE </H3>

</BODY></html>


Cascading style sheet - external<html><HEAD><TITLE> CSS External Example </TITLE><LINK REL = "stylesheet" TYPE = "text/css" HREF = "styles_example.css"></HEAD>


To compute the amount of HST you need to pay, take the price of the item and multiply it by 0.15 or go to the <a href=javascript_example.html>javascript_example.html</A>


<H3 CLASS = "red">END OF WEB PAGE </H3>

</BODY></html>

styles_example.css file

H3 {color: #0000FF}

A:hover {background-color: #CCFFCC}

.red {color: red}


Dynamic HTML• “allow any element of a page to be changeable at any time” • DHTML is not a language! • DHTML describes the abstract concept of breaking up a page into

manipulatable elements, and exposing those elements to a scripting language which can perform the manipulations

• Often programmed using a combination of HTML, Cascading Style Sheets, and JavaScript

• Used for:1. Positioning; precisely placing blocks of content on the page and, if desired,

moving these blocks around.2. Style modifications; on-the-fly altering the aesthetics of content on the page.3. Event handling; how to relate user events to changes in positioning or other

style modifications.

Source: WDVL: Dynamic HTML, retrieved from http://www.wdvl.com/Authoring/DHTML/, September 27, 2002

http://www.wdvl.com/Authoring/DHTML/


DHTML Object Model

<HTML><TITLE> Javascript sample </TITLE>

<SCRIPT LANGUAGE="JavaScript">

function GST(theForm){var price=parseInt(theForm.price.value)var gst=price*.15theForm.result.value=gstdocument.body.style.backgroundColor = "cyan“}

</SCRIPT><BODY bgcolor="#FFFF80">

<CENTER><H3>HST Calculator </H3><FORM>

<input type="text" name="price" size="6" value="0"><input type="button" value="GST" onClick="GST(this.form)"><input type="text" name="result" size="6" value="">

</FORM></BODY></HTML>


DHTML Event<HTML><TITLE> DHTML sample #2 </TITLE>

<SCRIPT LANGUAGE="JavaScript">

function GST(theForm){ var price=parseInt(theForm.price.value) var gst=price*.15 theForm.result.value=gst document.body.style.backgroundColor = "cyan"}

function redtext(){ calctitle.style.color = "red"}

</SCRIPT><BODY bgcolor="#FFFF80" ONMOUSEMOVE = "redtext()">

<CENTER><H3 ID= "calctitle" >HST Calculator </H3><FORM>

<input type="text" name="price" size="6" value="0"><input type="button" value="GST" onClick="GST(this.form)"><input type="text" name="result" size="6" value="">

</FORM></BODY></HTML>


State

• Web is inherently stateless– Fine for regular browsing

• Many web applications require a series of steps– Requires the ability to “remember” the results of previous steps

• Example: online banking– enter id and password, system authenticates you, should be able to

check balances, make payments, etc. You shouldn’t have to keep re-identifying yourself

• maintaining state on server– imagine a site with 1,000s of hits at any instance


Cookies

• Maintain state by storing a small text file on the client computer

– holds information about the user and/or the state of the application

– when the browser transmits new data or requests a new page, the cookie is returned to the server where its contents can be used to “remind” the server of the stat

session-id-time1064822400amazon.com/153629234790402959113518089216029589790*session-id103-8845915-6364609amazon.com/153629234790402959113518105216029589790*ubid-main430-9692026-3608944amazon.com/153629163413763196126918917216029589790*

File tt@amazon[1].txt:


Cookies with server-side databases

• Server-side database holds a set of data that reflect the session contents

• Cookie holds the user’s database access key• Example (Davis and Benamati, pg. 89-90):

– Amazon.ca1. Customer follows a hyperlink to amazon.ca2. Server stores a set of session data (initial contents of the shopping

cart) in a database and created a session cookie containing the user’s database access key

3. Session data and cookie are returned to the client as part of the page’s HRML stream

4. Client browser stores the session data and the cookie in memory5. Whenever the customer changes the shopping cart, the session data

and cookie are transmitted back to the server


Personalized Web Pages

• Store a cookie which holds the individual’s information

• The cookie gets uploaded to the server when the page is requested to provide the “personal” information

Cookies & Security ???Cookies & Security ???


Server-side Processing


Web server

• a server-side application program that runs on a host computer and responds to requests for web pages (i.e. services HTTP requests)

• Other possible functions:– access control– run scripts/programs – management and administration of server functions and Web

site contents– Log transactions

• Two main commercial web servers:– Apache (64.6%)– Microsoft Internet Information Server (IIS) (23.5%)– The Netcraft Web Server Survey, October 2003, retrieved from

http://www.netcraft.com/survey/, Oct. 10, 2002


Market Share for Top Servers Across All Domains August 1995 - October 2003

http://www.netcraft.com/survey/, Oct. 10, 2002http://www.netcraft.com/survey/, Oct. 10, 2002


Static vs. Dynamic Web pages• Most basic function of web servers is to distribute HTML documents• HTML = Static

– all clients see the same content

• However, eCommerce is more than just displaying a “static catalog”– we want to customize the web page to suit the information the

user is looking for?– We want to send real-time data (i.e. current date/time)?– We want to do sophisticated processing on user-supplied data

and report results


Client-side vs. Server-side processing

• Dynamically create content that doesn’t reside in the HTML pages– Create and modify information “on-the-fly”– Data is often part of databases that resides elsewhere

(on other disks or even other servers)


Client- vs. Server-side Processing• Client

– Validation, interactivity, enhancing web pages– Reduces traffic to/from server– Reduces the amount of the work the server needs to perform (run

100 programs on 100 client computers instead of 100 program on a server)– Dependent on browser functionality (e.g. is the specific technology

supported by the individual browser) – Scripts are visible– Great way to distribute little application programs (e.g. currency

converter)

• Server– Generate custom responses for clients– Runs exclusively on the server – no cross-platform issues– Scripts not visible to client – more proprietary


Server-side processing

• Need an intermediary to take the inquiries from the client and gather the information from the database

“middleware”

“three-tier-architecture”


CGI Programming (Common Gateway Interface)

• “Set of standard methods and routines used to write stand-alone software programs that know how to receive requests from a Web server and return data to the server.” 1

• “a specification for transferring information between a Web server and a CGI program.”2

• Allows you to3:– create an executable that the web server may call on demand– pass incoming HTTP GET or POST data to the CGI script– send CGI generated answers back to the browser

• CGI programs can be written in a variety of programming languages: Perl, VB, C/C++, Java, etc.

Sources: 1) Turban, Web Programming, Appendix C. 2) Webopedia. Retrieved Sept. 22, 2002 from: http://www.webopedia.com/TERM/D/DOM.html,. 3)CGI (Common Gateway Interface), Selena Sol, October 4, 1999, retrieved Sept. 22, 2002 from: http://www.wdvl.com/Authoring/Tools/Tutorial/cgi.html,.

http://www.webopedia.com/TERM/D/DOM.html


http://www.wdvl.com/Authoring/Tools/Tutorial/cgi.html


Perl

• "Practical Extraction and Report Language" • freely available for most operating systems• powerful string manipulation functions• easy (?) to learn; can be used to implement most sophisticated

processing• “monolithic code”

• Good (quick) introduction: http://www.cgi101.com/• presentation by Richard Carpenter

http://www.cgi101.com/


CGI Programming (Common Gateway Interface)

<HTML><HEAD><TITLE>Simple CGI Example</TITLE></HEAD> <BODY BGCOLOR = "#FFFF80">

<A href="http://www.cs.dal.ca/~tt/cgi-bin/hello.cgi"> Hello World CGI Script</A>

</BODY></HTML>

ExternalExternalDataData

Web Browser

Web Server

DynamicHTMLPage

HTTP

CGICGIProgramProgram

Static HTML Pages


hello.cgi

#!/opt/bin/perl#hello.cgi: a simple Perl CGI example

print "Content-type: text/html\n\n"; #Note that we output two carriage returns after the#content type. This is very important as it marks#the end of the CGI "header" and the beginning of#the document to be sent to the browser.

print "<head>\n";print "<title>Hello World CGI</title>\n";print "</head>\n";print "<body>\n";print "<h1>Hello, World !</h1>\n";print "</body>\n";

Where the perl interpreter is located

Generate the HTML head & body

What type of data is being sent to the browser

Two carriage returns

http://www.cs.dal.ca/~tt/cgi-bin/hello.cgi




PERL << PRINT Command

• Doesn’t require a print statement on every line

print "Content-type: text/html\n\n";

print << “ending_print_tag”;

<head>

<title>Hello, World</title>

</head>

<body>

<h1>Hello, World!</h1>

</body>ending_print_tag


Passing Data

• Normally use forms to pass user input data to a web server

http://www.cs.dal.ca/~tt/ECMM6010/PerlExample.htm

<html><head><title>Perl Example</title></head><body>

<p>Please enter your name:</p><form method="GET" action="http://www.cs.dal.ca/~tt/cgi-bin/getenv.cgi"> <input type="text" name="Name" size="20"> <input type="submit" value="Submit" name="B1"></form>

</body></html>

http://www.cs.dal.ca/~tt/ECMM6010/PerlExample.htm


GET vs. POST

• Two methods that data can be sent to the CGI program:– GET

• GET sends data appended to the URL stringhttp://www.domain.com/dir/file?data1&data2&data3

– POST• POST sends data after all the request headers have been sent

to the server• Uses the “content length” header to let the CGI program know

how much data to read


Processing Input Data

#!/opt/bin/perl#hello.cgi: a simple Perl CGI example

print "Content-type: text/html\n\n";

#read(STDIN, $buffer, $ENV{'CONTENT_LENGTH'});#@pairs = split(/&/, $buffer);@pairs = split(/&/, $ENV{'QUERY_STRING'});foreach $pair (@pairs) { ($name, $value) = split(/=/, $pair); $value =~ tr/+/ /; $value =~ s/%([a-fA-F0-9][a-fA-F0-9])/pack("C", hex($1))/eg; $FORM{$name} = $value; }

print << "ending_print_tag";<title>Hello $FORM{'name'}</title></head><body><h1>Hello $FORM{'name'}</h1></body>ending_print_tag

Used for POST

Used for GET


Most common CGI Bugs

• Make sure your file and directory are executable– Give both your file and directories read and execute permissions

(chmod 755 file.cgi)• Perl scripts will never work if the permissions on the file are 777

– Make sure perl is in the directory you specified ( /opt/bin/perl )

– Check that your program executes ok (type it in at the command line hello2.cgi )

– Have the interpreter check the syntax without actually running it (perl –cw hello2.cgi)

– Make sure there are no hidden characters when transferring files from PC (e.g. ^M)


Servlets

• CGI programs in Java• Servlets are Java programs that extend HttpServlets and

implementing specific methods that are called by a get or post request

• Discussed in Darrel Ince, Developing Distributed and E-Commerce Applications, Chapter 7


Limitations of CGI Programming

• CGI programs are separate executables or interpreted scripts

• Other limitations:– CGI introduces security holes– Limited by HTTP– CGI can be ugly

http://wdvl.internet.com/Authoring/Scripting/WebWare/Server/CGIsux.html


Solution

• Embed the processing into the web server (and web page) itself

• Other server-side scripting languages:– Server Side Includes (SSI)– Microsoft’s Active Server Pages (ASP)– Apache’s Hypertext Preprocessor (PHP)– Java Server Pages (JSP)– ColdFusion’s Markup Language (CFML)


Server-side scripts

• A Web page that contains script statements interspersed with HTML tags– <% ….. %> specialized script tag

• When the web page is processed it is first handed off to the appropriate server-side script processor– .shtml, .asp, .php, .cfm– The script code gets executed and the resulting page sent back

to the browser via Web server

SSI (Server Side Includes)

• Commands are integrated into an HTML page using special tags

• The web server understands the special tags and translates the code on the fly

• The result is embedded into the HTML document which is then passed to the browser

• Syntax:– 

• Warnings:– Can be costly to parse files on heavily loaded servers– Can be a security risk

hello4.shtml

<html><title>Hello World</title></head><body><h1>Hello World</h1>

The Current Date is:<br>

</body>

</html>


SSI (old technology)

• What happens:– Server gets request for a page (.shtml)– Server checks the page for SSI commands– Server executes those commands and inserts new

values into the page– Server send the new page to the browser


Server Pages

• Java Server Pages (Sun) .jps• Active Server Pages (Microsoft) .asp

• Instructions for the server are included in the web page

• The server notices the extension and looks for those instructions and executes them


JavaServer Pages (JSP) & Servlets

• Java servlets – small Java programs that run on a Web server and build Web pages. They are specified in a web page and run on the web server to modify the web page before it is sent to the user.

• Java Server Pages – web page coding standard to combine static HTML with dynamically-generated HTML (created by JSP scripts, and Java)


date.jsp

<HTML> <HEAD> <TITLE>JSP Example</TITLE> </HEAD> <BODY BGCOLOR="ffffcc"> <CENTER> <h2> The current date is <%= new java.util.Date()%>. </h2> </CENTER> </BODY> </HTML>


Active Server Pages

• Microsoft’s version to dynamically create Web pages

• Utilizes VBScript or Jscript• Has a robust set of objects for serious

programming, allows developers to code custom tags, and can instantiate server side resources (COM components)


hello.asp

<%@ Language=VBScript %>

<HTML> <HEAD> <TITLE>Example 1</TITLE> </HEAD>

<BODY bgcolor=Lime aLink=DarkTurquoise> <P></P> <% Response.Write("Hello, world!") %> </BODY> </HTML>


Further topics

– .NET – J2EE– WebSphere– Web Services Semantic web


Web service architecture

Adopted from Clabby, 2002


SOAP

• Simple Object Access Protocol• XML-based protocol• Exchange of information between applications

over HTTP• Seems to become the widely accepted solution

to electronic data interchange (EDI) and remote procedure call (RPC, CORBA, etc)


Latest Web Service Architecture (W3C, 2004)


References

• Definitions from Webopedia: http://www.webopedia.com

• Turban, Web Programming, Appendix C. • Selena Sol Tutorials: http://www.wdvl.com

/Authoring/Tools/Tutorial/



http://www.wdvl.com/Authoring/Tools/Tutorial/



ecmm 6000, fall 2004 net 1 network (internet) applications www client-server client & server...

Documents

web pages slide

web server web browser

newsgroups web server

html slide

specialized slide

web clientserver communication

processing web services

world wide web