Scribd Logo
Upload

Welcome to Scribd!

  • Web Application Development

    Uploaded by

    Anuj Mathur
    365 views53 pages
    It is web Application development. It is helpful in developing web Application

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    It is web Application development. It is helpful in developing web Application

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    365 views53 pages

    Web Application Development

    Uploaded by

    Anuj Mathur
    It is web Application development. It is helpful in developing web Application

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 53

    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

    You might also like