4.

DESIGN

4.1. INTRODUCTION
The project Social Networking Site is a web based application that can be accessed throughout the world and provide a variety of ways for users to interact, such as personal profiles, groups, photos, etc. Social-networking sites help users "maintain" existing (and new) offline relationships. The Design Document should be able to adequately serve as training material for new project members, imparting to them enough information and understanding about the project implementation. The Design Phase provides a complete description the UML Diagram of the Social Networking Site.

4.2. UML DIAGRAMS

Unified Modeling Language Diagram (UML Diagram) is designed to let developers and customers view a software system from a different perspective and in varying degrees of abstraction.

4.2.1. STRUCTURAL DIAGRAM

Structural Diagram includes class diagram, object diagram, component diagram and deployment diagram. All these diagrams are discussed in below sections.

4.2.1.1. CLASS DIAGRAM

A Class Diagram gives an overview of a system by showing its classes and the relationships among them. Class diagrams are static model views. They display what interacts but not what happens when they do interact.

Name/ College Name / Social Networking Site

Page 27

p:profile L:login/ v:verify u:use r

Site

r:registe r

u:user home page

Store Info

d:d b

m:message

a:addres s book

c:community

p:pic s

f:frien ds

Register

Verify

Login Goto HomePg Links Edit Send and Receive Msg

Edit and View Contact Create and Post topics Upload and View Pic Add and Search

Logoff

Figure : Class Diagram

4.2.1.2. OBJECT DIAGRAM

Although we design and define classes, in a live application classes are not directly used, but instances or objects of these classes are used for executing the business logic. A pictorial representation of the relationships between these instantiated classes at any point of time (called objects) is called an "Object diagram." It looks very similar to a class diagram, and uses the similar notations to denote relationships. If an object diagram and a class diagram look similar. If you looked at a class diagram, you would not get the picture of how these classes interact with each other at runtime, and in the actual system, how the objects created at runtime are related to the classes. An object diagram shows this relation between the instantiated classes and the defined class, and the relation between these objects, in the logical view of the system. Page 28

Name/ College Name / Social Networking Site

These are very useful to explain smaller portions of your system, when your system class diagram is very complex, and also sometimes recursive. Use Object Diagram shows instances instead of classes. They are useful for explaining small pieces with complicated relations, especially recursive relationships.

4.2.1.3. COMPONENT DIAGRAM

Component Diagram displays the high level packaged structure of the code itself. Dependencies among components are shown, including source code components, binary code components, and executable components. Some components exist at compile time, at link time, at run times well as at more than one time.

User Login

Registration

Generalization

Dependency

Database Profile Friends

Messages

Community

Pics

Address

Figure :

Name/ College Name / Social Networking Site

Page 29

Component is a code module. Component Diagrams are physical analogies of class diagram.

4.2.1.4. DEPLOYMENT DIAGRAM

Deployment Diagram displays the configuration of run-time processing elements and the software components, processes, and objects that live on them. Software component instances represent run-time manifestations of code units. Application Server Client Profile User Login Message Database Database Server

Pics Verify

Friends

Registration

Community

Address

Figure : Deployment Diagrams show the physical configuration of software and hardware.

4.2.2. BEHAVIORAL DIAGRAM

Behavioral Diagram includes use case diagram, sequence diagram, collaboration diagram, state chart diagram and activity diagram. All these diagrams are discussed in below sections. Name/ College Name / Social Networking Site Page 30

4.2.2.1. USE CASE DIAGRAM

Use Case Diagrams describes what a system does from the standpoint of an external observer. The emphasis is on what a system does rather than how. They are closely connected to scenarios. A scenario is an example of what happens when someone interacts with the system.

Social Networking Site Site Home Page Login/Verification User Home Page Administrator Profile Photo Actor Message Friends Community Logout

Figure : Use Case Diagram

A use case diagram is a collection of actors, use cases and their communications. Actors are simply roles that people or objects play. A use case is a summary for a single task or goal. An actor is who or what initiates the events involved in the task. The connection between actor and use case is a communication. Page 31

Name/ College Name / Social Networking Site

Use Case Diagrams are helpful in three areas - Determining Features (Requirements), Communicating with Clients and Generating Test Cases

4.2.2.2. SEQUENCE DIAGRAM

A sequence diagrams are dynamic model views. Sequence Diagram displays the time sequence of the objects participating in the interaction. This consists of the vertical dimension (time) and horizontal dimension (different objects).
Login/ Verify User
User HomePg

Register

Profile

Message

Address Book

Friends and Comunity

Pic

Logout

Figure: Sequence Diagram

Sequence Diagrams are organized according to time. The time progresses as you go down the page. The objects involved in the operation are listed from left to right according to when they take part in the message sequence. Each vertical dotted line is a lifeline, representing the time that an object exists. Each arrow is a message call. An Page 32

Name/ College Name / Social Networking Site

arrow goes from the sender to the activation bar of the message on the receivers lifeline. The activation bar represents the duration of execution of the message.

4.2.2.3. COLLABORATION DIAGRAM

A distinguishing feature of a Collaboration diagram is that it shows the objects and their association with other objects in the system apart from how they interact with each other.
Profile
5.1:profile

Message

2:enter details

5.2:Msg

Pics Register User

1:Site 5.3:Pics 3:now login

Login/Verify

User Home Page

5.4:Contacts

Logout 6:Logout

4: after verification

Address Book
5.6:Community 5.5:Friends

Community Friends

Figure : Collaboration Diagram

A Collaboration diagram is easily represented by modeling objects in a system and representing the associations between the objects as links. The interaction between the objects is denoted by arrows. To identify the sequence of invocation of these objects, a number is placed next to each of these arrows. Name/ College Name / Social Networking Site Page 33

4.2.2.4. STATE CHART

Objects have behavior and state. The state of an object depends on its current activity or condition. A State Chart Diagram shows the possible states of the object and the transitions that cause a change in state.

Login

Fail

Verify
True

User Home Page

Link Link

Link

Profile Messages

Link

Link

Link

Community Pics Address Book Friends

Edit Profile

Send Msg

Receive Msg

Add and View Pics

Add and View Contact

Invite and Accept

Search and Join

Create Topic and Post Reply

Logout

Figure : Flow Chart Diagram

4.2.2.5. ACTIVITY DIAGRAM

An Activity Diagram displays a special state diagram where most of the states and most of the transitions are triggered by completion of the actions in the source states. This diagram focuses on flows driven by internal processing. It focuses on the flow of Page 34

Name/ College Name / Social Networking Site

activities in a single process. The activity diagram shows how the activities depend on one another.

Login

Profile

Messages

Pics

Address Book

Friends and Community

Edit Profile

Send Msg

Receive Msg

Add Pics

View Pics

Add Contact

View Contact

Search and Add

Logout

Figure: Activity Diagram

4.4. CONCLUSION
The design phase document transforms detailed requirements into complete detailed system design document. It successfully focuses on how to deliver the required functionality.

***

Name/ College Name / Social Networking Site

Page 35