project 2 database and the web n.
Skip this Video
Loading SlideShow in 5 Seconds..
Project 2: Database and the Web PowerPoint Presentation
Download Presentation
Project 2: Database and the Web

Loading in 2 Seconds...

play fullscreen
1 / 37

Project 2: Database and the Web - PowerPoint PPT Presentation

  • Uploaded on

Project 2: Database and the Web. Hyun J. Moon and Carlo Zaniolo University of California, Los Angeles CS143, Fall 200 4. Project 2: Database and the Web. L earn how to design web pages that interact with a database Due on Dec 7 th (Tuesday) Techniques:

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

Project 2: Database and the Web

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
project 2 database and the web

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 web1
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
project 2 database and the web cont d
Project 2: Database and the Web (cont’d)
  • 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
project 2 database and the web cont d1
Project 2: Database and the Web (cont’d)
  • 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)
java servlet request processing
Java Servlet Request Processing




App. Server









other dynamic web environment
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
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
Communicate with Java Servlet with FORMS
  • FORMS are defined in HTML pages as:

<formmethod=get action=servlet/Copycat>

<inputtype=text name = some_text size = 40>

<inputtype=submit value="Submit">


  • Actions: send request to a HTTP server
    • Two common methods: POST and GET
forms method get and post
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

    • 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)
    • Can’t boomark
forms input
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
forms buttons
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
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>


what a servlet does
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.getInputStream ();

ServletOutputStream out = response.getOutputStream ();


Structure of a Servlet:HelloWorld


import javax.servlet.*;

import javax.servlet.http.*;

public class HelloWorld extends HttpServlet {

public void doGet(HttpServletRequest request, HttpServletResponse response)

throws IOException, ServletException



PrintWriter out = response.getWriter();




out.println("<title>Hello World!</title>");



out.println("<h1>Hello World!</h1>");





Client Side:




<title>Hello World!</title>



<h1>Hello World!</h1>



fundamental parts of a servlet
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
Get Parameters
  • Sample forms:

<formmethod=post action=servlet/Copycat>

<inputtype=text name = some_text size = 40>

<inputtype=hidden name = songname value=“natural”>

<inputtype=submit value="Submit">


  • 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
Sample Parameter Handling


From the web

public class Copycat extends HttpServlet {

public void doGet(HttpServletRequest request, HttpServletResponse response)

throws IOException, ServletException



PrintWriter out = response.getWriter();



String title = "Copycat Servlet";

out.println("<title>" + title + "</title>");


out.println("<body bgcolor=white>");

out.println("<h1>" + title + "</h1>");

String studentSaid = request.getParameter("some_text");

out.println("The student said: " + studentSaid + "<br>");





Modify and add your JDBC stuff!

jdbc dynamic queries
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");


java servlet at seas
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)



  • 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:
  • Besides Tomcat, there are other systems that support servlet:
    • Allaire jrun, IBM Websphere, Bea WebLogic, Borland AppServer, Oracle App Server
setup tomcat on seasnet
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
configure tomcat ports
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 and Shutdown Tomcat
  • Startup tomcat:
    • 
  • Stop tomcat:
    • Ctr+C on your tomcat running screen
    • If you run tomcat on background, run
    • 
  • Open another window for your coding
  • Always shut down your tomcat before you log out
test servlet
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/ to:
    • ${HOME}/tomcat/webapps/ROOT/WEB-INF/classes/
  • Compile your Java file:
    • javac
    • If httpServlet error happened, you must have not source all.env
  • Open your URL:
    • http://<machinename>:<port>/<filename>.htmle.g.:
debug your code
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)
debug your code common status codes
Debug Your Code – Common Status Codes


  • 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
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
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:







what s xml
What’s XML
  • XML: EXtensible Markup Language
  • A W3C standard widely accepted

Similarity between HTML:

both are markup languages

Difference from HTML:

  • It’s extensible: a framework to define mark-up languages
  • Separate syntax from semantics.
    • XML +XSLT = HTML
a sample xml document
A Sample XML Document

starting tag


<order id="1" itemcount="3">

<customer id="100">





<item id="5000" type="software">


<pname>Microsoft Money 99</pname>







ending tag

html editors
HTML Editors
  • Microsoft Frontpage/Word
    • Don’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
  • Java Servlet APIs
  • DB2 Documentation
  • SQL Reference
  • Java APIs
  • HTML Beginners Guide
  • Dave’s HTML Guide
  • HTML 4.0 Reference
project seasnet account
Project SEASNET Account
  • 3 machines to login
  • To decide which machine you need to login: LAST_2_DIGITS_OF_YOUR_STUDENT_ID mode 3
two options for jdbc driver
Two Options for JDBC Driver
  • Option I. use .app. driver instead of .net. driver, e.g.:
    • Class.forName(""); 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("");
    • but use the JDBC URL as:
      • jdbc:db2://, or jdbc:db2://, or jdbc:db2://
    • i.e., the hostname is always no matter which machine you login. The database name still corresponds to the machine you login.
project 2 3 tier architecture
Project 2: 3-Tier Architecture





HTTP/Application Specific Protocol






Server (Tomcat)

project 1 2 tier architecture
Project 1: 2-Tier Architecture








good luck
Good Luck!
  • Start early!
  • Great experience for your career!