1. Collaborative Picture Gallery Project 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 Collaborative Picture 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. Abstract Gallery Structure Root directory Album 1Album 2Album 3 Album 4 Meta Data Album 5 Meta Data Album 4 Log Album 5 Log Album 4Album 5 Image 1 Meta Data Image 1 Log Image 1 File

8. Three Tier Architecture Presentation Layer Entry Point Template Builders /index.html html Business Logic Layer Album & Image Managers File System Data Access Layer Log & Meta wrappers 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. 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. Error Handler Command Runner Entry Point Sxml Template builder Album builder BLL Response Maker

10.   username  Presentation Layer (continued) Build using HTML templates Validate authentication Globally or for each part Build parts dynamically Inserted into comments

11. 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. Image Manager DAL Presentation Layer Album Manager Actions Rename Action Create Action Delete Action … Account Manager Ajax Command Runner

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. 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. Action Describe Action Delete Action Rename Action Rotate Action Logged Item Manager Image Manager Album Manager

14. 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. Image (PIL) Meta Data Wrapper Business Logic Layer File Manager Log Wrapper SXML File Wrapper Cross Lock

15. 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. SEPERATION_STRING New Album Name SEPERATION_STRING …

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

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.