1. Student Web Application Tutorial

2. Part one

3. Student Web Application Tutorial
Source code:
Student.rar
Folders: lib, src, WebRoot
modified_student.rar (after adding telephone information to student registration)
student
.settings
lib
src
WebRoot
.classpath
.project

4. Outline Software Requirement Web Application Deployment
ODBC Configuration
Application Example
Database
Development with Eclipse
Application Structure
Modify the Code

5. Software Requirement [Java Environment]
Java (SE) 1.5 or higher
[Web application container]
Apache Tomcat 5.x or higher
[Database]
Microsoft Access 2003 or higher
[Integrated Development Environment]
Eclipse
file=/technology/epp/downloads/release/galileo/SR 2/eclipse-jee-galileo-SR2-win32.zip

6. Web Application Deployment
Create a folder named “student” in the “webapps” folder of Tomcat
Copy all the files under “WebRoot” in student.zip to “student” folder in Tomcat home folder.
Tomcat Home in this example:
C:\Tomcat
The file under “WebRoot” should be copied to
C:\Tomcat\webapps\student\

7. ODBC Configuration
Open Database Connectivity (ODBC) provides a standard software API method for using database management systems (DBMS).

8. ODBC Configuration
- ODBC Configuration in Windows Vista 1. Go to command line 2. Type “c:\wndows\syswow64\odbcad32.exe” - ODBC Configuration in Windows XP 1. Go to “Control Panel” 2. Click “ Classic View” on the right 3. Click “Administrative Tool” 4. Click “Data Sources (ODBC)”

9. ODBC Configuration
Click “User DSN”

10. ODBC Configuration
Click “Add”

11. ODBC Configuration Select “Microsoft Access Driver (*.mdb)”
Click “Finish”

12. ODBC Configuration

13. ODBC Configuration Data Source Name = “StudentDatabase”
Click “Select” and select the mdb file in the project
Example:”C:\Tomcat\webapps\student\stundents .mdb”

14. Tomcat
Start Tomcat
Go to localhost

15. Application Example Main Interface Register Online!
View the Student List

16. Application Example

17. Application Example

18. Database

19. Development with Eclipse
Open Eclipse and choose workspace
In this example, we use “c:\Documents and Settings\David\workspace”
Click OK

20. Development with Eclipse

21. Development with Eclipse
New web project
In the “project explorer”, right click and choose new->Dynamic Web Project
Or choose new->
other and type
“Dynamic Web Project”
in the filter

22. Development with Eclipse
Type “student” in Project name field.
Click Next

23. Development with Eclipse
Change Default output folder into WebRoot\WEB- INF\classes
Click Next

24. Development with Eclipse
Change Content Directory into “WebRoot”
Click Finish

25. Development with Eclipse

26. Development with Eclipse
Copy all the files in student.zip to “c:\Documents and Settings\David\workspace\student” folder.
Refresh the project in Eclipse
File->Refresh Or F5

27. Development with Eclipse

28. Development with Eclipse
There may be some errors in the Project.
Solution:
Choose the project in project explorer
Right click and choose properties
Choose “Java Build Path” on the left side
And Click “Libraries” tab

29. Development with Eclipse

30. Development with Eclipse
Click “Add JARs…”
Then choose the servlet-api.jar in the “lib” folder.
Click OK

31. Development with Eclipse
There should not be any error in the project.
The soure files are under “Java Resources: src”
Web page files are under WebRoot

32. Development with Eclipse

33. Application Structure
Module Layer
Controller Layer
Deployment Descriptor
View Layer
Database

34. Application Structure
Web.xml
In the Java Platform, Enterprise Edition, a deployment descriptor describes how a web application or enterprise application should be deployed. It directs a deployment tool to deploy a module or application with specific container options, security settings and describes specific configuration requirements. XML is used for the syntax of these deployment descriptor files. For web applications, the deployment descriptor must be called web.xml and must reside in a WEB-INF subdirectory at the web application root.

35. Application Structure
<servlet> <!-- Define Servlet Name --> <servlet-name>StudentDBServlet</servlet-name> <!-- Define Servlet Class --> <servlet-class>edu.indiana.slis.database.servlet.StudentDBServlet</servlet- class> </servlet> <servlet-mapping> <!-- Define Servlet URL PATTERN--> <url-pattern>/student</url-pattern> </servlet-mapping>

36. Application Structure
Student.java
Models the data structure of Database
Constructs Data Object
Provides Set and Get method for the data
// Line define the data members according to the database
protected String lastName;
protected String firstName;
protected String company;
protected String ;
protected String courseTitle;
protected String courseLocation;
protected String expectations;
protected java.sql.Date courseDate;

37. Application Structure
StudentDBServlet.java
Provides data entry and retrieval of student data in a database.
Functions:
// Initialize the servlet
public void init(ServletConfig config) throws ServletException
// Service Dispatcher
public void service(HttpServletRequest request,
HttpServletResponse response)
// List student information
public void displayStudents(HttpServletRequest request,
// Registration function
public void registerStudent(HttpServletRequest request, HttpServletResponse response)

38. Application Structure
public void init(ServletConfig config)
// Load JDBC-ODBC Driver and build the database connection
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
dbConnection = DriverManager.getConnection(dbURL, userID, passwd);
// Prepare SQL for list students data
displayStatement =
dbConnection.prepareStatement("select * from Students order by LastName");
// Prepare SQL for inserting student data
registerStatement =
dbConnection.prepareStatement("insert into Students "
+ "(LastName, FirstName, , Company, CourseExpectations,
CourseTitle, CourseLocation, CourseStartDate)"
+ " values (?, ?, ?, ?, ?, ?, ?, ?)");

39. Application Structure
public void service(HttpServletRequest request, HttpServletResponse response)
// Get parameter from user
userOption = request.getParameter("Register");
if (userOption != null) {
// hidden form field "Register" was present
registerStudent(request, response); }
else
// simply display the students
displayStudents(request, response);

40. Application Structure
public void displayStudents(HttpServletRequest request, HttpServletResponse response）
// Execute Prepared Query and get result set from database
ResultSet dataResultSet = displayStatement.executeQuery();
// Iterate through the result set
while (dataResultSet.next()) {
// Get an instance of Student from the result set
aStudent = new Student(dataResultSet);
tableBody += aStudent.toTableString(rowNumber);
rowNumber++; }

41. Application Structure
public void registerStudent(HttpServletRequest request, HttpServletResponse response)
// Get user input and construct a student instance
Student aStudent = new Student(request);
// set sql parameters
registerStatement.setString(LAST_NAME_POSITION, aStudent.getLastName());
…… registerStatement.setString(COURSE_LOCATION_POSITION, aStudent.getCourseLocation());
// execute sql
registerStatement.executeUpdate();

42. Application Structure
Index.html
<LI>
<!-- Direct to Student Registration page -->
<A HREF="StudentRegistration.htm">Register Online!</A>
</LI>
<!-- Call the servlet named “student” -->
<!-- You can find the servlet url-pattern and class in Web.xml -->
<A HREF="student">View the Student List</A>

43. Application Structure
StudentRegistration.html
<!-- Create a form to submit student data to “Student” servlet -->
<FORM method="POST" action="student"> ……
</FORM>

44. Exercise Add one new student, see what happens
Hit: please fill in each field. Otherwise you might get errors.

45. Part two

46. Modify the Code
Example：
Add a telephone information to the database

47. Modify the Code Steps: 1. Change the database
2. Change the Model layer: Student.java
3. Change the View layer: StudentRegistration.html
4. Change the Controller Layer:
StudentDBServlet.java
5. Deploy the code [same as slide 4]

48. Modify the Code
1. Change the database
Add a column named “Telephone”

49. Modify the Code 2. Change the Model layer: Student.java
Add a data member

50. Modify the Code
Modify the public Student(HttpServletRequest request) function

51. Modify the Code
Modify the public Student(ResultSet dataResultSet) function

52. Modify the Code
Add a getTelephone method

53. Modify the Code
Modify the public String toString() function

54. Modify the Code
Modify the public String toWebString() function

55. Modify the Code
Modify the public String toTableString() function

56. Modify the Code
3. Change the View layer: StudentRegistration.html

57. Modify the Code 4. Change Controller Layer: StudentDBServlet.java
Change the registerStatement SQL
Change the public void displayStudents(HttpServletRequest request, HttpServletResponse response)

58. Modify the Code
Properties’ position

59. Modify the Code
Change the public void registerStudent(HttpServletRequest request, HttpServletResponse response) function

60. Modify the Code
Deploy the code [same as slide 4]

61. Student Web Application Tutorial
Thank you!

62. Part three

63. Other related materials
Tomcat

64. What is Tomcat
Tomcat is an implementation of the Java Servlet and JavaServer Pages technologies.
Java Servlet technology provides Web developers with a simple, consistent mechanism for extending the functionality of a Web server and for accessing existing business systems
JavaServer Pages (JSP) technology provides a simplified, fast way to create dynamic web content. JSP technology enables rapid development of web-based applications that are server and platform independent.
Tomcat is a Servlet container based on Java. Tomcat can only run under JDK environment.
It is developed in an open and participatory environment and released under the Apache Software License
9/20/2018

65. Installation
Tomcat is operated under any Java Development Kit (JDK) environment that provides a JDK 1.1 or JDK 1.2 compatible platform.
The JDK is required so that your servlets, other classes, and JSP pages can be complied
9/20/2018

66. Install JDK Download JDK 6 Update 6
Install it under c:\Program Files\Java
Set environmental variables (System variables):
JAVA_HOME=C:\Program Files\Java\jdk1.6.0_06
C:\Program Files\Java\jdk1.6.0_03\bin to path
C:\Program Files\Java\jdk1.6.0_03\lib\tools.jar (dt.jar) to classpath
9/20/2018

67. Testing JDK – HelloUser.java
Compose a simple Java file called hellouser which will print out hello + the user name of the system.
Store HelloUser.java in your local file system (attention: case sensitive!)
public class HelloUser {
public static void main(String[] arguments) {
String username = System.getProperty("user.name");
System.out.println("Hello " + username); }
9/20/2018

68. Install Tomcat There are two ways to install Tomcat
Windows service ( an .exe file to just click it, preferred)
Go to tomcat download:
Go to Core: Windows Service Installer, download apache-tomcat exe
Run this .exe file to install tomcat.
Binary distribution (zip file to get unzipped)
You have to set up your own path and classpath, it is very complicated, not recommended.
9/20/2018

69. Install Tomcat Setting environmental variables:
Control panel – system – environment variables
Create CATALINA_HOME, add the location of Tomcat as its value, for example: C:\Program Files\Apache Software Foundation\Tomcat 5.5
CATALINA_HOME=C:\Program Files\Apache Software Foundation\Tomcat 5.5
9/20/2018

70. Test Tomcat Turn on the monitor of Tomcat (start)
The login info of manager and administrator, can be found at: C:\Program Files\Apache Software Foundation\Tomcat 5.5\conf\tomcat-users.xml
Go to
$CATALINA_HOME is the root of the Tomcat installation directory.
In your local filesystem: $CATALINA_HOME/webapps/ROOT/index.jsp
9/20/2018

71. Different folders under Tomcat
Directory Name
Description
bin
Contains the startup, shutdown, tomcat, ... scripts. These scripts are used to start and shutdown the server and also set the classpath and other environment variables.
conf
Contains various configuration files including server.xml (Tomcat's main configuration file) and web.xml that sets the default values for the various web applications deployed in Tomcat.
doc
Contains miscellaneous documents regarding Tomcat.
lib
Contains various jar files that are used by Tomcat. On UNIX any file in this directory is appended to Tomcat's classpath.
logs
This is where Tomcat places it's log files
src
The servlet APIs source files. 
webapps
This is where we place our web applications. Usually contains sub-directories and the names usually indicates the respective web applications that are placed in the directory.
9/20/2018

72. Developing Applications with Tomcat
A web application is defined as a hierarchy of directories and files in a standard layout
The top-level directory is the document root of your application
In the document root
*.html, *.jsp, etc. – The HTML and JSP pages, along with other files that must be visible to the client browser (such as stylesheet files) for your application
WEB-INF/web.xml – This is the web application deployment descriptor for your application. This is an XML file describing the servlets and other components that make up your application, along with other initialization parameters
WEB-INF/classes/ - This directory contains any Java class files required for your application. Normally it has a build.xml for ant to build a project.
WEB-INF/lib/ - This directory contains JAR files that contain Java class files required for your application, such as third party class libraries (Jena, Pellet, Ant…) or JDBC drivers. It is similar as setting classpath in command line.
9/20/2018

73. Developing Applications with Tomcat
Classpath:
When you develop your own web application and run it under Tomcat. If you put the needed .jar file under WEB-INF\lib, you do not need to set the classpath.
But if you are running your file under command line, you need to set up the classpath.
Tomcat is an application server that dose not use the classpath of the system;
For every web application, tomcat is expecting a structure such as: application_name/WEB-INF/lib +application_name/WEB- INF/web.xml + application_name/WEB-INF/classes;
Tomcat knows where to load the .jar files from application_name/lib automatically so that the web application can run
9/20/2018

74. Simple Tomcat application- HelloApp
Create a HelloApp which will print Hello to the user who login the website.
The folder structure of the HelloApp:
Linking:
index.html login.jspDispatcherServlethello.jsp
9/20/2018

75. HelloApp – index.htm http://localhost:8080/helloapp/index.htm
<html>
<head>
<title>helloapp</title>
</head>
<body >
<p><font size="7">Welcome to HelloApp</font></p>
<p><a href="login.jsp?language=English">English version </a>
</body>
</html>
9/20/2018

76. HelloApp – login.jsp http://localhost:8080/helloapp/login.jsp
<html>
<head>
<title>helloapp</title>
</head>
<body >
<br>
<form name="loginForm" method="post" action="dispatcher">
<table>
<tr><td><div align="right">User Name:</div></td><td>
<input type="text" name="username"></td></tr>
<tr><td><div align="right">Password:</div></td><td>
<input type="password" name="password"></td></tr>
<tr><td></td><td>
<input type="Submit" name="Submit" value="Submit"></td></tr>
</table> </form>
</body>
</html>
9/20/2018

77. HelloApp – DispatcherServlet.java
package mypack;
import javax.servlet.*;
import javax.servlet.http.*;
import java.io.*;
import java.util.*;
public class DispatcherServlet extends HttpServlet {
private String target = "/hello.jsp";
public void init(ServletConfig config)
throws ServletException {
super.init(config); }
public void doGet(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException {
// If it is a get request forward to doPost()
doPost(request, response);
public void doPost(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException {
// Get the username from the request
String username = request.getParameter("username");
// Get the password from the request
String password = request.getParameter("password");
// Add the user to the request
request.setAttribute("USER", username);
request.setAttribute("PASSWORD", password);
// Forward the request to the target named
ServletContext context = getServletContext();
System.out.println("Redirecting to " + target);
RequestDispatcher dispatcher =
context.getRequestDispatcher(target);
dispatcher.forward(request, response); }
public void destroy() {
Compile this to .class and put it to WEB-INF\classes folder
9/20/2018

78. HelloApp – hello.jsp http://localhost:8080/helloapp/hello.jsp
taglib uri="/mytaglib" prefix="mm" %>
<html>
<head>
<title>helloapp</title>
</head>
<body>
<b><mm:hello/> : <%= request.getAttribute("USER") %></b>
</body>
</html>
9/20/2018

79. HelloApp – web.xml <?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE web-app PUBLIC
'-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN' '
<web-app>
<servlet>
<servlet-name>dispatcher</servlet-name>
<servlet-class>mypack.DispatcherServlet</servlet-class>
</servlet>
<servlet-mapping>
<url-pattern>/dispatcher</url-pattern>
</servlet-mapping>
</web-app>
9/20/2018

80. HelloApp – make it work
Follow the folder structure of the web application to put all these files into their places.
Put the helloapp folder to <CATALINA_HOME>/webapps
Such as: C:\Program Files\Apache Software Foundation\Tomcat 5.5\webapps\helloapp
Stop tomcat and restart tomcat
Go to
It works!
9/20/2018

81. HelloApp.war – packaging web application
Tomcat provides an easy way to package web application (by creating .war file) and deploy it in other places. Packaging can avoid missing files.
Go to the root of you web application:
Command line: jar cvf helloapp.war *.*
Then helloapp.war is created
Put this helloapp.war in another computer under <TOMCAT_HOME>/webapps, go to you will have this web application working.
Tomcat provides a service to automatically unpack .war file into a a folder in its webapps.
9/20/2018