Java Web Applications - Software Engineering

farrightΛογισμικό & κατασκευή λογ/κού

15 Αυγ 2012 (πριν από 5 χρόνια και 6 μέρες)

480 εμφανίσεις

CS 160: Software Engineering

August 30 Class Meeting

Department of Computer Science

San Jose State University


Fall 2010

Instructor: Ron Mak

www.cs.sjsu.edu/~mak

SJSU Dept. of Computer Science

Fall 2010: August 30

CS 160: Software Engineering

©
R. Mak

2

Software Engineering is …


Team
-
based


Methodologies

and processes


Manage complexity


Manage change

… team
-
based methodologies and processes that
manage complexity and change in order to
successfully develop software products.

Successful
software
products

}

SJSU Dept. of Computer Science

Fall 2010: August 30

CS 160: Software Engineering

©
R. Mak

3

Internet
connection
Web browser
Web server
Database server
Client computer
Server computer
High
-
Level Architecture of a Web Application


The user works with a
web browser

running on the client computer.


The server computer can include the
web server
,

the
application logic
, and the
database server
.


These software components can run on multiple server computers.

Murach’s Java Servlets/JSP (2nd Ed.)

© 2008, Mike Murach & Associates, Inc.

Client
-
server architecture

SJSU Dept. of Computer Science

Fall 2010: August 30

CS 160: Software Engineering

©
R. Mak

4

Dynamic Web Pages


The user interacts with an
HTML page

in a browser running on the client.


The browser sends an
HTTP request

over the Internet to the server.


The web server passes the
request parameters

to the web application.


The web application dynamically generates the HTML for a web page

that
contains elements based on the request parameters.


The web server returns the HTML page as part of the
HTTP response
.


The client’s browser displays the new HTML page.


The browser doesn’t care whether the HTML was static or dynamically generated.

Client
Server
Browser
Web server
Web
application
HTTP request
HTTP response
HTTP = Hypertext Transfer Protocol

Your work here!

Murach’s Java Servlets/JSP (2nd Ed.)

© 2008, Mike Murach & Associates, Inc.

SJSU Dept. of Computer Science

Fall 2010: August 30

CS 160: Software Engineering

©
R. Mak

5

Architecture of a Java Web Application

Client
Browser
Server
Web server
Database server
HTTP request
HTTP response
Servlet
/
JSP engine
Java Development Kit
(
JDK
)
Tomcat

Microsoft Explorer

Firefox

Google Chrome

Apple Safari

MySQL Relational

Database Manager

Murach’s Java Servlets/JSP (2nd Ed.)

© 2008, Mike Murach & Associates, Inc.

Your work here!

JSP, servlets,

database tables,

etc.

SJSU Dept. of Computer Science

Fall 2010: August 30

CS 160: Software Engineering

©
R. Mak

6

Technologies and Tools


JavaServer Pages (JSP)


Generate dynamic web pages



Java servlets and JavaBeans


Server
-
side web application logic



MySQL



GNU
-
licensed
relational database manager (RDBMS)

for the back
-
end data repository


Database design and administration


SQL and JDBC programming


Object
-
relational mapping with Hibernate



Tomcat


Open source
web server and JSP/servlet engine



NetBeans


Open source
integrated development environment (IDE)


Java, JSP, and servlet development


Supports Tomcat



and more!


UML, Ant, Subversion, Trac, GanntProject, web services, Hibernate, ...

SJSU Dept. of Computer Science

Fall 2010: August 30

CS 160: Software Engineering

©
R. Mak

7

Team Projects Reminder


Form teams, pick team names, and choose web
applications by
Wednesday, September 1
.


4 teams of
6

members each


Can’t change teams afterwards.


Each team should send an e
-
mail to
mak@cs.sjsu.edu

containing:


team name


team members


1
-
paragraph description of the team’s web application



Example web application description:


“Team Alpha will develop an online dating service where users
can log in to enter and update various personal characteristics
via a web form. This information will be maintained in the
backend database on the server. The server logic will query the
database and perform matches, and then it will send the user
the names and e
-
mail addresses of good date candidates.”

SJSU Dept. of Computer Science

Fall 2010: August 30

CS 160: Software Engineering

©
R. Mak

8

Basic HTML

<!DOCTYPE HTML PUBLIC "
-
//W3C//DTD HTML 4.01 Transitional//EN">


<html>


<head>

<title>Murach's Java Servlets and JSP</title>

</head>


<body>

<h1>Email List applications</h1>

<p>To run the following applications,

click on the appropriat
e link:</p>

</body>


</html>

Murach’s Java Servlets/JSP (2nd Ed.)

© 2008, Mike Murach & Associates, Inc.

SJSU Dept. of Computer Science

Fall 2010: August 30

CS 160: Software Engineering

©
R. Mak

9

Basic HTML Tags

Tag

Description

<!doctype ... >

Identifies the type of HTML document.
This tag is often inserted automatically
by the HTML editor.

<html> </html>

Marks the beginning and end of an
HTML document.

<head> </head>

Marks the beginning and end of
the
Head section of the HTML document.

<title> </title>

Marks the title that is displayed in the
title bar of the browser.

<body> </body>

Marks the beginning and end of the
Body section of the HTML document
.

Murach’s Java Servlets/JSP (2nd Ed.)

© 2008, Mike Murach & Associates, Inc.

SJSU Dept. of Computer Science

Fall 2010: August 30

CS 160: Software Engineering

©
R. Mak

10

Basic HTML Tags
(cont’d)

Tag

Description

<h1> </h1>

Tells the browser to use the default format for a
heading
-
1 paragraph.

<h2> </h2>

Tells the browser to use the default format for a
heading
-
2 paragraph.

<p> </p>

Tells the browser to use the default format
for a
standard paragraph.

<br>

Inserts a line break.

<b> </b>

Marks text as bold.

<i> </i>

Marks text as italic.

<u> </u>

Marks text as underlined.

<!
--

--
>

Defines a comment that is ignored by the browser.

Murach’s Java Servlets/JSP (2nd Ed.)

© 2008, Mike Murach & Associates, Inc.

SJSU Dept. of Computer Science

Fall 2010: August 30

CS 160: Software Engineering

©
R. Mak

11

Anchor Tags (Links)



URLs that are relative to the current directory

<a href=
"join.html"
>The Email List application 1</a><br>

<a href=
"email/join.html"
>The Email List application

2</a><br>




R
elative URLs that navigate up the directory structure

<a href=
"../"
>Go back one direct
ory level</a><br>

<a href=
"../../"
>Go back two directory levels</a><br>




URLs that are relative to the webapps directory

<a href=
"/"
>Go to the default root directory for the web
server</a><br>

<a href=
"/musicStore"
>Go to the root directory of the
musicStor
e app</a>




A
bsolute URLs

<a href=
"http://www.murach.com/email"
>An Internet address</a>

<a href=
"http://64.71.179.86/email"
>An IP address</a>

Murach’s Java Servlets/JSP (2nd Ed.)

© 2008, Mike Murach & Associates, Inc.

SJSU Dept. of Computer Science

Fall 2010: August 30

CS 160: Software Engineering

©
R. Mak

12

Tables

<p>Here is the information that you entered:</p>


<table cellspacing="5" cellpadding="5" border="1">

<tr>

<td align="right">First name:</td>

<td>John</td>

</tr>

<tr>

<td align="right">Last name:
</td>

<td>Smith</td>

</tr>

<tr>

<td align="right">Email address:</td>

<td>jsmith@hotmail.com</td>

</tr>

</table>

Murach’s Java Servlets/JSP (2nd Ed.)

© 2008, Mike Murach & Associates, Inc.

SJSU Dept. of Computer Science

Fall 2010: August 30

CS 160: Software Engineering

©
R. Mak

13

Images

<p>Here is the image for the Murach logo:</p>

<img src=
"images/murachlogo.jpg"
width="100" height="100">

Murach’s Java Servlets/JSP (2nd Ed.)

© 2008, Mike Murach & Associates, Inc.

SJSU Dept. of Computer Science

Fall 2010: August 30

CS 160: Software Engineering

©
R. Mak

14

Cascading Style Sheets (CSS)



The code for a style sheet
:

body { font
-
family: Arial, sans
-
serif; font
-
size: 12px }


a { text
-
decoration : underline }

a:hover { text
-
decoration : underline; color : #CC0000 }


h1 { font
-
size: 16px; color: #003366;

vertical
-
align: top; margin
-
top: 10p
x; margin
-
bottom: 0px }

h2 { font
-
size: 16px; color: #003366 }

h3 { font
-
size: 14px; color: #003366 }



Link to a style sheet from t
he
HTML
code
:

<head>

<title>Murach's Java Servlets and JSP</title>


<link rel="stylesheet" href="styles/murach.css">

</
head>

Murach’s Java Servlets/JSP (2nd Ed.)

© 2008, Mike Murach & Associates, Inc.

SJSU Dept. of Computer Science

Fall 2010: August 30

CS 160: Software Engineering

©
R. Mak

15

HTML Form

<p>Here's a form that contains two text boxes and a button:</p>

<form action=
"entry.jsp"
method="get">

<p>

First name: <input type="text" name=
"firstName"
><br>

Last name:

<input type="text" name=
"lastName"
>

<input type="submit" value="Subm
it">

</p>

</form>

Murach’s Java Servlets/JSP (2nd Ed.)

© 2008, Mike Murach & Associates, Inc.

SJSU Dept. of Computer Science

Fall 2010: August 30

CS 160: Software Engineering

©
R. Mak

16

Text Controls



T
hree types of text controls

<p>Here's a form that contains a text box and a hidden
text box:</p>

<form action="checkPassword" method="get">

Username: <input type="text" name=
"username"


value="jsmith"><br>

Password: <inp
ut type="password" name=
"password
"

value="opensesame"><br>

<input type="hidden" name=
"productCode"



value="jr01"><br>

</form>

Murach’s Java Servlets/JSP (2nd Ed.)

© 2008, Mike Murach & Associates, Inc.

SJSU Dept. of Computer Science

Fall 2010: August 30

CS 160: Software Engineering

©
R. Mak

17

Text Areas

Comments:<br>

<textarea name="comment" rows="5" cols="60"></textarea>

Murach’s Java Servlets/JSP (2nd Ed.)

© 2008, Mike Murach & Associates, Inc.

SJSU Dept. of Computer Science

Fall 2010: August 30

CS 160: Software Engineering

©
R. Mak

18

Check Boxes and Radio Buttons



F
our checkboxes and three radio buttons

<form action="addToMailingList" method="get">

<input type="checkbox" name=
"
addEmail
"
checked>

Yes, add me to your mailing list.<br>

<br>

Contact me by:<br>

<input type="radio" name=
"contactVia
"



value="Email">Email

<input type="radio" name=
"contactVia"


value="Postal Mail">Postal mail

<input type="radio" name=
"contactVia"


value="Both" checked>Both<br>

<br>

I'm interested in these types of music:<b
r>

<input type="checkbox" name=
"
rock
"
>Rock<br>

<input type="checkbox" name=
"
country
"
>Country<br>

<input type="checkbox" name=
"
bluegrass
"
>Bluegrass<br>

</form>

Murach’s Java Servlets/JSP (2nd Ed.)

© 2008, Mike Murach & Associates, Inc.

One button group

SJSU Dept. of Computer Science

Fall 2010: August 30

CS 160: Software Engineering

©
R. Mak

19

Combo Boxes


The user can select only
one

option.


AKA: drop
-
down menu

<form action="writeCountry" method="get">

Select a country:<br>

<select name=
"country"
>

<option value="USA" selected>United States


<option value="Canada">Canada

<option value="Mexico">Mexico


</select><br>

</form>

Murach’s Java Servlets/JSP (2nd Ed.)

© 2008, Mike Murach & Associates, Inc.

SJSU Dept. of Computer Science

Fall 2010: August 30

CS 160: Software Engineering

©
R. Mak

20

List Boxes

<form action="writeCountry" method="get">

Select a country:<br>

<select name="country"

multiple
>

<option value="USA" selected>United States


<option value="Canada">Canada

<option value="Mexico">Mexico


</select><br>

</form
>

<p>(To select more than one country, hold down the Ctrl key.)</p>


The user can select
multiple

options.

Murach’s Java Servlets/JSP (2nd Ed.)

© 2008, Mike Murach & Associates, Inc.

SJSU Dept. of Computer Science

Fall 2010: August 30

CS 160: Software Engineering

©
R. Mak

21





Take roll!

SJSU Dept. of Computer Science

Fall 2010: August 30

CS 160: Software Engineering

©
R. Mak

22

What is a Servlet?


A servlet is a Java class that extends
HttpServlet
.


Servlets reside on the server computer in a directory that is
controlled by Tomcat.


Recall that Tomcat is our JSP/servlet engine.


A servlet object is invoked by a URL.


URL = Uniform Resource Locator (i.e., a web address)


Servlet objects run on the server computer.



When invoked, a servlet object can:


Dynamically generate HTML that will be returned to the client
as part of an HTTP response.


Perform any application logic.


Access the back
-
end database.


Whatever


it’s Java code!

SJSU Dept. of Computer Science

Fall 2010: August 30

CS 160: Software Engineering

©
R. Mak

23

What is a JavaServer Page (JSP)?


A JSP is a file that looks a lot like the HTML that the web server will
return to the client as part of an HTTP response.


JSPs reside on the server computer in a directory

that is controlled by
Tomcat
.



Special tags in the file represent where dynamically
-
generated
content will appear.


A plain HTML page is static.


A
JSP

represents an HTML page that is
dynamically generated
.



A JSP is invoked by a URL.


The first time it’s invoked, a JSP is compiled by the JSP/servlet engine
(e.g., Tomcat) into a servlet.


A JSP is a much easier way to code a servlet whose main purpose is
to return HTML to the client.


Often coded by web page designers who know HTML but not Java.

SJSU Dept. of Computer Science

Fall 2010: August 30

CS 160: Software Engineering

©
R. Mak

24

The Tomcat Server


Chapter 2 of the book
Java Servlets and JSP

does an
excellent job of explaining how to download, install, and
use
Tomcat
.


Recommendation:

Follow the book’s instructions precisely
regarding user names and passwords, otherwise some of the
examples may not work.



First learn how to use Tomcat by itself.


Local URL for the default page:
http://localhost:8080/



In Chapter 3, you’ll learn how to run Tomcat from within
the NetBeans IDE while you’re developing and
debugging JSPs and servlets.

SJSU Dept. of Computer Science

Fall 2010: August 30

CS 160: Software Engineering

©
R. Mak

25

Tomcat’s Directory Structure


On the server computer:

Murach’s Java Servlets/JSP (2nd Ed.)

© 2008, Mike Murach & Associates, Inc.

During development, your laptop can be both

the client computer and the server computer.

SJSU Dept. of Computer Science

Fall 2010: August 30

CS 160: Software Engineering

©
R. Mak

26

Tomcat’s Directory Structure
(cont’d)

Directory

Description

bin

Files for working with Tomcat such as the startup and
shutdown batch files.

conf

Files for configuring Tomcat such as server.xml,
context.xml, and web.xml
.

lib

JAR files that contain classes that are available to all
web applicati
ons. As a result, you can put any JAR
files you want to make available to all web
applications in this directory.

logs

Log files.

temp

Temporary files used by the JVM.

webapps

The directories and files for the web applications.

work

The source code and cla
ss files for the servlets that
Tomcat generates for the JSPs.

Murach’s Java Servlets/JSP (2nd Ed.)

© 2008, Mike Murach & Associates, Inc.

SJSU Dept. of Computer Science

Fall 2010: August 30

CS 160: Software Engineering

©
R. Mak

27

Manually Deploy a Web Application


A web application is packaged as a
.war file


Web archive file, similar to a .jar file


The NetBeans IDE will create .war files for you.



To deploy a web application manually, copy its
.war file into Tomcat’s
webapps

directory.


Tomcat will automatically expand the .war file into a
subdirectory structure and enable users to access
the application’s web pages.

Demo

SJSU Dept. of Computer Science

Fall 2010: August 30

CS 160: Software Engineering

©
R. Mak

28

Tomcat’s Web Application Manager


Manage your web applications


start


stop


reload


deploy


undeploy



Manager URL:


http://localhost:8080/manager/html


Demo

SJSU Dept. of Computer Science

Fall 2010: August 30

CS 160: Software Engineering

©
R. Mak

29

NetBeans


Chapter 3 of the book
Java Servlets and JSP

does an excellent job of explaining how to
download, install, and use
NetBeans
.



Edit, debug, and run web applications


Similar to Eclipse


Integrated with Tomcat