IBM Labs in Haifa Copyright 2000-2003 IBM Corporation Advanced Web Application Development 236606 Lecture 1 Dr. Sara Porat IBM Research Lab in Haifa

IBM Labs in HaifaCopyright 2000-2003

IBM Corporation

Advanced Advanced Web Application DevelopmentWeb Application Development

236606236606Lecture 1Lecture 1

Dr. Sara PoratDr. Sara Porat

IBM Research Lab in HaifaIBM Research Lab in Haifa

IBM Labs in Haifa

2 Copyright 2000-2003 IBM Corporation

Copyright 2000-2003 IBM Corporation Material is based on original by Dr. Alfred Spector & Dr. Jeffrey

Eppinger Updated by Sara Porat

IBM Labs in Haifa


Why this course?

There will be enormous growth in the demand for new applications due to (1) continuing increases in computing capabilities and (2) ever more universal, high performance networking.

The internet/e-business will be the vehicle propelling this forward. There are new and valuable technologies programming and software server

technologies that will enable us to meet the demands for application growth. These technologies can be taught coherently and a substantial percentage of

computer science students should learn them.

IBM Labs in Haifa


Brief Overview

This course teaches a collection of architectural & programming concepts relevant to the design of advanced web applications.

They arise broadly from the many years of thinking in distributed systems and object-oriented computing, and more recent innovations relating to Web-oriented and Java programming models

IBM Labs in Haifa


Overview of the 1st Lecture

Introduction How to meet today’s application requirements Client/server and the Internet Taxonomy of web applications Static web programming via HTML Programming dynamic web via CGI

IBM Labs in Haifa


A Worthy Goal - The Cost of Applications

We’ve spent trillions (1012) of dollars on applications E.g., in just IBM CICS Application platform:

2 x 104 serversX 106 lines new application code/server/ 2 x 103 lines of code per programmer/yrX 105 dollars programmer/yr= 1012 dollars

There are many more platformsX n systems:NT,IMS,AS400,DB2,Oracle,HTTP …

For comparison, 1999 US GDP = ~$9 x 1012

Note: the high cost is not due purely to stupidity

IBM Labs in Haifa


Demand for Applications Will Increase

More than 1 billion web-connected devices within 10 years Greater bandwidth to endpoints increasing quickly Greater technological acceptance by society All yielding:

New opportunities for software-based products and markets New software-based approaches to increased efficiency

IBM Labs in Haifa


Application Maintenance & Evolution

Software maintenance will grow supra-linearly Net new lines of code is increasing year-to-year: Ni+1>Ni

Well, at least for a while though there may eventually be limits Maintenance cost is a function of total deployed code

… + N1998 + N1999 + N2000 + …

Changes in requirements are occurring at least as rapidly as in the past generating continued need for maintenance

IBM Labs in Haifa


Application Requirements Increasing

Ease of use Availability

99% availability = 88 hours /year down 99.9999% availability = 30 seconds/year

Security Integration Scalability Malleability Integrity

IBM Labs in Haifa


Types of Applications Changing

1960’s and 1970’s: Batch Limited interactive timesharing

1980’s and early 1990’s: Centralized OLTP and Timesharing Single user applications growth

1990’s and 2000’s: Shared, server-based applications Fully distributed and highly integrated Very broad user community

IBM Labs in Haifa


Resulting Effects

Work increasing multiplicatively: More applications More stringent requirements More complex system structures

Brute force solution (continued doubling as in the 90’s) won’t work…

IBM Labs in Haifa


Been There, Known That…

Computer scientists have abstractly understood this trend for decades Our field is largely dedicated to solving this problem

Simplifying all aspects of programming and maintenance are a key focus

Still, the scope of the problem is surprising: Big money -- even worldwide macroeconomic fundamentals The lives of very many people The stakes are high

IBM Labs in Haifa


The Bridge Analogy

Bridges generally on schedule, on budget, and reliable Software late, over budget, and buggy Unfortunately, software is usually much more complex than bridges.

Partially, this is our own doing Bridges are much more constrained

Bridges have standard specs Bridges have well-defined standard components Bridges construction is a well defined process

The solution is for software to inexorably be more like bridge design

IBM Labs in Haifa


Why Software is Different?

Little separation between design and fabrication Radical design changes during implementation

Ill-defined goals Enormous pressure for features

Tight and rapidly changing schedules Hard to anticipate needs

Variety of applications Banking to Games

Huge design space Need for flexibility

IBM Labs in Haifa


4 Techniques Forming the Basis of a Solution

Programming Software Engineering Algorithms Systems and Architecture

IBM Labs in Haifa


Programming: Abstraction, Encapsulation, Reuse

Cornerstone of software systems: Generalize problem and abstract it to permit a solution with multiple

benefits Encapsulate solution so it CAN be reused Reuse

Simula 67 => Object-Oriented Programming Many successor efforts: now, Java Two aspects are now understood more than previously:

Customization via properties, rather than source code change Component architectures: everything necessary to permit

customizable, reusable binary code

IBM Labs in Haifa


Object Oriented Programming Results are Mixed

The good: user interfaces have been developed with reusable objects The bad: most complex application logic has not traditionally benefited

from OO programming E.g., C++ usage by industry did not generate widespread reuse Programmers insufficiently skilled to abstract: Insufficient resources: Tragedy of the Commons

IBM Labs in Haifa


Software Engineering

Managing the complexity The technical and management processes

Requirements/UML… Programming Testing Life cycle management, etc. Group management, etc.

Development tools Debuggers Repositories Team management Testing Frameworks

IBM Labs in Haifa


Algorithms

Ever better understanding of algorithms in an increasing breadth of areas Systems Distributed Systems Storage Search Graphics Security And more

IBM Labs in Haifa


Systems and Architecture

Significant extensions to traditional OS functionality seem now to be understood a state of the art Communication Remote invocation Persistence Transactions Load balancing Data Storage Graphics Reliable messaging Security Directory …

IBM Labs in Haifa


Hypothesis: The Need for an Integrated Approach

It is the integration of the four categories of work that will be the “silver bullet” of software

Reuse is a fine goal, but requires sophisticated environments Software engineering methodologies are fine, but they require sophisticated

systems support and target environments Algorithmic building blocks need to be easily available Systems must be consistent, dependable, & powerful

IBM Labs in Haifa


Why Integration?

System analysts, architects, programmers, etc. need combined capabilities that are easy-to-use

No wonder… Why Smalltalk use for most business applications was minimal

(insufficient systems support) Why there is a limited marketplace for re-usable software

components (component models available only recently) Why people write new code, rather than reusing existing code

(finding what you want is hard, and even harder to license and change)

IBM Labs in Haifa


Integration Progress

Integration first occurred in desktop environments Component architecture

Smalltalk OLE/Com Java Beans And others (all based on 1980’s research)

Reusable components available Java: AWT and Swing classes Microsoft Controls and small additional industry

Training to specific components, rather than general ones Not about the concept of steel But about the use of a particular type of steel

IBM Labs in Haifa


World is Becoming More Server-Centric

Relevant Integration efforts of the 1980’s: Open Software Foundation and DCE Object Management Group and CORBA The Enterprise Java environment Windows 2000 XML efforts

Efforts have been variously Approached via the OS or distributed OS Approached via a programming language Approached via protocol standards

IBM Labs in Haifa


Extended Java Environments

Build on strength of language environment Portability Extensibility

Add: Systems support

Transactions (JTS), Naming (JNDI), Method Invocation (RMI), … Component support

Java Beans for client Enterprise Java Beans for servers

Focus on use not just by programmer but by tools

IBM Labs in Haifa


Conclusion

The Silver Bullet is the integration of these four categories of technology into an easily used form

Easily-used integration is hard and will take time to perfect Education needs to change and teach these concepts together

Inexorably, most computer scientists should be taught to be more engineer-like

Computer scientists need to be taught first to assemble components into new components and applications

This course, Advanced Web Application Development, combines many of the topics referenced in this Module: Programming, Software Engineering, Algorithms, and Architecture & Systems. It represents a first step in moving education in this direction

IBM Labs in Haifa


The Internet, the World's Largest Network

Linking millions of computers and users Based on the TCP/IP protocol suite, which runs on most computer

architecture Links universities, government agencies, companies, and other

organizations Large international presence Powerful applications for business since 1994

IBM Labs in Haifa


Who is on the Internet?

Businesses of all kinds Education and the arts Government entities Religious and social organizations Special interest groups Professional organizations Individuals Anyone and everyone!

IBM Labs in Haifa


Information Technology Value

EffectiveIndividuals

PerformanceTeams

IntegratedOrganizations

Business to

Business

Business toConsumer

(groupware)

(PC)

(intranets)

(extranets)(Internet)

IBM Labs in Haifa


Internet Users Worldwide

0

200

400

600

142M142M

196M196M

256M256M

327M327M

398M398M

Source: IDC

USUS

Western EuropeWestern Europe

Japan/APJapan/AP

Rest of WorldRest of World

502M502M

19981998 19991999 20002000 20012001 20022002 20032003

IBM Labs in Haifa


What is e-business?

e-business is any activity that connects critical business systems directly to their critical constituencies (customers, employees, vendors and suppliers) via intranets, extranets and over the world-wide web

IBM Labs in Haifa


e-business and e-commerce

Business to Business to ConsumerConsumer

Business to Business to BusinessBusiness

20021998 1999 2000 2001

$50.4B

$1.317T

2003

IBM Labs in Haifa


Client/Server and the Internet

Browser

Client Internet

Browser

Client

InternetWWWServer

WWWServer

WWWServer

WWWServer

Internet Service Provider

R R

WWWServer

WWWServer

IBM Labs in Haifa


Intranet/Internet Client/Server

Intranet

Internet

FIREWALL

R

WebServer

Browser

Client

R

R

R

WWWServer

WWWServerWWW

Server

Browser

Client

ISP R R

ISP

IBM Labs in Haifa


Client/Server on the Internet

Web Browser

Client

Web Server

Server

HTTP

IBM Labs in Haifa


Hypertext Transfer Protocol (HTTP)

Client/server protocol designed to access URL-named resources Http can:

Transfer requests from client to server Deliver requested resources (text, multimedia) from server to client Invoke other programs to handle processing requests from clients

Http cannot: Process data

IBM Labs in Haifa


What is a Web Browser?

An http client program

getting information from servers

requesting info based on URL

formatting and presenting data based on type of information text image video

IBM Labs in Haifa


What is a URL?

URLs are used to access all web resources globally The addressing scheme consists of:

Protocol (http, ftp) Domain Location and name of the resource on the server

Example:http://www.ibm.com/software/products.html

IBM Labs in Haifa


Web Servers - http Server Application Programs

Listen for requests from clients Deliver requested resources (text, images, other files) Receive input from clients and pass to other programs

IBM Labs in Haifa


Martin Fowler: “Patterns of Enterprise Application Architecture”

The main topic areas are how to layer an enterprise application how to organize domain logic how to tie that logic to a relational database how to design a web based presentation

Principles in distributed design

IBM Labs in Haifa


Example: Mississippi.com

On-line book seller Simple transactions Huge online volume, lots of concurrency Performance a must Thin, pure-HTML client

IBM Labs in Haifa


Example: LakeSuperior.com

Lease and loan processing Very complex business logic Long transactions Heavy desktop client Few concurrent users

IBM Labs in Haifa


Application Taxonomy

Applications typically made up of many interactions with a client How the application must be built depends on the type of interactions that

comprise it This seems trivial, but it is where all architecture starts All interactions are to varying degrees

Asynchronous or Synchronous Influencing all interactions are requirements for concurrency, throughput, latency,

... Interactions are sometimes called “transactions,” though no specific semantic

properties are applied to the word transaction when used in this way

IBM Labs in Haifa


Application Taxonomy: Read Transactions

Read-only transactions Highly static: X-Ray, Corporate Information Entertainment Video Nearly static: Train Schedule, Catalog without quantities Dynamic: Weather Forecast, Catalog with quantities Dynamic with high consistency requirements: Account balance Dynamic data with high consistency and rapid update: Rock concert

sales with assigned seating

IBM Labs in Haifa


Application Taxonomy: Update Transactions

Update w/ modest integrity: Amazon book comment Update w/ high integrity: Billing record Update w/asynchronous processing: Stock Trade Update w/loosely coupled processing: Buying a physical product over

the net, or ordering/provisioning a new ISDN line

IBM Labs in Haifa


Web Evolution Stage 1

Static text and images - documents versus forms Poor document management

Web Server

httpServer

Program

htmlwebpages

Web Browser

IBM Labs in Haifa


HTML -- Hyper-Text Markup LanguageA device independent way to represent documents Specifies the formatting of document

e.g., titles, paragraphs, fonts, colors, lists, tables Hyperlinks permit references to other documents References objects to be inserted into document

e.g., images, applets, frames Forms allow user input

e.g., Text Fields, Buttons, Menus Action causes new HTTP request

IBM Labs in Haifa


A simple example

<HTML><HEAD><TITLE>HTML Reference Library</TITLE></HEAD><BODY><H1>HTML books for everyone</H1<p>HTML library</p><UL><LI>HTML for beginners, Do it yourself!<LI>HTML for experts</UL><H2>Where can i buy it?</H2><Menu><li>IBM book storage </Menu></body></HTML>

IBM Labs in Haifa


A simple example...result

IBM Labs in Haifa


Hyperlinks...result

TV channelsCNN

ABC

LinksRadio GaGAFM4

<A HREF="./CNNnews.html">CNN</A>

IBM Labs in Haifa


Adding pictures

April

News Sales Staff ProductsJobs

<A HREF="/News/" TITLE="News"><IMG SRC="/pics/icons/news.gif" BORDER=0 ALT="H?rek" WIDTH=75 HEIGHT=88></A>

IBM Labs in Haifa


Tables

<TABLE BORDER="1"> <TR> <TH>Name</TH><TH>Phone</TH> </TR> <TR> <TD>John Doe</TD><TD>456-6754</TD> </TR> <TR> <TD>Shasa Courtney</TD><TD>444-3333</TD> </TR> </TABLE>

border width Name Phone

John Doe

Shasa Courtney

456-6754

444-3333

IBM Labs in Haifa



Fields, forms - dynamic page content Server-side processing - CGI Access to legacy data

Web Browser

name

cust #

Web Server

httpServer

ProgramwithCGI

web pages

AppsCGI

TraditionalBack-endServices

IBM Labs in Haifa


Common Gateway Interface (CGI)

A program on a server, triggered by input from a browser The CGI program links the HTTP server to another program, such as a

database or transaction system Variety of scripting languages:

Unix (and other OS's): PERL Mac: AppleScript Windows: Visual BASIC OS/2: REXX

IBM Labs in Haifa


CGI - A Simple Example

<h1>Important Information</h1>

<a href="http://pepe.uta.edu/cgi-bin/getdate">

Display the Date</A>

IBM Labs in Haifa


Unix CGI Processing Example

echo Content-type: text/plainecho/bin/date

Program "GETDATE"

Content-type: text/plain Tue Jul 09 15:21:45 MDT 1996

CGI Output

IBM Labs in Haifa


Browser Output

IBM Labs in Haifa


CGI Discussion

Pros Simplicity Separation of concerns/flexibility

Cons: Efficiency Security Manageability Integrity

Still very significant use

IBM Labs in Haifa


Simple Security

The HTTP Server can do quite a bit for you: Audit trails, or logs Authentication Authorization Privacy

Two uses of logs Error handling (not interested in this for security) Audit trail

Audit trails are stored in ibm\ibmhttp\logs Access.log stores all accesses in default configuration Stores name of authenticated user (if any) performing an action

IBM Labs in Haifa


Authentication and Authorization

Many possible authentication approaches Site Pre-defined users Users in an encrypted password file: conf\blah.passwd Anding and oring of conditions …

Authorization at different levels of granularity Directory Site …

IBM Labs in Haifa


Access Control

Example:

<Limit GET>order deny, allowdeny from allallow from local.host.govrequire group group_name

</Limit>

access.conf file: (Apache webserver)

limitations first, then allow

limitation

allow

allowing group

IBM Labs in Haifa


CGI: Ugly Programming

More difficult than necessary to implement complex, large projects: Team development Version management Integrated debugging Component reuse not a primary goal

That is, the programming environment isn’t state of the art

IBM Labs in Haifa


CGI: Bad Administration

More difficult than necessary for administering big web sites Countless scripts and html pages Large directory structure Simultaneous use by many

Not state of the art administrative environment

IBM Labs in Haifa


HTML form and CGI

HTML form collecting data from web page visitors

name, phone number, credit card number, etc. information submitted to a server

Without some sort of CGI script running on the server, the server cannot receive the form data

Most CGI scripts also remove extraneous information, and format the data

IBM Labs in Haifa


<FORM> tag attributes

METHOD : specifies which method the browser will use to send form data to a Web server

METHOD GET Form data appended to the URL for use in a query string POST Form data is posted to the URL specified by the ACTION

attribute

IBM Labs in Haifa


<FORM> tag attributes 2.

ACTION="URL" specifies the name and location of the CGI script used to process

the form the contents of the form will be processed by the script and acted

upon according to the instructions in the script

ACTION="http://www.server.com/cgi-bin/scriptfile"

IBM Labs in Haifa


<FORM> tag attributes 3.

TYPE designating the type of data to be sent attributes :

button checkbox file hidden image password radio reset submit text

TYPE="radio"

IBM Labs in Haifa


Data input

<INPUT> tag: for creating text boxes, check boxes, radio buttons, and the Submit and Reset buttons

<SELECT> tag: container tag used to create select lists and multiple-select lists

<TEXTAREA> tag: creates text area spaces <TYPE> tag: designating the type of form

Name : <INPUT TYPE="text" NAME="Nev" SIZE="40">

Email address : <INPUT TYPE="text" NAME="Email" SIZE="40">

Subscribe to mailing list ? <BR>

<INPUT TYPE="radio" NAME="levlista" VALUE="yes"> Yes

<INPUT TYPE="radio" NAME="levlista" VALUE="no"> No

IBM Labs in Haifa


IBM Labs in Haifa


Radio button, checkbox

Round option buttons in a group of two or more mutually exclusive options

Have you seen that movie?<BR>

<INPUT TYPE="radio" NAME="movie" VALUE="yes"> Yes

<INPUT TYPE="radio" NAME="movie" VALUE="no"> No Square boxes in a group of two or more non-exclusive options

Destination?<BR>

<INPUT TYPE="checkbox" NAME="Tahiti"> Tahiti<BR>

<INPUT TYPE="checkbox" NAME="Australia"> Australia<BR>

<INPUT TYPE="checkbox" NAME="Canada">Canada<BR>

IBM Labs in Haifa


Select list, TEXTAREA tag

A drop-down list of two or more options from which a single selection can be made

<SELECT NAME="List">

<OPTION>California

<OPTION>Indiana

<OPTION>Washington

</SELECT> A scrolling text field into which the user can enter multiple lines of text

Tell us you problem!:<BR>

<TEXTAREA NAME="probl">

</TEXTAREA>

IBM Labs in Haifa


Submitting data

when the browser sends data, it will use the NAME values as the basis for creating the raw text string

Name=Stephan+Lang&[email protected]&maillist=yes once the server receives this information, a CGI script can parse and

format the raw text string into a readable format

Name: Stephan Lang

Email : [email protected]

Mailing list: yes

IBM Labs in Haifa


Submit, Reset button

Submit: when clicked,causes the form's action statement to process; labeled "Submit" or "Submit Query"

<INPUT TYPE="submit"> Reset : when clicked, clears all form data and sets all form fields back to

the default values for those fields

<INPUT TYPE="reset">

IBM Labs in Haifa


Example : using FORM

<HTML> <HEAD>

<TITLE>Simple form</TITLE>

</HEAD>

<BODY>

<H1>Simple form</H1>

<FORM

METHOD=POST

ACTION="http://server.degeus.nl/htbin-post/post-query">

Name : <INPUT TYPE="text" NAME="Nev" SIZE="40"><P>

Email addresst: <INPUT TYPE="text" NAME="Email" SIZE="40"><P>

Subscribe to mailing list?<BR>

<INPUT TYPE="radio" NAME="maillist" VALUE="yes" CHECKED>Yes

<INPUT TYPE="radio" NAME="maillist" VALUE="no">No

<P>

Preferred books:<BR>

<INPUT TYPE="checkbox" NAME="aviation">Aviation<BR>

<INPUT TYPE="checkbox" NAME="navy">Navy<BR>

<INPUT TYPE="checkbox" NAME="railway">Railway<P>

<INPUT TYPE="SUBMIT"> <INPUT TYPE="RESET">

</FORM>

</BODY> </HTML>

IBM Labs in Haifa


IBM Labs in Haifa


CGI – The Rationale

Dynamic data from scripts Scripts, are effectively mid-tier processing point This has been called 3-tier client-server computing

Tier 1Browser

Tier 2Script

Tier 3Data

IBM Labs in Haifa


Dynamic HTML and Script Languages Interactive and dynamic client-side functionality

<HTML> <HEAD> <TITLE>Page Title Here</TITLE> <SCRIPT LANGUAGE="language">  </SCRIPT> </HEAD> <BODY> Text to be displayed<SCRIPT>  </SCRIPT> Text to be displayed</BODY> </HTML>

IBM Labs in Haifa


Script Languages

JavaScript Object-based scripting language, supporting most of Java's

expression syntax and basic program flow controls Jscript

Microsoft implementation of JavaScript VBScript

Subset of Visual Basic and a separate language

IBM Labs in Haifa


Using Buttons for Hyperlinks

<FORM>

<INPUT TYPE="button"

LANGUAGE="JavaScript"

VALUE="Return to Main Screen"

onClick='top.location.href="index.htm"'>

</FORM>

onClick processes the script when the button is selected, and refers to the hyperlink object the same way

IBM Labs in Haifa


Displaying Greeting and Actual Time

<BODY BGCOLOR="red" text="black"> <DIV ALIGN=CENTER> <H1>Time Based Greetings Using

JavaScript</H1> <FONT FACE="Comic Sans MS" SIZE="4"> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </FONT> <HR> </BODY>

IBM Labs in Haifa



Application processing on the client Offload server/Faster user response Provide GUI applications thru browser

Web ServerWeb Browser

httpServer

ProgramwithCGI

Java applets

Apps

Web Pages

CGIApplet

IBM Labs in Haifa


How does Java Work?

Promote

WebServer

Client

Browser

InterpretJava Applet

Java Virtual Machine

Java byte code

Development Platform

Javacompiler

Java source

IBM Labs in Haifa


Applet Security

Applets cannot: Read/Write to/from local files Load, Run, Create, Delete local programs Communicate with servers other than the originating server Access memory other than where they are running

IBM Labs in Haifa


Java Programs

Applets - Java program for browser use Application - stand-alone program or server applet (servlet) Java bean - component of applet or application

Client

Browser

Java Applet


bean

bean

Client or server


Javaapplication

bean

bean

IBM Labs in Haifa


The Importance of Java

Write Once - Run Anywhere OS and platform independent Wide industry support - almost 100%

Enables client processing Full-fledged graphical user interface through a browser

Enables the "Thin Client" Network station

IBM Labs in Haifa



Web ServerClients

httpServer

ProgramwithCGIand

ORB

Java applets

Apps

Web Pages

CGI

SERVLETS

TraditionalBack-endServices

IIOP

HTTP

Documents

IBM Labs in Haifa Copyright 2000-2003 IBM Corporation Advanced Web Application Development 236606 Lecture 1 Dr. Sara Porat IBM Research Lab in Haifa