1 Web Applications The Basics 2

1 Web Applications – The Basics

2 Unzipped Tomcat Folder

3 Environment variables • CATALINA_HOME=d: toolstomcat • PATH – Add d: toolstomcatbin • startup. bat • shutdown. bat

4 Default Page

5 http: //localhost: 8080/abc/f 1. txt

6 Text File: webapps/abc/f 1. txt Hi There

7 f 2. html

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

9 f 3. html

10 Javascript: webapps/abc/f 3. html <html> <body> <h 2 id="xy 256">Click me!</h 2> 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() { $("#xy 256"). click(function() { alert("Current time is " + new Date()); }); </script> </body> </html>

11 f 4. html

12 More Javascript: f 4. 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 = parse. Int(v)*2; $("#output"). html("N*2=<b>" + v + "</b>"); }); </script> </body> </html>

13 Sending Data

14 f 5. 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/f 6. html? input=" }); </script> + v(; <p>What is your name? <input id="input" type="text"/></p> <p><button type="button" id="compute">Welcome!</button></p> </body> </html>

15 f 6. 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. index. Of(s); if(i >= 0) { var input = location. search. substring(i + s. length); $("#output"). html(input); } }); </script> <h 2>Nice to see you, <span id="output"/></h 2> </body> </html>

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: d 1. html

18 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. w 3. org/2001/XMLSchema-instance" xsi: schema. Location="http: //java. sun. com/xml/ns/javaee/web-app_2_5. xsd" version="2. 5"> <servlet-name>S 1</servlet-name> <servlet-class>p 1. S 1</servlet-class> </servlet> <servlet-mapping> <servlet-name>S 1</servlet-name> <url-pattern>/d 1. html</url-pattern> </servlet-mapping> </web-app>

19 Source code: S 1. java package p 1; 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 S 1 extends Http. Servlet { private static final long serial. Version. UID = -1224125312164793742 L; @Override protected void do. Get(Http. Servlet. Request req, Http. Servlet. Response resp) throws IOException { resp. set. Content. Type("text/html"); resp. set. Character. Encoding("UTF-8"); resp. get. Writer(). println("<html><body>Current time " + new Date() + "</body></html>"); } }

20 webapps/abc/WEB-INF/classes

21 Sending Data – to the Server

webapps/abc/WEB-INF/web. xml 22 <? xml version="1. 0" encoding="ISO-8859 -1"? > <web-app xmlns="http: //java. sun. com/xml/ns/javaee" xmlns: xsi="http: //www. w 3. org/2001/XMLSchema-instance" xsi: schema. Location="http: //java. sun. com/xml/ns/javaee/web-app_2_5. xsd" version="2. 5"> <servlet-name>S 1</servlet-name> <servlet-class>p 1. S 1</servlet-class> </servlet> <servlet-mapping> <servlet-name>S 1</servlet-name> <url-pattern>/d 1. html</url-pattern> </servlet-mapping> <servlet-name>S 2</servlet-name> <servlet-class>p 1. S 2</servlet-class> </servlet> <servlet-mapping> <servlet-name>S 2</servlet-name> <url-pattern>/d 2. html</url-pattern> </servlet-mapping> </web-app>

23 Source code: S 2. java package p 1; import java. io. IOException; import javax. servlet. http. *; public class S 2 extends Http. Servlet { private static final long serial. Version. UID = -1224125312164793742 L; @Override protected void do. Get(Http. Servlet. Request req, Http. Servlet. Response resp) throws IOException { resp. set. Content. Type("text/html"); resp. set. Character. Encoding("UTF-8"); resp. get. Writer(). println("<html><body>Nice to see you, " + req. get. Parameter("input") + "</body></html>"); } }

24 )copying S 2. 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 25

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” http: //static. springsource. org/docs/Spring-MVCstep-by-step