CSCI399
Autumn Session, 2009
Assignment 3: PHP
You should complete exercise 3 before atempting this assignment.
This assignment aims to introduce you to PHP application development and to the mechanisms that allow "state" to be maintained in a web application.
The objectives are for you to:
You are to develop a "Photo Montage" application using PHP.
This application is to be used by children (with lots of help from parents) to create photo montages. These montages have a background picture that is uploaded by the user - it will be a picture of the child's room, or home, or scene in a park. The application allows this background to be overlayed with multiple stock images of favorite friends - Pooh, Piglet, Bart Simpson, Little Kitty, ... These stock images are placed on the background picture and can be subsequently re-scaled or have their positions slightly adjusted.
The following screen shots illustrate the stages by which a photo montage is assembled.
The "Welcome Page" for the web site is a file upload form that is used to select a background image file on some storage device on the user's own computer.
The page that is returned in response to a successful upload is the "Add Overlay" form page. This shows the current picture - which will consist of the background image and superimposed overlays (there are of course no overlays when the picture is first up-loaded). Below the picture, there will be a set of reduced size images for the set of "friends" that can be added to the picture. The form should work by having the user select one of the overlays and then clicking the image at the position where the additional overlay is to appear.
The page that is returned in response to a successful add overlay step is a form that allows either for adjustment of the position and size of the most recently added overlay or return to the "add overlay page". The form offers two operations - adjustment of most recent overlay, switch back to the add page. There are three adjustments possible - scale, left- right movement, up-down movement.
The following image shows the results of several "enlargement" requests and some minor repositioning operations:
Subsquent image additions resulted in the following:
Do not generate and store composite images (photo montages). The HTML pages that you return should have a <img src='./ComposeImage.php' /> link. The ComposeImage.php script sets the return type to image/png and creates image data by combining the background image with the various overlays that have been specified.
You do have to store the uploaded background image. You have a number of choices - none of them very good!
The first approach risks the application requiring a large amount of memory. Your hundreds of concurrent users will all have large state data with their background images. When they leave your site, the session timeout clock will in effect start - when it times out, the state data including the image will be deleted. But there is the possibility of running out of space for all that state data.
The second approach creates the problem of a collection of discarded temporary files. PHP's session timeout isn't going to delete them. You would need a regularly scheduled chron job to delete old background images.
The third approach has the same problems as the second, and in this case has no advantages.
(I chose the second approach, saving background images to files in a directory that I cleared out regularly.)
You will store the available overlays in an images directory associated with your PHP application. They will need to be PNG images with alpha channels identifying transparent areas.
The data specifying an overlay consist of its identifier, and x, y coordinates for its position. Different overlay images obtained from the Internet are likely to vary in size. You should arrange that they are all scaled to approximately the same size (e.g. 100 pixels high, width may vary a little) when first added to the image. Their sizes and positions can subsequently be varied through the picture adjustment form page.
Your state data:
The images in this assignment specification are from my prototype solution - yours needs to be a little more sophisticated!
Exploit a CSS style sheet to enhance the appearance of the pages that you generate.
Try to provide somewhat cleaner and clearer interaction with the user.
You should be able to implement a more sophisticated approach to adjustments of overlays. My scheme allows for adjustments to the overlay most recently added - but really you should give the user some means of selecting the overlay that they wish to reposition.
There are a few transparent PNG images in /share/cs-pub/399/A3. You can use the GIMP editor on Ubuntu to create others from suitable source images - flatten image, add alpha channel, selection by colour - click in a background area, clear background, convert to indexed colour (Mode menu) and save.
As with assignments 1 and 2, you will submit a report on your work for assessment. This should be a word processed document converted to PDF format.
Your report should have sections with the listing of your PHP scripts (and static HTML and CSS files), and an image record illustrating the stepwise composition of photo montages.
For this assignment you submit your work using the command:
turnin -c csci399 -a 3 A3.pdf
As always, late submissions are possible for a few extra days; in this case they will take the form:
turnin -c csci399 -a 3late A3.pdf
Marks