Project 2: Database and the Web

1
Project 2Database and the Web

• Hyun J. Moon and Carlo Zaniolo
• University of California, Los Angeles
• CS143, Fall 2004

2
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 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

3
Project 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

4
Project 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)

5
Java 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
6
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.

7
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

8
Communicate 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

9
Forms 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

10
Forms 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

11
Forms 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

12
Forms 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

13
What 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 ()

14
Structure 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
15
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

16
Get 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")

17
Sample 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!
18
JDBC 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()

19
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 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/

20
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.apach
  e.org
• Besides Tomcat, there are other systems that
  support servlet
• Allaire jrun, IBM Websphere, Bea WebLogic,
  Borland AppServer, Oracle App Server

21
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

22
Configure 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

23
Startup 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

24
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//ltmachinenamegtltportgt/ltfilenamegt.htmle.g.
  http//landfair.seas.ucla.edu11256/Copycat.html

25
Debug 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)

26
Debug 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

27
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____

28
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
• ltalbumsgt
• ltalbumgt
• ltalbumnamegtChokelt/albumnamegt
• ltmusiciannamegtlt/musiciannamegt
• lt/albumgt
• lt/albumsgt

29
Whats 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

30
A 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
31
HTML 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

32
Documentations

• Java Servlet APIs
• DB2 Documentation
• SQL Reference
• Java APIs
• HTML Beginners Guide
• Daves HTML Guide
• HTML 4.0 Reference

33
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
34
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
• 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.

35
Project 2 3-Tier Architecture
Application/HTTP Server (Tomcat)
36
Project 1 2-Tier Architecture
JDBC
Network
37
Good Luck!

• Start early!
• Great experience for your career!