Title: net 1
1Network (internet) applications
- WWW
- Client-server
- Client server side processing
- (Web services)
2World Wide Web
Internet
Web server
Borg
Public_html
Index.html
- Parts of the puzzle
- URL
- HTTP
- HTML
Web browser
Your Machine
3HTTP Hyper Text Transfer Protocol
- 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 clients browser
requests a Web page. Once the server responds by
sending the page requested, the HTTP session ends
4GET /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 184055
GMTServer Apache 1.3.5 (Unix)
PHP/3.0.6Last-Modified Mon, 19 July 1997
160322 GMTContent-Type text/htmlContent-Lengt
h 12987...
MIME type (Multipurpose Internet Mail Extension)
5HTTP 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
6Client-Server Model
Not mainframe-terminal, not necessarily big vs.
small (rather specialized)
7Type of servers
- Database servers
- Web servers
- Mail servers
- Print Servers
- Object servers
- Groupware servers
- etc
8A three-tier architecture
What is middleware?
9Peer-to-peer vs. Client-Server
- The new hype
- Uniform role of all nodes
- Direct communication
- Decentralized control
- Scalable
10Web 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
11Commercial Web browsers
- Statistics 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?
smfeatureweek_stat retrieved Sept. 15, 2002.
12Web client/server communication
- Like any other client/server application, web
browsers and servers need a way to - Locate each other so they can send requests and
responses back and forth - Uniform Resource Locator (URL)
- Communicate with one another
- Hypertext Transport Protocols (HTTP)
- (See networking section)
13(X)HTML
- Hypertext Markup Language
- presentation language
- embedded text that tells the clients browser how
to display the page elements - standard formatting language that all browsers
understand - theoretically !
- example tag
- lth1gt ECMM 6000 lt/h1gt
ECMM 6000
14Interactivity
- HTML is a presentation language not a
programming language - controls the appearance of the information on the
clients 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
15Thin 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 - Todays 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
16Client-side processing
- Examples
- HTML
- Cascading style sheets (CSS)
- JavaScript
- VBScript
- Applet
- Plug-ins
17HTML
- lthtmlgt
- ltTITLEgt HTML HST Calculator lt/TITLEgt
- ltBODY bgcolor"FFFF80"gt
- ltCENTERgt
- ltH3gtHST Calculator lt/H3gt
- To compute the amount of HST you need to pay
- take the price of the item and multiply it by
0.15 - lt/BODYgt
- lt/htmlgt
18Client-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
192. 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
203. 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 ltscriptgt 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/script
s.html for details
213. 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
22Forms and JavaScript
ltHTMLgt ltTITLEgt HST calculator lt/TITLEgt
ltSCRIPT LANGUAGE"JavaScript"gt function
HST(theForm) var
priceparseInt(theForm.price.value)
var hstprice.15 theForm.result.valu
ehst lt/SCRIPTgt ltBODYgt
ltCENTERgt ltH3gtHST Calculator lt/H3gt
ltFORMgt ltinput type"text"
name"price" size"6" value"0"gt
ltinput type"button" value"HST"
onClick"HST(this.form)"gt ltinput
type"text" name"result" size"6" value""gt
lt/FORMgt lt/BODYgt lt/HTMLgt
http//www.cs.dal.ca/tt/ECMM6010/hst.htm
23DOM Document Object Model
24JavaScript example form validation
ltHTMLgt ltHEADgt ltTITLEgtE-Commercelt/TITLE
gt lt/HEADgt ltSCRIPT LANGUAGE
"JavaScript"gt function valcheck()
if(document.forms0.elements0.value
"") alert("Please enter a
name") lt/SCRIPTgt ltBODY
BGCOLOR "FFFFFF"gt ltH2gtJavaScript
Validationlt/H2gt ltFORM METHOD POSTgt
ltPgt Name ltINPUT TYPE "text" NAME "T1"
SIZE "32"gt ltPgt ltINPUT TYPE"button"
NAME"B1" VALUE"Submit" onClick"valcheck()"gt
lt/FORMgt lt/BODYgt lt/HTMLgt
http//www.cs.dal.ca/tt/ECMM6010/validate.htm
25JavaScript 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-internat
ional.org) - Challenge of programming for different version
and support of JavaScript (? use object and
method detection)
26VBScript
ltHTMLgt ltTITLEgt HST calculator (VBScript)
lt/TITLEgt ltSCRIPT LANGUAGE"VBScript"gt
Sub HSTButton_OnClick() dim price,
hst priceCInt( Document.Forms( 0
).price.Value) hst price .15
Document.forms( 0 ).result.Value hst
End Sub lt/SCRIPTgt ltBODYgt
ltCENTERgt ltH3gtHST Calculator lt/H3gt
ltFORMgt ltinput type"text"
name"price" size"6" value"0"gt
ltinput type"button" name"HSTButton"
value"HST"gt ltinput type"text"
name"result" size"6" value""gt lt/FORMgt
lt/BODYgt lt/HTMLgt
274. 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 applets file name is inserted into the body
of an HTML document between ltappletgt 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 clients machine (security)
NOT (anymore) widely supported, but can be still
useful for specific user application
28Applet (cont.)
- lthtmlgt
- ltTITLEgt HTML and forms sample lt/TITLEgt
- ltBODY bgcolor"FFFF80"gt
- ltCENTERgt
- ltH3gtHST Calculator lt/H3gt
- To compute the amount of HST you need to pay,
enter the price of the item and - click the HST Button.ltbrgt
- The information will be sent back to the server
and your - GST computed
- ltapplet code"com.mindprod.canadiantax.CanadianTax
Calculator.class" archive"canadiantax.jar"
width"600" height"400" vspace"10" hspace"10"
alt"Sorry, you need Java to run this Applet"gt - lt/appletgt
- lt/BODYgt
- lt/htmlgt
Another example with mouse interaction
29Cascading 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)
30Cascading style sheet - inline
- lthtmlgt
- ltTITLEgt CSS Inline Example lt/TITLEgt
- ltBODY bgcolor"FFFF80"gt
- ltCENTERgt
- ltH3 STYLE "color 0000FF"gtHST Calculator lt/H3gt
- To compute the amount of HST you need to pay,
take the price of the item and - multiply it by 0.15
- ltH3gt End of Instructions lt/H3gt
- lt/BODYgt
- lt/htmlgt
31Cascading style sheet - header
- lthtmlgt
- ltHEADgt
- ltTITLEgt CSS Header Example lt/TITLEgt
- ltSTYLE TYPE "text/css"gt
- H3 color 0000FF
- Ahover background-color CCFFCC
- .red color red
- lt/STYLEgt
- lt/HEADgt
- ltBODY bgcolor"FFFF80"gt
- ltCENTERgt
- ltH3gtHST Calculator lt/H3gt
- 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 lta
hrefjavascript_example.htmlgtjavascript_example.ht
mllt/Agt
32Cascading style sheet - external
- lthtmlgt
- ltHEADgt
- ltTITLEgt CSS External Example lt/TITLEgt
- ltLINK REL "stylesheet" TYPE "text/css" HREF
"styles_example.css"gt - lt/HEADgt
- ltBODY bgcolor"FFFF80"gt
- ltCENTERgt
- ltH3gtHST Calculator lt/H3gt
- 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 lta
hrefjavascript_example.htmlgtjavascript_example.ht
mllt/Agt - ltH3gt End of Instructions lt/H3gt
- ltH3 CLASS "red"gtEND OF WEB PAGE lt/H3gt
- lt/BODYgt
- lt/htmlgt
33Dynamic 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
- Positioning precisely placing blocks of content
on the page and, if desired, moving these blocks
around. - Style modifications on-the-fly altering the
aesthetics of content on the page. - 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
34DHTML Object Model
- ltHTMLgt
- ltTITLEgt Javascript sample lt/TITLEgt
- ltSCRIPT LANGUAGE"JavaScript"gt
- function GST(theForm)
- var priceparseInt(theForm.price.value)
- var gstprice.15
- theForm.result.valuegst
- document.body.style.backgroundColor "cyan
- lt/SCRIPTgt
- ltBODY bgcolor"FFFF80"gt
- ltCENTERgt
- ltH3gtHST Calculator lt/H3gt
- ltFORMgt
- ltinput type"text" name"price" size"6"
value"0"gt - ltinput type"button" value"GST"
onClick"GST(this.form)"gt - ltinput type"text" name"result" size"6"
value""gt - lt/FORMgt
35DHTML Event
- ltHTMLgt
- ltTITLEgt DHTML sample 2 lt/TITLEgt
- ltSCRIPT LANGUAGE"JavaScript"gt
- function GST(theForm)
- var priceparseInt(theForm.price.value)
- var gstprice.15
- theForm.result.valuegst
- document.body.style.backgroundColor "cyan"
-
- function redtext()
-
- calctitle.style.color "red"
-
- lt/SCRIPTgt
- ltBODY bgcolor"FFFF80" ONMOUSEMOVE
"redtext()"gt - ltCENTERgt
36State
- 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 shouldnt have to keep re-identifying
yourself - maintaining state on server
- imagine a site with 1,000s of hits at any
instance
37Cookies
File tt_at_amazon1.txt
session-id-time 1064822400 amazon.com/ 1536 292347
9040 29591135 180892160 29589790 session-id 103-
8845915-6364609 amazon.com/ 1536 2923479040 295911
35 181052160 29589790 ubid-main 430-9692026-3608
944 amazon.com/ 1536 2916341376 31961269 189172160
29589790
- 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
38Cookies with server-side databases
- Server-side database holds a set of data that
reflect the session contents - Cookie holds the users database access key
- Example (Davis and Benamati, pg. 89-90)
- Amazon.ca
- Customer follows a hyperlink to amazon.ca
- Server stores a set of session data (initial
contents of the shopping cart) in a database and
created a session cookie containing the users
database access key - Session data and cookie are returned to the
client as part of the pages HRML stream - Client browser stores the session data and the
cookie in memory - Whenever the customer changes the shopping cart,
the session data and cookie are transmitted back
to the server
39Personalized Web Pages
- Store a cookie which holds the individuals
information - The cookie gets uploaded to the server when the
page is requested to provide the personal
information
Cookies Security ???
40 41Web 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
42Market Share for Top Servers Across All Domains
August 1995 - October 2003
http//www.netcraft.com/survey/, Oct. 10, 2002
43Static 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
44Client-side vs. Server-side processing
- Dynamically create content that doesnt 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)
45Client- 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
46Server-side processing
- Need an intermediary to take the inquiries from
the client and gather the information from the
database - ? middleware
- ? three-tier-architecture
47CGI 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.h
tml,.
48Perl
- "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
49CGI Programming (Common Gateway Interface)
- ltHTMLgt
- ltHEADgt
- ltTITLEgtSimple CGI Examplelt/TITLEgt
- lt/HEADgt
-
- ltBODY BGCOLOR "FFFF80"gt
- ltA href"http//www.cs.dal.ca/tt/cgi-bin/hello.cg
i"gt Hello World CGI Scriptlt/Agt - lt/BODYgt
- lt/HTMLgt
50hello.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 "ltheadgt\n"
- print "lttitlegtHello World CGIlt/titlegt\n"
- print "lt/headgt\n"
- print "ltbodygt\n"
- print "lth1gtHello, World !lt/h1gt\n"
- print "lt/bodygt\n"
Where the perl interpreter is located
Two carriage returns
Generate the HTML head body
http//www.cs.dal.ca/tt/cgi-bin/hello.cgi
51PERL ltlt PRINT Command
- Doesnt require a print statement on every line
- print "Content-type text/html\n\n"
- print ltlt ending_print_tag
- ltheadgt
- lttitlegtHello, Worldlt/titlegt
- lt/headgt
- ltbodygt
- lth1gtHello, World!lt/h1gt
- lt/bodygt
- ending_print_tag
52Passing Data
- Normally use forms to pass user input data to a
web server
lthtmlgt ltheadgtlttitlegtPerl Examplelt/titlegtlt/headgt ltb
odygt ltpgtPlease enter your namelt/pgt ltform
method"GET" action"http//www.cs.dal.ca/tt/cgi-
bin/getenv.cgi"gt ltinput type"text" name"Name"
size"20"gt ltinput type"submit" value"Submit"
name"B1"gt lt/formgt lt/bodygt lt/htmlgt
http//www.cs.dal.ca/tt/ECMM6010/PerlExample.htm
53GET 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?data1data2
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
54Processing Input Data
!/opt/bin/perl hello.cgi a simple Perl CGI
example print "Content-type text/html\n\n" re
ad(STDIN, buffer, ENV'CONTENT_LENGTH') _at_pair
s split(//, buffer) _at_pairs split(//,
ENV'QUERY_STRING') foreach pair (_at_pairs)
(name, value) split(//, pair)
value tr// / value
s/(a-fA-F0-9a-fA-F0-9)/pack("C",
hex(1))/eg FORMname
value print ltlt
"ending_print_tag" lttitlegtHello
FORM'name'lt/titlegt lt/headgt ltbodygt lth1gtHello
FORM'name'lt/h1gt lt/bodygt ending_print_tag
Used for POST
Used for GET
55Most 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)
56Servlets
- 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
57Limitations 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/WebWa
re/Server/CGIsux.html
58Solution
- Embed the processing into the web server (and web
page) itself - Other server-side scripting languages
- Server Side Includes (SSI)
- Microsofts Active Server Pages (ASP)
- Apaches Hypertext Preprocessor (PHP)
- Java Server Pages (JSP)
- ColdFusions Markup Language (CFML)
59Server-side scripts
- A Web page that contains script statements
interspersed with HTML tags - lt .. gt 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
60SSI (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
- lt!--command arg1"value1 arg2"value2 ... --gt
- Warnings
- Can be costly to parse files on heavily loaded
servers - Can be a security risk
61hello4.shtml
lthtmlgt lttitlegtHello Worldlt/titlegt lt/headgt ltbodygt lt
h1gtHello Worldlt/h1gt The Current Date
is lt!--echo var"DATE_LOCAL"--gt ltbrgt lt!--exec
cmd"date"--gt lt/bodygt lt/htmlgt
62SSI (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
63Server 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
64JavaServer 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)
65date.jsp
ltHTMLgt ltHEADgt ltTITLEgtJSP Examplelt/TITLEgt
lt/HEADgt ltBODY BGCOLOR"ffffcc"gt ltCENTERgt
lth2gt The current date is lt new
java.util.Date()gt. lt/h2gt lt/CENTERgt lt/BODYgt
lt/HTMLgt
66Active Server Pages
- Microsofts 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)
67hello.asp
lt_at_ LanguageVBScript gt ltHTMLgt ltHEADgt
ltTITLEgtExample 1lt/TITLEgt lt/HEADgt ltBODY
bgcolorLime aLinkDarkTurquoisegt ltPgt lt/Pgt lt
Response.Write("Hello, world!") gt lt/BODYgt
lt/HTMLgt
68Further topics
- .NET
- J2EE
- WebSphere
- Web Services ? Semantic web
69Web service architecture
Adopted from Clabby, 2002
70SOAP
- 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)
71Latest Web Service Architecture (W3C, 2004)
72References
- Definitions from Webopedia http//www.webopedia.c
om - Turban, Web Programming, Appendix C.
- Selena Sol Tutorials http//www.wdvl.com/Authorin
g/Tools/Tutorial/