The purpose of online classroom project is to build a web application that supports teaching and learning for the business department in the eastern international university

Abstract
The purpose of Online Classroom project is to build a web application that supports teaching
and learning for the Business department in the Eastern International University. It provides
an online educational environment to boost the interactions between lecturers and students.
Lecturers can upload lessons’ slides, books and videos, give and grade assignments online.
Students can get theses material, submit their assignments and get the results online.
Moreover, this system encourages students to share their personal knowledge and opinions to
others through discussion activities. Besides, the application also provides Administrator’s
features to manage accounts, subject and classes.
The Online Classroom system exploits many up-to-date technologies such as Web API, Entity
Framework, Bootstrap, AngularJS, Google APIs and Oauth2. These technologies increase the
flexibility of the system, makes the User Interface friendlier and reduce the development cost.
In order to advance the user experiences, the application allows lectures, staffs, and students
use EIU's email accounts to register for the IDs to log in.
At the end of the developing process, Online Classroom completed main features and
functions, and published at Lectures, students and staffs from
Business department can use the application at this time.
For software engineering students who participate in the project, this was a great opportunity
to study brand new software development, technical skills, teamwork and communication
skills. All team members have gained enough working experiences to surpass the student level
to become developers.
Keywords: online classroom, educational environment, learning materials, learning process,
learning interactions, EIU's email accounts

1


Acknowledgement
We would like to express our gratitude to whom gave all support, suggestion and
encouragement to us throughout the project. First of all, we want to give a special thank to
Mr. Loi Nguyen who created favorable conditions and provided effective working

environment, Vice President of Eastern International University. More importantly, he always
followed us during the project development and played an essential role in our mature through
discussion.
Our thanks go to instructors and lecturers in school of engineering, Mr. Vi Tran, Vice
President of EIU, Mr. Phuoc Tan, M.Sc. Vice Dean School of Engineering., Mr. Ngoc Ha, Ms.
Sang Nguyen, Mr. Vu Nguyen who gave us freedom to explore our own ideas and
simultaneously, give guidance in the entire process. We are also grateful to Mr. Hien Pham,
other lecturers, teammates and students of business school who helped us testing the system
successfully.
Last, but not least, we would like to thank our families, friends and EIU who took care,
encouraged and supported us to complete this great project.

2


Table of Contents

3


List of Abbreviations
API

Application Programming Interface

CSV

Comma-separated values

DOM

Document Object Model

EF

Entity Framework

EIU

Eastern International University

IRN

Individual Record Number

IT

Information Technology

JSON

JavaScript Object Notation

LINQ

Language-Integrated Query

MVC

Model View Controller

OOP

Object-oriented Programming

QA

Quantity Assurance

QC

Quantity Controller

REST

Representational State Transfer

TFS

Team Foundation Server

UI

User Interface

XML

Extensible Markup Language

4

Product Overview
Vision
The effective use of information technology inside and outside the classroom is a strategic
imperative of Eastern International University. Online Classroom is intended to enhance the
student and faculties’ classroom-learning experience and improve the communication between
teacher and student.

Objectives
Base on the idea build a modern Online Classroom to serve School of Business department of
Mr. Nguyễn Tấn Lợi – Vice President of Eastern International University, the objectives of the
Online Classroom are as follows:
•
•
•
•
•
•

Encourage off-campus communication.
Share knowledge among peers.
Provide required learning materials timely as required.
Monitor learning process to ensure learning and teaching quality.
Optimize the flexibility in homework creating by media, references.
Enhance the creative of student through interesting discussion.

Features
Online Classroom focus on four main features to serve almost key activities of teacher,
student and staff in the university:

•

Teaching features:
-

•

Learning features:
-

•

Course information
Discussion
Materials
Assignment

Admin features:
-

•

Discussion management
Assignment management
Material management

User management
Class management
Course management
Subject management

Notification features

5


Stakeholders
Online Classroom is considered as a capstone project base on the requirement of Mr. Nguyễn
Tấn Lợi as the main customer. The application is to serve the teaching, learning and managing
to student, lecturer and staff of School of Business department.
Stakeholders of Online Classroom are:
•
•
•
•
•
•
•

Faculty
Administrator
Staff
Student
Lecturer
Developer team
QA & QC team

Release
The scope of this project includes six releases, at each release time, the team had a meeting
with the customer to discuss about completed work in this phase and propose creative ideas to

improve the product:
•
•
•
•
•
•

Release 1: Build prototype to make customer understand obviously about their product
requirements.
Release 2: Implement assignment features and course management to prepare the needs
for features in next release.
Release 3: Implement discussion and material features to finish main activities of learning
and teaching features and show a complete function in customer meeting.
Release 4: Design and implement class and user management.
Release 5: Build administrator features to support staff in managing class, course and
subject.
Release 6: Complete the product and publish it on server.

6


Architecture
Functionalities
The website aims to support lecturers and students in interacting to others in an education
environment with some basic features. These features are:
Functionalities for all users
Profile
•
•

Users can edit their personal information.
Users can change their avatar

Figure 1 Class diagram for managing user information

Functionalities for admins
Manage user:
•
•
•

Each user can be lecturer, administrator or student.
All users are added by the administrators.
Users must be confirmed email before logging on to the website.

Manage class:
7


•
•
•

Admins create classes from existing subjects.
Admins add lecturers and students to class.
Admins manage class’s information.

Figure 2 Class diagram for managing class

Manage subject:
•
•

Admins create a new subject.
Admins delete existing subjects.

Functionalities for students and lecturers
Assignment:
This feature enables lecturers to give assignments, which contain a number of
questions to class.
8


Figure 3 Class diagram for managing assignment

In this feature, lecturer can:
-

Create assignment
Edit assignment
Delete assignment
Grade student’s submissions (answers)

Student can:
-

View assignment
Submit answer
Cancel submission before deadline

View result

Discussion:
All users in class can discuss about a topic created by lecturers of class. Number of
replies are automatically counted to help lecturers know the best answers (comments).

9


Figure 4 Class diagram for discussion

In this features, lecturer can:
-

Create discussion
Edit discussion
Delete discussion
Comment and reply another comment

Student can:
-

View discussion
Comment and reply another comment

Material:
10


Lecturers can post materials for class, so student can view and download them.

Materials can be files or text only.

Figure 5 Class diagram for managing materials

In this feature, lecturer can:
-

Create material
Edit material
Delete material

Student can:
-

View material
Download material
11


Course Information
This feature enables lecturers to update information about class. The information can
be represented in the form of formatted information or external fields.

Figure 6 Class diagram for managing course information

In this feature, both lecturers and students can view information of the course.
Notification:
Users can view important events related to them. These events include a new
assignment, a result for answer, a new or a comment on discussion, a reply, a new
material and an updating course information.

12


Figure 7 Class diagram for notifications

13


User Experience Architecture
Online Classroom project uses AngularJS as the framework to develop front-end application.
Most of works is done as Controller:
-

Receive information from Server and Web APIs
Analyse data
View data on UI
Send information to Server and Web through APIs

Figure 8 User Experience Architecture

Bootstrap
Bootstrap makes front-end work faster and easier, it is used as a static DOM, which can be
used to create views on User Interface like buttons and inputs. However, most of bootstrap’s
features are used through AngularJS in Online Classroom project.
AngularJS
AngularJS is a brand new toolset for building the framework used in Online Classroom
application development. It is fully extensible and works well with other libraries such as
Bootstrap.
A lot of function UIs are designed with AngularJS, it helps to improve the facade and

performance. Some functions are implemented as directives to be used multiple times.
AngularJS’s ui-route is used for navigating to reduce the duplicating pages and improve the
performance.
Web API (Client Side)
Online Classroom use Google Drive API to store data of two features: Assignment and
Material. However, views from this API is built to a directive with AngularJS.
14


Problems and solutions
Increase flexibility of the system
Because this is the first version of the system and there will be more features, so the system
should be developed in the way, which can change easily.
Solutions:
•
•

The modern development pattern like MVC can help to separate UI, model and business
logic from others, so new features can be added easier.
Web API technology supports to reduce data return from server (only data in JSON/XML
format); this data is used to render view in client easily by using AngularJS.

Figure 9 MVC architecture

Figure 10 Rendering UI using Angular and Web API

15


Figure 11 Data flow in Web API

Database design
Entity Framework provides three different approaches to deal with the model, and each has its
own pros and cons

Figure 12 Three different approaches to deal with the model

Code first helps in creating database and updating database when classes are created/updated,
so this way helps to reduce time and effort to maintain database design quickly.

16


Authorization
All users must be lecturers and students, so the system should not allow other people to create
account. Lecturers also can identify student base on the account.
Solutions:
•
•
•
•

•

All lecturers and students in the university have unique email from domain eiu.edu.vn
provide by IT office of the university, which is also educational Google account.
Each email is formed by last name, first name, department and school year (for students)
Using the email help prevent fake accounts
Asp .net provide OAuth 2 (an authorization framework) which supports users to login into
application by external authorization provider like Facebook, Twitter, LinkedIn and

Google…
The limit of login requests provided by OAuth 2 is large (free quota: 20,000,000
requests/day, 5 requests/second/user.

Users will login to website by their educational Google email through OAuth 2 Authorization
Framework.

Figure 13 OAuth 2 Authorization Framework

17


Uploading and deleting files:
Uploading and deleting files are required when teachers create assignments, discussion and
post materials or students submit the answers. The system should provide enough space to
store these files while the cost should be reduced.
Solutions:
•
•
•
•
•
•
•

User login by Google educational email (in domain eiu.edu.vn)
Google provide API for Google Drive (a cloud storage service available for all Google
accounts)
The API supports upload directly from client by JavaScript code, so this way can reduce
the time upload and optimal the bandwidth to server (files is not passed to web server).

Free storage volume is up to 10TB for educational account (at the beginning of the
project) which is almost enough for storing files (files for educational purpose).
The API also supports insert permissions to uploaded files, so it is easily to manage access
permissions.
Limit of number requests for the API is quite large (free quota 1,000,000,000 requests/day
and 10 requests/second/user)
The API is used commonly by developers around the world, so stability and reliability of
the system is guaranteed

Using Google Drive service to store files uploaded by users.

Figure 14 Post material - sample function using Google drive API to upload files

18


Data services
Data service system provides APIs for serving the interaction process to user data on
interface.

Overview
Online Classroom System was designed to enhance the ability for developing new features
that makes the data service system to be designed generally and use the newest technologies.
The main feature of Online Classroom system includes three feature groups, which are
Teacher feature group, Student feature group and Manager/Admin feature group. For handling
the needs are mentioned above, data service system is also divided into 3 main groups match
with 3 feature groups.

Data service structure
Data service system was designed with MVC layered architecture to ensure the independence

of data layers and controlling layers for helping the development process and testing process
easier. Almost processes of develop data service focus on two layers Model and Controller in
MVC architecture.
Model layer is a place where concentrates all of data entities in the system. The data entities
are modeling into entities in C# to be flexible in handling process with data and enhance the
effects of program and abstract of data entities.
Controller layer is a place where concentrates all of the handling data activities from raw
data-to-data entities which users could access. For handling the needs of expanding features,
Online Classroom uses API Controller instead of MVC Controller in MVC architecture. In
API Controller, data system doesn’t only handle data for web applications, it’s also work on
many different application forms in many different devices such as mobile is also used.

Technologies
Data services of Online Classroom project were based on latest technologies such as
ASP.NET Web API 2.0, Entity Framework 6 and LINQ to Entities.
ASP.NET Web API 2.0
ASP.NET Web API is a framework that makes it easy to build HTTP services that reach a
broad range of clients, including browsers and mobile devices. ASP.NET Web API is an ideal
platform for building RESTful applications on the .NET Framework.
With the main goal is to integrate these new features in a flexible manner so Online
Classroom chose this technology. The APIs, which were developed by this technology, are not
only used for web apps that are easy to use in other applications as well as other devices.
Additionally, Online Classroom used Angular JS to develop the user interface so Web API
promote the power of this technology in routing, filter, model binder JSON parser, …

19


In Online Classroom, data services divide into 3 main APIs group: APIs to serve teacher
action, APIs to serve student action and APIs for administrator can manage the system.

Entity Framework 6
Entity Framework (EF) is an object-relational mapper that enables .NET developers to work
with relational data using domain-specific objects. It eliminates the need for most of the dataaccess code that developers usually need to write.

Figure 15: Entity Frame Model

Entity Framework has three approaches: Model First, Code First and Database First.
•

Model First: In this approach, we do not have an existing database and the Entity
Framework offers a designer that can create a conceptual data model. It also uses an
.edmx file to store the model and mapping information. After the model is created then the
Entity Framework designer can generates the database schema that can be used to create
the database.

20


Figure 16: Model First approach

•

Code First: Whether you have an existing database or not, you can code your own classes
and properties that correspond to tables and columns and use them with Entity Framework
without an .edmx file. In this approach Entity Framework does not leverage any kind of
configuration file (.edmx file) to store the database schema, because the mapping API uses
these conventions to generate the database schema dynamically at runtime.

Figure 17: Code First approach

•

Database First: It is a more data-centric design that is based on an existing database. The
Entity Framework is able to generate a business model based on the tables and columns in
a relational database. The information about our database structure (store schema), our
data model (conceptual model), and the mapping among them is stored in XML in an
.edmx file.

21


Figure 18: Database First approach

Each of them has difference advantages and disadvantages and in Online Classroom, we
chose Code First as main approach to develop because it is used to fast development and
developer has full controls on entities.

Entities Structure
We used Code First Approach of Entity Framework so it is easy to design, modify the data
entities. In Online Classroom, we have more than twenty entities that store data for many
different purposes.
We also applied OOP properties such as abstraction, inheritance or encapsulation to design
model to make it more obvious and avoid data redundancy.
Entity’s Name

Description

Answer

Storing data of student’s answer for each

assignment.

Assignment

Storing details of an assignment.

Comment

Storing data of comment in discussion.

Comment History

Storing old comment when user edit

Course

Storing the information of course.

Department

Storing the information of department

Discussion

Storing the discussion data of both teacher and
student.
22


Enrollment

Storing the information when student register a
class.

File

Storing the information of uploaded file

Material

Storing the information of material

Notification

Storing all notification and user announcement
of all function such as assignment, discussion,
…

Person

A base abstract class and it contains the
common information about people. All of
entities that relate to people will inherit this
class.

Question

Contain the question of an assignment.

Student

Contain the specific information of student.

Subject

Storing the information of all subjects

Teacher

Contain the specific information of teacher

Title

Contain the data of the title of course
Table 1 Entities Structure

Controllers
Controllers decide all data process operations when the user interacts with the data. In Online
Classroom, we have three main group of controllers: student actions, teacher actions and
administrator actions.
The main technology was used in controller to handle data is LINQ to Entities. It works on
high level so we can code in the easier way.
In Student Controller Group, there are controllers that handle the data associated with Student
entity. For example, the user input Student’s information into system, then a controller called
“Student.cs” has the responsibility for handling and input data format into data system. This is
also has the working ways like other two groups.
23


More clearly, we could see the list of controllers with their following group below:

Group’s Name

Controller’s Name

Description

Manager/Admin

AccountController
AssignmentsController
CoursesController

Handling the user’s Account
with Gmail of EIU, create
Course
with
specified
Subject.

Teacher

AssignmentsController
DiscussionController
MaterialsController

Handling the requests to
assigments and grading them,
create discussion and upload
materials
for

his/her
classroom
or
receive
notifications.

Student

CoursesController
MaterialsController

Handling the requests to
courses such as add new
course or editing, submit
homework action and receive
notifications.

Table 2 Controllers

24


Administrator page
This page is decentralized for Administrator will include part such as: Management lecturer,
management student, and management subject and management class.

Management lecturer
This page will manage the basic information of lecturer such as: First Name, Last Name and
Email. This list will be added by admin based on lecturer list from Academic Affairs Office
provide. With that list, Admin can add the lecturer into the classroom where they are assigned.

Functions in Management page:
•
•
•

Add New: Add new faculty
Import file: Add new faculty from excel file
Edit: Edit the information wrong or lack of the faculty in the list.

Add new lecturer
Clicking on Add New button to create a new faculty with the following information: First
Name, Last Name and Email. Then proceed to save by click on Save function behind textbox
Email, the new faculty information is saved in a list (if that information is valid: not to be
empty or identical information with another already existing faculty in the list).

Figure 19 Add New Function in Lecturer Management Page

25