WEB PROGRAMMING

Prof. M. T. Savaliya Head and Associate Professor Vishwakarma Government Engg. College, Chandkheda, Ahmedabad

COURSE OUTLINE

Web Environment
Web Browser Web Server HTTP Protocol

Web Design Issues Client Side Technologies

HTML CSS JavaScript (jQuery)

COURSE OUTLINE

Server Side Technologies

PHP + MySQL Servlet and JSP

Other Related Technologies

XML XSLT Web feeds

EVALUATION COMPONENTS
In-Sem/Mid-sem 20 End-Sem - 30 Laboratory Assignments - 20 Project - 30

PREREQUISITE
OSI Layers TCP/IP Layers

Application Presentation Session Transport Network Data Link Physical

Application

Transport Network Data Link Physical

ADDRESSING
Data Link Layer Physical address e.g. Ethernet Address Network Layer Logical address e.g. IP address Transport Layer Port address e.g. 16-bit port address Application Layer URL to identify the resource on Web

Format => protocol://machine:port/path

PROTOCOL

Protocol Includes
Syntax Semantics Timing

Examples
ftp file transfer telnet remote login Email Electronic mail

WEB DESIGN ISSUES

Prof. M. T. Savaliya Associate Professor Vishwakarma Govt. Engg. College, Chandkheda,

INTRODUCING WEB
WWW

is a collection of huge amount Web pages, grouped in the form of Web sites. Web site is a collection of Web pages linked together to fulfil specified purpose and goal Web pages are hyperlinked pages written in HTML Web sites are designed for

Personal information Business Education Government Marketing And many more

INTRODUCING WEB

Designing a Web site that is effective and useful is challenge due to

Software and hardware environment Display devices User expectations

Designers decision are crucial Important to consider factors such as Objective and goal, audience, contents, prototyping, navigations etc.

WEB DESIGN ISSUES

Web Environment

Web Browser
Different versions Different support Different tags Different features like CSS Causes compatibility problems W3C standard helps Validate your code

Bandwidth and Cache support

Bandwidth affects the delivery user have no patience to wait longer than 15-20 seconds Graphics makes download slower Cache improves graphics support

WEB DESIGN ISSUES

Screen Resolution
Different resolutions 800x600, 1024x768 Three solutions Fixed Flexible: Challenging as objects get disturbed Centered: ex. www.w3schoos.com

Look and Feel

Defines overall appearance of the Web site Web site theme

Gives unique message Used for unification Logo : Banks Color scheme : w3schools Pictutes or message ex. Global warming

WEB DESIGN ISSUES

Fonts, Graphics, Colors

Web typography, i.e. typeface, important as it expresses structure as well as emotions. Different typefaces

Good for Reading or distant viewing Height and width of characters are different . Use limited fonts with limited sizes CSS is very helpful Check availability on user machine default is Times New Roman

White space plays important role Graphics

Too much makes it slow Different graphics format PNG, JPG, GIF Use images suitable to Web site theme and audience profile

Color schemes

Very important

WEB DESIGN ISSUES

Presentation and Access

Web sites are designed for diverse group of visitors having different habits and expectations Clarity in presentation for quick and easy access Important points

Visual structure White spaces Simple design if needed, ex. Google home page Balance contents Control page length Provide links within page if long Maintain consistency for links Effective navigation

WEB DESIGN ISSUES

Page Layout and Linking

Concerns with Visual structure of pages Divides page area into different parts according to importance Allows distribution of contents for easy access Use different tools tables, CSS Readymade templates Cohesive design Balance the types of contents Link the pages using effective navigation styles for easy and quick access

WEB DESIGN ISSUES

Locating Information

Screen importance: Center, top, right, bottom and left Center for most important content, for example Wikipedia Top for logo Right for current news and ads Bottom for important links and Copyright message Left for menu

WEB DESIGN ISSUES

Make Design User-Centric

Paper based Vs. Screen Based Divide into sections Table of contents Use highlighted words

Sitemap
Quick and easy access Direct links to sections and pages

WEB DESIGN ISSUES

Contents
Text, graphics, forms, sound, video Characteristics

Clear, unambiguous, spell checked, precise, accurate Relevant, recent, matching to objectives Fulfil information needs Well organized

Different organizations structures

Sequential, Hierarchical, Tutorial, Web, Catalog

WEB DESIGN ISSUES

Navigation

Defines viewing path Text, icon, graphics Clear and meaningful Understandable Consistent Search Common links like About us Location information Example Navigation bar Navigation Menu

REFERENCE

Developing Web Applications

Authors Ralph Moseley, M. T. Savaliya Publisher Wiley (India)

WEB PROGRAMMING

Prof. M. T. Savaliya Head and Associate Professor Vishwakarma Government Engg. College, Chandkheda, Ahmedabad

HISTORY OF WEB

Proposed by Tim Berners-Lee in 1989 at CERN as global hypertext project. Known as World Wide Web Web for Communication Business Sharing of Knowledge Throughout 1991 to 1993 the World Wide Web was born. Only Text was viewed using text browsers In 1993 Marc Andreessen and Eric Bina, created the Mosaic browser. GUI based. Tim Berners-Lee established W3C in 1994 to "lead the World Wide Web to its full potential by developing common protocols that promote its evolution and ensure its interoperability. In 1994 Andreessen formed Communications corp., known as Netscape Communications. Developed Netscape browser with own tags

HISTORY OF WEB
In 1996, Microsoft released its first competitive browser, IE (Internet Explorer) 1996 to 1999 the browser wars began. Mainly between Microsoft and Netscape Resulted in Cascading Style Sheets, JavaScript, and Dynamic HTML By 2000, browsers started following standards. 2001-2012 Web has affected the way people live as many dimensions are added to the Web, Social networking for example.

WEB ENVIRONMENT

Three important components

Web browser Web Server HTTP Protocol

Web Bowser (Wikipedia)

A web browser is a software application for retrieving, presenting and traversing information resources on the World Wide Web. An information resource is identified by a Uniform Resource Identifier (URI) and may be a web page, image, video or other piece of content. Although browsers are primarily intended to use the World Wide Web, they can also be used to access information provided by web servers in private networks or files in file systems. Examples : Chrome, Firefox, Internet Explorer, Opera, and Safari.

WEB ENVIRONMENT

Web Bowser (Continued)

Important concepts
URL (Uniform Resource Locator) Format : protocol://domain:port/path), Example -> http://http://en.wikipedia.org/ URI (Uniform Resource Indentifier), determines how the URL will be interpreted Example-> http: and identifies a resource to be Retrieved over the HTTP Characteristics like security, cache memory are very important Latest browsers are much more capable and can be extended by plug-ins

WEB ENVIRONMENT

Web Server (Wikipedia)

Web server can refer to either the hardware (the computer) or the software (the computer application) that helps to deliver Web content that can be accessed through the Internet. The most common use of web servers is to host websites. Can also receive contents using Forms or Files Supports server side scripting for generating web pages dynamically (on-the-fly) Web servers are able to map the path component of a URL into:
A local file system resource (for static requests) An internal or external program name (for dynamic requests)

WEB ENVIRONMENT

HTTP Protocol
Text based Request-Response Stateless Four major parts

Request Message Response Message Methods Status codes

General format of the HTTP message

Request/Response line Headers <carriage return/line feed> [ message body ]

WEB ENVIRONMENT

HTTP Protocol (Continued)

Important Methods : GET and POST GET uses Query String to pass parameters, e.g., name1=value1&name2=value2 URL with query string, e. g., http://www.myweb.com/index.html?name1=valu e1&name2=value2 POST uses message body to pass parameters GET is unsafe and can pass limited data POST is safe and can pass more data

WEB ENVIRONMENT

Example of HTTP Requests

Example 1

GET / HTTP/1.1 <blank line>

Example 2

HEAD / /HTTP/1.1 Accept : */* Connection: Keep-Alive Host: somehost.com User-Agent: Generic <blank line>

Example 3

POST /cgi/myServer HTTP/1.0 . Headers .. <blank line> Name=mts&email=mtsavaliya@yahoo.com

WEB ENVIRONMENT

Example of HTTP Response

HTTP/1.1 200 OK Date: Sat, 15 Sep 2004 06:55:30 GMT Server: Apache/1.3.9 (Unix) ApacheJServ/1.0 Last Modified: . . . Content-Type: text/html <html> <head> . </head> <body> Hello World! </body> </html>

WEB ENVIRONMENT
Other HTTP Methods : OPTINS, HEAD, PUT, DELETE, TRACE, CONNECT HTTP Status codes

1xx Informational 2xx Success 3xx Redirection 4xx Client Error 5xx Server Error

REFERENCES
Web resource : http://en.wikipedia.org Book

Developing Web Applications, Ralph Moseley and M. T. Savaliya, Wiley India

HTML (WEB PROGRAMMING)

Prof. M. T. Savaliya Head and Associate Professor Vishwakarma Government Engg. College, Chandkheda, Ahmedabad

HTML HISTORY

HTML - 1991 (called HTML tags 18 tags) HTML 1.1 1992 HTML 2.0 1996 (IETF) HTML 3.2 1997 (W3C recommendation)
New features - fonts, tables, applets, superscripts, subscripts and more <font> added complexity and deprecated in HTML 4.0

HTML 4.0 1998 (Introduction of CSS) HTML 4.01 1999 (minor correction to HTML 4.0) XHTML 1.0 2000 reformulates HTML 4.01 in XML HTML 5.0 2012

Features added - functions for embedding audio, video, graphics, client-side data storage, and interactive documents

HTML - INTRODUCTION

HTML Hypertext Markup Language Used to develop the Web pages (also called html document stored as .html or .htm file) Initially main objective was the structure of page Supporting non-sequential reading using links Allows formatting, arranging and grouping text, display text as links, allows adding of images and multimedia to a Web page Also allows use style sheets and controls and embed scripts HTML consists of tags Standards maintained and updated by W3C (World Wide Web Consortium)

HTML DOCUMENT STRUCTURE

<!DOCTYPE> <html> <head> Header Section Containing information regarding document itself </head> </body> Body Section Containing information to be displayed

</body> </html>

HTML DOCUMENT STRUCTURE

DOCTYPE defines the document type

<!DOCTYPE html> defines HTML 5.0

Head Section
Contains information regarding document Example title, keywords (useful for search engines), base address etc. Tags like <title>, <base>, <link>, <meta>, <script>, <style>

Body Section
Contains visible contents of a Web page rendered by Web Browser Formatted using tags having numbers of attributes

WHAT IS HTML? (W3SCHOOLS)

HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is a markup language A markup language is a set of markup tags The tags describe document content HTML documents contain HTML tags and plain text HTML documents are also called web pages

HTML TAGS (ELEMENTS)

HTML markup tags are usually called HTML tags HTML tags are keywords (tag names) surrounded by angle brackets like <html> HTML tags normally come in pairs like <b> and </b> The first tag in a pair is the start tag, the second tag is the end tag The end tag is written like the start tag, with a forward slash before the tag name Start and end tags are also called opening tags and closing tags Format : <tagname>content</tagname>

MORE ON TAGS

Tags not having closed tag is called empty tag

Example - <br> Written as <br />

Tags are not case sensitive but lowercase are recommended. Tags are also called HTML elements Example Header tags h1, h2, h3, h4, h5, h6 Tags can have attributes written in start tag.

Example align attribute for header tags with values center, left, right, justify. Format : <h1 align=center>Hello</h1>

MORE TAGS

Paragraph tag - <p> .. </p> Pre-formatted text <pre> Hello, I am learning HTML!!!! </pre>

Emphasis

<i> .. </i> - Italic <b> .. </b> - Bold <tt> .. </tt> - Typewriter effect <em> .. </em> - Emphasis <blink> .. <blink> - Blinking _.. - Subscript ^.. - Superscript

Comment - <!-- Its comment -->

MORE TAGS

Colors are represented as combination of RGB each with two digit hex number.
Example - #000000 is black #ff0000 is red Use - <font color=#800000> <body bgcolor=red>

Known colors are given names in HTML Colors are part of style and should be used using styles (CSS).

MORE TAGS

Hyperlinks
Example <a href=http://www.w3schools.com>w3schools</a> To open selected link in a new browser window <a href=http://www.w3schools.com target=_blank>w3schools</a> Link within page <html> <a name=top>Introduction</a> ... ... <a href=#top>Move to Top</a> </html>

MORE TAGS

Hyperlinks (Continue)
Anchor point on the page <a href=mypage.html#top>... </a? To refer files in sub-directories <a href=images/photo.jpg>My Photo</a> <a href=../mypage.html> ... </a>

Character entities

< is represented as &lt;, as &copy;, space as &nbsp; (HTML does not preserve spaces)
&lt;a href=&quot;www.google.com&quot;>Google!</a>

MORE TAGS

Lists
Unordered list <ul> .. </ul> with items are enclosed in <li> .. </li> Example Ordered list <ol> .. </ol>

Orders <ol type=a> ... </ol>

Lists can be nested Definition list <dl> .. </dl> with each definition using <dt> and <dd>

MORE TAGS

Image

<img src= ... ></img> Examples <img src=myimg.jpg></img> <center> <img src=myimg.jpg></img></center> <img src=myimg.jpg height=100 width=100></img> <img src=myimg.jpg height=50% width=25%></img> <img src=myimg.jpg alt=My Image></img> <a href=big.html><img src=myimg.jpg></img></a> Image as background <body background=mypattern.gif> Image can have border with border attribute Alignment of text around the image, image alignment itself Image map is an important concept

MORE TAGS

Table tag

Most common and widely used tag <table> ... </table> to define table <tr> .. </tr> for a row <td> .. </td> for data <th> .. </th> for headers Table can have borders Irregular tables can be created using rowspan and colspan Use align and valign attributes to align data in cell Use relative width for page layout cellpadding is a space between inner border and text cellspacing is a space between inner and outer border Table can have caption

FRAMES
Frame divides browser area into many areas Used to display multiple Web pages in same browser window Tags : <frameset> .. </frameset> and <frame> .. </frame> Frame can be vertical, horizontal, or mix Frame can have border Named frame can be used as hyperlink target <noframe> .. </noframe> if frames not supported. Give alternative content Inline frames with <iframe> .. </iframe>

MORE TAGS

<div> .. </div> tag

defines a section or a division in a document used to group block-elements to format them with CSS

<span> .. </span> tag

Used for a part of text When a text is hooked in a <span> element, you can style it with CSS, or manipulate it with JavaScript

HTML FORMS
Used to get the user inputs and pass to the server Two most important attributes action and method action denotes the program/resource to which inputs are passed. method denotes the HTML method either get or post Example

<form action= ..... method=....> . Input elements . </form>

HTML FORMS

Form input elements

<input type=text /> <input type=passwprd /> <input type=checkbox />, attribute checked with values checked or unchecked <input type=radio /> <input type=file /> <input type=submit /> <input type=reset /> <input type=button /> <input type=hidden /> Textarea with <textarea> .. </textarea> Drop down menu with <select> .. </select> having <option> .. </option> Label tag is used to label the inputs Use <fieldset> to break the form into sections

REFERENCES
Web resource : www.w3schools.com Books

Developing Web Applications, Ralph Moseley and M. T. Savaliya, Wiley India Web Technologies Black Book , dreamtech

XHTML WEB PROGRAMMING

Prof. M. T. Savaliya Head and Associate Professor Vishwakarma Government Engg. College, Chandkheda, Ahmedabad

XHTML
eXtensible HTML, XML version of HTML Types of XHTML

Transitional, which allows the use of deprecated (out of date, superseded) tags. Frameset, which allows the use of both deprecated tags and frames. Strict, which doesnt allow the use of any types of deprecated tag. XHTML basic : special subset of XHTML 1.0 containing all components of XHTML except problematic parts like frames

XHTML and HTML shares common vocabulary but having slightly different syntax

XHTML

HTML 4
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd>

XHTML page begins with <?xml version=1.0 ?>

XHTML DOCTYPES

XHTML 1.0 strict

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd:>

XHTML 1.0 transitional

<!DOCTYPE HTML PUBLIC -//W3C//DTD XHTML 1.00 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd>

XHTML-Basic 1.0
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML Basic 1.0//EN http://www.w3.org/TR/xhtml1/DTD/xhtml- basic/xhtmlbasic10.dtd>

XHTML 1.0 frameset

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.00 Frameset//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1frameset.dtd>

XHTML DOCUMENT STRUCTURE

<?xml version=1.0 ?> <!DOCTYPE HTML PUBLIC -//W3C//DTD XHTML 1.00 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd> <html xmlns=http://www.w3.org.org/1999/xhtml> <head> <title>My first XHTML page</title> </head> <body> <p>What else can you say but... Hello World!</p> </body> </html> Head and body tags are required in XHTML whereas in HTML optional

DIFFERENCES

In XHTML its important to remember to close tags in those elements that need it. HTML was relatively easy going and it was possible to get away without closing some elements properly. Some elements, such as the line break element <br> in XHTML, must contain a final forward slash: <br/>. All XHTML tag and attribute names must be in lowercase and all attribute values must be enclosed in quotes. You can nest tags but this must be done correctly without overlapping tags. Attributes cannot be abbreviated and should appear fully written out. An XHTML document must specify a document title.

REFERENCES
Web resource : http://en.wikipedia.org Book

Developing Web Applications, Ralph Moseley and M. T. Savaliya, Wiley India

JAVASCRIPT (WEB PROGRAMMING-IT342)

Prof. M. T. Savaliya Head and Associate Professor Vishwakarma Government Engg. College, Chandkheda, Ahmedabad

JAVASCRIPT - OVERVIEW
Client-side Scripting language Adds dynamism and interactivity to the Web pages Executes on client browser reducing load on the server Interpreted language JavaScript interpreter is built-in component of Web browser Platform independent Originally called LiveScript (also Mocha!) and developed by Netscape Communications Standard ECMA 262 and standardized version of language ECMAScript

JAVASCRIPT - FEATURES
Imperative and structured like C language Dynamic text Poorly typed Functional Objects are created from construction function, no classes Prototyped based Object-based language uses idea of prototypes Platform independent can run anywhere on any platform or browser

JAVASCRIPT IN HTML

Three ways

In HEAD element
<head> <script type=text/javascript> .... </script> </head>

In BODY element
<body> <script type=text/javascript> .... </script> </body>

An external file (.js) <script src=myscript.js></script>

A SIMPLE EXAMPLE
<html> <head> <title>A simple JavaScript example</title> </head> <body> <script type=text/javascript> document.write(Hello, World!); </script> </body> </html>

JAVASCRIPT PROGRAMMING BASICS

Character set ASCII, special characters starts with \ (\t,\n etc.) Case Sensitive Optional Semicolon Comments Single line (//), Multi-line (/* */) Literals (Constants)

Numeric Floating point Boolean String enclosed in or , supports unicode charatcers \uXXXX Array var emp=[abc, xyz]; Regular Expression Object

JAVASCRIPT PROGRAMMING BASICS

Identifiers
Consists of letters, digits, $ and underscore Starts with letter, $ or underscore - Cannot start with number No restriction on length Case sensitive, no reserve words permitted

Variables

No type can store any types of values Syntax : var var_name = value; Scope : local or global Global if var is not used even in function Conflict local first

JAVASCRIPT PROGRAMMING BASICS

Operators and Operator precedence Control statements

Selection if, if-else, switch Loops while, do-while, for Jump break, continue

Popup boxes
alert box confirm box prompt box

JAVASCRIPT PROGRAMMING BASICS

Functions
Syntax function fun_name(parameters) { //body } Built-in global functions like isNan(), isFinite(), parseInt(), parseFloat() Functions to call a function with timer

setTimeout(function, delaytime) clearTimeout(timer) setInterval(function, intervaltime) clearInterval(timer)

JAVASCRIPT PROGRAMMING BASICS

Objects
Creating an object obj = new Object(); Adding properties obj.name = abc; obj.age = 30; obj.getvalue(); Another way through function function bike(speed, engine, color) { this.speed = speed; this.engine = engine; this.color = color; } ... var mybike = new bike(120kph,V-6,red); var eng_type = mybike.engine;

JAVASCRIPT PROGRAMMING BASICS

Objects Properties and Methods

<html><head> <script type="text/javascript"> function comp_area() //method function { var area = 0.5*this.base*this.height; return area; } function triangle(b,h) { this.base = b; this.height = h; this.area = comp_area; } </script></head> <body> <script type="text/javascript"> var t1 = new triangle(5,10); document.write("<h1>Area = " + t1.area()+"</h1>"); </script> </body></html>

WHAT IS DHTML?
DHTML (Dynamic HTML) is HTML + CSS + JavaScript Main focus of DHTML is

Animation Dynamic effects

Achieved using
Timer functions Events

Event is an action performed by user. Each event is associated with event handler which is executed in response to occurrence of an event

JAVASCRIPT - EVENTS

Event and its occurrence

onabort onblur onchange

onclick ondblclick onfocus onkeydown onkeypress onkeyup onload

- Visitor aborts page loading - Visitor leaves an object - Visitor changes the value of an object - Visitor clicks on an object -Visitor double-clicks on an object - Visitor makes an object active -Key is being pressed down -Key is pressed -Key is being released -Page has finished loading

JAVASCRIPT - EVENTS

onmousedown onmousemove onmouseout onmouseover onmouseup onreset onselect onsubmit onunload

- User presses a mouse-button - Cursor moves on an object - Cursor moves off an object - Cursor moves over an object - Visitor releases a mouse-button - Visitor resets a form - Visitor selects content on a page - Visitor submits a form - Visitor closes a page

JAVASCRIPT BUILT-IN OBJECTS

Objects

String RegExp Boolean Number Array Math Date

Each object has properties and methods Important property : prototype to properties and methods to an object

add

BROWSER OBJECTS
Automatically created Hierarchy

Window
Navigator Document History Screen Location

Window object consists of object collection, properties and methods

Object collection is all the window objects in an HTML document. Example is frame.

BROWSER OBJECTS

Navigator object stores all the information regarding browser.

Collections plugins[], reference of embedded objects

- MIME types browser supports

History object Details of URLs visited Screen object details of user screen Location object Details of current URL of the window object

FORM VALIDATION
Form values are to be validated before submitted Validation

Server side not efficient Client side

Validates form elements before data submitted to the server No server connection required Reduces load on the server Saves the time

Use onSubmit event for validation Examples: Required fields, number, User name and password, Phone number, Time, Date, Credit card, zip code, email etc

REFERENCES
Web resource : http://www.w3schools.com Book

Developing Web Applications, Ralph Moseley and M. T. Savaliya, Wiley India HTML 5 Black Book - dreamtech

PHP COOKIES AND SESSIONS (WEB PROGRAMMING-IT342)

Prof. M. T. Savaliya Head and Associate Professor Vishwakarma Government Engg. College, Chandkheda, Ahmedabad

COOKIES
A cookie is a piece of information stored as text file in client (Web browser). Size of cookie upto 4000 charaters, upto 20 cookies for a Web site. Total cookies usually around 300. Used to store information regarding visitors. Function used to set cookies is setcookie(). Should be used before any output. Parameters to setcookie(): setcookie(name,value,expire,path,domain,secure); Except name all other parameters are optional

COOKIES

Example: setcookie(MyCookie,$value, time()+3600); // expires in 1 hour. setcookie(MyCookie,$value,time()+3600,/~richard,.exa mple.com,1) Path : If set to /, it is available in entire domain. If set /test available only to /test and subdirectories. Default is current directory. Domain : .example.com , makes it available to all the subdomains of example.com. http://www.example.com makes it available only in www sub-domain. Secure : decides whether cookie should use secure https connection. 0(false), 1(true), defualt 0. How to access :

echo $_COOKIE[MyCookie]; echo $_HTTP_COOKIE_VARS[MyCookie]; print_r($_COOKIE);

SESSIONS

Used to maintain persistence of data between Web pages Session data is stored in session file in temporary directory, once PHP script starts a session Each session is given an unique session id having 32 hexadecimal numbers. A cookie called PHPSESSID is sent to the user. Session file is created with name sess_sessionid When a session data needs to be accessed, session id is retrieved from PHPSESSID and used to find the file. session_start() function is used to start a session. Session variables are accessed using $_SESSION[] array. For example, $_SESSION[total]. If cookie is disabled, URL is used to send the session id.

REFERENCES
Web resource : http://www.w3schools.com Book

Developing Web Applications, Ralph Moseley and M. T. Savaliya, 2nd edition, Wiley India HTML 5 Black Book - dreamtech

JAVA 2 Enterprise Edition Architecture

Prof. M. T. Savaliya Associate Professor & Head Vishwakarma Govt. Engg. College Chandkheda, Ahmedabad

Java Editions
J2SE (Java 2 Standard Edition)
Provides the APIs for application programs and applets Language framework for J2EE and J2ME

J2EE (Java 2 Enterprise Edition)

Provides the API for multi-tier enterprise applications Result of the JCP (Java Community Program)

J2ME (Java 2 Micro Edition)

Provides APIs for Wireless applications

J2EE Introduction
With growth of the Internet, web applications required to interact with backend services such as databases and dynamic web pages Technology earlier used for server side was CGI (Common Gateway Interface) CGI programs were written in programming languages like C, C++ etc. and called by web-server when it is mentioned by web-client. CGI technology solved the problem of interfacing the webclients with the corporate infrastructure CGI was resource intensive and not scalable JAVA servlet solves the problems of the CGI technology J2EE incorporates the range of technologies to meet the requirements of multitier distributive applications

J2EE Introduction
J2EE is a suite of specifications for application programming interfaces, a distributed computing architecture, and definition for packaging of distributed components for deployment. Its a collection of standardized components, containers and services for creating and deploying distributed applications within a well-defined distributed computing architecture

J2EE Introduction
J2EE defines the services needed developing enterprise applications Supports the multi-tier architecture
Two-tier architecture
User Interface Logic Business Logic

for

Data Access

J2EE Introduction
Three tier architecture
User Interface Logic

Business Logic

Data Access

Application can be partitioned into number of partitions say n

J2EE Introduction
Major advantage is the vendor Independence Scalability
Throughput and performance is critical issues in large scale applications J2EE architecture provides the flexibility to accommodate the changes needed for throughput, performance and capacity N-tier architecture allows additional computing power to be used where needed

J2EE Architecture
EJB Container EJB Client EJB EJB Client
Enterprise Information System (RDBMS, ERP, Legacy Application)

Client

Web Container (Servlet, JSP, HTML, XML) JNDI, JMS, JavaMail

Client Client-Tier

Middle-Tier

EIS-Tier

J2EE features
J2EE client can be simple text-based console application or GUI application written using JFC/swing. They are thick clients as they include the code for user interface J2EE clients can be web-based like simple html page or JavaScript enriched page or may contain applets. They are called thin clients Server side components may be Web Component
JSP or Servlet

Business Component
EJB (Enterprize Java Beans)

J2EE features
Three server side components (JSP, Servlet, EJB) are supported in form of containers Containers are infrastructure services interface with, and provides host for, application logic Services includes security, transaction handling, naming, resource location, and the guts of network communication J2EE provides a set of interfaces which allow users to plug their application logic into infrastructure and access services. These interface layers are called containers

Container Architecture
Container Contract
O t h e r C o n t a i n e r S e r v ic e

Application Components Deployement Descriptors Application Components Deployement Descriptors Application Components Deployement Descriptors

D e cl a r a ti v e S e r v ic e

Container Services API

Container Architecture
Inludes
Application Components : JSP, Servlets, EJBs Deployment Descriptors : XML file containing information about component

Four Parts
Component Contract : API that Application component must extend or implement Container Services APIs : Services like JNDI, JAAS, JTS etc. Declarative Services : Deployment descriptor providing information like security, transaction etc. Other Container Services : Component life cycle, Resource pooling, garbase collection, clustering etc.

Major Components and Services

Three standard Components
Java Server Pages (JSP) Servlets Enterprise Java Beans
Session beans Entity beans Message-driven beans

Other services
CORBA Compliance JavaMail API Java Messaging Service JNDI (Java Naming and Directory Interface) API Java Transaction API JDBC API XML Support Web Services Security

Multi-tier Architecture
Tier : Abstract concept that defines a group of technologies providing one or more services to its clients Example: Resources in large organization are organized into tier structure Each tier contains services that includes software objects, DBMS or connectivity to legacy systems The functionality of an application are divided into logical components that are associated with a tier Each component is a service that is built and maintained independent of other services. Services are bound together by communication protocols Client accesses service by sending a request and not aware of how the service is provided Services can be modified without affecting the client.

Multi-tier Architecture
Multi-tier architecture consists of clients, resources, components and containers A Client is a program that request service from a component A resource is anything that component needs to provide service A component is part of a tier that consists of collection of classes or a program that perform a function to provide service A container is a software that manages a component and provides system services to components. It handles persistence, resource management, security, threading and more.

Multi-tier Architecture
Client

Request
Container

Reply

Component

Component

Component

Resource

Database

J2EE Architecture
J2EE is four tier architecture
Client tier (User Interface) Web tier (Presentation tier) Enterprise JavaBeans tier (Business tier) Enterprise Information Systems (EIS) tier

Each tier consists of number of components J2EE provides the necessary APIs for each tier. Some APIs are specific to particular tier, while some are used at multiple tiers Client tier is a program that interacts with the user. Web tier provides the Internet functionality EJB tier provides the implements the business logic EIS provides the database services

J2EE Architecture
Client tier
Component Component Component Component

Reply
Web tier
Component

Request
Component Component Component

Reply EJB tier

Component Component EJB

Request
Component

Reply EIS tier

Component Component Component

Request

DBMS

Advantages
Multitier architecture addresses number of problems
High cost of maintenance when business rule change Inconsistent business rule implementation between applications Inability to share data or business rules between applications Inability to provide web-based front ends to line-ofbusiness applications Poor performance and inability to scale applications to meet increased user load Inadequate or inconsistent security across applications

Example Architectures
Application client with EJB
Java JFC or Console application EJB JDBC Presentation tier Business Rules Tier

Data Access Tier

Example Architectures
JSP client with EJB
Web Browser Presentation Tier

JSP

Web Tier
Business Logic

EJB

JDBC

Data Access Layer

Example Architectures
Applet client with JSP and Databases
Web Browser/Applet Presentation Tier

JSP

Business Logic Tier

JDBC

Data Access Layer

Enterprise Application
Practically any application used by more than one person to conduct business Ask question : Does application service the entire corporation or a small group of users within corporation? Techniques used to design and built enterprise application may not be the way to develop a smaller application Enterprise application must deal with performance, security and other issues not found in small applications

Enterprise Application
From J2EE point of application is one that view, enterprise

Is concurrently used by more than a handful of users Uses distributive resources such as DBMS that are shared with other applications Delegates responsibility to perform functionality among distributive objects Uses web services architecture and J2EE technology to link together components that are dispersed throughout the corporate infrastructure

Enterprise Application
Characteristics of Enterprise Applications
Be available 24 hours a day, 7 days a week without any downtime Have an acceptable response time even in the face of increasing usage Have the flexibility to be modified quickly without requiring redesign of the application Be vendor independent Be able to interact with existing system Utilize existing system components

Model-View-Controller
Developing an enterprise application serving many diverse clients over distributed infrastructure is complex undertaking Application must be scalable so that it gives acceptable performance in case of increased load Best Practice
Simplify the distribution of an applications functionality is to use the Model-View-Controller(MVC) strategy endorsed by Sun Microsystems

MVC divides the application into three broad components

Model class View class Controller class

Model-View-Controller
The model class consists of components that control data used by application The view class is composed of components that present data to the client The controller class is responsible for event handling and coordinating activities between model class and view class EJBs are used to build the components of model class. JSP programs and servlets are used to create view components and session beans are used for controller class components

Model-View-Controller
Client Presentation

View Class

Controller Class

Model Class

Data

Data

Data

References
Advance Java Technology M. T. Savaliya dreamtech Press The Complete Reference J2EE Jim Keogh, TataMcGrawHill Publication Beginning with J2EE 1.4 Kevin Mukhar, James L. Weaver SPD Publication Java Server Programming (J2EE 1.4) Black Book

dreamtech press