Unit 02: Web Technologies (2/2)


Published on

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Unit 02: Web Technologies (2/2)

  1. 1. 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
  2. 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 2011/2012 q1 2
  3. 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 users 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
  4. 4. 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 connectiondsbw 2011/2012 q1 4
  5. 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 :  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
  6. 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 2011/2012 q1 6
  7. 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 2011/2012 q1 7
  8. 8. “EnWEBats” Example: The Web Formdsbw 2011/2012 q1 8
  9. 9. “EnWEBats” Example: The Outputdsbw 2011/2012 q1 9
  10. 10. “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
  11. 11. “EnWEBats” Example: HTTP RequestPOST /enWebatsPHP/enwebats.php HTTP/1.1Content-type: application/x-www-form-urlencodedname=Walter+Kurtz&address=78+Tahoma+Drive&city=Los+Sauces& postcode=08997&cardnum=8888999977770000&expdate=09%2F14&cardtype=visa&express=ondsbw 2011/2012 q1 11
  12. 12. “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
  13. 13. “EnWEBats” Example: enwebats.pl (cont.)‫‏‬print "<table border=0> n";# Split up each pair of key=value pairsforeach $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
  14. 14. CGI: Some Environment VariablesCONTENT_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=""REMOTE_PORT="1743“REQUEST_METHOD="POST"dsbw 2011/2012 q1 14
  15. 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 2011/2012 q1 15
  16. 16. 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
  17. 17. The J2EE Platformdsbw 2011/2012 q1 17
  18. 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 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
  19. 19. Java Servlets: Request Scenario :WebBrowser :WebServer :Servlet Container :Servlet init SubmitEnvia Dades req. http (POST) req. http (POST) service doPost resp. http resp. http destroy Xdsbw 2011/2012 q1 19
  20. 20. 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
  21. 21. Exemple “EnWEBats”: Enwebats.javapublic 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
  22. 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 2011/2012 q1 22
  23. 23. 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 testingdsbw 2011/2012 q1 23
  24. 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=="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
  25. 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=="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
  26. 26. “EnWEBats” example: enwebats.jsp<%@ page language="java" import="java.util.*" %><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 2011/2012 q1 26
  27. 27. JSP Standard Tag Library (JSTL)‫‏‬dsbw 2011/2012 q1 27
  28. 28. Exemple “EnWEBats”: enwebats.jsp amb JSTL<%@ taglib uri=http://java.sun.com/jstl/core 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 2011/2012 q1 28
  29. 29. 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