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

 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 b

The Online Classroom system exploits many up-to-date technologiessuch as Web API, EntityFramework, Bootstrap, AngularJS, Google APIs and Oauth2 These technologies increase theflexibility 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 studentsuse EIU's email accounts to register for the IDs to log in

At the end of the developing process, Online Classroom completed main features andfunctions, and published at http://mybbs.eiu.edu.vn/ Lectures, students and staffs fromBusiness 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 communicationskills All team members have gained enough working experiences to surpass the studentlevel to become developers

Keywords: online classroom, educational environment, learning materials, learning process,

learning interactions, EIU's email accounts

Our thanks go to instructors and lecturers in school of engineering, Mr Vi Tran, VicePresident 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 andsimultaneously, 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 systemsuccessfully

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

Table of Contents

Abstract i

Acknowledgement ii

Table of Contents iii

List of Figures vii

List of Tables xi

List of Abbreviations xii

Product Overview 1

Vision 1

Objectives 1

Features 1

Stakeholders 2

Release 2

Architecture 3

Functionalities 3

Functionalities for all users 3

Functionalities for admins 3

Functionalities for students and lecturers 4

User Experience Architecture 10

Bootstrap 10

AngularJS 10

Web API (Client Side) 10

Problems and solutions 11

Increase flexibility of the system 11

Database design 12

Authorization 13

Uploading and deleting files: 14

Data services 15

Overview 15

Data service structure 15

ASP.NET Web API 2.0 15

Entity Framework 6 16

Entities Structure 18

Controllers 19

Administrator page 21

Management lecturer 21

Add new lecturer 21

Import file function 22

Edit information function 24

Management student 25

Add new student 25

Method 1: Enter directly student information 25

Method 2: Add student information by importing from file 26

Edit student information 27

Management subject 27

Add Subject 27

Filter subjects by status 28

Edit subject 28

Delete a Subject 29

Management class 29

Add a class 30

Add lecturer to class 30

Add a student to class 31

Remove lecturers, students from the class 32

Edit class information 33

Lecturer’s Features 34

Assignment 34

Creating a new assignment 34

Editing an assignment 36

Deleting an assignment 37

Grading an assignment 37

Discussion 39

Creating a new discussion 39

Editing a discussion 40

Deleting a discussion 41

Material 41

Creating a new material 41

Editing a material 42

Deleting a material 43

Course Information 43

Adding course’s information 44

View student’s list 44

Student’s Features 45

View and edit user profile 45

Viewing Profile function 45

Editing Profile function 46

Write and submit assignments 47

View the Assignments Detail 48

Submit the answer 48

Unsubmit the answer 49

View the Assignment’s Result 50

Participate in discussions 50

View the Discussion detail 51

Comment to a Discussion 51

Reply to a comment 52

Edit a comment/reply 52

View and download course’s materials 53

View Course’s Information 55

View course’s description 55

View student’s list 56

Team Management 59

Back-end team 59

Front-end team 59

Management Tools 60

Team Foundation Server 60

Visual Studio 61

Task Management 61

Sprint 1 61

Sprint 2 62

Sprint 3 63

Sprint 4 63

Sprint 5 64

Sprint 6 65

Sprint 7 66

Sprint 8 67

Sprint 9 68

Sprint 10 69

Conclusion 69

Conclusion 70

Summary and Conclusion 70

Future work 70

Bibliography 71

List of Figures Figure 1 Class diagram for managing user information 3

Figure 2 Class diagram for managing class 4

Figure 3 Class diagram for managing assignment 5

Figure 4 Class diagram for discussion 6

Figure 5 Class diagram for managing materials 7

Figure 6 Class diagram for managing course information 8

Figure 7 Class diagram for notifications 9

Figure 8 User Experience Architecture 10

Figure 9 MVC architecture 11

Figure 10 Rendering UI using Angular and Web API 11

Figure 11 Data flow in Web API 12

Figure 12 Three different approaches to deal with the model 12

Figure 13 OAuth 2 Authorization Framework 13

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

Figure 15: Entity Frame Model 16

Figure 16: Model First approach 16

Figure 17: Code First approach 17

Figure 18: Database First approach 17

Figure 18 Add New Function in Lecturer Management Page 21

Figure 19 Faculty List CSV File 22

Figure 20 Select Lecturer.csv 23

Figure 21 Lecturer Before Importing 23

Figure 22 Lecturer After Importing 24

Figure 23 Dang Huynh is being edited 24

Figure 24 Tab Student Interface 25

Figure 25 Add New and Edit Button 26

Figure 26 The Process Of Import Files 26

Figure 27 Text Box Enter Student Information 27

Figure 28 Add new subject 27

Figure 29 Add new subject complete 28

Figure 30 Filter subjects by status 28

Figure 31 Edit subject 28

Figure 32 Delete subject 29

Figure 33 Opening class and closed class 29

Figure 34 Add new class 30

Figure 36 Add lecturer by dropdown box 31

Figure 37 Add lecturer by file import 31

Figure 38 Add student by dropdown box 32

Figure 39 Add student by file import 32

Figure 40 Remove student from class 32

Figure 41 Edit class information 33

Figure 42 Lecturer adds new an assignment 34

Figure 43 Lecturer inputs information for an assignment 35

Figure 44 An assignment after posted 36

Figure 45 Edit an assignment 36

Figure 46 Interface of edit Assignment 37

Figure 47 Delete an assignment 37

Figure 48 Lecturer grades an assignment 38

Figure 49 List of students answered the questions 38

Figure 50 Lecturer grades for each student 38

Figure 51 List of students graded 39

Figure 52 Lecturer chooses to add a discussion 39

Figure 53 Enter contents for a discussion 40

Figure 54 Comment on a discussion 40

Figure 55 Edit a discussion 40

Figure 56 Delete a discussion 41

Figure 57 User go to material page 41

Figure 58 New material form 42

Figure 59 Edit a material 42

Figure 60 Delete a material 43

Figure 61 course’s information page 43

Figure 62 Add new information 44

Figure 63 Students' list 44

Figure 64 Viewing Profile 45

Figure 65 Editing Profile 46

Figure 66 Editing Additional Contact Information 47

Figure 67 Assignments List 47

Figure 68 Assignment Detail 48

Figure 69 Submit the answer 49

Figure 70 Unsubmit the answer 49

Figure 71 Assignment Result 50

Figure 72 Discussion List 50

Figure 73 Comment to a discussion 51

Figure 74 Reply to a comment 52

Figure 75 Editing a comment/reply button 52

Figure 76 Editing a comment/reply form 53

Figure 77 Material tab 53

Figure 78 Material on Notification bar 54

Figure 79 Material panels 54

Figure 80 Course's Information on Notification bar 55

Figure 81 Course's Information 56

Figure 82 Students' list 57

Figure 83 Notification panel 57

Figure 84 Notification page 58

Figure 85 Collaborators distribution 59

Figure 86 Bunrdown chart - help team to monitor task progress 60

Figure 87 Connect to TFS in Visual Studio 61

Figure 88 Sprint 1 62

Figure 89 Sprint 2 62

Figure 90 Sprint 3 63

Figure 91 Sprint 4 64

Figure 92 Sprint 5 65

Figure 93 Sprint 6 66

Figure 94 Sprint 7 67

Figure 95 Sprint 8 68

Figure 96 Sprint 9 69

List of Tables

Table 1 Entities Structure 19Table 2 Controllers 20

Product Overview

Vision

The effective use of information technology inside and outside the classroom is a strategicimperative of Eastern International University Online Classroom is intended to enhance thestudent and faculties’ classroom-learning experience and improve the communicationbetween 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 ofthe 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

Online Classroom is considered as a capstone project base on the requirement of Mr NguyễnTấ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:

 Release 1: Build prototype to make customer understand obviously about their productrequirements

 Release 2: Implement assignment features and course management to prepare the needsfor features in next release

 Release 3: Implement discussion and material features to finish main activities of learningand 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 andsubject

 Release 6: Complete the product and publish it on server

 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:

 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

Figure 3 Class diagram for managing assignment

In this feature, lecturer can:

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

Figure 4 Class diagram for discussion

In this features, lecturer can:

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:

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

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 newassignment, a result for answer, a new or a comment on discussion, a reply, a newmaterial and an updating course information

Figure 6 Class diagram for managing course information

Figure 7 Class diagram for notifications

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 beused to create views on User Interface like buttons and inputs However, most of bootstrap’sfeatures are used through AngularJS in Online Classroom project

AngularJS

AngularJS is a brand new toolset for building the framework used in Online Classroomapplication development It is fully extensible and works well with other libraries such asBootstrap.

A lot of function UIs are designed with AngularJS, it helps to improve the facade andperformance 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 theperformance

Web API (Client Side)

Online Classroom use Google Drive API to store data of two features: Assignment andMaterial However, views from this API is built to a directive with AngularJS

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 systemshould be developed in the way, which can change easily

Figure 11 Data flow in Web API

Database design

Entity Framework provides three different approaches to deal with the model, and each has itsown 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

 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 intoapplication by external authorization provider like Facebook, Twitter, LinkedIn andGoogle…

 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 AuthorizationFramework

Figure 13 OAuth 2 Authorization Framework

Uploading and deleting files:

Uploading and deleting files are required when teachers create assignments, discussion andpost materials or students submit the answers The system should provide enough space tostore 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 Googleaccounts)

 The API supports upload directly from client by JavaScript code, so this way can reducethe 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 theproject) 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 accesspermissions

 Limit of number requests for the API is quite large (free quota 1,000,000,000 requests/dayand 10 requests/second/user)

 The API is used commonly by developers around the world, so stability and reliability ofthe 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

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 processeasier Almost processes of develop data service focus on two layers Model and Controller inMVC architecture

Model layer is a place where concentrates all of data entities in the system The data entitiesare modeling into entities in C# to be flexible in handling process with data and enhance theeffects of program and abstract of data entities

Controller layer is a place where concentrates all of the handling data activities from rawdata-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 InAPI Controller, data system doesn’t only handle data for web applications, it’s also work onmany 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 asASP.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 abroad range of clients, including browsers and mobile devices ASP.NET Web API is an idealplatform for building RESTful applications on the NET Framework

With the main goal is to integrate these new features in a flexible manner so OnlineClassroom chose this technology The APIs, which were developed by this technology, arenot 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 APIpromote the power of this technology in routing, filter, model binder JSON parser, …

In Online Classroom, data services divide into 3 main APIs group: APIs to serve teacheraction, 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 workwith relational data using domain-specific objects It eliminates the need for most of the data-access 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 EntityFramework 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 thenthe Entity Framework designer can generates the database schema that can be used tocreate the database

Figure 16: Model First approach

 Code First: Whether you have an existing database or not, you can code your own classesand properties that correspond to tables and columns and use them with Entity Frameworkwithout an edmx file In this approach Entity Framework does not leverage any kind ofconfiguration file (.edmx file) to store the database schema, because the mapping APIuses 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 TheEntity 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), ourdata model (conceptual model), and the mapping among them is stored in XML in

an edmx file

Figure 18: Database First approach

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

Entities Structure

We used Code First Approach of Entity Framework so it is easy to design, modify the dataentities In Online Classroom, we have more than twenty entities that store data for manydifferent purposes

We also applied OOP properties such as abstraction, inheritance or encapsulation to designmodel to make it more obvious and avoid data redundancy

Answer Storing data of student’s answer for eachassignment.

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 andstudent.

Enrollment Storing the information when student register aclass.

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 thecommon information about people All ofentities that relate to people will inherit thisclass

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 OnlineClassroom, we have three main group of controllers: student actions, teacher actions andadministrator actions

The main technology was used in controller to handle data is LINQ to Entities It works onhigh level so we can code in the easier way

In Student Controller Group, there are controllers that handle the data associated with Studententity 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 isalso has the working ways like other two groups

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

Group’s Name Controller’s Name Description

Manager/Admin AccountController

AssignmentsControllerCoursesController

Handling the user’s Accountwith Gmail of EIU, createCourse with specifiedSubject

Teacher AssignmentsController

DiscussionControllerMaterialsController

Handling the requests toassigments and grading them,create discussion and uploadmaterials for his/herclassroom or receivenotifications

Student CoursesController

MaterialsController

Handling the requests tocourses such as add newcourse or editing, submithomework action and receivenotifications

Table 2 Controllers

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: FirstName, Last Name and Email Then proceed to save by click on Save function behind textboxEmail, the new faculty information is saved in a list (if that information is valid: not to beempty or identical information with another already existing faculty in the list)

Figure 19 Add New Function in Lecturer Management Page

Import file function

Add lecturer in bulk to save time Admin can create an Excel file with information such as theAdd New and save this list in CSV format

Figure 20 Faculty List CSV File

File Import function will filter irrelevant information column, it only displays correctinformation as the original format The file will display the information of the faculty with theattached status as: Email already exists, the lack of data, valid data

The system will add the valid information into the list and remove the invalid information

Figure 21 Select Lecturer.csv

Lecturer list before importing Besides that, in this list has status of faculty information

Figure 22 Lecturer Before Importing

Lecturer list after importing

Figure 23 Lecturer After Importing.

Edit information function

Admin will modify the information of a teacher being wrong by clicking on Edit behindEmail to revise the information and then save or cancel otherwise want to edit

Figure 24 Dang Huynh is being edited.

Management student

Tab Student is the place to add and edit information student in the school database Studentinformation includes First Name, Last Name, IRN and Email

Figure 25 Tab Student Interface

Add new student

Administrators add student with information (First Name, Last Name, and Email IRN) by twomethods:

Method 1: Enter directly student information

Administrators select Add New button, the interface will show the text box then admin canenter student information After entering the information, then select Save to save theinformation, or cancel to destroy the information entered

Note: IRN is number, Email ends with @eiu.edu.vn

Figure 26 Add New and Edit Button

Method 2: Add student information by importing from file

Administrators select Import File button, the interface will display box to admin choose links

to the file containing a list student information

Note: File formats ending with “.csv”, file does not add if there is no full student information(First Name, Last Name, IRN, and Email)

Figure 27 The Process Of Import Files

Edit student information

Admin will modify the information of a student being wrong by clicking on Edit to revise theinformation and then save or cancel otherwise want to edit

Figure 28 Text Box Enter Student Information

Management subject

This tab shows all subjects with information about Name, code, status These subjects arefiltered by status (enable and disable) Administrators can add, edit, set status or deletesubjects

Add Subject

To add a new subject, administrator provide information about this subject (name, code,status) in their fields and click “save”

Figure 29 Add new subject

After complete adding a new subject

Figure 30 Add new subject complete

Filter subjects by status

Administrators can view list of subjects by choosing “status” (enabled or disabled)

Figure 31 Filter subjects by status

Edit subject

When subjects have been added with wrong information, administrator can edit and changestatus