Jun

. 05, 200 7

ZoozleTV

PROJECT BOOK

Created By Ron Rais & Ron Shalev

Jun

. 05, 200 7

ZoozleTV

Table of ContentsWhat is ZoozleTV?..............................................................................................................4

ZoozleTV's Functionality....................................................................................................4

Watch Videos...................................................................................................................4

Register to ZoozleTV......................................................................................................4

Uploading a video............................................................................................................5

Tag marking..................................................................................................................5

Share video......................................................................................................................5

Rate a video.....................................................................................................................5

Categories........................................................................................................................6

Search..............................................................................................................................6

"More from the same creator".........................................................................................6

Related videos..................................................................................................................6

Ease of use.......................................................................................................................7

Language..........................................................................................................................7

Performance requirements...............................................................................................7

Operational requirements.................................................................................................7

Development phases........................................................................................................7

Costs................................................................................................................................8

Design..................................................................................................................................9

Overview..........................................................................................................................9

Introduction......................................................................................................................9

Database Design............................................................................................................13

Videos table.............................................................................................................14Tags Tables..............................................................................................................15Category table.........................................................................................................15

Presentation Layer’s features.........................................................................................15

Introduction....................................................................................................................15

ASP 2.0......................................................................................................................15AJAX..........................................................................................................................16Flash..........................................................................................................................17

Tag Search Algorithms..................................................................................................18

Created By Ron Rais & Ron Shalev

Jun

. 05, 200 7

ZoozleTV

Free Text Search............................................................................................................20

Joining Tag Search and Free Text Search.....................................................................20

Related Videos...............................................................................................................21

Website..............................................................................................................................22

How to build a website?................................................................................................22

How is ZoozleTV built?................................................................................................23

Master Page...............................................................................................................23Login page.................................................................................................................23Register page.............................................................................................................24Upload page...............................................................................................................24Main page..................................................................................................................25User page...................................................................................................................26Results page...............................................................................................................26Category page............................................................................................................26

Technologies......................................................................................................................27

SQL................................................................................................................................27

Website..........................................................................................................................27

Detailed description of interesting components............................................................27

Video List..................................................................................................................27Upload Video.............................................................................................................28Creating Previews of Videos.....................................................................................29

Requirements for deployment......................................................................................31

Steps that need to be taken..........................................................................................31

User Guide.........................................................................................................................33

Main web page...............................................................................................................33

Register webpage...........................................................................................................34

Login webpage...............................................................................................................35

UploadProgress webpage...............................................................................................35

Upload webpage............................................................................................................36

Share Video with Friend................................................................................................37

Created By Ron Rais & Ron Shalev

Jun

. 05, 200 7

ZoozleTV

Introduction

What is ZoozleTV?

Nowadays, one can see a great amount of video blogs around the internet (YouTube,

Metacafe etc). The main functionality of these video blogs is to allow people from all

around the world to share their videos among others. Besides the possibility for video

creators to share their material, it also provides hundreds of hours of entertainment for

users who just want to watch new exciting video clips. ZoozleTV is another video blog

which uses the latest technologies (such as Ajax) to provide the best viewing experience

out there.

ZoozleTV's Functionality

Watch Videos

The main page of ZoozleTV is a list of the most viewed videos and an option to view

each one of them. The site also allows getting videos by date, from a specific user, from

a specific category, etc.

Register to ZoozleTV

A person can become a member of ZoozleTV. When doing so, he will get some privileges

(ability to upload a video, share a video with friends). The registration process is a short

one, where the user is asked to provide some details about him, and particularly a login

name and password.

Created By Ron Rais & Ron Shalev

Jun

. 05, 200 7

ZoozleTV

Uploading a video

A registered user will be able to upload as many videos as he wants. The user will be

asked to enter some details for the video such as name and description, to make the

video as “reachable” as possible by other users. Every uploaded video is saved in the

system and is never deleted.

Tag marking

After a user uploads a video, he will be asked to provide “Tags” for the videos. These

tags will be used for a tag based searched (more details ahead). For example, if a user

uploaded a video trailer of a game, he may wish to add the tags:

“game”,”trailer”,”game_name”, etc.

Share video

A registered user will be able to share a video with his friends. The link to the shared

video will be sent to his friends by email. The option to save mail will appear right after

(and while) watching a video.

Rate a video

The rating methodology will be a star based one. After a user finished viewing a video,

he will have an option to rate his selected video. The rating options will be from 1 star to

5 stars. Every user may rate each video a single time per session, but unlimited times in

different sessions. The idea is that a user will not use this method to boost his own

created video.

Created By Ron Rais & Ron Shalev

Jun

. 05, 200 7

ZoozleTV

Categories

All the videos in ZoozleTV are categorized (Action, sports, music etc). A user can choose

a category and will get the most viewed videos of that category.

Search

ZoozleTV provides three search methods of videos:

O Free text search.

O Tag search

O Tag and free text search together.

More details about the search methodology later in this document.

"More from the same creator"

When a user plays a video in ZoozleTV, he will be able (with only one click) to get more

videos from the creator of the original video (sorted by most viewed).

Related videos

When a user plays a video, he will get a list of the most related videos to the original

video sorted by most viewed. The relevance is decided by a tag search on the video’s

tags.

Created By Ron Rais & Ron Shalev

Jun

. 05, 200 7

ZoozleTV

Ease of use

The web site will be easy to use and friendly to all spectrums of ages. Ajax technology is

used to make the web site more interactive and user-friendly.

Language

The product will have an English interface.

Performance requirements

The system will be robust enough in order to accommodate hundreds of multiple users.

The system will be scalable and could be adjusted to support an unlimited number of

concurrent users.

Operational requirements

ZoozleTV has no special requirements from its users, although the web site will be best

viewed using Internet Explorer 6.0 or better.

Development phases

1. Implementation + Design document

2. Finalization and presentation.

Created By Ron Rais & Ron Shalev

Jun

. 05, 200 7

ZoozleTV

3. Creating ZoozleTV’s project web page

Costs

Every week we will invest a working day on the project. At an hourly fee of 65 NIS we're

talking about: 14*10*65 *2 = 18200 NIS.

Created By Ron Rais & Ron Shalev

Jun

. 05, 200 7

ZoozleTV

Design

OverviewZoozleTV is a web service, which uses an SQL server for database services.

Figure 1. Overview of the Zoozle-TV system

IntroductionLayered development or multi-layer development refers to a development model where presentation, business logic and data are separated. This brings many advantages, including cleaner code, increased maintainability and the ability to spread your application's load over multiple servers. Zoozle-TV was designed as a 3-layers application:

Figure 2. The Layers in the Zoozle-TV application

Created By Ron Rais & Ron Shalev

Jun

. 05, 200 7

ZoozleTV

1. Presentation layer – This layer is responsible for showing the data to the user in a graphic manner. In the Zoozle-TV we use a web site.

2. Business Logic Layer, or the BLL - the bridge between the Presentation layer and the next layer: the Data Access Layer.

3. Data Access Layer or the DAL - talks to the database to perform selects, inserts, updates and deletes. In the Zoozle-TV system we use an SQL server 2005 database.

One of the ideas of this design is that you can replace one or more of the layers without affecting the others. So, you could for example drop the web site as the presentation layer and replace it with a Windows Forms application. This change wouldn't require a change in any of the other layers. Similarly, you should be able to remove a SQL Server specific DAL and replace it with an Oracle or Microsoft Access version without the Presentation layer even noticing the difference.

In the diagram in figure 2 appears a process go around in a counter clockwise direction. The process goes through the following 6 steps:1. The Presentation layer asks the BLL for some object, for example a Video. 2. The BLL forwards the request to the DAL. 3. The DAL connects to the database and asks it for a specific record. 4. When the record is found, it is returned from the database to the DAL. 5. The DAL wraps the database data in a custom object and returns it to the BLL. 6. The BLL returns the object to the Presentation layer, where it could be displayed on a web

page.

Created By Ron Rais & Ron Shalev

Jun

. 05, 200 7

ZoozleTV

Figure 3 – Zoozle-TV class diagram

Created By Ron Rais & Ron Shalev

Jun

. 05, 200 7

ZoozleTV

Some words on the class diagram: Classes which participate in the BLL – User, UserManager, Video, VideoManager,

VideoComparer, VideoList. Classes which participate in the DAL – UserDB, VideoDB, DBUtils. Classes which participate in the presentation layer: WebUtils, Upload, and many other form

classes which do not appear here, which display the data to the user in a graphic manner.

Now, we can see how the 3-layers approach falls into place with our Zoozle-TV system. Let’s see an example of how to access the data of a Video in the system:

Figure 4 - The Layers in the Zoozle-TV application: Video example

1. The Presentation layer, for example an ASPX page called Main.aspx, asks the BLL for some object, for example a Video. It does this by calling VideoManager.GetItem() and passing it the ID of the video.

2. The BLL forwards the request to the DAL by calling VideoDB.GetItem(). 3. The DAL connects to the database and asks it for a specific record. It does this by

executing a stored procedure, like getVideoDetailsByName and passing it the ID of the contact person.

Created By Ron Rais & Ron Shalev

Jun

. 05, 200 7

ZoozleTV

4. When the record is found, it is returned from the database to the DAL in a SqlDataReader object.

5. The DAL wraps the database data in a custom Video object from the BO namespace and returns it to the BLL.

6. Finally, the BLL returns the Video object to the Presentation layer, where it could be displayed on a web page for example.

Database Design

Figure 5 – Zoozle-TV Database diagram

Created By Ron Rais & Ron Shalev

Jun

. 05, 200 7

ZoozleTV

All of the ZoozleTV data is stored in an SQL database in several tables:

Users table

ZoozleTV supports registered users functionality which allows enhanced abilities for those users (like uploading a video, sharing a video by email etc.). The information about the registered user is stored in this table. This table contains the following columns: ID – unique and is defined automatically (auto increment) Private name Sir name Email Username Password Country Videos upload number – the number of videos uploaded by this user Average rate of videos - the average rating of the user’s videos

Videos table

When one of our millions of users uploads a video, its details are saved in this table. Video's details contain the following information:

ID – unique and is defined automatically (auto increment) Name Description Category Tags – Tags is a common feature which can be found in blogs. When a user uploads a video

he can Tag it with as many tags as he wants. Afterwards, when another user will want to search for a video, he could do it by the tag method as well.

Video's path – ZoozleTV's videos are saved on the Web server's file system. However, we need to save the location of that video in case it will need to be played.

Video's image path – In the main page or after a search in ZoozleTV, the user gets a list of videos. Each video in the list is displayed with an image (a captured frame) from that video. For that we need to save the Image path.

Uploader user ID Average rating Number of votes Views Date added Size

Tags Tables

Created By Ron Rais & Ron Shalev

Jun

. 05, 200 7

ZoozleTV

Each tag has its own table named "tag_" + tagName + "Tbl and contains the 2 columns: VideoID RatingEach tag table will contain a list of videos id’s (and their respective rating) which have this tag. We will see the usage of these tables when describing the search by tag algorithms.

Category table

ID – unique and is defined automatically (auto increment) Name Description

Presentation Layer’s features

Introduction

The presentation layer was built using .ASP 2.0 and relies heavily on Ajax. Some elements of

Flash are also in use.

ASP 2.0

ASP.NET is a programming framework built on the common language runtime that can be used

on a server to build powerful Web applications. ASP.NET offers several important advantages

over previous Web development models:

Enhanced Performance. ASP.NET is compiled common language runtime code running on the server. Unlike its interpreted predecessors, ASP.NET can take advantage of early binding, just-in-time compilation, native optimization, and caching services right out of the box. This amounts to dramatically better performance before you ever write a line of code.

World-Class Tool Support. The ASP.NET framework is complemented by a rich toolbox and designer in the Visual Studio integrated development environment. WYSIWYG editing, drag-and-drop server controls, and automatic deployment are just a few of the features this powerful tool provides.

Power and Flexibility. Because ASP.NET is based on the common language runtime, the power and flexibility of that entire platform is available to Web application developers. The .NET Framework class library, Messaging, and Data Access solutions are all seamlessly accessible from the Web. ASP.NET is also language-independent, so you can choose the language that best applies to your

Created By Ron Rais & Ron Shalev

Jun

. 05, 200 7

ZoozleTV

application or partition your application across many languages. Further, common language runtime interoperability guarantees that your existing investment in COM-based development is preserved when migrating to ASP.NET.

Simplicity. ASP.NET makes it easy to perform common tasks, from simple form submission and client authentication to deployment and site configuration. For example, the ASP.NET page framework allows you to build user interfaces that cleanly separate application logic from presentation code and to handle events in a simple, Visual Basic - like forms processing model. Additionally, the common language runtime simplifies development, with managed code services such as automatic reference counting and garbage collection.

Manageability. ASP.NET employs a text-based, hierarchical configuration system, which simplifies applying settings to your server environment and Web applications. Because configuration information is stored as plain text, new settings may be applied without the aid of local administration tools. This "zero local administration" philosophy extends to deploying ASP.NET Framework applications as well. An ASP.NET Framework application is deployed to a server simply by copying the necessary files to the server. No server restart is required, even to deploy or replace running compiled code.

Scalability and Availability. ASP.NET has been designed with scalability in mind, with features specifically tailored to improve performance in clustered and multiprocessor environments. Further, processes are closely monitored and managed by the ASP.NET runtime, so that if one misbehaves (leaks, deadlocks), a new process can be created in its place, which helps keep your application constantly available to handle requests.

Customizability and Extensibility. ASP.NET delivers a well-factored architecture that allows developers to "plug-in" their code at the appropriate level. In fact, it is possible to extend or replace any subcomponent of the ASP.NET runtime with your own custom-written component. Implementing custom authentication or state services has never been easier.

Security. With built in Windows authentication and per-application configuration, you can be assured that your applications are secure.

.ASP 2.0 is the newest version of ASP by Microsoft.

AJAX

Ajax, or AJAX, is a web development technique used for creating interactive web applications. The intent is to make web pages feel more responsive by exchanging small amounts of data with the server behind the scenes, so that the entire web page does not have to be reloaded each time the user requests a change. This is intended to increase the web page's interactivity, speed, functionality, and usability.The name is an acronym standing for Asynchronous JavaScript and XML. Ajax is asynchronous in that loading does not interfere with normal page loading. JavaScript is the programming language in which Ajax function calls are made. Data retrieved using the technique is commonly formatted using XML, as reflected in the naming of the XMLHttpRequest object from which Ajax is derived.

Created By Ron Rais & Ron Shalev

Jun

. 05, 200 7

ZoozleTV

Ajax is a cross-platform technology usable on many different operating systems, computer architectures, and Web browsers as it is based on open standards such as JavaScript and XML, together with open source implementations of other required technologies.

Flash

Adobe Flash, or simply Flash, refers to both the Adobe Flash Player, and to the Adobe Flash Professional multimedia authoring program. Adobe Flash Professional is used to create content for the Adobe Engagement Platform (such as web applications, games and movies, and content for mobile phones and other embedded devices). The Flash Player, developed and distributed by Adobe Systems (which acquired Macromedia in a merger that was finalized in December 2005), is a client application available in most common web browsers. It features support for vector and raster graphics, a scripting language called ActionScript and bi-directional streaming of audio and video.

Created By Ron Rais & Ron Shalev

Jun

. 05, 200 7

ZoozleTV

Algorithms

Tag Search Algorithms

As mentioned previously, all the videos with the same tag are held in the same tag table. This

was done especially for the tag search. The algorithm receives a list of tags and returns the top

100 matches sorted by popularity. The algorithm ():

Input: a comma separated tag list.

1. For each (tag in Tags)

If (tag table exists)

Add the rows of the tag table to Temp_table

2. Group the temp_table by ID to a new count column (SQL function)

3. We calculate a ranking for each video:a. calculate a penalty for the video:IF(#matchedTags<#totalVideoTags )

penalty = ABS(#totalSearchedTags-#matchedTags)*10ELSE

penalty = ABS(#totalSearchedTags-#matchedTags)ranking = (100-penalty )/100

Explanation: we want to rank the video with the exact searched tags the highest. If a video has all the searched tags and more we have a penalty, but this is penalty is reduced compared to video which has less tags then the searched tags.

4. Select the top 100 rows of temp table primarily sorted by ranking, and secondly sorted

by rating.

Let's explain the algorithm with an example:

Let's say we have 2 tag tables:

Tag A Table:

Created By Ron Rais & Ron Shalev

Jun

. 05, 200 7

ZoozleTV

And Tag B Table

And let us assume that the user is looking for tags a and b.

After phase one of the Algorithm Temp Table will look like:

In the second phase of the algorithm we add a new column Count which counts the number of

times the video appeared in tag table. In our case it will look like:

The third part is sorting the table.

The main sort is by count, and the secondary sort is by the ABS(count – number of tags)

In our case the algorithm will return:

Created By Ron Rais & Ron Shalev

Jun

. 05, 200 7

ZoozleTV

The main idea of the algorithm is to return the videos that have as many tags as possible out of

the searched tags. If there are videos with the same amount of tags, the algorithm will sort them

by the "closest number of tags they have" to the number of tags matched.

Free Text Search

For the free text search we used the built in (SQL Server 2005) full text search capabilities. Full-

text search allows fast and flexible indexing for keyword-based query of text data stored in a

Microsoft SQL Server database. This engine provides a ranking of its own for each video. For

more information about this capability please refer to the web.

Joining Tag Search and Free Text Search

ZoozleTV allows users to free text search and tag search at the same time. The main

consideration of this method is how to merge the results of both searches. Our solution for this

problem was to normalize the Rank we got back in each of the methods and combine them

according to the rank. The resulted videos set is this combined set of results sorted by ranking

and rating.

Created By Ron Rais & Ron Shalev

Jun

. 05, 200 7

ZoozleTV

Related Videos

Our algorithm of finding related videos is really simple. We just do a tag search with the tags of

the current viewed video. The results are the related video.

Created By Ron Rais & Ron Shalev

Jun

. 05, 200 7

ZoozleTV

Website

How to build a website?

There are several files which the website contains:

*.aspx – This is what the user will see. Here you should put tables, pictures, text, videos,

etc. Here you can add components from the tool bar like dropdown lists or textboxes.

*cs – each .aspx file has a maching .cs file. The .cs is responsible of the functions that

will be run on the server (not the client). For example, the .cs file has a Page_Load

function that is called each time the matching webpage is created. This function can be

used to determine things before the page gets to the user. (i.e. if the user is logged on

or not and redirects him if necessary). Another example of using the .cs file is when

clicking a "submit" button. This will cause a postback in which submit_click function will

be called (on the server). In this function you can check and perform actions that should

be performed on submit.

Web.config –this file is stores the entire configuration needed. For example, allow

upload of files which are larger than 4 Mb.

Master page – This is a wrapper to most of the other .aspx files. It contains all the data

which is similar to all web pages in the website. After creating it, you should create all

the other web pages out of it. For example, the logo of your website can be created only

once, in the master page. And all other web pages that will be created from the master

page will automatically have it. This is used to provide a consistent look & feel for all

pages of the web site.

Created By Ron Rais & Ron Shalev

Jun

. 05, 200 7

ZoozleTV

How is ZoozleTV built?

Master Page

As described above, to prevent duplication of code and work, we've created a master page that

contains all the functionality which is shared by all ZoozleTV's web pages.

Search bar – all the search functionality is built-in into the master page.

Check if the user is signed in – Each page will be able to recognize whether the user is signed

in or not. If the user is signed in it will display "hello" + username. Else it will allow him to

sign in. This is done by the session variable. When a user signs in we add a "username" field

to session which holds (surprisingly) the user's name. For each web page that is loaded we

check to see if session variable exists and if so are able to display the username. In addition,

we make the sign out link visible.

Allow a user to sign out (if he is signed in) – in this case we just remove the username

session variable, make the sign in link visible, and make the sign in link invisible.

Login page

The login page is a simple username and password page. However, we use a cookie to auto fill

the username. So, on the page_load function we check if the cookie exist, and act accordingly.

If the user has no cookie and he succeeded in signing in, we create a cookie with his username.

Another function which is done on the server side is the password check which basically makes a

SQL query to compare the password given with the stored password.

Created By Ron Rais & Ron Shalev

Jun

. 05, 200 7

ZoozleTV

Register page

ZoozleTV register page is a standard register page. On the Load_page function we populate the

countries and the data dropdown lists. When a user submits his registration request, we check

several things:

Unique user name

At least 6 characters password

The password and the password confirm are equal

None of the fields are empty.

In case all the above are O.K.; we add the user to the database and update the session variable

respectively.

Upload page

ZoozleTV upload page is split into 2 sub pages:

1. UploadProgress page – In this page the user selects the file he wishes to upload and

upload occurs. We use here flash technology to track the rate of the upload process.

After (and if) the upload finished successfully the use is redirected to the 2nd upload

page.

2. Upload page – once the video is uploaded, the user inserts the video's details in this

page. In addition the image of the video (which will be used for preview) is created in

this page. Only after the user submits the details in this page the video is inserted to

ZoozleTV.

ZoozleTV allows registered users which are signed-in only, to upload videos. For this, the

UploadProgress Page_Load function checks if the user is signed in. if he isn't, it redirects him to

Created By Ron Rais & Ron Shalev

Jun

. 05, 200 7

ZoozleTV

the sign-in page, otherwise it allows him to upload a video. After the video is uploaded (to

the /upload directory), UploadProgress redirects the user to the Upload page.

Upload's Page_load function is responsible of creating the preview image of the video. After the

user submits the details of the video, Upload is responsible of naming the video and its image

with the videoID (according to the sol videoTbl) ,leave the same suffix and move the video to the

/video folder and the image to /VideoCaps folder. For example, assume the user uploaded

CarCrash.avi to ZoozleTV. First the file will be saved at /upload/CarCrash.avi (UploadPorgress

page). Afterwards (Upload page) the video image will be created, and the user will be asked to

enter the video’s details. After the user submits the video’s details, the video and image details

will be saved in the sol tables. Assume that the VideoID of CarCrash is 99. Now, ZoozleTV will

move /Upload/CarCrash.avi to /Videos/99.avi and the image will save in /VideoCaps/99.jpg.

This way, ZoozleTV will insure no conflicts of file names in the file system.

Main pageThe main page is the page the user will see when he 1st enters into the ZoozleTV web site. The

page shows a list of all videos on the site sorted by upload date, number of views, rating and

finally name. This page relies heavily on Ajax, and allows sorting the list by each of the

parameters mentions above, without a postback.

When clicking on a video, the video will start to play in the player frame (which also can be

moved), and a table with the details of the video will appear as well. The video player will

provide the option to rate the video (once per video per session) , share the video with a friend,

and get related videos to this video.

The video details tables will also provide the option to find more users from the same user, or

Created By Ron Rais & Ron Shalev

Jun

. 05, 200 7

ZoozleTV

same category, and also click on each one of the video’s tags, and actually performs a tag search

on the selected tag.

User pageThe user page has the same functionality as the main page; the only difference is that this page

is used to display videos by a specific user only.

Results pageThe results page is used to display the results of the search that was performed (all 3 types of

search). In all other aspects, it has the same functionality as the main page.

Category pageThe category page has the same functionality as the main page; the only difference is that this

page is used to display videos by a specific category only. It also allows choosing different

categories and seeing the best rated videos of that category.

Created By Ron Rais & Ron Shalev

Jun

. 05, 200 7

ZoozleTV

Technologies

SQL

Full text search – as described before, it is used for Zoozle-TV's text search.

Store procedures –The interface with C# is done mostly with Store procedures.

Scalar valued functions

Website

The website is fully built in ASP 2.0. It uses the following features:

Embed – The video playing technology is using ASP.NET Embed. Embed allows to play in

a web page any video which can be played on the host's media player.

Ajax – ZoozleTV is build mostly with Ajax.

Flash – The upload progress bar is done with flash.

Detailed description of interesting componentsIn this section we will described some of the components used in a more detailed manner. We will explain how they work and why were they chosen.

Video List

OverviewOne of the main components that is used in the Zoozle-TV web site is the table that shows a list of videos. This table is used to display new videos, searched videos, videos according to categories, etc. This table uses a .ASP 2.0 called GridView. From MSDN:

Created By Ron Rais & Ron Shalev

Jun

. 05, 200 7

ZoozleTV

GridView ClassDisplays the values of a data source in a table where each column represents a field and each row

represents a record. The GridView control allows you to select, sort, and edit these items.

Namespace: System.Web.UI.WebControls

Assembly: System.Web (in system.web.dll)

Why was it chosenThe GridView was chosen for several reasons:

1. This is a standard component for displaying data to the user in a .asp web page.2. It gives many ‘free’ functionality such as paging, sorting, etc.3. It inherently supports the use of business object as a data source – so it fits right in into

our design.

Additional FeaturesIn order to make the web site Ajax was used. Ajax enables us to respond to user inputs and bring fresh data without creating a postback on the client’s machine. We wrapped the GridView with an Ajax component called ‘UpdatePanel’. Taken from MSDN:

ASP.NET UpdatePanel controls enable you to build rich, client-centric Web applications. By using UpdatePanel controls, you can refresh selected parts of the page instead of refreshing the whole page with a postback. This is referred to as performing a partial-page update. A Web page that contains a ScriptManager control and one or more UpdatePanel controls can automatically participate in partial-page updates, without custom client script.

So, by using the UpdatePanel control and wrapping it around the GridView, we were able to handle postbacks (such as when sorting the data in the grid or using the paging feature) in a manner which elimates postbacks from the user’s end, and result in a highly responsive and dynamic site. The UpdatePanel control was used in a lot of other scenarios in the web site – as often as possible.

Upload Video

OverviewThe ability to upload a file is essential for a web site of the kind of Zoozle-TV. There are some standard controls in .ASP 2.0 for handling file uploads, like FileUpload control, but unfortunately, this control does not have progress indication. We really wanted the user will have the ability to view the progress of the uploaded file, especially in a case of a large upload. For this we chose the ‘FlashUpload’ control, which is a free source flash control for uploading files. From the developers site:

It is difficult to find a decent upload control that handles large files, shows a progress bar, and still works in a medium-trust hosting environment. The problem with these controls is medium-trust does not allow Reflection. But this does not

Created By Ron Rais & Ron Shalev

Jun

. 05, 200 7

ZoozleTV

mean that we are out of luck. One of the problems these controls strive to overcome is the server running out of memory when large files are uploaded by streaming the uploaded file to disk. But the HttpPostedFile class description states that "By default, all requests, including form fields and uploaded files, larger than 256 KB are buffered to disk, rather than held in server memory." So, we don't have to worry about this problem. The other issue is feedback to the user by way of progress bar. Enter Flash's fileReference API, which allows you to upload a file from Flash, and also keep track of it. And FileReferenceList which allows the user to select multiple files.More information about this control can be found here.

Why was it chosenThe ‘FlashUpload’ control was used for the following reasons:

1. It has a functional progress bar, so it enables the user to view the progress of the upload.

2. Easy to use features, can be dragged onto the web page.3. The most important part: it’s free source! Other such controls cost money.

Creating Previews of Videos

OverviewThe creation of preview images of the uploaded videos is imperative for a web site of Zoozle-TV’s nature. When displaying the videos for the user to choose from, the preview image is an important parameter on deciding which video to choose. We searched for a class of dynamic library to create such preview images from videos and could find one with a simple interface. Finally, we found a command line tool which can do exactly that and support many formats of videos and images. The tool name is ffmpeg.exe. From the developer’s site:

FFmpeg is a complete solution to record, convert and stream audio and video. It includes libavcodec, the leading audio/video codec library. FFmpeg is developed under Linux, but it can compiled under most operating systems, including Windows. The project is made of several components:

ffmpeg is a command line tool to convert one video file format to another. It also supports grabbing and encoding in real time from a TV card.

ffserver is an HTTP (RTSP is being developped) multimedia streaming server for live broadcasts. Time shifting of live broadcast is also supported.

ffplay is a simple media player based on SDL and on the FFmpeg libraries. libavcodec is a library containing all the FFmpeg audio/video encoders and

decoders. Most codecs were developped from scratch to ensure best performances and high code reusability.

Created By Ron Rais & Ron Shalev

Jun

. 05, 200 7

ZoozleTV

libavformat is a library containing parsers and generators for all common audio/video formats.

More information can be found here.The code for creating preview images in Zoozle-TV:try { Process p = new Process(); p.StartInfo.UseShellExecute = false; p.StartInfo.CreateNoWindow = true; p.StartInfo.RedirectStandardOutput = true; p.StartInfo.RedirectStandardError = true; p.StartInfo.FileName = Path.Combine(Server.MapPath("ffmpeg/"),"ffmpeg.exe"); p.StartInfo.WindowStyle = ProcessWindowStyle.Hidden; string args = "-i \"video_input\" -ss 00:00:10 -vframes 1 -y -s 230x160 \"image_output%d.jpg\""; args = args.Replace("video_input", srcVideo); args = args.Replace("image_output", Path.Combine(Server.MapPath("videoCaps/"),dstImage)); p.StartInfo.Arguments = args; p.Start();// StreamReader myStreamReader = p.StandardError; p.WaitForExit(); } catch (Exception ex) {

Response.Redirect("Error.aspx?msg=" + Server.UrlEncode("Error. Could not create image from video:"+ex.Message));

}

Some words on the code: Most of the code is just the standard method for executing programs in C#. We create an object of type process, and we supply it the arguments, which tell it what to execute. In this case we run the following command: ffmpeg.exe -i "video_input" -ss 00:00:10 -vframes 1 -y -s 230x160 "image_output%d.jpg"; -i – the input video to create a preview for-ss – the frame number to capture-vframes – number of frames. We use just 1.-s – size of the output image.The default output is in jpg format.

Why was it chosenThe ffmpeg tool was chosen for the following reasons:

1. Very simple to use – just a few simple flags to this command line tool.2. Supports many different (if not all) video formats and output image formats.

Created By Ron Rais & Ron Shalev

Jun

. 05, 200 7

ZoozleTV

3. It is free source!

Created By Ron Rais & Ron Shalev

Jun

. 05, 200 7

ZoozleTV

1. DeploymentThe next section contains information regarding the deployment of the Zoozle-TV system. It relates both to deployment in production environment and also partial deployment used only for additional development and debugging.

Requirements for deployment Pc with windows XP\Vista\Windows server operation system installed. .NET 2.0 (or better) framework installed. You can find it here with installation

instructions. This is also installed by default when installing VS 2005. ASP.NET 2.0 AJAX Extensions 1.0 and ASP.NET AJAX Control Toolkit (This is required only

for developers). You can get it here with installation instructions. VS 2005 – This is required only for developers. From within VS 2005 you will be able to

run the website without the need of a dedicated web server. SQL Server 2005. SQL Server 2000 may work but was not tested. You need to enable

full-text-indexing on the server. You can find instruction for this here. Web server – with IIS 6.0 or better installed. This is needed only for deployment for

production. Developers can use VS 2005 to simulate a web server. You can find the IIS 6.0 with installation instruction here.

Steps that need to be taken1. Install all of the above software components.2. download the Zoozle-TV system files (can be found in the Zoozle-TV website) to your

computer:a. If you’re deploying the system on a dedicated web server, create a new virtual

directory and copy the system files there.b. Under VS 2005 this is not needed.

3. Setup the SQL server (as mentioned before full-text-index must be enabled):a. Under the Zoozle-TV directory you will find a directory named ‘SQL’.b. Create a new database named videoBlog in the server.c. Execute the SQL script. This will create all needed tables and stored

procedures.4. Configure the system

a. Under the root directory of the system you will find the file ‘web.config’.b. Open it and search for the following line:

<add key="ConnectionString" value="Data Source=RON-SUPERCPU;Initial Catalog=videoBlog;Integrated Security=True"/>

c. Edit the ‘value’ to match the connection string of your SQL server.5. If running under development mode, use the page ‘populateDB.aspx’ to populate the

database with test data (videos, user, etc) in order to test and use the system.

6. If you running the web site under VS 2005, open the web site and run the page ‘main.aspx’. This will give you access to the entire system. If you’re using a dedicated web server, use a browser to access the main page of the system.

Created By Ron Rais & Ron Shalev

Jun

. 05, 200 7

ZoozleTV

More information also appears on the Zoozle-TV web site.For any question and problems you may also contact ron.shalev@gmail.com or ronrais@gmail.com .

Created By Ron Rais & Ron Shalev

Jun

. 05, 200 7

ZoozleTV

User Guide

ZoozleTV is a web site which is built in a user friendly way.

We will go over the web pages and explain how to use each one.

Main web page

Created By Ron Rais & Ron Shalev

Jun

. 05, 200 7

ZoozleTV

On the left side of the window you can see the list of videos rated by "most views". By clicking

on the one of the column's heading (Video Name, rating, date added…) you will be able to sort

the videos according to the clicked heading.

To start playing a video just click on the row the video appears in and it will start playing. In

addition you will see its details on the right side of the page. You'll have 3 links in the details

table:

1. Uploader – Left click on it will give you "more videos from the same user"

2. Category – Left click on it will give you "more videos from the same Category"

3. Tags - Left click on it will give you "more videos from the same tag"

You can rank the video while it is being played by clicking on the amount of stars u want to rank

the video with.

In addition you can share the video that is being played with your friends by clicking "Share

Video" in the bottom of the played video. If you are not signed it to the page, you will be

directed to a login page prior to sharing the video.

Register webpage

Just enter your personal details, click submit and you are registered!

Your username and password will be sent to you by email.

Created By Ron Rais & Ron Shalev

Jun

. 05, 200 7

ZoozleTV

Login webpage

Just enter your username and password (check "Remember me next time" if you want to be

remembered) and click Log In. Surprisingly you will be logged in afterwards.

UploadProgress webpage

Created By Ron Rais & Ron Shalev

Jun

. 05, 200 7

ZoozleTV

Just click the browse button to in order to find the video you want to upload. Click the Upload

button and wait until your video is finished being uploaded.

Upload webpage

Enter the details of your video, click “Save Video's Details” button and your video can be played

by ZoozleTV’s millions of users.

Created By Ron Rais & Ron Shalev

Jun

. 05, 200 7

ZoozleTV

Share Video with Friend

Just fill out the “To” and the Message textboxes, click “Send” and your friends will get a

mail with a link to the video you wanted to share!

We hope you'll enjoy ZoozleTV!

Created By Ron Rais & Ron Shalev