Webface - Passion is Innovation

“Webface”
A Project Report Submitted
In Partial Fulfillment of the Requirements
for the Degree of
BACHELOR OF TECHNOLOGY
Submitted by
Abhishek Kumar (120560101003)
Ayushee Goel (120560101007)
Under the Supervision of
Ms. Renu Bahuguna
Asst. Professor
to the
Department of Computer Science and Engineering
DOON INSTITUTE OF ENGINEERING & TECHNOLOGY, RISHIKESH
UTTRAKHAND TECHNICAL UNIVERSITY DEHRADUN
May,2016

CERTIFICATE
Certifiedthat Abhishek Kumar (120560101003),Ayushee Goel(120560101007)has carried out
the project work presented in this report entitled “Webface” for the award of Bachelor of
Technology from Uttarakhand Technical University, Rishikesh under our supervision. The report
embodies results of original work, and studies are carried out by the students themselvesand the
contents of the report do not form the basis for the award of any other degree to the candidate or
to anybody else from this or any other University/Institution.
(Ms.Renu Bahuguna) (Mr.Kulvinder Singh)
Asst.Professor Head of Department
Date:

ACKNOWLEDGEMENT
We are very thankful to our advisor, Mr.Umesh Kochar(Mentor) for giving us complete
freedom and flexibility to work on this topic. Both of them have been very encouraging and
motivating and the intensity of encouragement has always increased with time. I am greatly
indebted to them.
I am also very thankful to Mr. Kulvinder Singh(Head of Department) and Ms. Renu
Bahuguna(Asst. Professor) in the Computer Science department. Those small discussions were
very helpful and provided me really valuable information.

Contents
1)Introduction to Webface 1-2
2)Structure study & Design 3-9
 Data Flow Diagrams(DFD) 3-6
 Entity-Relationships Diagrams(ER) 7-9
3)About Webface team 10
4)Webface origin & Planning 11
5)Development Agenda 12-13
 PERT Chart
 GANTT Chart
6)Narration of Technologies used 14-16
 J2EE
 HTML5
 MySQL(RDBMS)
 Java Script
 Why we are using MySQL(RDBMS)?
7)Block Diagram illustrating aspects of “Webface” 17
8)Features of Webface 18-22
 Online Programming
 Gallery
 Video Tutorial
 Feedback
9)Sign Up for “Webface” 23
10)After Sign Up elaboration 24-37
 Social Corner
 Learn Corner
11)Software Requirement Specification(SRS) 38-40

 Software Minimum Requirements
 Hardware Minimum Requirements
12)Technical Prerequisite 41
13)Modularization Details 42-43
14)Database Tables 44-47
15)Limitations of Webface 48
16)References 49
17)Glossary 50

Overview
 Webface comes with the moto of “Education with Social networking” web application.
 Webface provides us with eye-opening features at one place where we can learn,code
and chat with our loved ones.
 Webface is a web portal which provides us with almost all the social networking facilities
and gives us mind-altering experience.
 Webface brings to you with a taggy line for the web portal that says “Passion is
innovation.”
 Android app for the Webface will also be available soon that can be downloaded from
google play store or from the web portal itself.
 In addition,it grant the user with the opportunity to learn java basics and a variety of java
applications.
 It let the user to solve their java related query by posting their questions to a separate
search panel that is being provided.
 Users can register for absolutely free on this portal and can search their friends across the
globe.
 It is also available with a unique feature where the user can maintain a “Weekend
Magazine” for a whole week stuff and can share it with their friends and relatives as well.
 It is necessary for a user to register to make himself available with the impressive
features of webface that includes social corner,learn corner,etc.
 The main objective of this web portal is to establish a network among the people residing
in all over the world. All the information can be easily accessed and shared among the
people.
 www.webface.co.in an internet Social network and Learning Centre designed to help
users to meet new friends, maintain existing relationships and at the same time enhance
their concepts related to Java provided in learn corner.

Structure Study & Design
1)Data Flow Diagrams:
Data Flow Diagram

DFD from Admin’s perspective

2)Entity-Relationship Diagram:
USER
User
SignIn
Profile
Message
Make Gang
Learn Corner
NewsFeed
SignIn
ID
Password
Submit()
NewsFeed
It displaysthe
latestnews
updates.
Profile
SearchFriends
Update Profile
SendFriend
Request
FriendList
View()
Message
To User
Description
Send()
Learn Corner
Askqueries
Downloads
Video,Ebooks,
Applications
Learn various
java topics
View()
Make Gang
Gang Name
Owner
Privacy
Create()
U

ADMIN
Admin
Add
Update
Delete
Add
User
SubAdmin
Events
SearchInfo
User Ideas
Add()
Update
User’sprofile
User’sprivilages
SubAdmin
Learn Corner
Update()
Delete
User
SubAdmin
delete()
A

HOME PAGE
AboutPage
Thispage
diplaysgeneral
informationof
the website.
Termsand
ConditionsPage
List all the
termsand
conditions
relatedto
Webface.
Login()
SignUp()
AboutUs()
Privacy()
Termsand
Conditions()
Home Page
PrivacyPage
It showsall
the privacy
conditions
of the
website.
U
U
S A
U

About Us:
We the Webface team comes with the motto of building a web application that has an aim of
“Education with Social Networking.”
We had an ambition to bring flexibility by providing all the things at just one place.
It includes features like Java Compiler,Stranger chatting,maintain your own images,videos &
music gallery.

Webface Origin & Planning
 Using the spiral model, web Application www.webface.co.in social network is
developed in a series of incremental releases.
 The spiral model, originally proposed by Boehm [BOE88], is an evolutionary software
process model that couples the iterative nature of prototypes with the controlled and
systematic aspects of the linear sequential model.
 It provides the potential for rapid development of incremental versions of the web
Application www.webface.co.in .
 A spiral model is divided into a number of framework activities, also called task regions.
Typically, there are following task regions:
 Planning: It defines all those tasks that are required for defining resources,
timelines,& information related to our web Application.
 Risk analysis: Tasks required to access both technical and management risks.
 Engineering: Tasks required for building one or more representations of the
applications.
 Construction and release: Tasks required for constructing, testing, deploying,
and providing user support web Application.

DevelopmentAgenda
1)PERT Chart:
 A PERT chart is a project management tool used to schedule, organize, and coordinate
tasks within a project.
 A PERT chart presents a graphic illustration of a project as a network diagram
consisting of numbered nodes (either circles or rectangles) representing events, or
milestones in the project linked by labelled vectors (directional lines) representing tasks
in the project.
 PERT stands for Program Evaluation Review Technique can be both a cost and time
management system for Web Application.
PERT Chart for “Webface”
ProblemAnalysis
Analysisof ExistingSystem
Coding
RequirementAnalysis
Testing
Gathering Information
Implemetation
Design
2 days 2 days
1 day
2 days
28 days
28 days
90 days
2 days

2)GANTT Chart:
Activity July August September October November Total
Weeks
Problem
Definition
AndRequirement
GatheringAnalysis
2
Design
 Primary
Design
Database
 Detail
DesignDFD
ER,Gantt
4
Coding
Registration
Chatting
Scrapping
Mailing
13
Testing
TestCases
Unit Test
SystemTest
4
Deployment
Implement
2
Total Time 25

Narration of Technologies used
Technologies,development tools and programming languages that are used while developing
Webface are stated as:
1) J2EE:
 Short for “Java 2 Platform Enterprise Edition”,is a platform-independent, Java-centric
environment from Sun for developing, building and deploying Web-based enterprise
applications online.
 The J2EE platform consists of a set of services, APIs, and protocols that provide the
functionality for developing multitiered, Web-based applications.
 Features:
 Compiled code: faster applications, more design-time errors trapped.
 Improved run-time error handling, exception handling.
 Rich user interfaces, controls and events.
 Extensive set of controls, class libraries, user defined controls,
templates, such as menus. Easier layout.
2) HTML5:
 HTML5 is a markup language used for structuring and presenting content on
the World Wide Web. It is the fifth and current version of the HTML
standard.
 HTML5 is also a candidate for cross-platform mobile applications, because it includes
features designed with low-powered devices such as smartphones and tablets.

 Features:
 HTML5 introduces elements and attributes that reflect typical usage on
modern websites.
 Best known for use on mobile devices, geolocation is coming with HTML5.
 You can embed video without third-party proprietary plug-ins or codec. Video
becomes as easy as embedding an image.
 Canvas: This feature allows a web developer to render graphics on the fly. As
with video, there is no need for a plug in.
3) MySql(RDBMS):
 MySQL is an open-source relational database management system (RDBMS).
 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.
 Features:
 Uses multi-layered server design with independent modules.
 Designed to be fully multi-threaded using kernel threads, to easily use multiple CPUs if
they are available.
 Provides transactional and nontransactional storage engines.
 Uses very fast B-tree disk tables (MyISAM) with index compression.
4)Java Script:
 JavaScript is a high-level, dynamic, untyped, and interpreted programming language.
 Alongside HTML and CSS, it is one of the three core technologies of World Wide
Web content production; the majority of websites employ it and it is supported by all
modern Web browsers without plug-ins.
 Features:
 Giving the user more control over the browser.
 Detecting the user's browser, OS, screen size, etc.
 Performing simple computations on the client side.
 Validating the user's input.

Why we are using MySql(RDBMS)?
Some of the merits of using MySql (RDBMS) are as under:
 Centralization of database.
 Client Server Technology.
 Security.
 Normalization of Data Base.
 Relationship.
 Transaction Processor.
 It gives some internet related features.
Hence because of these features we are using MySql as a back-end.

Block diagram illustrating aspects of “Webface”
Features
Of
“Webface”
Online
Programming
Video
Tutorial
Can
maintain own
Gallery
Helps User
in
Chatting
with friends
Enhancing Java
Skills
Enables the user to
ask
programming/java
related query
Downloading java
projects & apps
Group chat
facility
Stranger
Chatting

Features of“Webface”
 Features of Webface helps us to enhance our knowledge,share our ideas among our
friends.
 Also,its an amazing platform for programmers too as it has a java program complier
available in it.It’s astonishing features lets us to connect people through stranger chatting
present within video tutorial module.
 User can maintain his/her own music/image gallery by simply signing into his/her
account.
At the home page of Webface,we are provided with the following features:

1)Online Programming
 Under online programming feature,we can write and compile java code as it provide us
with online java compiler.
 It provide users with two fields,namely,Folder name and Class name.
 Folder name takes the package name where user’s code is saved.
 User has to enter name of the class as Class name.
 User has to click on the “Compile & Run” button to compile the java code and will get
the output of the program.It will also display errors,if any.

2)Gallery
 Gallery feature of Webface provides users with the intense collection of images that can
be viewed in an expanded form as well.
 Within the gallery feature of Webface,we are provided with 3 categories that are
Creative,Photography and Web development.
 “Creative photos” contains an extension of conventional photos into creative art that’s
purpose is to stimulate creative thoughts.
 Under the category “Photography”,we have images,especially a positive print recorded
by exposing a photosensitive surface to light.
 Photos in “Web development” are those that are often created by graphic designers for
use on the web.

3)Video Tutorial
 Video Tutorial is provided with an additional feature of chatting with strangers at the
same time.
 Under this category,user can watch video for free and can download it from their as well.
 User is allowed to watch video in an expanded form and the same time can chat with the
unknowns by just writing the message and pressing enter after that.
 While chatting,user is not permitted to refresh the same page.
 The stranger chatting feature offers user an opportunity to make friends all across the
globe.

4)Feedback
 Under the module of “Contact us”,user can give his/her feedback to the admin.
 User can write feedback by simply filling the fields provided as shown in the screenshot.
 User is required to mention his/her name,Email-id and the message that he wishes to give
as his feedback.
 User can deliver his opinions through his social accounts on Facebook,Twitter,gmail,etc.
as well.
 Reply to user’s feedback will be given by admin within 24 hours from the time the query
was posted.

Sign Up
 User can now make his own account by signing up and can relish all the facilities of the
Webface world.
 Sign Up for new account by entering fields such as First name,Last name,etc.and that too
for free.
 The Password field should be strong enough in length and should contain all the
combinations such as numbers,alphabets & special characters.
 User essentially needs to sign up to be entertained by learnig,programming and social
networking all at the same time.
 It is suggested to give your correct name & gmail-id to make it easier for your friends to
search you.

After Sign Up
After Signing Up,it will take the user to the home page as shown below.
User can now upload his profile picture that he wishes to be displayed to his friends &
acquaintances.
After uploading,following screen appears.

Here,user can update his status in terms of his/her mood that can be seen by their friends.
It’s needed to click on the “Add Social Profile Info” in order to add social information about
urself.

User can also update his social information anytime he wants.
After entering all the information,it will take the user to its home page where he can search for
his friends.
SocialCorner:
 By entering either the phone number or the Email-id of his/her friends,user can send a
friend request to the one.
 Contact number remains secured until he accepts the request.
 At the same page,user can send messages to his Webface friends and can chat with them.
 Status of the user will be displayed at the left corner of home page as shown in the
screenshot above.

For suppose,user want to send a friend request to say,logtoabhishek@gmail.com,
His profile will be displayed alongwith an option of “Send Friend Request”.
When the person whom friend request was sent to open up his account and move to his social
corner,he will find a friend request that was send to him by the user.
There,he has two options either to accept or reject that request.
Even,after accepting that particular person can be unfriend as well & will no longer be able to
see updates from that person.
After accepting the request of the user,he/she can be seen in his friends list & is available to send
messages,etc,.

The accepted friend can be seen in the friend list as shown below.

Learn Corner:
Under learn corner,user can enhance their java & programming skills with the sub-categories
provided as shown.
Here,user can read about java from its beginning and download the same as well.
At the same page,we are provided with some basic topics of java such as:
 Methods,
 Collections
 Keywords,etc.
Also,some Advance Java tutorials can also be seen like Servlets,Java Beans,etc.
All the topics to make the user a perfect learner of java are provided as shown.

Suppose,the user want to download the tutorial for Java Beans,he has to just click on it & the
user can upgrade his skills.

User can also ask programming or Java related query by posting their questions in the block
provided at the botton & clicking on “submit” button.
User can check the events fired by the admin by going onto the events option and can see the
events of the week.

If we come to second category of learn corner i.e. Java Applications,here we are provided with
several sub-categories that are Desktop,Web,Mobile Applications,etc.
Next,we have Java projects as a sub-category.Projects under it are shown below.

As if,the user choose the “Mouse Event” project,he/she will see the following window.
It enable us to change the background color & Foreground color options.
Next and the last sub-category under learn corner we have is “Learn more” in which we are
provided with more topics & tutorials on java as shown below.
It includes some videos on java to intensify the java skills,e-books on java from famous
writers,etc, are available in this particular corner for making the user boost their knowledge.

The options that are avilable to user at their home page are as follows:

1)Send Message:
Under this,user can view those messages that are send to his/her friends & relatives by him.
2)View Message:
Under this,user can view received messages send by his friends and acquiantances.
3)News Feed:
News feed contains “Events of the week” that are fired by the admin.
4)Friend Requests:
It contains all the requests that has been sent to you by your friends & relatives.
5)Friend List:
It contains list of all those friends that are in your friend list.
6)Group Chat:
It enables the user to chat with more than one friend at a time by making a
group/gang.Screenshot of a group chat is shown below.

One intresting & unusual feature is also available to the user at the home page i.e.to maintain
user’s own image,music & video gallery.
From here,user can select any of the following options in order to make their own galleries,such
as:
In order to make your own music gallery

In order to make your own video gallery
In order to make your own image gallery

Software Requirement Specification
 A software requirements specification (SRS) is a description of a software system to be
developed.
 The software requirements specification document enlists enough and necessary
requirements that are required for the project development.
 The specific goals of the SRS are:
 Facilitating reviews.
 Describing the scope of work.
 Providing a reference to software designers (i.e. navigation aids, document structure).
 Providing a framework for testing primary and secondary use cases.
 Linking features to customer requirements.
 Providing a platform for ongoing refinement (via incomplete specs or questions).
A general structure for Software requirement specification of www.webface.co.in is
given below:
 Introduction:
www.webface.co.in, a web portal is based on learning,programming as well as social
networking.
 Purpose:
The purpose of this document is to describe the requirements for the web Application.
 Scope:
The scope of this project is in the field of the web application for social networking.At the
same time it is a hub of various programming languages.

 Product Perspective:
The system is to produce platform for the works related to Social networking & enhancing
programming skills.
 User Characteristics:
The main user of this portal will be the one who are interested to learn basics as well as
developing applications based on java & are active in their social life as well.
 General Constraints:
This project will be compatible with any web server that has GlassFish Server and JVM in
It.
 Assumptions And Dependencies:
No assumptions.
SOFTWARE MINIMUM REQUIREMENTS
 Operating System : Windows XP and later versions
 Database : MySql Server 5.1
 Server Side Language : Servlet,JSP & Java
 Scripting Language: Java Script
 Internet Tool: HTML,CSS

 Web browser: IE9,Mozzila,Google Chrome
 Web server: GlassFish Server
HARDWARE MINIMUM REQUIREMENTS:
 Processor : Pentium IV and later version
 Memory : 128 MB RAM and above
 Hard Disk : 5 GB Hard Disk
 Monitor: Color
 Mouse : Optical Mouse/Keyboard

Technical Prerequisite
 It is a measure of a specific technical solution and the availability of technical
resources and expertise .
 The proposed system uses Java as front-end and MySql as back-end tool.
 MySql is an open-source relational database management system,a popular tool used
to design and develop database objects such as table views, indexes.
 Java provides a system for developing application software and deploying it in
a cross-platform computing environment.
 The above tools are readily available, easy to work with and widely used for
developing commercial application.
Tools Used
1) J2EE Library
2) NetBeans IDE 8.0
3) JDK 1.8
4) Glassfish Server
5) MySql 5.1

Modularization Details
Each module present in our web portal is labeled & described below:
Registration Module—Using Registration module, a new user can get himself register at our
portal by just entering their basic information.
Login Module—Using this module, user can login to www.webface.co.in and be pleased with
the facilities provided.
Forgot Password Module—Users can set their new password in case they forgot their actual
password.
Find Friend Module—User can search their friends by entering their Email-id or contact
number.
Profile Module—The profile module enables users to add/update their profile details. The
module facilitate user to maintain its profile .
Friend Request Module—The friend request module provides feature of sending invitation to
your friends.
Message Module—User can send message to his friend after they become a member of our
portal.
Chat Module—The user can chat with their friends & can chat with strangers as well through
stranger chatting feature.
Gang Module—The user can join or leave the gang.This module enable the user to chat with
more than one friends at the same time.
Learn Corner Module—A user can learn Java and various java applications and also he can ask
any query regarding java.

Search Query Module-A user can search any programming or java related query using this
module.
Post Ideas Module-Users can post their innovative ideas and suggest their valuable advices to
our website.
Learn More Module-This module allows users to download ebooks from famous writers,java
videos & applications & let the user greecing their knowledge.
Gallery Module –User can maintain their own image,video & music gallery with enhanced
security features available.
Online Compiler – With the help of this module java lovers can write & compile java code and
can get to know errors made,if any.

Database Tables
Login:
Column Name Data Type size Key Constraints
Id Varchar 30 PRIMARY Not Null
Passward Varchar 20 Not Null
Email id Varchar 20 Not Null
Admin Registration:
Id Varchar 30 PRIMARY Not null
Admin_name1 Varchar 20 Not null
Password Varchar 20 Not null
Repass Varchar 20 Not null
Gender Varchar 15 Not null
Contact_no Varchar 15 Not null
Qualification Varchar 50 Not null
PAN Varchar 20 Not null
question Varchar 50 Not null
answer Varchar 50 Not null
Chat:
Chat_id Varchar 15 Not null
Chat_text Varchar 1000 Not null
Date Date Not null
User1 Varchar 20 Not null
User2 Varchar 20 Not null
Status Varchar 20 Not null

Time DateTime Not null
Event:
Heading Varchar 100 Not null
Description Varchar 200 Not null
Link Varchar 100 Not null
Code LongBlob Not null
Feedback:
Friend List:
Friend Request:

Gang:
Gang_name Varchar 30 Not null
Owner Varchar 30 Not null
Privacy Varchar 30 Not null
Learn More:
Column Name Data Type Size Key Constraints
Video_tut LongBlob Not null
E_books LongBlob Not null
Java_flavour Varchar 500 Not null
Web_development Varchar 500 Not null
Technologies Varchar 500 Not null
User Registration1:
F_name Varchar 20 Not null
L_name Varchar 20 Not null
Password Varchar 20 Not null
repass Varchar 20 Not null
Sex Varchar 20 Not null
Birthday Varchar 50 Not null
Question Varchar 50 Not null
Answer Varchar 50 Not null

User Registration2:
Contact_no Varchar 15 Not null
Qualification Varchar 50 Not null
About_me Varchar 50 Not null
Status Varchar 50 Not null
Language Varchar 50 Not null
Current_city Varchar 50 Not null
Home_Town Varchar 50 Not null
Interested_in Varchar 50 Not null
Video:
Id Varchar 30 Not null
video longBlob Not null
Music:
Music longBlob Not null
Image:
Image longBlob Not null

Limitations of “Webface”
 This portal for now is not available with the feature of Online Video
Conferencing.
 Setting various types of themes & sending,sharing them with your friends is not
possible.
 Sending messages to friends & relatives by making use of different languages is
not present.
 Voice chatting & sending audio messages are not supported.
 Also, no option is available for live webcam facility.
 Online Compiler for now can’t take input from users but can display errors,if any.

References
 https://en.wikipedia.org/wiki/Java_(software_platform)
 www.w3schools.com
 www.webteacher.com
 The Complete Reference of HTML and XHTML Fourth Edition by Thomas
Powell.
 Database System Concept Fifth Edition by Henry F Korth(TMH).
 www.java.com
 www.oracle.com
 www.htmlgoodies.com

Glossary
Serial No Term Meanings
1) HTML HyperText Markup Language
2) JSP Java Server Pages.
3) J2EE Java 2 Platform Enterprise
Edition.
4) JVM Java Virtual Machine
5) DHTML Dynamic HTML
6) CSS Cascading Style Sheet
7) DFD Data Flow Diagram
8) ERD Entity-Relationship Diagram

Webface - Passion is Innovation

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Webface - Passion is Innovation

Semelhante a Webface - Passion is Innovation (20)

Último

Último (20)

Webface - Passion is Innovation