1 / 27

Web Applications – The Basics

Web Applications – The Basics. Unzipped Tomcat Folder. Environment variables. CATALINA_HOME=d:toolstomcat PATH Add d:toolstomcatbin startup.bat shutdown.bat. Default Page. http://localhost:8080/abc/f1.txt. Text File: webapps/abc/f1.txt. Hi There. f2.html.

jarah
Download Presentation

Web Applications – The Basics

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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. http://localhost:8080/abc/f1.txt

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

  7. f2.html

  8. 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>

  9. f3.html

  10. 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>

  11. f4.html

  12. 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>

  13. Sending Data

  14. 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>

  15. 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>

  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 <?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>

  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 <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>"); } }

  20. webapps/abc/WEB-INF/classes

  21. Sending Data – to the Server

  22. 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>

  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 = -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>"); } }

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

More Related