project2 slides available
TRANSCRIPT
Project 2:Database and the Web
Hyun J. Moon and Carlo Zaniolo
University of California, Los Angeles
CS143, Fall 2004
Project 2: Database and the Web
Learn how to design web pages that interact with a database
Due on Dec 7th (Tuesday) Techniques:
JDBC: Java Database Connectivity APISQL: RDBMS query languageServlet: Java program running on a Web Server to
generate dynamic contentHTML: standard web languageXML: eXtensible Markup Language: the next generation
web language
Project 2: Database and the Web (cont’d)
Servers:DB2 Database ServerApache Tomcat Java Server (supports both Servlet and
JSP)
Programming language:Java
Editor: UNIX: emacs/xemacs on SEASNET; Windows: JBuilder, JDeveloper, TextPad, …
Compiler: javac, java from SUN JDK
Project 2: Database and the Web (cont’d)
Main Pages and Web Flow: online interaction with a music databaseP1P2P3P4P5
All HTML pages dynamically generated from Servlets (except P1)
Java Servlet Request Processing
InternetInternet
Browser
Client
HTTP Server
Copycat.class
http://landfair.seas.ucla.edu:8080/Copycat.html
TomcatApp. Server
servlet/Copycat
http://landfair.seas.ucla.edu:8080/servlet/Copycat =>${HOME}/tomcat/webapps/ROOT/WEB-INF/classes/Copycat.class
HTML
JVM
Other Dynamic Web Environment
CGI: Common Gate Interface, can be written in any language
ASP (active server pages): by Microsoft, use visual basic, hard to reuse
JSP (Java Server Pages): normally used as web interface programming with Java Servlet as backend
Coldfusion: by Dreamweaver php, python, etc.
CGIs vs Servlets
CGI programs Separate process for each
CGI program Mod_perl and FastCGI
improves performance of CGI but not to level of servlets
Have difficult time maintaining state across requests
Servlets Run under single JVM
(better performance) Servlets loaded into
memory with first call, and stay in memory
Have built-in state preservation methods
Java's inherent security Proprietary source code can
be retained by only giving up *.class files to the server
Communicate with Java Servlet with FORMS
FORMS are defined in HTML pages as:<form method=get action=servlet/Copycat>
<input type=text name = some_text size = 40>
<input type=submit value="Submit">
</form>
Actions: send request to a HTTP serverTwo common methods: POST and GET
Forms: Method: GET and POST
GET: Data is sent to the server appended to the URLcan only send a small amount of informationThe exchanged data are displayed in the URL as well http://landfair.seas.ucla.edu:8080/servlet/Copycat?some_text=test
The URL can be bookmarked
POST: Data is sent to the server in a separate messagewith unlimited length of data, and the exchange is
invisible to the userSecure (e.g., for credit card numbers)Can’t boomark
Forms: INPUT
Input tags are used to place many form elements Input tags have several types
textbox textareacheckbox radiodropdown filebox
The name and value of of the input is like a pair of (parameter-name, parameter-value)
No end tag
Forms: Buttons
Simple push-down controls 3 flavors
<input type=submit>: cause all form data to be sent to the server
<input type=reset>: cause the form data to be set to the default
<input type=button>: used for JavaScript
Button images: can also work as a submit button<input type=image src=coolbutton.gif name=coolbutton>
Forms: hidden
Send the information to the server and the user will not notice
Normally used to send control information to the server process<form action=servlet/showAlbum>
<input type=hidden name=albumname value=choke>
<input type=reset> <input type=submit>
</form>
What a Servlet Does
Process requests from clientsdoGet: process get requestdoPost: process post request
Response to the clients Return HTML contents to the client
Communicate through streams: Servlets normally retrieve most of their parameters through an
input stream, and send their responses using an output stream:
ServletInputStream in = request.getInputStream ();
ServletOutputStream out = response.getOutputStream ();
Structure of a Servlet:HelloWorld
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class HelloWorld extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws IOException, ServletException
{
response.setContentType("text/html");
PrintWriter out = response.getWriter();
out.println("<html>");
out.println("<body>");
out.println("<head>");
out.println("<title>Hello World!</title>");
out.println("</head>");
out.println("<body>");
out.println("<h1>Hello World!</h1>");
out.println("</body>");
out.println("</html>");
}
}
Client Side:
<html><body><head><title>Hello World!</title></head><body><h1>Hello World!</h1></body></html>
http://landfair.seas.ucla.edu:8080/servlet/HelloWorld
Fundamental Parts of a Servlet
1. import javax.servlet.*; and import javax.servlet.http.*; - packages of servlet classes that implement the Java Servlet API
2. public class HelloWorld extends HttpServlet { - extends the HTTPServlet class
3. init()-initializes servlet after loading into memory- place to perform operations done only once at start-up
- reading a current properties - clearing log files, notifying other services that the servlet is running
4. service(), doGet(), doPost()- this is where work is done- each time the servlet is called a new thread of execution begins- input is passed to the Java code via either HTTP GET or POST commands
5. destroy()- executed when server engine calls servlet to terminate- used to flush I/O, disconnect from database
Get Parameters
Sample forms:<form method=post action=servlet/Copycat>
<input type=text name = some_text size = 40>
<input type=hidden name = songname value=“natural”>
<input type=submit value="Submit">
</form>
Process it in a Servlet: String method = request.getMethod (); // e.g. post String some_text = request.getParameter
(“some_text") ; String songname = request.getParameter
(“songname");
Sample Parameter Handling
public class Copycat extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException { response.setContentType("text/html"); PrintWriter out = response.getWriter(); out.println("<html>"); out.println("<head>"); String title = "Copycat Servlet"; out.println("<title>" + title + "</title>"); out.println("</head>"); out.println("<body bgcolor=white>"); out.println("<h1>" + title + "</h1>"); String studentSaid = request.getParameter("some_text"); out.println("The student said: " + studentSaid + "<br>"); out.println("</body>"); out.println("</html>"); }}
Copycat.html From the web
Modify and add your JDBC stuff!
JDBC: Dynamic Queries
Prepared statement allows queries to be compiled and executed multiple times with different arguments: PreparedStatement pStmt = conn.prepareStatement(
“select albumname from album where year= ? and musicianName= ? ”);
pStmt.setInt(1, 1990);
pStmt.setString(2, “BJork");
pStmt.executeQuery();
Java Servlet at SEAS
Port Assignment Each student is assigned two ports for running Java
Servlets on SEAS Please make sure that you only use the ports assigned
to youTwo ports
Connector Port: internal communication Server Port: access from the web: e.g. (replace 8080 with your
own server port)
HTML: http://landfair.seas.ucla.edu:8080/
Servlet: http://landfair.seas.ucla.edu:8080/servlet/
Tomcat
Tomcat is a free, open open-source implementation of Java Servlet and Java Server Pages technologies
Tomcat can be used as a small stand stand-alone server for testing servlets and JSP pages, or can be integrated into the Apache Web server
Tomcat is free! Download at: http://jakarta.apache.org
Besides Tomcat, there are other systems that support servlet: Allaire jrun, IBM Websphere, Bea WebLogic, Borland
AppServer, Oracle App Server
Setup Tomcat on SEASNET
login to your seas project account setup libraries and paths
source /u/cs/class/cs143v/cs143vta/bin/all.env: Put in your .cshrc file (or .login):
source /u/cs/class/cs143v/cs143vta/bin/all.env
Setup Tomcat directories ${HOME}/tomcat: home directory of tomcat ${HOME}/logs directory stores the log files generated by the server ${HOME}/tomcat/webapps/ROOT: your HTML file ${HOME}/tomcat/webapps/ROOT/WEB-INF/classes: your Servlet
classes ${HOME}/conf: server.xml, tomcat-users.xml, web.xml, and jk2.properties
Configure Tomcat Ports
Modify ${HOME}/tomcat/conf/server.xml file: Connector port:
Server port="8005" shutdown="SHUTDOWN" debug="0"> => Server port="11033" shutdown="SHUTDOWN" debug="0">
Server Port: <Connector
className="org.apache.coyote.tomcat4.CoyoteConnector" port="8080“ =>
<Connector className="org.apache.coyote.tomcat4.CoyoteConnector" port=“11034“
Startup and Shutdown Tomcat
Startup tomcat:startup.sh
Stop tomcat:Ctr+C on your tomcat running screen If you run tomcat on background, runshutdown.sh
Open another window for your coding Always shut down your tomcat before you log out
Test Servlet
After Tomcat is up, you can test Servlet: cp /w/class.01/cs/cs143v/cs143vta/project/Copycat.html to:
${HOME}/tomcat/webapps/ROOT ${HOME} is your home directory (pwd after you first login)
cp /w/class.01/cs/cs143v/cs143vta/project/Copycat.java to: ${HOME}/tomcat/webapps/ROOT/WEB-INF/classes/
Compile your Java file: javac Copycat.java If httpServlet error happened, you must have not source
all.env
Open your URL:http://<machinename>:<port>/<filename>.html
e.g.: http://landfair.seas.ucla.edu:11256/Copycat.html
Debug Your Code
Servlet not easy to debug! Return status code:
sendError method in class HttpResponse
Log errors written into servlet log filepublic void servletContext.log(string msg)public void servletContext.log(Exception e, String msg)
Debug Your Code – Common Status Codes
Constant: Code: Meaning SC_OK: 200: client request successful SC_NO_CONTENT:203: the request succeed, but
without new response to return SC_NOT_UNAUTHORIZED:401: unauthorized SC_NOT_FOUND: 404: not found on the server SC_INTERNAL_SERVER_ERROR: 500: the
servlet is wrong
What to Submit
SQL Script file: db.sql SQL script updated from Project I to include additional tables if
needed
Project pages: P1-P5 Servlet generated HTML file: p1html.html, p2html.html, etc.
Use “View Source” from your web browser to copy and paste the files
readme.txt file:Class Name: CS143, LEC.1
Name(Last, First):
Student SID:
Project login account:
Database you use(STUDBL, STUDBW, or STUDBN):
Servlet PORT numbers: Connector Port:____ Server Port:____
Extra Credit: XML (10 percent)
For page P1, add a checkbox "Display as XML". If that checkbox is checked, a page of XML document (instead of
HTML) is displayed ( through IE only). The document you generated must satisfy a DTD and will be
validated using the following XML Validator. You can define your own DTD.
Sample XML document: <albums>
<album><albumname>Choke</
albumname><musicianname></musicianname>…
</album>…
</albums>
What’s XML
XML: EXtensible Markup Language A W3C standard widely accepted
Difference from HTML: It’s extensible: a framework to define mark-up
languages Separate syntax from semantics.
XML +XSLT = HTML
Similarity between HTML: both are markup languages
A Sample XML Document
<orders> <order id="1" itemcount="3"> <customer id="100"> <lastname>Skonnard</lastname> <firstname>Aaron</firstname <phone>(888)888-8888</phone </customer> <item id="5000" type="software"> <manuf>Microsoft</manuf> <pname>Microsoft Money 99</pname> <price>39.99</price> <quant>1</quant> <total>39.99</total> </item> </order></orders>
<orders> <order id="1" itemcount="3"> <customer id="100"> <lastname>Skonnard</lastname> <firstname>Aaron</firstname <phone>(888)888-8888</phone </customer> <item id="5000" type="software"> <manuf>Microsoft</manuf> <pname>Microsoft Money 99</pname> <price>39.99</price> <quant>1</quant> <total>39.99</total> </item> </order></orders>
starting tag
ending tag
HTML Editors
Microsoft Frontpage/WordDon’t use it! Tons of extra tags make your servlet a
nightmare!
Macromedia Homesite (I use this one) free 30-day trial
Macromedia Dreamweaver free 30-day trial
Altova XMLSpy (for both XML and HTML)can be used for testing extra credit question free 30-day trial
UNIX: emacs/xemacs
Documentations
Java Servlet APIs DB2 Documentation SQL Reference Java APIs HTML Beginners Guide Dave’s HTML Guide HTML 4.0 Reference
Project SEASNET Account
3 machines to login landfair.seas.ucla.edu lindbrook.seas.ucla.edu westholme.seas.ucla.edu
To decide which machine you need to login: LAST_2_DIGITS_OF_YOUR_STUDENT_ID mode 3
mod value Machine name Database name
0 Landfair studbl
1 lindbrook studbn
2 westholme studbw
Two Options for JDBC Driver
Option I. use .app. driver instead of .net. driver, e.g.: Class.forName("COM.ibm.db2.jdbc.app.DB2Driver"); and in your
JDBC URL, use jdbc:db2:studbw, (if you login to westholme), or jdbc:db2:studbn, (if you login to lindbrook), or jdbc:db2:studbl, (if you login to landfair).
i.e., the hostname is omitted.
Option II: or use .net. driver: Class.forName("COM.ibm.db2.jdbc.net.DB2Driver"); but use the JDBC URL as:
jdbc:db2://landfair.seas.ucla.edu/studbw, or jdbc:db2://landfair.seas.ucla.edu/studbn, or jdbc:db2://landfair.seas.ucla.edu/studbl.
i.e., the hostname is always landfair.seas.ucla.edu no matter which machine you login. The database name still corresponds to the machine you login.
Project 2: 3-Tier Architecture
Application/HTTPServer (Tomcat)
DatabaseServerServlets
JDBC
Network
Client Client Client
HTTP/Application Specific Protocol
Project 1: 2-Tier Architecture
DatabaseServer
JDBC
Network
Client Client Client
Good Luck!
Start early! Great experience for your career!