DEVELOPING CHAT and CALENDAR PLUG-IN USING AJAX PROGRAMMING Jyothi Manjunath Leelavathi B.E., Visveswaraiah Technological Univer

Home , Ajax (programming), JavaScript library, Web application, Web chat

DEVELOPING CHAT AND CALENDAR PLUG-IN USING AJAX PROGRAMMING

Jyothi Manjunath Leelavathi B.E., Visveswaraiah Technological University, Karnataka, India, 2005

PROJECT

Submitted in partial satisfaction of the requirements for the degree of

MASTER OF SCIENCE

COMPUTER SCIENCE

CALIFORNIA STATE UNIVERSITY, SACRAMENTO

FALL 2010

DEVELOPING CHAT AND CALENDAR PLUG-IN USING AJAX PROGRAMMING

A Project

Jyothi Manjunath Leelavathi

Approved by:

______, Committee Chair Jinsong Ouyang, Ph.D.

______, Second Reader Ying Jin, Ph.D.

______Date

Student: Jyothi Manjunath Leelavathi

I certify that this student has met the requirements for format contained in the University format manual, and that this project is suitable for shelving in the Library and credit is to be awarded for the Project.

______, Graduate Coordinator ______Nikrouz Faroughi, Ph.D. Date

Department of Computer Science

iii

Abstract

DEVELOPING CHAT AND CALENDAR PLUG-IN USING AJAX PROGRAMMING

Jyothi Manjunath Leelavathi

In this project, I am planning to develop a plug in module that can be integrated into the web based application. The aim of this application is to provide email-services, calendar services and chat services dynamically within the browser. I am responsible for developing Chat Service and Calendar service. For example, in Google apps, the user can open the Gmail and while working on this, the user can see the friends who are online without changing a window or logging into another chat messenger and also will be able to open the calendar and see the contents. In a single browser window, the user is able to view and modify the different applications dynamically.

The client-side/web browser technologies used in Web 2.0 development are JavaScript and Ajax (XML). Ajax programming uses JavaScript to upload and download new data from the web server without undergoing a full page reload.

Chat service is developed using Java and Ajax technology and the Mysql database. It has all the basic features that we see in general popular chat applications like Yahoo chat or

Skype.

Java technologies and Ajax framework makes the application more scalable and compatible to integrate with other application. The GUI part is greatly enhanced for better end user experiences.

Calendar service application is provided with some of the basic features, such as ability to schedule one or more events on a particular day, a standard view that can show any month, with event times and titles listed in order and users will be able to open the application like any other application.

______, Committee Chair Jinsong Ouyang, Ph.D.

______Date

ACKNOWLEDGMENTS

I am thankful to all the people who have helped and guided me through this journey of

completing my Masters Project.

My sincere thanks to Dr. Jinsong Ouyang, for giving me the opportunity to work on my

masters project under him and for guiding me throughout the project. My heartfelt thanks

to Dr.Ying Jin for agreeing to be my second reader and providing me with her invaluable

inputs on revising my report.

My special thanks to my roommates and friends Nandish B ,Veeresh Kortagere and Anh

Thai for helping me with their ideas and by reviewing my project report and lending me

their Computers when ever I had problem.

Last but not the least I would like to thank my husband Naren Veeranna, parents

Manjunath and Leelavathi, my brother Vasu Dev and my in-laws Girija and Dr.Veeranna for their unconditional love. They have always motivated me and are the sole reasons for me to have come this far in life.

TABLE OF CONTENTS

Page

Acknowledgments...... vi

List of Figures ...... ix

Chapter

1. INTRODUCTION ...... 1

2. BACKGROUND ...... 3

Purpose and Scope ...... 5

3. TECHNOLOGY SURVEY ...... 7

AJAX (Asynchronous Java Script and XML) ...... 8

Java Servlets...... 8

Java Server Pages (JSP) ...... 9

JQuery ...... 10

JavaScript ...... 10

4. ARCHITECTURE ...... 12

Introduction ...... 12

The Existing Architecture of Calendar Application ...... 13

Architecture Subsystem ...... 15

Server Side Architecture for Chat Application ...... 15

vii

Chat Application Client ...... 16

Database Architecture for Chat Application ...... 19

5. SYSTEM DESIGN ...... 20

Server Components for Calendar ...... 22

Insert Event Module ...... 22

Delete Event Module ...... 23

Update Event Method ...... 24

Client Design for Calendar ...... 26

Server Component Modules for Chat ...... 29

Get Message Module ...... 30

Get User Details and Set Message ...... 31

Client Design Module for Chat Application ...... 32

Data Tier Design ...... 36

6. IMPLEMENTATION ...... 37

7. CONCLUSION ...... 44

Bibliography ...... 46

viii

LIST OF FIGURES Page

Figure 1 Basic Architecture ...... 13

Figure 2 Calendar Technical Structures ...... 14

Figure 3 Server Systems for Chat ...... 15

Figure 4 Chat Application Client ...... 17

Figure 5 Refractored Calendar Design ...... 21

Figure 6 Calendar Insert Events ...... 23

Figure 7 Delete Event Method ...... 24

Figure 8 Update Calendar Events ...... 25

Figure 9 Update Calendar Event ...... 25

Figure 10 Client Design for Calendar ...... 26

Figure 11 Technical Design of Chat Application ...... 28

Figure 12 Properties ...... 29

Figure 13 XAMPP for Assigning DB Credentials ...... 30

Figure 14 Update Message Holder Table ...... 31

Figure 15 Get and Set Message ...... 32

Figure 16 Client Design for Chat ...... 33

Figure 17 Web Ponder Chat ...... 33

Figure 18 Chat Window for User 1 Eyan ...... 34

Figure 19 Chat Windows for User 2 Guest ...... 35

Figure 20 Data Tier ...... 36

Chapter 1

INTRODUCTION

A Chat Centre basically enables users to communicate effectively at the same time and

share the information. It is similar to any instant messaging applications like “Gmail

Chat” where the users can share the information at the same time or at different times.

Both the parties involved need to be authenticated before logging into their respective

accounts. A Chat Center integrated along with the Messaging and Event Scheduling application, Calendar makes a complete system for effective communication, sharing and scheduling of events.

Now a days, more and more real time applications like Chat are built as per the

requirements based on the size of the organization. When two employees wants to

communicate on work issues who are distantly located, cannot use generic applications

like Gmail, yahoo applications. They need an organization specific application developed

for the Intranet network the company. This kind of applications where the users are on

the same network helps to prevent any breach of security within the organization as

virtually, both the parties involved and their shared information will reside on same

server which belongs to the company. For example, all the financial organizations like

Bank, insurance companies store huge amount of customer’s social security

information’s. If any employees exchanges or talk about the social security information

with the colleagues or try to transport the information, it can be easily tracked with

applications like Chat and Message built for the Intranet user purposes. The AJAX driven

2 application ,Chat is more user friendly and efficient .Majority of the web applications built these days are using the AJAX for fast and user friendly navigation of web resources.

Chapter 2

BACKGROUND

Chat is defined as a web based asynchronous/synchronous form of communication

through exchange of information. It is nothing but digitally exchanging messages and

share information in terms of different types of documents like MS world and PDF. The

server serves as the back end storage where it stores the credentials for particular registered users. Each user has to login into their account through internet to chat and

share information simultaneously or to retrieve the information that has been sent to their

account. ARPANET (Advanced Research Projects Agency Network) created by small research team led to the development of sending and receiving information through packet switching [1].In earlier days, information was exchanged through File Transfer

Protocol known as FTP, but the same process is made simple with Simple Mail Transfer

Protocol, SMTP which is widely followed with various standards like SMTP-AUTH defined by RFC 2554.

This internet based Chat system has advanced leaps and bounds since it has started. The

first chat sites featured simple interfaces made from dynamically generated HTML pages.

The use of HTML allowed sites to incorporate fonts, colors, links, and images into their

interfaces, giving them a more modern hypermedia feel, which was an advantage over

older, but more established text-based chat services like IRC. The biggest downside to

HTML chat was in its interactivity [2]. Every message sent to an HTML chat required a

form submission and subsequent page load, which meant that there was a waiting period

4 between the time a user could send one message and the time they could begin to type the next one. Receiving messages also required frequent page reloads, and could lead to delays, page flicker and distracting browser activity. For these reasons HTML chats have largely fallen out of use today, although some of the older HTML chat sites still remain active [2] .

In 1995, Java applet technology was introduced into web browsers. Java's well developed network and graphical capabilities made it an ideal platform for creating chat interfaces, some of which are in use on the most popular web chat sites today. While there are some drawbacks associated with Java chats such as long initial page loading times, the technology has worked well and scaled well [2] .

The traditional email system is has transformed itself into more real time communication medium. The message sending and receiving time is very negligible. This kind of technical advancements has taken the whole Chat and messaging system into entirely new arena with launch of Face book, Gmail and Google chats. With new web based technologies like AJAX and XML, the user experience has become more dynamic, graphical and friendly. For example if an user is chatting with a friend while he is logged into his account and at the same time he can also compose a new message and send it in the same window i.e. the user can do both chatting as well as composing new message in the same window which is a revolutionary change brought by advent of AJAX which will be discussed in detail. Smaller, less busy chats can actually have more appeal to users than crowded, popular ones. Really, the only unique feature web chat sites offer is instant accessibility [3].

Event management achieved through web based Calendar and messaging system integrated along with the chat makes a complete package which is ready for information

Sharing as well as well as scheduling the events like meetings and sending group requests.

Purpose and Scope

The single bundles interface for communication has lot of advantage over desperate sources for the similar tasks to be done. It becomes a single system where users come to communicate with one another. This integrated project has been developed for the professor which facilitates him to communicate with students and students can find each other and discuss. This chat application along with integrated Calendar and messaging makes a perfect tool for Professor to communicate with students, track events, classes and facilitate students to identify and share information with each other. The Purpose of this project is to build the application which can accomplish the above mentioned features.

The scope of this Project is to build a Chat application which is more a real time application and integrating with the existing Messaging and web based Calendar by refactoring the back end code for the bundled applications. The application shall:

1. Allow Professor/User to communicate with the registered students

in the course.

2. Allow the registered Users/Students to communicate with each

Other.

3. Two users who logged in simultaneously can share the documents

in some of the standard format like MS World, PDF and receiver

Can download the document into their local machine.

4. Allow more than two users to chat simultaneously.

5. Provide users with more efficient and more intuitive light weight

Graphical interface.

Chapter 3

TECHNOLOGY SURVEY

In this section, I will discuss the various technologies that are used in developing the Chat application and refactoring/Integrating the code of Messaging and Calendar application and also give brief description on each one of them to familiarize and understand them better.

The underlying architecture for this project along with overview of important technologies used will be discussed below:

1. Presentation Layer - The presentation layer is responsible for rendering the view, meaning the graphical representation of the user interface. In the J2EE point of view, client-side access to an application in most cases occurs through a browser. This layer is built using technologies like JSP, HTML, CSS and DOM objects. Basically, it’s the designing of Graphical User Interface, GUI as how the application communicates directly with end user and as well as communicates with the Business layer to process and respond to user requests.

2. Business Layer - This is the middle tier and holds the actual business logic. The requests sent through the presentation layer are processed by applying appropriate business logic and in turn communicates with database layer to get the quick responses.

JSP , Servlets and EJB form the main components of Business layer.

3. Database Layer – It is the most important layer which acts as a holder or storage of the data. Any good database should be able to integrate with the web application and more

efficient in handling the queries in least amount of response time possible. In this project,

I have used MYSQL as the back end database. The data base layer has generic interface

with basic Create, Retrieve, Update and Delete operations.

AJAX (Asynchronous Java Script and XML)

With traditional web pages and applications, every time a user clicks on something, the

browser sends a request to the server, and the server responds with a whole new page.

Even if user’s web browser is smart about caching things like images and cascading style

sheets, that’s a lot of traffic going back and forth between their browser and your server

and a lot of time that the user sits around waiting for full page refreshes [4].

Using Ajax, applications only ask the server for what they really need—just the parts of a

page that need to change, and just the parts that the server has to provide [4]. That means

less traffic, smaller updates, and quicker response to the user. Ajax page is built using

standard Internet technologies like XML and The DOM. Some of the popular

applications built using AJAX are Google.com , Yahoo Mail and Face book

Java Servlets

A servlet is a Java programming language class used to extend the capabilities of servers

that host applications accessed by means of a request-response programming model.

Servlets can respond to any type of request, they are commonly used to extend the

applications hosted by web servers. For such applications, Java Servlet technology defnes

HTTP-specific servlet classes. The javax servlet and javax.servlet.http packages provide

interfaces and classes for writing servlets. All servlets must implement the Servlet interface, which defnes lifecycle methods. A servlet is a Java programming language

class used to extend the capabilities of servers that host applications accessed by means of a request-response programming model. Although servlets can respond to any type of request, they are commonly used to extend the applications hosted by web servers. For such applications, Java Servlet technology defnes HTTP-specifc servlet classes. The javax.servlet and javax.servlet.http packages provide interfaces and classes for writing servlets. All servlets must implement the Servlet interface, which defnes lifecycle methods. The lifecycle of a servlet is controlled by the container in which the servlet has been deployed. When a request is mapped to a servlet, the container performs the following steps [5]. a. Loads the servlet class. b. Creates an instance of the servlet class. c. Initializes the servlet instance by calling the init method d. Invokes the service method, passing request and response objects. e. If it needs to remove the servlet, the container fnalizes the servlet by calling the servlet’s destroy method [5].

Java Server Pages (JSP)

JavaServer Pages (JSP) technology provides a simplified and a quick way to create dynamic web content. A JSP page is essentially a servlet. JSP pages run on a JSP container. A servlet container is normally also a JSP container. The first time a JSP page is requested, the JSP container does two things:

1. Translate the JSP page into a JSP page implementation class. This class must implement the javax.servlet.Servlet interface. The result of the translation is dependent on

the JSP container. The class name is also JSP container-specific. If there is a translation error, an error message will be sent to the client.

2. If the translation was successful, the JSP container compiles the implementation class, and then loads and instantiate it and perform the normal lifecycle operations it does for a servlet.

JQuery jQuery [6] is a fast and concise JavaScript Library that simplifies the HTML document traversing, event handling, and AJAX interactions for rapid web development. jQuery changes the way you write JavaScript. jQuery greatly simplifies the client side scripting of HTML. jQuery‟s syntax makes it easier to traverse documents and DOM [7] elements.

It also provides capabilities to the developers to create plugins on top of Javascript library.

Key Features

1. DOM element selection using cross browser open source selector engine Sizzle.

2. DOM traversal and modification.

3. Events.

4. CSS manipulation.

5. Effects and animations.

6. Extensibility through plugins.

JavaScript

JavaScript, which is one of the programming language is primarily known as the technology that allows web pages to become “dynamic” or “interactive”. JavaScript is

primarily used in the form of client-side JavaScript, implemented as part of a web browser in order to provide enhanced user interfaces and dynamic websites [8].

The primary use of JavaScript [8] is to write functions that are embedded in or included

from HTML pages and that interact with the Document Object Model (DOM) of the

page. Some simple examples of this usage are:

1. Opening or popping up a new window with programmatic control over the size,

position, and attributes of the new window (e.g. whether the menus, toolbars, etc. are

visible).

2. Validating input values of a web form to make sure that they are acceptable before

being submitted to the server.

3. Changing images as the mouse cursor moves over them: This effect is often used to

draw the user's attention to important links displayed as graphical elements.

Because JavaScript code can run locally in a user's browser (rather than on a remote

server), the browser can respond to user actions quickly, making an application more

responsive. Furthermore, JavaScript code can detect user actions which HTML alone

cannot, such as individual keystrokes. Applications such as Gmail take advantage of this:

much of the user-interface logic is written in JavaScript, and JavaScript dispatches

requests for information (such as the content of an e-mail message) to the server. The

wider trend of Ajax programming similarly exploits this strength [8]. A web browser is

by far the most common host environment for JavaScript. Web browsers typically use the

public API to create "host objects" responsible for reflecting the DOM into JavaScript

[8].

Chapter 4

ARCHITECTURE

In this chapter, I am going to discuss about the over all system design implemented in this project. It discusses the various components of the system, their interaction with each other and how they integrate to form a system. This chapter further outlines the various difficulties faced during designing the system and the eventual solutions to getting over them.

Introduction

The Chat application has been divided into three tiers, the Client, Server and the

Database. I am also going to explain about architecture of the existing Chat application and how the code was refractor from many different servlet into one java class to make it as a Java programming interface which can be called anywhere from the Web ponder application. The code is written in a more modular way with the future possibility of extension. In the first section, I will describe about the existing architecture and in later chapters, I will explain in detail as how this existing code with loads of servlets is modularized into efficient single java class for each application.

In the below Figure 1, the basic pictorial overview of Chat and calendar are mentioned.

As the client gets loaded, an AJAX HttpRequest is made to the servlet to call specific events and in turn talks with database to get the necessary information without reloading the current web page.

Client JavaScript/ HTML Appli cation Servlet Java data/ Class Chat AJAXHttp Request

Figure 1 Basic Architecture

The Existing Architecture of Calendar Application

HealthclubDemo.html is the file where the front end code for calendar GUI is written and in the above html file, insertEventsIntoDB() function is written which in turn links to

SampleData.js JavaScript file. In .js file, small functions for each event like

InsertEventsIntoDB(), DeleteeventsFromDB() etc are written where the information is stored in array. From each of the above function, AJAX HttpRequest is made to the respective servlet which in turn talks with the respective Java class to bind the data into separate tables in database. The technical representation of the same is done in the Figure

HtmlClubDemo.html Page Function: insertEventsIntoDB()

SampleData.js Is a JavaScript file

InsertEvent() DeleteEvent() UpdateEvent()

InserEventsServlet AJAJava DeleteEventsServlet UpdateEventServlet

AJAX HttpReq Call AJAX HttpReq Call AJAX HttpReq Call

InserEvents.Java DeleteEvents.Java Updateevents.Java

MySQL Calendar Tables (Group,Message,UserInfoTable)

Figure 2 Calendar Technical Structures

The above code is refractor and made more modular with just one Servlet and one java

class, which will be discussed in detail in next chapter.

Architecture Subsystem

As mentioned above, the system consists of three main components; the server, the client

and the database.

In the following section, each of components is discussed in detail.

Server Side Architecture for Chat Application

In this project, I am using freeware software called XAMPP which acts as a cross module

Server package to the database. The server handles all the communication with the

database to send and receive the messages from database. The get message and get user

details are the modules that are called when the user first opens a chat window to chat

with another user.

SERVER DATABASE

D Chat Worker Get Message B Module Module C O N Message N Holder E Table C Get User details Set Message T Module I O N

Figure 3 Server Systems for Chat

In the chat worker module, a database connection to MYSQL is established for a user named root with the admin/blank password. This user is the default administrator having full privileges to do any task. In the get message module, the Message holder table in the database is accessed to choose the user to chat with and his id and message are updated every time. In get user details module, new properties or configuration file is loaded which has built in configurations. Then a user is chosen from the user profile. In the set message modules, the message holder table is inserted with the new values of communication between from user and to user.

In the above mentioned way, the whole life cycle from server side starting from fetching the user profiles, exchanging files and messages and updating the database table, message holder is completed.

Chat Application Client

The chat client includes the following modules. The chat client subsystem is shown in

Figure 4.

Build Table Send Ajax Function Request Function

Active table Send Update Function Chat Window Chat Application Server

Send Message Poll Message Function Function

Populate Build Chat Message Window

Figure 4 Chat Application Client

All the modules in the above client diagram are described in detail below.

1. Build Table: When the user logs in into his account, he can see the list

of users that are online and start to chat with them. In this function, the

response from the Ajax request is used to get the list of all the users who

are currently online.

2. Send Ajax Request: The XMLHttpRequest object is used to send the

request from the user and get the response and parse it as a URL

18 response. The code is written which is compatible with many popular browsers Internet Explorer, Firefox and Google Chrome.

3. Active Table: Here, when the user starts to chat with another user, the chat window and the colors will be visible and he can able to see the active window.

4. Send Update Chat Window: Once the users exchange many messages, then the scroll bar on the side of the small chat window appears where they can check all the messages starting from the first chat in the present session.

5. Send Message: This function actually sends the XMLHttpRequest to the

Chat servlet to get from and to user id’s.

6. Poll Message: Here, an Ajax request is sent to poll the updated list of online vendors with a time out set to 20000. On a ready status change, the new messages are populated.

7. Populate Message: When the XMLHttpMsg status and response text is received, then all the messages are split within the chat window as per the events like visibility style, Scroll etc. This particular feature is made simple with the use of DOM technology where in it systematically organizes the HTML file and events by getElementById() function as well as innerHTML to access the text content.

Database Architecture for Chat Application

For Chat application I have used a table named Message holder along with one more shared table with Message application called user profile table that contains all the users and related information like username. The message holder is storing all the messages sent and received by the web ponder application. A freeware called Xampp acts as a interface to the server and database which has inbuilt Apache server, MySql database and PHP scripting language embedded.

Chapter 5

SYSTEM DESIGN

The existing design of the calendar project is remodeled to make it more modular. Looking at the Figure 2 and the technical details, for each event, a separate servlet is created and a separate java class is created. For example, for a Update event, there is separate update servlet and an update event java class. This way, in future if more functionality has to be added, more servlets has to be created and the application becomes heavy. So I refractored the code from all the servlets belonging to calendar application and made it into one servlet. In a similar fashion, all the Java classes created separately for each event are refractored into a single java class. This way, the application becomes more lightweight and easy for future enhancements with the efficient use of DOM objects, AJAX, JSON and

Java Script. Following is the diagram that depicts the new architecture for Calendar.

SampleData.js

InsertEvent DeleteEvent UpdateEvent

CalendaerServlet

AJAX HttpRequest

CalendarWorker Class

DB Tables,MySql

Figure 5 Refractored Calendar Design

The server side architecture for each plug in module is independent from Chat application. The server side architecture has three main components , Servlet for taking the requests from client and responding back with the data mainly in the form of XML object that is HttpRequest and HttpResponse. The second component is java class where the business logic is written and establishes connection with the database. The last component is the database which stores and retrieves the data from respective database tables.

Server Components for Calendar

Server components for both Calendar and Chat are independent modules. Each module has separate Servlet to process the request from the client side and a java class to process the business logic.

Insert Event Module

In this function, all the entries or specification entered by the user are stored in array objects. The entries are name of the event, group, location and description. Below diagram 6 shows the main page where user creates the event. Once the user enters all the details, then they are carried through AJAX HttpRequest to the local java class. In the java class, as soon as a insert request arrives, an insert event method is called which inserts all the entries into calendar_events table in the MySql databse. The array is broken into individual objects. If the user does not enter any information and tries to save an empty form, an exception is raised telling that it cannot connect to database server and the cause is printed on to the web page.

Figure 6 Calendar Insert Events

Delete Event Module

In this module, already created event is selected from the particular calendar month and when the user right clicks, he can see a delete box and on clicking it, that corresponding event will be deleted from the calendar and the box becomes empty. The moment the user click on delete button, the event array in delete events function will be set to null. Then through AJAX HttpRequest will be called from the servlet to the local delete event method. In this method, the contents are deleted from the calendar_events table based on id .This table was previously updated when insert event method is called.

Below is the diagram that shows the flow of data when a delete method is called or when a user clicks on a delete button.

Servlet Local Class

Delete Event Id Event Method Data D DB B Serv Delete Event C Calendar Business O Event O Table Build XML Logic N N E XML C Object T

Figure 7 Delete Event Method

Update Event Method

In this module, an already created event can be edited or updated if there are changes in the event. For example, the user has created an event for November 21st to collect the last assignments. If he wants to extend the deadline for another three days , then all he has to do is to navigate to a that particular event and right click and choose edit event. Then he can make the appropriate changes and save it. Below is the screen shot in Figure 8 which explains the same. In another diagram Figure 9, the more technical details and flow of the data is shown. When the user requests to update the event, an XML HttpRequest is made from the servlet in Update Event Method and it communicates to a local java class,

Update event method and calls the Calendar_event table to update year, month, hours

,day etc with the identification of the event id. If the database connection exception is raised then it is written in a catch block and the same is printed.

Figure 8 Update Calendar Events

In the below diagram, Update Event method is given parameters to update an event.

Request to Edit Edit Update Event Event local class Calendar Edit Event Info Method in in calendar Events Calendar worker java Table Servlet API

Figure 9 Update Calendar Event

Client Design for Calendar

When the user clicks on the calendar from the web ponder application, then a user interface is loaded. Once the calendar user interface is loaded, the load event function is called to get all the events from the server and load in on to calendar. This is done by

AJAX technology where the user does not feel the time lapses that happen behind the scene.

AJAX call to S Server Side E Create R Events V Dynamic send and E Reply of events R

AJAX call back Updated Function and User interface update or delete event success or failure Message

Figure 10 Client Design for Calendar

In the create event module when a user creates an event by entering the data and

submitting it, CreateEvent function is called which formats the entered data and sends it

to the servlet to write it into database. In this createEvent function XMLHttprequest

object is created to call the servlet asynchronously. Once the server completes the request

, call back function is called to display the create event success message status.

In the delete component when the user submits a request to delete an event, event_id which is unique is passed to the server side to delete the appropriate event in calendar_events table.

The system design of the Chat application will be briefly explained in the following section. I designed this application to be more modular similar to calendar plug in module. I have used a single servlet in which functions for all the events are written, a single java class to bind the data into the message holder table created in MySql database.

In chat.js javascript file, all the front end code is written. Here the user requests are sent from the front end GUI to the Servlet using AJAX request method and the chat windows are built using DOM objects. The messages are exchanged between users using user id that is from and to and when the user is active, the frame color of the chat window changes as per the status. Once the request is made, all the information is communicated through servlet which acts as a middle container between client and the database. This carriage of information is taken care by AJAX Http Request and AJAX Http Response objects.

In the database, the respective functions of a referred event carry out parsing of the actual business logic. For example, if the two users exchange messages, then those messages are inserted into the message holder table by calling setMessage methos in chatworker.java class. These messages are stored in the MySql database table. Its a future enhancement option where the user can see the history of his chat similar to one we see in Gmail chat in their mail.

Chat.js JavaScript

Send AjaxRequest

Chat Servlet that has Functions for each Event

HttpServlet Request

Http Servlet Response

Calls

Chat worker Local class that Binds data to the table by applying Business Logic

Message Holder Table

Figure 11 Technical Design of Chat Application

Server Component Modules for Chat

All the components for chat and calendar are designed separately and hence there is scope for further enhancement for each module separately without much effort. They are integrated only through a common web page given by professor to adhere to the standards of web ponder application which is a MessageCenter.jsp file.

Below is the brief description of each component or event which forms the basic functioning of chat application.

In Chat Worker Get Connection method, the main purpose is to establish the connection between database server and the main application which is nothing but client. Here, the

URL of databse server is defined for database named MySql on the local host with the default port number 3306. A new property file is created namely ChatApp. Properties where any application admin/user can change the credentials as per the environment it is running in.

From this property file, the name of database named “mysql” , db address “127.0.0.1”

,port name “3306” , db username “root” and database name “Project” are extracted and using these credentials and the Jdbc driver, a connection to the database is established.

Db – mysql

Dbaddress- 127.0.0.1 Dbpost -3306 Mysql databse jdbc Dbusernme-root Message Dbpassword-admin holder table Dbname-project

Figure 12 Properties

The jdbc establishes the connection to the database for a user named root with admin or blank “ “ password. This user is the default administrator having full privileges to do anything with the application. If the connection is failed, an exception message is raised.

In the below figure 13, a screen shot for a server interface called Xampp is provided for the better understanding.

Figure 13 XAMPP for Assigning DB Credentials

Get Message Module

In this java class method, after establishing the connection and user’s successful log in into the application, the from user and to users are selected through the query “Select * from messageholder where touser=’” + fromuser +”’ and readstatus=0 order by messageid”. Once the last message read status is set to -1 ,then next message is got

through “messagetime” ,”message” ,”frmuserid” and “messageid”. If the user enters into

next line by hitting new line which is # , then a control character “|” appears in the chat

window.

Select the Update the db table “Fromuser” and with message time, “ToUser” and type message, and message the “Message” id

Figure 14 Update Message Holder Table

If the last message Id is not equal to -1 , then the message holder table is updated with read status is equal to one and with to user id, from user id and last message id. If it fails to find the user, an exception message is raised.

Get User Details and Set Message

After establishing the connection, user profiles are retrieved through the sequential query

“Select username from userprofiles where username <> ‘ “ + fromuser + “ ‘” and user names , “|” , “\” are used to navigate in the chat user with help of JSON technique. Once the messages are collected, they are inserted into message holder table in set message method. In the below Figure 15, a piece of code for set message is captured from Net

Beans IDE and the query “insert into messageholder (fromuser, touser,message) values (‘

“ + fromuser + “ ’, ’” + touser + “ ‘,’ “ + message + “ ‘)”; is executed to bind the chat messages into the database table.

In both the modules, a file path “docroot \\ ChatApp \\src \\ conf\\ ChatApp.properties” path sets the path for the properties file where all the credentials for database connection

32 as admin are established. So any changes to the settings can be made only in here without repeating in multiple places.

Figure 15 Get and Set Message

Client Design Module for Chat Application

The client flows start with the user interacting with GUI to click on the chat application.

The client design has the following components: get user details, do get, do post, persist message and persist servlet as shown in the Figure 16. They interact with the server through AJAX interface.

Get Message Method

Get user S Details E Chat method AJAX Applicat R Call DB ion To V E GUI Servlet Persist R Message method

Do Post Method

Figure 16 Client Design for Chat

E AJAX Call to server Chat R Side to fetch Messages Application V E R

Message AJAX call back Inbox function

Figure 17 Web Ponder Chat

Get message is the first module that will be called inside the servlet through

HttpServletRequest and HttpServletResponse and the parameter “fromuser” is passed to the java class to get the respective user. After this, get User Details will be called to get the user details and in Persist Message module, msg, from user id, to user id are passed as a parameters to the local class.

Do Post method handles the HTTP POST method and parameters like servlet request, servlet response and servlet exception are raised if a servlet specific errors occur and it throws an IO exception if an input/output error occurs.

Below are the two screen shots to show hoe the chat GUI looks like when two users are chatting with each other, eyan and Guest. The moment eyan starts to search for Guest and he types G, Guest name appears similar to Google web page.

Figure 18 Chat Window for User 1 Eyan

Figure 19 Chat Windows for User 2 Guest

One of the main GUI interface that hints the user as from which user he is getting

message, as soon as the message is entered, the sending user name appears in the chatting

tab. For example, in the above Figure 18 and Figure 19, when the user eyan sends a

message to user Guest, in Guest’s window, it appears that “Message from eyan” which can be seen on the top window to Figure 19. So if Guest user is chatting with multiple users, then it will be easy for him to figure out from whom he received the message.

This way, one user can chat with multiple users and get intimation when he gets reply

back from each user. This facility makes user to avoid mangling of multiple messages.

Data Tier Design

The following is the design of the Chat and Calendar database. The Chat application consists of one table called message holder and shares a table called user profiles with both message center application as well as Calendar application. The user profiles stores the information such as username, password, name etc. The message holder table has information like Chat user name, from user list, to user list, admin credentials and so on.

Below is the schema for both calendar and chat.

User Profiles Message holder

User id Messge id

Username From user name

Password To user name

name Message

Figure 20 Data Tier

Chapter 6

IMPLEMENTATION

Creating HttpRequest Object

XMLHttPRequest object has to be created to request the server for information through

AJAX call. In the below code, a function is created called sendAjaxRequest() for

Internet explorer ,firefox and so on. function sendAjaxRequest() { var params="fromuser="+fromuserid; params=params+"&operation=3"; url="ChatServlet"; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp.onreadystatechange=parseResponse; xmlhttp.open("POST",url,true); xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8"); xmlhttp.send(params); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.onreadystatechange=parseResponse; xmlhttp.open("GET",url,true); xmlhttp.send(); } }

Insert Message Module

In the below function, insert message into message holder table is implemented. The function getMessage() is called from the front end GUI where the chat messages are inserted. The below code processes requests for both HTTP GET and POST methods and throes an IO Exception if an error occurs. protected void getMessage(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8"); PrintWriter out = response.getWriter(); Properties prop = new Properties(); String fromuser = ""; HttpSession session = request.getSession(true); if ((String) session.getAttribute("USER") != null) { fromuser = session.getAttribute("USER").toString(); } if (fromuser.equals("")) { fromuser = request.getParameter("fromuser"); } ChatWorker chatWorker = new ChatWorker(); try { String json = chatWorker.getMessage(fromuser); out.print(json); out.close(); } catch (Exception e) { out.print(e.getMessage()); out.close(); } }

Below is the local class that has been called after this servlet function which fetches the appropriate queried data. public String getMessage(String fromuser) { String json = ""; try {

Connection con = getConnection(); Statement stmt = (Statement) con.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE, ResultSet.CONCUR_READ_ONLY);

String sql = "select * from messageholder where touser='"+ fromuser + "' and readstatus=0 order by messageid"; ResultSet rs = stmt.executeQuery(sql); int lastMessageId = -1; while (rs.next()) { String msgdate = rs.getString("messagetime"); String message = rs.getString("message"); String from = rs.getString("fromuser"); lastMessageId = rs.getInt("messageid"); if(rs.getString("messagetype").equals("file")) { json = json + "#" + from + "|" + msgdate + "|" + " You have got a file,
Please download it
" +"" + message + ""; } else { json = json + "#" + from + "|" + msgdate + "|" + message; } } rs.close(); if (lastMessageId != -1) { sql = "update messageholder set readstatus=1 where touser='" + fromuser + "' and messageid <= " + lastMessageId; stmt = (Statement) con.createStatement(); stmt.executeUpdate(sql);

} con.close(); } catch (Exception e) { } return json; }

jsonUsers = jsonUsers + user + "|";

} rs.close(); con.close(); jsonUsers = jsonUsers + "\"}"; } catch (Exception e) { e.printStackTrace(); } } catch (Exception e) { e.printStackTrace(); } return jsonUsers; }

The below code shows the interaction of FTP that is sending the file between two chat users and the Ajax request is sent through the main Chat.js. function ftpFile(userid) { params="fromuser="+fromuserid+"&operation=4"; url="ChatServlet" xmlHttpFile.open("POST",url,true); xmlHttpFile.setRequestHeader("Content-Type", "multipart/form-data"); xmlHttpFile.send(params); }

In the below code, getcalendarData() function is invoked from sampledata.js javascript file that belongs to calendar application. function getCalendarData() {

var d = new Array(); var events = new Array();

xmlreq = newXMLHttpRequest(); //alert(xmlreq); if(xmlreq==null) { alert("Your browser does not support AJAX!!"); } var url = "CalendarServlet";

// var url = "EventsFetcherServ"; // alert(url); xmlreq.onreadystatechange = function(){ }; xmlreq.open("POST", url, false); xmlreq.setRequestHeader('Content-Type', 'application/x- www-form-urlencoded'); xmlreq.send("operation=4"); if(xmlreq.readyState==4){ var xmlDoc = xmlreq.responseXML; var xmlDataSet = xmlDoc.getElementsByTagName("row"); var events = new Array(); for(i=0;i

var e_hours = xmlDataSet[i].getElementsByTagName("e_hours")[0].childNodes [0].nodeValue; var e_mins = xmlDataSet[i].getElementsByTagName("e_mins")[0].childNodes[ 0].nodeValue; var e_day = xmlDataSet[i].getElementsByTagName("e_days")[0].childNodes[ 0].nodeValue; var allday = xmlDataSet[i].getElementsByTagName("allday")[0].childNodes[ 0].nodeValue; month = month - 1; events.push(createEvent(name, id, location,createDateTime(year,month,s_day,s_hours, s_mins, 0), createDateTime(year, month,e_day, e_hours, e_mins, 0), desc));

} //end of second for loop

Once this function is invoked, a ‘calendarServlet’ is called from this function through

Ajax Request. In the calendar servlet, function for each event is written separately and these events are called in ‘calendarworker’ java class.

private void deleteEvents(HttpServletRequest request, HttpServletResponse response) throws ServletException, SQLException { try { String EventsArray = ""; if (request.getParameter("EventsArray") != null) { EventsArray = request.getParameter("EventsArray"); } System.out.println("In Delete EventsServ: Events Array= " + EventsArray); ArrayList EveArray = new ArrayList(); StringTokenizer tokens = new StringTokenizer(EventsArray, ","); while (tokens.hasMoreTokens()) { EveArray.add(tokens.nextElement());

} Iterator it = EveArray.iterator(); Object id = it.next(); Object eventName = it.next();

CalendarWorker ie = new CalendarWorker(); ie.setEventsDeleter(id.toString(), eventName.toString()); ie.deleteEveMethod(); } catch (Exception e) Below is the code for java class for the above servlet that’s been called to implement the business logic for delete event.

public void deleteEveMethod() { java.sql.Connection conn = null; try { conn = getConnection(); Statement s = (Statement) conn.createStatement(); s.executeUpdate("delete from calendar_events where event_id='" + this.id + "'"); System.out.println("Database connection established...... ");

} catch (Exception e) { System.err.println("Cannot connect to database server"); System.err.println("Caught Exception" + e.getMessage()); System.err.println("Caught Exception" + e.getCause()); System.err.println("Caught Exception" + e.getStackTrace()); } finally { if (conn != null) { try { conn.close(); System.out.println("Database connection terminated"); } catch (Exception e) { /* ignore close errors */ } }

Chapter 7

CONCLUSION

In this project, we have seen that two plug-ins developed Chat and Calendar application help when integrated with the web Ponder application will enable the registered users to communicate via exchanging messages and sharing files. Calendar helps in scheduling and organizing the events. The chat application accomplishes the goal of having a dynamic messaging center that works across different browsers like Fire fox and Internet

Explorer.

The Ajax Technology is used extensively in the project which makes the User Interface more dynamic.

In this project , I have learnt a great deal of work by learning new technologies like Ajax,

Java script , DOM objects etc. and how they can be integrated together to make a user friendly application. In the Calendar project, initially we had each separate servlet created to handle each event and a separate java class corresponding to that servlet event. when I tried to make this application more modular , by combining all the events in separate servlet into a single servlet and all the separate java classes into a single java class , I learnt how important it is to design the application in a more modularize way which gives the room for future enhancements without much hassle.

As a conclusion, we could say that this project has accomplished implementing the necessary requirements to enable web ponder users to communicate among themselves

45 and organize events through calendar. There is great scope for future enhancements like implementing voice chat in Chat application and so on.

BIBLIOGRAPHY

[1]ARPANET Wikipedia, [Online]

Available:http://en.wikipedia.org/wiki/ARPANET

[2] Web Chat, [Online]

Available:http://en.wikipedia.org/wiki/Web_chat

[3]Wayback Machine Archive: Yahoo Web Chat Listings, [Online]

Available:http://www.archive.org/about/faqs.php

[4] Rebecca Riordan , Head First AJAX - O'Reilly (2008)

[5] By Erci Jendrock, Ian Evans,C Srivathsa,Devika G, Kim Hasse,

The Java EE 6 Tutorial: Basic Concepts (4th Edition)

[6] Ralph Whitebeck, JQuery, [Online]

Available: http://blog.jquery.com/

[7] Jesse Skinner, Simplify AJAX development with jQuery, [Online]

Available: http://www.ibm.com/developerworks/library/x-ajaxjquery.html

[8] JavaScript Wikipedia, [Online]

Available: http://en.wikipedia.org/wiki/JavaScript