Web Technology – A computer Science perspective

Embed Size (px)

Citation preview

  • 7/29/2019 Web Technology A computer Science perspective

    1/105

    Web Technology A computer

    Science perspective

    Pradeep Pocha11th Feb 2012

  • 7/29/2019 Web Technology A computer Science perspective

    2/105

    What is a protocol?

    Protocol An agreement about how to do something

    This enables computers and software built by different

    people to be able to communicate in the same language

    Examples that we have seen: Hyper Text Transfer Protocol (HTTP) Web Browser

    File Transfer Protocol (FTP) File transfer

    Simple Mail Transfer Protocol (SMTP) Email

    Internet Protocol (IP) Packets across the Internet

    #1

  • 7/29/2019 Web Technology A computer Science perspective

    3/105

    Contents!

    Human Protocols

    Sending a letter via the postal service

    Shayne Evans

    5501 Sennott Sq.

    Pittsburgh, PA. 15260

    Kim Morrison

    123 Somewhere St.

    Someplace, PA. 15555

    #1

  • 7/29/2019 Web Technology A computer Science perspective

    4/105

    Computer Protocols

    Sending a packet via the network

    To: 192.168.1.1 on port 23

    From: 192.168.1.110 on port 6710

    Payload: The contents of the message belong

    here.

    #1

  • 7/29/2019 Web Technology A computer Science perspective

    5/105

    Contents!!!

    Visual Comparison

    To: 192.168.1.1 on port 23

    From: 192.168.1.110 on port 6710

    Payload: The contents of themessage belong here.

    Contents!

    Shayne Evans5501 Sennott Sq.

    Pittsburgh, PA. 15260

    Kim Morrison

    123 Somewhere St.

    Someplace, PA. 15555

    #1

  • 7/29/2019 Web Technology A computer Science perspective

    6/105

    Textual Comparison

    The address of the letter is the destination of

    the packet

    The return address of the letter is the source

    of the packet

    The content of the envelope is the payload of

    the packet

    In both protocols, if you disobey the rules your

    message will not be received

    #1

  • 7/29/2019 Web Technology A computer Science perspective

    7/105

    Protocol Layers

    Protocols can be layered on top of other

    protocols to enable new ways of

    communicating

    #1

  • 7/29/2019 Web Technology A computer Science perspective

    8/105

    Example: Writing a letter

    A common protocol that is followed when

    writing a letter is:

    [Date]

    Dear [Recipient],

    [Body of message goes here]

    [Closing][Sender signature]

    [Sender name]

    #1

  • 7/29/2019 Web Technology A computer Science perspective

    9/105

    Example: Writing a letter

    A common protocol that is followed when

    writing a letter is:

    04/01/2008

    Dear Kim,

    Hey there! Whats up? Im good. Thanks.

    Sincerely,Shayne EvansShayne Evans

    #1

  • 7/29/2019 Web Technology A computer Science perspective

    10/105

    04/01/2008

    Dear Kim,

    Hey there! Whats up? Im good. Thanks.

    Sincerely,

    Shayne EvansShayne Evans

    Example: Writing a Letter

    After following the protocol for writing a

    letter, I can use the protocol for sending a

    letter via the postal service:

    Shayne Evans

    5501 Sennott Sq.

    Pittsburgh, PA. 15260

    Kim Morrison123 Somewhere St.

    Someplace, PA. 15555

    #1

  • 7/29/2019 Web Technology A computer Science perspective

    11/105

    Example: Writing a letter

    Thus, I have layered two protocols on top of

    each other.

    The lower protocol provides a service used by

    the higher protocols.

    Letter Writing Protocol

    Sending a Letter via USPS Protocol

    #1

  • 7/29/2019 Web Technology A computer Science perspective

    12/105

    Protocol Layering:

    The Internet is build this way

    Internet Protocol (IP) provides a way to deliver

    packets to a destination

    TCP

    Internet Protocol

    SSH, FTP, HTTP, SMTP

    UDP

    DNS, VoIP

    #1

  • 7/29/2019 Web Technology A computer Science perspective

    13/105

    TCP uses packets to maintain connections

    across a network, and thus is layered above IP

    TCP

    Internet Protocol

    SSH, FTP, HTTP, SMTP

    UDP

    DNS, VoIP

    Protocol Layering:

    The Internet is build this way

    #1

  • 7/29/2019 Web Technology A computer Science perspective

    14/105

    UDP just sends or receives raw packets with a

    best-effort approach, also layered above IP

    TCP

    Internet Protocol

    SSH, FTP, HTTP, SMTP

    UDP

    DNS, VoIP

    Protocol Layering:

    The Internet is build this way

    #1

  • 7/29/2019 Web Technology A computer Science perspective

    15/105

    SSH, FTP, HTTP, SMTP and many more

    applications use TCP connections to

    communicate data back and forth

    TCP

    Internet Protocol

    SSH, FTP, HTTP, SMTP

    UDP

    DNS, VoIP

    Protocol Layering:

    The Internet is build this way

    #1

  • 7/29/2019 Web Technology A computer Science perspective

    16/105

    DNS, VoIP, and many more applications use

    UDP packets to communicate data

    TCP

    Internet Protocol

    SSH, FTP, HTTP, SMTP

    UDP

    DNS, VoIP

    Protocol Layering:

    The Internet is build this way

    #1

  • 7/29/2019 Web Technology A computer Science perspective

    17/105

    CS 640 17

    HTTP Request Messages

    GETretrieve document specified by URL

    PUTstore specified document under given URL

    HEADretrieve info. about document specified by URL

    OPTIONSretrieve information about available options

    POSTgive information (eg. annotation) to the server

    DELETEremove document specified by URL

    TRACEloopback request message

    CONNECTfor use by caches

  • 7/29/2019 Web Technology A computer Science perspective

    18/105

    CS 640 18

    HTTP Response Codes

    1xxInformationalrequest received, processing

    2xxSuccessaction received, understood, accepted

    3xxRedirectionfurther action necessary 4xxClient Errorbad syntax or cannot be fulfilled

    5xxServer Errorserver failed

  • 7/29/2019 Web Technology A computer Science perspective

    19/105

    URI,URN,URL

    Uniform Resource Identifier

    Information about a resource

    Uniform Resource Name The name of the resource with in a namespace

    Uniform Resource Locator

    How to find the resource, a URI that says how to find

    the resource

  • 7/29/2019 Web Technology A computer Science perspective

    20/105

    Using HTML/XHTML

    XHTML is relatively simple. You do most of yourwork with about twenty tags.

    XHTML is orderly and structured Good references and tutorial sites are available

    Follow the standards and your work will be muchsimpler, more consistent, and your results more

    reliable Plus your co-workers will like you more

  • 7/29/2019 Web Technology A computer Science perspective

    21/105

    Device Independence

    Your audience may view your site with many

    different devices and browser types.

  • 7/29/2019 Web Technology A computer Science perspective

    22/105

    The Browser

    The browser is not print!

  • 7/29/2019 Web Technology A computer Science perspective

    23/105

    The Browser Is Not Print

    No fixed page size

    No fixed page length

    User can change the font size User can link to her/his own local style sheet

    Screen size can be tiny or huge

  • 7/29/2019 Web Technology A computer Science perspective

    24/105

    The Adjustable Document

  • 7/29/2019 Web Technology A computer Science perspective

    25/105

    The Birth of HTML

    Created by Tim Berners-Lee at CERN

    Open standard developed under supervision of the

    World Wide Web Consortium (www.w3.org) Works to ensure the full potential of the Web for

    shared, integrated functionality is realized

    http://www.w3.org/http://www.w3.org/
  • 7/29/2019 Web Technology A computer Science perspective

    26/105

    The History of HTML/XHTML

    1992HTML first defined

    1994HTML 2.0

    1995Netscape specific non-standard HTML

    1996HTML 3.2, compromise version

    1997HTML 4.0, separates content from presentation

    1998XML standard for writing Web languages

    2000XHTML 1.0, XML compliant HTML

    2002XHTML 2.0

  • 7/29/2019 Web Technology A computer Science perspective

    27/105

    Problems With HTML

    Competing versions of browsers introducedfeatures beyond the standards

    Inconsistent implementations of display enginesand scripting

    Content and presentation mixed together Layout often done with tables

    Each element had many presentation attributes,resulting in laborious maintenance

    The Slop Code Era

  • 7/29/2019 Web Technology A computer Science perspective

    28/105

    XHTML

    XHTML is a version of HTML modified to conform to theXML standard

    Designed to separate content from presentation

    Content in XHTML Presentation controlled by Cascading Style Sheets (CSS)

    ExtensibleAdditional elements can be defined

    XML CompatibleOther XML based languages can be

    embedded in XHTML documents Like a programming language Specific syntax to use

    Validators help you get it right

  • 7/29/2019 Web Technology A computer Science perspective

    29/105

    XHTML Differences

    Case is significant

    All elements must have begin tags and end tags

    Hello

    Empty elements contain their own end tag

    Attribute values must be enclosed in quotation

    marks More specfics available at

    http://www.w3.org/TR/xhtml1/#diffs

  • 7/29/2019 Web Technology A computer Science perspective

    30/105

    A Simple XHTML File

    My Home Page

    My Home Page

    Welcome to my home page

  • 7/29/2019 Web Technology A computer Science perspective

    31/105

    Hierarchical Structure

    Well formed xhtml forms a hierarchy

  • 7/29/2019 Web Technology A computer Science perspective

    32/105

    Content Types

    Documents are made up of logical types of content.

  • 7/29/2019 Web Technology A computer Science perspective

    33/105

    Semantic Structure

    Content of the same type usually is formatted to look thesame.

  • 7/29/2019 Web Technology A computer Science perspective

    34/105

    Semantic Markup

    HTML markup is based on logical content types

  • 7/29/2019 Web Technology A computer Science perspective

    35/105

    Hierarchy

    The resulting hierarchy

  • 7/29/2019 Web Technology A computer Science perspective

    36/105

    The DOCTYPE Statement

    Declares the specific version of HTML orXHTML being used on the page

    Used by the browser to decide how to process thepage

    Three types Transitional - Forgiving

    StrictRequires adherence to standards FramesetUse if page has frames

    Always first in file

  • 7/29/2019 Web Technology A computer Science perspective

    37/105

    Strict DOCTYPE

    Enter exactly as below

  • 7/29/2019 Web Technology A computer Science perspective

    38/105

    Elements

    Consist of three parts

    Begin tag, which can contain attributes

    Contents End tag

    Example:

    Welcome

    W3schools specifications for

    http://www.w3schools.com/tags/tag_p.asp

  • 7/29/2019 Web Technology A computer Science perspective

    39/105

    Attributes

    Always only used in the element begin tag

    Three types Optional attributes: Varies with element type

    Standard attributes: id, class, title, style, dir, lang,xml:lang

    Event attributes: onclick, ondblclick, onmousedown,onmouseup, onmouseover, onmousemove, onmouseout,

    onkeypress, onkeydown, onkeyup Used in scripting

  • 7/29/2019 Web Technology A computer Science perspective

    40/105

    Empty Elements

    Some elements have no content and therefore alsohave no end tag


  • 7/29/2019 Web Technology A computer Science perspective

    41/105

    , , , etc.

    Headings on the page

    Represent the main topic, subtopics, subsubtopics,

    etc. of the page Important to use they in a logical manner, which

    greatly helps assistive technology like voice

    browsers present the page content intelligibly

  • 7/29/2019 Web Technology A computer Science perspective

    42/105

    Paragraph

    Important for presentation control to put text in an

    element. When in doubt, put text in a paragraph Blockquotes () except they have

    wider left and right margins

  • 7/29/2019 Web Technology A computer Science perspective

    43/105

    Lists

    Unordered lists (bulleted lists)

    One

    Two

    Ordered lists (numbered lists)

    One

    Two

  • 7/29/2019 Web Technology A computer Science perspective

    44/105

    Text Markup

    Bolding text

    text

    Italics text

    text

    Other

    text subscript text superscript

    text deleted text

  • 7/29/2019 Web Technology A computer Science perspective

    45/105

    Tables

    People on the team

    Name

    Position

    Mary

    Analyst

    John

    Technician

  • 7/29/2019 Web Technology A computer Science perspective

    46/105

    Graphics

    Graphics are placed by using an img element

    The alt attribute provides alternative text

    describing the graphic in case the graphic itselfcannot be shown or the user cannot see the graphic

  • 7/29/2019 Web Technology A computer Science perspective

    47/105

    Anchors

    Anchors can link your page to any file on the Web

    University of Washington

  • 7/29/2019 Web Technology A computer Science perspective

    48/105

    Divs

    Divs enclose a set of elements

    News

    Budget

    Investment

  • 7/29/2019 Web Technology A computer Science perspective

    49/105

    Spans

    Spans enclose objects (text, graphics) within an

    element

    Call me Ishmael. Some years agonever mind how long

    preciselyhaving little or no money in my purse,

    and nothing particular to interest me on shore,

  • 7/29/2019 Web Technology A computer Science perspective

    50/105

    Cascading Style Sheets

    Are used to control how elements are presented in

    the Web page

    Use a different syntax that HTML/XHTML Work with the common visual browsers (Internet

    Explorer, FireFox, Opera)

    Used properly, can great simplify visual design,

    site management and content maintenance

  • 7/29/2019 Web Technology A computer Science perspective

    51/105

    A Style

    Selector Property Value

    p { font-family: times; }

    Note the punctuation: The property is followed by

    a colon (:) and the value is followed by a

    semicolon(;)

  • 7/29/2019 Web Technology A computer Science perspective

    52/105

    Using CSS

    Styles can be set in a stylesheet, in a style element inthe head or in a style attribute

  • 7/29/2019 Web Technology A computer Science perspective

    53/105

    Selectors

    Simple selectors

    p { color: blue }

    h1, h2, h3, h4 { font-style: italic; }

    Contextual selectors

    ul li { font-weight: bold; }

    #main img { border: solid black 5px; }

    p.intro { font-family: verdana, sans-serif;}

  • 7/29/2019 Web Technology A computer Science perspective

    54/105

    The Box Model

    Each element has padding, border, and margin

  • 7/29/2019 Web Technology A computer Science perspective

    55/105

    Vertical Margins

    The larger of the two vertical margins will determinethe distance between elements

  • 7/29/2019 Web Technology A computer Science perspective

    56/105

    Visual Formatting Model

    Pages are built as a series of blocks stacked from thetop down

  • 7/29/2019 Web Technology A computer Science perspective

    57/105

    Controlling Layout

    Styles can control size and placement of elements

    Example:

    #nav { width: 12em; float: left; }#news { width: 12em; float: right; }

    #main { margin: 1em 13em 1em 13em;

  • 7/29/2019 Web Technology A computer Science perspective

    58/105

    Nav Div Float Left

  • 7/29/2019 Web Technology A computer Science perspective

    59/105

    Nav Div Float Right

  • 7/29/2019 Web Technology A computer Science perspective

    60/105

    Nav Across Top

    Items in the Nav bar are anchors within a div

  • 7/29/2019 Web Technology A computer Science perspective

    61/105

    HTML-Kit

    HTML-Kit (Windows) is free editor that makes iteasy to make standards compliant XHTML

  • 7/29/2019 Web Technology A computer Science perspective

    62/105

    HTML-Kit Has Tidy

    Press F9 and your XHTML is validated and tidiedfor easy reading

  • 7/29/2019 Web Technology A computer Science perspective

    63/105

    Resources

    HTML-Kit editorhttp://chami.com/

    Amaya editorhttp://www.w3c.org/Amaya

    W3schools XHTML and CSS tutorialshttp://www.w3schools.com/

    Web Head Start tutorialshttp://www.webheadstart.org/

    Tidy Web Interface - http://www.washington.edu/webinfo/tidy.cgi

    CSS Validator - http://jigsaw.w3.org/css-validator/

    Dave Raggett XHTML and CSS tutorials -http://www.w3.org/MarkUp/Guide/Overview.html

    Web Accessibility in Mind (WebAIM) - http://www.webaim.org/

    Color contrast analyzer -http://www.visionaustralia.org.au/info.aspx?page=628

    Stylin With CSS, A Designers Guide, Second Edition by CharlesWyke-Smith

  • 7/29/2019 Web Technology A computer Science perspective

    64/105

    Web Application

    64

  • 7/29/2019 Web Technology A computer Science perspective

    65/105

    Model 1 Architecture

    Model 1Architecture

  • 7/29/2019 Web Technology A computer Science perspective

    66/105

    Model 2Architecture

    Model 2Architecture

  • 7/29/2019 Web Technology A computer Science perspective

    67/105

    Model-View-Controller

  • 7/29/2019 Web Technology A computer Science perspective

    68/105

    Servlet

    A servlet is a JavaTM technology-based Web

    component, managed by a container, that

    generates dynamic content. --- Servlet API

    Specification, Version 2.4

    The servlet containeris a part of a Web server or

    application server that provides the network

    services over which requests and responses aresent, decodes MIME-based requests, and formats

    MIME-based responses. A servlet container also

    contains and manages servlets through their

    lifecycle

  • 7/29/2019 Web Technology A computer Science perspective

    69/105

    Web Server Machine

    Client

    Web

    Server

    App

    (e.g.

    Apache)

    Web

    Container

    App

    (e.g.

    Tomcat)

    Servlet

    Web App Processing with Servlet

    Request

    URL

  • 7/29/2019 Web Technology A computer Science perspective

    70/105

    Web Server Machine

    Client

    Web

    Server

    App

    (e.g.

    Apache)

    Web

    Container

    App

    (e.g.

    Tomcat)

    Servlet

    Web App Processing with Servlet

    Request

    URL

    Apache forwards HTTP request to

    Tomcat Using AJP protocol

  • 7/29/2019 Web Technology A computer Science perspective

    71/105

    Web Server Machine

    Client

    Web

    Server

    App

    (e.g.

    Apache)

    Web

    Container

    App

    (e.g.

    Tomcat)

    Servlet

    Web App Processing with Servlet

    Request

    Tomcat uses the mapping info in a

    configuration file called web.xml of the

    web application to find the right servlet

  • 7/29/2019 Web Technology A computer Science perspective

    72/105

    Web Server Machine

    Client

    Web

    Server

    App

    (e.g.

    Apache)

    Web

    Container

    App

    (e.g.

    Tomcat)

    Servlet

    Web App Processing with Servlet

    Response

    Tomcat uses the mapping info in a

    configuration file called web.xml of the

    web application to find the right servlet

  • 7/29/2019 Web Technology A computer Science perspective

    73/105

    Web Server Machine

    Client

    Web

    Server

    App

    (e.g.

    Apache)

    Web

    Container

    App

    (e.g.

    Tomcat)

    Servlet

    Web App Processing with Servlet

    Response

  • 7/29/2019 Web Technology A computer Science perspective

    74/105

    Web Server Machine

    Client

    Web

    Server

    App

    (e.g.

    Apache)

    Web

    Container

    App

    (e.g.

    Tomcat)

    Servlet

    Web App Processing with Servlet

    Response

  • 7/29/2019 Web Technology A computer Science perspective

    75/105

    What Container Provides?

    Communication Support(to web server; no socket code)

    Lifecycle Management of Servlet(loading; instantiating; initializing; invoking; garbage collection; fault

    tolerance) Multithread Support

    (create threat for each servlet request)

    Declarative Security(use XML deployment descriptor to configure/modify security withouthaving to hard-code it into servlet code)

    JSP Support(translating that JSP code into real java)

  • 7/29/2019 Web Technology A computer Science perspective

    76/105

    What a Simple Servlet looks Like?import javax.servlet.*;

    import javax.servlet.http.*;import java.io.*;

    public class SimpleServlet extends HttpServlet {

    public void doGet (HttpServletRequest request, HttpServletResponse response) throwsIOException {

    PrintWriter out = response.getWriter();java.util.Date today = new java.util.Date();

    out.println("This is a simple web page generated by SimpleServletwith date info.
    Today is "+today+"");

    }

    }

  • 7/29/2019 Web Technology A computer Science perspective

    77/105

    What a Servlet Code looks Like?package com.example.web;

    import com.example.model.*;import javax.servlet.*;

    import javax.servlet.http.*;

    import java.io.*;

    import java.util.*;

    public class BeerSelect extends HttpServlet {

    public void doPost (HttpServletRequest request,HttpServletResponse response)

    throws IOException, ServletException {

    String c = request.getParameter("color");

    BeerExpert be = new BeerExpert();

    List result = be.getBrands(c);

    request.setAttribute("styles", result);RequestDispatcher view =

    request.getRequestDispatcher("result.jsp");

    view.forward(request, response);

    }

    }

  • 7/29/2019 Web Technology A computer Science perspective

    78/105

    How Does Container Find Right Servlet?

    Using the Deployment Descriptor web.xml

    CS301 Simple Servlet

    SimpleServlet

    CS301 Simple Servlet /s1

    This mapping improves flexibility and security. How?

  • 7/29/2019 Web Technology A computer Science perspective

    79/105

    A Simple Web Application Following Model-

    View-Controller Design Pattern

    Servlet

    Controller

    e.g. BeerSelect.java

    Class Beer{

    //Business

    //Logic

    }

    Model

    e.g., BeerExpert.java

    View

    e.g. result.jsp

    Fil St t i A J W b D l t

    http://cs.uccs.edu/~cs301/mvc/beerV1/src/com/example/web/BeerSelect.javahttp://cs.uccs.edu/~cs301/mvc/beerV1/src/com/example/model/BeerExpert.javahttp://cs.uccs.edu/~cs301/tomcatChow/webapps/Beer-v1/result.jsp.htmlhttp://cs.uccs.edu/~cs301/tomcatChow/webapps/Beer-v1/result.jsp.htmlhttp://cs.uccs.edu/~cs301/mvc/beerV1/src/com/example/model/BeerExpert.javahttp://cs.uccs.edu/~cs301/mvc/beerV1/src/com/example/web/BeerSelect.javahttp://cs.uccs.edu/~cs301/java/mvc/beerV1/http://cs.uccs.edu/~cs301/java/mvc/beerV1/
  • 7/29/2019 Web Technology A computer Science perspective

    80/105

    File Structure in A Java Web Development

    Environment

    beerV1

    srcetc lib classes web

    web

    com

    example

    model

    BeerSelect.javaBeerExpert.java

    Web.xml

    File Structure in a tomcatChow

    http://cs.uccs.edu/~cs301/java/mvc/beerV1/http://cs.uccs.edu/~cs301/java/mvc/beerV1/http://cs.uccs.edu/~cs301/java/mvc/beerV1/http://cs.uccs.edu/~cs301/tomcatChow/webapps/Beer-v1/result.jsp.htmlhttp://cs.uccs.edu/~cs301/tomcatChow/webapps/Beer-v1/result.jsp.html
  • 7/29/2019 Web Technology A computer Science perspective

    81/105

    Java Web

    Deployment

    Environment Beer-v1

    WEB-INF

    libclasses

    web

    com

    example

    model

    BeerSelect.javaBeerExpert.java

    Web.xml

    webapps

    Form.html

    Servlet with JDBC demo

    http://cs.uccs.edu/~cs301/tomcatChow/webapps/Beer-v1/result.jsp.htmlhttp://cs.uccs.edu/~cs301/tomcatChow/webapps/Beer-v1/result.jsp.htmlhttp://blanca.uccs.edu:8080/sql/join.jsp.htmlhttp://java.sun.com/docs/books/tutorial/jdbc/basics/index.htmlhttp://windom.uccs.edu:9888/sql/testDBServlet.htmlhttp://windom.uccs.edu:9888/sql/testDBServlet.htmlhttp://java.sun.com/docs/books/tutorial/jdbc/basics/index.htmlhttp://blanca.uccs.edu:8080/sql/join.jsp.html
  • 7/29/2019 Web Technology A computer Science perspective

    82/105

    Servlet with JDBC demo

    import java.sql.*;

    import javax.sql.*;

    public class InventoryDBServlet extends HttpServlet {

    Driver D;

    Connection con;

    Statement stmt;

    PrintWriter out = response.getWriter();

    try {

    Class.forName("org.gjt.mm.mysql.Driver").newInstance();

    } catch(java.lang.ClassNotFoundException e) {

    System.err.print("ClassNotFoundException: +e.getMessage());

    }

    String url="jdbc:mysql://blanca.uccs.edu:3306/"+database+"?user="+user+"&password="+passwd;

    con = DriverManager.getConnection(url);

    stmt = con.createStatement();

    String sqlcmd = "select * from inventory";

    ResultSet rs = stmt.executeQuery(sqlcmd);while (rs.next()) {

    StringBuffer itemName = new StringBuffer(rs.getString(1));

    StringBuffer amount = new StringBuffer(rs.getString(2));

    out.println(""+itemName+""+amount+"");

    }

    }

    http://blanca.uccs.edu:8080/sql/join.jsp.htmlhttp://java.sun.com/docs/books/tutorial/jdbc/basics/index.htmlhttp://windom.uccs.edu:9888/sql/testDBServlet.htmlhttp://windom.uccs.edu:9888/sql/testDBServlet.htmlhttp://java.sun.com/docs/books/tutorial/jdbc/basics/index.htmlhttp://blanca.uccs.edu:8080/sql/join.jsp.html
  • 7/29/2019 Web Technology A computer Science perspective

    83/105

    JSP with JSTL SQL Tag Demo

    select price.item, price.unitPrice, inventory.amount from price, inventory where price.item =inventory.item

    DBcatalog DB Catalog Retrieval Results

    itemunitPriceamount

    ${row.item} ${row.unitPrice}${row.amount}

    http://cs.uccs.edu/~cs301/tomcatChow/webapps/sql/join.jsp.htmlhttp://windom.uccs.edu:9888/sql/catalogDB.jsphttp://windom.uccs.edu:9888/sql/catalogDB.jsphttp://cs.uccs.edu/~cs301/tomcatChow/webapps/sql/join.jsp.html
  • 7/29/2019 Web Technology A computer Science perspective

    84/105

    JSP with SQL:UPDATE Parameter Access

    Demo http://windom.uccs.edu:9888/sql/passwd.jsp

    Source

    Note that we really do not need to set login/password variable. Just use directly in and in

    http://windom.uccs.edu:9888/sql/passwd.jsphttp://cs.uccs.edu/~cs301/tomcatChow/webapps/sql/passwd.jsp.htmlhttp://cs.uccs.edu/~cs301/tomcatChow/webapps/sql/passwd.jsp.htmlhttp://windom.uccs.edu:9888/sql/passwd.jsp
  • 7/29/2019 Web Technology A computer Science perspective

    85/105

    JDBC

    Load the driver class

    Get a connection

    Create a statement Execute the query, returns ResultSet

    Iterate through ResultSet

    JDBC Example

  • 7/29/2019 Web Technology A computer Science perspective

    86/105

    JDBC Example

    // Load the Oracle JDBC driver

    Class.forName ("oracle.jdbc.driver.OracleDriver"); //Connect to DB server as authorized user

    Connection conn = DriverManager.getConnection("jdbc:oracle:thin:@orion.towson.edu:1521:cosc", account,

    password);

    // Create a JDBC Statement to hold SQL queryStatement stmt = conn.createStatement ();ResultSet rset = stmt.executeQuery ("select ticker fromstocks");

    // Iterate through the result and print the employee names

    while (rset.next ()) {out.println (rset.getString (1));}

  • 7/29/2019 Web Technology A computer Science perspective

    87/105

    87

    Storing and Sharing Data

    Persistent Temporary

    Server side

    Database,

    Flat files

    Class level variable,

    Session,Application context

    Client side

    Persistent

    cookie

    Session cookie

  • 7/29/2019 Web Technology A computer Science perspective

    88/105

    88

    HTTP State and Session

    What is a session? A serial of consecutive and related requests from and responses to a

    single client, in a certain duration and scope

    What is state? State is the information to describe or identify a session at a certain

    point of time

    Stateful: each request/response can maintain its state at different pointsof times

    Phone calls are stateful

    Stateless: each request/response cannot maintain its state at differentpoints of times HTTP protocol is stateless, i.e., HTTP itself does not provide mechanisms

    to maintain state information for each request/response. In other words,HTTP does not remember.

  • 7/29/2019 Web Technology A computer Science perspective

    89/105

    89

    Applications

    Where is session/state needed?

    User sign-in status

    A transaction involving multiple steps

    (requests/responses), such as

    shopping (cart)

    multi-page survey or multi-page test

    auto insurance quote

    User preferences, personalization, customization

  • 7/29/2019 Web Technology A computer Science perspective

    90/105

    90

    Making HTTP Stateful

    HTTP itself is not stateful. Application level

    statement management is needed.

    How to manage state (with Java platform)?

    Cookie (persistent cookie and session cookie)

    Java session API

    URL rewriting Using form hidden variables

  • 7/29/2019 Web Technology A computer Science perspective

    91/105

    91

    Cookies

    Cookie is a small piece of textual information stored on theclient computer which web servers can interact with

    Cookie facts Cookie is pure text information Cookie is sent with HTTP headers

    Cookie has restrictions (number, size, domain, path)

    For more cookie informaiton http://wp.netscape.com/newsref/std/cookie_spec.html

    http://www.w3.org/Protocols/rfc2109/rfc2109.txt

    http://kristol.org/cookie/

    http://wp.netscape.com/newsref/std/cookie_spec.htmlhttp://www.w3.org/Protocols/rfc2109/rfc2109.txthttp://kristol.org/cookie/http://kristol.org/cookie/http://www.w3.org/Protocols/rfc2109/rfc2109.txthttp://wp.netscape.com/newsref/std/cookie_spec.html
  • 7/29/2019 Web Technology A computer Science perspective

    92/105

    92

    Client Computer

    Cookie Life Cycle

    Server side

    Servlets

    or

    JSPs

    Persiste

    ntCookie

    Response to set cookies

    Subsequent requests:

    Cookie is sent with HTTP header

    Cookie expires at certain duration

    Response to set cookies

    SessionCookie

  • 7/29/2019 Web Technology A computer Science perspective

    93/105

    93

    Java Cookie API

    javax.servlet.http.Cookie

    Creating a cookie

    Cookie cookie=new Cookie(cookieName, cookieValue);

    cookie.setMaxAge(int seconds); //only for persistent cookie

    response.addCookie(cookie); //sending cookie to client

    Reading a cookie Cookie cookies[]=request.getCookies()

    getName() and getValue()

    See example cookieset.jsp, cookieread.jsp and Listing 8.2

  • 7/29/2019 Web Technology A computer Science perspective

    94/105

    94

    Session Cookie

    Session cookie is not saved to the disk; it onlyexist in the memory for the duration of the

    browser

    Session cookie expires when the browser window isclosed

    Dont set maxAge when creating a sessioncookie

    Note: a session cookie JSESSIONID isautomatically set by the server

    See example cookieset.jsp and cookieread.jsp

  • 7/29/2019 Web Technology A computer Science perspective

    95/105

    95

    Cookie Practices

    Cookies only handle simple data Numbers, characters, strings

    Persistent cookies save data on client computers for acertain period of time A unique feature that can be utilized

    Often used to save user preferences or convenience information

    See example cookieset.jsp and cookieread.jsp

    Client computers might block cookies See IE privacy settings

    How to detect that? See section 8.3

  • 7/29/2019 Web Technology A computer Science perspective

    96/105

    96

    Web Application Server Session

    State information can also be saved on the server side (inserver memory)

    How to relate each visit/client with a specific session(server memory storage)? Each visit/session is identified by a unique ID (session id), which

    is passed with every request

    What are the ways to pass this ID to server?

    Session duration On the server side, session duration is set by the server. Session

    expires when there is no activity for a certain amount of time.

  • 7/29/2019 Web Technology A computer Science perspective

    97/105

    97

    Client Browser

    Session Life Cycle

    Server side

    1strequest

    ServerMemory

    Servletsor

    JSPs

    Session Created

    Put data into memory

    Read data from memory

    SessionCookie

    First response: session id is set

    Subsequent requests:

    session id is sent to server

    Session ends

    after browser is closed*

    Session ends

    after a certain idle period

  • 7/29/2019 Web Technology A computer Science perspective

    98/105

    98

    Servlet Session API

    Session class javax.servlet.http.HttpSession object represents a session

    To get a session object ServletSession session=request.getSession();

    JSP: session is given as an implicit object

    Properties Session ID: session.getId()

    Creation time

    Is it a new session?

    See example sessioninfo1.jsp and sessioninfo2.jsp; or Listing 9.1

  • 7/29/2019 Web Technology A computer Science perspective

    99/105

    99

    Using Session API

    Web server settings Session is automatically created by web server

    Session ID is automatically generated by web server

    Session ID is sent to client (either as session cookie or URLparameter) automatically

    Store data in session session.setAttribute()

    Read data from session session.getAttribute()

    needs type casting if an object is stored in the session

    See example sessioninfo1.jsp and sessioninfo2.jsp; or Listing 9.1

  • 7/29/2019 Web Technology A computer Science perspective

    100/105

    100

    Session Practice

    What data to put in session? Information that should be shared during a users visit

    of multiple requests User preferences, choices

    User status, e.g. login information Shopping cart information

    Temporary data between page transition

    How much data to put in session? Use session only for necessary and frequently accessed

    data

  • 7/29/2019 Web Technology A computer Science perspective

    101/105

    101

    Servlet Class Variables

    Class level variable is accessed and shared by allrequests to the same servlet (JSP page) For JSP page, it is the variable defined in the

    declaration element

    The value of the variable remains in the memoryuntil the servlet is reloaded

    Example Counter of the servlet/JSP page

    How to prevent count cheating?

    See example classvariable.jsp

  • 7/29/2019 Web Technology A computer Science perspective

    102/105

    102

    Application Context API

    To share the data application wide (across allsessions), use the ServletContext classjavax.servlet.ServletContext class

    To get the application context object Servlet

    ServletContext application=this.getServletContext();

    JSP: application is given as an implicit object

    Usage A counter of user visits (sessions)

  • 7/29/2019 Web Technology A computer Science perspective

    103/105

    103

    Web Application Events

    A J2EE web application (context), and everysession, has its own life cycle

    Usage How to count website (application) visits?

    How to perform some operations every time a userissues the first request (for any file)

    For more information http://www.stardeveloper.com/articles/display.html?article=2001111901

    http://www.stardeveloper.com/articles/display.html?article=2001111901http://www.stardeveloper.com/articles/display.html?article=2001111901
  • 7/29/2019 Web Technology A computer Science perspective

    104/105

    104

    Summary: Data Sharing and Access

    ServletContext /applicationJSP/Servlet

    Computer A

    JSP/Servlet JSP/Servlet

    Computer B

    Session / session cookie

    shares information only

    for that session

    Request/Response

    Class Level Variable

    shares information

    across all computers,

    but within thatJSP/servlet

    Persistent cookie shares

    information for all

    sessions on one computer

  • 7/29/2019 Web Technology A computer Science perspective

    105/105

    References:

    www.cs.pitt.edu/~sevans/cs110/protocols.ppt(#1) XHTML and CSS:Rick Ells UW Technology

    http://staff.washington.edu/rells/

    Java Web Application Framework (WAF)

    Melek OKTAY 50050403 [email protected]

    Servlet and JSP C Edward Chow

    Data Sharing and State Management -Jack G. Zheng

    http://www.cs.pitt.edu/~sevans/cs110/protocols.ppt(http://staff.washington.edu/rells/mailto:[email protected]:[email protected]://staff.washington.edu/rells/http://staff.washington.edu/rells/http://www.cs.pitt.edu/~sevans/cs110/protocols.ppt(http://www.cs.pitt.edu/~sevans/cs110/protocols.ppt(