Collaborative Picture Gallery Project Presentation

1. Collaborative Picture GalleryProject Presentation Amos Hersch Aviad Barzilai Supervisor Maxim Gurevitch Lab Chief Eng. Ilana David

2. Outline • Introduction • Work Summary • Abstract Gallery Structure • Three Tier Architecture • Presentation Layer • Business Logic Layer • Data Access Layer • Class Diagram • Screenshots • Summary & Looking Ahead

3. Introduction • The Collaborative Picture Gallery is an implementation of a web picture gallery. • The CollaborativePicture Gallery is based on the WEB 2.0 approach, which aims to enhance creativity, information sharing, and, most notably, collaboration among users. • In short, our system will bring the “wiki” world, where everyone contributes and shares information, to the photo album world.

4. Work Summary • Designing a layer approach for the web application Issue: Easily connecting between the GUI and the data infrastructure. Solution: The system was designed using the 3 tier architecture. • Version management Issue: Maintaining different versions for each item. All changes to the system should be temporary unless approved by the administrator. Solution: Changes are kept in logs, and the system dynamically replays these logs upon object requests. The administrators can commit and revert actions.

5. Work Summary (continued) • Supporting multiple actions Issue: Designing the system so that actions, such as renaming an album, can be easily added. Solution: Actions are described using XML and are dynamically loaded into instances. To create a new system action, a new action class should be created and the system will automatically identify it. • Designing the user administration Issue: How to identify a user and what are the allowed actions for each user. Solution: Each user is identified using a sequence ID, which is randomly generated on each login. Users can have restricted access.

6. Work Summary (continued) • Synchronization between users Issue: Multiple users can update the same item simultaneously. Solution: Logs are locked and synchronized between different requests. The system maintains versions for each item and validates that users are manipulating the most recent version. • Template infrastructure Issue: Designing and building an infrastructure for dynamic web pages based on templates. Solution: We have designed and implemented an infrastructure for XML based template web sites.

7. Root directory Album 1 Album 2 Album 3 Album 4 Meta Data Album 4 Log Album 5 Meta Data Album 5 Log Album 4 Album 5 Image 1 Meta Data Image 1 Log Image 1 File Abstract Gallery Structure

8. Presentation Layer Entry Point Template Builders /index.html html Business Logic Layer Album & Image Managers Data Access Layer Log & Meta wrappers File System Three Tier Architecture The Collaborative Picture Gallery’s architecture is known as the “Three Tier Architecture” and is formed by the usage of several layers interfacing between them.

9. Response Maker Entry Point Error Handler Command Runner Sxml Template builder Album builder BLL Presentation Layer The presentation layer connects between the user's HTTP request and the business logic layer. The presentation layer is invoked by the web server and is in charge of basic start functions and template processing. To make the system more robust, the GUI is built from XML files and templates.

10. Presentation Layer (continued) • <?xml version='1.0' encoding='UTF-8'?> • <template name='maintmpl'> • <mode name='default' type='default'> • <template> • <data file='/!templates!/organic/index.html' /> • </template> • <parts> • <part id='ptitle' type='string'> • <param file='/parts/title.string' /> • </part> • <part id='username' type='varstring'> • <param>username</param> • </part> • <part id='loginoutlink' type='string' requsrid='1'> • <param file='/parts/login.link.string' /> • </part> • <part id='psub-menu' type='string'> • <param file='/parts/sub-menu.string' /> • </part> • <part id='pcontent' type='string'> • <param file='/parts/index.sxml.content.string' /> • </part> • <part id='albumshell' type='albumshell'> • <param file='/parts/index.album.shell.topics.string' /> • <param file='/parts/index.album.shell.images.string' /> • </part> • <part id='album' type='album'> • <param file='/parts/index.album.topic.row.tmpl' /> • <param file='/parts/index.album.admin.topic.row.tmpl' /> • <param file='/parts/index.album.topic.empty.row.tmpl' /> • </part> • <part id='uploadimage' type='string'> • <param file='/parts/upload.image.string' /> • </part> • </parts> • </mode> • </template> Build using HTML templates Validate authentication Globally or for each part Build parts dynamically Inserted into comments

11. Presentation Layer Actions Ajax Command Runner Account Manager Create Action Album Manager Image Manager Delete Action Rename Action … DAL Business Logic Layer The business layer incorporates most of the systems activities. BLL modules are activated and used by the presentation layer and information is retrieved from the DAL.

12. Business Logic Layer (continued) • Using Ajax • Ajax (asynchronous JavaScript and XML), or AJAX, is a group of interrelated web development techniques used for creating interactive web applications or rich Internet applications. • With Ajax, web applications can retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing page. • Communicate commands in the background • Everything is a file (same authentication)

13. Describe Action Delete Action Rename Action Rotate Action Logged Item Manager Image Manager Album Manager Action Business Logic Layer (continued) • Actions • Each action can be executed on a logged item. • Actions can be added by simply implementing the sub class required, and dropping it in the imports directory. • Actions are done on virtual objects and can only be committed permanently by the administrator.

14. Business Logic Layer Log Wrapper Meta Data Wrapper Image (PIL) SXML File Wrapper File Manager Cross Lock Data Access Layer The Data Access Layer is the only layer that has direct access to the file system. The system stores information in XML files which are divided into Log Files and Meta Data.

15. SEPERATION_STRING <ACTION type='RenameAction' version=23 user=‘Moshe'> <PARAM>New Album Name</PARAM> </ACTION> SEPERATION_STRING … Data Access Layer (continued) Log files • changes are not made physically on the items, they are just written into the log files. • After an admin reviews the proposed changes the layer commits the approved changes permanently.

16. Data Access Layer (continued) Synchronization • The system will verify that the user had the most recent version before requesting a change. • This check is done by sending the version number of each object to the user, when given, and back to the server, when a change is requested. • Log files are locked when reading and / or writing. • We have implemented a cross platform lock module (Cross Lock). On windows, the file locking is done by using a named system mutex and on UNIX the file locking is done by using the flock mechanism, which is a part of the fcntl module.

17. Describe Action Delete Action Logged Item Manager Meta Data Wrapper Rotate Action Rename Action Album Builder Global Action Response Maker Error Handler Global Error Handler Command Runner Request Data Cache Account Manager Sxml Parser File Manager Log Wrapper Sxml Template Builder Cross Lock Xxml Parser Ajax Command Runner Image Manager Album Manager Action PIL Html Parser Class diagram Entry Point

18. Screenshots Create your own album or share existing ones

19. Screenshots (continued) Users can edit

20. Screenshots (continued) Admin can commit / revert

21. Screenshots (continued) Online image manipulation

22. Summary & Looking Ahead • The collaborative picture gallery project's main goal was building a reliable back end, which will allow multiple versions of multiple objects, shared among users. • The system's back end is extremely strong and very easily updated to support more actions and image manipulations. • We have set the path for many additional UI options by adding AJAX and by implementing the template infrastructure on our own. • The system's next version should include a good caching mechanism, to improve performance, and the UI should be updated with more image features.