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 http://mybbs.eiu.edu.vn/ 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 i 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 ii 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 Objectives .1 Features Stakeholders Release Architecture .3 Functionalities Functionalities for all users Functionalities for admins Functionalities for students and lecturers 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 iii Technologies .15 ASP.NET Web API 2.0 15 Entity Framework 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 iv 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 View notification 57 v Management 59 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 61 Sprint 62 Sprint 63 Sprint 63 Sprint 64 Sprint 65 Sprint 66 Sprint 67 Sprint 68 Sprint 10 69 Conclusion 69 Conclusion 70 Summary and Conclusion 70 Future work 70 Bibliography 71 List of Figures Figure Class diagram for managing user information Figure Class diagram for managing class Figure Class diagram for managing assignment Figure Class diagram for discussion Figure Class diagram for managing materials .7 vi Figure Class diagram for managing course information Figure Class diagram for notifications Figure User Experience Architecture 10 Figure 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 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 35 Add class complete 30 vii 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 viii 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 62 Figure 89 Sprint 62 Figure 90 Sprint 63 Figure 91 Sprint 64 Figure 92 Sprint 65 Figure 93 Sprint 66 Figure 94 Sprint 67 Figure 95 Sprint 68 Figure 96 Sprint 69 ix List of Tables Table Entities Structure 19 Table Controllers 20 x ... 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:  ... avatar Figure 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... 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