Web Application Development
Ms Swapnil Shrivastava
CDAC Bangalore
Content
Web Application: An Overview
Web Application Architecture : The Building
Blocks
Scripting Languages
Client Side Scripting
Server Side Scripting
Hyper Text Transfer Protocol
Domain Name Service
Web Server
Summary
2
Web Application
A web application or web app is any software
that is rendered in a web browser.
It is created in a browser-supported
programming language (such as the
combination of JavaScript, HTML and CSS).
Common web applications include webmail,
online retail sales, online auctions, wikis and
many other functions.
3
Web Application contd
Application Software Web Application
Word
Spreadsheet Wikis Databases
Processing Webmail
Games Social MediaGraphicsOnline Retail
Communication
System Software
Assembler
Debugger
Compiler
Utilities
File System
Drivers
Operating System
Hardware Infrastructure
4
What is an Application?
Presentation Logic
Business Logic
Data Logic
Single Tier Architecture
Monolithic
User Interface Layer
Business Rules
File/Database Access
Client-Server Application
Presentation Logic
Business Logic
Client
Business Logic
Data Logic
2-tier
Client
Server
FTP Server
Web Server
Database Server
FTP Client
Web Browser
Mobile
Desktop Application
Client
Client
Fat Client - Thin Server
Technology Breakthrough
Low-cost, high speed bandwidth on wide area
network.
Network enabled desktop operating system.
Component-oriented distributed
infrastructure.
Global Client/Server
So the problem was .
1000 Clients
1000 Connections
1000 Processes
500 MB of RAM
10, 000 open Files
OS Dies
Scalability
Local vs Global C/S
Application
Characteristics
No of clients
No of servers
Geography
Server-Server
interaction
Transaction
updates
Client Front
End
C/S Arch.
Local C/S
< 100
1
homogeneous
Campus
No
Very infrequent
PB/VB
2-tier
Global C/S
Millions
100 +
heterogeneous
Global
Yes
Pervasive
Web Browser
3-tier
Example : Web Application
Presentation Logic
Business Logic
Web Browser
Data Logic
3-tier
Web Browser
Database
Web Browser
Web Server
Thin Client - Fat Server
Classic Web Application
http request (url)
http response (html)
HTML
file
Static Web Pages
12
Evolution
1987 - Perl
Early 1990s static Web documents
1995 Javascript
1996 Macromedia Flash
1999 Servlet Specification, XML
2005 Ajax
2011 HTML5
13
3-tier Web Application
Architecturecontd
Presentation Logic : Web Browser
HTML, CSS, JavaScript, VBScript
XHTML, DHTML, WML, AJAX
FLASH
Business Logic : Web / Application Server
ASP, PHP, Perl, JSP
ASP.NET, Java
Data Logic : Database Server
MySQL, SQL Server, Access
14
What is HTML?
HTML = HyperText Markup Language
A set of markup tags for creation of web pages
viewable in a browser.
These html tags describes different document
content.
<html> and </html> describes an HTML document
<p> and </p> describes a paragraph
File extension : .html,.htm
http://www.slideshare.net/sbajoria/web-development-using-html-css
15
HTML Example
hello.html
<!DOCTYPE html>
<html>
<head>
<title>This is My Page Title</title>
</head>
<body>
<h1>This is My Heading</h1>
<p>This is My Paragraph.</p>
</body>
</html>
16
CSS
CSS=Cascading Style Sheets
CSS is a way to style HTML.
Tag Property
p { color:
Value
red;}
Three ways to apply CSS to HTML are :
inline,
internal / embedded and
External stored in .css file.
17
HTML + CSS Example
<!DOCTYPE html>
<html>
<head>
<title>This is My Page Title</title>
</head>
<body style="background-color:lightgrey">
<h1 style="text-align:center;color:blue">This is My Heading</h1>
<p style="font-family:courier">This is My Paragraph.</p>
</body>
</html>
18
Dynamic Web Pages
The page that changes or is created when it is
requested and contain up to date information.
Scripting languages used for creating dynamic
web pages.
The programs written using scripts:
Client side
Server side
JavaScript, VBScript, Perl, PHP, ASP
19
Client Side Script
Client scripting is mainly used for browser
special effects and form validation.
Runs in a Web browser (client-side).
Embedded in HTML files and can manipulate
the HTML itself.
Microsofts VBScript, Netscapes JavaScript
20
Client Side Script
http request (URL)
Query
Web Browser
UI
http response
(html, css, Client Side Script))
Database
Data
Script
Interpreter
21
HTML+CSS+JavaScript Example
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>
<p id="demo"></p>
22
Dynamic Web Pages
Web Browser
Http Request
Query
Database
HTML, Images,
CSS, Javscript
Data
23
Ajax
AJAX = Asynchronous JavaScript and XML.
A technique for creating better, faster, and more
interactive web applications.
AJAX is a browser technology independent of web
server software.
AJAX is a new way to use existing standards viz.
JavaScript ,XML, HTML and CSS.
It is about updating parts of a web page, without
reloading the whole page.
24
Ajax Application Model
Http
Request
Javscript,
Call
Web Browser
User
Interface
Query
Ajax
Engine
HTML,CSS
Database
Data
Data
25
Server Side Script
They create Web pages on the fly on the Web
server that are then sent to the browser.
The server scripting is used for accessing
databases on the backend.
Hypertext Preprocessor (PHP), Microsofts
Active Server Pages
26
Server Side Script
http request (script page)
Web Browser
UI
Query
Script
Interpreter
http response
(html page)
Database
Data
27
PHP Example
hello.php
<!DOCTYPE html>
<html>
<body>
<?php
echo "My first PHP script!";
?>
</body>
</html>
28
XML
XML = Extensible Markup Language.
It was designed to describe data.
XML tags are not predefined. You must define
your own tags.
XML uses a Document Type Definition (DTD)
or an XML Schema to describe the data.
XML is a W3C Recommendation.
29
JSON
JSON is a lightweight, text-based, languageindependent data interchange format.
It is built on two structures:
A collection of name/value pairs.
An ordered list of values.
JSON support six data types viz null, boolean,
numeric, string, array and object.
30
XML vs HTML
XML is about describing
information
HTML is about displaying
information
<?xml version="1.0"
encoding="ISO-8859-1" ?>
<note>
<to>Tove</to>
<from>Jani</from>
<header>Reminder</header>
<body>Don't forget me this
weekend!</body>
</note>
<html>
<head>
Data exchange
<title> Title of page </title>
</head>
<body>
This is my first homepage.
<b> This text is bold </b>
</body>
</html>
describe content
31
XML vs JSON
Extended Markup
Language
Heavyweight
JavaScript Object
Notation
Lightweight
<employee>
<name> Ameeta Sharma </name>
<salary> 50000 </salary>
<age> 32 </age>
</employee>
{
name : "Ameeta Sharma",
salary : 50000,
age : 32
}
32
Other Web Technologies
JQuery
fast, small, and feature-rich JavaScript library.
easy-to-use API
Web Service
interoperable machine-to-machine interaction over a
network.
REST, SOAP protocol
Content Management System
publishing, editing and modifying content, organizing,
deleting as well as maintenance from a central interface.
Joomla, Drupal
33
Web Application Framework
To enable rapid web application development.
Provide following common functionalities:
Data Persistence
Session Management and Authentication
Security
Caching
Administrative Interface
Templating
Django, Drupal, Ruby on Rails,Symfony
34
Benefits
A web browser required for roll out.
Require little or no space on the client.
No upgrade required.
Interactive and improved usability
Easier introduction of new devices.
35
HTTP
It is an application-level protocol for
distributed, collaborative, hypermedia
information systems.
Foundation for data communication for the
World Wide Web (i.e. internet) since 1990.
Basic features
Connectionless
Media independent
Stateless
36
HTTP Header Format
Request Line
method
sp
url
header field name:
sp
sp
version
Cr
value
cr
lf
value
cr
lf
lf
Header Line
header field name:
cr
sp
lf
Blank Line
Entity body
37
Example : HTTP Request
GET /hello.htm HTTP/1.1
User-Agent: Mozilla/4.0 (compatible; MSIE5.01;
Windows NT)
Host: www.tutorialspoint.com
Accept-Language: en-us
Accept-Encoding: gzip,deflate
Connection: Keep-Alive
www.tutorialspoint.com
38
HTTP Header Format
Status Line
version
sp
status code
header field name:
sp
sp
phrase
cr
value
cr
lf
value
cr
lf
lf
Header Line
header field name:
cr
sp
lf
Blank Line
Entity body
39
Example : HTTP Response
HTTP/1.1 200 OK
Date: Mon, 27 Jul 2009 12:28:53 GMT
Server: Apache/2.2.14 (Win32)
Last-Modified: Wed, 22 Jul 2009 19:15:56 GMT
Content-Length: 88
Content-Type: text/html
Connection: Closed
<html>
<body>
<h1>Hello, World!</h1>
</body>
</html>
40
Request Methods
Method
Description
GET
Request to read a Web page
HEAD
Request to Read a Web pages header
PUT
Request to store a Web page
POST
Append to a named resource (e.g. a web
page)
DELETE
Remove the Web page
TRACE
Echo the incoming request
CONNECT
Establish connection to the server
OPTIONS
Query certain options
41
Status Code
Status Code
Allocated Meaning
1xx
Informational
2xx
Successful
3xx
Redirection
4xx
Bad Request
5xx
Internal Server Error
42
Header Fields
General-header: These header fields have general
applicability for both request and response
messages.
Client Request-header: These header fields are
applicability only for request messages.
Server Response-header: These header fields are
applicability only for response messages.
Entity-header: These header fields define meta
information about the entity-body or, if no body
is present.
43
Domain Name System
It is used on the Internet to provide a standard
naming convention for locating IP-based
computers.
A distributed database that translates
between domain names and IP addresses
This naming system allows for growth on the
Internet and the creation of names that are
unique throughout the Internet .
44
Domain Name Servers
root server
org server
edu server
ucl.edu server
gov server
com server
virginia.edu server
cs. virginia.edu server
45
Domain Name Resolution
46
Web Server
A web server store, process and deliver web pages to
clients.
The communication between client and server takes place
using the Hypertext Transfer Protocol (HTTP).
Web pages are HTML documents, which may include
images, style sheets and scripts in addition to text content.
47
HTTP Request
Web servers are able to map the path component of a
Uniform Resource Locator (URL) into:
A local file system resource (for static requests)
An internal or external program name (for dynamic
requests)
48
Web Servers
Apache HTTP Server
Most popular open source web server.
Available for a range of operating system.
Microsoft Internet Information System
Second most popular web server
Part of Windows Operating System
Sun Java System Web Server
Available for most operating system
for medium to large business applications.
49
Web Application Security
deals specifically with security of websites,
web applications and web services.
Personal Information Leakage
File and Path Name based Attacks
DNS Spoofing
Location header and spoofing
Authentication Credentials
Proxies and Caching
50
Web Page Rendering
domain
name
DNS
IP address
http request
Web Browser
UI
Query
Plugins
http response
Database
Data
Script
Interpreter
51
Summary
Most Web pages are a combination of those
technologies
Raw content, placed inside
HTML tags, formatted with
CSS rules, interactivity produced by
JavaScript scripts on Clients sides and
PHP scripts on server sides
Newer technologies like DHTML, XHTML, and AJAX
are based on combination of these.
52
53
