DEVELOPING MESSAGE CENTER AND CALENDAR PLUG-INS USING AJAX
PROGRAMMING
Swetha Raghavendra
B.E, Visveswaraiah Technological University, Karnataka, India, 2007
PROJECT
Submitted in partial satisfaction of
the requirements for the degree of
MASTER OF SCIENCE
in
COMPUTER SCIENCE
at
CALIFORNIA STATE UNIVERSITY, SACRAMENTO
SPRING
2010
DEVELOPING MESSAGE CENTER AND CALENDAR PLUG-INS USING AJAX
PROGRAMMING
A Project
by
Swetha Raghavendra
Approved by:
__________________________________, Committee Chair
Dr. Jinsong Ouyang
__________________________________, Second Reader
Dr. Ying Jin
____________________________
Date
ii
Student: Swetha Raghavendra
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
Dr. Cui Zhang
Department of Computer Science
iii
________________
Date
Abstract
of
DEVELOPING MESSAGE CENTER AND CALENDAR PLUG-INS USING AJAX
PROGRAMMING
by
Swetha Raghavendra
Today there are several ways in which the students and the professors
communicate. Some of them are emails, instant messages, blogs, groups, etc. This project
involves developing a message center and calendar plug-ins for Professor’s website. The
message center plug-in is more like a social networking application rather than having an
old style of communication where students and professor use emails. The message center
allows one-to-one communication and group communication. The calendar also known
as event scheduler allows professor to track and schedule and track events such as
assignment deadlines, exam dates, etc. The message center and the calendar work
together as one communication system.
The calendar and message center plug-in are developed using AJAX. AJAX is a
new technique for creating better, faster and more interactive web applications. All these
applications can be used without reloading the web page. This application will help
iv
professor and students to communicate in an efficient and convenient way. The message
center allows students to communicate with other students who are enrolled in the same
course. The event scheduler is also developed using AJAX. The event scheduler allows
the professor to create and manage calendar events in an easy and convenient way. The
event scheduler is dynamic and a lightweight application.
_______________________, Committee Chair
Dr. Jinsong Ouyang
_______________________
Date
v
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 Prof. Ying Jin for agreeing to be my second reader.
My special thanks to my friends Naghman Mohammed and Deepak Gujjar for
helping me with their ideas and by reviewing my project report. I would also like to thank
my roommates and all my friends who have been there for me throughout this graduate
program at California State University Sacramento.
Last but not the least I would like to thank my parents Raghavendra Manniyappa
and Lakshmi Raghavendra, my sister Shruthi Shankar, my brother Pavan Raghavendra
and my brother-in-law Ravi Shankar for their unconditional love. They have always
motivated me and are the sole reasons for me to have come this far in life
vi
TABLE OF CONTENTS
Page
Acknowledgments.............................................................................................................. vi
List of Figures ..................................................................................................................... x
Chapter
1
INTRODUCTION ........................................................................................................ 1
2
BACKGROUND ...........................................................................................................4
Purpose and Scope .......................................................................................................6
Overview ......................................................................................................................7
3
TECHNOLOGY SURVEY ...........................................................................................8
AJAX (Asynchronous Javascript and XML) ..............................................................9
Java Servlets................................................................................................................9
Life Cycle of a Servlet .....................................................................................10
MySQL 5.0 ...............................................................................................................10
Key Features ....................................................................................................11
JavaServer Pages (JSP) ............................................................................................11
jQuery ......................................................................................................................12
Key Features ....................................................................................................12
Javascript..................................................................................................................12
Key Features ....................................................................................................13
4 ARCHITECTURE ........................................................................................................14
Introduction ...............................................................................................................14
vii
Architecture Subsystem ............................................................................................15
Server Side Architecture for Message Center ..................................................15
Server Side Architecture for Calendar .............................................................17
Message Center Client .....................................................................................17
Calendar client .................................................................................................18
Database Architecture ......................................................................................19
5
SYSTEM DESIGN ......................................................................................................20
Server Components ...................................................................................................20
Fetch Message Module ....................................................................................21
Send Message Module .....................................................................................22
Create Group Module ......................................................................................24
Suggestion Module ..........................................................................................24
Load Event .......................................................................................................25
Create Event .....................................................................................................25
Delete Event .....................................................................................................26
Edit Event.........................................................................................................27
Client Design ............................................................................................................27
Fetch Component .............................................................................................28
Send Component ..............................................................................................29
Create Group Component ................................................................................30
Suggestion Module ..........................................................................................31
viii
Group Send Module .........................................................................................32
Client Design for Calendar ..............................................................................33
Data-Tier Design .......................................................................................................34
6
IMPLEMENTATION ..................................................................................................36
7
CONCLUSION ............................................................................................................41
Bibliography ......................................................................................................................43
ix
LIST OF FIGURES
Page
1. Figure 1 Basic Design ........................................................................................... 15
2. Figure 2 Server Subsystem ................................................................................... 16
3. Figure 3 Client Subsystem .................................................................................... 18
4. Figure 4 Server Design ......................................................................................... 21
5. Figure 5 Fetch Message Module ........................................................................... 22
6. Figure 6 Send Message Module ............................................................................ 23
7. Figure 7 Create Group Module ............................................................................. 24
8. Figure 8 Suggestion Module ................................................................................. 24
9. Figure 9 Load Event.............................................................................................. 25
10. Figure 10 Create Event ......................................................................................... 26
11. Figure 11 Delete Event ......................................................................................... 26
12. Figure 12 Edit Event ............................................................................................. 27
13. Figure 13 Client Design ........................................................................................ 28
14. Figure 14 Fetch Component.................................................................................. 28
15. Figure 15 Send Component .................................................................................. 29
16. Figure 16 Create Group Component ..................................................................... 30
17. Figure 17 Suggestion Module ............................................................................... 31
18. Figure 18 Group Send Module ............................................................................. 35
19. Figure 19 Client Design for Calendar ................................................................... 36
20. Figure 20 Database Design ................................................................................... 38
x
1
Chapter 1
INTRODUCTION
A message center is an asynchronous communication center that involves users
communicating via exchange of messages. The message center possesses certain
similarities to the email system [1]. Both the email and message center requires a user to
authenticate to the system and the messages received by the logged in user are displayed
upon successful login. However, the message center differs from the traditional email in
many ways. It provides the same interface to all the users that use the system. It will
allow the professor and the students to communicate in a faster way, as both of them will
be using the same backend system to communicate. A message center is along with an
event scheduler makes the system a complete communication system. Online calendars
and event schedulers are becoming more and more popular. They provide an easy way to
track events, show reminders for events, and integrate the calendar with emails.
As more and more people are moving towards real-time communication, there is a
need for an effective way to communicate for the students and professors because it is
practically not possible to have a professor-student real-time communication like instant
messaging or social networking. Effective communication system between students and
professors can be defined as a system that can be used by both the parties at the same
time or at different times and be able to exchange messages with each other. If the
2
professor-student communication is done using emails provided by any of the service
providers like Google or Yahoo, it is not a professional way of communication. Also, it is
not secure. Emails can easily be hacked these days although the companies are working
towards making them more and more secure. In order to overcome these problems we
need a system that is both secure and professional. Building a message center application
that is within the university network is the most secure way for the students and
professors to communicate. This helps them to protect their information and identity from
the hackers in the outside world. This is also a professional way to communicate, as the
students will be using their ‘.edu’ email addresses rather than their own personal email
addresses.
There is always a need for a good communication medium between the professor
and the students and also between the students themselves. Students registered for the
same course need to communicate and exchange ideas and thoughts. A communication
center such as this will let the students do that. The communication in the form of
messages is the oldest and the most trusted method. There is always a need for one to one
and one-to-many form of communication in an educational system. For example, students
registered for the same course may discuss problems or exchange ideas. Or there could be
a group of students in the same course working on a project and need have a discussion
on a topic. Such cases will require a secure, efficient, fast, and a reliable medium of
communication.
3
As seen today, most of the popular communication systems come bundled with
calendar that provide the users with a capability to schedule events and track them. These
web-based calendars enables users organize their life online by providing features such as
auto reminders, events, holidays, etc. The online calendars and event schedulers are
becoming more and more popular. There are millions of users using the popular calendars
applications like Yahoo Calendar and Google calendar. These calendars are integrated
with their respective email systems. The AJAX driven interfaces of these calendars
enables users to view, add, and drag-and-drop events from one date to another without
having to reload the page. They also provide users with views such as day, week, or
month.
An event scheduler along with a message center can be of immense use to
professors. The professor can use the event scheduler to track deadlines such as
assignment submission date, project deadlines, exam dates, etc. Such an application can
make a professor’s job much easier and provide an efficient tracking system. Today, such
applications are becoming a part of the work life for many professionals. One of the key
reasons to the success of this system is that they are easily accessible via Internet, easy to
use, and manages the events in a person’s life effectively.
4
Chapter 2
BACKGROUND
A web based asynchronous form of communication through exchange of
messages is commonly known as electronic mail or email or e-mail. Email is a method of
digitally exchanging messages. Most commonly, the email works on a store and forward
model where the email server stores, accepts, and forwards messages on behalf of the
users. The users only need to connect to the email infrastructure through the Internet to
retrieve or send messages. The foundation for today's global Internet based e-mail service
was created in the early ARPANET and the standards for encoding were proposed in
RFC 561. Emails in the early days were exchanged using the File Transfer Protocol
(FTP), but today it is carried out using Simple Mail Transfer Protocol (SMTP). This
method of communication has now become very popular and widely accepted.
The web based messaging system has advanced leaps and bounds since its start.
Users are moving towards more dynamic form of message exchange systems. The
traditional email system is transforming into a real-time communication medium for most
of us. Today, the delay in delivering messages from one inbox to the other is negligible.
This real time need has led to many developments in the recent years. With the launch of
social networking sites like facebook and myspace, the email communication has taken a
whole new turn. Users never need to leave the page they are viewing to send or read
messages. The user interfaces have become more user friendly and fast load times has
5
become very critical in such systems. This has led to the use of technologies like AJAX
and HTML 5, which will be discussed later.
Event management and planning has been existent since ancient times. Event
management, planning, and scheduling are a part of every activity such as studies,
wedding, vacation, parties, etc. Event management systems have made tremendous
advances in the past years. Earlier the events were planned on a piece of paper or
traditional calendars. But such systems of event management had a lot of drawbacks.
There was no way of sending reminders about events or deadlines. There was no way in
which a person can schedule an event and share the same data with others without
duplication of effort. Now, all this has moved to the Internet. Web based calendars also
function as event schedulers. With the introduction of such systems, event planning and
scheduling has become as simple as a click of a button. One can use the web-based
calendars to track deadlines for bills, projects, etc. or it can be used to schedule an event
such as a party or an exam and send invitation to many others who can view the event on
the same calendar. The event schedulers on the web can send auto reminders to the user
informing him about the approaching event date or a deadline. The advances in
technologies used to build such applications have enabled users to develop sleek and
robust applications. Today, a web based calendar includes functionalities such as
recurring events, drag-n-drop, grouping events based on a certain criteria, coloring
schemes for easier identification, and much more. Like the web based email applications,
6
these calendars and event schedulers are built using technologies like AJAX, Javascript,
and HTML5.
Purpose and Scope
Having a single interface for communication has a lot of advantages. It becomes a
universal system where users come to communicate with one another. This system is
being developed for professor to communicate with the students and for the students to
communicate with each other as discussed earlier. For a professor an event scheduler or
an event management system is of utmost importance. It lets the professor to track exam
dates, assignment and project deadlines, and other activities. A system is needed that
provides these features. The purpose of this project is to build an application that can
accomplish the above.
The scope of this project is to build a message center that is a more real-time
email system for the professor to communicate with the registered students and a webbased event calendar for the professor to track and manage various events. The
application shall:
1. Allow the professor to communicate with the registered students in his
course.
2. Allow t.he registered students to communicate with each other
3. Allow the professor to send message to a all the registered students using
group communication.
4. Allow the users to see replies to messages in a single, easy to read view.
7
5. Allow the professor to use the event scheduler to add and delete new
events .
6. Provide the professor with different views of the calendar; day, week, and
month.
7. Provide users with an easy to use graphical user interface that is fast,
lightweight, and intuitive.
Overview
The following is a brief overview of the various features available to the users of
the system
1. Send and receive messages with the registered users of the system.
2. Send group messages to a selected users by grouping the users with an
alias.
3. Ability to view replies in a single, easy to read interface.
4. Delete single and multiple messages at a time.
5. Paging of the messages. Showing a limited number of messages at one
time.
6. Add new events to the calendar.
7. Ability to preview event details in a preview window.
8. Delete events from the calendar.
9. Group events based on the category of the .
8
Chapter 3
TECHNOLOGY SURVEY
This chapter will discuss the various technologies that are used in developing the
message center and calendar applications and also gives a brief description on each one
of them to familiarize and understand them better.
The basic architecture of both the applications can be broken down into three
layers and each of these 3 layers uses technologies that will be discussed below.
1. Presentation Layer – This layer is also known as the Graphical User Interface
layer is the topmost layer, which will display all the web pages and elements that
helps the user to interact with the system. This layer is built using technologies
like AJAX, JSP, HTML, and jQuery.
2. Business Layer – This is the middle tier and holds the main logic of the
application. It takes the information provided by the user through the presentation
layer and uses it to communicate with the server to store and retrieve the data.
This layer is also responsible to perform all the database operations such as
adding records, updating tables, deleting records, and fetching data from the
database. This layer is developed using Java Servlets.
3.
Database Layer – The bottom tier in this application consists of the database. The
database used here is MySQL 5.0.
9
AJAX (Asynchronous Javascript and XML)
AJAX [2] is a web development technology used on the client side to develop
interactive web applications. Web applications using AJAX can retrieve data from the
server asynchronously in the background without interfering with the display of the web
page. AJAX brings together the features of Javascript, CSS, and the XMLHttpRequest
object to create a sense of realtime behavior in your web application. The use of AJAX
has led to an increase in web pages that are more interactive and dynamic. AJAX is not a
technology in itself, but a group of technologies. Some of the most popular applications
today using AJAX are Google mail, Google maps, facebook, Yahoo! Mail, and live.com.
Java Servlets
A Servlet is a Java class which conforms to the Java Servlet API which is a
protocol by which a Java class responds to http requests. A software developer may use a
servlet to add dynamic content to a Web server [3] using the Java platform. The
generated data from the servlet can be HTML or XML. Servlets are the java counterparts
to other dynamic web content technologies like CGI and ASP.NET. Servlets uses HTTP
cookies or URL rewriting to maintain state in session variables across server transactions.
The servlet API is contained in the Java package ‘javax.servlet.*’. A servlet is a Java
class and therefore needs to be executed in a Java VM by a service we call a servlet
engine [4].
10
The advantages of using servlets is their fast performance and ease of use
compared to traditional CGI. Unlike CGI, Java servlets create a separate Java thread for
each request within the web server process. This improves the performance considerably.
With servlets there are same number of threads as requests, but there is only one copy of
servlet class created in the memory.
Life Cycle of a Servlet
1. Servlet class is loaded by the web container at start-up.
2. The web container initializes the servlet by calling the init () method.
3.
After initialization the servlet services the client requests. The service () method
is called for each request.
4. Finally the web container calls the destroy () method to take the servlet out of
service.
5. The init () and destroy () are called only once during the servlet life cycle [5].
MySQL 5.0
MySQL is a database management system that is used for mission-critical, heavy
load production systems and delivers a very fast, multi-threaded, multi-user, and robust
[6] SQL (Structured Query Language) database server. The MySQL software is dual
licensed. Users can choose to use the MySQL software as an open source product under
the terms of the GNU General Public License or can purchase a standard commercial
license from Sun Microsystems, Inc.
11
Key Features
1. Multiple storage engines [7], allowing one to choose the one that is most
effective for each table in the application.
2. High performance for variety of workloads.
3. Great documentation.
4. Connectors for C, ODBC, Java, PHP, Perl,.NET etc.
5. Wide range of supported platforms.
6. Great community and commercial support.
JavaServer Pages (JSP)
JavaServer Pages (JSP) technology provides a simplified and a quick way to
create dynamic web content. JSP technology enables rapid development of web-based
applications that are server- and platform-independent.
JSP allows Java code and some pre-defined actions to be interleaved with static
web markup content, with the resulting page being compiled and executed on the server
to deliver a web document. The newest version of JSP is JSP 2.0. This new version
includes features meant to improve programming productivity. The new features include
an expression language that allows programmers to create velocity-style templates [8], a
faster and easier way to display parameter values, and better way to navigate nested
beans.
12
jQuery
jQuery [9] 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 [10]
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 is an object oriented scripting language used to enable programmatic
access to objects within a host environment. It is mainly used in the form of client side
Javascript [11], implemented as part of a web browser, providing enhanced user interface
and dynamic websites. Javascript has become one of the most popular programming
languages on the web.
13
The primary use of Javascript is to embed functions or include them from HTML
pages and interact with the Document Object Model (DOM) of the page. Some examples
of the usage of Javacript are:
1. Opening or popping up a new window with programmatic control over the
size and position of the new window
2. Validation of web form input elements before submitting them to the
server
3. Changing web elements as mouse cursor moves over them, and many
more
Key Features
The key features of Javascript are:
1. Imperative and Structured – Javascript supports all structured programming
syntax.
2. Javascript uses function level scoping instead of block level scoping.
3. Dynamic – Javascript supports dynamic typing of variables, is object based, and
supports run-time evaluation of statements provided as strings.
4. Javascript is functional.
5. Javascript relies on run-time environment (web browser) [12] to provide objects
and methods by which the scripts can interact.
14
Chapter 4
ARCHITECTURE
This chapter provides details about the design of the system 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 Message Center and Calendar is divided into three main parts; the client,
server, and a database. Each of the parts is independent of each other. The interaction
among these parts is provided by the communication interfaces. There is a
communication interface between the client and the server, and between the server and
the database. The systems architecture is a modular one which provides scope for
extensibility in the future. Each of the larger components interacts with each other. These
main components are further internally divided into smaller components that are
independent and do not interact internally. The system architecture and the various
components can be seen in the Figure 1.
15
Figure 1 Basic Design
Architecture Subsystems
As mentioned in the previous section that the system consist of three main
components; the server, client (Message center, Calendar), and a database component.
The following sections describe each of the main components in detail.
Server side architecture for Message Center
The server is responsible for maintaining the database and the server side
modules. The server handles all the communication with the database needed for sending
and receiving the messages to the client. The Fetch Messages module is used to retrieve
all the messages sent to a particular user. This is the first module that is called in the
message center to show as message inbox to the user.
16
Figure 2 Server Subsystem
Create group module is used to create a group name which can contain any
number of usernames to whom the messages has to be sent. Once the group is created the
user can just use the group name to send messages to all the users in the group by just
typing the group name rather than typing each user names. Group Send module: This
module helps in selecting a group name and sending messages to all the users in that
group. Get user names module is used to retrieve all the usernames present in the user
table and is used by the suggestion module to suggest the user while typing the
usernames. Get group name is similar to get user names module which is used to get the
group names for suggestions. Rest of the modules; create event, delete event, update
17
event and load events are for calendar plug-in which are responsible for events update
and creation.
Server Side Architecture for Calendar
Similar to Message center server architecture, for calendar, the server side is
responsible for data handling. Servlets and local classes help in fetching, storing, deleting
and updating events to and from calendar events table. First module which initializes the
calendar is the Upload Events which displays all the events created by the user after the
calendar UI is loaded. Server side modules for both Message Center and Calendar are
shown in the Figure 2.
Message Center Client
The client includes the following modules. The Message center client subsystem
is as shown in Figure 3.
1.
Inbox: Once the user is in the message center system he can view
all the messages he has received.
The inbox shows from
username, messages, message’s subject, date and time. This
module provides visual interface to the user to perform operations
like delete messages, select and deselect messages, view next set of
messages etc.
2.
Send Message Module: This module gives user a lightwindow
interface to send message to a single user or multiple users.
18
3.
Group create: Module to create groups. Takes in usernames and
group name form the user.
4.
Group send: Similar to Send Message module. Used to send
messages to a group.
5.
Suggestion module: This module helps the user to enter usernames
by looking at the suggestions given.
Figure 3 Client Subsystem
Calendar Client
The client side of Calendar plug-in includes the following modules as shown in
Figure 3 .
Load events: This is the initialization module which is called as soon as the calendar UI is
loaded. This loads all the events created and saved by the user.
19
Create events: This module provides an interface to create a new event in the current
month, week or day view. This module also provides user to create a new event for future
dates.
Delete events: This module is used to delete an existing event.
Edit events: Once an event is created, it can be edited by changing its timings or date.
Database Architecture
For Message center, there are three tables used, userprofiles, messageBox and
groupInfo. The table userprofiles is used to store all the user information like user name,
address, email id, full name etc. The table messagebox is used for storing all the
messages sent and received using the WebPonder application. The last table for the
Message center is the groupInfo table containing group information which helps in group
communication.
For Calendar plug-in there is only one table called calendar_events used for
storing events information.
20
Chapter 5
SYSTEM DESIGN
The server is designed in such a way that every module is independent from other
modules. For example, any changes made to the send module will not affect the fetch
module. Server side has three main components, Servlets for taking the requests from the
client and replying back with the data in the form of XML object. Second component is
the Local Class which contains business logic and also acts as database connector. Third
is the Database which contains the data in the form of tables. The Figure 4 below shows
the overall server design. The first component Servlets takes the request from the client
side and calls the appropriate local class to connect to the database and process the
request. Once the request is processed in the local class, data is sent back to the servlet
where xml tags are generated to send it back to the client side.
Server Components
Server components for both Message Center and Calendar are independent
modules. Each modules have a servlet to take the request from the client side and a local
class to process the business logic. The server comprises of the following components as
shown in the Figure 4.
21
Figure 4 Server Design
Fetch Message Module
In fetch message module the request to the servlet is to fetch all the messages of a
particular user, hence the parameter passed to the servlet is the username that the user
enters while logging on to the WebPonder. The servlet calls the fetch local class and
passes the username. Once the username is received from the servlet, fetch message local
class connects to the database and fetches all the messages and related fields like subject
line, from username, date when the message was sent from the database. This data is sent
back to the servlet where xml tags are generated for easy parsing on the client side. The
other important feature of the fetch module is to retrieve the related messages of a
conversation. The flow of Fetch Message Module is as shown in the Figure 5.
22
Figure 5 Fetch Message Module
Send Message Module
In this module the request to the servlet is to send the message to a particular user
or a group. Once the servlet receives the parameter that is the user address to whom the
message needs to be sent and the message, the send local class connects to the database
and stores the message in the “messagebox” table as shown in the Figure 6. If the request
to the servlet is to send a group message then the request parameters should contain the
group name and the message to be sent to a group.
23
Once the send local class receives the group name it resolves the group name into
usernames that a group has and sends the group message to all the users of that group.
The second important feature of this send module is that the message to be sent to a
particular user is not only stored in the messagebox table but also sent to user’s
alternative email address using the SMTP server. This is to give the Webponder user an
alert that he has received a message. The send local class connects to the SMPT server
and sends the message to the alternative email address like yahoomail and gmail.
Figure 6 Send Message Module
24
Create Group Module
Figure 7 Create Group Module
In this module as shown in Figure 7 the servlet receives a request to create
a group name which is used to send a group message. The parameters passed to the
servlet along with create a group request is the group name and list of usernames. Once
these parameters are retrieved from the servlet the createGroup local class creates a group
by storing this information in the group table.
Suggestion Module
Figure 8 Suggestion Module
25
This module is to achieve the dynamic feature of retrieving usernames to suggest
the user while typing in the “to” address bar. Once the servlet gets this request, it calls the
getUserName local class to retrieve all the usernames from the userprofile table. This list
of username is sent back to the servlet and back to client side as shown in the Figure 8.
Load Event
Figure 9 Load Event
This Load Event module on the server side is called using the AJAX
xmlHttpRequest object to give the dynamic feature to the front end. The servlet receives
no parameters as all the events have to be retrieved and sent back to the client side. The
local class shown in the Figure 9 connects to the database and retrieves all the events
from the calendar_events table. This data received from the local class is converted into
XML object to send it to the call back functions on the client side.
Create Event
For creating an event, the createEventServ receives all the parameters from the
client side through an AJAX call as shown in the Figure 10. This data is sent to the
26
createEvent local class which connects to the database and adds the new event into the
database.
Figure 10 Create Event
Delete Event
Figure 11 Delete Event
For deleting an event, the servlet deleteEventServ receives event id from the
client side as shown in the Figure 11. This event id is passed to the deleteEvent local
class which updates the database to remove the requested event.
27
Edit Event
In this module as shown in the Figure 12 the server editEventServ is given the
parameters to edit and update an event. These parameters are passed on to the editEvent
local class which will update the database.
Figure 12 Edit Event
Client Design
The client flow starts with the user interacting with the GUI to click on the
Message Center. The client design has the following components: Fetch, Send, Create
Group, Group Send, Suggestion as shown in the Figure 13. They interact with the server
through the AJAX interface.
28
Figure 13 Client Design
Fetch Component
Figure 14 Fetch Component
29
This is the first module that will be called for Message center which displays the
Inbox to view the messages of a user. From the WebPonder the MessageCenter gets the
username and passes it on to the server side through the AJAX interface. Once the server
is ready with the data which is in the XML form, the AJAX callback function parses the
xml tags and populates the html tags to display the messages on the front end in the form
of Message Inbox. Figure 14 shows the Fetch Component flow.
Send Component
Figure 15 Send Component
Send component’s work flow is similar to the fetch component and is shown in
the Figure 15. The AJAX module dynamically calls the server side to fetch the usernames
30
for suggesting usernames on the "send message" UI. Once the username is selected, it is
passed to the server along with other parameters that is subject and message body.
Create Group component
Figure 16 Create Group Component
Create group component is used to create user groups to send out group messages.
User has to provide group name and list of usernames to create a group as shown in
Figure 16. AJAX call is made to get the username suggestions to create a group. Once
group name and list of usernames are provided, it is sent to the server side to create and
store the group information in the database. This group name can be immediately used to
send out group messages.
31
Suggestion Module
Figure 17 Suggestion Module
Suggestion Module as shown in Figure 17 is used to give suggestions to select a
username. This small module is used in send, create group and send group modules to get
the usernames and group names from the table for suggestions. This suggestion functions
is invoked on the key up event. Every time a user presses a key to enter a character,
AJAX function is called which calls the server side function to retrieve all the usernames.
Once the username list is sent back to the AJAX call back function, the list is filtered
according to the character entered by the user on the front end and suggestion list is sent
back to the front end page to be displayed.
32
Group Send Module:
Figure 18 Group Send Module
Group Send Module is used to send a message to a particular group. The flow is
as shown in the Figure 18 .To send a group message, a user has to provide group name,
subject and message body. Again as mentioned in the send module, suggestion module is
used to get the group name suggestions. Once the group name is selected; group name,
subject and message body parameters are sent to the server side to send a group message.
33
Client Design for Calendar
Figure 19 Client Design for Calendar
The client design for the calendar can be divided into three main components as
shown in the Figure 19.
First component is where the calendar UI is loaded. Once the calendar UI is
loaded the load event function is called to get all the events from the server side and load
in on to the calendar. This flow of loading the events is invisible to the user which is
achieved by the AJAX technology.
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
34
to the servlet to write it into the DB. 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.
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 row in the
calendar_events table.
Data-Tier Design
The following is the design of the Message Center database. The Message Center
database consists of three tables as shown in the Figure 20; Usersprofiles, Messagebox,
and Group. The Userprofiles stores the information about the registered user such as
username, password, name, email address etc. The Messagebox table has information like
messages, from username, to username, date when the message was sent. The group table
stores details of the group created. Below is the database schema for the Message Center
database.
35
Figure 20 Database Design
36
Chapter 6
IMPLEMENTATION
Creating HttpRequestObject
XMLHTTPRequestObject has to be created to make an AJAX call. The below
function creates XMLHTTPRequestObject for non Microsoft browsers and later versions
of Internet Explorer. It will not be created if it is older versions of Internet Explorer.
function newXMLHttpRequest() {
var xmlreq = false;
if (window.XMLHttpRequest)
{
xmlreq = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
try {
xmlreq = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e1)
{
// Failed to create required ActiveXObject
try
{
// Try version supported by older versions of
Internet Explorer
xmlreq = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e2)
{
// Unable to create an XMLHttpRequest with
ActiveX
}
}
}
return xmlreq;
}
37
Fetch Message Module:
The below functions and code snippets show how Fetch Message module is
implemented.
This function getMessages() is called from the front end UI to view the Message
Inbox. It calls the above Function newXMLHttpRequest()to create
XMLHttpRequestObject. Next step of this functions is to set the call back function to be
called when the servlet's state changes., this is done by xmlreq.onreadystatechange=
stateChanged. After this the servlet is called asynchronously by passing "true" as third
argument to the xmlreq.open("POST", url, true)function.
function getMessages()
{
xmlreq = newXMLHttpRequest();
if(xmlreq==null)
{
alert("Your browser does not support AJAX!!");
}
var url = "fetchServ";
xmlreq.onreadystatechange= stateChanged;
xmlreq.open("POST", url, true);
xmlreq.send(null);
.
.
}
Below is snippet of servlet which is called using XMLHTTPRequestObject from
the “getMessages” function. Here the servlet gets the username through the session
variable which is set in the Webponder and sends it to the local class by calling the
constructor of the local class.
38
HttpSession session = request.getSession();
String username = (String)
session.getAttribute("username");
FetchMessage fm = new FetchMessage(username);
.
Local class which connects and queries the database to get the requested data
from the tables.
String url = "jdbc:mysql://localhost/project";
Class.forName ("com.mysql.jdbc.Driver").newInstance
();
conn = DriverManager.getConnection (url,
"root","admin");
Statement s = conn.createStatement ();
System.out.println ("Database connection
established");
s.executeQuery ("SELECT from_username, message,
subject, group_name, date,FROM
messagebox where
to_username='"+this.username+"'
or group_name in(select groupName from groupTable
where usernames like
'%"+this.username+"%');");
ResultSet rs = s.getResultSet ();
while (rs.next ())
{
MessageList.add(rs.getString ("message_id"));
MessageList.add(rs.getString ("from_username"));
MessageList.add(rs.getString ("subject"));
MessageList.add(rs.getString ("message"));
MessageList.add(rs.getString ("flag"));
MessageList.add(rs.getString ("date"));
MessageList.add(rs.getString ("group_name"));
}
Once servlet receives data from the local class, it generates XML tags as shown
response.setContentType("text/xml");
PrintWriter out = response.getWriter();
39
out.write("<?xml version='1.0' encoding='ISO-8859-1'?>");
out.write("<Messages>");
for(Iterator<String> it = MessageList.iterator();
it.hasNext();)
{
out.write("<row>");
out.write("<from>"+ it.next() +"</from>");
out.write("_{"+it.next()+"}");
out.write("<message>" + it.next() + "</message>");
out.write("<date>"+it.next()+"</date>");
out.write("<groupName>"+it.next()+"</groupName>");
out.write("</row>");
}
out.write("</Messages>");
As mentioned above the call back function shown below is called once the
servlet's state changes. There are four different servlet states. The function below is
executed when the servlet's state is equal to 4 which represents that servlet is ready with
the response. Once the server responds without the xml object, the call back function
populates html tags and uses searchresults.innerHTML to upload the html tags on the
main front end page.
function stateChanged()
{
if(xmlreq.readyState==4)
{
var searchresults =
document.getElementById("squicksearch");
var list1 = '<h2 align="center">Message
Center</h2>' + '<BR><br>';
var xmlDoc = xmlreq.responseXML;
var XMLDataSet =
xmlDoc.getElementsByTagName("row");
formstring += '<table><tr>';
40
formstring += '<td><input type="button"
value="Inbox" name="Inbox" class="inputsubmit"
onClick="javascript:stateChanged()"/></td>';
formstring += '<td><input type="button"
value="Compose" name="Compose" class="inputsubmit"
onClick="javascript:lightwindow()"/></td>';
formstring += '<td><input type="submit"
value="Delete" name="Delete" class="inputsubmit"
onClick="javascript:deleteMessages(checkForm)"/></td>';
formstring += '<td><input type="button"
value="Back" name="Back" class="inputsubmit"
onClick="javascript:back(checkForm)"/></td>';
formstring += '<td><input type="button"
value="Next" name="Next" class="inputsubmit"
onClick="javascript:next(checkForm)"/></td>';
var MesgId =
XMLDataSet[i].getElementsByTagName("messageId")[0].chi
ldNodes[0].nodeVa
lue;
var from =
XMLDataSet[i].getElementsByTagName("from")[0].childNod
es[0].nodeValue;
.
.
formstring += '</tr></table> ';
formstring+='</form> </div>';
searchresults.innerHTML = list1 + formstring;
}
}
41
Chapter 7
CONCLUSION
In this project we have seen that two plug-ins, the message center and calendar,
help the Webponder's users to easily communicate with the other registered users and
allows the professor to easily manage his scheduled events using the calendar. The
message center allows the user to communicate efficiently with other registered users via
exchange of messages. The message center accomplishes the goal of having a dynamic
communication center that works seamlessly across different platforms and browsers.
The calendar allows the professor to create, delete, and edit events and also schedule
events such as meetings, exams, etc. from within the Webponder application. The use of
AJAX in developing these two plug-ins have made them more dynamic in nature where
the user does not have to leave the current page when performing certain action.
This project has helped me understand the development of a web based client
server system. I also got an opportunity to learn new technologies such as Ajax, jquery,
and javascript and how they are used in today's world to develop dynamic web
applications.
As a conclusion to this project report, we can say that this project has
accomplished its primary goals as discussed in the scope section of Chapter 2. The main
reason for creating these plug gins is to allow the registered users of Webponder to
42
communicate and use calendar within the application while using the other features of the
application.
43
BIBLIOGRAPHY
[1] Noel Morris (Feb 2001), The History of electronic mail, [Online]
Available: http://www.multicians.org/thvv/mail-history.html
[2] Bruce Eckel (June 2007), How and Why AJAX, Not Java, Became the Favored
Technology for Rich Internet Application, [Online]
Available: http://ajax.sys-con.com/node/333329
[3] Jesse James Garrett (Feb 2005), AJAX: A New Approach to Web Applications,
[Online] Available: http://www.adaptivepath.com/ideas/essays/archives/000385.php
[4] Hans Bergsten, An Introduction to Java Servlets, [Online].
Available: http://www.webdevelopersjournal.com/articles/intro_to_servlets.html
[5] Stephanie Bodoff, Java Servlet Technology, [Online]
Available: http://java.sun.com/j2ee/tutorial/1_3-fcs/doc/Servlets.html
[6] MySQL 5.0 Reference Manual, General Information, [Online].
Available: http://dev.mysql.com/doc/refman/5.0/en/introduction.html
[7] Peter Zaitsev, MySQL: New Features in version 4.1, 5.0, 5.1, [Online]
Available:http://www.mysqlperformanceblog.com/files/presentations/OpenSourceForum
2005-NewFeaturesinMySQL.pdf
[8] Pierre Delisle, JavaServer Pages Standard Tag Library, [Online]
Available: http://www.ida.liu.se/~TDDI48/jstl-1_1-mr2-spec.pdf
[9] Ralph Whitebeck, JQuery [Online]
44
Available: http://blog.jquery.com/
[10] Jesse Skinner, Simplify AJAX development with jQuery, [Online]
Available: http://www.ibm.com/developerworks/library/x-ajaxjquery.html
[11] JavaScript, [Online]
Available: https://developer.mozilla.org/en/JavaScript
[12] W3School, JavaScript Introduction, [Online]
Available: http://www.w3schools.com/js/js_intro.asp
[13] Michael Morrison, Head First JavaScript, O'Reilly Media , 2007
[14] Larry E. Ullman, Building a Web Site with AJAX: Visual QuickProject Guide,
Peachpit Press, 2007
[15] Steve Holzner, Java2 Black Book, Paraglyph Press, 2001