Sie sind auf Seite 1von 84

Knowledge & Technology

Design and Development of Community Based Social


Networking
A Project Submitted in Partial
fulfillment for the requirements of the
degree of
Bachelor of Science
in
Computer Science and Engineering

By
Tarek Al Zihad
Id No: 151316
Abu Md. Abrar Zahin
Id No: 151370
Shimul Kumar
Id No: 151372

To
Mohammed Golam Sarwar Bhuyan
Associate Professor

Department of Computer Science & Engineering

Bangladesh Army University of Engineering & Technology


Qadirabad, Natore-6431
February, 2019
Knowledge & Technology

Department of Computer Science and Engineering


Bangladesh Army University of Engineering & Technology

CERTIFICATE

This is to certify that the project entitled “Design and Development of Community
Based Social Networking” A project by “Tarek Al Zihad”, 151316, “Abu Md. Abrar
Zahin”, 151370, “Shimul Kumar”, 151372, has been accepted as satisfactory in partial
fulfillment of the requirement for the degree of Bachelor of Science in Computer
Science and Engineering on February, 2019.

Project Supervisor

…………………………..

Mohammed Golam Sarwar Bhuyan

Associate Professor

Department of Computer Science and Engineering

Bangladesh Army University of Engineering & Technology

i
Knowledge & Technology

Department of Computer Science and Engineering


Bangladesh Army University of Engineering & Technology

DECLARATION

I thereby declare that my project entitled “Design and Development of Community


Based Social Networking” is the result of our own work and to the best of our
knowledge and belief, it contains no material previously published or written by another
person, nor material which to a substantial extent has been accepted for the awarded of
any other degree or diploma at CSE, BAUET or any other educational intuition, except
where due acknowledgement is made in the project.
We also declare that it was not published anywhere in the form of books, monographs
or articles. The other books, articles and websites, which we have made use of are
acknowledged at the respective place in the text.

Author(s)

………………………………..
Tarek Al Zihad

………………………………..
Abu Md. Abrar Zahin

………………………………..
Shimul Kumar

ii
ACKNOWLEDGEMENT

Firstly, we would like to express our heartiest thanks and gratefulness to almighty Allah
for his divine blessing makes us possible to complete this project successfully.
We are grateful to our supervisor Mohammed Golam Sarwar Bhuyan, Associate
Professor, Department of CSE, BAUET. Deep knowledge & keen interest of our
supervisor in the field of Web Development influenced us to carry out this work. His
endless patience, scholarly, guidance, continual encouragement, constant and energetic
supervision, constructive criticism, valuable advice, reading many inferior drafts and
correcting them at all stage have made it possible to complete this project.

We would like to express our heartiest gratitude to Dr. Mirza A.F.M Rashidul Hasan,
Professor and Head (In-charge), Department of CSE, for his kind help to finish our
Project and also to other faculty member and the staff of CSE department of BAUET.
We would like to thank our entire course mate in BAUET, who took part in this discuss
while completing the course work.
Finally, we must acknowledge with due respect the constant support and patients of our
parents.

Tarek Al Zihad
ID: 151316

Abu Md. Abrar Zahin


ID: 151370

Shimul Kumar
ID: 151372

iii
ABSTRACT

This project work discusses about the implementation of social networking site for
sharing knowledge among professionals. The type of social space available to users can
provide a more personalized and interactive experience for educative purpose. The
growing demand of information in the industry makes it very important for the
Professionals to be up-to-date. Thus, a platform where professionals can interact with
other peers from their same field would prove to be a great benefit for them. In this
project a social networking site exclusive for professionals has been created whereby
people from the same profession or industry would be able to socialize, collaborate and
share their knowledge. Also, it would be a hub to share information about all the
ongoing activities in industry, in private and business contexts. This paper describes the
features implemented in this project and presents a glimpse of how the website work.

iv
Table of Contents
Chapter Titles Page
No.

Certificate --------------------------------------------------------------- i
Declaration ------------------------------------------------------------- ii
Acknowledgement ------------------------------------------------------ ii
Abstract ------------------------------------------------------------------ iv

Chapter 1: Background of Social Networking Platforms

1.1 Introduction ---------------------------------------------------------- 1


1.2 Taxonomy of Social Software Application ---------------------- 1
1.3 Objective ------------------------------------------------------------- 3
1.4 Features provided in Latest Release ------------------------------ 4

Chapter 2 Project Management Methodology

2.1 Introduction ---------------------------------------------------------- 5


2.2 Initial Study ---------------------------------------------------------- 6
2.3. Determining User requirement ----------------------------------- 7
2.4. Need Identification ------------------------------------------------- 8
2.5. Problem Identification --------------------------------------------- 8
2.5.1. General Problem ------------------------------------------------- 8
2.5.2. Technical Problem ----------------------------------------------- 8
2.5.3. Financial Problem ------------------------------------------------ 9

Chapter 3 Feasibility Study

3.1. Introduction --------------------------------------------------------- 10


3.2 Stages of Feasibility Study ---------------------------------------- 10
3.2.1 Behavioral Feasibility -------------------------------------------- 10
3.2.2 Technical Feasibility --------------------------------------------- 11
3.2.3 Economical feasibility ------------------------------------------- 11
3.3 Existing System ----------------------------------------------------- 11
3.4 System Attributes --------------------------------------------------- 12

Chapter 4 Requirement Analysis

4.1 Fact Finding --------------------------------------------------------- 20


4.2 Fact Finding techniques -------------------------------------------- 20
4.2.1 Interviewing ------------------------------------------------------- 20
4.2.2 Observation -------------------------------------------------------- 21
4.2.3 Questionnaires ---------------------------------------------------- 21
4.4. Three Tier Web Databases ---------------------------------------- 22

Chapter 5 Project Requirement

5.1. Introduction---------------------------------------------------------- 24
5.2 Languages ------------------------------------------------------------ 24
5.3. Supporting Framework and Technique ------------------------- 26
5.4 Designing Tools ----------------------------------------------------- 28
5.5 Database -------------------------------------------------------------- 29
5.6. Server ---------------------------------------------------------------- 30
5.7 Developing Studio/Tools ------------------------------------------ 31
5.8. Database and Server Configuring Tools ------------------------ 32

Chapter 6 Design Process

6.1 Introduction ---------------------------------------------------------- 34


6.2 Logical Design ------------------------------------------------------ 34
6.3 ER Diagram ---------------------------------------------------------- 35
6.4 Use Case Diagram -------------------------------------------------- 38
6.5 DFD ------------------------------------------------------------------- 41

Chapter 7 Software Engineering Methodology

7.1. Software Process Model Selection ------------------------------- 43


7.2. Tools and Technology Used for Development ----------------- 43

Chapter 8 Implementation Details

8.1 Sample Source Code ----------------------------------------------- 45


8.1.1 Homepage --------------------------------------------------------- 45
8.1.2 Profile Page -------------------------------------------------------- 53
8.1.3 Community Page ------------------------------------------------- 56
8.1.4 User Controller ---------------------------------------------------- 57
8.2 Screenshots ---------------------------------------------------------- 60
8.3 Database -------------------------------------------------------------- 65

Chapter 9 Testing

9.1 Test Data Implementation and Their Result On ---------------- 67


9.2 Test Cases ------------------------------------------------------------ 70
Chapter 10 Discussion and Future Scope

10.1 Discussion ---------------------------------------------------------- 73


10.2 Future Scope ------------------------------------------------------- 73

References ---------------------------------------------------------------- 74
List of Figures Page
No

1.1. Basic Functionalities of Social Software ------------------------ 2


1.2. Categorization of SRNS Types ----------------------------------- 3
2.1. Agile Methodology ------------------------------------------------ 6
4.1. Three Tier Web Database ------------------------------------------ 22
5.1. REST API Process -------------------------------------------------- 28
5.2. XAMPP --------------------------------------------------------------- 30
5.3. PHPSTORM --------------------------------------------------------- 31
5.4. HeidiSQL Connection to DB ------------------------------------ 33
5.5. DB through HeidiSQL -------------------------------------------- 33
6.1. Logical Design ----------------------------------------------------- 34
6.2. ER diagram of the system(C2C) --------------------------------- 35
6.3. ER diagram of the system(C2C) part 1 ------------------------- 36
6.4. ER diagram of the system(C2C) part 2 ------------------------- 36
6.5. ER diagram of the system(C2C) part 3 ------------------------- 37
6.6. Use case Diagram for Login/Registration ----------------------- 38
6.7. Profile page ---------------------------------------------------------- 38
6.8. Community Page --------------------------------------------------- 39
6.9. Photo page ----------------------------------------------------------- 39
6.10. Homepage ---------------------------------------------------------- 40
6.11. 0 level DFD -------------------------------------------------------- 41
6.12. level 1 DFD --------------- ----------------------------------------- 42
8.1. Login page screenshot ---------------------------------------------- 60
8.2. Sign up Page --------------------------------------------------------- 60
8.3. Personal Information save page ----------------------------------- 61
8.4. Setting Page ---------------------------------------------------------- 61
8.5. Status update page -------------------------------------------------- 62
8.6. Friend Search -------------------------------------------------------- 62
8.7. Friend pending request --------------------------------------------- 62
8.8. Timeline -------------------------------------------------------------- 63
8.9. Message Notification ----------------------------------------------- 63
8.10. Live chat ------------------------------------------------------------ 63
8.11. Friend List ---------------------------------------------------------- 64
8.12. Community Hub --------------------------------------------------- 64
8.13. Profile Page --------------------------------------------------------- 65
8.14. DB tables ----------------------------------------------------------- 65
9.1. Flow graph ---------------------------------------------------------- 67
List of Tables

Table 9.1: Login Test Case Table ------------------------------------- 70


Table 9.2: Registration Test Case Table------------------------------ 71
Table 9.3: Edit Profile Test Case Table ------------------------------- 72
Chapter 1

Background of Social Networking Platforms

1.1. Introduction

We know about the increasing use of social networking sites, people use various social
media platforms depending on their requirements and interest. Social media is a
dynamic platform that can be used in so many ways to share news, knowledge,
entertainment etc. Social network is the mapping and measuring of relationships and
flows between people, groups, organizations, computers, URLs, and other connected
information/knowledge entities. The nodes in the network are the people and groups
while the links show relationships or flows between the nodes. Social network provides
both a visual and a mathematical analysis of human relationships.

Social Networking Website project itself is a huge project comprising various features
like profile updating, friend’s list organization and various other application to enhance
the overall look and feel of the website. However, in this project we are basically
working on two essential feature or module (professional hub & communication with
same peers). Professional hub module maintains a sharing platform with peers from
same industry.

Communication with same peer’s module maintains the friend list with same
community, handle request and send request with other users. Profiles, Friends lists and
Community sharing platform are three key features on this social network sites. The
other is a public commenting feature ('Testimonials', 'Comments'). This feature allows
individuals to comment on their Friends' posts. These comments are displayed
prominently and visible for anyone who has access to that profile.

1.2. Taxonomy of Social Software Application

Social software denotes a class of web-based tools that allow for information exchange,
mass interaction, and collaboration (Green and Pearson, 2005; Plotnick, White and

1
Plummer, 2009; Raeth, Urbach, Smolnik and Zimmer, 2009). Most of the existing
frameworks have attempted a categorization along three basic functionalities (Koch and
Richter, 2007): identity and network management, information management, and
communication. Existing social software applications represent these three basic
functionalities to a varying degree

Information Management

Wikis

Social Tagging

Social Bookmarking

Social Network Sites

Weblogs

Microblogging

Yellow Pages Instant Messaging

Identity and Network Management Communication

Yellow Pages Instant


Figure 1.1. Basic Functionalities
Messaging of Social Software (cf. Koch and Richter, 2007)

In addition to the basic functionalities, the purposes of this site differ and that this
difference have an influence on the provided functionalities. Hence, in order to derive
a taxonomy of this site, we clustered other social networking sites according to the
purpose and functionalities. Three distinct types of Social Networking Sites were
revealed which are introduced subsequently.

• Public social networks like Facebook and Twitter – good for making contact
with customers and prospects

2
• Social extranets including customer communities, for deeper communication
and collaboration with customers, and private business-to-business networks for
communication with partners and B2B customers.
• Employee networks for internal company communication.

Our social network platform falls in public social network category. The purpose of the
site differs from the other sites in this category. As this social networking site focuses
on collaborative of professionals. A person will be able to communicate with peers from
same field. In addition, user will be able to be friend with each other inside their
community. They will be able to collaborate with each other.

Public Social network


Connect with customers
Resolve simple issues

Social extranet
Deeper, more focused
Engagement

Social intranet
Share Knowledge
Respond better

Figure 1.2. Categorization of SRNS Types According to the Extended


Framework

1.3. Objectives

Some of the enhanced purposes that will be immediately obvious are:

➢ To share information between professionals as a social network.

3
➢ To post statuses, photos, share information.
➢ To connect other users if they are on same profession.
➢ To send friend request when they are on same community.

1.4. Features provided in Latest Release are:

List of Basic Features

• User Profile. (Personalize your profile with status, updates, photos, albums etc.)
• Messages. (Text/chat)
• Communities
• Add and Remove friends.
• Get notified when friends like or comment on your posts, photos, videos etc.
• News Feed
• Community News Feed
• Timeline Post
• Photo upload
• Friends activity
• Save
• Comment
• Like
• Tag
• Search
• Friends profile view
• Search for friend
• Be friend with only same community hub

4
Chapter 2

Project Management Methodology

2.1. Introduction

In software engineering, a software development process is the process of dividing


software development work into distinct phases to improve design, product
management, and project management. It is also known as a software development life
cycle.

Agile software development refers to a group of software development methodologies


based on iterative development, where requirements and solutions evolve through
collaboration between self-organizing cross-functional teams. Below are the most
frequently asked questions around Agile and Scrum, answered by our experts. Agile
methodologies are based on four core principles. These methodologies are rooted in
adaptive planning, early delivery and continuous improvement, all with an eye toward
being able to respond to change quickly and easily [1].

Usually, our project is under the Agile methodology share the following key patterns:

• We are Product Owner – we are committed to the product’s success and we will
dedicate time to its development: namely, define the overall vision, features and
deadlines.
• We chose a team leader from our team to coordinate the team members and
drive the process smoothly
• The development process is split into short (2-3 weeks) incremental iterations
(so-called sprints) aimed at delivering a potentially shippable product at the end
of each cycle
• Based on virtually seeing what the software looks and feels like and being able
to gather feedback from others, we can initiate changes after each iteration

5
• We used sprint planning meetings to discuss the results of the previous sprint,
create a sprint backlog (number of tasks to be fulfilled during the forthcoming
sprint) and update the product backlog
• Daily meetings are held to streamline collaboration ourselves by discussing
what has been done since the last meeting, what will be done today and what
the stumbling blocks are

Fig 2.1: Agile Methodology

2.2. Initial Study

A methodology is a model, which we will use for the design, planning, implementation
and achievement of this project objectives. There are different project management
methodologies to benefit different projects

Following are the most frequently used project management methodologies in the
project management practice:

• Adaptive Project Framework


• Agile Software Development
• Crystal Methods

6
• Dynamic Systems Development Model (DSDM)
• Extreme Programming (XP)
• Feature Driven Development (FDD)
• Information Technology Infrastructure Library (ITIL)
• Joint Application Development (JAD)
• Rapid Application Development (RAD)
• Scrum
• Spiral
• Waterfall (Traditional)

Selecting the most suitable project management methodology is a tricky task. When it
comes to selecting an appropriate one, there are a few dozens of factors we have to
consider. Each project management methodology carries its own strengths and
weaknesses.

Therefore, there is no good or bad methodology and what we should follow is the most
suitable one for our project management requirements.

2.2. Determining User requirement

High level requirements that describe what a user can achieve. These are the needs that
the system fulfils.

• Users can post a textual update of their current mood or status.


• Users can choose whether the post is share on their timeline or community hub.
• Users are presented with a list of posts made by people they are friends with.
• Users are only affiliated with their community hub.
• Users are only able to be friend with their community.
• Users can send message to their friends.
• Users are able to share information to their peers through community hub.

7
2.3. Need Identification

Needs Identification is the process of determining what and how a customer wants a
product to perform. Customer Needs are non-technical, and they reflect the customers’
perception of the product, not the actual design specifications, although frequently they
are closely related.

By following these methods, we gathered information about the needs of customer.

• A platform that will help professionals to connect with other professionals in


same field.
• Professionals will be able to collaborate with each other.
• Sharing information among themselves.
• They can communicate with each other by personal messaging.

2.5. Problem Identification

Problem analysis is the process of understanding and defining the problem to be solved.
Problem analysis is not problem solving! By problem analysis we can identify solutions
that conform to the needs and constrains of the problem.

2.5.1. General Problem

We have identified some problems of this project while analysis. These problems are
described below:

Scale: Scale of this project is very big for a small team.

Distributed Team: Every member of the team stays far from each other.

Quality: As this is final year project. The final quality of the product is not as good as
a consumer product.

8
Budgeting: The budget for this product is very high. But the developing team didn’t
get required budget.

2.5.2. Technical Problem

Some technical problems are-

• Manual bug finding


• 3rd Party frameworks Integration

2.5.3. Financial Problem

Almost no budget is given in this project. Thus, we only had to use open source tools.

9
Chapter 3

Feasibility Study

3.1. Introduction

A feasibility study is an analysis used in measuring the ability and likelihood to


complete a project successfully including all relevant factors. It must account for factors
that affect it such as economic, technological, legal and scheduling factors. The study
identifies the market for the project (if applicable), highlights key goals for the project
based on market research, maps out potential roadblocks and offers alternative
solutions, and factors in time, budget, legal and manpower requirements to determine
whether the project is not only possible but advantageous for us as a team.

3.2. Stages of Feasibility Study

There are mainly 4 types of feasibility study.

• Operational feasibility
• Technical feasibility
• Economic feasibility
• Schedule feasibility

3.2.1. Behavioral Feasibility

People are already using various social networking site. Since our website is similar to most of
the social network framework. Since they are acceptable by people. It is proven to be
operationally feasible.

10
3.2.2. Technical Feasibility

We can strongly say that it is technically feasible, since there will not be much difficulty
in getting required resources for the development and maintaining the system as well.
All the resource needed for the development of the site as well as the maintenance of
the same is available in the organization here we are utilizing the resources which are
available already.

3.2.3. Economical feasibility

As a part of this, the costs and benefits associated with the proposed system are
compared and the project is economical feasible only if tangible and intangible benefits
outweigh the cost. The cost for proposed social networking system is outweighing the
cost and efforts involved in maintaining the registers, books, files and generation of
various reports. The system also reduces the administrative and user difficulty. So, this
system is economically feasible.

3.3. Existing System

According to the definition above, the first recognizable social network site launched in
1997. SixDegrees.com allowed users to create profiles, list their Friends and, beginning
in 1998, surf the Friends lists. Each of these features existed in some form before Six
Degrees, of course. Profiles existed on most major dating sites and many community
sites. AIM and ICQ buddy lists supported lists of Friends, although those Friends were
not visible to others.

Six Degrees was the first to combine these features. Six Degrees promoted itself as a
tool to help people connect with and send messages to others. While Six Degrees
attracted millions of users, it failed to become a sustainable business and, in 2000, the
service closed. Looking back, its founder believes that Six Degrees was simply ahead
of its time

11
(A.Weinreich, personal communication, July 11, 2007). While people were already
flocking to the Internet, most did not have extended networks of friends who were
online. Early adopters.com explained that there was little to do after accepting Friend
requests, and most users were not interested in meeting strangers.

Classmates.com allowed people to affiliate with their high school or college and surf
the network for others who were also affiliated, but users could not create profiles or
list Friends until years later.

From 1997 to 2001, a number of community tools began supporting various


combinations of profiles and publicly articulated Friends. AsianAvenue, BlackPlanet,
and MiGente allowed users to create personal, professional, and dating profiles— users
could identify Friends on their personal profiles without seeking approval for those
connections (O. Wasow, personal communication, August 16, 2007). Likewise, shortly
after its launch in 1999, LiveJournal listed one-directional connections on user pages.
LiveJournal’s creator suspects that he fashioned these Friends after instant messaging
buddy lists (B. Fitzpatrick, personal communication, June 15, 2007)—on LiveJournal,
people mark others as Friends to follow their journals and manage privacy settings. The
Korean virtual worlds site Cyworld was started in 1999 and added SNS features in
2001, independent of these other sites (see Kim & Yun, this issue). Likewise, when the
Swedish web community LunarStorm refashioned itself as an SNS in 2000, it contained
Friends lists, guestbooks, and diary pages (D. Skog, personal communication,
September 24, 2007) [2].

3.4. System Attributes

Server Object

The Server class acts as a wrapper for all server functions for our social networking
site. It essentially acts as a link between all of the information such as accounts, account
details, pages, notes, etc to our database. When any other model object such as a page
is pulled from the server, a temporary copy is made. If that temporary copy is changed
in any way. The new version must be sent to the server in order to update the permanent

12
copy. The reason behind local copies is that all the necessary information for the object
is sent over in one easy-to-use package. Then the update to the database can be done all
at once by sending back that single object. There is no need for multiple functions or a
function that takes a large number of parameters.

Account Object

Each user who wants to use the site must create an account. This is the head class that
all other objects use to determine what a user does and when the user did it. The
account’s information has four purposes: hold the login information, hold friend
information, hold profile information, and hold privacy information with such a large
amount of information to keep track of, the Account class would be very large and
difficult to work with. Therefore, to ease the load, the Account class was broken up into
three different classes. There is the actual account class which keeps track of login
information and friend information. It also holds the other two classes within it. Profile
information was outsourced to the Account Details class, and privacy settings were
outsourced to the Privacy Settings class.

Personal Information Object

The Personal Information object is a helper class created whenever a new Account
object is created. The object contains all the information that shows up in the user’s
profile. The user can edit this by modifying his/her profile. Overall, this class has no
other purpose but to be a helper class to its account object.

Privacy Settings Object

A Privacy Settings object is the other helper class created whenever a new Account
object is created. This object contains all the privacy settings that a user has, such as
who can view his/her media or custom pages. This class is called any time a user visits
a profile or content created by another user. However, it does not directly interact with
the other model classes, only the view.

Chat Session Object, Event Object, Link Object, Note Object and Page Object
These objects contain unique information for a particular type of action a user performs.
All of these contain a reference to the account that owns them. Each object is a “working

13
copy” of an object in the Server. Anytime one of these objects is created on the Server,
an entry of its creation is added to the news feed database.

Message Object

A Message object is created when a user composes a new message to be sent to a friend.
After it is confirmed that the friend is located in the database, the Message object adds
its information to the database. When a user checks his or her inbox, a list of messages
that were sent to the user will be shown in descending order of when they were received.

Wall Post Object

A Wall Post object works very similar to a Message object. The only difference is that
the Wall Post objects are viewable to all friends of the user. Another difference is that
a Wall Post object can hold comments. If a user adds a wall post to his or her own
account, their status will change to the new wall post.

Friends

The most important feature is being able to add and remove friends. In our Social
Networking site, making friends is a fairly straightforward process. Users can type in
the name of a friend in the search bar at the top of their home page. The database is
queried for an account that has the search term contained in the full name, any media
files with the search terms in the description, any pages with the search terms in the
titles, any links with the search terms

in the titles, and any notes with the search terms in the title. For example, User A could
search for User B in the search bar. After clicking on User B’s profile, User A will see
a button that says Send Friend Request. Clicking on it will send an alert to User B that
User A wants to be a friend. The friend request will now be in the friends list of User
B, where he/she can either accept it or ignore it, letting it sit there indefinitely. If user
B accepts the request, User A will be added to User B’s friends list and vice versa.
Being friends has its advantages. For example, only friends can chat to each other. Also,
friends can view any part of a profile that is marked as friends only. Finally, for a user

14
to view his/her friends and incoming friend requests, he/she just clicks on the friend’s
tab which brings up a frame.

Account Creation

When a user accesses the site for the first time, he/she must create an account before
using any of the site features. The account creation process is broken into three sections.
The first section deals with the login information and is required for the user to fill out.
This includes the email, password, and password confirmation. The second section
deals with information about who you are such as name, location, and gender. Most of
these fields are optional except for your name and gender. It wouldn’t be much of a
social network if everyone was named anonymous. The final section deals with
information about the users likes, such as interests and activities. Unlike the other two
sections, this section is completely optional. Once the user clicks create account, a new
account, account details, and privacy settings are added to the server, and the user is
brought back to the login page

Privacy Options

Privacy is very important feature for some people, and social networking is no
exception to this. Our system provides three levels of privacy: open, friends only, and
closed. A feature with an open privacy level is public and may be viewed by anyone.
By contrast, a feature with a closed privacy level is completely private and can only be
viewed by the account owner. A feature with a friend only privacy level is fairly self-
explanatory. By default, al privacy levels are set to open

when a new account is created. To change privacy levels, the user can click on the
options tab on the top menu bar. The current features with privacy levels are media
share, account wall, user pages, notes, and the overall profile privacy.

When a user visits another profile, the profile owner is pulled from the database. Finally,
if the setting is closed, the function only returns true if the viewer profile is the page
owner. Once the function returns its answer the page will either do one of two things.
If the function returns true, the viewer is allowed to view this page, and it will load

15
normally. If the function returns false, the viewer is not supposed to view the page, and
it will redirect to an error page.

Chatting

One of the advantages of having friends is the ability to have live communications with
them via chat. When a friend is online, he/she will appear in the chat tab as an available
friend to chat with. To start a chat session, simply click on the name of the friend which
will begin a new chat session. The little bar at the bottom will change from chat disabled
to chatting with friend name as seen in the figure below. Also, the friend receiving the
chat will get a notification that a new chat session has started. Then the two friends can
chat with each other until one or both log out.

The chat feature is a little more complex than others as it requires a combination of
JavaScript and Ajax to work. When a user clicks on a friend name to begin a chat, a
chat request is sent to the database. On every page there is a Ajax function that queries
the server for any new chat requests once a second. It needs to be Ajax, so the client
can request for the server to run a check and return any relevant information. If it was
pure PHP, the page would never load completely, because the page cannot finish
loading until the server is done all preprocessing. The JavaScript portion of Ajax allows
the client to ask the server to do more processing after the page has been loaded.[3] If
there is a new chat request, a pop under is generated, notifying the receiver of the new
chat that is starting or a new pending chat if the user is in another chat. When a user
sends a message, another Ajax function is called, to alert the server that it needs to
update the chat session with a new message. At the same time, another Ajax function
is running to ask the server once a second if the chat session has been updated. Overall,
it is a lot of the client asking the server to send over any changes that exist.

Media Uploading

As people use their social networking account, they will want to be able to upload funny
or interesting images share with their friends. The media upload section will be located
at the media tab, where users are able to specify a file to upload as well as provide a
short description of the file to be uploaded. In order to prevent users from uploading
potentially malicious files such as executables, only certain file extensions are

16
supported. These allowed extensions cover popular image extensions such as png, jpg,
gif, and bitmap,

The inner workings of this uploading process are surprisingly simple, since the HTTP
server takes care of requesting the file from the client automatically. After the user
clicks upload, the file is sent to the server and stored in a temporary location. Through
PHP all information about these temporary files can be accessed through the $ FILES
variable. The temporary location is stored in that variable and can be used to pull the
file name and file extension.That extension is then checked against an array of allowed
extensions. If the extension is in the list, the file is then moved to a permanent location
in the media folder under a subfolder for the user’s account. If the extension is not on
the list, it is left in the temporary folder where it will be automatically deleted by the
server once the php script completes. [3].

Other features

All the other features, such as the wall pages, and notes are fairly similar. Their main
purpose is to add additional places to have places for additional content. All are created
using similar methods, and are stored similarly but are used for different purposes.

1. Wall

The wall is a place where the account owner can express his current feeling or thoughts
with a wall status. Other users can add their thoughts by creating wall posts that show
up

below the status. It is basically a way for many users to communicate publicly or simply
leave their thoughts about each other. [4].

2. Non-Functional Specification

• Secure access of confidential data by user name and password. This application
is secure for every kind of its users, because if any user logout from any session
then nobody will be able to access his profile without knowing his confidential
password.
• 24 X 7 availability

17
• Better component design to get better performance at peak time.
• The database used here is robust, reliable & fast. So, users will have to wait for
the output very short time.
• This application can be accessed from any type of platform.
• There is no case of redundancy in the database so it will not take extra memory
space.
• Username & password are sent to the users via email after registration.

18
Chapter 4

Requirement Analysis

Analysis of requirements is an iterative procedure that starts with a brainstorming


meeting and continues through the course of development.

In each iteration, the requirements document will improve and become increasingly
useful for driving the implementation of the site. After completing the initial
brainstorming sessions and identifying general requirements, a conceptual design is be
developed using wireframes as an illustration of your potential approach.

• Editing, Updates and Administration: User will be able to update their profile
from their timeline. They will be able to communicate with each other through
community hub.
• Sitemap and Navigation: It is a dynamic website. The website will be updated
through AJAX. All the main functionality of the website can be browsed
through homepage.
• Content Management: The content of the website is updated by MySQL
database. No extra third-party tool is needed.
• Tracking: There is friends activity sidebar. From there user will be able to see
the activity of friends.
• Search Engine Optimization’s key is not presented in the website. It will be
updated in future.
• Styling and Design: The design of the website is very simple. Every user will
be able to easily access the website functionalities.
• Security: Security of the website is fair. User will be able to access without
password. A user will be able to post to another user’s timeline.
• Hosting: Now the website runs in local server. But in future it will be uploaded
and accessed through cloud server

19
• Maintenance and Support: This website is a dynamic website. And as a social
network website, it will be always needed to maintain. And if users are increased
the support also needs to be increased.
• Visitor Interaction: Visitors will not be allowed to accessed to the website.
Users need to confirm their profession. And needs to be signed up to access the
website. [5].

4.1. Fact Finding

The formal process of using techniques such as interviews and questionnaires to collect
facts about systems, requirements, and preferences is termed as fact-finding. In this
chapter, it will be discussed when a database developer might use fact-finding
techniques, and what types of facts should be captured. We present an overview of how
these facts are used to generate the main types of documentation used throughout the
database system development life cycle. Fact-finding is also used in case of database
design and the later stages of the lifecycle but to a lesser extent.

4.2. Fact Finding techniques

There are seven common fact-finding techniques

• Sampling of existing documentation, forms and databases


• Research and Site visits
• Observation of the work environment
• Questionnaires
• Interviews
• Prototyping
• Joint requirements planning

4.2.1. Interviewing

Interviewing is the most frequently used, and usually most useful, fact-finding
procedure used. We interview to collect information from person face-to-face. There

20
can be several objectives for using interviewing such as finding out facts, verifying
those facts, clarifying these released facts, generating enthusiasm, getting the end-user
involved, identifying requirements, and gathering ideas and opinions. However, for
using the interviewing we needed to practice proper communication skills for dealing
effectively with people who have different values, priorities, opinions, motivations, and
personalities.

We interviewed multiple persons about what they want from a social network. We
interviewed professionals. We wanted to know how they want to collaborate through
digital media.

We gathered some information’s about this. We have found out that people are
interested about meeting other professionals through social media. Some professionals
want to collaborate through digital media. They want to get help from experienced
professionals from the same field.

4.2.2. Observation

Observation is one of the most successful fact-finding techniques carried out for
understanding a system. Using this technique, it is achievable to either participate in or
observe a person perform activities to learn about the system.

We observed other social network services as well. And we tried to implement the
missing features from them.

4.2.3. Questionnaires

Another fabulous fact-finding method is to conduct surveys through questionnaires.


Questionnaires are special-purpose documents that allow facts to be gathered from a
large number of people while upholding some control over their responses. When
dealing with a large number of listeners or audience, no other fact-finding technique
can tabulate the same facts so efficiently.

21
We have done this method by asking questions to other professionals. We wanted to
know about their view about a community based social network.

4.3. Three Tier Web Databases

Fig 4.1: Three Tier Web Database

Our website is based on three tier web database architecture. Below it is discussed-

First Tier: The first tier in this 3tier web architecture framework for efficient web
application development is the client tier. This tier includes is a web hosting that
includes the HTML recourses that has the necessary user interfaces to enhances the
client's experience, as it is the computer that requests the resources, equipped with the
most attractive user interface in adherence to the client's taste depending on the industry
of this business website. The first tier in the three-tier system of architecture comprises
of web browsers for HTTP clients that efficiently interacts and co-ordinates with the
Web servers using the most convenient and standardized protocols. This tier also has
the necessary built-in feature system which efficiently has more rich-features than the
essential display html page. This tier essentially interacts with the client by displaying
data of various kinds. Only few of the application logic in form of java script are
essentially executed by browser, nevertheless having limited feature and usage.

Second Tier: The second or the middle tier comprises of the most magnificent and the
most important part of the application logic. It essentially plays the role of bringing

22
together the three layers of the three-tier web architecture. While technically processing
the various inputs and selections received by the clients it plays the role of interaction
with the vast database present in the third tier. The middle or the second tier in the three-
tier web architecture contains the web server, the web scripting language and the
scripting language engine. The Web server most often processes the HTTP requests and
formulates reciprocation in the scripting language running on the scripting engine. This
tier has the technical efficiency to deal and comprehend the dynamic content and built-
in libraries that accentuates the faster access of the database to extract results.

Third Tier: The third tier of the database tier in the 3-tier system is made up of the
DBMS in other words the database management system and the database. This complex
application layer consists of the application logic while exchanging data in between
tiers in the three tier Web Application, making the top tier mostly a thin client or a
browser. The first tier is therefore the data server, providing clients an application server
with all the necessary data that it may require in order to function. [6].

23
Chapter 5

Project Requirement

5.1. Introduction

The process to gather the software requirements from client, analyze and document
them is known as requirement engineering. The goal of requirement engineering is to
develop and maintain sophisticated and descriptive ‘System Requirements
Specification’ document.

Requirement Engineering Process

It is a four-step process, which includes –

• Feasibility Study
• Requirement Gathering
• Software Requirement Specification
• Software Requirement Validation

In this chapter, we will discuss about the requirement of our project. We will use the
requirements engineering to gather knowledge about which tools, technique and
language will best for our website. The role of the application will be understood. We
must understand the specification to achieve a high-quality software.

5.2. Languages

Languages used in this project are described here-

Front-End:

• HTML: HTML is a computer language devised to allow website creation.


These websites can then be viewed by anyone else connected to the Internet. It
is relatively easy to learn, with the basics being accessible to most people in one
sitting; and quite powerful in what it allows you to create. It is constantly

24
undergoing revision and evolution to meet the demands and requirements of the
growing Internet audience under the direction of the W3C, the organization
charged with designing and maintaining the language. HTML consists of a
series of short codes typed into a text-file by the site author — these are the tags.
The text is then saved as a html file, and viewed through a browser, like Internet
Explorer or Netscape Navigator. This browser reads the file and translates the
text into a visible form, hopefully rendering the page as the author had intended.
Writing your own HTML entails using tags correctly to create your vision. You
can use anything from a rudimentary text-editor to a powerful graphical editor
to create HTML pages.

• Javascript: Javascript (JS) is a scripting language, primarily used on the Web.


It is used to enhance HTML pages and is commonly found embedded in HTML
code. JavaScript is an interpreted language. Thus, it doesn't need to be compiled.
JavaScript renders web pages in an interactive and dynamic fashion. This
allowing the pages to react to events, exhibit special effects, accept variable text,
validate data, create cookies, detect a user’s browser, etc. avaScript was created
over a period of ten days by Brandan Eich, a Netscape employee, back in
September 1995. Initially called Mocha, the language’s name was changed to
Mona and then LiveScript before eventually becoming known as JavaScript.
Initial versions of the language were limited exclusively to Netscape and only
offered limited functionality, but it’s continued to grow over time thanks in part
to the community of developers who continue to work with it.

• CSS: Short for cascading style sheets, CSS is a language used to describe
reusable styles for presenting documents written in a markup language. Its
concept was originated by Håkon Wium Lie in 1994. In December 1996, CSS
was made a specification by the W3C and today allows web developers to alter
the layout and appearance of their web pages. For example, CSS may be used
to change the font used in certain HTML element, as well as its size and color.
A single CSS file may be linked to multiple pages, which allows a developer to
change the appearance of all the pages at the same time.

25
Back-End

• PHP: PHP is probably the most popular scripting language on the web. It is
used to enhance web pages. With PHP, you can do things like create username
and password login pages, check details from a form, create forums, picture
galleries, surveys, and a whole lot more. If you've come across a web page that
ends in PHP, then the author has written some programming code to liven up
the plain, old HTML. PHP is known as a server-sided language. That's because
the PHP doesn't get executed on your computer, but on the computer, you
requested the page from. The results are then handed over to you, and displayed
in your browser. Other scripting languages you may have heard of are ASP,
Python and Perl. The most popular explanation of just what PHP stands for is
"Hypertext Pre-processor". But that would make it HPP, surely? An alternative
explanation is that the initials come from the earliest version of the program,
which was called Personal Home Page Tools.

5.3. Supporting Framework and Technique

Laravel: Laravel is an open-source PHP framework, which is robust and easy to


understand. It follows a model-view-controller design pattern. Laravel reuses the
existing components of different frameworks which helps in creating a web application.
The web application thus designed is more structured and pragmatic.

Laravel offers a rich set of functionalities which incorporates the basic features of PHP
frameworks like CodeIgniter, Yii and other programming languages like Ruby on Rails.
Laravel has a very rich set of features which will boost the speed of web development.

Advantages of Laravel

Laravel offers the following advantages, when we are designing a web application
based on it−

• The web application becomes more scalable, owing to the Laravel framework.

26
• Considerable time is saved in designing the web application, since Laravel
reuses the components from another framework in developing web application.
• It includes namespaces and interfaces, thus helps to organize and manage
resources.

AJAX: AJAX stands for Asynchronous JavaScript and XML. AJAX is a new technique
for creating better, faster, and more interactive web applications with the help of XML,
HTML, CSS, and Java Script.

• Ajax uses XHTML for content, CSS for presentation, along with Document
Object Model and JavaScript for dynamic content display.
• Conventional web applications transmit information to and from the sever using
synchronous requests. It means you fill out a form, hit submit, and get directed
to a new page with new information from the server.
• With AJAX, when you hit submit, JavaScript will make a request to the server,
interpret the results, and update the current screen. In the purest sense, the user
would never know that anything was even transmitted to the server.
• XML is commonly used as the format for receiving server data, although any
format, including plain text, can be used.
• AJAX is a web browser technology independent of web server software.
• A user can continue to use the application while the client program requests
information from the server in the background.
• Intuitive and natural user interaction. Clicking is not required, mouse movement
is a sufficient event trigger.
• Data-driven as opposed to page-driven.

REST API: REST stands for Representational State Transfer. REST is web standards-
based architecture and uses HTTP Protocol. It revolves around resource where every
component is a resource and a resource are accessed by a common interface using
HTTP standard methods. REST was first introduced by Roy Fielding in 2000.

In REST architecture, a REST Server simply provides access to resources and REST
client accesses and modifies the resources. Here each resource is identified by URIs/

27
global IDs. REST uses various representation to represent a resource like text, JSON,
XML. JSON is the most popular one.

Web services based on REST Architecture are known as RESTful web services. These
webservices uses HTTP methods to implement the concept of REST architecture. A
RESTful web service usually defines a URI, Uniform Resource Identifier a service,
provides resource representation such as JSON and set of HTTP Methods.

FIG 5.1: REST API Process

5.4. Designing Tools

SASS/SCSS: SASS/SCSS is a CSS preprocessor that runs on the server and compiles
to CSS code that browser understands. There are client-side alternatives to SASS that
can be compiled in the browser using JavaScript such as LESS CSS

Adobe XD: AdobeXD includes drawing tools, tools that enable us to define non-static
interactions, mobile and desktop previews, and sharing tools for giving feedback on
designs. It allows us to select a device-specific artboard size for starting a project. We
made some prototype design with this tool.

28
5.5. Database

MySQL

MySQL is a popular choice of database for use in web applications, and is a central
component of the widely used LAMP open source web application software stack (and
other 'AMP' stacks). LAMP is an acronym for "Linux, Apache, MySQL,
Perl/PHP/Python." Free-software-open source projects that require a full featured
database management system often use MySQL.

MySQL can be built and installed manually from source code, but this can be tedious
so it is more commonly installed from a binary package unless special customizations
are required. On most Linux distributions the package management system can
download and install MySQL with minimal effort, though further configuration is often
required to adjust security and optimization settings.

Though MySQL began as a low-end alternative to more powerful proprietary databases,


it has gradually evolved to support higher-scale needs as well. It is still most commonly
used in small to medium scale single-server deployments, either as a component in a
LAMP-based web application or as a standalone database server. Much of MySQL's
appeal originates in its relative simplicity and ease of use, which is enabled by an
ecosystem of open source tools such as phpMyAdmin. In the medium range, MySQL
can be scaled by deploying it on more powerful hardware, such as a multi-processor
server with gigabytes of memory.

There are however limits to how far performance can scale on a single server ('scaling
up'), so on larger scales, multi-server MySQL ('scaling out') deployments are required
to provide improved performance and reliability. A typical high-end configuration can
include a powerful master database which handles data write operations and is
replicated to multiple slaves that handle all read operations. The master server
synchronizes continually with its slaves so in the event of failure a slave can be
promoted to become the new master, minimizing downtime. Further improvements in
performance can be achieved by caching the results from database queries in memory

29
using Memcached, or breaking down a database into smaller chunks called shards
which can be spread across a number of distributed server clusters. [10]

5.6. Server

XAMPP: XAMPP is a free and open source cross-platform web server solution stack
package developed by Apache Friends, consisting mainly of the Apache HTTP Server,
MariaDB database, and interpreters for scripts written in the PHP and Perl
programming languages. XAMPP's designers intended it for use only as a development
tool, to allow website designers and programmers to test their work on their own
computers without any access to the Internet. To make this as easy as possible, many
important security features are disabled by default. XAMPP has the ability to serve web
pages on the World Wide Web. A special tool is provided to password-protect the most
important parts of the package. XAMPP also provides support for creating and
manipulating databases in MariaDB and SQLite among others.

Once XAMPP is installed, it is possible to treat a localhost like a remote host by


connecting using an FTP client. Using a program like FileZilla has many advantages
when installing a content management system (CMS) like Joomla or WordPress. It is
also possible to connect to localhost via FTP with an HTML editor.

FIG 5.2: XAMPP

30
5.7. Developing Studio/Tools

PhpStorm: PhpStorm is a commercial cross-platform IDE built by JetBrains on their


IntelliJ IDEA platform used mainly for PHP programming. It provides a feature-packed
editor for PHP, HTML, CSS and JavaScript. Some key features are on-the-fly code
analysis and error checking, syntax highlighting, code completion and extended code
formatting options. The PHP editor supports PHP 5.3 through 5.6 and PHP 7.0 through
7.3 and can be used for both modern and legacy PHP-based projects.

The functionality of PhpStorm can be expanded further by the user through plugins
created for the IntelliJ Platform. Further below we listed some useful plugins for
working with TYPO3 and explain how you can install them.

The development environment also provides support for SQL and databases, remote
deployment over FTP, SFTP, FTPS etc. with automatic synchronization, direct version
control system integration and for Vagrant, Docker, SSH console and other remote
tools.

PhpStorm also features tools for debugging and testing, for example through Xdebug
which is explained in detail further below.

FIG 5.3: PHPSTORM

31
5.8. Database and Server Configuring Tools

HeidiSQL: It is a client tool used by web developers for working with MySQL Server,
Microsoft SQL databases and PostgreSQL. It is free, Open Source for 9 years of active
development and very useful.

What all HeidiSQL can do-

HeidiSQL which is a client application can carry out a lot of data related tasks:

•Connect to multiple servers in one window

• Connect to servers via command line


• Connect via SSH tunnel, or pass SSL settings
• Create and edit tables, views, stored routines, triggers and scheduled events.
• Generate nice SQL-exports, compress these afterwards, or put them on the
clipboard.
• Export from one server/database directly to another server/database
• Manage user-privileges
• Import text-files
• Export table rows as CSV, HTML, XML, SQL, LaTeX, Wiki Markup and PHP
Array
• Browse and edit table-data using a comfortable grid
• Bulk edit tables (move to db, change engine, collation etc.)
• Batch-insert ascii or binary files into tables
• Write queries with customizable syntax-highlighting and code-completion
• Pretty reformat disordered SQL

32
Fig 5.4: HeidiSQL Connection to DB

Fig 5.5: DB through HeidiSQL

33
CHAPTER 6

DESIGN PROCESS

6.1. Introduction

The application comprises the following major modules:

Register to be a member Module: This module provides functionalities for those


people who wants to open an account. Applicants can post their views with personal
and professional details. They can also update the profile as frequently as required. The
member can also browse through the Friends profile available. Members can also get
message alerts when their friends message them.

Profile Module: This module provides functionalities related to members profile.


Logged users can see their details and if they wish to change any of their information,
they can edit it. [7].

6.2. Logical Design

The logical design is more conceptual and abstract than the physical design. In the
logical design, you look at the logical relationships among the objects.

WEB
AJAX Services
WEB Page
JSON

HTML LOGIC

FIG 6.1: Logical Design

34
6.3. ER Diagram

The following is the ER diagram of our project.

FIG 6.2: ER diagram of the system(C2C)

35
FIG 6.3: ER diagram of the system(C2C) part 1

FIG 6.4: ER diagram of the system(C2C) part 2

36
FIG 6.5: ER diagram of the system(C2C) part 3

37
6.4. Use Case Diagram:

Registration Get mail for


registration

Log in Validate
User

User

Fig 6.6: Use case Diagram for


Login/Registration

Add/Modify/delete
profile info

User

Fig 6.7: Profile page

38
Select Profession

View Community Page

Write / remove post on


community hub

User

Fig 6.8: Community Page

Delete/add photo

User

Fig 6.9: Photo page

39
Add friend

USER

Fig 6.10: Homepage

40
6.5. DFD: Below is the 0 level DFD for our project(C2C)

User

Community

Response
Received

Log in

View data Response


received

View message detail Process

Invitation Send

Entered new date or


existing data update

Fig 6.11: 0 level DFD

41
Level 1 DFD

Community

User Login
Database

Views
Personal
Details

Use
professional
detail

Views Mail
Message
Data table Details

Data table

Data table Data table

Fig 6.12: level 1 DFD

42
Chapter 7

Software Engineering Methodology

7.1. Software Process Model Selection

Agile model believes that every project needs to be handled differently and the existing
methods need to be tailored to best suit the project requirements. In Agile, the tasks are
divided to time boxes (small time frames) to deliver specific features for a release. [8].

Iterative approach is taken and working software build is delivered after each iteration.
Each build is incremental in terms of features; the final build holds all the features
required by the customer.

Agile Model – Principles:

Individuals and interactions − In Agile development, self-organization and


motivation are important, as are interactions like co-location and pair programming.

Working software − Demo working software is considered the best means of


communication with the customers to understand their requirements, instead of just
depending on documentation.

Customer collaboration − As the requirements cannot be gathered completely in the


beginning of the project due to various factors, continuous customer interaction is very
important to get proper product requirements.

Responding to change − Agile Development is focused on quick responses to change


and continuous development.

7.2. Tools and Technology Used for Development

Language: PHP, JAVASCRIPT

43
Framework: Laravel

Design Format: HTML, CSS

API: JASON, REST API

Other Technology: AJAX

DB Language: My SQL

Server Tool: XAMPP

Web Services: Apache

IDE: PHPSTORM

Versioning Control: GitHub

Networking protocols and data security: HTTP/HTTPS, MD5

44
Chapter 8

Implementation Details

8.1 SAMPLE SOURCE CODE

8.1.1 HomePage

1. <divclass="container">
2. <divclass="row timeline">
3. <divclass="col-md-3">
4. <divclass="col-md-12 profile followUser">
5. <divclass="profile-img text-center">
6. <ahref="{{ route('profile.view', ['id' => Auth::user()->id])
}}">
7. <imgsrc="{{ Auth::user()-
>getAvatarImagePath() }}" height="100px" class="img-circle">
8. </a>
9. <p>{{ Auth::user()->getFullName() }}</p>
10. </div>
11. @include('layouts.menu_links')
12. </div>
13. </div><!-- profile -->
14. <divclass="col-md-6 feed">
15. {!! Form::open(['id' => 'PostForm', 'method' => 'POST', 'action' =>
'PostsController@store', 'files' => 'true']) !!}
16. {!! Form::textarea('body', null, ['class' => 'form-control',
'required' => 'required', 'placeholder' => "What's on your mind?", 'rows' => '2']) !!}
17.
18. <divclass="textareaOptions">
19.
<liid="PostImageUploadBtn"class="pointer"><iclass="fa fa-lg fa-camera-retro"aria-
hidden="true"></i></li>
20.
<inputtype="file"id="image"name="image"style="display:none"/>
21. {{ Form::button('<iclass="fa fa-location-
arrow"aria-hidden="true"></i> Post', array('class'=>'btn btn-signature pull-right',
'type'=>'submit')) }}
22. </div>

45
23. <divclass="progress"style="display: none">
24. <divid="PostProgressBar"class="progress-bar
progress-bar-striped active"role="progressbar"aria-valuenow="45"aria-valuemin="0"aria-
valuemax="100">
25. </div>
26. </div>
27. <spanclass="help-block"id="PostErrors"style="display:
none;">
28. </span>
29. {!! Form::close() !!}
30.
31. @if (Auth::user()->getTimeline()->count())
32. <divclass="posts">
33. @foreach (Auth::user()->getTimeline() as $post)
34. @include('layouts.posts')
35. @endforeach
36. </div>
37. @endif
38. </div><!-- news feed -->
39. <divclass="col-md-3 sidebar">
40.
41.
42.
43. @if (Auth::user()->HasAnyFriendRequestsPending()->count())
44. <divclass="panel panel-default">
45. <divclass="panel-heading">
46. Friend Requests Pending
47. </div>
48. <divclass="panel-body">
49. @include('layouts.search_results',
array('users' => Auth::user()->HasAnyFriendRequestsPending()))
50. </div>
51. </div>
52. @endif
53.
54. @if (Auth::user()->notifications()->where('seen', 0)->count())
55. <divclass="panel panel-default"id="NotificationsPanel">
56. <divclass="panel-heading">
57. Notifications
58. </div>

46
59. <divclass="panel-body">
60. @foreach (Auth::user()-
>notifications()->where('seen', 0)->get() as $notification)
61. <p><ahref="{{
route('profile.view', ['id' => $notification->userFrom->id]) }}">{{ $notification->userFrom-
>getFullName() }}</a>
62. has
63. @if ($notification-
>notification_type == 'App\Like')
64. liked your
<aclass="smoothScroll"href="#PostId{{ $notification->notification->likeable->id
}}">Post</a>.
65. @else
66. commented
on your <aclass="smoothScroll"href="#PostId{{ $notification->notification->post->id
}}">Post</a>.
67. @endif
68. </p>
69. @endforeach
70. <pclass="text-
center"><buttonclass="btn btn-signature"id="NotificationsButtonSeen">Mark as
Seen</button></p>
71. </div>
72. </div>
73. @endif
74.
75. <divclass="panel panel-default">
76. <divclass="panel-heading">
77. Search for Friends
78. </div>
79. <divclass="panel-body">
80. <divclass="input-group">
81. {!! Form::text('q', null, ['class' =>
'form-control', 'placeholder' => 'Search for friends..', 'id' => 'q']) !!}
82. <spanclass="input-group-btn">
83. <buttonclass="btn btn-
default"type="button"id="SearchForFriendsButton"><iclass="fa fa-search"aria-
hidden="true"></i></button>
84. </span>
85. </div><!-- /input-group -->

47
86. <divid="SearchResults">
87.
88. </div>
89. </div>
90. </div>
91.
92. <divclass="panel panel-default">
93. <divclass="panel-heading">
94. Friends Activity
95. </div>
96. <divclass="panel-body"style="font-size:14px;">
97. {!! Auth::user()->friendsLastActivity() !!}
98. </div>
99. </div>
100. </div>
101. </div>
102. </div>
103.

HomePage Script:

1. HomepageScript:
2. @section('scripts')
3. <script type="text/javascript">
4. $(document).ready(function(){
5.
6. $("#NotificationsButtonSeen").click(function(){
7.
8. $("#NotificationsPanel").hide();
9.
10. $.ajax({
11. type:"post",
12. headers:{
13. 'X-CSRF-TOKEN': $('meta[name="csrf-
token"]').attr('content')
14. },
15. url:"{{ route('notifications.seen') }}",

48
16. });
17.
18. });
19.
20. $(".smoothScroll").click(function(event){
21. //prevent the default action for the click event
22. event.preventDefault();
23.
24. //get the full url - like mysitecom/index.htm#home
25. var full_url =this.href;
26.
27. //split the url by # and get the anchor target name - home in mysitecom/index.htm#home
28. var parts = full_url.split("#");
29. var trgt = parts[1];
30.
31. //get the top offset of the target anchor
32. var target_offset = $("#"+trgt).offset();
33. var target_top = target_offset.top;
34.
35. //goto that anchor by setting the body scroll top to anchor top
36. $('html, body').animate({scrollTop:target_top},425);
37. });
38.
39. $("#PostForm").on('submit',function(e){
40. e.preventDefault();
41.
42. $form = $(this);
43.
44. var formData =newFormData($form[0]);
45.
46. var request =newXMLHttpRequest();
47.
48. request.upload.addEventListener('progress',function(e){
49.
50. var percent = e.loaded/e.total *100;
51. $('#PostProgressBar').parent().show();
52. $('#PostProgressBar').css('width', percent+'%').attr('aria-
valuenow', percent);
53.
54. });

49
55.
56. request.onreadystatechange =function(){
57. if(request.readyState ==XMLHttpRequest.DONE){
58. var data = JSON.parse(request.responseText);
59. if(data.success){
60. location.reload();
61. }else{
62. var errorText ="";
63.
64. if(data.errors.body){
65. errorText = data.errors.body +'<br>';
66. }
67. if(data.errors.image){
68. errorText += data.errors.image;
69. }
70.
71. $("#PostErrors").show();
72. $("#PostErrors").html(errorText);
73. }
74. }
75. }
76.
77. request.open('post',"{{ route('posts.store') }}");
78. request.send(formData);
79.
80. });
81.
82.
83. function submitSearch(){
84. var q = $("#q").val();
85. var url ="{{ route('search.post') }}";
86. var token ="{{ Session::token() }}";
87.
88. $.ajax({
89. type:"POST",
90. url: url,
91. data:{_token: token, q: q},
92. success:function(response){
93. $("#SearchResults").html("<hr>");
94. $("#SearchResults").append(response);

50
95. friendEvents();
96. }
97. });
98. }
99.
100. $("#SearchForFriendsButton").click(function(){
101. submitSearch();
102. });
103.
104. $("#q").keypress(function(e){
105. if(e.which ==13){
106. submitSearch();
107. returnfalse;
108. }
109. });
110.
111. function friendEvents(){
112. $('.addFriend').click(function(){
113. var id = $(this).attr('data-id');
114.
115. $.ajax({
116. type:"POST",
117. url:"{{ route('friend.add') }}",
118. data:{id: id, _token:'{{ Session::token() }}'},
119. success:function(response){
120. $("#friendStatusDiv"+
id).html(response);
121. friendEvents();
122. }
123. });
124. });
125.
126. $('.cancelFriend').click(function(){
127. var id = $(this).attr('data-id');
128.
129. $.ajax({
130. type:"POST",
131. url:"{{ route('friend.cancel') }}",
132. data:{id: id, _token:'{{ Session::token() }}'},
133. success:function(response){

51
134. $("#friendStatusDiv"+
id).html(response);
135. friendEvents();
136. }
137. });
138. });
139.
140. $('.removeFriend').click(function(){
141. var id = $(this).attr('data-id');
142.
143. $.ajax({
144. type:"POST",
145. url:"{{ route('friend.remove') }}",
146. data:{id: id, _token:'{{ Session::token() }}'},
147. success:function(response){
148. $("#friendStatusDiv"+
id).html(response);
149. friendEvents();
150. }
151. });
152. });
153.
154. $('.acceptFriend').click(function(){
155. var id = $(this).attr('data-id');
156.
157. $.ajax({
158. type:"POST",
159. url:"{{ route('friend.accept') }}",
160. data:{id: id, _token:'{{ Session::token() }}'},
161. success:function(response){
162. $("#friendStatusDiv"+
id).html(response);
163. friendEvents();
164. }
165. });
166. });
167. }
168.
169. friendEvents();
170.

52
171. $("#PostImageUploadBtn").click(function(){
172. $("#image").trigger('click');
173. });
174.
175. });
176. </script>

8.1.2. Profile Page:

1. @extends('layouts.app')
2. @section('content')
3.
4. <div class="container-fluid" id="Profile">
5. <div class="row">
6. @include('layouts.cover',['active'=>'timeline'])
7. <div class="col-md-8 col-md-offset-2" style="padding:0">
8. <div class="col-md-8" style="padding:0">
9. @if($user->posts()->count())
10. <div class="posts">
11. @foreach($user->posts as $post)
12. @include('layouts.posts')
13. @endforeach
14. </div>
15. @else
16. <p>{{ $user->getFullName()}} has no
posts.</p>
17. @endif
18. </div>
19. <div class="col-md-4 sidebar" style="padding-left:20px;
padding-right: 0;">
20. @if($user->id !==Auth::user()->id)
21. <div id="friendStatusDiv">
22.
@include('layouts.friend_status',['user'=> $user,'profileView'=>'true'])
23. </div>
24. @endif
25. <div class="panel panel-default">
26. <div class="panel-heading">
27. Friends

53
28. </div>
29. <div class="panel-body">
30. @foreach($user-
>friends()as $friend)
31. <a href="{{
route('profile.view', ['id' => $friend->id]) }}"><img src="{{ $friend->getAvatarImagePath()
}}" title="{{ $friend->getFullName() }}" height="50px" style="margin-bottom:3px;"></a>
32. @endforeach
33. </div>
34. </div>
35. </div>
36. </div>
37. </div>
38. </div>
39.
40. @stop

Profile Page Script:

1. <scripttype="text/javascript">
2. function friendEvents(){
3. $('.addFriend').click(function(){
4. var id = $(this).attr('data-id');
5.
6. $.ajax({
7. type:"POST",
8. url:"{{ route('friend.add') }}",
9. data:{id: id, _token:'{{ Session::token() }}'},
10. success:function(response){
11. location.reload();
12. }
13. });
14. });
15.
16. $('.cancelFriend').click(function(){
17. var id = $(this).attr('data-id');
18.
19. $.ajax({
20. type:"POST",
21. url:"{{ route('friend.cancel') }}",

54
22. data:{id: id, _token:'{{ Session::token() }}'},
23. success:function(response){
24. location.reload();
25. }
26. });
27. });
28.
29. $('.removeFriend').click(function(){
30. var id = $(this).attr('data-id');
31.
32. $.ajax({
33. type:"POST",
34. url:"{{ route('friend.remove') }}",
35. data:{id: id, _token:'{{ Session::token() }}'},
36. success:function(response){
37. location.reload();
38. }
39. });
40. });
41.
42. $('.acceptFriend').click(function(){
43. var id = $(this).attr('data-id');
44.
45. $.ajax({
46. type:"POST",
47. url:"{{ route('friend.accept') }}",
48. data:{id: id, _token:'{{ Session::token() }}'},
49. success:function(response){
50. location.reload();
51. }
52. });
53. });
54. }
55.
56. friendEvents();
57. </script>

55
8.1.3. Community Page:

1. <divclass="container">
2. <divclass="row timeline">
3. <divclass="col-md-3">
4. <divclass="col-md-12 profile followUser">
5. <divclass="profile-img text-center">
6. <ahref="{{ route('profile.view', ['id' => Auth::user()->id]) }}">
7. <imgsrc="{{ Auth::user()->getAvatarImagePath() }}" height="100px" class="img-circle">
8. </a>
9. <p>{{ Auth::user()->getFullName() }}</p>
10. </div>
11. @include('layouts.menu_links')
12. </div>
13. </div><!-- profile -->
14. <divclass="col-md-6 feed">
15. {!! Form::open(['id' => 'PostForm', 'method' => 'POST', 'action' =>
'CommunityController@store', 'files' => 'true']) !!}
16. {!! Form::textarea('body', null, ['class' => 'form-control', 'required' => 'required',
'placeholder' => "What's on your mind?", 'rows' => '2']) !!}
17.
18. <divclass="textareaOptions">
19. <liid="PostImageUploadBtn"class="pointer"><iclass="fa fa-lg fa-camera-retro"aria-
hidden="true"></i></li>
20. <inputtype="file"id="image"name="image"style="display:none"/>
21. {{ Form::button('<iclass="fa fa-location-arrow"aria-hidden="true"></i> Post',
array('class'=>'btn btn-signature pull-right', 'type'=>'submit')) }}
22. </div>
23. <divclass="progress"style="display: none">
24. <divid="PostProgressBar"class="progress-bar progress-bar-striped
active"role="progressbar"aria-valuenow="45"aria-valuemin="0"aria-valuemax="100">
25. </div>
26. </div>
27. <spanclass="help-block"id="PostErrors"style="display: none;">
28. </span>
29. {!! Form::close() !!}
30.
31. @if (Auth::user()->getTimeline()->count())
32. <divclass="posts">
33. @foreach (Auth::user()->getTimeline() as $post)

56
34. @include('layouts.posts')
35. @endforeach
36. </div>
37. @endif
38. </div><!-- news feed -->
39.
40. <divclass="col-md-3 sidebar">
41. <divclass="panel panel-default">
42. <divclass="panel-heading">
43.
44. <fontsize="3">Community Name</font>
45.
46. </div>
47. <divclass="panel-body"style="font-size:14px;">
48. <fontsize="6">{!! $community_id->name !!}</font>
49.
50. </div>
51. </div>
52. </div>
53. </div>
54. </div>

8.1.4. User Controller:

1. classUserextendsAuthenticatable
2. {
3. useNotifiable;
4.
5. protected $userImagePath ='img/users/';
6.
7. protected $userCoverPath ='img/users/cover/';
8.
9. protected $fillable =[
10. 'first_name','last_name','dob','email','password','cover','avatar',
11. ];
12.
13. /**
14. * The attributes that should be hidden for arrays.
15. *

57
16. * @var array
17. */
18. protected $hidden =[
19. 'password','remember_token','pivot'
20. ];
21.
22. publicfunction getAvatarImagePath(){
23. return asset($this->userImagePath . $this->avatar);
24. }
25.
26. publicfunction getCoverImagePath(){
27. return asset($this->userCoverPath . $this->cover);
28. }
29.
30. publicfunction getCoverPath(){
31. return $this->userCoverPath;
32. }
33.
34. publicfunction getAvatarPath(){
35. return $this->userImagePath;
36. }
37.
38. publicfunction getFullName(){
39. return $this->first_name .' '. $this->last_name;
40. }
41.
42. publicfunction likedPost($id){
43. if($this->likes()->whereLikeableId($id)->whereLikeableType('App\Post')-
>whereUserId(Auth::id())->first()){
44. returntrue;
45. }else{
46. returnfalse;
47. }
48. }
49.
50. publicfunction savedPost($id){
51. if($this->saves()->wherePostId($id)->whereUserId(Auth::user()->id)->first()){
52. returntrue;
53. }else{
54. returnfalse;

58
55. }
56. }
57.
58. publicfunction getTimeline(){
59.
60. return $posts =Post::where(function($query){
61. return $query->where('user_id',Auth::user()->id)->orWhereIn('user_id',Auth::user()-
>friends()->pluck('id'));
62. })->orderBy('created_at','desc')->get();
63. }
64.
65. publicfunction getCommunityTimeline(){
66.
67. return $posts =Community_Post::where(function($query){
68.
69. $user =Auth::user()->id;
70. $communityid =PersonalInformation::where('user_id', $user)->value('community_id');
71.
72. return $query->where('community_id', $communityid);
73. })->orderBy('created_at','desc')->get();
74. }
75.
76. publicfunction getImages(){
77. returnImage::where('imageable_type','App\Post')->whereIn('imageable_id',[11])->get();
78. }
79.
80.
81. publicfunction updateOnlineStatus(){
82. $now =Carbon::now();
83. if($this->online()->count()){
84. // update
85. $this->online()->update([
86. 'last'=> $now
87. ]);
88. }else{
89. // create
90. $this->online()->create([
91. 'last'=> $now
92. ]);
93. }

59
8.2. Screenshots

Fig 8.1: Login page screenshot

Fig 8.2: Sign up Page

60
Fig 8.3: Personal Information save page

Fig 8.4: Setting Page

61
Fig 8.5: Status update page

Fig 8.6: Friend Search

Fig 8.7: Friend pending request

62
Fig 8.8: Timeline

Fig 8.9: Message Notification

Fig 8.10: Live chat

63
Fig 8.11: Friend List

Fig 8.12: Community Hub

64
Fig 8.13: Profile Page

8.3. DATABASE

Fig 8.14: DB tables

65
Chapter 9

Testing

System Testing:

System testing is a critical element of quality assurance and represents the ultimate
review of analysis, design and coding. Test case design focuses on a set of techniques
for the creation of test because that meet overall testing objective. When a system is
developed it is hoped that it performs properly. The main purpose of testing an
information system is to find the errors and correct them. The scope of system testing
should include both manual and computerized operations. System testing is
comprehensive evaluation of the programs, manual procedures, computer operations
and controls. System testing is the process of checking whether the developed system
is working according to the objective and requirement. All testing is to be conducted
in accordance to the test conditions specified earlier. This will ensure that the test
coverage meets the requirements and that testing is done in a systematic manner. The
process of analyzing the software item to detect the differences between existing or
required condition and evaluate the features of the software items. The thorough testing
of the system before release of the software needs to be done vide the various test cases
and modes so that the software becomes devoid of bugs and uses minimum space
requirements as well as minimum time to perform. The test cases were selected
beforehand with expected results defined and actual results recorded for comparison.
The selection of test cases is done vide ―White Box Testing‖ technique to check the
internal programming logic and efficiency and vide ‖Black Box Testing‖ technique to
check software requirement fulfillment with intension of finding maximum number of
errors with minimum effort and time. Although test cases are a design by considering
the cyclomatic complexity, conditional test, still the software code is not in its optional
form, as all other possible alternative parts in the software are not considered. At the
integration level, the software will be passing to the third-party tests which would
further enhance the software optimality and efficiency. [9].

66
9.1. Test data implementation and their result on:

The quality and standardization of the software / application package depends truly on
the various predefined testing norms and on the performances of the software over those
norms. There are various standards existing in the software industry the engineered end
product strives to achieve viz. ISO 9002 SEI CMM Level5 etc. These standards are
achieved only when the concerned software fulfils the tests as per the respective testing
norms predefined in them vide the various test cases and parameters using the CASE
topologies. Generally, software is tested both on a stand-alone mode as well after
integrating all the modules in the system vide deferent available testing methods/norms.

The following Flow Graph methodology was used while testing the software:

Fig 9.1: Flow graph

67
Here each circle represents one or more non-branching procedural language or source
code statements in Flow Graph. While performing Condition Testing Domain Testing
methodology was selected. While performing Loop Testing simple loops, concatenated
loops, nested and unstructured loops were tested thoroughly.

Test Characters:

1. A good test has a high probability of finding an error.


2. A good test is not redundant.
3. A good test should be ―best of breed.
4. A good test should be neither too simple nor too complex.

Black Box Testing:

The method of Black Box Testing is used by the software engineer to derive the
required results of the test cases:

1. Black Box Testing alludes to test that are conducted at the software interface.
2. A Black Box Test examines some fundamental aspect of a system with little
regard for the internal logic structure of the software.
3. A limited number of important logical paths can be selected and exercised.
4. Important data structure can be probed for validity.

Black box testing was performed to find errors in the following categories: -

Incorrect or missing functions Graphics error. Errors in data in binary format. Error
in data in integer format. File error. Pointer error. Memory access error. Variable
error. Performance error

White Box Testing:

White Box Testing is sometimes called Glass Box Testing. Using White Box Testing
methods, the software engineer can derive the following test cases:

1. Guarantee that all independent paths within a module have been exercised at
least once.
2. Exercise all logical decisions on their true and false sides.

68
3. Execute all loops at their boundaries and within their operational bounds.
4. Exercise internal data structures to ensure the validity.50

In White Box Testing efforts were made to handle the following: -

• Number of input parameters equal to number of arguments.


• Parameters and arguments attributes match.
• Number of arguments transmitted is called modules equal to attributes of
parameters.
• Unit system of argument transmitted is called modules equal unit system of
parameter.
• Number of attributes and order of arguments to build in functions correct.
• Any references to parameters not associated to build in functions correct.
• Input only arguments altered.
• Global variable definition consistent across module.
• Files attributes correct.
• Format specifications matches I/O specification.
• Files opened before use.
• File closed while working is going on.
• I/O errors handled.
• Any textual errors in output information.

Unit Testing:

The unit testing is performed to test the validity of the individual units. This is done in
the coding phase with the interactive testing. Thus, it itself constitutes a majority of
functionality test for each logical unit.

Integrity Testing:

When all the development of all the units or modules is completed and integrated the
integrity test phase is started. In this phase the interface between the modules are tested.
This phase basically verifies whether inter module exchange of information and events
are as per required system behavior.

69
Validation Testing:

Tests were performed to find conformity with the requirements. Plans and procedures
were designed to ensure that all functional requirements are satisfied. The software was
alpha-tested. There are two goals in preparing test plans. Firstly, a properly detailed test
plan demonstrates that the program specifications are understood completely.

9.2. Test Cases

Login:

Sl No Input Test case Conditional being checked Result


Values

1 Email Empty Please Enter valid Username Successful

2 Email Already Exists or not Login ID should be unique Successful

3 Password Empty Please Enter valid Password Successful

4 Password If wrong Password Enter password Successful

Table 9.1: Login Test Case Table

70
Registration:

Sl No Input Values Test case Conditional being checked Result

1 First Name Empty It must not be empty Successful

2 Last Name Empty Last Name must not be empty Successful

3 Email Empty Enter valid Email ID Successful

4 Password Empty Enter valid Password Successful

5 Password Length Minimum 8 characters required Successful

6 Confirm Empty Password and confirmation Successful


Password password must be same

Table 9.2: Registration Test Case Table

71
Edit Profile:

Sl No Input Values Test case Conditional being Result


checked
1 First Name Null First Name must not be Successful
empty
2 Last Name Empty Last Name must not be Successful
empty
3 City Empty City must not be empty Successful

4 State Empty state must not be empty Successful

5 Pin code Empty PIN code must not be Successful


empty
6 Country SELECT Please select country Successful

7 High School Empty High School must not Successful


be empty
8 College SELECT Please select college Successful

Table 9.3: Edit Profile Test Case Table

72
Chapter:10

Discussion and Future Scope

10.1. Discussion

While developing the system a conscious effort has been made to create and develop a
software package, making use of available tools, techniques and resources – that would
generate a proper system for ONLSINE SOCIAL NETWORKING.

While making the system, an eye has been kept on making it as user-friendly. As such
one may hope that the system will be acceptable to any user and will adequately meet
his/her needs. As in case of any system development process where there are a number
of short comings, there have been some shortcomings in the development of this system
also.

10.2. Future Scope

There are some of the areas of improvement which we couldn’t implement due to time
constraints. One such feature was online friends where members can see which friends
are online through this website. There are so many features that can be implemented in
this project. An Event page could be implemented where all the events will be shown.
With a good budget the project can also be implemented through the web with cloud
server.

73
References

[1] Biswas, A., & Roy, M. (2014). Impact of social medium on green choice
behavior. Journal of Marketing Management, 2 (2): 95-111.
[2] Blankenship, M. (2010). How social media can and should impact higher
education.Hispanic Outlook in Higher Education, 21 (November):11-12.
[3] Griffith, S., & Liyanage, L. (2008, June). An introduction to the potential of
social networking sites in education. In Emerging Technologies Conference
2008 (p. 9). [p2]
[4] Roblyer, M., McDaniel, M., Webb, M., Herman, J., & Witty, J. V. (2010).
Findings on Facebook in higher education: A comparison of college faculty and
student uses and perceptions of social networking sites. The Internet and Higher
Education, 13(3), 134-140. [p4]
[5] A. Nazir, S. Raza, and C. N. Chuah, “Unveiling Facebook: A Measurement
Study of Social Network Based Applications,” in Proc. ACM IMC’08.
[6] Boyd, D. M. and Ellison, N. B. (2008). Social Network Sites: Definition,
History, and Scholarship. Journal of ComputerMediated Communication, 13, 1,
210-230.
[7] Green, D. and Pearson, J. (2005). Social Software and Cyber Networks: Ties
That Bind or Weak Associations within the Political Organization? In
Proceedings of the 38th Annual Hawaii International Conference on System
Sciences. IEEE.
[8] Matas, Alina, ―SNSs becomes an on-line opportunity for employers and
students‖, The Washington Post, Nov. 7, 1993, pg. H2
[9] “Building a Career Path”, The Washington Post, Jan. 19, 1998, pg. F05
[10] Bell, T., et al.: “An Extendable Approach to Computer-Aided software
Requirements engineering,” Trans. Software Eng., val. SE-3, no. 1 January
1977.

74

Das könnte Ihnen auch gefallen