Unit 02: Web Technologies (2/2)

Unit 2: Web Technologies (2/2)‫‏‬
 Core
 Web browsers and web servers
 URIs
 HTTP

 Client-Side
 Basic: HTML, CSS
 Advanced: JavaScript, DOM, AJAX, HTML 5, RIA

 Server-Side technologies for Web Applications
 CGI
 PHP
 Java Servlets
 JavaServer Pages (JSPs)‫‏‬

dsbw 2011/2012 q1 1

Enabling Technologies for Web Applications

 Web applications use enabling technologies to make their content
dynamic and to allow their users to affect the business logic.
 While a simple web site requires only a Web server, a network
connection, and client browsers; Web applications include also an
application server to manage the business logic and state.
 The application server can be located on the same machine as the
Web server and can even execute in the same process space as the
Web server.
 The application server is logically a separate architectural element
since it is concerned only with the execution of business logic and
can use a technology completely different from that of the Web
server.

dsbw 2011/2012 q1 2

Session State Management
 HTTP is a stateless protocol, so web servers do not keep track of
each user request nor associate it with the previous request.
 However, many Web applications need to support users’ sessions:
each session represents a single cohesive use of the system,
involving many executable Web pages and a lot of interaction with
the business logic.
 The session state keeps track of a user's progress throughout the
use case session. Without a session state management mechanism,
you would have to continually supply all previous information
entered for each new Web page.
 Ways to store session state:
 Client Session State: URI rewriting, Cookies, Hidden fields in web
forms
 Application Server Session State: In-memory dictionary or map.
 Database Server State.

dsbw 2011/2012 q1 3

Cookies
 A cookie is a piece of data that a Web server ask a Web browser to
hold on to, and to return when the browser makes a subsequent
HTTP request to that server.
 Limited size: between 100 and 4K bytes.
 Initially, a cookie is sent from a server to a browser by adding a line
to the HTTP headers:
 Content-type: text/html
 Set-Cookie: sessionid=12345; path=/; expires Mon, 09-Dec-2002
11:21:00 GMT; secure
 A cookie can have up to six parameters:
 Name (required)‫‏‬
 Value (required)‫‏‬
 Expiration date
 Path
 Domain
 Requires a secure connection
dsbw 2011/2012 q1 4

Common Gateway Interface (CGI)‫‏‬
 It is a standardized interface to allow Web servers to talk to back-
end programs and scripts that can accept input (e.g., from forms)
and generate HTML pages in response
 Typically, these back-ends are scripts written in the Perl (Python or
even some UNIX shell) scripting language.
 By convention, CGI scripts live in a directory called cgi-bin, which is
visible in the URI :
 http://www.enwebats.com/cgi-bin/enwebats.pl
 CGI’s major drawbacks:
 At each HTTP request for a CGI script the Web server spawns a new
process, which is terminated at the end of execution.
 CGI, like HTTP, is stateless. Therefore, terminating the process where
the CGI script is executed after each request prevents the CGI engine
to retain session state between consecutive user requests.

dsbw 2011/2012 q1 5

CGI: Typical Scenario

Environment
:WebBrowser :WebServer
Variables
Submit
HTTP Req
(GET | POST)‫‏‬
update

:CGIScript
get

write read
do_something
(POST Request Body)‫‏‬

read write

X
HTTP Resp.

dsbw 2011/2012 q1 6

CGI: User Input Forwarding
 METHOD=GET
 User input is appended to the requested URI: parameters are
encoded as label/value pairs appended to the URI after a
question mark symbol.
 The Web server initializes a environment variable called
QUERY_STRING with the label/value pairs.
 In most OSs, environment variables are bounded to 256/1024
chars.
 METHOD=POST
 User input – encoded as label/value pairs too – is attached to
the HTTP request using the message body.
 Upon receipt of a POST request, the Web server extracts the
label/value pairs from the message body, and writes them on
the standard input of the CGI script.
dsbw 2011/2012 q1 7

“EnWEBats” Example: The Web Form

dsbw 2011/2012 q1 8

“EnWEBats” Example: The Output

dsbw 2011/2012 q1 9

“EnWEBats” Example: enwebats.html
<html>
....
<form action="/cgi-bin/enwebats.ppl" method="post">
Full Name: <input name="name" size="57">
Address: <input name="address" size="57">
City: <input name="city" size="32">
Postal Code: <input name="postcode" size="5">
Credit Card Number: <input name="cardnum" size="19">
Expires: (MM/YY) <input name="expdate" size="5">
AMEX <input name="cardtype" value="amex" type="radio">
VISA <input name="cardtype" value="visa" type="radio">
Express Mail (+10 euros): <input name="express"
type="checkbox">
<input value="Submit" type="submit"> </p> </form>
.... </html>

dsbw 2011/2012 q1 10

“EnWEBats” Example: HTTP Request

POST /enWebatsPHP/enwebats.php HTTP/1.1
Content-type: application/x-www-form-urlencoded

name=Walter+Kurtz&address=78+Tahoma+Drive&city=
Los+Sauces& postcode=08997&cardnum=888899997777
0000&expdate=09%2F14&cardtype=visa&express=on

dsbw 2011/2012 q1 11

“EnWEBats” Example: enwebats.pl (Perl)‫‏‬
#!c:apachefriendsxamppperlbinperl.exe

$size_of_form_info = $ENV{'CONTENT_LENGTH'};
read (STDIN, $form_info, $size_of_form_info);

print "Content-type: text/htmlnn";
print "<html> n";
print "<head> n";
print "<title>Subscription OK</title> n";
print "</head> n";
print "<body bgcolor=white> n";
print "<h3>Your subscription have been processed
successfully:</h3> n";
print "<BR> n";

dsbw 2011/2012 q1 12

“EnWEBats” Example: enwebats.pl (cont.)‫‏‬
print "<table border=0> n";
# Split up each pair of key=value pairs
foreach $pair (split (/&/, $form_info)) {
# For each pair, split into $key and $value
variables
($key, $value) = split (/=/, $pair);

# Get rid of the pesky %xx encodings
$key =~ s/%([dA-Fa-f][dA-Fa-f])/pack ("C", hex
($1))/eg;
$value =~ s/%([dA-Fa-f][dA-Fa-f])/pack ("C",
hex ($1))/eg;
$value =~ s/+/ /g;
print "<tr><td>$key: </td><td>$value</td></tr>
n";}
print "</table> n";
print "</body> n";
print "</html> n";

dsbw 2011/2012 q1 13

CGI: Some Environment Variables
CONTENT_LENGTH="156"
CONTENT_TYPE="application/x-www-form-urlencoded"
DOCUMENT_ROOT="C:/apachefriends/xampp/htdocs"
GATEWAY_INTERFACE="CGI/1.1“
HTTP_ACCEPT="text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text
/plain;q=0.8,image/png,*/*;q=0.5"
HTTP_ACCEPT_CHARSET="ISO-8859-1,utf-8;q=0.7,*;q=0.7"
HTTP_ACCEPT_ENCODING="gzip,deflate"
HTTP_ACCEPT_LANGUAGE="ca,en-us;q=0.7,en;q=0.3"
HTTP_CONNECTION="keep-alive"
HTTP_HOST="localhost" HTTP_KEEP_ALIVE="300"
HTTP_REFERER="http://localhost/dsbw/enwebats.html"
HTTP_USER_AGENT="Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7b)
Gecko/20040421"
QUERY_STRING=""
REMOTE_ADDR="127.0.0.1"
REMOTE_PORT="1743“
REQUEST_METHOD="POST"

dsbw 2011/2012 q1 14

PHP: PHP: Hypertext Preprocessor
 Scripting language that is executed on the Web server (e.g.
Apache: mod_php)‫‏‬
 PHP files are basically HTML documents with PHP code
embedded through special tags.
 PHP syntax resembles C’s or Perl’s. Version 5 is more object
oriented.
 Works well with major DBMSs
 Is one of the mainstays of the LAMP platform: Linux + Apache
+ MySQL + PHP
 Very popular, with a huge community of developers and tool
providers.

dsbw 2011/2012 q1 15

Exemple “EnWEBats”: enwebats.php
<?php function print_row($item, $key) {
echo "<tr><td>$key: </td><td>$item</td></tr>n";
}?>
<html>
<head>
<title>Subscription OK</title>
</head>
<body bgcolor=white>
<h3>Your subscription have been processed
successfully:</h3>
<BR>
<BR>
<table border=0 width=50%>
<?php array_walk($_POST, 'print_row'); ?>
</table>
</body>
</html>

dsbw 2011/2012 q1 16

The J2EE Platform

dsbw 2011/2012 q1 17

Java Servlets
 A Servlet is an object that receives a request and generates a
response based on that request.
 A Web container is essentially the component of a Web server that
interacts with the servlets. The Web container is responsible for
 Managing the lifecycle of servlets.
 Mapping a URI to a particular servlet.
 Ensuring that the URI requester has the correct access rights.
 Servlets’ strong points:
 A servlet is initialized only once. Each new request is serviced in its
own separate thread.
 The Servlet API easies common tasks like to access request
parameters, create and manage session objects, etc.
 It’s Java, 57up1d! (cross-platform, object-oriented, EJB, JDBC, RMI, …)‫‏‬

dsbw 2011/2012 q1 18

Java Servlets: Request Scenario

:WebBrowser :WebServer :Servlet
Container

:Servlet
init
Submit
Envia Dades req. http
(POST) req. http
(POST) service
doPost

resp. http
resp. http

destroy

X
dsbw 2011/2012 q1 19

Java Servlets: API (partial)‫‏‬

javax.servlet

<<interface>> <<interface>> <<interface>>
Servlet ServletResponse ServletRequest

init(config: ServletConfig)‫‏‬ getWriter(): getParameter(name:
service(req:ServletRequest, PrintWriter String):String
res: ServletResponse)‫‏‬ getOutputStream(): getParameterNames():
destroy()‫‏‬ ServletOutputStream Enumeration

GenericServlet

javax.servlet.http
HttpServlet
service(req: HttpServletRequest,
res: HttpServletResponse)‫‏‬
doGet (req: HttpServletRequest, <<interface>> <<interface>>
res: HttpServletResponse)‫‏‬ HttpServletResponse HttpServletRequest
doPost (req: HttpServletRequest,
res: HttpServletResponse)‫‏‬

dsbw 2011/2012 q1 20

Exemple “EnWEBats”: Enwebats.java
public class Enwebats extends javax.servlet.http.HttpServlet
{
public void doPost(javax.servlet.http.HttpServletRequest req,
javax.servlet.http.HttpServletResponse res)‫‏‬
throws javax.servlet.ServletException, java.io.IOException {
res.setContentType("text/html");
java.io.PrintWriter output = res.getWriter();
output.println("<html>");
output.println("<title>Subscription OK</title>");
output.println("<body bgcolor=white>");
output.println("<h3>Your subscription have been processed successfully:</h3>");
output.println("<table border=0>");
java.util.Enumeration paramNames = req.getParameterNames();
while (paramNames.hasMoreElements()) {
String name = (String) paramNames.nextElement();
String value = req.getParameter(name);
output.println("<tr><td>"+name+": </td><td>"+value+"</td></tr>"); }
output.println("</table></body></html>");
output.close(); }}

dsbw 2011/2012 q1 21

JavaServer Pages (JSP)‫‏‬
 JSPs allows creating easily Web content that has both static and
dynamic components.
 JSPs project all the dynamic capabilities of Java Servlet technology
but provides a more natural approach to creating static content.
 The main features of JSPs technology are:
 A language for developing JSP pages, which are text-based documents
that describe how to process a request and construct a response
 Constructs for accessing server-side objects
 Mechanisms for defining extensions to the JSP language
 A JSP page is a text-based document that contains two types of
text:
 static template data, which can be expressed in any text-based format
(HTML, XML, …)‫‏‬
 JSP elements, which construct dynamic content.

dsbw 2011/2012 q1 22

JSP and Java Servlets
 When a Web container is requested a JSP it may happen that:
1. The JSP had not been requested yet: The web container
compiles and initializes a servlet to service the request.
2. The JSP had already been requested: The Web container
forwards the request to the corresponding running servlet.
 Therefore, JSPs have all the benefits of using Java Servlets
and, at the same time, allows separating more clearly the
application logic from the appearance of the page
 That, in turn, allows
 using any Web edition tool or suite.
 fast development and testing

dsbw 2011/2012 q1 23

JSP Elements (1/2)‫‏‬
 JSP Directives: Instructions that are processed by the JSP engine when
the page is compiled to a servlet. Directives are used to set page-level
instructions, insert data from external files, and specify custom tag
libraries. Example:
<%@ page language=="java" imports=="java.util.*" %>

 JSP Declaratives: Definitions of global variables and methods.
<%! int time = Calendar.getInstance().get(Calendar.AM_PM); %>

 JSP Scriptlets: Blocks of Java code embedded within a JSP page.
Scriptlet code is inserted verbatim into the servlet generated from the
page, and is defined between <% and %>.
 JSP Expressions: Expressions that are evaluated inside the
corresponding servlet to be inserted into the data returned by the web
server. Example:
<h2> List of Members for the year <%= clock.getYear() %> </h2>

dsbw 2011/2012 q1 24

JSP elements (2/2)‫‏‬
 JSP Tags (or Actions): elements that encapsulate common
tasks.
 Some are standard, which allow forwarding requests to other
JSPs or servlets (<jsp:forward>), instantiate JavaBeans
components (<jsp:useBean>), etc. Example:
<jsp:useBean id=="clock" class=="jspCalendar" />

 Some are custom, that is, they are defined by Java developers
using the JSP Tag Extension API. Developers write a Java class
that implements one of the Tag interfaces and provide a tag
library XML description file that specifies the tags and the java
classes that implement the tags.

dsbw 2011/2012 q1 25

“EnWEBats” example: enwebats.jsp
<%@ page language="java" import="java.util.*" %>
<html>
<head>
</head>
<h3>Your subscription have been processed successfully:</h3>
<BR>
<BR>
<% Enumeration paramNames = request.getParameterNames();
while (paramNames.hasMoreElements())‫‏‬
{
String name = (String)nomsParams.nextElement();
String value = request.getParameterValues(name)[0];%>
<tr>
<td><%= name %>:</td><td><%= value %></td>
</tr>
<% } %>
</table>
</body>
</html>

dsbw 2011/2012 q1 26

JSP Standard Tag Library (JSTL)‫‏‬

dsbw 2011/2012 q1 27

Exemple “EnWEBats”: enwebats.jsp amb JSTL

<%@ taglib uri='http://java.sun.com/jstl/core' prefix='c'
%>
<html>
<head>
</head>
<h3>Your subscription have been processed
successfully:</h3>
<BR>
<BR>
<c:forEach var='parameter' items='${paramValues}'>
<tr>
<td><c:out value='${parameter.key}'/>:</td>
<td><c:out value='${parameter.value[0]}'/></td>
</tr>
</c:forEach>
</table>
</body>
</html>

dsbw 2011/2012 q1 28

References
 SHKLAR, Leon et al. Web Application Architecture: Principles,
Protocols and Practices, Second Edition. John Wiley & Sons,
2009.
 hoohoo.ncsa.uiuc.edu/cgi/

 www.php.net

 java.sun.com/javaee/5/docs/tutorial/doc/

dsbw 2011/2012 q1 29

Unit 02: Web Technologies (2/2)

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Unit 02: Web Technologies (2/2) (20)

Recently uploaded (20)

Unit 02: Web Technologies (2/2)