AIT 618 Fall, 2001

Detailed Task List

ImageUpload

[Learnonline Website]

Task ID	Title	Task Type	Points	Due
image	ImageUpload		4	TBA

JSP Image Upload application: imageupload.jsp

1. These are the source and class files for your application. (To save them to your hard drive use <RIGHT CLICK>Save Target As ...

   • imageupload.jsp
   • Upload to /WEB-INF/classes/ ImageInfo.class
   • Upload to /WEB-INF/lib/ multipartrequest.jar

2. In WebAppCabaret file manager, create a folder named image and upload imageupload.jsp

   The following links show this application running in the fontanini context website.

   http://www.webappcabaret.com/fontanini/image/imageupload.jsp

Assignment:

1. Create the MySQL image table with this definition:

   CREATE TABLE image ( imageid INT(6) DEFAULT '0' NOT NULL AUTO_INCREMENT PRIMARY KEY, filesuffix CHAR(4), description VARCHAR(80), width SMALLINT, height SMALLINT, userid CHAR(10) NOT NULL, datestamp DATETIME DEFAULT '0000-00-00 00:00:00' NOT NULL);

   The DATETIME type is used when you need values that contain both date and time information. MySQL retrieves and displays DATETIME values in 'YYYY-MM-DD HH:MM:SS' format. The supported range is '1000-01-01 00:00:00' to '9999-12-31 23:59:59'.

   The TIMESTAMP column type provides a type that you can use to automatically mark INSERT or UPDATE operations with the current date and time. We will not use this since we want the date-time of the original file upload and not the date-time of the last UPDATE operation.

   You can obtain the current date and time using this code:

   // Format the current time // using the timezone of webappcabaret.com PDT SimpleDateFormat formatter = new SimpleDateFormat ("yyyy-MM-dd HH:mm:ss"); String dateString = formatter.format(new Date());

   The imageid is generated automatically each time a row is inserted into the image table. Note that the imageid is not explicitly inserted into the record. It is assigned automatically.

   After inserting the image data into the table, your application must find out the imageid. This imageid will become the name of the file that is saved into the /upload directory (instead of the hard-coded example "1234").

   Here is how to obtain the imageid value which was assigned by MySQL during the last INSERT query.

   <%=((org.gjt.mm.mysql.Statement)stmt1).getLastInsertID()%>

   An explanation follows: If the DBTAGS statement id is "stmt1", <sql:statement id="stmt1"... , this corresponds to a variable named stmt1 which is a JDBC Statement object. This Statement object is actually an instance of a Mark Matthews driver subclass org.gjt.mm.mysql.Statement. By casting the statement to that class, we can call the method getLastInsertID() which is a MySQL method, not provided in the standard JDBC API.

2. This assignment requires you to use the source code standards at java.sun.com Code Conventions for the Java Programming Language

3. Break up the original indexupload.jsp into the following separate JSP files:

   index.jsp

   This is the application main page. This page has the following:

   • an upload form with a submit button
   • View the images (provide a link to table.jsp)

   upload.jsp

   This page actually uploads the image

   Uploaded images are saved in the /upload directory with the file name the same as the auto_increment value of imageid. The file name must have a file suffix corresponding to the type of image uploaded (.gif, .jpg .png)

   If an error occurs, print an error page with a suitable message. The user can use their browser "BACK" button to return to the form, but the error page should also provide a link back to index.jsp. After uploading the image, show the image information. To avoid needless duplication of code, do this by using the JSP directive for run-time page include:
   <jsp:include page="view.jsp" flush="true" >

   table.jsp

   This page produces a table of information with links to each image.

   • The table must have column headings with a short description of the column.
   • Table rows ordered by imageid (same as date-time) so it shows the images in the order they were uploaded.
   • For each image, show:
     • Date-time
     • Userid
     • Description
     • Filename, for example: 123.jpg
     • Width and Height of image, for example: 240 x 380
     • Description.

       Description will have a hypertext link to view.jsp This hypertext link will use a query string ?id=1234 to identify the imageid. view.jsp will fetch any other information it needs directly from the image table using the id value.

       If Description is null, substitute Unknown so there will be some text for the hypertext link.

   • Link to index.jsp

   view.jsp

   This page displays one image along with its detail information arranged in a table.
   The table will show:

   • Date-time of upload
   • User Name
   • Description
   • Filename, for example: 123.jpg
   • Width and Height of image, for example: 240 x 380
   • The image with the image tag <IMG SRC=

     The image tag must have the following IMG attributes:

     • HEIGHT and WIDTH
     • ALT -- use the description from the database
   • Link to index.jsp
   • Link to table.jsp

1. See requirements in this task description.
2. Show the running application to your instructor during lab.