CS 160: Software Engineering August 27 Class Meeting Department of Computer Science San Jose State University Fall 2014 Instructor: Ron Mak mak.

CS 160: Software EngineeringAugust 27 Class Meeting

Department of Computer ScienceSan Jose State University

Fall 2014Instructor: Ron Mak

www.cs.sjsu.edu/~mak

http://www.cs.sjsu.edu/~mak

http://www.cs.sjsu.edu/~mak

Computer Science Dept.Fall 2014: August 27

CS 160: Software Engineering© R. Mak

2

Reminders: By Friday, August 29

Form teams. Email me your team information.

team name team members and email addresses

1-paragraph description of your team’s web application_



3

“The Five C’s” Complexity Change

Collaboration Communication Coordination



4

Software Engineering is …

Team-based Processes Manage complexity Manage change.

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

Successful software products!}



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 ExplorerFirefoxGoogle ChromeApple Safari

MySQL Relational Database Manager

Your work here!JSP, servlets,database tables,etc.

Murach’s Java Servlets/JSP, 2nd ed.© 2008, Mike Murach & Associates, Inc.



6

Take roll!



7

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 appropriate link:</p> </body> </html>




8

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.




9

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.




10

Anchor Tags (Links)




11

Tables

The HTML code for a table <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>[email protected]</td> </tr> </table>




12

Images

<p>Here is the image for the Murach logo:</p> <img src="images/murachlogo.jpg" width="100" height="100">




13

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: 10px; margin-bottom: 0px } h2 { font-size: 16px; color: #003366 } h3 { font-size: 14px; color: #003366 }

Link to a style sheet from the HTML code: <head> <title>Murach's Java Servlets and JSP</title> <link rel="stylesheet" href="styles/murach.css"> </head>




14

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="Submit"> </p> </form>




15

Text Controls

Three 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: <input type="password" name="password" value="opensesame"><br> <input type="hidden" name="productCode" value="jr01"><br> </form>




16

Text Areas

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




Check Boxes and Radio Buttons

Four 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:<br> <input type="checkbox" name="rock">Rock<br> <input type="checkbox" name="country">Country<br> <input type="checkbox" name="bluegrass">Bluegrass<br> </form>

One button group




18

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>




19

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.




20

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



21

What is a Servlet? cont’d

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!_



22

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.



23

What is a JavaServer Page? cont’d

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.

JSPs are often coded by web page designers who know HTML but not Java._



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/





25

The Tomcat Server, cont’d

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



26

Tomcat’s Directory Structure

On the server computer:

During development, your laptop can be both the client computer and the server computer.




27

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 applications. 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 class files for the servlets that Tomcat generates for the JSPs.




28

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



29

Tomcat’s Web Application Manager

Manage your web applications start stop reload deploy undeploy

Manager URL: http://localhost:8080/manager/html

Demo

http://localhost:8080/manager/html

http://localhost:8080/manager/html



30

NetBeans

Chapter 3 of the book Java Servlets and JSP does an excellent job of explaining how to download, install, and use NetBeans.

Download from: https://netbeans.org/downloads/index.html

You want the Java EE version.

Edit, debug, and run web applications. Similar to Eclipse Integrated with Tomcat

https://netbeans.org/downloads/index.html

https://netbeans.org/downloads/index.html



31

NetBeans

When you install NetBeans, be sure to specify that you want to include Apache Tomcat. Otherwise, you’ll get the GlassFish server instead.

CS 160: Software Engineering August 27 Class Meeting Department of Computer Science San Jose State University Fall 2014 Instructor: Ron Mak mak.

Documents

software engineering

mike murach associates

ron mak

mak reminders

mak check

successful software

teambased processes

team members