A Java Enterprise Application -- Online Real-time Classroom

The Florida State University College of Arts and ScienceA Java Enterprise Application -- Online Real-time Classroom By Yilei Wang September, 2001 A master project submitted to the Depart

The Florida State University College of Arts and Science

A Java Enterprise Application Online Real-time Classroom

By Yilei Wang

September, 2001

A master project submitted to the

Department of Computer Science

In partial fulfillment of the requirements for the

Degree of Master of Science

Major Professor: Dr Robert A van Engelen

Dr Robert A van Engelen Major Professor

Dr D Schwartz Committee Member

Dr Hilbert Levitz Committee Member

In this project, I designed an online real-time classroom with client-server applicationmodel, and used Enterprise Java Technologies including Applet, Swing, JSP, JavaScript,RMI, JDBC, JNDI, etc plus Java Sound package to implement it

This live instructor-led classroom website allows users to manager their own accounts,schedule a class, view their classes as well as starting a class on the Internet The onlineclassroom provides real-time voice, text and multimedia communications in a sharedworkspace, and delivers a classroom experience that accelerates learning

This application is mainly composed of two parts: class management and real-timeclassroom For the first part, I generated Java Server Pages to present HTML response tothe client requests in the web tier, while using JDBC to create connection with thedatabase and store information into tables in the database tier

For the real-time classroom, three features are provided to allow communicationsbetween teachers and students: shared files, a voice room, and a chat room Two serversare started up upon the teacher’s request at a remote machine to provide these services.Java sockets and RMI are applied between the clients and the servers

1.2 Enterprise Java Technologies

2 Online Real-time Classroom Overview

2.1 Functions of Class Management Part2.2 Functions of Classroom Part

1 Implementation Details

2.3 Class Management Part Implementation2.3.1 Web Tier – JSPs and Servlets2.3.2 Database Design

2.4 Classroom Part Implementation

2.4.1 More JSPs and Tables

2.4.2 Voice Room

2.4.2.1 Java Sound API2.4.2.2 Server SoundSer2.4.3 Chat Room

A wide range of technological options are available to the distance educator They fallinto four major categories:

Voice - Instructional audio tools include the interactive technologies of telephone,

audioconferencing, and short-wave radio

Video - Instructional video tools include still images such as slides, pre-produced moving

images (e.g., film, videotape), and real-time moving images combined withaudioconferencing (one-way or two-way video with two-way audio)

Data - Computers send and receive information electronically For this reason, the term

"data" is used to describe this broad category of instructional tools Teaching strategiesbased on computer applications are emerging that are more effective

2.5.2 Web-based Education System

The WWW and Web browsers have made the Internet a more user-friendly environment,and provide Internet users with a uniform and convenient means of accessing the widevariety of resources (pictures, text, data, sound, video) available on the Internet Theability to integrate graphics, text, and sound into a single tool means that novice users donot have to struggle with such a steep learning curve

2.5.3 Online Classroom

However, for most teachers and students, web-based education still equals to visitingclass homepages, submitting homework through e-mails This situation stimulated me tothink about designing and building interactive classrooms for teaching distant learnersusing various technologies, which allow teachers and learners to interact over a variety oftelecommunications networks in a cost-effective manner

A typical online classroom should allow a teacher to:

• Teach a class entirely online

• Effectively manage students through an easy to use, unit-based framework

• Post class notes, presentations

• Administer online assessments

• Interact easily with your students

2.6 Enterprise Java Technologies

Java is steadily becoming the language of choice for new enterprise-wide developmentproject, because it is portable and the standards defined by the enterprise Javatechnologies reduce education cost

Currently the main technologies being adopted by enterprise developers include JDBCfor database connectivity, the Java Naming and Directory Interface (JNDI) for accessingservices, and RMI for Java remote method invocation and distributed objects On top ofthis foundation are Servlets, JavaServer Pages, Enterprise Java Beans, Java MessagingService, and Transaction management All of these combine into a feature-rich tool kitfor developing Java applications

Creating an enterprise application involves combining these technologies to create acomplete solution to one’s business problems The following are those technologies Idecided to apply into my project

• JDBC - The standard API for accessing relational data from a Java program.

• Servlets – Servlets replace CGI I providing server-side processing for HTTP

requests Servlets can extend dynamic Web pages using server-side includes orJSPs Servlets can be used to form a gateway between Web Clients and otherservices such as databases, Enterprise JavaBeans, and JMS

• JavaServer Pages – JSPs are used to create dynamic Web pages using Java as a

scripting language JSPs are primarily used in situations in which a Web pagechanges with each request

• RMI and distributed objects – Many applications and libraries use RMI to form

their network connections Other applications may rely on raw sockets or HTTPconnections to interact with servlets and Web Server The goal of RMI is toprovide a transparent link between two Java applications

• JNDI – The standard API for accessing information in enterprise name and

directory services

3 Online Real-time Classroom Overview

This application is composed of two portions: class management and real-time classroom

2.7 Functions of Class Management Part

This part is designed especially for teachers to manage their classes, such as scheduling a class, viewing their own classes, and updating the class information

The following diagram displays the relationship between these web pages There are fourfunction chains: register, schedule a class, view classes, and enter the classroom, whichare shown in different line styles

Student Enter Classroom

• Schedule a Class

It takes several steps to schedule a class On the first page, the teacher needs to specify adate/time and a length of this class, as well as its subject and a brief description Thetime must be in the future, otherwise an error message would be displayed Then on thenext page, a list of students’ contact information is supposed to be added, includingstudents’ name, email address, and phone number Finally, a scheduled class summary isshown, which also contains a pin number for every student The pin number is supposed

to be handed out by the teacher to each student, and later used by the student to enter thisclassroom The instructor can then choose to cancel or really schedule this class

• View Classes

A teacher can view his upcoming classes as well as past classes at any time For pastclasses, only instructor name, date/time, and subject are provided, while one can viewmuch more details of upcoming classes, and update the class information by clicking aquestion mark icon in the same row The instructor is allowed to change the class length,subject, and description at the next page, even add or drop students if he feels like doing

so There is always a door icon on each of these pages for the teacher to enter hisclassroom He is encouraged to enter his classroom and make some preparations such asuploading a PowerPoint file before starting this class

2.8 Functions of Classroom Part

The classroom implements three features to allow communications between teachers and students: shared documents, a voice room, and a chat room See figure 2

• Shared Documents

Before class, the instructor is encouraged to upload files from the local machine to theremote server Files could be *.txt, *.doc, *.ppt, *.bmp, or other kinds of files forpresentation in a class time All the uploaded file names are displayed in a list at thebottom right frame When you highlight one of these files, and click “Open”, this filewould be displayed in the left big frame

Before the teacher starts entering the voice room and the chat room, he should first click

a button “Start Class” at the upper right corner of the web page This will start up tworemote servers for the purpose of supporting the voice room and the chat room

Policy.url.3 = http://sirah.csit.fsu.edu:8270/learning/talk/applet.policy

appended to file <java.security> under path:

C:/Program Files/JavaSoft/jre/lib/scurity/

Applet.policy is a policy file placed by me at the remote server, which is sirah.csit.fsu.edu

I am currently using After entering the voice room, i.e starting the applet, the instructclicks the “talk” button to speak, later click the “stop” button to end speaking

• Chat Room

The chat room is used for all teacher and students to communicate with each other bytyping texts Simply type a sentence into “send message” text field, and hit Enter key, thetext would appear in the upper pane, seen by all other people

The teacher should always click “End Class” button at the upper right corner beforeexiting the classroom This will allow other teachers to start a class

Figure 2 Real-time Classroom Interface

The student’s classroom interface is almost the same as the teacher’s, except that hedoesn’t have the right to start or end a class, and he is only able to listen to the teacher’sspeech.

4 Implementation Details

2.9 Class Management Part Implementation

2.9.1 Web Tier – JSPs and Servlets

It was decided to generally use JSPs rather than servlets to implement the web tier.Servlets are not very suitable here, because in this case the web tier is permitted tochange constantly, and this would require that we compile the program into byte codeevery time a change is made Besides, a bunch of dynamic html web pages are generatedupon users’ request, which makes servlets awkward to read Therefore it is not easy tomaintain a web site by using servlets

In the previous chapter, I pointed out that the main task of Class Management portion can

be divided into three parts: (1) register, (2) schedule a class, and (3) view classes Idesigned JSPs for each of these three parts The following table lists the web page namesand the corresponding JSP file names

Schedule a Class schedule1.jsp

Update Students students.jsp

Summary and Confirm schedule2.jsp

Upcoming Class Information view2.jsp

Figure 3 Web tier JSPs

The Java Server Pages specification [9] introduces on kind of application scenario forJSP This is illustrated in Figure 4 After the client sends a request to the server, it is

recommended “to have the initial JSP page to determine details about the request,perhaps create and/or update some server-side objects, and then, if necessary, redirect therequest to a different JSP page”.

Figure 4 An Application Scenario of JSPs [9]

In the implementation of the web site, JSP files are responsible for determining theclient’s request, then either modify the current page, or redirect the request to another JSPpage, or update server-side objects, i.e update tables in the database As an example ofusing JSP to perform these tasks, the following pieces of students.jsp code is given todemonstrate the way of accessing data from the back-end tables and using the data topresent a response to the client

String url = "jdbc:oracle:thin:@sirah.csit.fsu.edu:1521:oralin";

Connection conn = DriverManager.getConnection(url, "yilewang", "yilewang");

Statement stat = conn.createStatement();

ResultSet rs = stat.executeQuery("select NAME, EMAIL, PHONE, PIN from STUDENTS where ID=" + Integer.parseInt(request.getParameter("id")) );

<tr><td colspan=2 align="center"><font color="red">

You must enter a name Please try again.</font></td></tr>

<%

} ……

String info[] = (String [])((Vector)session.getAttribute("students")).get(i);

String name = info[0];

String email = info[1];

String phone = info[2];

out.println("<tr><td>" + name + "</td><td>" + email + "</td><td>" + phone +

"</td><td align=center><input type=checkbox name=delete value=" + i +

"></td></tr>");

}

%>

The first part of the above code accesses the database to retrieve student information from

a table, and saves it into the current session object for a later use The remaining partupdates the student list based on the client’s request: Add/Remove The following picture

is the screen rendered by this code

Figure 5 The web page created by students.jsp

3.1.2 Database Design

Once the user creates a new account, his personal information will be stored in tableTEACHERS The schema is as follows The email address is used for the primary key,thus must be different from others

EMAIL ( primary key ) Varchar Not Null

Table 1 Schema of table TEACHERS

When the user clicks button “Schedule” to confirm scheduling a class, all classinformation is saved in table CLASSES This table includes a field EMAIL serving as aforeign key in reference of that of an instructor, in order to ensure every class is bound toone instructor Meanwhile, the contact information of students who has been added tothis class is stored in table STUDENTS The automatically generated random PINnumber is used as a primary key of this table Foreign key ID is used to specify to whichclass this student belong Those schemas are as follows:

EMAIL ( foreign key references TEACHERS (EMAIL) ) Varchar Not Null

Table 2 Schema of table CLASSES

Table 3 Schema of table STUDENTS

In order to build the real-time classroom, it is necessary to write some other JSP, HTMLfiles and two more tables are required As you can see from figure 2., the classroom page

PIN ( primary key ) Char(7) Not Null

ID ( foreign key references CLASSES (ID) ) Number Not Null

is generated by file class.jsp, which consists of six frames The corresponding files areshown in the following table.

Left Co-browser Panel browser.html

Voice Room Panel beforeTalk.jsp, talk.jsp

Chat Room Panel beforeChat.jsp, chat.jsp

Shared Documents Panel document.jsp

Figure 6 JSP and HTML files for Classroom

There is a “Start Class” button on the right menu to start up two remote servers:SoundSer and RmiServer These two new processes are created from menu2.jsp Thefollowing piece of code excerpted from menu2.jsp is to launch server SoundSer The firstline specifies a working directory The next line executes the specified string command

“java SoundSer” in a separate process with the specified environment, which is null, andworking directory

File dir = new File(" /webapps/learning/talk/");

Process talk = Runtime.getRuntime().exec("java SoundSer", null, dir);

Whenever a new class is successfully started, its class ID must be inserted into table CLASSROOMS for reference

ID ( primary key, foreign key references CLASSES (ID) ) Number Not Null

Table 4 Schema of table CLASSROOMS

Talk.jsp and chat.jsp respectively load a talk applet and a chat applet

Document.jsp is used to upload files, and later display them in the left co-browser panel

It includes a form as well as a JavaScript The JavaScript function openWin(), when

“Upload” button clicked, opens a new window for file uploading File uploading isprocessed by servlet LoadFile.class It takes advantage of multipart/form-data type ofthe form encryption for transferring files, and save them under certain directory at theserver side