Web Applications – The Basics

Web Applications – The Basics

Unzipped Tomcat Folder

Environment variables • CATALINA_HOME=d:\tools\tomcat • PATH • Add d:\tools\tomcat\bin • startup.bat • shutdown.bat

Default Page

http://localhost:8080/abc/f1.txt

Text File: webapps/abc/f1.txt Hi There

f2.html

HTML file: webapps/abc/f2.html <html> <body> <h2>This is a headline</h2> Some text <b>bold</b>, <i>italics</i>, <u>underline</u> <p>A new paragraph, with a <a href="f1.txt">link</a> to the first page.</p> </body> </html>

f3.html

Javascript: webapps/abc/f3.html <html> <body> <h2 id="xy256">Click me!</h2> some text... <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script> <script type="text/javascript"> $(document).ready(function() { $("#xy256").click(function() { alert("Current time is " + new Date()); }); }); </script> </body> </html>

f4.html

More Javascript: f4.html <html> <body> <p>N:<input id="input" type="text"/></p> <p><button id="compute" type="button">Compute!</button></p> <p id="output"/> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script> <script type="text/javascript"> $(document).ready(function() { $("#compute").click(function() { var v = $("input").val(); v = parseInt(v)*2; $("#output").html("N*2=<b>" + v + "</b>"); }); }); </script> </body> </html>

Sending Data

f5.html <html> <body> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script> <script type="text/javascript"> $(document).ready(function() { $("#compute").click(function() { var v = $("input").val(); location.assign(location.protocol + "//" + location.host + "/abc/f6.html?input=" + v); }); }); </script> <p>What is your name? <input id="input" type="text"/></p> <p><button type="button" id="compute">Welcome!</button></p> </body> </html>

f6.html <html> <body> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script> <script type="text/javascript"> $(document).ready(function() { // Cuation: Hack ahead. // Use a standard parameter parsing library instead var s = "input="; var i = location.search.indexOf(s); if(i >= 0) { var input = location.search.substring(i + s.length); $("#output").html(input); } }); </script> <h2>Nice to see you, <span id="output"/></h2> </body> </html>

So far, we saw… • Static (hard coded) pages • Some HTML elements • Reactive pages – Thanks to Javascript • Sending data between pages

Dynamic Server Content: d1.html

webapps/abc/WEB-INF/web.xml <?xml version="1.0" encoding="ISO-8859-1"?> <web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5"> <servlet> <servlet-name>S1</servlet-name> <servlet-class>p1.S1</servlet-class> </servlet> <servlet-mapping> <servlet-name>S1</servlet-name> <url-pattern>/d1.html</url-pattern> </servlet-mapping> </web-app>

Source code: S1.java package p1; import java.io.IOException; import java.util.Date; import javax.servlet.http.*; // // IMPORTANT: Needs servlet-api.jar in order to compile! // Can be found at <tomcat-dir>/lib // public class S1 extends HttpServlet { private static final long serialVersionUID = -1224125312164793742L; @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws IOException { resp.setContentType("text/html"); resp.setCharacterEncoding("UTF-8"); resp.getWriter().println("<html><body>Current time " + new Date() + "</body></html>"); } }

webapps/abc/WEB-INF/classes

Sending Data – to the Server

webapps/abc/WEB-INF/web.xml <?xml version="1.0" encoding="ISO-8859-1"?> <web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5"> <servlet> <servlet-name>S1</servlet-name> <servlet-class>p1.S1</servlet-class> </servlet> <servlet-mapping> <servlet-name>S1</servlet-name> <url-pattern>/d1.html</url-pattern> </servlet-mapping> <servlet> <servlet-name>S2</servlet-name> <servlet-class>p1.S2</servlet-class> </servlet> <servlet-mapping> <servlet-name>S2</servlet-name> <url-pattern>/d2.html</url-pattern> </servlet-mapping> </web-app>

Source code: S2.java package p1; import java.io.IOException; import javax.servlet.http.*; public class S2 extends HttpServlet { private static final long serialVersionUID = -1224125312164793742L; @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws IOException { resp.setContentType("text/html"); resp.setCharacterEncoding("UTF-8"); resp.getWriter().println("<html><body>Nice to see you, " + req.getParameter("input") + "</body></html>"); } }

(copying S2.class to classes)

Comments • Changes in classes, web.xml require a restart of tomcat • IDE can “talk” to the server • Debug a servlet as it runs • Download the necessary plugin(s) • Automate the (development) deployment process • This is the most primitive way to work with Tomcat • Frameworks will ease your life (Spring, Grails, …) • Extending a servlet makes your life difficult • Testing, debugging, resusing • Delegate to a POJO • Persistency: Files will not work • Serialization is evil • Files get corrupted • SQL simplifies data manipulation

Comments (cont.) • Cross-browser incompatibility • Use a good Javascript library from day one • JQuery, Dojo, Prototype, … • Distributed programming • Two processes: Server (Java), Client (Javascript) • No shared heap • IDs are used as pointers • Additional techniques: CSS, Ajax, …

An excellent starting point “Developing a Spring Framework MVC application step-by-step” http://static.springsource.org/docs/Spring-MVC-step-by-step

Web Applications – The Basics