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
Enter the password to open this PDF file:
File name:
-
File size:
-
Title:
-
Author:
-
Subject:
-
Keywords:
-
Creation Date:
-
Modification Date:
-
Creator:
-
PDF Producer:
-
PDF Version:
-
Page Count:
-
Preparing document for printing…
0%
Commentaires 0
Connectez-vous pour poster un commentaire