web application development
DESCRIPTION
It is web Application development. It is helpful in developing web ApplicationTRANSCRIPT
Web Application Development
Ms Swapnil Shrivastava
CDAC Bangalore
1
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
System Software
Application Software
Assembler Debugger Compiler
Utilities File System Drivers
Word Processing
Spreadsheet Databases
Games Graphics Communication
Web Application
Webmail Wikis
Social Media Online Retail
Operating System
4
Hardware Infrastructure
What is an Application?
Presentation Logic
Business Logic
Data Logic
5
Single Tier Architecture
Monolithic
• User Interface Layer • Business Rules • File/Database Access
Client-Server Application Presentation Logic
Business Logic
Business Logic
Data Logic
2-tier
Client
Client
Client
Client
Server
Fat Client - Thin Server
• FTP Server • Web Server • Database Server
• FTP Client • Web Browser • Mobile • Desktop Application
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 Connections
• 1000 Processes
• 500 MB of RAM
•10, 000 open Files
1000 Clients
OS Dies
Scalability
Local vs Global C/S
Application Local C/S Global C/S Characteristics
• No of clients < 100 Millions
• No of servers 1 100 + homogeneous heterogeneous
• Geography Campus Global
• Server-Server No Yes interaction
• Transaction Very infrequent Pervasive updates
• Client Front PB/VB Web Browser End
• C/S Arch. 2-tier 3-tier
Example : Web Application
Web Browser
Database
Web Browser
Web Browser
Presentation Logic
Business Logic
Data Logic
3-tier
Thin Client - Fat Server
Web Server
Classic Web Application
HTML file
http request (url)
http response (html)
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 Architecture…contd
• 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
<!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
hello.html
CSS
• CSS=Cascading Style Sheets
• CSS is a way to style HTML.
– Tag Property Value
p { color: red;}
• Three ways to apply CSS to HTML are :
– inline,
– internal / embedded and
– External stored in .css file.
17
HTML + CSS Example
18
<!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>
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.
• Microsoft’s VBScript, Netscape’s JavaScript
20
Client Side Script
21
Web Browser UI
Script Interpreter
http request (URL)
http response (html, css, Client Side Script))
Database
Query
Data
HTML+CSS+JavaScript Example
22
<button type="button" onclick="document.getElementById('demo').innerHTML = Date()"> Click me to display Date and Time.</button> <p id="demo"></p>
Dynamic Web Pages
Web Browser
Database
Http Request
HTML, Images, CSS, Javscript
Query
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
Web Browser
User Interface
Database
Http Request
HTML,CSS
Query
Data
Ajax Engine
Data
Javscript, Call
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), Microsoft’s Active Server Pages
26
Server Side Script
27
Web Browser UI
http request (script page)
http response (html page)
Database
Query
Data
Script Interpreter
PHP Example
28
<!DOCTYPE html> <html> <body> <?php echo "My first PHP script!"; ?> </body> </html>
hello.php
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, language-independent 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
<?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>
• Data exchange
• HTML is about displaying information
<html> <head> <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
<employee>
<name> Ameeta Sharma </name>
<salary> 50000 </salary>
<age> 32 </age>
</employee>
• JavaScript Object Notation
• Lightweight
{
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
method sp url sp version Cr lf
header field name: sp value cr lf
……
header field name: sp value cr lf
cr lf
Request Line
Header Line
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
38
www.tutorialspoint.com
HTTP Header Format
version sp status code sp phrase cr lf
header field name: sp value cr lf
……
header field name: sp value cr lf
cr lf
Status Line
Header Line
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 page’s 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
45
root server
org server edu server gov server com server
ucl.edu server virginia.edu server
cs. virginia.edu server
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
51
Web Browser UI
http request
http response
Database
Query
Data
Plugins
Script Interpreter
DNS domain
name
IP address
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