Student Web Application Tutorial PART ONE Student Web

Student Web Application Tutorial

PART ONE

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

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

Software Requirement �[Java Environment] Java (SE) 1. 5 or higher http: //www. java. com/ �[Web application container] Apache Tomcat 5. x or higher http: //tomcat. apache. org/ �[Database] Microsoft Access 2003 or higher �[Integrated Development Environment] Eclipse http: //www. eclipse. org/downloads/download. p hp? file=/technology/epp/downloads/release/g alileo/SR 2/eclipse-jee-galileo-SR 2 -win 32. zip

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

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

ODBC Configuration - ODBC Configuration in Windows Vista 1. Go to command line 2. Type “c: wndowssyswow 64odbcad 32. 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)”

ODBC Configuration �Click “User DSN”

ODBC Configuration �Click “Add”

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

ODBC Configuration

ODBC Configuration �Data Source Name = “Student. Database” �Click “Select” and select the mdb file in the project �Example: ”C: Tomcatwebappsstudentstun dents. mdb”

Tomcat �Start Tomcat �Go to localhost �http: //localhost: 8080/student/

Application Example �Main Interface ◦ Register Online! ◦ View the Student List

Application Example

Database

Development with Eclipse �Open Eclipse and choose workspace �In this example, we use “c: Documents and SettingsDavidworkspace” �Click OK

Development with Eclipse

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

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

Development with Eclipse �Change Default output folder into Web. RootWEBINFclasses �Click Next

Development with Eclipse �Change Content Directory into “Web. Root” �Click Finish

Development with Eclipse

Development with Eclipse �Copy all the files in student. zip to “c: Documents and SettingsDavidworkspacestudent” folder. �Refresh the project in Eclipse ◦ File->Refresh Or F 5

Development with Eclipse

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

Development with Eclipse

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

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 Web. Root

Development with Eclipse

Application Structure Module Layer Controller Layer Deployment Descriptor View Layer Database

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 WEBINF subdirectory at the web application root.

Application Structure <servlet>  <servlet-name>�Student. DBServlet</servlet-name>  <servletclass>edu. indiana. slis. database. servlet. Student. DBServlet</servletclass> </servlet> <servlet-mapping> <servlet-name>�Student. DBServlet</servlet-name>  <url-pattern>/student</url-pattern> </servlet-mapping>

Application Structure �Student. java ◦ Models the data structure of Database ◦ Constructs Data Object ◦ Provides Set and Get method for the data // Line 19 -26 define the data members according to the database protected String last. Name; protected String first. Name; protected String company; protected String email; protected String course. Title; protected String course. Location; protected String expectations; protected java. sql. Date course. Date;

Application Structure �Student. DBServlet. java ◦ Provides data entry and retrieval of student data in a database. ◦ Functions: // Initialize the servlet public void init(Servlet. Config config) throws Servlet. Exception // Service Dispatcher public void service(Http. Servlet. Request request, Http. Servlet. Response response) // List student information public void display. Students(Http. Servlet. Request request, Http. Servlet. Response response) // Registration function public void register. Student(Http. Servlet. Request request, Http. Servlet. Response response)

Application Structure �public void init(Servlet. Config config) // Load JDBC-ODBC Driver and build the database connection Class. for. Name("sun. jdbc. odbc. Jdbc. Odbc. Driver"); db. Connection = Driver. Manager. get. Connection(db. URL, user. ID, passwd); // Prepare SQL for list students data display. Statement = db. Connection. prepare. Statement("select * from Students order by Last. Nam // Prepare SQL for inserting student data register. Statement = db. Connection. prepare. Statement("insert into Students " + "(Last. Name, First. Name, Email, Company, Course. Expectations, Course. Title, Course. Location, Course. Start. Date)" + " values (? , ? , ? )");

Application Structure �public void service(Http. Servlet. Request request, Http. Servlet. Response // Get parameter from user response) user. Option = request. get. Parameter("Register"); if (user. Option != null) { // hidden form field "Register" was present register. Student(request, response); } else { // simply display the students display. Students(request, response); }

Application Structure �public void display. Students(Http. Servlet. Reques t request, Http. Servlet. Response response） // Execute Prepared Query and get result set from database Result. Set data. Result. Set = display. Statement. execute. Query(); // Iterate through the result set while (data. Result. Set. next()) { // Get an instance of Student from the result set a. Student = new Student(data. Result. Set); table. Body += a. Student. to. Table. String(row. Number); row. Number++; }

Application Structure �public void register. Student(Http. Servlet. Request request, Http. Servlet. Response response) // Get user input and construct a student instance Student a. Student = new Student(request); // set sql parameters register. Statement. set. String(LAST_NAME_POSITION, a. Student. get. Last. Name()); …… register. Statement. set. String(COURSE_LOCATION_POSITION, a. Student. get. Course. Location()); // execute sql

Application Structure �Index. html <LI>  <A HREF="Student. Registration. htm">Register Online!</A> </LI>   <A HREF="student">View the Student List</A> </LI>

Application Structure �Student. Registration. html  <FORM method="POST" action="student"> …… </FORM>

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

PART TWO

Modify the Code �Example： ◦ Add a telephone information to the database

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

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

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

Modify the Code ◦ Modify the public Student(Http. Servlet. Request request) function

Modify the Code ◦ Modify the public Student(Result. Set data. Result. Set) function

Modify the Code ◦ Add a get. Telephone method

Modify the Code �Modify the public String to. String() function

Modify the Code ◦ Modify the public String to. Web. String() function

Modify the Code �Modify the public String to. Table. String() function

Modify the Code � 3. Change the View layer: Student. Registration. html

Modify the Code � 4. Change Controller Layer: Student. DBServlet. java � Change the register. Statement SQL � Change the public void display. Students(Http. Servlet. Request request, Http. Servlet. Response response)

Modify the Code � Properties’ position

Modify the Code � Change the public void register. Student(Http. Servlet. Request request, Http. Servlet. Response response) function

Modify the Code �Deploy the code [same as slide 4]

Student Web Application Tutorial �Thank you!

PART THREE

Other related materials �Tomcat

What is Tomcat � Tomcat is an implementation of the Java Servlet and Java. Server 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 ◦ Java. Server 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 11/3/2020 64

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 11/3/2020 65

Install JDK �Download JDK 6 Update 6 ◦ http: //java. sun. com/javase/downloads/ind ex. jsp ◦ Install it under c: Program FilesJava ◦ Set environmental variables (System variables): ◦ JAVA_HOME=C: Program FilesJavajdk 1. 6. 0_06 ◦ C: Program FilesJavajdk 1. 6. 0_03bin to path ◦ C: Program 11/3/2020 66

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

Install Tomcat � There are two ways to install Tomcat ◦ Windows service ( an. exe file to just click it, preferred) �Go to tomcat download: http: //tomcat. apache. org/download-55. cgi �Go to Core: Windows Service Installer, download apache -tomcat-5. 5. 26. 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. 11/3/2020 68

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 FilesApache Software FoundationTomcat 5. 5 �CATALINA_HOME=C: Program FilesApache Software FoundationTomcat 5. 5 11/3/2020 69

Test Tomcat � Turn on the monitor of Tomcat (start) � The login info of manager and administrator, can be found at: C: Program FilesApache Software FoundationTomcat 5. 5conftomcat-users. xml � Go to http: //localhost: 8080/ ◦ $CATALINA_HOME is the root of the Tomcat installation directory. ◦ In your local filesystem: $CATALINA_HOME/webapps/ROOT/index. jsp 11/3/2020 70

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 subdirectories and the names usually indicates the respective web applications that are placed in the directory. 11/3/2020 71

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. � 11/3/2020 72

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 WEBINFlib, 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 11/3/2020 73

Simple Tomcat application- Hello. App � Create a Hello. App which will print Hello to the user who login the website. � The folder structure of the Hello. App: Linking: <CATALINA_HOME> /webapps index. html login. jsp Dispatcher. Servlet hello. jsp helloapp index. html login. jsp hello. jsp WEB_INF web. xml classes mypack Dispatcher. Servlet. class 11/3/2020 74

Hello. App – index. htm <html> <head> <title>helloapp</title> </head> <body > <p><font size="7">Welcome to Hello. App</font></p> <p><a href="login. jsp? language=English">English version </a> </body> </html> http: //localhost: 8080/helloapp/index. htm 11/3/2020 75

Hello. App – login. jsp <html> <head> http: //localhost: 8080/helloapp/login. jsp <title>helloapp</title> </head> <body > <form name="login. Form" 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> 11/3/2020 76

Hello. App – Dispatcher. Servlet. java package mypack; import javax. servlet. *; javax. servlet. http. *; java. io. *; java. util. *; public void do. Post(Http. Servlet. Request request, Http. Servlet. Response response) throws Servlet. Exception, IOException { // Get String public class Dispatcher. Servlet extends Http. Servlet { private String target = "/hello. jsp"; public void init(Servlet. Config config) throws Servlet. Exception { super. init(config); } public void do. Get(Http. Servlet. Request request, Http. Servlet. Response response) throws Servlet. Exception, IOException { // If it is a get request forward to do. Post() do. Post(request, response); } the username from the request username = request. get. Parameter("username"); the password from the request password = request. get. Parameter("password"); // Add the user to the request. set. Attribute("USER", username); request. set. Attribute("PASSWORD", password); // Forward the request to the target named Servlet. Context context = get. Servlet. Context(); System. out. println("Redirecting to " + target); Request. Dispatcher dispatcher = context. get. Request. Dispatcher(target); dispatcher. forward(request, response); } public void destroy() { } } Compile this to. class and put it to WEB-INFclasses folder 11/3/2020 77

Hello. App – hello. jsp <%@ taglib uri="/mytaglib" prefix="mm" %> <html> <head> <title>helloapp</title> </head> <body> <b><mm: hello/> : <%= request. get. Attribute("USER") %></b> </body> </html> http: //localhost: 8080/helloapp/hello. jsp 11/3/2020 78

Hello. App – web. xml <? xml version="1. 0" encoding="ISO-8859 -1"? > <!DOCTYPE web-app PUBLIC '-//Sun Microsystems, Inc. //DTD Web Application 2. 3//EN' 'http: //java. sun. com/j 2 ee/dtds/web-app_2_3. dtd'> <web-app> <servlet-name>dispatcher</servlet-name> <servlet-class>mypack. Dispatcher. Servlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>dispatcher</servlet-name> <url-pattern>/dispatcher</url-pattern> </servlet-mapping> </web-app> 11/3/2020 79

Hello. App – 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 FilesApache Software FoundationTomcat 5. 5webappshelloapp � Stop tomcat and restart tomcat � Go to http: //localhost: 8080/helloapp/index. htm � It works! 11/3/2020 80

Hello. App. 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 http: //localhost: 8080/helloapp, you will have this web application working. ◦ Tomcat provides a service to automatically unpack. war file into a a folder in its webapps. 11/3/2020 81