Heera - Project-Report New

A PROJECT REPORT
On
Web Chat Application

Submitted in the partial fulfillment for the requirement for the award of the degree
Of
Bachelor of Technology
In
COMPUTER SCIENCE AND ENGINEERING
Batch:2021-2024
SubmittedTo: Submitted By
Ms. Kirti Bhatia Gufran Alam
Roll no. 4055006
H.O.D (CSE Dept.) Heera Singh
Roll no. 4055007
SKITM Ladrawan CSE(8thSem.)
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

SAT KABIR INSTITUTE OF TECHNOLOGY AND MANAGEMENT, BAHADURGARH
May2023
DECLARATION
We,Heera Singh(Roll no. 4055007)& Gufran Alam(Rollno.

4055006)herebydeclarethattheprojectworkentitled“Web Chat
Application” is an authenticated work carried out by me at Sat
KabirInstituteofTechnologyandManagementforthepartialfulfilme
ntof the award of the degree of Bachelor of Technology in
ComputerScience&Engineeringsubmittedat,SatKabirInstituteofTechnolo
gyand Management, Bahadurgarh, Jhajjar, Haryana. This work
hasnotbeensubmittedforsimilarpurposeanywhereelse.
Date: 08-05-2023 Heera Singh

Gufran Alam
Place:Delhi
B.TechCSE6thSem
I
CERTIFICATE
This is to certify that the Project work “Web Chat Application”, which is
being submitted by Gufran Alam (Univ. Roll No. 4055006) & GHeera
Singh (Univ. Roll No. 4055007) in partial fulfilment of the requirement
for the award of the degree of Master of Technology in Computer
Science & Engineering submitted at, Sat Kabir Institute of Technology &
Management is an authentic record of his work carried out under my
supervision.
I wish him/her best of luck for his future.
Guide
Ms. Kirti Bhatia
Head of Department
Ms .Kirti Bhatia Sat Kabir Institute of
Technology & Management
Sat Kabir Institute of
Technology &Management Bahadurgarh –Haryana
Bahadurgarh–Haryana
II
ACKNOWLEDGEMENTS
I thank God for making everything possible. I would like to thanksto Mr.
Hemant (The Principle), Ms. Kirti Bhatia H.O.D of CSEDept,and
a special thanks to my worthy guide Ms.Kirti Bhatia of Sat Kabir
Institute of Technology and Management
whosupervisedmetocompletethisproject.Hertechnicaladvice,ideasand
constructive criticism contributed to the success of this report. She
suggested me many ideas and solved my puzzles when I was in need.
Her motivation and help have been of great inspiration tome.
I would also like to thanks my faculty members of CSE department for

providing me the opportunities, support and the necessary help to
complete this project work.
Heera Singh
(4055007)
Gufran Alam
(4055006)
B.Tech CSE6thSem
Abstract
The web chat application is a digital platform that allows

users to communicate with each other in real-time through
text messages. This application provides a user-friendly
interface that supports both one-on-one and group chats. It
enables users to create and join chat rooms based on
specific topics or interests, facilitating interaction with like-
minded individuals. The application uses advanced
encryption protocols to ensure the security and privacy of
user information. Additionally, it offers features such as
message threading, file sharing, and emoji support,
enhancing the user experience. Overall, the web chat
application provides a convenient and efficient means of
communication that is easily accessible from any device with
an internet connection.
TITLE OF THE PROJECT
Web Chat Application

(Node JS / ReactJS)
(Click Chat)
TableofContents
1. PROJECTPROPOSALPERFORMA
2. GUIDERESUME
3. INTRODUCTION
4. Purpose:
5. SYSTEMREQUIREMENTSTUDY
1.1 HARDWARECONSTRAINTS:
1.2 SOFTWARE
CONSTRAINTS:6.PROJECT
CATEGORY7.ANALYSIS
1.3 DATAFLOWDIAGRAM(DFD)
1.4 ERDiagram
1.5 CLASSDIAGRAMS:
1.6 DATABASEDIAGRAMS:
1.7 CLASSDIAGRAMS:
1.8 DATABASEDESIGN
8.ACOMPLETESTRUCTUREOFPROJECT:
1.9 ProcessLogicofeachmodule
1.10REPORTGENERATION
9. PROJECTCODE
10. SCREENSHOTS
9. ScopeoftheFutureApplication
10. BIBLIOGRAPHY
INTRODUCTION
This project is aimed on the Web Chat Application in secured and

faster manner.TheWeb Applicationthat can
beaccessedfromanywhereovertheInternet.
Chatting is now-a-days very useful to express our ideas as well as
receive othersideas on any topic.Chats reflect the recent trends of the
society. Sometimes, it ispossibleto meet eminentpeoplein
chattingandhave theiradvice.
Inthiswebappwecanableto
chatwithfriendsinGroupaswellasPrivateRoom,withprivacy,as
wearesecuring thedatain interchanging intoObject form.
This project has been planned to having the view of distributed
architecture,
withcentralizedstorageofthedatabase.Theapplicationforthestorageofthe
datahasbeen planned.
Using the constructs of MySQL 5.7 and all the user interfaces has
been
designedusingtheReactJS(JavaScript).Thedatabaseconnectivityisplann
edusingthe
―Database‖methodology.The standardsofsecurityanddataprotective
mechanism have been given a big choice for proper usage. The
application takes care ofdifferent modules and their associated reports,
which are produced as per theapplicablestrategies.Theall login password
insertedintodatabase.
Clientcanperformthefollowingtasks:
1. Connect:HecanconnecthimselftochatserverbyInsertingcorrecthisusernamean
dpassword.
2. Hecanparticipateinchattingbyentering intoachatroom.
3. DisplayeveryuserProfilePicture.
4. Display activity of user: When chatting is done, whether the other user
issending text isalso displayedon hisconsole.
5. Room management: He can create his own chat rooms based on a
subjectand
6. Copy&Paste:Hecanalsoperformoperationslikecopyingearliertextintochat
text.
Purpose:
The purpose of this document is to describe all external and internal

requirementsof the ―ClickChat‖.Italso describesthe interfacesfor the
system.Itis
In user management module, whenever a new user wants to join in

this chattingthen He / She can register himself/herself using the
registration form and join us.Hehastherighttodeletehis accountat
anypoint oftime.
a. In chat room management module also needs to interact with the
systemwhenevercreating/updating/entering achatroom.
b.
Inchattingmodule,userneedssysteminteractionatthetimeofchattingwithotherst
hroughpubliccommunicationorprivatecommunicationchannel
c. In messages module, the users send instant messages which will appeared
asapopupatthetargetedusersystem.ifthetargeteduserisnotavailableitalsoustost
orethe offline messages.
d. Preferences & Editing Options module, system needs user interaction
whentheuser wants anyeditingoptionslike copy,pasteetc.
ProjectScopeandObjectives:
 Optimumutilizationofsystemispossible.Allbasicfunctionalitiesareprovided.
 Reducestheusermanualcommunication work.
 Thewastageoftimeisreduced.
 Moreflexible,itmeanswecancontinuetousethesamesystemeventhenoofusersup
tomaximumlevel.
 Tospeedupthecommunication.
PROJECT REPORT
TITLEOF THE PROJECT
WebChatApplication(
NodeJS / ReactJS)
(ClickChat)
CHAPTER-1
INTRODUCTION
INTRODUCTION
This project is aimed on the Web chat Application with in secured and
fastermanner.TheWebApplication thatcan beaccessed
fromanywhereoverInternet.
Chatting is now-a-days very useful to express our ideas as well as

receive othersideas on any topic.Chats reflect the recent trends of the
society. Sometimes, it ispossibleto meet eminentpeoplein
chattingandhavetheir advice.
In this Web App we can able to Group as well as Private room chat, with
full ofprivacy,cause ofthedata isinter-changedByObjectform.
This project has been planned to having the view of distributed

architecture, withcentralized storage of the database. The application for
the storage of the data hasbeen planned.
Using the constructs of MySQL 5.7 and all the user interfaces has been
designedusing the JAVA. The database connectivity is planned using the
―Database‖ methodology. The standards of security and data protective
mechanism have
beengivenabigchoiceforproperusage.Theapplicationtakescareofdifferent
modules and their associated reports, which are produced as per the
applicablestrategies.Theallloginpasswordinserted into database.
CHAPTER-2
OBJECTIVE
ProjectScopeandObjectives:
 Optimumutilizationofsystemispossible.Allbasicfunctionalitiesareprovided
.
 Reducestheusermanualcommunicationwork.
 Thewastageoftimeisreduced.
 Moreflexible,itmeanswecancontinuetousethesamesystemeventhenoof
usersuptomaximumlevel.
 Tospeedupthecommunication.
CHAPTER-3
TOOLS/ENVIROMENT
ABOUTNodeJS
INTRODUCTIONTONodeJS
What is Node.js?
Node.jsisaserver-
sideplatformbuiltonGoogleChrome'sJavaScriptEngine (V8
Engine). Node.js was developed by Ryan Dahl in 2009 and
itslatest version is v0.10.36. The definition of Node.js as supplied
by its officialdocumentationisasfollows−
Node.jsisaplatformbuilton
Chrome'sJavaScriptruntimeforeasilybuilding fast and scalable
network applications. Node.js uses an event-driven,non-
blockingI/Omodelthatmakesitlightweightandefficient,perfect for
data-intensive real-time applications that run across
Node.jsisanopensource,cross-
platformruntimeenvironmentfordeveloping server-side and
networking applications. Node.js applicationsare written in
JavaScript, and can be run within the Node.js runtime on
OSX,MicrosoftWindows,andLinux.
Node.js also provides a rich library of various JavaScript modules

whichsimplifies the development of web applications using
Node.js to a greatextent.
Node.js=RuntimeEnvironment+JavaScriptLibrary
FeaturesofNode.js
Following are some of the important features that make Node.js

the firstchoiceofsoftwarearchitects.
 Asynchronous and Event Driven − All APIs of Node.js library
areasynchronous,thatis,non-blocking.ItessentiallymeansaNode.jsbased
server neverwaits for an API to return data.The server movesto the next
API after calling it and a notification mechanism of Events
ofNode.jshelpstheservertogetaresponsefromthepreviousAPI call.
 Very Fast − Being built on Google Chrome's V8 JavaScript
Engine,Node.jslibrary isvery fastincodeexecution.
 SingleThreadedbutHighlyScalable −Node.jsusesasinglethreaded
model with event looping. Event mechanism helps the serverto respond
in a non-blocking way and makes the server highly scalableas opposed
to traditional servers which create limited threads to
handlerequests.Node.jsusesasinglethreadedprogramandthesameprogr
am can provide service to a much larger number of requests
thantraditionalserverslikeApacheHTTPServer.
 NoBuffering
−Node.jsapplicationsneverbufferanydata.Theseapplicationssimply
outputthedatain chunks.
 License−Node.jsisreleased undertheMITlicense.
WhoUsesNode.js?
Following is the link on github wiki containing an exhaustive list of

projects,applicationandcompanieswhichareusingNode.js.Thislistin
cludeseBay,GeneralElectric,GoDaddy,Microsoft,PayPal,Uber,Wiki
pins,Yahoo!,andYammertonameafew.
 Projects, Applications, andCompanies UsingNode

If you are still willing to set up your environment for Node.js, you
need thefollowing two softwares available on your computer, (a)
Text Editor and (b)TheNode.jsbinary installables.
TextEditor
This will be used to type your program. Examples of few editors

includeWindows Notepad, OS Edit command, Brief, Epsilon,
EMACS, and vim orvi.
Nameandversionoftexteditorcanvaryondifferentoperatingsystems.
For example, Notepad will be used on Windows, and vim or vi can
be usedonwindowsaswellasLinuxorUNIX.
The files you create with your editor are called source files and
containprogram source code. The source files for Node.js
programs are typicallynamedwiththeextension".js".
Before starting your programming, make sure you have one text
editor
inplaceandyouhaveenoughexperiencetowriteacomputerprogram,s
aveitinafile,and finally executeit.
The Node.jsRuntime
The source code written in source file is simply javascript. The

Node.jsinterpreter
willbeusedtointerpretandexecuteyourjavascriptcode.
Node.js distribution comes as a binary installable for SunOS ,

Linux, MacOS X, and Windows operating systems with the 32-bit
Following section guides you on how to install Node.js binary
distribution onvariousOS.
Download Node.jsarchive
DownloadlatestversionofNode.jsinstallablearchivefilefrom
Node.jsDownloads. At the time of writing this tutorial, following are
the versionsavailableondifferentOS.
OS Archivename
Windows node-v6.3.1-x64.msi
Linux node-v6.3.1-linux-x86.tar.gz
Mac node-v6.3.1-darwin-x86.tar.gz
SunOS node-v6.3.1-sunos-x86.tar.gz
Installation onUNIX/Linux/MacOSX,andSunOS
Based on your OS architecture, download and extract the archive

node-v6.3.1-osname.tar.gzinto/tmp,andthenfinallymoveextractedf
ilesinto
/usr/local/nodejsdirectory.Forexample:
$ cd/tmp
$wgethttp://nodejs.org/dist/v6.3.1/node-v6.3.1-linux-x64.tar.gz
$tarxvfznode-v6.3.1-linux-x64.tar.gz
$mkdir-p/usr/local/nodejs
$mvnode-v6.3.1-linux-x64/*/usr/local/nodejs
OS Output
Linux exportPATH=$PATH:/usr/local/nodejs/bin
Mac exportPATH=$PATH:/usr/local/nodejs/bin
FreeBSD exportPATH=$PATH:/usr/local/nodejs/bin
InstallationonWindows
Use theMSI fileandfollow theprompts to install theNode.js. By

default,the installer uses the Node.js distribution in C:\Program
Files\nodejs. Theinstaller should set the C:\Program Files\nodejs\
bin directory in window'sPATH environment variable. Restart any
open command prompts for thechange to takeeffect.
Verifyinstallation: ExecutingaFile
Create a js file named main.js on your machine (Windows or

Linux) havingthefollowingcode.
/* Hello, World! program in

node.js
Nowexecute main.jsfileusing Node.jsinterpretertoseethe result−
*/console.log("Hello,World!")
$nodemain.js
Ifeverythingisfinewithyourinstallation,thisshouldproducethefollowin
gresult−
Hello,World!
ABOUTMY-SQLSERVER
TheProjectisdevelopedusingRelationalDatabaseManagementSystem(RD
BMS). A database system is essentially a sophisticated, computerized
recordkeeping system, a repository for a collection of computerized data
files. A databasesystem maintains information and makes that
information available on demand, forthis purpose a database system
provides set of facilities to perform such operations.The benefits of a
database system over any traditionalsystem are obviousasdatabase is
integrated as well as shared, thus a database eliminates redundancy
andalsoas aconsequence,databaselets
multipleusersaccessthesamepieceofdata.
The most important advantage of the database is to maintain the

integrity i.e. itinsures that the change made to the database by authorized
users do not result in alossofdataconsistencyand
guardagainstaccidentaldamagetothedatabase.
FacilitiesofferedbyRDBMS:
 Creationoffiles,Additionofdata,Deletionofdata,Modificationofdata.
 Retrievingdatacollectivelyorselectively.
 Thedatastoredcanbesortedorindexedatusersdiscretionordirection.
 Variousreports can be produced from the system. These may either
bestandardizedreportsorthatmaybespecificallygeneratedaccordingtospecificu
ser definition.
 Mathematical function can be performed and the data stored in the
databasecanbemanipulated withfunctionsto performthedesired calculations.
ABOUTWEBSOCKET
1. IntroductiontoWeb-Socket.
2. Introductiontothe APIforWeb-Socket.
WhatisWeb-Socket?
 Fullduplexcommunicationbetweenbrowserandserver.
 Supportedinmodernservers.
 Supportedinmodernbrowsers.
 Real-timefullduplexcommunication.
 StandardizedbytheIETF(RFC6455).
 UsesPort80/443(URLschemews://,wss://).
 Smalloverheadfortextmessages(frames)
 0x00forframestart,0xFFforframeend(vsHTTP1kb)
 UsesCases:games,collaborationapps,finacialtickets,socialfeeds,chat
…,etc.
Web-SocketLife Cycle
INTERACTIVEWEBSITES
 HTTPishalfduplex.
 HTTPis verbose
 Hack forserverpush
o Polling
o Longpolling
o Comet/Ajax
o Complex,Inefficient,Wasteful
WEBSOCKETRESCUE
 TCPBased,bi-directional,full-duplexmessaging
 OriginallyproposedasofHTML5
 IETF-definedProtocol:RFC6455
o Handshake
o DataTransfer
 W3CdefinedJavaScriptAPI
o CandidateRecommendation
ESTABLISHACONNEXTION
HandshakeRequest
client Server
HandshakeResponse
HANDSHAKEREQUEST
GET /chat
HTTP/1.1Host:loc
alhostUpgrade :
WebsocketConnec
tion:Upgrade
Sec-WebSocket-Key :
sdf1sdgdf23djg23h4gh43==Origin:
http://localhost/Clickchat
Sec-WebSocket-
Protocol:chat,superchat,minicahtSec-
WebSocket-version:13
HANDSHAKERESPONSE
HTTP/1.1 101 Switch

protocolsUpgrade :
WebSocketConnection :
Upgrade
Sec-WebSocket-Accept:
s6df87ds89sdg8d9sg789dg==Sec-WebSocket-
Protocol:chat
WEBSOCKETLIFECYCLE
Connected:
Connectionclose(Disconnected):
CHAPTER-4
ANALYSISDOCUMENT
SRSforClickChat:
Overview
The software requirement specification (SRS) is very important part of
the softwarebuilding process, which describes the actual user level
requirement from technicalpoint of view. i.e. whatthe user exactly
wants ?or for what purpose we are makingevery thing The objective of
preparing the software requirement specification is torepresent the
requirements of the software in such a manner that ultimately leads
tosuccessful software implementation. It is the result of the analysis
process of
thesoftwaredevelopment.Itshouldcontainallthedatathesoftwareisgoingtop
rocess, the function it will provide, and the behavior it will exhibit. This
SoftwareRequirementsSpecifications(SRS)isdefinedinIEEEStd.830-
1993,IEEERecommendedPracticeforSoftwareRequirementsSpecification
s.Thedocumentisorganizedinthefollowingstructure:
 Introduction
 InformationDescription
 FunctionalDescription
 BehaviorDescription
 ValidationCriteria
 Bibliography
 Appendix
Introduction
The introduction section describes the goals and objective the
InformationDescription
This section of the SRS provides a detailed of the problem that the
software mustsolve. It should describe the core of the software – i.e. The
Data.The data orinformation the software is going to work on is the
most basic part of the software.The description of each data or
information entity is described here. It also
givesdetailsoftherelationshipsbetweenthedataelementsofthesoftware.Thei
nformationdescriptionhelpsthesoftwaredesignersintheirdesigning
purpose.
FunctionalDescription
This section of the SRS describes the each functions required to solve
the problem.It emphasizes on the core of the software on which the data
will be processed – i.e.The Function. It also includes the process
specification of each function,
designconstraints,andperformancecharacteristics.TheDFDoranyothergra
phicaldiagramcanalso be addedtodescribethefunctionalityof thesystem.
BehavioralDescription
This section of the SRS describes the behavior of the software will
exhibit. It isbased on definition of the events and the operations that it
will perform because ofevents.
Bibliography
Thissectioncontainsreferencestoalltherelateddocumentsrelatedwiththesof
tware.Thismayincludeanytechnicaldocument,standardsdocumentorsoftw
areengineeringpaper.
Appendix
This section is supplementary and can include the matters that are
important for thesoftware development.Itmayincludethestatisticaldata,
graphsoralgorithmdetails.
Purpose: The purpose of this document is to describe all external and

internalrequirementsof the ―Clickchat‖.Italsodescribestheinterfacesfor
thesystem.Itis in user management module, whenever a new user wants
to join in this chattingthen She/he Can Sign up on our Website and Join
us. He has the right to delete theuserat anypointoftime.
a. In chat room management module also needs to interact with the
systemwhenevercreating/updating/entering achatroom.
b. In chatting module, user needs system interaction at the time of
chattingwithothersthroughpubliccommunicationorprivatecommunicationcha
nnel
c. In messages module, the users send instant messages which will appeared
asa popup at the targeted user system. if the targeted useris not available
italsoustostorethe offline messages.
d. Preferences & Editing Options module, system needs user interaction
whentheuser wants anyeditingoptionslike copy,pasteetc.
Scope: This document describes the requirements of the system. It is
meant for useby the developers, and will also be the basis for validating
the final system. Anychanges made to the requirements in the future will
have to go through a formalchange approval process. The developer is
responsible for asking for clarifications.When necessary and will not
make any alterations without the permission of
client.Thisprojectworkintendstofacilitatetheeffectivecommunicationforth
eusers.Uptonowtheyfollowedthemailingsystem
intheirorganization.Whenthecommunitygrownandcametoknowthatthemo
stoftheirresourceswastingbyputonsendingthemails,receivingitandviewing
itwhichdoesn’tlivecommunication.Bythisuseraskedtoenterallthedetailsw
hateverhewantsinthefutureandcangettheminaproperformatandrequiredres
ultswheneverhewantseasilyjustbyfewclicksonly.Thissystemisdevelopedi
nsuchawaythatanyonecan easilygettheknowledgeof howtousethesystem.
SystemAnalysis
ProblemIdentification
Problem identification is very first step of system analysis. The analyst

meets withthe candidate and the company’s placement. Here in our case
both candidates andthe company placement and end-user are the former
and candidate . In this step, weare
 Theinformationbeingsuppliedanditsform
 Theeconomyofprocessing
 Thecontroloftheinformationprocessing
 Theefficiencyoftheexisting system
 Thesecurityofthedata&software
PreliminaryInvestigation
Once the request for the information system development is received,
the firstsystem activity― preliminary investigation ‖ begins. This
activity is independentofthesoftware-
engineeringparadigm.Thatmeanswhetherasystemwillbedeveloped by
means of the system development life cycle (SDLC), a
prototypingstrategy, or the structured analysis method, or a combination
of these methods,preliminaryinvestigation mustbeperformed first.This
activityhasthreeparts:
 RequestClarification
 Studyand
 Approval
It may be possible that the request that has been received is not clearly
defined andit is difficult to figure out what for the request is. So, in that
case, the person whohas made the request is contacted and asked to
explain the request. If the request
isappropriateenoughtheninthatcasefeasibilitystudy
iscarriedoutforthatrequest.
ProposedSystem:
The first step of analysis process involves the identification of need. The
success ofa system depends largely on how accurately a problem is
defined, thoroughlyinvestigated and satisfying the customer needs by
providing user friendlyenvironment
Providinguserfriendlycommunicationchannel,livecommunicationfacility,
categorizing the users, logging the communication transaction, sending
public &private messages, sending instant, graphical communication are
motivating factorsforthedevelopmentof this system.
FeasibilitySteady
Feasibility steady is an important phase in the software development

process.Itenables the developer to have an assessment of the product
being developed.Itrefers to the feasibility study of the product in terms
of outcomes of the product,operationaluseand technicalsupportrequired
forimplementingit.
The feasibility study of any system is mainly intended to study and

analyze theproposed system and to decide whether the system under
consideration will beviable or not after implementation. That is it
determines the usability of the projectafterdeployment.To
What resources are available for the proposed systems? Is it worth
solving theproblem?
Whatisthe likely impactof the proposed system onthe organization? I.e.

howdoestheproposedsystemfitwith inthe organization?
Thus since the feasibility study may lead to commitment of large

resources, itbecomes necessary that it should be conducted competently
and no fundamentalerrors of judgment are made. Different types of
feasibility study and the way weperformedonour project―CLICKCHAT”
Feasibilitystudyshouldbeperformedonthebasisofvariouscriteriaandparam
eters.Thevariousfeasibilitystudiesare:
 EconomicFeasibility
 OperationalFeasibility
 TechnicalFeasibility
EconomicFeasibility:
It refers to the benefits or outcomes we are deriving from the product as

comparedto the total cost we are spending for developing the product.If
the benefits aremore or less the same as the older system, then it is not
feasible to develop theproduct. In this product if we have developed this
application then the amount oftime spent in preparing the schedules,
sending it different branches and monitor theworkwillbereduced.
Classification of Costs & Benefits: The various cost expected to incur &
benefitexpectedtorealize are givenbelow.
TangibleorIntangibleCosts&Benefits:Tangibilityreferstotheeasewithw
hich costs or benefits can be measured. An outlay of cash for a specific
item oractivity is referred to as a tangible cost. They are shown as
disbursements on thebooks. The purchases of hardware or software,
personnel training are examples oftangiblecosts.Theyarereadilyidentified
andmeasured.
Costs that are known to exist but whose financial value cannot be
accuratelymeasured are referred to as an intangible costs. Benefits are
also classified astangible or intangible. Like costs, they are often
difficult to specify
accurately.Tangiblebenefitssuchassavingofmaterialcostarequantifiable.In
tangiblebenefits such as improved institution image is also taken into
account in the systemevaluationprocess.
Direct or Indirect Costs & Benefits:Direct costs are those with which a
monetaryfigure can be directly associated in a project. They are applied
directly to theoperation. Direct benefits can also be specified to the
given project. Indirect costsare the results of operation that are not
directly associated with the given system or
Fixed and Variable Costs and Benefits: Some costs and benefits are
constant,regardless of how well a system is used.They are constant and
do not change.Once encountered they will not reappear. In contrast,
variable costs are incurred ona regular basis. They are proportion to
work volume and continue as long as is inoperation. For example, the
cost of printer paper and cartridge. Fixed benefits arealso constant and
do not change. The variable benefits, on the other hand, arerealized on a
regular basis. For example, the system will save several hours
ofemployeesinpreparingeachreport,whichotherwisewaspreparedmanuall
y.Another examples are error free data entry, help about different topics
and ease ofuse.
OperationalFeasibility:
Proposed projects are beneficial only if they can be turned into

information
systemthatwillmeettheoperatingrequirementsforwhichtheyaredesignedan
ddeveloped.Itismainlyrelatedtohumanorganizationalandpoliticalaspects.P
eopleareresistanttochange,andcomputershavebeenknowntofacilitatechan
ge. Findings of operational feasibility analysis can be summarized as
givenbelow:
 Sincetheaudiencesaremillionofnetigenwhouseitforinformationretrieval.So
theirwill bemanywhowillbebenefitedwiththis project
 Endusersarealwayswelcometohavethetechnicalsupportonthesite.
Theconfigurationoftheexistingsystemsis:
 Processor :IntelCorei3
 Memory :4GB,
 Networkadapter:Ethernetadaptor
 Modem :56kbpsvoicefaxdata
 Secondarystorage:Seagatehard disk (160GB)
 Internet:128kbpscableinternet
ThedatawillresideatserverrootdirectoryinstalledwithMYSQLserverandA
pache.For Software therearefollowingalternatives:
 FrontEnd:HTML5,CSS3,Javascript,JQuery,AJAXand JSP.
 BackEnd:MYSQL.
 Editor:
Eclipse/Notepad.Documentatio
ntool:MS-Word
RequirementsSpecificationDocument
The Corporate messenger System is developed with the aim of

facilitating
theeffectivecommunicationchannelandallowstheusertosendpictureimages
,graphical chatting through Web Application, segregating the users
depending ontheirinterests.
Sending a message provides a private communication channel using the

users cantalk personally. A person, called admin, maintains this system.
He canmonitoreach and every transaction entered by users of this
system. He can also participatein the chatting using administrative client
option for sending and receiving themessages.
 UserManagementmodule:
This module contains add/delete the user in this application for which
we needto give user information as input. It also takes care of
connect/disconnecting theusers from the application for which you
need to select the user and click onnecessary action. It helps the
administrator to manage the chat room controlpanel for
inviting/banning or allowing the users. It also allows us to page
theusers andlogging theuser chattingtransaction.
UserInterface:
 Chat Room Management module:This module also used as the same

likeusermanagementmodule.Butinoursystemwetreatthisentityisdifferentfromuse
rentity.Itallowstheuserstocreate/update/vieworjoins intheroom.
 Chatting Module: In this module we take the details like public or
privatemessagesandtextyouwanttosendfinallysendittotheappropriatedestinations.
 Messages Module: In this the user can send instant messages to a user,
saveofflinemessagesforauser,readsaved messages.
Hardware Interface: There is no direct hardware interface

specifically forCLICKCHAT application runs on an application
server hosted in-house onenterprisehardware.
SoftwareInterface:CLICKCHATapplicationshouldintegratewithfollowinginterface
s:
 GlassfishServerisforruntheprojectonserverwithsecurity.
 ChatdatabasetostoredetailsaboutuserandtheirconversationStorage.
 WebSocketareusedfordatatransmissionbetweenclient sidetoserverside.
Communication Interface: There are Web socket used for the
conversationmedium.Becauseitistoofastertheothermethodofcommunicati
onmediumalsomuch secured.
DesignObjectives
Thesearesomeofthecurrently implementedfeatures:
This creates a good software user interface often finds itsgenesis in the
userinterfacespresentinthephysicalworld.Considerforamomentasimplebut
tonlike one of the keys on the keyboard in front of you. With such a
button there is aclean separation between the parts that compose the
button's mechanism and theparts that compose its façade. The building
block called a keyboard key is actuallycomposed of two pieces. Once
piece gives its button-like behavior. The other pieceis responsible
foritsappearance.
This construction turns out to be a powerful design feature. It

encourages reuserather than redesign. Because your keyboard's keys
were designed that way, it'spossible to reuse the button mechanism
design, and replace the key tops to create anew key rather than
designing each key from scratch substantial savings in designeffort
andtime.
Not surprisingly, similar benefits occur when this technique is applied

to
softwaredevelopment.Onecommonlyusedimplementationofthistechniqu
einsoftwareisthedesignpattern
mentionedamomentago,theMVCdesignpatternseparatesasoftwarecompo
nentintothreedistinctpieces:amodel,a view,and acontroller.
Figure1. MVCdesign pattern
The model is the piece that represents the state and low-level behavior
of
thecomponent.Itmanagesthestateandconductsalltransformationsonthatsta
te.Themodel has no specific knowledge of either its controllers or its
views. The systemitself maintains links between model and views and
notifies the views when themodel changes state. The view is the piece
that manages the visual display of thestate represented by the model. A
model can have more than one view, but that istypically not the case in
the Swing set. The controller is the piece that managesuser interaction
with the model. It provides the mechanism by which changes
aremadetothe state ofthe model.
Designfundamental
System design is the bridge between system & requirements analysis

and systemimplementation. Some of the essential fundamental concepts
involved in the designofas applicationsare
 Abstraction
 Modularity
 Verification
Abstraction is used to construct solutions to problems without having to

takeaccount of the intricate details of the various component sub-
programs. Abstractionallows system designer to make step-wise
refinements by which attach stage of thedesign unnecessary details
annunciate with representation or implementation
maybehiddenfromthesurroundingenvironment.
Modularity is concerned with decomposing of main module into

well-defined,manageable units with well-defined interfaces among
the units. This enhancesdesign clarity, which in turn eases
implementation, debugging, testing, anddocumentation maintaining
of the software product. Modularity viewed in thissenses vitaltool
intheconstructionof largesoftwareprojects.
Verificationisfundamentalconceptinsoftwaredesign.Adesignisverificatio
n.Itcan be demonstrated that the design will result in an implementation,
whichsatisfiedthecustomer’srequirements.
Someoftheimportant factorsofqualitythataretobeconsidered
4.1 SOFTWAREDEVELOPMENTLIFECYCLE
Ihaveused WaterFallModelforSoftwareDevelopmentLifeCycle.
TheWaterfallModelwasfirstProcessModeltobeintroduced.Itisalso referredtoas
alinear-sequentiallife cycle model.
The Waterfall Model was first Process Model to be introduced. It is very

simple tounderstandanduse.Ina
Waterfallmodel,eachphasemustbecompletedbeforethenext phase can
begin and there is no overlapping in the phases. Waterfall model
istheearliest SDLCapproach thatwas usedforsoftwaredevelopment.
In―The Waterfall‖approach,the wholeprocessofsoftware development
is
dividedintoseparatephases.Theoutcomeofonephaseactsastheinputforthe
next phase sequentially. This means that any phase in the development
processbeginsonlyif the previousphaseiscomplete.
Inthismodelsoftwaretestingstartsonlyafterthedevelopmentiscomplete.
ThesequentialphasesinWaterfallmodelare−
 Requirement Gathering and analysis − All possible requirements of

thesystem to be developed are captured in this phase and documented in
arequirement specificationdocument.
 System Design − The requirement specifications from first phase are

studiedin this phase and the system design is prepared. This system design
helps inspecifying hardware andsystem requirements and helpsin defining
theoverall systemarchitecture.
 Implementation − With inputs from the system design, the system is

firstdeveloped in small programs called units, which are integrated in the
nextphase. Each unit is developedand testedforitsfunctionality, which
isreferred toasUnitTesting.
 Integration and Testing − All the units developed in the

implementationphase are integrated into a system after testing of each unit.
Post integrationtheentire systemistestedforanyfaultsand failures.
 Deployment of system − Once the functional and non-functional testing
isdone; the product is deployed in the customer environment or released
intothemarket.
 Maintenance −Therearesomeissueswhichcomeupintheclientenvironment.
To fix those issues, patches are released. Also to enhance theproduct some
better versions are released. Maintenance is done to
deliverthesechangesinthe customer environment.
 AdvantagesofWaterFallModel:-
 Thismodelissimpleandeasytounderstandanduse.
 Itiseasytomanageduetotherigidityofthemodel–
eachphasehasspecificdeliverablesandareviewprocess.
 Processandresultsarewelldocumented.
 Phasesareprocessedandcompletedoneatatime.
 Phasesdonotoverlap.
 Works well for smaller projects where requirements are very

wellunderstood.
 Clearlydefined stages.
 Wellunderstoodmilestones.
 Easytoarrangetasks.
 DisadvantagesofWaterFallModel:-
 Onceanapplicationisinthetestingstage,itisverydifficulttogobackandchangeso
methingthat was notwell-thought outintheconcept stage.
 Noworkingsoftwareisproduceduntillateduringthelifecycle.
 Highamountsofriskanduncertainty.
 Notagoodmodelforcomplexandobject-oriented projects.
 Poormodelforlongandongoingprojects.
 Itisdifficulttomeasureprogresswithinstages.
 Adjustingscopeduringthelifecyclecanendaproject.
4.2 E–RDIAGRAM
AnEntityRelationship(ER)Diagramisatypeofflowchartthatillustrateshow
―entities‖suchaspeople,objectsor conceptsrelate
toeachotherwithinasystem. ER Diagrams are most often used to design
or debug relational databases in thefields of software engineering,
business information systems, education andresearch. Also known as
ERDs or ER Models, they use a defined set of symbolssuch as
rectangles, diamonds, ovals and connecting lines to depict
theinterconnectedness of entities, relationships and their attributes. They
mirrorgrammaticalstructure,with entitiesasnounsand
relationshipsasverbs.
Usesofentityrelationshipdiagrams
in terms of the specific technology to be implemented (in a

physical datamodel.) In software engineering, an ER diagram is
often an initial step
indeterminingrequirementsforaninformationsystemsproject.It’sals
olaterused to model a particular database or databases. A
relational database hasan equivalent relational table and can
potentially be expressed that way asneeded.
 Database troubleshooting: ER diagrams are used to analyze

existingdatabasestofindandresolveproblemsinlogicordeployment.Drawingth
ediagramshouldrevealwhereit’sgoingwrong.
 Businessinformationsystems:Thediagramsareusedtodesignoranalyzerelati
onal databases used in business processes. Any business process thatuses
fielded data involving entities, actions and interplay can potentiallybenefit
from a relational database. It can streamline processes, uncoverinformation
more easilyandimprove results.
 Business process re-engineering (BPR): ER diagrams help in

analyzingdatabases used in business process re-engineering and in
modeling a newdatabasesetup.
 Education: Databases are today’s method of storing relational

informationforeducationalpurposesandlaterretrieval,soERDiagramscanbeval
uableinplanningthosedata structures.
 Research:Sincesomuchresearchfocusesonstructureddata,ERdiagramscanpl
ayakeyroleinsetting upusefuldatabasestoanalyze thedata.
UMLDIAGRAM
UML stands for Unified Modeling Language. It’s a rich language to

modelsoftwaresolutions,applicationstructures,systembehaviorandbusines
sprocesses.
UML diagrams to understand the system in a better and simple way. A

singlediagramis notenough
tocoveralltheaspectsofthesystem.UMLdefinesvariouskindsof diagrams
tocovermostofthe aspects of asystem.
Thereare14UMLdiagramtypestohelp you modelthesebehaviors.
StructuralDiagrams
The structural diagrams represent the static aspect of the system. These
staticaspects represent those parts of a diagram, which forms the main
structure and arethereforestable.
BehavioralDiagrams
Any system can have two aspects, static and dynamic. So, a model is
considered ascompletewhenboththeaspectsarefullycovered.
Behavioral diagrams basically capture the dynamic aspect of a system.

Dynamicaspectcanbefurtherdescribed as thechanging/movingparts
ofasystem.
WhyDo WeUseUML?
A complex enterprise application with many collaborators will require a

solidfoundation of planning and clear, concise
UseCaseDiagram(UML)System(Clickchat)
Update
BlockUser
Login
SignUp
PrivateChat
Chat
Groupchat
Profile ChangeProfile
Setting
Logout
DATAFLOWDIAGRAM(DFD)
Data flow diagram is graphical representation of flow of data in an

informationsystem. It is capable of depicting incoming data flow,
outgoing data flow andstored data. The DFD does not mention anything
about how data flows through thesystem.
ThereisaprominentdifferencebetweenDFDandFlowchart.Theflowchartde
picts flow of control in program modules. DFDs depict flow of data in
thesystematvarious levels.DFDdoes notcontain anycontrolorbranch
elements.
Itusesdefinedsymbolslikerectangles,circlesandarrows,plusshorttextlabels
,toshowdatainputs,outputs,storagepointsandthe routesbetweeneach
destination. Data flowcharts can range from simple, even hand-drawn
processoverviews,toin-depth,multi-
levelDFDsthatdigprogressivelydeeperintohowthedata ishandled.
TypesofDFD
DataFlowDiagramsareeitherLogicalorPhysical.
 Logical DFD - This type of DFD concentrates on the system process,

andflowofdatainthesystem.ForexampleinaBankingsoftwaresystem,howdat
aismoved betweendifferententities.
 Physical DFD - This type of DFD shows how the data flow is
actuallyimplemented in the system. It is more specific and close to the
DFDComponents
DFDcanrepresentSource,destination,storageandflowofdatausingthefoll
owingsetof components-
External entity: an outside system that sends or receives data,

communicatingwith the system being diagrammed. They are the sources
and destinations
ofinformationenteringorleavingthesystem.Theymightbeanoutsideorganiz
ationor person, a computer system or a business system. They are also
known asterminators, sources and sinks or actors. They are typically
drawn on the edges ofthediagram.
 Process: anyprocessthatchangesthedata,producinganoutput.Itmightperform
computations, or sort data based on logic, or direct the data flowbasedon
businessrules. Ashort label is usedtodescribe theprocess, such as
―Submitpayment.‖
 Data store: files or repositories that hold information for later use, such as
adatabase table ora membershipform.Each datastore
receivesasimplelabel,suchas―Orders.‖
 Data Flow - Movement of data is shown by pointed arrows. Data movement
isshown from the base of arrow as its source towards head of the arrow
asdestination.
 CLASSDIAGRAMS:Detailed
JsonEncoder
~controller.coder
+obj : JsonObjectBuilder = { makes json object by the json
builderJson.createObjectBuilder();}
+ jsonArray : JsonArrayBuilder = { makes jsonArrayobject by the
jsonArraybuilderJson.createObjectBuilder();}
+jsonObjectcreater(Stringparam,Stringvalue)
+jsonObjectBuilder()
+jsonArrayBuilder(){jsonarraybuildandreturnintostringform}
MessageDecoder
~controller.coder
#message:Message=null
+obj:JsonObject={jsonreader readthedataandmakejsonobject}
+objectMapper:ObjectMapper={objectoftheobjectMapperclass}
+ACTION:String={readdatafromobjactionparameterobj.getString(“action”)}
+decode(msg:String)={returndatatosuperclassMessageclass}
MessageEncoder
~controller.coder
+a:String= {whichvalueis sended}
+ encode(Message:MESSAGE)= {its return mapper object means if the message is
privatemessagethenits returntheprivateclass object}
GroupMessage
~controller.message
-From:String=blank
-message:String=blank
+getFrom():from
+setFrom(from:String)
+getMessage():message
Message
~controller.message
-action:String=blank
+getAction():action
+setAction(action:String)
OnlineUserList
~controller.message
+onlineUsers:HashMap<String,String>=blank
+OnlineUserList(HashMap<String,String>usersClientList)
PrivateMessage
~controller.message
-to:String=blank
-message:String=blank
-from:String=blank
+getMessage():message
+setMESSAGE(message:String)
+StringgetTo():to
+setTo(to:String)
+getFrom():from
+setFrom(from:String)
DataBaseConnection
~database
+conn:Connection=blank
+getConnection():conn
Downloader
~ProfilePicture
+query:String={EnterQueryExecution}
+stmt:Statement={preparedstatment}
+rs:ResultSet={resultofexecutedquery}
+image:Blob={fetchimagefromdatabase}
+imgData:byte[]={blobconvertedintobytearray}
#doGet(req:HttpServletRequest,resp:HttpServletResponse)
+onStart(session:Session)
+end(session:Session)
-removeUserInMap(Stringid)
+Message(session:Session,message:Message)
- addToDataBase(msg:Message)
- getSessionIdOfUser(Stringto):key
-broadcast(messageToSend:Message,toSessionId:String)
+addUserInMap(sessionId:String,userId:String,username:String)
+UpdateOnlineUsers()
-broadcast(msg:Message)
4.6 DATADICTIONARY
A data dictionary is a collection of descriptions of the dataobjects or

items in adata model for the benefit of programmers and others who
need to refer to them. Afirst step in analyzing a system of objects with
which users interact is to identifyeach object and its relationship to other
objects. This process is called datamodeling and results in a picture of
object relationships. After each data object
oritemisgivenadescriptivename,itsrelationshipisdescribed(oritbecomespa
rtofsome structure that implicitly describes relationship), the type of
data (such as textor image or binary value) is described, possible
predefined values are listed, and abrief textual description is provided.
This collection can be organized for referenceintoa
bookcalledadatadictionary.
 AttributeName–Auniqueidentifier,typicallyexpressedinbusinesslanguage,that
labelseachattribute.
 Optional/Required – Indicates whether information is required in an

attributebeforearecordcanbe saved.
 AttributeType–Defineswhattypeofdataisallowableinafield.Commontypesinclude
text, numeric, date/time, enumerated list, look-ups, booleans, and
uniqueidentifiers.
 Datadictionarydocumentation
 Database users and application developers can benefit from an
authoritativedatadictionarydocumentthatcatalogstheorganization,contents,an
dconventions of one or more databases. This typically includes the names
anddescriptions of various tables and fields in each database, plus
additionaldetails, like the type and length of each data element. There is no
universalstandard as to the level of detail in such a document, but it is
primarily aweak kindof data.
 Datadictionarymiddleware
 In the construction of database applications, it can be useful to introduce
anadditionallayerofdatadictionarysoftware,i.e.middleware,whichcommunicat
es with the underlying DBMS data dictionary. Such a "high-
level"datadictionarymayofferadditionalfeaturesandadegreeofflexibility that
goes beyond the limitations of the native "low-level" datadictionary, whose
primary purpose is to support the basic functions of
theDBMS,nottherequirementsofatypicalapplication.Forexample,ahigh-
CHAPTER-5
DESIGNDOCUMENT
ACOMPLETESTRUCTUREOFPROJECT:
Thesystemarecarefullyanalysishasbeenidentifiesto
bepresentedwiththefollowing modulesandroles:
1. Clickchat
a. JspFiles
i. Index
ii. Login
iii. SignUp
iv. Profile
v. PrivateChatMessage
vi. logout
b. Classes
i. controller
1. coder
a. JsonEncoder
b. MessageEncoder
c. MessageDecoder
2. message
a. GroupMessages
b. Message
c. PrivateMessages
d. OnlineUserList
ii. ChatEndPoint
iii. dataBase
1. DatabaseConnection
2. DatabaseVariables
3. PasswordEncyption
iv. profilePicture
1. Downloader
2. Uploader
1. Clickchat:Clickchatisourprojectitiscontainsfollowingmodules,classes,AndSome
other files are not described in it as CSS stylesheets, JavaScript files, AjaxFiles
andsoonusedinthe project:
Themodulesinvoledare:
1. VIEW(JspFiles):
a. Index
b. Login
c. Signup
d. PrivateChatMessage
e. Profile
f. logout
a. Index : Index files contain the main data of the file by which the chat
screenisdisplayed,buthavesomevalidationandverificationbywhichunauthorize
d user cannot be login and access the index file the
unauthorizeduserautomaticallyredirectedtotheloginscreen.
b. Login: login file is used for the login to the user by the username or
Emailand password of the user, The user can be enter his/her Email or
UsernameWhichisuniqueofalltheusers.Theusername,Emailandpasswordident
ified formthe database.
c. Signup: The signup file contain the code for the registration of the user.
Ifthe user is not registered user then he/she can be signup. If the user
hadregisteredthenhe//shecannotbere-registeredbythepreviousemailusername,
and if have email and password he/she can be directly go formsignup
tologin.
d. PrivateChatMessage : The private chat file work for the retrievers the
oldchatoftheuserfromdatabase.Only8-10previousmessagesdisplayedtotheuser
whenopenthe chat.
e. Profile:Thefunctionofprofilefileisdisplayorrendertheprofiledataoftheuserwhi
chisfilledbytheuser,andtheauthenticatedusercanbemodifiedtheuserprofile
dataanduser profilepicture.
f. Logout: Used for
logout.11.Classes
a. Controller
i. Coder
1. JsonEncoder
2. MessageEncoder
3. MessageDecoder
ii. Message
1. GroupMessages
2. Message
3. PrivateMessages
4. OnlineUserList
iii. ChatEndPoint
b. database
i. DatabaseConnection
ii. DatabaseVariables
iii. PasswordEncyption
c. profilePicture
i. Downloader
ii. Uploader
1. Class: The classes is the folder which is contains the all packages and
classfiles whichis usedintheprojectarefollowing
a.Controller: The controller is the package which contain
themainlogic of webSockets in ChatEndpoint ClassFile.
Which is integrated intheother filesor extend.
i. Coder: coder package contain the encoder and decoder
classfiles.
1. EncoderMessage.class : The encoder class convert
themessage into object form by which data cannot be
easyhacked bythehackerinthe network.
2. DecoderMessage: The decoder Class file role is to
becovertheJson objectfile to the string.
3. JsonEncoder: JsonEncoder file function for the
encoderobject toJsonObject.
ii. Message: message package conatin the logic by which we
canidentifiedthemessageisprivatemessage,groupmessage,profile
pictureblob,oronlineUsersListandsoon.
1. Message:messageisthesuperclassoftheprivatemessages or
group also onlineuserlist.It identified
themessageiswhichtypebytheimportingof
5.2 DATAINTEGRITYANDCONSTRAINT
 Database integrity refers to the validity and consistency of stored data.

Integrityis usually expressed in terms of constraints, which are consistency rules
that thedatabase is not permitted to violate. Constraints may apply to each
attribute ortheymayapplytorelationshipsbetweentables.
 Integrityconstraintsensurethatchanges(updatedeletion,insertion)madetothedata
base by authorized users do not result in a loss of data consistency.
Thus,integrityconstraintsguardagainstaccidentaldamageto thedatabase.
DomainIntegrity
Domainintegritymeansthedefinition ofavalidsetofvaluesforanattribute.Youdefine
- datatype,
- lenghtorsize
- isnullvalueallowed
- isthevalueuniqueornotfo
ranattribute.
You may also define the default value, the range (values in between) and/or
specificvalues for the attribute. Some DBMS allow you to define the output format
and/or inputmaskfortheattribute.
Thesedefinitionsensurethataspecificattributewillhavearightandpropervalueinthedatab
ase.
CascadeUpdateRelated Fields
Any time you change the primary key of a row in the primary table, the foreign
keyvaluesareupdatedinthematchingrowsin
therelatedtable.Thisconstraintoverrulesrule2in thereferentialintegrityconstraints.
CascadeDeleteRelatedRows
Any time you delete a row in the primary table, the matching rows are
automaticallydeletedintherelatedtable.Thisconstraintoverrulesrule1inthereferentialin
tegrityconstraints.
5.3 DATABASEDESGINING
Aswehavediscussedearlierabouttheunderdevelopingsystem,whichisbasedon
.internettechonologiesSo,ourdatabasewillbecentralizeddatabasewhichwillrunonsqlserve
r.
DataStructure
Datastructureisarepresentationofthelogicalrelationshipamongindividualelements of
data. Because the structure of information will invariably affect the
finalproceduraldesign,datastructureisasimportantasprogramstructureoftherepresentati
on of the software architecture. Data structure dictates the
organization,methodofaccess,degreeofassociativityandprocessingalternativesoftheinfor
mation.
FunctionalDependencies
The Functional dependencies (FD) are the consequence of the interrelationship
amongattributes of an entity represented by a relation or due to the relationship
betweenentitiesthat is alsorepresentedbyarelation.
Normalization
Normalization is atechnique used in RDBMS to decompose intotable into two ormore
different tables to remove functional dependency as well as redundancy.
Thenormalizationhasdifferentformnamely—First NF,Second NF, ThirdNF,
BCNFandFourth NF. The decomposition of the table should be in the manner that data
should
notbelosti.e.theunionofthedecomposedtableshouldmustgivetheactualtable.Normalizati
on is also necessary to maintain referential integrity. In our context, we
usednormalization technique up to a three NF as our project had much number of FDs
andcaseofdataredundancy.
UsersTableStructure:
MessagesTableStructure:
GroupTableStructure:
GroupDetail TableStructure:
UsersTableDataFormat:
MessagesTableDataFormat:
GroupTableDataFormat:
CHAPTER-6
PROGRAMCODE
PrgramCode
newfilemode100644index00
00000..f266f70
---/dev/null
+++b/client/package.json@@-
0,0+1,45@@
+{
+"name":"client",
+"version":"0.1.0",
+"private":true,
+"dependencies":{
+ "@chakra-ui/react":"^2.2.3",
+ "@emotion/react":"^11.9.3",
+ "@emotion/styled":"^11.9.3",
+ "@testing-library/jest-dom":"^5.16.5",
+ "@testing-library/react":"^13.4.0",
+ "@testing-library/user-event":"^13.5.0",
+ "axios":"^1.2.0",
+ "framer-motion":"^6.4.3",
+ "react":"^18.2.0",
+ "react-dom":"^18.2.0",
+ "react-icons":"^4.4.0",
+ "react-scripts":"5.0.1",
+ "socket.io-client":"^4.5.4",
+ "web-vitals":"^2.1.4"
+},
+"scripts":{
+ "start":"react-scriptsstart",
+ "build":"react-scriptsbuild",
+ "test":"react-scriptstest",
+ "eject":"react-scriptseject"
+},
+"eslintConfig":{
+ "extends":[
+ "react-app",
+ "react-app/jest"
+ ]
+},
+"browserslist":{
+ "production":[
+ ">0.2%",
+ "notdead",
+ "notop_miniall"
+ ],
+ "development":[
+ "last1chromeversion",
+ "last1firefoxversion",
+ "last1safariversion"
+ ]
+}
+}
diff--gita/client/public/favicon.icob/client/public/
favicon.iconewfilemode100644
index0000000..a11777c
Binaryfiles/dev/nullandb/client/public/favicon.icodifferdiff--
gita/client/public/index.htmlb/client/public/
index.htmlnewfilemode100644
index0000000..aa069f2
---/dev/null
+++b/client/public/index.html@@-
0,0+1,43@@
+<!DOCTYPEhtml>
+<htmllang="en">
+<head>
+ <metacharset="utf-8"/>
+ <linkrel="icon"href="%PUBLIC_URL%/favicon.ico"/>
+ <metaname="viewport"content="width=device-width,initial-scale=1"/>
+ <metaname="theme-color"content="#000000"/>
+ <meta
+ name="description"
+ content="Websitecreatedusingcreate-react-app"
+ />
+ <linkrel="apple-touch-icon"href="%PUBLIC_URL%/logo192.png"/>
+ 
+ <linkrel="manifest"href="%PUBLIC_URL%/manifest.json"/>
+ 
+ <title>ReactApp</title>
+</head>
+<body>
+ <noscript>YouneedtoenableJavaScripttorunthisapp.</noscript>
+ <divid="root"></div>
+ 
+</body>
+</html>
diff--gita/client/public/logo192.png
b/client/public/logo192.pngnewfilemode100644
index0000000..fc44b0a
Binaryfiles/dev/nullandb/client/public/logo192.pngdiffer
diff--gita/client/public/logo512.png
b/client/public/logo512.pngnewfilemode100644
index0000000..a4e47a6
Binaryfiles/dev/nullandb/client/public/logo512.pngdiffer
diff--gita/client/public/manifest.jsonb/client/public/
manifest.jsonnewfilemode100644
index0000000..080d6c7
---/dev/null
+++b/client/public/
manifest.json@@-0,0+1,25@@
+{
+"short_name":"ReactApp",
+"name":"CreateReactAppSample",
+"icons":[
+ {
+ "src":"favicon.ico",
+ "sizes":"64x6432x3224x2416x16",
+ "type":"image/x-icon"
+ },
+ {
+ "src":"logo192.png",
+ "type":"image/png",
+ "sizes":"192x192"
+ },
+ {
+ "src":"logo512.png",
+ "type":"image/png",
+ "sizes":"512x512"
+ }
+],
+"start_url":".",
+"display":"standalone",
+"theme_color":"#000000",
+"background_color":"#ffffff"
+}
diff--git
a/client/public/robots.txtb/client/public/robots.txtnewfilemode1
00644
index0000000..e9e57dc
---/dev/null
+++b/client/public/
robots.txt@@-0,0+1,3@@
+#https://www.robotstxt.org/robotstxt.html
+User-agent:*
+Disallow:
diff--gita/client/src/App.cssb/client/src/
App.cssnewfilemode100644
index0000000..8b13789
---/dev/null
+++b/client/src/App.css@@-
0,0+1@@
+
diff--gita/client/src/App.jsb/client/src/
App.jsnewfilemode100644
index0000000..7c0bfc7
---/dev/null
+++b/client/src/App.js@@-
0,0+1,53@@
+import{useEffect,useState}from"react";
+import'./App.css';
+importLoginScreenfrom"./LoginScreen";
+importbackgroundfrom"./images/background.png";
+import{ChakraProvider,Icon,Box}from'@chakra-ui/react'
+importSignUpScreenfrom"./SignUpScreen";
+importiofrom'socket.io-client';
+importChatScreenfrom"./pages/ChatScreen";
+constsocket=io.connect("http://localhost:5700");
+//window.mysocket=socket;
+//socket.on()
+functionApp(){
+ const[showLogin,setShowLogin]=useState(true);
+ const[loggedStatus,setLoggedStatus]=useState(null);
+ const[user,setUser]=useState(null);
+ useEffect(()=>{
+ isLoggedIn();
+ },[]);
+
+ functionisLoggedIn(){
+ constuser=window.localStorage.getItem('clickchat-user');
+ if(user){
+ setUser(user);
+ setLoggedStatus(true);
+ }else{
+ setLoggedStatus(false);
+ }
+ }
+
+ return(
+ <ChakraProvider>
+ <divstyle={{display:'flex',height:window.innerHeight}}>
+ <imgsrc={background}style={{position:'absolute',height:'100%',width:'100%',zIndex:-1}}/>
+ {
+ //loggedStatus?
+ // <ChatScreensocket={socket}userid={user}/>:
+ // loggedStatus==false?
+ showLogin?
+ <LoginScreenshowSignUp={()=>setShowLogin(!showLogin)}/>:
+ <SignUpScreenshowSignIn={()=>setShowLogin(!showLogin)}/>
+ //<Boxbg={"white"}>
+ // Loading
+ //</Box>
+ }
+ </div>
+ </ChakraProvider>
+)
+}
+exportdefaultApp;
diff--git
a/client/src/App.test.jsb/client/src/App.test.jsnewfilemode
100644
index0000000..1f03afe
---/dev/null
+++b/client/src/
App.test.js@@-0,0+1,8@@
+import{render,screen}from'@testing-library/react';
+importAppfrom'./App';
+test('renderslearnreactlink',()=>{
+render(<App/>);
+constlinkElement=screen.getByText(/learnreact/i);
+expect(linkElement).toBeInTheDocument();
+});
diff--git
a/client/src/LoginScreen.jsb/client/src/LoginScreen.jsnewfilemode10
0644
index0000000..b17c5a6
---/dev/null
+++b/client/src/LoginScreen.js@@-
0,0+1,123@@
+import{useState}from"react";
+import{
+ Flex,
+ Heading,
+ Input,
+ Button,
+ InputGroup,
+ Stack,
+ InputLeftElement,
+ chakra,
+ Box,
+ Link,
+ Avatar,
+ FormControl,
+ FormHelperText,
+ InputRightElement
+}from"@chakra-ui/react";
+import{FaUserAlt,FaLock}from"react-icons/fa";
+importcolorsfrom'./colors/login';
+importaxiosfrom"./axios";
+constCFaUserAlt=chakra(FaUserAlt);
+constCFaLock=chakra(FaLock);
+exportdefaultfunctionLoginScreen({showSignUp}){
+ const[showPassword,setShowPassword]=useState(false);
+ const[username,setUsername]=useState(false);
+ const[password,setPassword]=useState(false);
+
+ consthandleShowClick=()=>setShowPassword(!showPassword);
+
+ functiononLogin(){
+ axios.post('login',{
+ username,password
+ })
+ .then(res=>res.data)
+ .then(res=>{
+ if(!res?.data?.loginError&&res?.data?.userid){
+ window.localStorage.setItem('clickchat-user',res?.data?.userid);
+ window.location.reload();
+ }
+ });
+ }
+
+ return(
+ <divstyle={{flex:1,border:'1pxsolid',display:'flex',alignItems:'center',justifyContent:'center'}}>
+ <Flex
+ flexDirection="column"
+ width="100wh"
+ padding={10}
+ borderRadius={20}
+ backgroundColor={colors.background}
+ justifyContent="center"
+ alignItems="center"
+ >
+ <Stack
+ flexDir="column"
+ mb="2"
+ >
+ <Avatarbg={colors.base}/>
+ <Headingcolor={colors.base}>WelcometoClickChat</Heading>
+ <BoxminW={{base:"90%",md:"468px"}}>
+ <>
+ <Stack
+ spacing={4}
+ p="1rem"
+ >
+ <FormControl>
+ <InputGroup>
+ <InputLeftElement
+ pointerEvents="none"
+ children={<CFaUserAltcolor={colors.gray}/>}
+ />
+ <Inputtype="username"placeholder="Username"
onChange={(e)=>setUsername(e.target.value)}/>
+ </InputGroup>
+ </FormControl>
+ <FormControl>
+ <InputGroup>
+ <InputLeftElement
+ color={colors.background}children={<CFaLockco
+ lor={colors.gray}/>}
+ />
+ <Input
+ type={showPassword?"text":"password"}
+ placeholder="Password"
+ onChange={(e)=>setPassword(e.target.value)}/>
+ />
+ <InputRightElementwidth="4.5rem">
+ <Buttonh="1.75rem"size="sm"onClick={handleShowClick}>
+ {showPassword?"Hide":"Show"}
+ </Button>
+ </InputRightElement>
+ </InputGroup>
+ <FormHelperTexttextAlign="right">
+ <Link>forgotpassword?</Link>
+ </FormHelperText>
+ </FormControl>
+ <Button
+ borderRadius={0}
+ variant="solid"
+ colorScheme={'blackAlpha'}
+ width="full"
+ onClick={onLogin}
+ >
+ Login
+ </Button>
+ </Stack>
+ </>
+ </Box>
+ </Stack>
+ <Box>
+ Newtous?{""}
+ <Linkcolor={colors.base}href="#"onClick={showSignUp}>
+ SignUp
+ </Link>
+ </Box>
+ </Flex>
+ </div>
+);
+}
diff--gita/client/src/SignUpScreen.jsb/client/src/
SignUpScreen.jsnewfilemode100644
index0000000..1a420d7
---/dev/null
+++b/client/src/
SignUpScreen.js@@-
0,0+1,119@@
+import{useState}from"react";
+import{
+ Flex,
+ Heading,
+ Input,
+ Button,
+ InputGroup,
+ Stack,
+ InputLeftElement,
+ chakra,
+ Box,
+ Link,
+ Avatar,
+ FormControl,
+ FormHelperText,
+ InputRightElement
+importcolorsfrom'./colors/login';
+constCFaUserAlt=chakra(FaUserAlt);
+constCFaLock=chakra(FaLock);
+exportdefaultfunctionSignUpScreen({showSignIn}){
+ const[showPassword,setShowPassword]=useState(false);
+ consthandleShowClick=()=>setShowPassword(!showPassword);
+ functiononLogin(){
+ }
+ return(
+ <Flex
+ flexDirection="column"
+ width="100wh"
+ padding={10}
+ borderRadius={20}
+ backgroundColor={colors.background}
+ >
+ <Stack
+ flexDir="column"
+ mb="2"
+ >
+ <Avatarbg={colors.base}/>
+ <Headingcolor={colors.base}>WelcometoClickChat</Heading>
+ <BoxminW={{base:"90%",md:"468px"}}>
+ <>
+ <Stack
+ spacing={4}
+ p="1rem"
+ >
+ <FormControl>
+ <InputGroup>
+ <InputLeftElement
+ children={<CFaUserAltcolor={colors.gray}/>}
+ />
+ <Inputtype="username"placeholder="Username"/>
+ </InputGroup>
+ </FormControl>
+ <FormControl>
+ <InputGroup>
+ <InputLeftElement
+ color={colors.background}
+ children={<CFaLockcolor={colors.gray}/>}
+ />
+ <Input
+ placeholder="Password"
+ />
+ <InputRightElementwidth="4.5rem">
+ <Buttonh="1.75rem"size="sm"onClick={handleShowClick}>
+ {showPassword?"Hide":"Show"}
+ </Button>
+ </InputRightElement>
+ </InputGroup>
+ </FormControl>
+ <FormControl>
+ <InputGroup>
+ <InputLeftElement
+ color={colors.background}children={<CFaL
+ ockcolor={colors.gray}/>}
+ />
+ <Input
+ placeholder="ConfirmPassword"
+ />
+ </InputGroup>
+ </FormControl>
+ <Button
+ borderRadius={0}
+ variant="solid"
+ colorScheme={'blackAlpha'}
+ width="full"
+ onClick={onLogin}
+ >
+ CreateAccount
+ </Button>
+ </Stack>
+ </>
+ </Box>
+ </Stack>
+ <Box>
+ <Linkcolor={colors.base}href="#"onClick={showSignIn}>
+ Login
+ </Link>
+ </Box>
+ </Flex>
+ </div>
+);
+}
diff--gita/client/src/axios.jsb/client/src/
axios.jsnewfilemode100644
index0000000..1c5718a
---/dev/null
+++b/client/src/axios.js@@-
0,0+1,6@@
+importaxiosfrom"axios";
+constAxios=axios.create({
+ baseURL:"http://localhost:5700/",
+});
+exportdefaultAxios;
diff--gita/client/src/colors/login.jsb/client/src/colors/
login.jsnewfilemode100644
index0000000..9602a0e
---/dev/null
+++b/client/src/colors/login.js@@-
0,0+1,5@@
+exportdefault{
+ base:'#000',
+ background:'#fff',
+ gray:'gray'
+}
diff--gita/client/src/images/background.pngb/client/src/images/
background.pngnewfilemode100644
index0000000..5d103e2
Binaryfiles/dev/nullandb/client/src/images/background.pngdiffer
diff--gita/client/src/images/sample_person.jpegb/client/src/images/
sample_person.jpegnewfilemode100644
index0000000..271b556
Binaryfiles/dev/nullandb/client/src/images/sample_person.jpegdifferdiff--gita/
client/src/index.cssb/client/src/index.css
00000..ec2585e
---/dev/null
+++b/client/src/index.css@@-
0,0+1,13@@
+body{
+margin:0;
+font-family:-apple-system,BlinkMacSystemFont,'SegoeUI','Roboto','Oxygen',
+ 'Ubuntu','Cantarell','FiraSans','DroidSans','HelveticaNeue',
+ sans-serif;
+-webkit-font-smoothing:antialiased;
+-moz-osx-font-smoothing:grayscale;
+}
+code{
+font-family:source-code-pro,Menlo,Monaco,Consolas,'CourierNew',
+ monospace;
+}
diff--gita/client/src/index.jsb/client/src/
index.jsnewfilemode100644
index0000000..d563c0f
---/dev/null
+++b/client/src/index.js@@-
0,0+1,17@@
+importReactfrom'react';
+importReactDOMfrom'react-dom/client';
+import'./index.css';
+importAppfrom'./App';
+importreportWebVitalsfrom'./reportWebVitals';
+constroot=ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+<React.StrictMode>
+ <App/>
+</React.StrictMode>
+);
+//Ifyouwanttostartmeasuringperformanceinyourapp,passafunction
+//tologresults(forexample:reportWebVitals(console.log))
+//orsendtoananalyticsendpoint.Learnmore:https://bit.ly/CRA-vitals
+reportWebVitals();
diff--gita/client/src/logo.svgb/client/src/
logo.svgnewfilemode100644
index0000000..9dfc1c0
---/dev/null
+++b/client/src/logo.svg@@-
0,0+1@@
+<svg xmlns="http://www.w3.org/2000/svg"viewBox="00841.9595.3"><gfill="#61DAFB"><pathd="M666.3
296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-
5.6v22.3c4.608.3.911.42.613.67.819.537.514.975.7-1.19.4-2.919.3-5.129.4-19.6-4.8-41-8.5-63.5-
10.9-13.5-18.5-27.5-35.3-41.6-5032.6-30.363.2-46.984-46.9V78c-27.50-63.519.6-99.953.6-36.4-33.8-
72.4-53.2-99.9-53.2v22.3c20.7051.416.58446.6-1414.7-2831.4-41.349.9-22.62.4-446.1-63.611-2.3-
10-4-19.7-5.2-29-4.7-38.21.1-67.914.6-75.83-1.86.9-2.611.5-2.6V78.5c-8.40-161.8-22.65.6-28.116.2-
34.466.7-19.9130.1-62.219.2-102.749.9-102.782.3032.540.763.3103.182.4-14.463.6-8114.220.2
130.46.53.814.15.622.55.627.5063.5-19.699.9-53.636.433.872.453.299.953.28.4016-1.822.6-
5.628.1-16.234.4-66.719.9-130.162-19.1102.5-49.9102.5-82.3zm-130.2-66.7c-3.712.9-8.326.2-13.5
39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.414.22.127.94.7417.9zm-45.8106.5c-7.813.5-15.8
26.3-24.138.2-14.91.3-302-45.22-15.10-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-
20.8-39.86.2-13.413.2-26.820.7-39.97.8-13.515.8-26.324.1-38.214.9-1.330-245.2-215.1030.2.745
1.98.311.9 16.424.6 24.2 387.6 13.1 14.5 26.4 20.839.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4
13.41026.813.839.8-13.13.2-26.95.9-41.284.9-7.79.8-15.614.4-23.74.6-88.9-16.113-24.1zM421.2
430c-9.3-9.6-18.6-20.3-27.8-329.418.2.727.5.79.4018.7-.227.8-.7-911.7-18.322.4-27.532zm-74.4-
58.9c-14.2-2.1-27.9-4.7-41-7.93.7-12.98.3-26.213.5-39.54.188.41613.1244.789.515.814.4
23.4zM420.7163c9.39.618.620.327.832-9-.4-18.2-.7-27.5-.7-9.40-18.7.2-27.8.79-11.718.3-22.427.5-
32zm-7458.9c-4.97.7-9.815.6-14.423.7-4.68-8.916-1324-5.4-13.4-10-26.8-13.8-39.813.1-3.126.9-5.8
41.2-7.9zm-90.5125.2c-35.4-15.1-58.3-34.9-58.3-50.60-15.722.9-35.658.3-50.68.6-3.718-727.7-10.1
5.719.613.24022.560.9-9.220.8-16.641.1-22.260.6-9.9-3.1-19.3-6.5-28-10.2zM310490c-13.6-7.8-
19.5-37.5-14.9-75.71.1-9.42.9-19.35.1-29.419.64.8418.563.510.913.518.527.535.341.650-32.6
30.3-63.246.9-8446.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.738.2-1.167.9-14.675.8-31.8-6.92.6-11.5
2.6-20.70-51.4-16.5-84-46.614-14.728-31.441.3-49.922.6-2.444-6.163.6-112.310.14.119.85.2
29.1zm38.5-66.7c-8.63.7-187-27.710.1-5.7-19.6-13.2-40-22.5-60.99.2-20.816.6-41.122.2-60.69.93.1
19.36.528.110.235.415.158.334.958.350.6-.115.7-2335.6-58.450.6zM320.878.4z"/><circle
cx="420.9"cy="296.5"r="45.7"/><pathd="M520.578.1z"/></g></svg>
\Nonewlineatendoffile
diff--gita/client/src/pages/ChatScreen.js
b/client/src/pages/ChatScreen.jsnewfilemode100644
index0000000..5e58f10
---/dev/null
+++b/client/src/pages/ChatScreen.js@@-
0,0+1,209@@
+import{useEffect,useState}from"react";
+import{
+ Flex,
+ Heading,
+ Input,
+ Button,
+ InputGroup,
+ Stack,
+ InputLeftElement,
+ chakra,
+ Box,
+ Link,
+ Avatar,
+ FormControl,
+ FormHelperText,
+ InputRightElement,
+ SimpleGrid,HStack,VStack,Text,Center
+importcolorsfrom'../colors/login';
+importSamplePersonfrom'../images/sample_person.jpeg';
+importaxiosfrom"../axios";
+importiofrom"socket.io-client";
+//constsocket=io.connect("http://localhost:5700");
+//constsocket=window.mysocket;
+
+exportdefaultfunctionChatScreen({userid,socket}){
+ const[userInfo,setUserInfo]=useState(null);
+ const[userName,setUserName]=useState(null);
+ const[userImage,setUserImage]=useState(null);
+ const[activeChat,setActiveChat]=useState(null);
+ const[usersList,setUsersList]=useState([]);
+
+ useEffect(()=>{
+ if(userid){
+ getUserInfo();
+ socket.emit("user_emit",userid);
+ }
+ },[userid]);
+
+ useEffect(()=>{
+ if(userInfo){
+ setUserImage(userInfo?.profile_picture);
+ setUserName(userInfo?.full_name);
+ getFriendsList();
+ }
+ },[userInfo]);
+
+
+ functiongetUserInfo(){
+ axios.post(`userinfo`,{
+ userid
+ })
+ .then(data=>{setUserInfo(data.data);
+
+ })
+ }
+
+ functiongetFriendsList(){
+ axios.post(`getAllUsers`,{
+ userid
+ })
+ .then(data=>{
+ if(data?.data?.users){
+ setUsersList(data?.data?.users);
+ }
+ })
+ }
+
+ functiongetMessages(){
+ axios.post(`userinfo`,{
+ userid
+ })
+ .then(data=>{
+ setUserInfo(data.data);
+ })
+ }
+
+ functionloadChats(c){
+ axios.post(`loadchats`,{
+ userid,friend:c.userid
+ })
+ .then(data=>{
setActiveChat({name:c.full_name,friendid:c.userid,picture:c.profile_picture,messages:data.data});
+ })
+ }
+ functiononSend(to,msg){
+ socket.emit("send_message",JSON.stringify({
+ from:userid,
+ to,
+ message:msg
+ }));
+ }
+ socket.on('message',(e)=>console.log("message",e))
+ return(
+ <Boxheight={window.innerHeight*.7}width={'70%'}boxShadow='dark-
lg'p={2}rounded='md'bg='white'>
+ <HStackspacing={1}height={'100%'}>
+ <Boxp={0}width={'30%'}height={'100%'}>
+ <Boxh={'10%'}p={0}display={'flex'}alignItems={"center"}>
+ <imgsrc={userImage}style={{height:50,borderRadius:60,padding:10}}/>
+ <TextmarginLeft={2}fontSize='xl'whiteSpace={"nowrap"}>{userName}</Text>
+ </Box>
+ <Boxh={'90%'}p={0}overflow={"auto"}>
+ <ContactListlist={usersList}getChatFor={loadChats}/>
+ </Box>
+ </Box>
+ <Boxp={0}width={'70%'}height={'100%'}bg={'#e9edef'}>
+ {true?<>
+ <Boxh={'15%'}p={0}>
+ <ActiveChatdata={activeChat}/>
+ </Box>
+ <Boxh={'85%'}p={0}>
+ <ChatBoxdata={activeChat}onSend={onSend}/>
+ </Box>
+ </>:
<Boxdisplay={"flex"}flexDirection={"column"}width={'100%'}height={"100%"}alignItems={"center"}justifyCo
ntent={"center"}>
+ <Heading>WelcometoClickChat</Heading>
+ <br/>
+ <Textcolor={"darkgrey"}>Selectanyuserfromlisttobeginchatting</Text>
+ </Box>
+ }
+ </Box>
+ </HStack>
+ </Box>
+ </div>
+ );
+}
+functionContact({name,onClick,userid,photo}){
+ return(
<BoxonClick={onClick}cursor={"pointer"}display={"flex"}borderBottom={'1pxsolid#eaeaea'}alignItems={"cen
ter"}>
+ <imgsrc={photo}style={{height:50,borderRadius:60,padding:10}}/>
+ <spanstyle={{fontSize:18}}>{name}</span>
+ </Box>
+ )
+}
+functionContactList({list=[],getChatFor}){
+ return(
+ <div>
+ {
+ list.map(c=>(
<Contactname={c.full_name}photo={c.profile_picture}userid={c.userid}onClick={()=>getChatFor(c)}/>
+ ))
+ }
+ <Contact name={'My Group'} photo={"https://encrypted-

tbn0.gstatic.com/images?q=tbn:ANd9GcSBB-m1h3tP9ZoQ8eZFxgRKZMZqh3v-
SwfAzw&usqp=CAU"}userid={""}onClick={()=>getChatFor("")}/>
+ </div>
+ )
+}
+functionActiveChat({data}){
+ return(
+ <div>
+ <Boxdisplay={"flex"}>
+ <imgsrc={"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSBB-
m1h3tP9ZoQ8eZFxgRKZMZqh3v-SwfAzw&usqp=CAU"}style={{height:50,borderRadius:60,padding:
10}}/>
+ <spanstyle={{fontSize:18}}>MyGroup</span>
+ </Box>
+ </div>
+ )
+}
+functionChatBox({data={messages:[]},onSend}){
+ const[message,setMessage]=useState(null);
+ return(
+ <Boxh={'100%'}>
+ <Boxh={'90%'}rounded={5} bg={'#efeae2'}border={'1pxsolid
#CCCCCCFF'}overflow={"auto"}marginBottom={1}>
+ {
+ data?.messages.map(m=>(
+ <Messageself={m.from==data.friendid}content={m.message}/>
+ ))
+ }
+ <Messagesender={'Avinash'}self={true}content={'Hifriends'}/>
+ <Messagesender={'Avinash'}self={false}content={'HelloAvinash'}/>
+ <Messagesender={'Prateek'}self={true}content={'Whatup?'}/>
+ <Messagesender={'Avinash'}self={true}content={'Nothingspecial'}/>
+ <Messagesender={'Namita'}self={true}content={'Letsmeetsomewhere'}/>
+ </Box>
+ <Boxh={"10%"}display={"flex"}>
+ <Inputplaceholder='Entermessage'onChange={(e)=>setMessage(e.target.value)}/>
+ <ButtonmarginLeft={2}onClick={()=>onSend(data.friendid,message)}>
+ Send
+ </Button>
+ </Box>
+ </Box>
+ )
+}
+functionMessage({self=true,content,sender}){
+ return(
+ <Boxdisplay={"flex"}p={2}justifyContent={self?"flex-start":"flex-end"}>
+ <Boxbg={self?'#FFFFFF':'#d9fdd2'}boxShadow={'1px1px2px0px#868686'}rounded={20}p={2}>
+ <spanstyle={{fontSize:8}}>{sender}</span>
+ <TextfontSize='md'>{content}</Text>
+ </Box>
+ </Box>
+ )
+}
+
+
diff--gita/client/src/reportWebVitals.js
b/client/src/reportWebVitals.jsnewfilemode100644
index0000000..5253d3a
---/dev/null
+++b/client/src/reportWebVitals.js@@-
0,0+1,13@@
+constreportWebVitals=onPerfEntry=>{
+if(onPerfEntry&&onPerfEntryinstanceofFunction){
+ import('web-vitals').then(({getCLS,getFID,getFCP,getLCP,getTTFB})=>{
+ getCLS(onPerfEntry);
+ getFID(onPerfEntry);
+ getFCP(onPerfEntry);
+ getLCP(onPerfEntry);
+ getTTFB(onPerfEntry);
+ });
+}
+};
+exportdefaultreportWebVitals;
diff--gita/client/src/setupTests.jsb/client/src/
setupTests.jsnewfilemode100644
index0000000..8f2609b
---/dev/null
+++b/client/src/setupTests.js@@-
0,0+1,5@@
+//jest-domaddscustomjestmatchersforassertingonDOMnodes.
+//allowsyoutodothingslike:
+//expect(element).toHaveTextContent(/react/i)
+//learnmore:https://github.com/testing-library/jest-dom
+import'@testing-library/jest-dom';
diff--gita/server/.DS_Storeb/
server/.DS_Storenewfilemode100644
index0000000..51eeceb
Binaryfiles/dev/nullandb/server/.DS_Storedifferdiff--gita/
server/.envb/server/.env
00000..9a6c82a
---/dev/null
+++b/server/.env@@-
0,0+1,6@@
+PORT=5700
+HOST=localhost
+USER=avinash
+PASSWORD=12345
+DATABASE=clickchat
+DB_PORT=3306
diff--gita/server/app.jsb/server/
app.jsnewfilemode100644
index0000000..d6e50a4
---/dev/null
+++b/server/app.js@@-
0,0+1,204@@
+constexpress=require('express');
+constapp=express();
+constcors=require('cors');
+consthttp=require('http');
+constdotenv=require('dotenv');
+const{Server}=require('socket.io')
+dotenv.config();
+constdbService=require('./dbService');
+app.use(cors());
+app.use(express.json());
+app.use(express.urlencoded({extended:false}));
+//create
+app.post('/loadchats',(request,response)=>{
+ const{userid,friend}=request.body;
+ constdb=dbService.getDbServiceInstance();
+ constresult=db.loadchats(userid,friend);
+ result
+ .then(data=>response.json({data:data}))
+ .catch(err=>console.log(err));
+});
+//create
+app.post('/userinfo',(request,response)=>{
+ const{userid}=request.body;
+ constresult=db.getUserInfo(userid);
+ result
+});
+//create
+app.post('/login',(request,response)=>{
+ const{username,password}=request.body;
+ constresult=db.login(username,password);
+ result
+});
+app.post('/messages',(request,response)=>{
+ constresult=db.messages(userid);
+ result
+});
+app.post('/getAllUsers',(request,response)=>{
+ constresult=db.getAllUsers(userid);
+ result
+ .then(data=>response.json({data:{users:data}}))
+});
+//create
+app.post('/insert',(request,response)=>{
+ const{name}=request.body;
+ constresult=db.insertNewName(name);
+ result
+});
+
+app.post('/createUser',(request,response)=>{
+ const{fullname,username,password}=request.body;
+ constresult=db.createUser(fullname,username,password);
+ result
+});
+app.post('/makeFriend',(request,response)=>{
+ const{userid,friendid}=request.body;
+ constresult=db.makeFriend(userid,friendid);
+ result
+});
+//read
+app.get('/getAll',(request,response)=>{
+ constresult=db.getAllData();
+
+ result
+})
+//app.get('/getAllUsers',(request,response)=>{
+// constdb=dbService.getDbServiceInstance();
+//
+// constresult=db.getUsersList();
+//
+// result
+// .then(data=>response.json({data:data}))
+// .catch(err=>console.log(err));
+//})
+//update
+app.patch('/update',(request,response)=>{
+ const{id,name}=request.body;
+ constresult=db.updateNameById(id,name);
+ result
+ .then(data=>response.json({success:data}))
+});
+
+//delete
+app.delete('/delete/:id',(request,response)=>{
+ const{id}=request.params;
+ constresult=db.deleteRowById(id);
+ result
+ .then(data=>response.json({success:data}))
+});
+app.get('/search/:name',(request,response)=>{
+ const{name}=request.params;
+ constresult=db.searchByName(name);
+ result
+})
+constserver=http.createServer(app);
+
+constio=newServer(server,{
+ cors:{
+ origin:"http://localhost:3000",
+ methods:["GET","POST","PATCH","DELETE"]
+ }
+})
+io.on("connection",(socket)=>{
+ //functionbroadcast()
+ functionsend(id,message){
+ socket.to(id).emit('message',message);
+ }
+ socket.on("user_emit",(id)=>{
+ constresult=db.putSocket(id,socket.id);
+ })
+ socket.on("send_message",(socket)=>{
+ constdata=JSON.parse(socket)
+ constresult=db.insertMessage(data.from,data.to,data.message);
+ //socket.emit()
+ result.then(res=>{
+ if(res.insertId){
+ db.getSocket(data.to)
+ .then(res=>send(res.socket,data.message));
+ }
+ });
+ })
+ socket.on('disconnect',()=>{
+ console.log("USERdisconnected:",socket.id);
+ })
+})
+console.log("ENV:",process.env.PORT);
+server.listen(process.env.PORT,()=>console.log('appisrunning'));
+//app.listen(process.env.PORT,()=>console.log('appisrunning'));diff--gita/
server/dbService.jsb/server/dbService.js
00000..434788a
---/dev/null
+++b/server/dbService.js@@-
0,0+1,357@@
+constmysql=require('mysql');
+constdotenv=require('dotenv');
+letinstance=null;
+dotenv.config();
+constconnection=mysql.createConnection({
+ host:process.env.HOST,
+ user:process.env.USER,
+ password:process.env.PASSWORD,
+ database:process.env.DATABASE,
+ port:process.env.DB_PORT
+});
+connection.connect((err)=>{
+ if(err){
+ console.log(err.message);
+ }
+ console.log('db'+connection.state);
+});
+classDbService{
+ staticgetDbServiceInstance(){
+ returninstance?instance:newDbService();
+ }
+ asyncgetUsersList(){
+ try{
+ constresponse=awaitnewPromise((resolve,reject)=>{
+ constquery="SELECT*FROMusers;";
+ connection.query(query,(err,results)=>{
+ if(err)reject(newError(err.message));
+ resolve(results);
+ })
+ });
+ //console.log(response);
+ returnresponse;
+ }catch(error){
+ console.log(error);
+ }
+ }
+
+ asyncgetSocket(userid){
+ try{
+ constquery=`SELECT*FROMsocketsWHEREuserid=${userid};`;
+
+ resolve(results);
+ })
+ });
+ returnresponse;
+ }catch(error){
+ }
+ }
+
+ asyncputSocket(userid,socketid){
+ try{
+ constquery=`
+INSERTINTOsockets(userid,socket)VALUES(${userid},"${socketid}")ONDUPLICATEKEYUPDATEsocket="$
{socketid}";`;
+
+ resolve(results);
+ })
+ });
+ returnresponse;
+ }catch(error){
+ }
+ }
+ asyncinsertMessage(from,to,message){
+ try{
+ constquery=`
+ INSERTINTOmessages(
+m_from,
+m_to,
+message
+)
+ VALUES(
+ ${from},${to},"${message}"
+)
+ `;
+ console.log(query);
+ resolve(results);
+ })
+ });
+ returnresponse;
+ }catch(error){
+ }
+ }
+ asynclogin(username,password){
+ try{
+ constquery=`SELECTuseridFROMusersWHEREusername="${username}"ANDpassword="$
{password}";`;
+ if(results&&results.length)
+ resolve({loginError:false,...results[0]});
+ else
+ resolve({loginError:true})
+ })
+ });
+ returnresponse;
+ }catch(error){
+ }
+ }
+ asyncgetUserInfo(user){
+ try{
+ constquery=`SELECT*FROMusersWHEREuserid=${user};`;
+ resolve(results[0]);
+ })
+ });
+ returnresponse;
+ }catch(error){
+ }
+ }
+
+ asyncloadchats(user,friend){
+ try{
+ constquery=`SELECTmessage,date_created,m_fromas'from',m_toas'to'FROMmessages
+ WHEREmessages.m_from=${user}ANDmessages.m_to=${friend}
+ OR
+ messages.m_from=${friend}ANDmessages.m_to=${user}
+ `;
+ resolve(results);
+ })
+ });
+ returnresponse;
+ }catch(error){
+ }
+ }
+ asyncgetAllUsers(user){
+ try{
+ constquery=`SELECTuserid,full_name,profile_pictureFROMusersWHERENOTuserid=
${user};`;
+ console.log(query);connection.query(query,
+ (err,results)=>{
+ resolve(results);
+ })
+ });
+ returnresponse;
+ }catch(error){
+ }
+ }
+
+ asyncmessages(user){
+ try{
+ constquery=
+ `SELECT*
+ FROMmessages
+ INNERJOINusers
+ ONmessages.m_from=users.useridAND
+ messages.m_to=users.userid
+ WHEREmessages.m_from=${user}ANDmessages.m_to=${user};`;
+ resolve(results);
+ })
+ });
+ returnresponse;
+ }catch(error){
+ }
+ }
+
+ asyncgetAllData(){
+ try{
+ constquery="SELECT*FROMnames;";
+
+ resolve(results);
+ })
+ });
+ returnresponse;
+ }catch(error){
+ }
+ }
+
+ asyncgetFriendsList(){
+ try{
+ constquery="SELECT*FROMnames;";
+ resolve(results);
+ })
+ });
+ returnresponse;
+ }catch(error){
+ }
+ }
+ asyncmakeFriend(userid,friendid){
+ try{
+ constdateAdded=newDate();
+ constinsertId=awaitnewPromise((resolve,reject)=>{
+ constquery="INSERTINTOusers(userid,friendid)VALUES(?,?);";
+ connection.query(query,[userid,friendid],(err,result)=>{
+ resolve(result);
+ })
+ });
+ return{
+ id:insertId,
+ full_name,
+ username,
+ password
+ };
+ }catch(error){
+ }
+ }
+
+ asynccreateUser(full_name,username,password){
+ try{
+ constquery="INSERTINTOusers(full_name,username,password)VALUES(?,?,?);";
+ connection.query(query,[full_name,username,password],(err,result)=>{
+ resolve(result);
+ })
+ });
+ return{
+ id:insertId,
+ full_name,
+ username,
+ password
+ };
+ }catch(error){
+ }
+ }
+ asyncinsertNewName(name){
+ try{
+ constquery="INSERTINTOnames(name,date_added)VALUES(?,?);";
+ connection.query(query,[name,dateAdded],(err,result)=>{
+ resolve(result.insertId);
+ })
+ });
+ return{
+ id:insertId,
+ name:name,
+ dateAdded:dateAdded
+ };
+ }catch(error){
+ }
+ }
+ asyncdeleteRowById(id){
+ try{
+ id=parseInt(id,10);
+ constquery="DELETEFROMnamesWHEREid=?";
+ connection.query(query,[id],(err,result)=>{
+ resolve(result.affectedRows);
+ })
+ });
+ returnresponse===1?true:false;
+ }catch(error){
+ returnfalse;
+ }
+ }
+ asyncupdateNameById(id,name){
+ try{
+ id=parseInt(id,10);
+ constquery="UPDATEnamesSETname=?WHEREid=?";
+ connection.query(query,[name,id],(err,result)=>{
+ resolve(result.affectedRows);
+ })
+ });
+ returnresponse===1?true:false;
+ }catch(error){
+ returnfalse;
+ }
+ }
+ asyncsearchByName(name){
+ try{
+ constquery="SELECT*FROMnamesWHEREname=?;";
+ connection.query(query,[name],(err,results)=>{
+ resolve(results);
+ })
+ });
+ returnresponse;
+ }catch(error){
+ }
+ }
+}
+
+module.exports=DbService;
diff--gita/server/package.jsonb/server/
package.jsonnewfilemode100644
index0000000..0c3fd75
---/dev/null
+++b/server/package.json@@-
0,0+1,24@@
+{
+"name":"server",
+"version":"1.0.0",
+"description":"",
+"main":"app.js",
+"scripts":{
+ "test":"echo\"Error:notestspecified\"&&exit1",
+ "start":"nodemonapp.js"
+},
+"keywords":[],
+"author":"",
+"license":"ISC",
+"dependencies":{
+ "cors":"^2.8.5",
+ "dotenv":"^8.2.0",
+ "express":"^4.17.1",
+ "http":"^0.0.1-security",
+ "mysql":"^2.18.1",
+ "socket.io":"^4.5.4"
+},
+"devDependencies":{
+ "nodemon":"^2.0.20"
+}
+}
CHAPTER-7
TESTING
TESTINGTECHNIQUES
Testing is the process of evaluating a system or its component(s) with

the intent tofind whether it satisfies the specified requirements or not. In
simple words,
testingisexecutingasysteminordertoidentifyanygaps,errors,ormissingreq
uirementsin contrarytothe actualrequirements.
UnitTestingBenefits
 Unittestingincreasesconfidenceinchanging/maintainingcode.Ifgoodunittests
are written and if they are run every time any code is changed, we willbe
able to promptly catch any defects introduced due to the change. Also,
ifcodes are already made less interdependent to make unit testing possible,
theunintended impactof changestoanycodeis less.
 Codesaremorereusable.Inordertomakeunittestingpossible,codesneedtobe
modular.Thismeans thatcodesareeasier to reuse.
 The cost of fixing a defect detected during unit testing is lesser
incomparison to that of defects detected at higher levels. Compare the
cost(time,effort,destruction,humiliation)ofadefectdetectedduringacceptancet
esting or whenthe softwareislive.
 Debugging is easy. When a test fails, only the latest changes need to
bedebugged. With testing at higher levels, changes made over the span
ofseveral days/weeks/monthsneed tobescanned.
1. Top-
downintegrationtesting:Testingtakesplacefromtoptobottom,followingthecontrolflo
worarchitecturalstructure(e.g.startingfromtheGUIormainmenu).
Components or systems are substituted by stubs. Below is the diagram
of‘TopdownApproach’:
2. Bottom-up integration testing: Testing takes place from the bottom of

thecontrolflowupwards.Componentsorsystemsaresubstitutedbydrivers.Belowisth
eimage of ‘Bottom upapproach’:
7.1.2 SYSTEMTESTING
System testing tests the system as a whole. Once all the components are integrated,
theapplication as a whole is tested rigorously to see that it meets the specified
QualityStandards.Thistype oftesting isperformedbyaspecializedtestingteam.
Systemtestingisimportantbecauseofthefollowingreasons:
 System testingisthefirst
stepintheSoftwareDevelopmentLifeCycle,wheretheapplicationistestedasawhole.
 Theapplicationistestedthoroughlytoverifythatitmeetsthefunctionalandtechnicalsp
ecifications.
 Theapplicationistestedinanenvironmentthatisveryclosetotheproductionenvironm
entwheretheapplicationwillbedeployed.
 Systemtestingenablesustotest,verify,andvalidateboththebusinessrequirementsas
wellastheapplicationarchitecture.
CHAPTER-8
INPUT/ OUTPUTSCREENS
CHAPTER-11
FUTURESCOPE
Softwarescope
Softwarescopedescribesthedataandcontroltobeprocessed,functionperform
ance,constraints,interfacesandreliability.Functiondescribesinthestatement
of scope are evaluated and in some case refined to provide more
detailprior to the beginning of the estimation. Because both cost and
schedule estimatesarefunctionallyoriented,some
degreeofdecompositionisoftenuseful.
We can implement easily this application. Reusability is possible as and

when werequire in this application. We can update it next version. We
can add new featuresas and when we require. There is flexibility in all
the modules. Scope of thisdocument is to put down the requirements,
clearly identifying the informationneeded by the user, the source of the
information and outputs expected from thesystem.
11.2Future scope
It is directly dependent on the lay stone of the project that is we will

have to designa system which when the time passes having a better
system initially should notbecomea joke later.
It is highly likely that the scope will change as the web application
projectmoves forward; the webE process model should be
incremental. This allows thedevelopment team to ―freeze‖the scope
for one increment so that an operational web
streamofchangesbutstillrecognizesthecontinuousevolutioncharacteristi
csofmostwebapplication.Besidesthat,thefollowingbasicqualityinthesof
twarealways safeguardsthefuturescope ofthe software.
Reusability:Reusabilityispossibleasandwhenwerequireinthisapplica
tion. We can update it next version. Reusable software reduces
design,coding and testing cost by amortizing effort over several
designs.
Reducingtheamountofcodealsosimplifiesunderstanding,whichincrea
sesthelikelihood that the code is correct. We follow up both types of
reusability:Sharing of newly written code within a project and reuse
of previously writtencodeonnewprojects.
Extensibility:This software is extended in ways that its original

developers
maynotexpect.ThefollowingprinciplesenhanceextensibilitylikeHided
atastructure, Avoid traversing multiple links or methods, Avoid case
statementsonobject typeanddistinguish publicandprivateoperations.
Robustness: Its method is robust if it does not fail even if it receives

improperparameters. There is some facilities like Protect against
errors, Optimize aftertheprogramruns,validatearguments
andAvoidpredefinedlimits.
Understandability:A method is understandable if someone other

than thecreator of the method can understand the code (as well as the
creator after atime lapse). We use the method
CHAPTER-12
BIBLIOGRAPHY
 http://www.w3school.com
 http://www.tutorialpoint.com
 http://www.java2jar.com
 BCS-051(IntroductiontosoftwareEngineering)studymaterial.
 http://www.treehouse.com
 http://www.javatpoint.com

Heera - Project-Report New

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Heera - Project-Report New

Uploaded by

Copyright:

Available Formats

A PROJECT REPORT

Web Chat Application

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

We,Heera Singh(Roll no. 4055007)& Gufran Alam(Rollno.

Date: 08-05-2023 Heera Singh

I wish him/her best of luck for his future.

I would also like to thanks my faculty members of CSE department for

The web chat application is a digital platform that allows

Web Chat Application

This project is aimed on the Web Chat Application in secured and

The purpose of this document is to describe all external and internal

In user management module, whenever a new user wants to join in

TITLEOF THE PROJECT

Chatting is now-a-days very useful to express our ideas as well as

This project has been planned to having the view of distributed

Node.js also provides a rich library of various JavaScript modules

Following are some of the important features that make Node.js

Following is the link on github wiki containing an exhaustive list of

 Projects, Applications, andCompanies UsingNode

This will be used to type your program. Examples of few editors

The source code written in source file is simply javascript. The

Node.js distribution comes as a binary installable for SunOS ,

Based on your OS architecture, download and extract the archive

Use theMSI fileandfollow theprompts to install theNode.js. By

Create a js file named main.js on your machine (Windows or

/* Hello, World! program in

The most important advantage of the database is to maintain the

HTTP/1.1 101 Switch

Purpose: The purpose of this document is to describe all external and

Problem identification is very first step of system analysis. The analyst

Feasibility steady is an important phase in the software development

The feasibility study of any system is mainly intended to study and

Whatisthe likely impactof the proposed system onthe organization? I.e.

Thus since the feasibility study may lead to commitment of large

It refers to the benefits or outcomes we are deriving from the product as

Proposed projects are beneficial only if they can be turned into

The Corporate messenger System is developed with the aim of

Sending a message provides a private communication channel using the

 Chat Room Management module:This module also used as the same

Hardware Interface: There is no direct hardware interface

This construction turns out to be a powerful design feature. It

Not surprisingly, similar benefits occur when this technique is applied

Figure1. MVCdesign pattern

System design is the bridge between system & requirements analysis

Abstraction is used to construct solutions to problems without having to

Modularity is concerned with decomposing of main module into

The Waterfall Model was first Process Model to be introduced. It is very

 Requirement Gathering and analysis − All possible requirements of

 System Design − The requirement specifications from first phase are

 Implementation − With inputs from the system design, the system is

 Integration and Testing − All the units developed in the

 Works well for smaller projects where requirements are very

in terms of the specific technology to be implemented (in a

 Database troubleshooting: ER diagrams are used to analyze

 Business process re-engineering (BPR): ER diagrams help in

 Education: Databases are today’s method of storing relational

UML stands for Unified Modeling Language. It’s a rich language to

UML diagrams to understand the system in a better and simple way. A

Thereare14UMLdiagramtypestohelp you modelthesebehaviors.

Behavioral diagrams basically capture the dynamic aspect of a system.

A complex enterprise application with many collaborators will require a

Data flow diagram is graphical representation of flow of data in an

 Logical DFD - This type of DFD concentrates on the system process,