Your SlideShare is downloading. ×
[DSBW Spring 2009] Unit 02: Web Technologies (2/2)
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

[DSBW Spring 2009] Unit 02: Web Technologies (2/2)


Published on

Published in: Technology

  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Lesson 2: Web Technologies (2/2)  Core  Web browsers and web servers  URIs  HTTP  Client-Side  Basic: HTML, CSS  Advanced: JavaScript, DOM, AJAX, XForms, RIA  Server-Side technologies for Web Applications  CGI  PHP  Java Servlets  JavaServer Pages (JSPs) dsbw 2008/2009 2q 1
  • 2. 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 2008/2009 2q 2
  • 3. 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 2008/2009 2q 3
  • 4. Cookies  A cookie is a piece of data that a Web server can ask a Web browser to hold on to, and to return every time the browser makes a subsequent request for an HTTP resource 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 2008/2009 2q 4
  • 5. 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 :   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 2008/2009 2q 5
  • 6. 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 2008/2009 2q 6
  • 7. 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 2008/2009 2q 7
  • 8. “EnWEBats” Example: The Web Form dsbw 2008/2009 2q 8
  • 9. “EnWEBats” Example: The Output dsbw 2008/2009 2q 9
  • 10. “EnWEBats” Example: enwebats.html <html> .... <form action=quot;/cgi-bin/enwebats.pplquot; method=quot;postquot;> Full Name: <input name=quot;namequot; size=quot;57quot;> Address: <input name=quot;addressquot; size=quot;57quot;> City: <input name=quot;cityquot; size=quot;32quot;> Postal Code: <input name=quot;postcodequot; size=quot;5quot;> Credit Card Number: <input name=quot;cardnumquot; size=quot;19quot;> Expires: (MM/YY) <input name=quot;expdatequot; size=quot;5quot;> AMEX <input name=quot;cardtypequot; value=quot;amexquot; type=quot;radioquot;> VISA <input name=quot;cardtypequot; value=quot;visaquot; type=quot;radioquot;> Express Mail (+10 euros): <input name=quot;expressquot; type=quot;checkboxquot;> <input value=quot;Submitquot; type=quot;submitquot;> </p> </form> .... </html> dsbw 2008/2009 2q 10
  • 11. “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=8888999977770000&expdate=09%2F14& cardtype=visa&express=on dsbw 2008/2009 2q 11
  • 12. “EnWEBats” Example: (Perl) #!c:apachefriendsxamppperlbinperl.exe $size_of_form_info = $ENV{'CONTENT_LENGTH'}; read (STDIN, $form_info, $size_of_form_info); print quot;Content-type: text/htmlnnquot;; print quot;<html> nquot;; print quot;<head> nquot;; print quot;<title>Subscription OK</title> nquot;; print quot;</head> nquot;; print quot;<body bgcolor=white> nquot;; print quot;<h3>Your subscription have been processed successfully:</h3> nquot;; print quot;<BR> nquot;; dsbw 2008/2009 2q 12
  • 13. “EnWEBats” Example: (cont.) print quot;<table border=0> nquot;; # 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 (quot;Cquot;, hex ($1))/eg; $value =~ s/%([dA-Fa-f][dA-Fa-f])/pack (quot;Cquot;, hex ($1))/eg; $value =~ s/+/ /g; print quot;<tr><td>$key: </td><td>$value</td></tr> nquot;;} print quot;</table> nquot;; print quot;</body> nquot;; print quot;</html> nquot;; dsbw 2008/2009 2q 13
  • 14. CGI: Some Environment Variables CONTENT_LENGTH=quot;156quot; CONTENT_TYPE=quot;application/x-www-form-urlencodedquot; DOCUMENT_ROOT=quot;C:/apachefriends/xampp/htdocsquot; GATEWAY_INTERFACE=quot;CGI/1.1“ HTTP_ACCEPT=quot;text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plai n;q=0.8,image/png,*/*;q=0.5quot; HTTP_ACCEPT_CHARSET=quot;ISO-8859-1,utf-8;q=0.7,*;q=0.7quot; HTTP_ACCEPT_ENCODING=quot;gzip,deflatequot; HTTP_ACCEPT_LANGUAGE=quot;ca,en-us;q=0.7,en;q=0.3quot; HTTP_CONNECTION=quot;keep-alivequot; HTTP_HOST=quot;localhostquot; HTTP_KEEP_ALIVE=quot;300quot; HTTP_REFERER=quot;http://localhost/dsbw/enwebats.htmlquot; HTTP_USER_AGENT=quot;Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7b) Gecko/20040421quot; QUERY_STRING=quot;quot; REMOTE_ADDR=quot;; REMOTE_PORT=quot;1743“ REQUEST_METHOD=quot;POSTquot; dsbw 2008/2009 2q 14
  • 15. 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 2008/2009 2q 15
  • 16. Exemple “EnWEBats”: enwebats.php <?php function print_row($item, $key) { echo quot;<tr><td>$key: </td><td>$item</td></tr>nquot;; }?> <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 2008/2009 2q 16
  • 17. The J2EE Platform dsbw 2008/2009 2q 17
  • 18. 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 initialed 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 2008/2009 2q 18
  • 19. Java Servlets: Request Scenario Submit dsbw 2008/2009 2q 19
  • 20. Java Servlets: API (partial) javax.servlet <<interface>> <<interface>> <<interface>> ServletRequest Servlet ServletResponse getParameter(name: getWriter(): init(config: ServletConfig) String):String PrintWriter service(req:ServletRequest, getParameterNames(): getOutputStream(): res: ServletResponse) Enumeration ServletOutputStream destroy() GenericServlet javax.servlet.http HttpServlet service(req: HttpServletRequest, res: HttpServletResponse) <<interface>> <<interface>> doGet (req: HttpServletRequest, HttpServletResponse HttpServletRequest res: HttpServletResponse) doPost (req: HttpServletRequest, res: HttpServletResponse) dsbw 2008/2009 2q 20
  • 21. Exemple “EnWEBats”: 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, { res.setContentType(quot;text/htmlquot;); output = res.getWriter(); output.println(quot;<html>quot;); output.println(quot;<title>Subscription OK</title>quot;); output.println(quot;<body bgcolor=white>quot;); output.println(quot;<h3>Your subscription have been processed successfully:</h3>quot;); output.println(quot;<table border=0>quot;); java.util.Enumeration paramNames = req.getParameterNames(); while (paramNames.hasMoreElements()) { String name = (String) paramNames.nextElement(); String value = req.getParameter(name); output.println(quot;<tr><td>quot;+name+quot;: </td><td>quot;+value+quot;</td></tr>quot;); } output.println(quot;</table></body></html>quot;); output.close(); }} dsbw 2008/2009 2q 21
  • 22. 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 2008/2009 2q 22
  • 23. JSP and Java Servlets  When a Web container is requested a JSP it may happen that: The JSP had not been requested yet: The web container compiles and 1. 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 2008/2009 2q 23
  • 24. 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==quot;javaquot; imports==quot;java.util.*quot; %> 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 2008/2009 2q 24
  • 25. 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==quot;clockquot; class==quot;jspCalendarquot; /> 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 2008/2009 2q 25
  • 26. “EnWEBats” example: enwebats.jsp <%@ page language=quot;javaquot; import=quot;java.util.*quot; %> <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%> <% 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 2008/2009 2q 26
  • 27. JSP Standard Tag Library (JSTL) dsbw 2008/2009 2q 27
  • 28. Exemple “EnWEBats”: enwebats.jsp amb JSTL <%@ taglib uri='' prefix='c' %> <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%> <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 2008/2009 2q 28
  • 29. References    dsbw 2008/2009 2q 29