HTML Template Languages: Separating Server-side Logic from HTML Presentation

CSE 190: Internet E-Commerce Lecture 7

HTML Templates • Designed to separate server side logic from HTML presentation • Key features • Escapes from HTML into template language • Page compositing • Variable substitution • Executing server side code

HTML Template languages • JSP (Java Server Pages) • ASP (Active Server Pages) • Javascript, VBScript • Text::Template (Perl module) • PHP (PHP Hypertext Processor) • Roll your own implementation

CGI One process per request Request data given by environment variable or via stdin Most template systems Are processed within a thread of the server process Faster performance Input passed by a reference to a standard “request” variable Template systems: CGI differences

JSP: Start with HTML(Source for hello.jsp) <html> <head><title>Hello World</title></head> <body bgcolor=#FFFFFF> <h2>Hello World</h2> </body> </html>

JSP: Variable substitution <html> <% String titleString = “Hello World”; %> <head><title> <%= titleString %></title></head> <body> <h2><%= titleString %></h2> </body> </html>

JSP: Page Composition <jsp:include page=“header.html” /> <body bgcolor=#FFFFFF> <h2>Hello World</h2> <jsp:include page=“footer.html” />

JSP: Page composition • <jsp:include>: Also evaluates any JSP tags within the included document (allows nesting) • To avoid nested evaluation, use <%@ include file=“filename.html” %>

JSP: Server side code <html> <head> </head> <body> <%-- Generate two Prime Tables --%> The primes to 10:<br> <%= getPrimes(10) %> <br> The primes to 20:<br> <%= getPrimes(20) %> <%-- Separate primes from non primes and generate a table This time as an expression tag defining a function. --%> <%! private String getPrimes(int max) { StringBuffer sb = new StringBuffer(); // Table headers sb.append("<table>"); sb.append(" <tr>"); sb.append(" <th>"); sb.append(" number"); sb.append(" </th>"); sb.append(" <th>"); sb.append(" prime"); sb.append(" </th>"); sb.append(" </tr>");

JSP: Server side (cot’d) // Check for primes for(int i=2; i<=max; i++) { boolean found = false; for(int j=2; j<=Math.sqrt(i); j++) { if(i%j == 0) { found=true; break; } } // Table body sb.append(" <tr>"); sb.append(" <td>"); sb.append(" "+i); sb.append(" </td>"); sb.append(" <td>"); if (found) { sb.append(" no"); } else { sb.append(" yes"); } sb.append(" </td>"); sb.append(" </tr>"); } // End of the table sb.append("</table>"); return sb.toString(); } %> </body> </html>

Three major scopes Request Session Application Detail: JSP supports “page” scope What happens to “session” variable if JSP server stops running? JSP: Object scope

Session scope: Cookies • Cookies: Allow HTTP server to recognize when the same browser makes a new follow up request • Two types of cookies: session, persistent • HTTP header syntax • RequestCookie: NAME1=OPAQUE_STRING1; NAME2=OPAQUE_STRING2 ... • ResponseSet-Cookie: NAME=VALUE; expires=DATE; path=PATH; domain=DOMAIN_NAME; secure • Specification: http://www.netscape.com/newsref/std/cookie_spec.html

JSP: Implementation import java.io.*; import javax.servlet.*; import javax.servlet.http.*; public class HelloWorld extends HttpServlet { public void doGet(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException { res.setContentType( "text/html"); PrintWriter out = res.getWriter(); out.println("<HTML>"); out.println("<HEAD><TITLE>Hello World</TITLE></HEAD>"); out.println("<BODY>"); out.println("<BIG>Hello World</BIG>"); out.println("</BODY></HTML>"); } }

ASP (Active Server Pages) Examples • Variable substitution…<%= variableName %>…. • Page composition • Server side code<%@ language="javascript" %><html> <head><% function jsproc(num1,num2) { Response.Write(num1*num2) } %> </head><body>The result of the calculation is: <%jsproc(3,4)%> </body></html> • Reference: http://www.w3schools.com/asp/asp_intro.asp

PHP Examples • Variable substitution:<?php echo $HTTP_USER_AGENT; ?> • Page composition<?php require( "header.inc"); ?><?php include( "header.inc"); ?> • Server side code<?phpif( strstr( $HTTP_USER_AGENT, "MSIE")) { echo "You are using Internet Explorer<br>";}?> • Reference: http://www.php.net/manual/en/

HTML Template Languages: Separating Server-side Logic from HTML Presentation