Project 2 database and the web
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

PowerPoint Slideshow about ' Project 2: Database and the Web ' - latika

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!