1 Web Applications – The Basics

2 Unzipped Tomcat Folder

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

4 Default Page

5

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

7 f2.html

8 HTML file: webapps/abc/f2.html This is a headline Some text bold, italics, underline A new paragraph, with a link to the first page.

9 f3.html

10 Javascript: webapps/abc/f3.html Click me! some text... $(document).ready(function() { $("#xy256").click(function() { alert("Current time is " + new Date()); });

11 f4.html

12 More Javascript: f4.html N: Compute! $(document).ready(function() { $("#compute").click(function() { var v = $("input").val(); v = parseInt(v)*2; $("#output").html("N*2= " + v + " "); });

13 Sending Data

14 f5.html $(document).ready(function() { $("#compute").click(function() { var v = $("input").val(); location.assign(location.protocol + "//" + location.host + "/abc/f6.html ?input=" + v ); }); What is your name? Welcome!

15 f6.html $(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); } }); Nice to see you,

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

17 Dynamic Server Content: d1.html

18 webapps/abc/WEB-INF/web.xml <web-app xmlns=" xmlns:xsi=" xsi:schemaLocation=" version="2.5"> S1 p1.S1 S1 /d1.html

19 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 /lib // public class S1 extends HttpServlet { private static final long serialVersionUID = protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws IOException { resp.setContentType("text/html"); resp.setCharacterEncoding("UTF-8"); resp.getWriter().println(" Current time " + new Date() + " "); }

20 webapps/abc/WEB-INF/classes

21 Sending Data – to the Server

22 webapps/abc/WEB-INF/web.xml <web-app xmlns=" xmlns:xsi=" xsi:schemaLocation=" version="2.5"> S1 p1.S1 S1 /d1.html S2 p1.S2 S2 /d2.html

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

24 (copying S2.class to classes)

25 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

26 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, …

27 An excellent starting point “Developing a Spring Framework MVC application step-by-step” step-by-step