National school For Computer Science
Internet of Things and Mobile Service Masters
Design And Implementation Of A Social
Media Based Web Appliation
Author:
Heiballa Abdellahi
Supervisor:
Prof. Abdellatif Kobbane
Unifying project for
MSc IOSM
January 7, 2020
Abstract
The internet has been a platform for individuals, groups of people and companies to interact with
one another through the social media. The social media has truly aided interaction and even other
business services through social networks, forums, blogs, etc.
Forums are now been used as tools/platforms to create discussions, connect to people (mostly of
similar interests) and as sources of relevant information with applications like Facebook, LinkedIn
and MySpace dominating the social media landscape.
The aim of this work is to design and implement a full scale social networking website like Facebook
or Twitter, including features such as news feeds, profiles, friend system, chat system, trending
posts and more.
Using proficiently PHP, Bootstrap toolkit and MySQL databases to registering it’s own domain
name and putting it online.
Finally Powering it with Artificial Intelligence to analyze posts at scale, understand what’s being
said in them, then extracting insights based on that information.
The application test results are presented at the end of this project.
Acknowledgements
Firstly, I’ll like to acknowledge My father,mother the family and everyone close I love you and
thank you.
I gratefully acknowledge the close supervision and thorough guidance of Prof. Abdellatif Kobbane,
who was a great teacher all through the time of this course and for his assistance throughout this
project.
I would like to acknowledge the motivation and creative ideas from other students in my class.
Finally, I would like to thank all the friends who shared me the good wishes and feelings, none of
this would have been possible without their support.
Contents
1 Introduction
1.1 BACKGROUND INFORMATION . . . . . . .
1.2 STATEMENT OF THE PROBLEM . . . . . .
1.3 AIM AND OBJECTIVES OF THE PROJECT
1.4 PROJECT ORGANIZATION . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
6
6
6
7
7
2 Concepts And Technologies
2.1 INTRODUCTION . . . . . . . . . . . . . . . . .
2.1.1 Social Media Concept . . . . . . . . . . .
2.1.2 History of Social Media . . . . . . . . . .
2.1.3 What is a Social Networking Service? . .
2.1.4 Features of a Social Network Website . .
2.1.5 Applications of Social Media . . . . . . .
2.2 REVIEW OF EXISTING WEB APPLICATION
2.2.1 Facebook . . . . . . . . . . . . . . . . . .
2.2.2 Twitter . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
8
8
8
8
9
10
10
10
10
11
3 Requirements Analysis And Design
3.1 INTRODUCTION . . . . . . . . . . . . . . . .
3.1.1 Proposed System . . . . . . . . . . . . .
3.2 SYSTEM REQUIREMENTS AND ANALYSIS
3.2.1 Application Architecture . . . . . . . . .
3.2.2 Application Analysis . . . . . . . . . . .
3.2.3 Application Requirements . . . . . . . .
3.3 APPLICATION DESIGN . . . . . . . . . . . .
3.3.1 Object Oriented Analysis and Design .
3.3.2 Unified Modeling Language (UML) . . .
3.3.3 Use Case Diagram . . . . . . . . . . . .
3.3.4 Sequence Diagram . . . . . . . . . . . .
3.3.5 Activity Diagram . . . . . . . . . . . . .
3.4 THE USER INTERFACE DESIGNS . . . . . .
3.4.1 FaceRIM Home Page . . . . . . . . . . .
3.4.2 The User Registration Interface . . . . .
3.4.3 The Login Page Interface . . . . . . . .
3.5 DATABASE DESIGN . . . . . . . . . . . . . .
3.5.1 Description of Tables . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
13
13
13
13
13
14
14
15
15
15
16
16
17
17
19
19
19
20
20
4 System Implementation
4.1 INTRODUCTION . . . . . . . . . . .
4.1.1 Tools Used for Implementation
4.2 THE DIFFERENT INTERFACES . .
4.2.1 the home page . . . . . . . . .
4.2.2 the profile page . . . . . . . . .
4.2.3 notification . . . . . . . . . . .
4.2.4 Messages . . . . . . . . . . . .
4.2.5 Dashboard . . . . . . . . . . .
4.3 Web hosting . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
22
22
22
23
23
23
24
24
24
25
.
.
.
.
.
.
.
.
.
2
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
5 Conclusion
5.1 SUMMARY . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5.2 RECOMMENDATIONS AND FURTHER WORKS . . . . . . . . . . . . . . . . .
5.3 CONCLUSION . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
27
27
27
27
Bibliography
28
3
List of Figures
2.1
2.2
Facebook desktop layouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Twitter desktop layouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
11
12
3.1
3.2
3.3
3.4
3.5
3.6
3.7
Web Application Architecture . . . . . . . . . . .
The Use-Case diagram for the Web Application.
The Sequence Diagram for the Web Application.
The Activity Diagram for the Web Application. .
FaceRIM Home Page. . . . . . . . . . . . . . . .
The User Registration Interface. . . . . . . . . .
The Login Page Interface. . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
14
16
17
18
19
19
20
4.1
4.2
4.3
4.4
4.5
4.6
The home page. .
The profile page.
Notification. . . .
Messages. . . . .
Dashboard. . . .
000webhost. . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
23
24
24
25
25
26
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
4
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
List of Tables
3.1
Database Schema for FaceRIM . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5
21
Chapter 1
Introduction
1.1
BACKGROUND INFORMATION
Communication is a basic human need and for that reason, man has always found a means of
meeting this need. The media, which is an umbrella term for various means of communication,
has become an integral part of human life around the world. The earliest forms of personal media,
speech and gestures, had the benefit of being easy to use and did not necessarily need complex
technology.
Through the social media, the internet community has drastically increased over the years. The
social media has become a significant part of today’s modern civilization. It is a defining trait of
how integrated social interactions have become. The impact of the social media have been seen in
basically five different contexts; news, interactions, political landscapes, learning and marketing.
With over 80 percent of teen Internet users frequenting social media sites, it’s no wonder the real
world social lives are seeing some changes. Social media is definitely changing the way people
communicate, but in many ways it’s for the better as we expand our social circles and explore new
horizons through our online connections.
Every age it has passed through has been based on beliefs and new technologies, responding to the
needs of individuals anxious to adjust to new forms of socialization. A time of great change is a
period in which society looks for meaning. Information is already a tool, the principal tool,which
people use to perceive and understand their environment.
Social media sites, have various unique features like threads; where posts are made, discussion,
etc. Social networks, provide a unique type of social environment that enables people to share and
access information freely. Users can either share their posts or leave comments in other existing
posts.
1.2
STATEMENT OF THE PROBLEM
Social networking is significantly impacting to individual’s life by ensuring efficient way to stay
in touch with people and those who live far away. The large percentage of people interacts and
carries out the transaction utilizing networking.
Improved technology has made the world a domestic world where individuals connect freely from
diverse places using increased social networks.Family members living abroad can be kept abreast
of the latest happenings in your world as quickly as those living next door. Friends you haven’t
seen since school, and who have since moved away, are able to keep in touch. Social networking
sites mean someone’s physical location has become a lot less important.
YouTube, Facebook,Twitter and much more have facilitated this.Our time is being stretched thinner and thinner by work and family commitments. But social networking sites offer provide easier
and more accessible opportunities to interact with others in real time It lets people share fun,
interesting and informative content. It gives individuals a way to engage with one another.
6
1.3
AIM AND OBJECTIVES OF THE PROJECT
To develop a fast, secure online social network that connect people. Fully featured with the ability
to like,comment, share, save post, report, verify system , messages, notifications and a real time
full messaging system showing user typing status, seen message, including Send,comment and post
with emoji’s. As allowing the admin to let’s people know that an account of public interest is
authentic with a verify user system.[1] Supporting The script with multi languages with (English
- Arabic) as Main languages, with the possibility to add any other language desired. Powering
it with a Powerful dashboard,Where admin can edit, remove user account, verify users, or view
and replay to users reports from Support box and also admin can see statistics about whole script
database from general tab.
1.4
PROJECT ORGANIZATION
Chapter Two introduces the web application’s concepts including more precise definitions, evolution, types, and categorizations. This chapter also describes in details the general architecture,
global features, services, technologies employed. Chapter three explains the Design of a layered
architecture. detailed application design will be presented in this chapter. Chapter Four will be
discussing and showing the system development, deployment and evaluation. Chapter Five will
summarize, introduces the conclusions obtained from this work and give recommendation for future
work.
7
Chapter 2
Concepts And Technologies
2.1
INTRODUCTION
The previous chapter has described a basic understanding about social media and their use in
connections. The main objective of this chapter is to provide a full understanding about social
media concepts in more details including good definitions from different viewpoints, social media
generations and evolution, types and categorizations, the global features of a social media, the
technologies used for the implementation of social media and the general architecture of an social
media application.
2.1.1
Social Media Concept
Social media is a form of electronic communication which facilitates interaction based on certain
interests and characteristics. Social media are media for social interaction, using highly accessible
and scalable publishing techniques. Social media use web-based technologies to transform and
broadcast media monologues into social dialogues (Idakwo, 2011). A social media network platform is one that provides a medium for interaction by groups of people making it easy to share
information (such as lecture materials, pictures and ideas) across a circle of people or groups.
Statistics has shown that the use of social network such as Facebook, Twitter and LinkedIn is on
the increase most especially among young individuals, the crop of which are students of tertiary
institutions
2.1.2
History of Social Media
According to Idakwo (2011), The Social media started as a concept many years ago but has evolved
into sophisticated technology. The concept of social media can be dated back to the use of the
analog telephone for social interaction. The most recognizable use of social media was through
innovative application, an online dialogue framework, created by Ward Christensen, a former IBM
employee and Randy Suess. Initially, they envisioned a place where they could immediately contact their co-employees for announcements, i.e. meetings, reports, and other affairs, rather than
making multiple phone calls, distributing memos, and the like. They were looking into creating a
computerized bulletin board, which is why they named the program CBBS (Computerized Bulletin
Board System). Soon enough, more and more employees contributed their ideas and comments in
the said online community. That event was a momentous episode in the history of computer and
internet. It was the birth of online social networking.
The CBBS platform was made known to other companies and has been used for specific purposes.
The Bulletin Board System expanded largely and began breaking into the mainstream much sooner
than it was planned to. It was during the rise of the Internet Service Providers in the early 1990s
when social networking sites began to flourish. Along with the availability of internet service to
people, many people rummaged to have themselves acquainted with this new technology. With
the fast response of people to the budding internet community, the bulletin boards which were
usually used by companies have started to expand their roles by offering their service to more
people around the globe. More and more people joined the online community with the innate
goal of creating an identity in this space and at the same time exploring the vast place that is
8
the internet. Because of this, many internet-savvy companies gave what people wanted- getting
to know more people and sharing common interests and points of view; that is through websites
where they can socialize, websites which are now referred to as social networking sites.
Social media attained a great measure of success with the launch of the then very popular friendster.com. Creator of Friendster, Jonathan Abrams concocted a perfect mix of popular features
from earlier social networking predecessors. Friendster became an instant success and gathered
about three million members who signed up in its early months of launch.
As years passed, Friendster reached an overwhelming hundred million users from all over the globe.
With much demand from its users, Friendster unfortunately got out of hand and suffered from too
many glitches in the server. Today, Friendster has been announced as a newly owned entity of
a Malaysian Company, and outshone by present social networking sites but still remains to be
patronized most especially in Asia.
The conception of myspace.com opened the internet users to vast opportunities of selfexpression
which include wide control over a user’s profile content. Practically different people from all walks
of life have dedicated pages in MySpace. In MySpace, users experienced the best of creating unique
identities to show to the online world.
MySpace remained as the uncontested favorite among all the social networking sites until 2005
when it met its future competitor in the market. Soon enough, MySpace created additional features like mobile applications in order to keep up with the latest trends in the online community;
and at the same time be at par with the growing popularity of contemporary social networking
sites, more specifically the next thing in line.
Facebook started as a local social network made for the students of Harvard. It was developed
by a sophomore, Mark Zuckerberg. Facebook was actually made by hacking Harvard’s database
containing identification images of students. The initial idea was actually to compare the faces
of students with images of animals, for entertainment purposes. However, due to the potentially
damaging contents of the site, the creators decided to put it down before it caught the attention
of school authorities.
The application was shut down, but the idea of creating an online community of students came to
existence. The platform was then improved and sooner than they expected, Facebook was released
in campuses other than Harvard. Thereafter, high schools were already starting to get attracted
to the idea of having online communities, thus opening the website to the younger population.
In 2006, facebook.com ultimately offered the opportunity to the rest of the world. As 2007 approached, the registrants reached an overwhelming digit-roughly a million dozen. Facebook has
grown to become the biggest and most popular social networking site today with a population of
above 500 million active users.
Other social networking sites continued to appear in the scene. Blogging sites like Bebo, Multiply
and many others came into view. Microblogging partnered with social networking became popular
with the launch of Twitter. On Twitter, online users can post their Tweets, basically a 140 character phrase or line about what they have in mind.
With the help of API (Application Programming Interface), microblogging sites like Twitter and
Tumblr and other dedicated sites like Flickr, Photobucket and many others were able to connect
with popular social networking sites, making an unending link of information in the World Wide
Web.
2.1.3
What is a Social Networking Service?
A social networking service (also social networking site or social media) is an online platform
which people use to build social networks or social relationship with other people who share similar
personal or career interests, activities, backgrounds or real-life connections.
Social networking sites allow users to share ideas, digital photos and videos, posts, and to inform
others about online or real-world activities and events with people in their network. While inperson social networking – such as gathering in a village market to talk about events – has existed
since the earliest development of towns, the web enables people to connect with others who live in
different locations, ranging from across a city to across the world. Depending on the social media
platform, members may be able to contact any other member. In other cases, members can contact
anyone they have a connection to, and subsequently anyone that contact has a connection to, and
so on. The success of social networking services can be seen in their dominance in society today,
with Facebook having a massive 2.13 billion active monthly users and an average of 1.4 billion
9
daily active users in 2017.
LinkedIn, a career-oriented social-networking service, generally requires that a member personally
know another member in real life before they contact them online. Some services require members
to have a preexisting connection to contact other members[2].
2.1.4
Features of a Social Network Website
The following is a list of software and technology features that can be found on the website and
will be available to users of the social media site.
News Feed: The news feed is the primary system through which users are exposed to content
posted on the network. Posts to keep them connected to their friends and family.
Friends: "Following" someone on the platform is the act of sending another user a "follow
request". The two people are connected once the receiving party accepts the follow request.
In addition to accepting the request, the user has the option of declining it. Deleting a follow
request removes the request, but does allow the sender to resend it in the future.
Likes: The like button enables users to easily interact with status updates, photos, links shared
by friends,Once clicked by a user, the designated content appears in the notifications of that
content’s user, and the button also displays the number of other users who have liked the
content,
Comments: Enabling users to say their thoughts about the shared content.
Messages and inbox: Messages lets users send messages to each other. Complementing regular
conversations.
Notifications: Notifications tell the user about a like or a comment on a picture of the user and
follow requests.
Notes: Offering users the ability to write notes.
Photos: allows users to upload photos as profile photo, wall or attach them to posts.
Verified accounts: include a blue check mark badge to highlight the account’s Verified status
assigned to celebrities, public figures, sports teams and media organizations.
2.1.5
Applications of Social Media
From a business perspective, the niche of social media is one of the most promising markets. Of
course, this segment is densely occupied with dominant players, but the rapid development of
technology is continually opening up new opportunities for the realization of new ideas.
When creating social media application, we should keep in mind that most of the time and efford
are related to the backend (what happens in the shadows and makes the app/web project work).
Any social media makes sense for the user only if there are his friends or interesting people.
Therefore, social media app developers should work through the perfect algorithm of friends graph
and the system that lets to invite friends with one click.
2.2
REVIEW OF EXISTING WEB APPLICATION
Several platforms/applications have already been established as online social networks. This section
will carefully review each of these existing applications in line with this project.
2.2.1
Facebook
Facebook is a popular free social networking website that allows registered users to create profiles,
upload photos and video, send messages and keep in touch with friends, family and colleagues.
The site, which is available in 37 different languages, includes public features such as:
• Marketplace - allows members to post, read and respond to classified ads.
10
• Groups - allows members who have common interests to find each other and interact.
• Events - allows members to publicize an event, invite guests and track who plans to attend.
• Pages - allows members to create and promote a public page built around a specific topic.
• Presence technology - allows members to see which contacts are online and chat.
In May 2007, Facebook opened up its developers’ platform to allow third-party developers to
build applications and widgets that, once approved, could be distributed through the Facebook
community. In May 2008, Facebook engineers announced Facebook Connect, a cross-site initiative
that allows users to publish interactions on third-party partner sites in their Facebook news feed.
Figure 2.1: Facebook desktop layouts
2.2.2
Twitter
Twitter is a free social networking micro blogging service that allows registered members to broadcast short posts called tweets. Twitter members can broadcast tweets and follow other users’ tweets
by using multiple platforms and devices. Tweets and replies to tweets can be sent by cell phone
text message, desktop client or by posting at the Twitter.com website.
The default settings for Twitter are public. Unlike Facebook or LinkedIn, where members need to
approve social connections, anyone can follow anyone on public Twitter. To weave tweets into a
conversation thread or connect them to a general topic, members can add hashtags to a keyword
in their post. The hashtag, which acts like a meta tag, is expressed as keyword. Twitter’s web
interface is simple and intuitive with many features that make it much better.
• Image captions - improve accessibility for visually impaired people.
• Trending topics - A word, phrase, or topic that is mentioned at a greater rate than others is
said to be a "trending topic".
• Moments - A feature that allows users to curate tweets from other users into a larger collection.
• Adding and following content - There are numerous tools for adding content, monitoring
content and conversations including Twitter’s own TweetDeck, Salesforce.com, HootSuite,
and Twitterfeed.com.
11
Twitter uses an open-source Web framework called Ruby on Rails. The API is open and
available to application developers.
Figure 2.2: Twitter desktop layouts
12
Chapter 3
Requirements Analysis And Design
3.1
INTRODUCTION
In this chapter, the requirements for the web application were gathered by observing the existing
systems and their operations. This chapter also provides details on the analysis and design of the
proposed web application. It describes the methodology and design that will be used in modeling
the application with the necessary Unified Modeling Language (UML) diagrams that will be used
to analyze the architecture of this system like use case diagrams, activity diagrams and sequence
diagrams.
3.1.1
Proposed System
Lets take for example facebook,it was developed from the ground up using open source software.
The site is written primarily in the PHP programming language and uses a MySQL database infrastructure. To accelerate the site, the Facebook Engineering team developed a program called
HipHop to transform PHP source code into C++ and gain performance benefits.
Facebook has one of the largest MySQL database clusters anywhere, and is the world’s largest
users of memcached, an open source caching system. Memcached was an important enough part
of Facebook’s infrastructure that CEO Mark Zuckerberg gave a tech talk on its usage in 2009.
Facebook has built a framework that uses RPC (remote procedure calls) to tie together infrastructure services written in any language, running on any platform. Services used in Facebook’s
infrastructure include Apache Hadoop, Apache Cassandra, Apache Hive, FlashCache, Scribe, Tornado, Cfengine and Varnish.
The company’s engineers continue building new infrastructure software components, contributing
many of them as open source projects. ....
3.2
3.2.1
SYSTEM REQUIREMENTS AND ANALYSIS
Application Architecture
Every Web application consists of both a front-end and a back-end.
The front-end, also known as the client-side, is everything that the user sees and interacts within
inside their browser. The main purpose of the client-side is to collect data from users. It is written
in variants of HTML, CSS, and JavaScript. Next, we have the back-end, also known as the serverside of the app. It is the part, which is not accessible by users; it stores and manipulates data.
The backend processes HTTP requests which essentially “fetch” the data (text, images, files, etc.)
called for by the user. Unlike the frontend, many languages like PHP, Java, Python, JavaScript,
and others can be used to write the backend of a Web Application.
13
Figure 3.1: Web Application Architecture
3.2.2
Application Analysis
Application Analysis is problem solving technique that entails the decomposition of the studied
Application into its component parts with the view of studying the various functionalities and
how those component parts interact to accomplish the application’s purpose. It also involves the
breakdown of an application and the study of how the various components work together. The
basic process of application analysis involves three steps:
1. Understanding the Existing Applications.
2. Identifying Improvements.
3. Defining Requirements for the new Application .
3.2.3
Application Requirements
Application Requirements are processes that specify what the application must do or what property
or quality the application must have. The requirements that specify what the application must
do are frequently referred to as functional requirements and the requirements that specify what
attribute the application must have are called non-functional requirements.
A. Functional Requirements FaceRIM is conceived in two interfaces for the different users;
user and admin. Each interface has been designed to meet different requirements.
For the users, these are the requirements that have to be met:
(a) Manage their account.
(b) Post/share statue and photos.
(c) send/receive messages.
(d) react/comment on posts.
(e) add notes.
(f) follow users.
(g) give star to users.
For the admins, these are the requirements that have to be met:
(a) all the user requirements.
(b) manage other users.
14
(c) give badges to users.
(d) consult dashboard.
The above functional requirements will be carefully met in the development of this web
application.
B. Non Functional Requirements
(a) Look and Feel Requirements. FaceRIM should be presentable on height and low
resolution devices (mobiles & desktop). FaceRIM should be compatible across browsers.
(b) Usability Requirements. Ergonomic and clear usage.Users will have no problem
learning how to use this web application. Convenience of usage.
(c) Performance Requirements. Reliable storage of information.users will be able to
respond to their notifications as a means of follow-up. Posts will be placed in the home
for quick response by Users. Quick response to user activities by either other users or
administrators.
(d) Operational Requirements. FaceRIM should be able to work with relevant hardware
devices. Not prone to crashing. FaceRIM should be able to handle multiple users.
(e) Security Requirements. Only a users has access to their settings. Sensitive information is hidden from users. Password sensitive. Only registered users can use the system
except same as for the administrator. If anyone responds to any post, the user can
verify their accounts.
(f) Portability Requirements FaceRIM should operate on demand. FaceRIM should
work on the browser of any operating system.
(g) Legal Requirements. Personal information of users should be protected. FaceRIM
should comply with quality assurance standards. The Administrator is fully responsible
for most operations in the system.
3.3
APPLICATION DESIGN
The application design illustrates how the application will fulfill the objectives or requirements
identified during the analysis of the application. In application design, the question ‘How?’ is
always raised. It also illustrates the overall architecture of the application and the setting of
standards, for example, for the design of an artificially intelligent system . This project utilizes the
Objectoriented analysis and design methods which are becoming the most widely used methods
for computer applications design.
3.3.1
Object Oriented Analysis and Design
Object-oriented analysis and design (OOAD) refers to the use of object-oriented modeling (an
approach where an application is modeled in terms of objects which have attributes and perform
operations) in the analysis of applications or in modeling the application requirements and in the
design of object-oriented application fulfilling these requirements.
OOAD is a software engineering approach that models the application as a group of interacting
objects. Each object represents some entity of interest in the application being modeled, and is
characterized by its class, its state (data elements), and its behavior. Various models can be created
to show the static structure, dynamic behavior, and run-time deployment of these collaborating
objects.
3.3.2
Unified Modeling Language (UML)
Unified Modeling Language is a diagrammatic object-oriented modeling language. It uses diagrams
to document an object-based decomposition of applications showing the interaction between these
objects and the dynamics of these objects. UML aims to provide a common vocabulary of objectbased terms and diagramming techniques that is rich enough to model any application development
project from analysis to design. This application is modelled with:
15
3.3.3
Use Case Diagram
Use case diagrams were used to perform requirements analysis in order to understand the core
functionalities and usage scenarios associated with the identified requirements. A Use case diagram
simply shows a look at the system from an outsider (e.g. user) point of view. The system is treated
as a black box and one solely identifies what the system is used for. The components of a use case
diagram include, Actors, Use cases, Associations and the system boundary.
1. Actors: represents the external entities of the system i.e. people or things that interact with
the system that is being modeled.
2. Use Cases: are functional parts of the system. It is what an actor does e.g. a customer
"browses the catalog", "chooses items to buy", and "pays for the items".
3. Associations: are shown between actors and use cases, by drawing a solid line between
them. It links an actor with the use case it interacts with.
4. System Boundary: represents the scope of the system the actor is interacting with.
The use case has two (2) actors and sixteen (16) use cases. The Administrator is the manager
of the system, User are the main users of the system. The following use case diagram illustrate
the system. The Use-case diagram is shown in the next Figure.
Figure 3.2: The Use-Case diagram for the Web Application.
3.3.4
Sequence Diagram
A Sequence diagram provides a graphical representation of interactions between objects over time.
It shows the messages that pass between classes over time for a use case. The objects involved
in the operation are listed from left to right according to when they take part in the message
sequence. A sequence diagram typically shows a user or an actor, and the objects and components
they interact with in the execution of a use case. There are four primary elements of a sequence
diagram:
16
1. Objects: are arranged on the horizontal axis. Time increases downwards. Below each object
there is a vertical dashed line. That is the life-line of the object spanning the period (the
vertical axis represents time) over which the object lives.
2. Lifelines: The life-line of the object spanning the period (the vertical axis represents time)
over which the object lives
3. Messages: Between the life lines (or activity bars) we show arrows representing the messages
which are exchanged between objects. The message itself is shown as a label on the message
arrow.
4. Focus of control:These are vertical rectangular boxes used to connect and send messages
between two objects in a sequence diagram. It is also used to bridge the communication of
different lifelines.
The Sequence Diagram below shows the interaction between the user and the user interface of
the application on the database. The next figure carefully describes this interaction that is the
most functional on the web application.
Figure 3.3: The Sequence Diagram for the Web Application.
3.3.5
Activity Diagram
The activity diagram depicts the workflow of activities within the system. It graphically represents
the flow of performance of various actions by the system entities. The activity diagram for posting
the questions by the guest students is represented in Figure IX below.
3.4
THE USER INTERFACE DESIGNS
A Graphical User Interface (GUI) is a medium through which the system users interact with the
system. It is a medium through which the system users send in their request into the system,
displays the outputs to the users alongside various options available to the user.
17
Figure 3.4: The Activity Diagram for the Web Application.
18
3.4.1
FaceRIM Home Page
FaceRIM home page is the first user interface displays at logon to users. It presents the general
overview of the online forum, showing the various tabs, links, and login section; register, etc.
Figure 3.5: FaceRIM Home Page.
3.4.2
The User Registration Interface
Every user will have to click on the register link on the Home Page to access this page. The user
registration page is shown in the next figure.
Figure 3.6: The User Registration Interface.
3.4.3
The Login Page Interface
On this page, registered users can log-in. It is represented in the Figure below.
19
Figure 3.7: The Login Page Interface.
3.5
DATABASE DESIGN
A database is a mechanism that is used to store and manipulate information, or data. With a
database, users are able to store data in an organized way and once it is stored, it is easy to
retrieve any form of information. This can be implemented using a database management system
(DBMS). A DBMS is a software that allows the storage and access of data to a user. The database
design is geared towards stating the purpose of the database of this system. The Database Design
was conducted to show a modelled view of the system. The database program for FaceRIM is the
MySQL; a relational database design was implemented and tested using a local MySQL (opensource relational database management system).
3.5.1
Description of Tables
A description of tables and their different columns are stated below: Note: PK means the primary
key in the tables on database “FaceRIM”
20
Table Name
sign up
Column
main_id(PK), id, Full_name, Username, Email,
Password, followers, User_photo, user_cover photo,
school, work, country, birthday, verify, website, bio,
admin, gender, login_attempts, language, a_Setup,
online
comments
c_id(PK), c_author id, c_post id, c_content,
c_edited, c_time_edited, c_time
likes
id(PK), liker, post_id
follow
id(PK), uf_one, uf_two
messages
id(PK), m_id, message, m_from, m_to, m_time,
m_seen
mynotepad
main_id(PK),
id,
author_id,
note_content note_time
notifications
id(PK), n_id, from_id, for_id, notifyType_id, notifyType, seen, time
r_star
id(PK), u_id, p_id
supportbox
id(PK), r_id, from_id, for_id, r_type, subject, report, r_time, r_replay, r_replay_time, status
saved
main_id(PK),
saved_time
typing_m
id(PK), t_from, t_to
wpost
post_id(PK), author_id, post_img, post_time,
post_content, p_title, p_likes, p_privacy, shared
id,
post_id,
note_title,
user_saved_id,
Table 3.1: Database Schema for FaceRIM
21
Description
Stores
the
users login
and profile
details
Stores and
maintains
user’s comments
Stores and
maintains
user’s likes
Stores and
maintains
user’s follow
Stores and
maintains
user’s messages
Stores and
maintains
user’s notes
Stores and
maintains
user’s notifications
Stores and
maintains
user’s stars
Stores and
maintains
user’s comments
Stores and
maintains
user’s saved
post
Stores and
maintains
user’s typing
Stores and
maintains
user’s posts
Chapter 4
System Implementation
4.1
INTRODUCTION
In this chapter, I discuss the implementation of FaceRIM. Implementation is the realization of
an application by following through several execution phases of planning, modelling, design and
analysis. After a thorough process of system analysis, system design and an exhaustive requirement
specification, the system was now implemented using appropriate tools. This chapter provides
an overview on the choice of tools and programming languages, and the different modules and
interfaces that were implemented[3].
4.1.1
Tools Used for Implementation
PHP:It is a server-side scripting language, and is a powerful
tool for making dynamic and interactive Web pages quickly.
It was the best choice of scripting languages to use for a very
flexible project as this. PHP was used to code the functionality of the system by leveraging the webstorm a powerful IDE.
PHP version 7.4.1 was the version of use[4].
Bootstrap:Hypertext Markup Language and Cascading
Style Sheet are tools used in development and creation of web
pages that run mostly on web browsers. They were used with
Bootstrap a free and open-source CSS framework to develop
responsive frontend design and user interface of the system.
MySQL:The MySQL database management system
served as the database for building and testing the system.
It also served as the platform where all data used in the application could be manipulated[4].
phpMyAdmin:This tool was used to manage the MySQL
databases over the web and locally on your computer. It provided an easy interface to carry out
SQL operations on the database. I worked with phpMyadmin version 3.4.5[5].
22
WAMP:WampServer is an Open-source web server solution comprises of basic components such as Apache
HTTP, MYSQL, PHP or Perl languages. It was used
in this project as the local server in developing the system.
4.2
THE DIFFERENT INTERFACES
These interfaces are to show the different interactions users actively perform on FaceRIM. The
figures below will give a pictorial view of the functionality of the web application.
4.2.1
the home page
once logged in the users are directed to this page, where the users can posts their posts, pictures
that might pick. And react and comment on others posts.
Figure 4.1: The home page.
4.2.2
the profile page
On this page, users have the opportunity to view ONLY their posts. In the figure Heiballa Abdellahi
who is logged in can see and modify all his in formations add or modify profile picture and cover.
23
Figure 4.2: The profile page.
4.2.3
notification
Notifications are updates about FaceRIM activity like new follows, likes and comments.
Figure 4.3: Notification.
4.2.4
Messages
Allows users to send a message to their contacts or they can search for the person you they to
reach.
4.2.5
Dashboard
Only an administrator can access the dashboard were he can view and manage all the users.
24
Figure 4.4: Messages.
Figure 4.5: Dashboard.
4.3
Web hosting
Web hosting is a service that allows organizations and individuals to post a website or web page
onto the Internet. Websites are hosted, or stored, on special computers called servers. When
Internet users want to view the website, all they need to do is type the website address or domain
into their browser.
000webhost: is one of the very few web hosts which gives the ability
to host a website while paying nothing. 000webhost has been in the paid
hosting business for around 4 years and they are providing free hosting
since 2 years. With easy use tools such as File manager to store all the
application’s files and Database manager to store the MySQL database
we created in wamp.
25
Figure 4.6: 000webhost.
26
Chapter 5
Conclusion
This chapter gives a summary of this work. A number of recommendations for future works in this
area were made and consequently the conclusion.
5.1
SUMMARY
The research work investigated and identified the relevant additional requirements that can be
catered for in the design and development of an online forum. Through this study, we have been
able to:
1. Explore relevant literature’s and existing systems to discover the right requirements to be
considered in the development of this application.
2. Model some of the operations of FaceRIM employing object oriented analysis and design
using UML diagrams.
3. Develop an effective social network for prospective users, where they can share different posts
or views on other posts of other users they follow and can contact with.
5.2
RECOMMENDATIONS AND FURTHER WORKS
Although Social networks are significant platforms for interaction and connections., the integration
of this social network and making it accessible to everyone is a big plus to this work. Also, most
users are able to relate with the interfaces, so they can use it easily. The participation of people
will also be an advantage because they will be able to test it and report issues and problems that
will be raised by the admin to improve the system. On recommendations, the social media is a very
flexible scene, where improvements are inevitable. More improvements will be done on FaceRIM by
integrating machine learning to serve the content to automatically extract meaning from posts by
identifying recurrent themes or topics, to recognize faces in photos and identify visuals etc. Further
work should also be carried out on properly evaluating and testing out the web application.
5.3
CONCLUSION
As the social media grows, web applications like FaceRIM will be relevant to users and youths
around the world. Even as other versions will be later developed, the activities and features on the
site will increase because they will be built to meet the end-users requirements. Social medias have
presented users with systems designed for the connections of people , with each post separated into
its own network. A network is begun by a user’s followers.
27
Bibliography
[1] Joshua Porter. Designing for the social web, volume 1. New Riders Berkeley, CA, 2008.
[2] Jan H Kietzmann, Kristopher Hermkens, Ian P McCarthy, and Bruno S Silvestre. Social media?
get serious! understanding the functional building blocks of social media. Business horizons,
54(3):241–251, 2011.
[3] Steve Suehring and Janet Valade. PHP, MySQL, Javascript & HTML5 all-in-one for Dummies.
John Wiley & Sons, 2013.
[4] Luke Welling and Laura Thomson. PHP and MySQL Web development. Sams Publishing,
2003.
[5] Jay Greenspan and Brad Bulger. MySQL/PHP database applications. John Wiley & Sons,
Inc., 2001.
28