DEVELOPMENT OF ONLINE LEARNING SYSTEM

FOR SOFTWARE LABORATORY CENTER

IN BINA NUSANTARA UNIVERSITY

Dennise Adrianto1; Marlene Martani2;

Danella Indriani3; Risan Susanti4
Computer Science Department, School of Computer Science, Bina Nusantara University
1,3,4
2
Information Systems Department, School of Information Systems, Bina Nusantara University
Jln. K. H. Syahdan No. 9, DKI Jakarta 11480, Indonesia
1
[email protected]; [email protected];[email protected]; [email protected]

Received: 6th March 2017/ Revised: 24th March 2017/ Accepted: 24th March 2017

Abstract - The purpose of this research was to quality of services, SLC continuously innovates its way
produce a learning management system that could provide to deliver courses. For example, SLC creates additional
teaching materials and assessment tools for students teaching materials such as Hands on Lab (HOL) and video
so that they could improve their abilities and assess tutorials in improving the quality of service in advance.
themselves. Using the waterfall Software Development HOL is a tutorial in the form of a portable document which
Life Cycle (SDLC) model, the researchers divided the can be used as a guide for students. Meanwhile, the video
development into five phases. Those were analysis, design, tutorial is a tutorial in interactive video. HOL and video
implementation, testing, and maintenance. Analysis phase tutorials are normally distributed manually to the students
was done by conducting interviews and observations. The by the instructor during the practical activities. It makes
designing phase used Unified Modelling Language (UML), the distribution difficult, uneven, and inflexible.Therefore,
and implementation phase used PHP language with Model SLC wants to develop an application which can deliver
View Controller (MVC) framework CodeIgniter. Then, materials and conduct quiz to assess. Students who take the
testing used eight golden rules and questionnaire as user course without limitation of time, place and platform. The
acceptance test. In the end, this research could produce application developed as Learning Management System
a Learning Management System (LMS) namely Online (LMS), can be a learning environment for students to learn
Learning System. It can deliver materials to students in Bina and assess.
Nusantara University. In addition, it helps students to find According to Watson (2007), LMS was the
additional learning materials for the programming course, infrastructure that delivered and managed instructional
monitor, and assess their learning progress through the quiz content, identified and assessed individual and organizational
and member dashboard. learning or training goals, tracked the progress to meet the
goals, and collected and presented data for supervising the
Keywords: Online Learning System, materials, assessment whole learning process of organization. Moreover, Ellis and
Calvo (2007) said that LMS was software systems designed
to support student learning. It contained some presentation,
I. INTRODUCTION assessment, communication, and management tools. For
example, there were dotLRN, WebCT, and Blackboard.
Information technology has been progressing To create the system, researchers use the Waterfall
very rapidly now and creating a big impact in many Software Development Life Cycle (SDLC) model as
aspects of life. People nowadays cannot get away from software development process. According to Bassil (2012),
technology. The use of computers becomes prevalent. the Waterfall SDLC model was a sequential software
Then, information technology is expanded with the development process regarded as increasingly downwards
integration of telecommunication and became Information flow (similar to a waterfall). A list of phases must be
and Communication Technology (ICT). The use of ICT is executed to build a computer software successfully. The
expanded to the education. It can contribute to universal model is shown in Figure 1.
access to education, equity in education, the delivery First, it is analysis phase. It is often known as Software
of quality learning and teaching, teachers’ professional Requirements Specification (SRS). It is a complete and
development and more efficient education management, comprehensive description of the behavior of the software
governance, and administration. developed. It implicates system and business analysts to
UNESCO (2017) took a holistic and comprehensive define both functional and non-functional requirements.
approach to promoting ICT in education. Access, inclusion Second, there is design phase. It is the process of
and quality were the main challenges that they could planning and problem solving for a software solution. It
address. The organization’s intersectoral platform for ICT implicates software developers and designers to define the
in education focused on these issues through the joint work plan for a solution which includes several things. Those are
of three of the sectors. Those were communication and algorithm design, software architecture design, conceptual
information, education and science. database schema and logical diagram design, concept
Taking part as an education institution, Bina Nusantara design, graphical user interface design, and data structure
University has a division called Software Laboratory Center definition.
(SLC). It deals specifically with the practicum for students Third, it is implementation phase. It refers to
who have the course of programming. To improve the the realization of business requirements and design

Development of Online Learning System.....(Dennise Adrianto, et al.) 83

specifications into a concrete executable program, database, methods to access data (databases, files, and others) and
website, or software component through programming and make a reusable class library available. Usually, the model
deployment. This phase is where the real code is written is built with data abstraction, validation, and authentication.
and compiled into an operational application, and where the Moreover, the model is made up of classes that define the
database and text files are created. domain of interest. These objects belong to the domain with
Fourth, there is the testing phase. It is also known encapsulated data stored in databases. It also includes code
as verification and validation. It is a process to check that used to manipulate this data and enforces business rules.
a software solution meets the original requirements and Moreover, the view is responsible for graphical
specifications. Thus, it accomplishes its intended purpose. user interface management. It means all forms, buttons,
Fifth, it is the maintenance phase. It is the process of graphic elements, and all other Hypertext Markup Language
modifying a software solution after delivery and deployment (HTML) elements that are inside the application. The view
to refine output, correct errors, and improve performance layer is called as web design or templates. It controls the
and quality. way data is displayed and how the user interacts with it.
Based on those phases, the purpose of this research It also provides ways for data gathering from the users.
is to develop LMS using Waterfall SDLC model to provide The technologies that are mainly used in views are HTML,
learning and assessment facilities for Bina Nusantara Cascading Style Sheets (CSS), and JavaScript. As a general
University students and the wider community. Moreover, it rule, a view should never contain elements that belong to
also measures the learning progress and processes data users application logic to make it easier for the designer to work
that act as a media distribution tools for SLC to distribute with it. This means logical blocks should be kept to a
learning materials for the programming course. minimum.
Next, the controller is responsible for event handling.
II. METHODS These events can be triggered by either a user interacting
with the application or by a system process. A controller
As implied in the waterfall SDLC models, the first accepts requests and prepares the data for a response. It is
phase of the development is analysis phase. Observation also responsible for establishing the format of that response.
and interview have been conducted in SLC. The observation The controller interacts with the model to retrieve the needed
and interview conducted are to gain information and the data and generates the view. This process is also known as
better understanding of the problem and the needs that SLC an action or a verb. When a request arrives at the server, the
has. Then, in the second phase or design phase, Unified MVC framework dispatches it to a method into a controller
Modelling Language (UML) is used to design the software based on the URL. The controller binds all application logic
architecture. The diagrams used in this phase are use case and combines the display in the view with the functionality
diagram, sequence diagram, activity diagram, and class in the model. It is responsible for data retrieval from the
diagram. After the class diagram is produced, data modeling view and establishing the execution path for the application.
is performed using entity relationship diagram. The controller will access the model functionality, and it will
For the third phase or implementation, the application interpret the data received so that it can be displayed by the
is developed from scratch of Model View Controller (MVC) view. It is also responsible for error handling. The controller
concept using PHP with framework CodeIgniter. According also manages the relationship between a view and a model.
to Pop and Altar (2014), MVC has three parts. There are It responds to user requests, interacts with the model, and
model, view, and controller. The model is a part of the decides which view should be generated and displayed.
system that manages all tasks related to data like validation, CodeIgniter is an application development
session state, control, and data source structure (database). framework or a toolkit for people to build websites using
The model greatly reduces the complexity of the code the PHP. Its goal is to enable users to develop projects much
developer needs to write. The model layer is responsible faster than to write code from scratch by providing a rich
for the business logic of an application. It will encapsulate set of libraries for commonly needed tasks, and a simple

Figure 1 Model-View-Controller Architecture

(Source: Pressman, 2010)

84 ComTech, Vol. 8 No. 2 June 2017, 83-94

interface and logical structure to access these libraries. with questionnaire conducted as user acceptance test. Eight
CodeIgniter lets users creatively focus on the project by Golden Rules evaluate the user interface of a system. The
minimizing the amount of code needed for a given task. aims are to strive for consistency, enable frequent user to use
From a technical and architectural standpoint, shortcuts, offer informative feedback, design dialog to yield
CodeIgniter is created with the several objectives. First, closure, offer simple error handling, permit easy reversal of
it is dynamic instantiation. In CodeIgniter, components action, support internal locus of control, and reduce short-
are loaded, and the routines are executed only when it is term memory load (Touma et al., 2007; Shneiderman et al.,
requested rather than globally. No assumption is made by 2010). The last phase is maintenance. It is conducted when
the system regarding what it may be needed beyond the the researchers deliver and test the application to users, and
minimal core resources. So, the system is very light-weight find bugs and error in the application.
by default. The events are triggered by the HTTP request,
and the controllers and views of the design will determine
III. RESULTS AND DISCUSSIONS
what it invokes.
Second, it is loose coupling. The coupling is the
degree to which components of a system relies on each The results of this research are the web-based
other. The fewer components depend on each other, the more application called Online Learning System. Using the
reusable and flexible the system becomes. The researchers’ waterfall SDLC model, in the analysis phase, the researchers
goal is a very loosely coupled system. produce the Online Learning System architecture. For level
Third, there is the component singularity. The access control, users are divided into three levels of access,
singularity is the degree to which components have a namely visitor, user, and administrator. The three levels of
narrowly focused purpose. In CodeIgniter, each class and access have different access control to Online Learning
its functions are highly autonomous to allow maximum System as seen in use case diagram in Figure 2 and Figure 3.
usefulness. CodeIgniter is a dynamically instantiated, and Using the architecture design (Figure 4 and Figure 5
loosely coupled system with high component singularity. It - see appendix), the researchers create the Online Learning
strives for simplicity, flexibility, and high performance in a System. It has several features and is divided into two parts,
small footprint package (CodeIgniter.com, 2017). namely back-end and front-end. The first part “back-end”
Then, the fourth phase or testing, it includes eight is used by the admin to manage several features. There are
golden rules used to assess the user interface and evaluation Manage Group (used by administrator to manage course

Online Learning System

*
Sign Up
«uses»
* Verify Account
Sign In

*** * «extends»
** View Course List View Course Detail «extends»

* *
View FAQ View Material
Support
*
Visitor «extends»
View Quiz List

«inherits» View Contact Us

View Topic
Request Change
Password
*
«extends»
*
Sign Out

* ** * «extends»
*
Record Progress View Lesson
*
* «uses»

*
«extends»
Member Take quiz View Quiz Result

View Dashboard «extends»

* Edit Profile
«extends» «extends»
Forum «extends»
Change Password Change Profile
Picture

Update Account

Figure 2 Use Case Diagram for user of Online Learning System

Development of Online Learning System.....(Dennise Adrianto, et al.) 85

 Online Learning System

Manage Assessment
*

*
Manage course group Manage Course
*

*
Manage Couse
Language

*
*
Manage FAQ
* ** *
**
**
*
Manage Topic
**
* *

* Manage Subtopic
Admin
Manage Lesson

* *
*
Manage Code
Manage Language

*
Manage Material
Support Type
*

Manage User

Manage Material
Support

Figure 3 Use Case Diagram for Admin of Online Learning System

group), Manage Course (used by the admin to manage

learning materials that exist in the system. Admin can add,
change and delete existing material), Manage User (used
by administrators to manage user access are registered in
the system. Admin can also delete an existing user), and
Manage Quiz (used by the admin to set up practice questions
or quizzes in the system).
Before the Online Learning System can be used by
the user, the admin must add courses to the system. The
process begins when admin adds the course group. In add
New Group page, admin can create a new group as shown
in Figure 6. The examples are Web, Desktop, Database,
Mobile, and others.
Moreover, if there is something wrong with the Figure 6 Add New Group Page
group, admin can edit course group in Course Group page
and manage it. These are shown in Figure 7 and 8.

86 ComTech, Vol. 8 No. 2 June 2017, 83-94

 Figure 7 Edit Course Group Page

Figure 10 Manage Quiz Page

Figure 8 Manage Course Page

To add a new course, admin can use New Course

page. Admin can add the title, description, and image of the
course. Figure 9 illustrates the page.
To manage the quiz, admin can use Manage Quiz
page. Admin can choose the course, topic and subtopic,
add the new question, edit, or delete the question. Figure 10
shows the page.
Moreover, to manage user, admin can use Manage
User page. In this page, admin can promote or demote user
as admin, deactivate user, and delete users. This is shown in
Figure 11.

Figure 11 Manage User Page

The second part “front-end” is divided into several

parts. First, Course Gallery is used to view the newest
course on the application. Second, Course Catalog is to see
all the courses that exist in the application. Third, Course
Details, it is for viewing the details of the course selected by
users. Fourth, Lesson enables the users to see the learning
materials. Fifth, Quiz is used by the user for the quiz or
Figure 9 Add New Course Page exercises. Sixth, Dashboard, this is for the users to see the
development of learning, training, and its value). Seventh,
Profile is to view the data listed and updates the data by
the users. Last, Forum is used by the users to conduct
discussions with other users or instructors.

Development of Online Learning System.....(Dennise Adrianto, et al.) 87

 Figure 12 shows Login page in the application. Users Beside the course page, users can choose what they
need to be a member of the Online Learning System. Thus, want to learn using the course catalog. In this page, Online
for the user authentication, Online Learning System needs Learning System describes all the course. It is shown in
to verify username or email and password of user. Figure 16.

Figure 12 Login Page

In Figure 13, Forgot Password page is used when

a users forget their password. Using their username or
email, users can request a new password. Then, users will
be notified about how to change the password by the link
provided in the email as shown in Figure 14.

Figure 16 Courses Catalog Page

After choosing the course, Online Learning System

will show the course detail to users. In this Course Detail
page, users can see the course description, programming
Figure 13 Forgot Password Page language used, software requirement, and the learning
objectives. The example is in Figure 17.

Figure 14 New Password Page

To learn about new programming language or new

course, users can access the Course page. In Course page,
users can see all the newest course that Online Learning
System has. This course is divided by the programming Figure 17 Course Detail Page
language used. Figure 15 shows the courses.
In the same page, users can also see the topics and
subtopic that courses have. Then, users can choose which
topics they want to learn. Figure 18 shows the page.

Figure 15 Course Gallery Page Figure 18 Course Topic Page

88 ComTech, Vol. 8 No. 2 June 2017, 83-94

 After choosing a specific topic, users will be directed After users click the button, users can answer the
to Lesson page. In this page, the materials will be described question about selected course. Then, an evaluation will
for users to learn from beginning to end. This is shown in be made when users finish the quiz. Figure 22 shows the
Figure 19. example of the quiz.

Figure 19 Lesson Page

To evaluate their learning, users can take quiz about

the selected topic. They can see the quiz in Quiz List page
(Figure 20). In this page, Online Learning System will show
the course quiz and users can choose which quizzes they
want to take.
Figure 22 Quiz Detail Page

In dashboard page of Online Learning System, users

can see their progress using pie chart. In the dashboard,
users will be notified about the percentage of learning
and assessment they take. The percentage is shown based
on the course group (Web, Database, Multimedia, Mobile
and Desktop Programming). In the pie chart in Figure 23,
Online Learning System will generate user progress based
on the course.

Figure 20 Quiz List Page

After choosing the quiz, users will be directed to

Quiz Page. In this page, users can see the detail of quiz and
the rules of quiz as shown in Figure 21. Then, users can
click Start the Quiz button to take the quiz.

Figure 23 Member Dashboard Page

To help user know the system better, Online Learning

System provide FAQ page to help users when they have a
problem. By reading the FAQ, they can know more about
the system. Figure 24 shows the FAQ page.
Moreover, Figure 25 shows the account setting. In the
account setting menu, in the Profile page, users can change
their profile picture, profile information, and password. This
Figure 21 Quiz Page
changes will affect the account immediately.

Development of Online Learning System.....(Dennise Adrianto, et al.) 89

 Moreover, when there is invalid data, system will give error
messages. Online Learning System gives very informative
feedback to help users to understand the system better as
shown in Figure 28.

Figure 24 FAQ Page

Figure 27 Detail Course Shortcut

Figure 25 Profile Page

After the application of Online Learning System is

completed, the researchers conduct an evaluation to assess
it. The evaluation is divided into two phases. There is user
interface evaluation by using eight golden rules, and user Figure 28 New Course Group page
acceptance test by using questionnaire.
First, the evaluation of user interface with eight
golden rules has been done. For the first rule (strive for For the fourth rule (design dialog to yield closure),
consistency), the consistency in Online Learning System is Online Learning System gives a good and easy closure
found in the layout, language, color and font used as seen dialog when users or system are success to process
in Figure 26. something. For example, when user has been completed the
registration, Online Learning System will notify the user. It
is shown in Figure 29.

Figure 29 Activation Account page

To offer simple error handling (the fifth rule),

Online Learning System provides error handling. It gives
notification for the users if there is change of the content
of data or information. This rule can be seen on Figure 30.
For the sixth rule (permit easy reversal of actions),
Figure 26 Material Support Page Online Learning System gives access to the users to go back
to the previous page by pressing the back button. These
rule can be seen in Figure 31. Moreover, users can edit the
For the second rule (enable frequent users to use subtopic lesson using the button provided.
shortcuts), It can be seen that Online Learning System Then, the seventh rule (support internal locus of
designed to have universal functionality. It is in the form of control), Online Learning System gives users access to next
a link as the shortcut to move between pages. It is shown in or previous lesson with the use of button. This rule can be
Figure 27. seen in Figure 32. And for the eighth rule (reduce short-term
To offer informative feedback or the third rule, memory load), Online Learning System uses a common
Online Learning System always validates users’ input. icon to reduce short-term memory load as seen in Figure 33.

90 ComTech, Vol. 8 No. 2 June 2017, 83-94

 Figure 34 Easiness in Using Online Learning System
Figure 30 Error Handling on Lesson Page

Regarding the functionality level of Online Learning

System, it uses scale 1 (very unusable) to 5 (very usable).
According to the respondents, 84% (27 respondents)
say that Online Learning System is usable as a learning
environment. Figure 35 shows the result.

Figure 31 Permit Easy Reversal

of Action on Subtopic Lesson Page

Figure 35 Functionality level of Online Learning System

Figure 32 Lesson Page Button
to Support Internal Locus of Control
For the quiz system, the researchers use scale 1
(very hard) to 5 (very easy). The results show that 94% of
respondent or 30 persons agree that the quiz system is easy
to use. It is shown in Figure 36.

Figure 36 Ease of Quiz Level

Figure 33 Short Term Memory Load

For the level of completeness in Online Learning
on Course Group Page
System, the researchers ask respondents by using scale
from 1 (very incomplete) to 5 (very complete). The results
Besides the eight golden rules, for user acceptance show that 68% of respondents (22 persons) state that Online
test, the researchers give questionnaires to 30 respondents Learning System has a complete feature. However, 32% say
with six questions to determine several things. There are that Online Learning System needs to add more features.
the ease of use of the system, functionality level, the ease The result is in Figure 37.
of use of the quiz, feature completeness level, interactivity For the interactivity, the scale is 1 (very not
level, and satisfaction level. For the easiness in using Online interactive) to 5 (very interactive). The results show that
Learning System, the scale is from 1 (very hard) to 5 (very 74% of the respondents or 23 persons agree that Online
easy). 85% or 27 persons agree that Online Learning System Learning System is interactive system to user. Figure 38
is easy to use. The result can be seen in Figure 34. shows the result.

Development of Online Learning System.....(Dennise Adrianto, et al.) 91

 IV. CONCLUSIONS

Based on the analysis and design of Online

Learning System in Software Laboratory Center (SLC) in
Bina Nusantara University, it can be concluded into several
points. First, with Online Learning System, students in
Bina Nusantara University have no difficulty in finding
additional learning materials for the programming course.
It is because the material can be obtained through this
Learning Management System (LSM). These learning
materials can be accessed on the Lesson page. Second,
in Online Learning System, the progress of the learning
Figure 37 Level of Feature Completeness process can be measured through the features of lesson and
in Online Learning System quiz. Then, the learning outcomes can be viewed through
member dashboard.
For further research, the Online Learning System
can be expanded. For example, it can have discussion
forum for users to discuss learning materials. Moreover,
the future researcher can add online compiler to check the
students’ answer.

REFERENCES

Bassil, Y. (2012). A simulation model for the waterfall

Software Development Life Cycle. International
Journal of Engineering & Technology (IJET), 2(5),
1-7.
Figure 38 Interactivity Level
CodeIgniter.com. (2017). CodeIgniter user guide. Retrieved
of Online Learning System
March 4th, 2017 from https://codeigniter.com/user_
guide/overview/at_a_glance.html/
For the final question, the researchers ask about Ellis, R. A., & Calvo, R. A. (2007). Minimum indicators to
satisfaction level in using Online Learning System with assure quality of LMS-supported blended learning.
scale 1 (very dissatisfying) to 5 (very satisfying). The results Educational Technology & Society, 10(2), 60-70.
show that 75% or 24 persons are satisfied with Online Pop, D. P., & Altar, A. (2014). Designing an MVC model
Learning System. Figure 39 describes the result. for rapid web application development. Procedia
Engineering, 69, 1172-1179.
Shneiderman, B., Plaisant, C., Cohen, M., & Jacobs, S.
(2010). Designing the user interface: Strategies
for effective human-computer interaction (5th ed.).
Boston. Addison-Wesley.
Touma, E., Noguchi, K., Takata, M., Kamo, H., Nide, N., &
Joe, K. (2007). 3D visualization system gateau for
atmospheric science: Design concept and practical
evaluation. In The 2007 International Conference on
Parallel and Distributed Processing Techniques and
Applications
UNESCO. (2017). ICT in education. Retrieved March 8th,
Figure 39 Satisfaction Level 2017 from http://www.unesco.org/new/en/unesco/
in Using Online Learning System themes/icts/
Watson, W. R., & Watson, S. L. (2007). What are learning
management systems, what are they not, and what
should they become. TechTrends, 51(2), 29.

92 ComTech, Vol. 8 No. 2 June 2017, 83-94

 Appendix

Material_Support Material_Support_Type
Admin Users
-Material_Support_Id 1 -Material_Support_Type_Id
-Username Thread -Material_Support_Name 0..* -Material_Support_Type_Name
+manageAssessment() -Email -Material_Support_Content
-ThreadId +getMaterialSupportType()
+manageCode() -Password
-Title +getMaterialSupport() +addMaterialSupportType()
+manageCourse() -First_Name
-Description +addMaterialSupport() +editMaterialSupportType()
+manageCourseGroup() -Last_Name
-Image +editMaterialSupport() +deleteMaterialSupportType()
+manageCourseLanguage() -Date_of_Birth
-PostedDate +deleteMaterialSupport()
+manageFAQ() -Profile_Pict
0..* -LastUpdated
+manageLanguage() -Role 1
-Activation_Code +getThread() 0..*
+manageLesson() +newThread()
+manageMaterialSupportType() -Registration_Date Course_Group
-Status +editThread()
+manageMaterialSupport() +deleteThread() 1 -Course_Group_Id
+manageSubtopic() +getUser() -Course_Group_Name
+manageTopic() +addUser() -Last_Updated
+manageUser() +editUser() Course
Test_Transaction +getCourseGroup()
-Course_Id
+addCourseGroup()
1 1 -Username -Course_Name
1 +editCourseGroup()
-Topic_Id -Course_Description
+deleteCourseGroup()
0..* -Point -Learning_Outcome
0..* -Last_Taken -Tag 0..*
+takeTest() -Software_Required 1
Comment +getTotalPoint() -Level
-CommentId 0..* -Picture
-Last_Updated Course_Language
-Message 0..*
-PostedDate Take_Course_Transaction +getCourse() -Course_Id
+getComment() 1 +addCourse() 1 -Language_Id
-Username
+newComment() +editCourse() 0..* +getCourseLanguage()
-Topic_Id
+editComment() 0..* Topic +deleteCourse() +manageCourseLanguage()
+markLesson()
+deleteComment() -Topic_Id
-Title 1 0..*
1 0..*
-Session_Number
Answer 1 -Last_Updated
1..* Question 1
+getTopic()
-Anwer_Id -Question_Id Lesson
0..* +addTopic()
-Answer -Question Language
+editTopic() -Lesson_Id
-Flag +getQuestion() +deleteTopic() -Lesson_Title -Language_Id
+getAnswer() +addQuestion() -Content -Language_Name
+addAnswer() +editQuestion() -Lesson_No -Language_Script
1
+editAnswer() +deleteQuestion() +getLesson() +getLanguage()
+deleteAnswer()
+addLesson() +addLanguage()
0..* +editLesson() +editLanguage()
0..* +deleteLesson() +deleteLanguage()
FAQ Subtopic 0..*
1 1
-FAQ_Id -Subtopic_Id
1 -Subtopic_Title Code
-FAQ_Question
-FAQ_Answer -Subtopic_No -Code_Id
+getFAQ() +getSubtopic() -Code_Content 0..1
+addSubtopic() 1
+addFAQ() -Code_Output
+editFAQ() +editSubtopic() +getCode()
+deleteFAQ() +deleteSubtopic() +addCode()
+editCode()
+deleteCode()

Figure 4 Class Diagram of Online Learning System

Development of Online Learning System.....(Dennise Adrianto, et al.) 93

 Figure 5 Entity Relationship Diagram of Online Learning System

94 ComTech, Vol. 8 No. 2 June 2017, 83-94