l12web-apps-basics

emptyslowInternet and Web Development

Nov 12, 2013 (3 years and 9 months ago)

72 views

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/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 = parseInt(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=" + 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

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.indexOf(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: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>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 HttpServlet {


private static final long serialVersionUID =
-
1224125312164793742
L;



@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.w
3
.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>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>


<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 HttpServlet {


private static final long
serialVersionUID

=
-
1224125312164793742
L;



@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 S
2
.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