Collaborative Picture Gallery

Project Presentation

Amos HerschAmos HerschAviad BarzilaiAviad Barzilai

SupervisorSupervisorMaxim GurevitchMaxim Gurevitch

Lab Chief EngLab Chief Eng..

Ilana DavidIlana David

Outline Introduction Work Summary Abstract Gallery Structure Three Tier Architecture

Presentation Layer Business Logic Layer Data Access Layer

Class Diagram Screenshots Summary & Looking Ahead

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.

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 managementIssue: 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.

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 administrationIssue: 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.

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 infrastructureIssue: 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.

Abstract Gallery StructureRoot directory

Album 1 Album 2 Album 3

Album 4 Meta DataAlbum 4 Meta Data

Album 5 Meta DataAlbum 5 Meta Data

Album 4 LogAlbum 4 Log

Album 5 LogAlbum 5 Log

Album 4 Album 5

Image 1 Meta DataImage 1 Meta Data

Image 1 LogImage 1 Log

Image 1 FileImage 1 File

Three Tier Architecture

Presentation LayerEntry Point

Template Builders

/index.htmlhtml

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.

Presentation LayerThe 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 HandlerError Handler Command RunnerCommand Runner

Entry Point

Sxml Template builderSxml Template builder

Album builderAlbum builder

BLL

Response MakerResponse Maker

<?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>

Presentation Layer (continued)

Build using HTML templates

Validate authenticationGlobally or for each part

Build parts dynamicallyInserted into comments

Business Logic LayerThe 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 ManagerImage Manager

DAL

Presentation Layer

Album ManagerAlbum Manager

Actions

Rename Action

Create Action

Delete Action

…

Account ManagerAccount ManagerAjax Command RunnerAjax Command Runner

Business Logic Layer (continued)

Using AjaxAjax (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)

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

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) Image (PIL)

Meta Data WrapperMeta Data Wrapper

Business Logic Layer

File ManagerFile Manager

Log WrapperLog Wrapper

SXML File WrapperSXML File Wrapper

Cross LockCross Lock

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<ACTION type='RenameAction' version=23 user=‘Moshe'>

<PARAM>New Album Name</PARAM></ACTION>SEPERATION_STRING…

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.

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 LockLog 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

ScreenshotsCreate your own albumor share existing ones

Screenshots (continued)

Users can edit

Screenshots (continued)

Admin can commit / revert

Screenshots (continued)

Online image manipulation

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.