Web Programming End Sem Combined Slides
112
WEB PROGRAMMING Prof. M. T. Savaliya Head and Associate Professor Vishwakarma Government Engg. College, Chandkheda, Ahmedabad
description
sem 6th web
Transcript of Web Programming End Sem Combined Slides
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
Application
Presentation
Session
Transport
Network
Data Link
Physical
Application
Transport
Network
Data Link
Physical
OSI Layers TCP/IP Layers
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
Designer’s 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 protected]
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
<sub> .. </sub> - Subscript
<sup> .. </sup> - Superscript
Comment - <!-- It’s 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 <, © as ©, space as
(HTML does not preserve spaces)
<a href="www.google.com">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 doesn’t 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/xhtml1- transitional.dtd”>
XHTML-Basic 1.0 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML Basic 1.0//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml- basic/xhtml-basic10.dtd”>
XHTML 1.0 frameset <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.00
Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1- frameset.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/xhtml1- transitional.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 it’s 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 - Visitor aborts page loading
onblur - Visitor leaves an object
onchange - Visitor changes the value of an
object
onclick - Visitor clicks on an object
ondblclick -Visitor double-clicks on an object
onfocus - Visitor makes an object active
onkeydown -Key is being pressed down
onkeypress -Key is pressed
onkeyup -Key is being released
onload -Page has finished loading
JAVASCRIPT - EVENTS
onmousedown - User presses a mouse-button
onmousemove - Cursor moves on an object
onmouseout - Cursor moves off an object
onmouseover - Cursor moves over an object
onmouseup - Visitor releases a mouse-button
onreset - Visitor resets a form
onselect - Visitor selects content on a page
onsubmit - Visitor submits a form
onunload - 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 add
properties and methods to an object
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”,”.example.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 web-clients 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. It’s 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 for
developing enterprise applications
• Supports the multi-tier architecture
– Two-tier architecture
Data Access
User Interface Logic Business Logic
J2EE Introduction
– Three tier architecture
– Application can be partitioned into number of
partitions say n
User Interface Logic
Business Logic
Data Access
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
Client
EJB
EJB
EJB
EJB Container
Web Container
(Servlet, JSP,
HTML, XML)
JNDI, JMS,
JavaMail
Enterprise Information
System
(RDBMS, ERP, Legacy Application)
Middle-Tier EIS-Tier Client-Tier
Client
Client
Client
J2EE Architecture
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
Container Services API
Declarative Service
Other Container Service
Deployement Descriptors
Application Components
Deployement Descriptors
Application Components
Deployement Descriptors
Application Components
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
Container
Request Reply
Component Component Component
Database Resource
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
Component Component Component Component
Component Component Component Component
Component Component
EJB
Component
Component Component Component DBMS
Client tier
Web tier
EJB tier
EIS tier
Request
Request
Request
Reply
Reply
Reply
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-of-
business 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
JSP
EJB
JDBC
Presentation Tier
Web Tier
Business Logic
Data Access Layer
Example Architectures
• Applet client with JSP and Databases
Web Browser/Applet
JSP
JDBC
Presentation Tier
Business Logic Tier
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 view, enterprise
application is one that
– 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 application’s 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
Data Data Data
Model Class
Controller Class
View Class
Client Presentation
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
