Description
Goals:
In this assignment you will learn about CGI protocol, Perl, and Cookie management using CGI. You will learn
how to use JavaScript to change DOM, and form checking before submission.
You will also learn about PerlCGI.pm module.
Problem Statement:
You will create a website for uploading and viewing photos using CGI and Perl. It willsupport functionality for
adding/deleting/viewing photos . Your program will be hosted on a web server to
provide photo upload and viewing functionalities.
Functionalit\:
You are required to support the following functionality.
Photo Folder
The site willsupport a single folder where all the photos will be uploaded. Your CGI program will
create a directory named “MyPhotos”.
It will provide functionality to add/delete/view photos.
[F1]. Photo Upload Function
Upload a Photo file:
You should provide the following:
Form elements for specifying
Photo Description (100 characters,) and
Photo file upload (file browsing menu).
You should check whether the file being uploaded is indeed an image. You should use JavaScript to
this checking.
You should at least support the following file types:BMP, JPEG, GIF
You should provide one submit button to submit the selected photo file.
[F2] Photo View/Deletion Function
This menu option would support viewing of photos.
It would displa\ thumbnail of the photo along with the slide show functionalit\ and photo
displa\ functionalit\ similar that you implemented in Assignment 2.
You should provide mechanism to select a photo for deletion.
Implement the above functionality using files to store information such as photo descriptions.
2/29/12 Assignment #3
www-users.cselabs.umn.edu/classes/Spring-2012/csci4131/Assignments/«/assignment3.html 2/2
Design Guidelines:
1. Please name the directory where you will upload the photos as ³MyPhotos´.
a. You should create this directory in the current working directory.
b. In Perl, you can obtain the current working directory through the ³getcwd´ command.
2. Use JavaScript to ensure that only image files are selected for upload.
a. You should at least support the following file types:BMP, JPEG, GIF.
3. For the enabling Slideshow functionality you will need to embed JavaScript in form that will be generated
by CGI.
Menus:
Below we present the various menu options that you need to define as part of various forms.
ViewMenu will be the first menu to be displa\ed b\ \our program.
ViewMenu: This would provide form elements for the F2 functionalit\ described above.
– Display Photo thumbnails
– Slideshow functionality.
– Photo delete button- to support deletion of one or more photos by selecting a checkbox with the photo
in thumbnail view
and then pressing “Delete” button.
– A button to “Refresh View”, to be used after uploading or deleting photos.
– An “Upload” button. Clicking it would pop a new window with the Upload menu described below.
Upload Menu: This would provide form elements for the F1 functionalit\ described above.
Resources:
– CGI Tutorial on CS Web Page
– CGI PM
– DOM Reference
– DOM Interfaces
Submission Instructions:
Include the following files in your submission:
CGI files and HTML files, and a README files.
In a README indicate the following things:
x Your Student Name and ID
x How to run your code.
Submit the tarred directory containing all these files.
