Software Systems Lab

Department of Electrical Engineering, Technion

Parzoof A social networking website for students

A project by:

Boaz Farkash

Idan Hodor

Instructor:

Viktor Kullikov

2

Table of Contents

Table of Contents ......................................................................................................... 2

Project Goals ................................................................................................................ 3

Project Description ....................................................................................................... 3

What we have learned .................................................................................................. 3

The 3-Tier approach ...................................................................................................... 4

Tier 0 - The Database .................................................................................................... 5

Tables ...................................................................................................................... 5

Views ....................................................................................................................... 8

Stored Procedures ..................................................................................................... 9

Tier 1: DAL – Data Access Layer .................................................................................... 10

DAL introduction ..................................................................................................... 10

DAL classes ............................................................................................................. 10

DAL Error handling .................................................................................................. 11

Tier 2: The Business Logic ............................................................................................ 12

Classes ................................................................................................................... 12

Security .................................................................................................................. 17

Using the Session .................................................................................................... 18

Image Handling ....................................................................................................... 18

Tier 3: Presentation Layer ............................................................................................ 20

XHTML & CSS .......................................................................................................... 20

Master Pages .......................................................................................................... 20

Custom Controls ..................................................................................................... 21

Pages ..................................................................................................................... 22

Suggestions for enhancement ...................................................................................... 23

3

Project Goals

• Learn how to design and implement a modern end-to-end Web Project.

• Learn C# and the .NET framework.

• Get acquainted with the Microsoft Web Development environment:

• Visual Studio

• ASP.NET

Project Description

Parzoof is a social networking website for students, inspired by facebook. With the rise in

social networking websites, it is hard to ignore their impact on today's culture and how users

interact with each other online. We wanted to create a website which, like facebook, lets

users interact with each other by exchanging messages and pictures.

The website is intended to meet all the standards of the Web 2.0 era – dynamic pages that

are built on content that the users themselves create.

Each user has a profile page. He can watch profile pages of other students, leave them public

messages for everyone to see, or send private messages in an 'Inbox' like interface. He can

also search for new friends by name or by faculty to extend his network of friends. He can

also upload pictures and browse pictures of other users.

What we have learned

• C# and the .Net framework – learning C# from scratch was our first real experience

in working with an object oriented programming language on a real project. We

used .Net framework 3.5.

• ASP.Net

• Relational Databases – SQL Server – We learned about designing a relational

database and defining its relations, keys and indexes. We also gained extensive

knowledge in writing stored procedures to connect the database to the outside

world.

• ADO.Net – Using ADO.Net we connect to the database through Visual Studio.

• Web Design – HTML, XHTML, CSS – A lot of effort was put into learning modern

approaches to web design. We wanted a web site that meets today's standards also

in terms of appearance.

• Putting it all together with the 3 tier approach – Understanding how all technologies

interact to create the final product was one of the main challenges as we stepped

into the project. We learned how to use the 3 tier design to create a modern

scalable web project.

4

The 3-Tier approach

The purpose of the 3 tier approach is to divide the design into layers that have different

purposes. Each layer can then be independently worked on, improved, redesigned and so

on. Only the interfaces between the layers need to stay as they are if we don't want changes

in one layer to affect the others.

Using this approach has several benefits:

• Scalability – Splitting the design into layers makes it much easier for the web project

to grow bigger in size. At first all layers can be on one server. Later, if the website is

successful and attracts many visitors, one layer can be extracted to another server

to balance the load, and so on. Different programmers can work on different tiers –

no programmer really has to know the project from end to end.

• Robustness – The project in a tiered approach is less sensitive to failure, and

therefore more robust. When something goes wrong, the responsible layer is

immediately recognized, and knowing what to fix is simpler and faster in comparison

to a project that has all the logic in a single layer. Moreover, intrusion is also more

difficult in a multi layered environment, because there are more layers for the

intruder to penetrate. Getting all the way to the database is harder in a layered

design.

5

Tier 0 - The Database We used SQL server 2005 as our database. Here is the database diagram:

Tables

1. tblLogin – This is the most central table in the database. Upon registration, each user

gets a unique user id (UID) which acts as the primary key in the table. His login email,

which acts as the sites username, is stored here alongside the password.

2. tblPersonalDetails – This table stores personal information like full name, birthday,

etc. The email that is stored here (EmailContact) differs from the email in tblLogin

(LoginEmail) in being public. This means that EmailContact will be visible to other

6

users, while the LoginEmail is not. This is why EmailContact is optional and

LoginEmail is required.

tblPersonalDetails has a one-to-one relationship to tblLogin. UID is the foreign key

connecting the two tables.

3. tblFriends – This table defines a friendship relationship between pairs of UIDs.

FriendUID is a friend of MyUID. This means that MyUID can have multiple Friends. If

student A is a friend of student B, it doesn't mean that the opposite is true. The

relation is non-symmetrical. If students A and B are both friends with each other,

then it will be represented in two different rows in the database.

The Unique Key of this table consists of the combination of MyUID and FriendUID.

MyUID and FriendUID are both foreign keys of UID in tblLogin.

4. tblMessagePrivate – This table is in charge of holding private messages. Each new

message gets an unique identifier (MPrivateID) which is the primary key of the table.

UID represents the person who got the message, and FromUID represents the

person who sent the message. They both are foreign keys of UID in tblLogin.

7

There's a 'one to many' relationship between tblLogin and tblMessagePrivate. For

every UID in tblLogin multiple UIDs can exist in this table.

5. tblMessagePublic – This table holds public messages and is just like

tblMessagePrivate. The only difference is that it doesn't have a 'Subject' Column.

6. tblPictures – This table holds information about the pictures that have been added.

The 'Path' column points to their physical location on the server. Every pictures gets

an unique identifier (PicID), and the user who uploaded is represented by UID which

is a foreign key of UID in tblLogin.

7. tblEducation – This table holds information about the student's educational history.

The student can enter information about where he went to school and during which

years. Each row will get an unique identifier (EduID).

8. tblFaculty – This table is basically a list of faculty names. Each faculty gets a unique

FacultyID which is the primary key of the table.

9. tblStudentFaculty – This table defines what faculty a student belongs to. One

student can belong to more than one faculty. To add a faculty to a certain student,

we add a row with the student's UID and the faculty's FacultyID to the table. The

8

unique key is the combination of UID and FacultyID. Both are foreign keys (to

tblLogin and tblFaculty)

Views

1. view_PersonalDetails – This view is used to show all the user's personal details

including the faculty he is attending.

2. view_MessagePublic – This view is used to combine the message information with

the personal details of the sender.

3. view_MessagePrivate – Just like view_MessagePublic, but for private messages.

4. view_Friends – This view is used to show the personal details of a friend.

9

Stored Procedures

We used stored procedures as the database interface for the DAL. Most of the SPs were

written using this approach:

• For every table or view that needs to be accessed by the DAL, we create four SPs:

1. Select SP

2. Insert SP

3. Delete SP

4. Update SP

• All SPs get parameters from the DAL by which the filter their operations.

• Each SP incorporates transactions. If an error occurs we do a 'rollback', and if the SP

completes successfully we do a 'commit'. This way we prevent data corruption in the

database.

• Some Insert SPs have return parameters. This enables the DAL to get parameters

from an Insert operation without having to call another Select SP.

10

Tier 1: DAL – Data Access Layer

DAL introduction

The DAL acts as an abstraction layer between the business logic and the database. Our focus

was on designing it so that adding functionality to it will be easy and simple. As web sites

grow, it is only a matter of time until more functionality is needed, and when new tables are

added we don't want them to be difficult to implement in the DAL.

DAL classes

The DAL consists of these classes:

1. DAL.cs – This is the main DAL class. It is a static class – a singleton. This class defines

the interface for the Business Logic layer. All the DAL's functionality is defined by the

methods of this class. This class relies on the other classes we show here.

2. Connection.cs – This class is in charge of creating the ADO connection to the data

provider – In our case SQL Server. When a method in DAL.cs wants to connect to the

database, it uses this class. If the data provider is someday replaced, no changes in

DAL.cs will be needed. Only Connection.cs will be updated to work with the new

database.

3. Query.cs – This is an abstract class that defines a query. By query here we mean any

database operation, in our case we use stored procedures. This object is in charge of

creating the ADO command to be executed. It exposes the functionality of adding

parameters (both input and output parameters) to the query.

By creating our own Query object we avoid using ADO directly in DAL.cs. This design

promises that changes to data providers will be easier to implement, and that

adding functionality to DAL.cs will also be simpler, because ADO won't have to be

accessed directly.

4. SelectQuery.cs – This class inherits from Query.cs. The SelectQuery object is used for

data accesses that are for reading purpose, in other words – SELECT operations. Two

types of methods (getDataTableReader, getArrayList) let the Business Logic user at

the next layer choose in what kind of container he would like to get his data – The

heavy but flexible DataTableReader, or the more lightweight ArrayList.

11

5. ActionQuery.cs – This class also inherits from Query.cs. It is used for data accesses

that are of type INSERT, UPDATE or DELETE.

• The connection and the query objects we created act as an internal interface for

DAL.cs. Using this mini-interface functionality is easily added to DAL.cs. A

programmer doesn't need to know how the connection and query objects were

implemented, or even know anything about ADO, to add functionality to the DAL.

DAL Error handling

As sites grow we need some sort of mechanism to keep track of crashes so we can fix them.

We used Windows Event Viewer to keep track of exceptions that are caught in the code.

Using try/catch in the C# code we catch exceptions, and write them to the event viewer. This

method ensures we are notified of errors we did not encounter in our testing.

12

Tier 2: The Business Logic

Classes

The Business Logic is comprised of 9 major classes:

1. The class Student comprised of all the general information about the student. The

student inserts this information while registering to Parzoof.

2. The class Friend inherit from the class Student comprised of 2 additional fields:

13

3. The class Faculty holds all the faculties a specific student is belonged to.

4. The class PrivateMessage holds information about a private message students send

to one another. These messages are privates, and only the registered user can see

them.

5. The class PublicMessage holds information about a public message students sends

to one another, this messages are public, which means the student’s friends could

see the public messages content. These messages are posted on the main profile

page.

14

6. The class Pictures holds information about every inserted picture. Every user can

upload pictures to his page. The information about the picture, such as a full path to

its location, date it was added, and more.

7. The class Login is a static class, which responsible of a correct login, every user has

to be authenticate before logged in, and the login class responsible of that.

15

8. The class Register is responsible of the registration process, such as uploading a

picture to the DB, defining a new GUID name for the picture that is loaded, check

that the user inserted all fields and is not already registered, that the user inserted a

valid email, and many more.

To restore many objects of the same class we used another bundle of classes. These classes

use ArrayList object, and in this way restore many objects of the same class together. The

need for objects that bundle together classes of the same kind is obvious. For instance when

a user wants to see all his private messages, we would like to do that efficiently as possible

which means one access to the DB at most, hence an object that holds bundle of the same

class is required.

The uses of ArrayList: We used a ArrayList object to implement these bundle of classes, and

the reason for that is:

1. ArrayList is dynamically enlarged when new object is added.

2. ArrayList can restore all kind of object, and supply many additional functions to

manipulate these objects.

3. ArrayList is relatively small, compared to DataTables

4. .NET objects works fine with ArrayList, which means that the connection

between the ‘code behind’ and the BL is relatively easy regarding these issue.

1. The class FacultyArray holds all the Faculty objects, of the same user.

16

2. The class MessgaePrivateArray holds all the MessagePrivate objects of the same

user.

3. The class MessgaePublicArray holds all the MessagePublic objects of the same user.

4. The class PictureArray holds all the Picture objects of the same user.

17

Security

The class Security is a static class, which is responsible of hashing the passwords before

inserting them into the DB, and also responsible of the user’s authentication. Both the

authentication and the hashing are done with SHA1 hash function.

How does it work? For every registration the class generate a pseudo random salt number,

this number is hashed together with the user password, and the new hashed password

together with the salt number are saved in the DB. For authentication, when the user is

logging in, the password the user inserted is hashed together with the random slat number

from the DB, if both the DB password and the user hashed password are the same, the

function authenticate the user, and he can log in, otherwise he cannot.

18

Using the Session

To enhance productivity and efficiency we used the session to store Objects that are

frequently in use. Such as the logged in user information, it appears on every page. The

viewed student, in every moment the logged in student looks on pages of different users in

the system, the viewed user information is also stored at the session, so it would be much

more efficiently to page through his pages, when his details are frequently in use.

The use of the Session:

The session advantages, are immense, it dramatically reduce the access to the DB, the

access to information in the Session is much faster, moreover the Session is process

independent, which means that if and when the connection is lost the Session is still alive

and when the connection is reestablished the Session state is accessible and the information

is not lost. The last advantage is that the Session can restore “complicate” (not textual)

objects, and makes the transition of data much more easier.

In our project we didn’t encrypted the Session and as a result of that we didn’t use the

Session for transferring private or classified information. Moreover we used the Session only

when needed, which mean as few as possible. In every time period, at most 2 objects are

stored.

Session Timeout: On a new Session, the portal stores a cookie at the User side, so when the

user is logged off, and then log on again (in a predefined period of time), he will not need to

insert user and password again, all the session information is still active. This cookie store a

textual information about the Session ID and some additional information, in the User

computer so when the user opens Parzoof once again, the browser will first see if there is a

cookie of Parzoof page, and if the Session of that cookie is still alive, if so, he will log in to the

Session that its ID was in the user’s cookie. Every cookie has a timeout property which define

the time the cookie is not valid anymore, and the Session process should be dead, we

shortened that time, to make Parzoof more safety to session Hijacking, (The term session

hijacking refers to the exploitation of a valid computer session - sometimes also called a

session key - to gain unauthorized access to information or services in a computer system)

Image Handling

As we mentioned above one feature that Parzoof support is uploading pictures. To manage

the uploaded pictures, we renamed every picture with a GUID (Globally Unique Identifier).

This naming convention promises that there will be no name collisions while trying to upload

a picture. In addition we stored all the pictures at the same location, so in a case of

intrusion, the intruder will not be able to know which data belongs to which user , makes it

much harder for him to find the information he needs.

We created a costum control to handle the pictures and to able to view them in a thumbnail

view. We also created support for paging through the picture collection on our own. Paging

19

is done by clicking on 'Next' and 'Previous' links, while the current page number and the

total number of pages are displayed. This paging works also in thumbnail view and in single

picture view.

In order to create paging functions, we needed to pass small bits of information between the

pages, such as 'Current Page' and 'Total number of Pages'. Instead of using the Session for

this, we used a lighter alternative – the QueryString. This stores the textual variables we

want to pass in the URL address itself. This is how the URL address would look like:

And the picture page with paging in thumbnail view:

20

Tier 3: Presentation Layer

XHTML & CSS

Designing a modern web site in a standard compliant way means to separate structure from

appearance. This means that the HTML code should not contain anything regarding the

visual style of the web page, but be written what is was originally meant to do – define

structure. To put an emphasis on writing HTML for structure only, XHTML is used instead of

HTML. XHTML is basically HTML that is written according to XML rules, which are much

stricter than plain HTML.

As for appearance – this is where CSS (cascading style sheets) comes into play. This

determines how the site will look like and 'feel' to the user.

There are several advantages in this separation:

1. XHTML code that defines structure only is much easier to read, maintain and

manipulate when needed.

2. A separate object for managing appearance (the CSS) means we can change the

entire way the site looks without having to change anything in the XHTML code, and

that we can change structure and know how it will look.

Master Pages

To create the illusion that the user is inside one big entity which is Parzoof, regardless of

which page he is currently viewing, we use Master Pages. A Master Page defines a 'frame' in

which all other pages run in. This frame gives the websites its 'feel'.

All of the above is the Master page (StudentMaster.Master), which consists of two buttons

for 'Home' and 'Inbox', a login status control, the website logo, the current user and a menu

for browsing the site.

21

Custom Controls

We created a variety of custom controls. These have several advantages:

• Reusability – The same control can be used across different pages without having to

be rewritten. It is also good for the user who recognizes something he has seen

before and knows how to use.

• Simplicity – It is easier for the developer to work with a group of controls that were

combined to one control if the containing control fulfills certain logic.

• Programming advantages – A custom control is a class, which can have properties

and methods just like any other class, and therefore can expose an interface for the

web page to work with.

These are the custom controls we created:

1. ctrlLogin.ascx – This control is in charge of showing the login status of the student. If

a user is logged in, it gives him an option to log out.

2. ctrlUserDisplay.ascx – This control is in charge of showing a box with a picture and

some personal details of one student, and is used in many places on the site.

3. ctrlUserDisplayMini.ascx – This control is the downscaled version of

ctrlUserDisplay.ascx.

4. ctrlPublicMessage.ascx – This control is used to present public messages with the

details of the message and the message sender.

22

5. ctrlPublicMessageCompose.ascx – This control is designed to look like

ctrlPublicMessage but with the functionality of sending a message, not displaying it.

6. ctrlInboxMessage.ascx – This control displays previews of private messages in the

inbox. It shows the subject of the message, with details of the sender and a

checkbox for deleting the message.

Pages

Essentially, everything comes down to the web pages. They are what the user sees. These

are the web pages we created:

1. Login.aspx – This is the first page the user sees after entering the web site's url

address. This page asks him for his username/password.

2. Registration.aspx – If the user isn't registered he comes here, fills out his personal

details, chooses a passwords and registers.

3. Main.aspx – This is the first page the user sees after logging in. This page displays the

student's profile page. After logging in the student sees his own main page, and if he

selects a friend he sees his friend's main page.

4. MyProfile.aspx – This page exists to let students update their personal details.

5. ChangeEmailPassword.aspx – From MyProfile.aspx students are redirected here if

they want to change their login email / password.

6. Friends.aspx – This page displays the viewed student's list of friends.

7. Inbox.aspx – Displays previews of all the messages that the logged in user received.

8. PrivateMessage.aspx – Displays a full personal message.

9. PrivateMessageCompose.aspx – Here the user composes a new private message.

10. Pictures.aspx – Here students can watch and upload pictures. Pictures are displayed

as thumbnails and the collection of pictures can be paged through.

23

11. PicturesSingle.aspx – If a thumbnail is clicked in Pictures.aspx then the single picture

is displayed bigger on this page.

Suggestions for enhancement

• AJAX - The next natural step would be moving to AJAX. This website acts and feels

like a moderns Web 2.0 site, but with AJAX it would really improve.

• Improved Image handling – Real thumbnail creation with image resizing upon

upload, image size ratio consistency.

• Email notifications – use emails to authenticate registration and to notify the user of

new messages he received.

• Adding profile configuration options such as public profile for everyone to see vs.

private profile that only friends can view.