CPS616 Homework Assignment No.4

Image Repository using JavaScript and DHTML

Contents

Introduction
- Baseline
- Resources
Design
Baseline of Homework
For this assignment, you are to write a JavaScript-enhanced HTML document. You may choose an example that tries out several JavaScript and DHTML features, such the following:
- writing an example that uses DHTML to define several layers with objects that may move. Your example should respond to some events, such as onClick, onSubmit, etc.
- Write an example that uses JavaScript to either compute results from form fields or verify that the input data has a particular form. For testing purposes, you may choose to use a simple CGI script in the ACTION attribute of the form tag such as:
  http://carver.npac.syr.edu:3768/reference-cgi/examples/util/post-query
  or you may write a simple servlet that returns a response to your form.
- You should also conside what you want to do for a final project. One specific idea is to make a dynamic menu frontend page to a database system. For this homework, you could make a page which contacted a servlet to get directory or content information and put up a menu, such as the one found here:
  http://www.npac.syr.edu/DC
  The code for the drop menus is:
  /usr/local/archives/public/html/.
  There are two files:
  drop.js and droparray.js.
  Then for your project, you could expand on this to make the servlet actually fetch the information from a database, and expand the frontend to provide a database access page.
Back to Top Page

Resources
- JavaScript Resource
- Write JDBC on carver using Oracle 8 driver
- NPAC's JDBC resources page
  - SQL tutorials
  - The Sun JDBC tutorial
- NPAC's Java resource page for the JDBC API, which is under JDK1.1 API in the package java.sql.
Back to Top Page

About the Problem

About the Program

Image Repository is a sample application implementing client side interface using Javascript and DHTML as frontend. (Server side Database backend is to be implemented in the final project.)

The program consists of three distinct modules:

First is the Image Repository frontend module -- ImgRepository.html , which offers an interface for students to query on image components information;

The second module is the middle-layer Java Servlet -- Control , which offers communication between client and server.

The third module is the Database Access backend -- myDatabase , which performs database access through JDBC and sends back query results to client applet for display.

Back to Top Page

Client Interface

ImgRepository is the interface which provides Query for online accessing Image Components Database. User can choose image components by providing information about type and color. The Query will be post to server through Java Servlet. Database access operation is done at server side and matched image components will be sent back to client.
The top lever interface is a window, which consists of three frames:
leftlist (which implements sliding menu),
banner (which implements dynamic images toggle), and
main (which is used for display image components).

EventHandler message are delivered by passing parameters in fucntions, between the above three frames.

Back to Top Page

Database Backend

myDatabase implements methods to access the Oracle database via JDBC. The API includes open and close connection to database, executeSQL for executing query commands and getRecord for returning multiple records that matches the query. Vector object is used to hold multiple Hashtables as elements, where each record is held by a hashtable. As each query is packaged into a string object that deliverd to execution method. so all of the database access methods in ControlPanel take executeSQL and getRecord as the underline methods. And it is very flexible to expand the functions of query based on this scheme.
I use oracle.jdbc.driver.OracleDriver to connect to the Oracle database on Carver. The database access of my program is actually done all on server side using the above JDBC driver.

Back to Top Page

Source
- Source Code :
  ImgRepository.html
  banner.html
  leftlist.html
  main.html
- Demo :
  Running the program
Back to Top Page

Demo

The demo applet works with Netscape Communicator versions 4.5, 4.04 with AWT 1.1 patch and 4.05 with AWT 1.1 patch on Solaris machines. To run the demo Click here .

Back to Homework Page