Title: Project 2: Database and the Web
1Project 2Database and the Web
- Hyun J. Moon and Carlo Zaniolo
- University of California, Los Angeles
- CS143, Fall 2004
2Project 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 API
- SQL RDBMS query language
- Servlet Java program running on a Web Server to
generate dynamic content - HTML standard web language
- XML eXtensible Markup Language the next
generation web language
3Project 2 Database and the Web (contd)
- Servers
- DB2 Database Server
- Apache 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
4Project 2 Database and the Web (contd)
- Main Pages and Web Flow online interaction with
a music database - P1
- P2
- P3
- P4
- P5
- All HTML pages dynamically generated from
Servlets (except P1)
5Java Servlet Request Processing
Client
http//landfair.seas.ucla.edu8080/Copycat.html
Browser
Tomcat App. Server
HTTP Server
HTML
Internet
JVM
servlet/Copycat
Copycat.class
http//landfair.seas.ucla.edu8080/servlet/Copycat
gt HOME/tomcat/webapps/ROOT/WEB-INF/classes/Co
pycat.class
6Other 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.
7CGIs 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
8Communicate with Java Servlet with FORMS
- FORMS are defined in HTML pages as
- ltform methodget actionservlet/Copycatgt
- ltinput typetext name some_text size 40gt
- ltinput typesubmit value"Submit"gt
- lt/formgt
- Actions send request to a HTTP server
- Two common methods POST and GET
9Forms Method GET and POST
- GET Data is sent to the server appended to the
URL - can only send a small amount of information
- The exchanged data are displayed in the URL as
well - http//landfair.seas.ucla.edu8080/servlet/Copyc
at?some_texttest - The URL can be bookmarked
- POST Data is sent to the server in a separate
message - with unlimited length of data, and the exchange
is invisible to the user - Secure (e.g., for credit card numbers)
- Cant boomark
10Forms INPUT
- Input tags are used to place many form elements
- Input tags have several types
- textbox
- textarea
- checkbox
- radio
- dropdown
- filebox
- The name and value of of the input is like a pair
of (parameter-name, parameter-value) - No end tag
11Forms Buttons
- Simple push-down controls
- 3 flavors
- ltinput typesubmitgt cause all form data to be
sent to the server - ltinput typeresetgt cause the form data to be set
to the default - ltinput typebuttongt used for JavaScript
- Button images can also work as a submit button
- ltinput typeimage srccoolbutton.gif
namecoolbuttongt
12Forms hidden
- Send the information to the server and the user
will not notice - Normally used to send control information to the
server process - ltform actionservlet/showAlbumgt
- ltinput typehidden namealbumname valuechokegt
- ltinput typeresetgt ltinput typesubmitgt
- lt/formgt
13What a Servlet Does
- Process requests from clients
- doGet process get request
- doPost 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.getInputStrea
m () - ServletOutputStream out response.getOutputSt
ream ()
14Structure of a ServletHelloWorld
- 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("lthtmlgt")
- out.println("ltbodygt")
- out.println("ltheadgt")
- out.println("lttitlegtHello
World!lt/titlegt") - out.println("lt/headgt")
- out.println("ltbodygt")
- out.println("lth1gtHello World!lt/h1gt")
- out.println("lt/bodygt")
- out.println("lt/htmlgt")
Client Side lthtmlgt ltbodygt ltheadgt lttitlegtHello
World!lt/titlegt lt/headgt ltbodygt lth1gtHello
World!lt/h1gt lt/bodygt lt/htmlgt
http//landfair.seas.ucla.edu8080/servlet/HelloWo
rld
15Fundamental 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
16Get Parameters
- Sample forms
- ltform methodpost actionservlet/Copycatgt
- ltinput typetext name some_text size 40gt
- ltinput typehidden name songname
valuenaturalgt - ltinput typesubmit value"Submit"gt
- lt/formgt
- Process it in a Servlet
- String method request.getMethod () // e.g.
post - String some_text request.getParameter
(some_text") - String songname request.getParameter
(songname")
17Sample Parameter Handling
Copycat.html
From the web
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("lthtmlgt") out.println("ltheadgt
") String title "Copycat Servlet"
out.println("lttitlegt" title "lt/titlegt")
out.println("lt/headgt")
out.println("ltbody bgcolorwhitegt")
out.println("lth1gt" title "lt/h1gt")
String studentSaid request.getParameter("some_te
xt") out.println("The student said "
studentSaid "ltbrgt") out.println("lt/body
gt") out.println("lt/htmlgt")
Modify and add your JDBC stuff!
18JDBC Dynamic Queries
- Prepared statement allows queries to be compiled
and executed multiple times with different
arguments - PreparedStatement pStmt conn.prepareStatemen
t( - select albumname from album where year ?
and musicianName ? ) - pStmt.setInt(1, 1990)
- pStmt.setString(2, BJork")
- pStmt.executeQuery()
19Java 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 you - Two 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.edu8080/
- Servlet http//landfair.seas.ucla.edu8080/servle
t/ -
20Tomcat
- 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.apach
e.org - Besides Tomcat, there are other systems that
support servlet - Allaire jrun, IBM Websphere, Bea WebLogic,
Borland AppServer, Oracle App Server
21Setup 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
22Configure Tomcat Ports
- Modify HOME/tomcat/conf/server.xml file
- Connector port
- Server port"8005" shutdown"SHUTDOWN" debug"0"gt
gt - Server port"11033" shutdown"SHUTDOWN"
debug"0"gt - Server Port
- ltConnector className"org.apache.coyote.tomcat4.Co
yoteConnector" port"8080 gt - ltConnector className"org.apache.coyote.tomcat4.Co
yoteConnector" port11034
23Startup and Shutdown Tomcat
- Startup tomcat
- startup.sh ?
- Stop tomcat
- CtrC on your tomcat running screen
- If you run tomcat on background, run
- shutdown.sh ?
- Open another window for your coding
- Always shut down your tomcat before you log out
24Test 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//ltmachinenamegtltportgt/ltfilenamegt.htmle.g.
http//landfair.seas.ucla.edu11256/Copycat.html
25Debug Your Code
- Servlet not easy to debug!
- Return status code
- sendError method in class HttpResponse
- Log errors written into servlet log file
- public void servletContext.log(string msg)
- public void servletContext.log(Exception e,
String msg)
26Debug Your Code Common Status Codes
- Constant Code Meaning
- SC_OK 200 client request successful
- SC_NO_CONTENT203 the request succeed, but
without new response to return - SC_NOT_UNAUTHORIZED401 unauthorized
- SC_NOT_FOUND 404 not found on the server
- SC_INTERNAL_SERVER_ERROR 500 the servlet is
wrong
27What 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____
28Extra 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
- ltalbumsgt
- ltalbumgt
- ltalbumnamegtChokelt/albumnamegt
- ltmusiciannamegtlt/musiciannamegt
-
- lt/albumgt
-
- lt/albumsgt
29Whats XML
- XML EXtensible Markup Language
- A W3C standard widely accepted
Similarity between HTML both are markup
languages
- Difference from HTML
- Its extensible a framework to define mark-up
languages - Separate syntax from semantics.
- XML XSLT HTML
30A Sample XML Document
ltordersgt ltorder id"1" itemcount"3"gt
ltcustomer id"100"gt
ltlastnamegtSkonnardlt/lastnamegt
ltfirstnamegtAaronlt/firstname
ltphonegt(888)888-8888lt/phone lt/customergt
ltitem id"5000" type"software"gt
ltmanufgtMicrosoftlt/manufgt
ltpnamegtMicrosoft Money 99lt/pnamegt
ltpricegt39.99lt/pricegt ltquantgt1lt/quantgt
lttotalgt39.99lt/totalgt lt/itemgt
lt/ordergt lt/ordersgt
starting tag
ending tag
31HTML Editors
- Microsoft Frontpage/Word
- Dont 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
32Documentations
- Java Servlet APIs
- DB2 Documentation
- SQL Reference
- Java APIs
- HTML Beginners Guide
- Daves HTML Guide
- HTML 4.0 Reference
33Project 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
34Two 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 - jdbcdb2studbw, (if you login to westholme), or
- jdbcdb2studbn, (if you login to lindbrook), or
- jdbcdb2studbl, (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
- jdbcdb2//landfair.seas.ucla.edu/studbw, or
jdbcdb2//landfair.seas.ucla.edu/studbn, or
jdbcdb2//landfair.seas.ucla.edu/studbl. - i.e., the hostname is always landfair.seas.ucla.ed
u no matter which machine you login. The database
name still corresponds to the machine you login.
35Project 2 3-Tier Architecture
Application/HTTP Server (Tomcat)
36Project 1 2-Tier Architecture
JDBC
Network
37Good Luck!
- Start early!
- Great experience for your career!