project 2 database and the web
Download
Skip this Video
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


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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
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

Client

http://landfair.seas.ucla.edu:8080/Copycat.html

Browser

Tomcat

App. Server

HTTP

Server

HTML

Internet

JVM

servlet/Copycat

Copycat.class

http://landfair.seas.ucla.edu:8080/servlet/Copycat=>

${HOME}/tomcat/webapps/ROOT/WEB-INF/classes/Copycat.class

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:

  • 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

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 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
    • : cause all form data to be sent to the server
    • : cause the form data to be set to the default
    • : used for JavaScript
  • Button images: can also work as a submit button
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

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 ();

slide14
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("");

out.println("");

out.println("");

out.println("Hello World!");

out.println("");

out.println("");

out.println("

Hello World!

");

out.println("");

out.println("");

}

}

Client Side:

Hello World!

Hello World!

http://landfair.seas.ucla.edu:8080/servlet/HelloWorld

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:

  • 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

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("");

out.println("");

String title = "Copycat Servlet";

out.println("" + title + "");

out.println("");

out.println("");

out.println("

" + title + "

");

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

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

out.println("");

out.println("");

}

}

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");

pStmt.executeQuery();

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)

HTML: http://landfair.seas.ucla.edu:8080/

Servlet: http://landfair.seas.ucla.edu:8080/servlet/

tomcat
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
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
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:
startup and shutdown tomcat
Startup and Shutdown Tomcat
  • Startup tomcat:
    • startup.sh 
  • Stop tomcat:
    • Ctr+C 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
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/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://:/.htmle.g.: http://landfair.seas.ucla.edu:11256/Copycat.html
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

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

Choke

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

Skonnard

Aaron

(888)888-8888

Microsoft

Microsoft Money 99

39.99

1

39.99

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
documentations
Documentations
  • 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
      • 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
two options for jdbc driver
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
Project 2: 3-Tier Architecture

JDBC

Database

Server

Servlets

HTTP/Application Specific Protocol

Network

Client

Client

Client

Application/HTTP

Server (Tomcat)

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

Database

Server

Client

Client

Client

JDBC

Network

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