parzoof - israel institute of technologynssl.eew.technion.ac.il/files/projects/2006spring/ajax...
TRANSCRIPT
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.