Bina Nusantara University



CHAPTER 2

THEORITICAL FOUNDATION

2.1 State of Art

State of Art is a group of journals that used as references in this thesis. State of Art also shows the comparison between the research before and the current research authors have done in this thesis.

Below are our State of Art that become our foundation in this research.

1. Title: Gamification in Education

Authors:

Gabriela Kiryakova, Nadezhda Angelova, Lina Yordanova.

Year:

2014

Result:

This research says that:

• basic features for gamification are challenges, points, level, badges, ranking of users.

• The lack of engagement and motivation of students to participate actively in learning process become the main problem in modern education.

• Teachers found that rewarding the learners can make them keep motivated and increase the engagement in courses such as badges and certificate.

The relation on thesis:

This journal gives the reference about the definition of gamification, what essential elements of gamification that we should have, and the reason to implement the gamification in Learning Management System.

2. Title: Learning Management System (LMS) among University Students: Does It Work?

Authors:

Nor Azura Adzharuddin and Lee Hwei Ling.

(International Journal of e-Education, e-Business, e-Management and e-Learning, Vol. 3, No. 3, June 2013)

Year:

2013

Result:

This research says that:

• Internet is not the problem anymore in this era of information of technology, it can easily found and available in urban areas.

• Learning Management System is a software environment designed to help and manage user learning process as well as deliver learning content and resources material to students.

The relation on thesis:

This journal become a reference for authors about the definition and the essential function of Learning Management System. The research shows that Learning Management System is really helpful for teacher to reach out their student.

3. Title: Play as you learn: gamification as a technique for motivating learners

Authors:

Ian Glover

Year:

2013

Result:

This research says that:

• Gamification will no longer useful to attract user in long term without continued incentives.

• Goal-focused activity is the key concept of gamification and this works best with checkpoint system to track their progress.

The relation on thesis:

The research shows that gamification can motivate and encourage productive behavior, also this journal says how we should carefully use gamification, because not only advantage, it also can give the disadvantage for the users.

2.2 Database

According to Connolly & Begg (2015, p.63), the database is a data collection that is logically related and also a description of the data, made to meet the information needs of an organization.

Database also can refer to a collection of data that is stored systematically on a computer that can be processed or manipulated using software (application programs) to produce information.

2.3 Software Engineering

2.3.1 Hypertext Markup Language

According to Jon Duckett (2011, p. 6), Hypertext Markup Language usually called as HTML. HTML is used to create the structure of the website. In HTML, we use tags and elements to decide what our web pages want to display.

2.3.2 Cascading Style Sheet

According to Jon Duckett (2011, p. 6), Cascading Style Sheet or usually called CSS, is used for changing the interface of the website to make it more interesting. With CSS, user can easily change the interface without touching the basic structure of the website. CSS allows you to control the styling of the website and also the layout, how to change the color of fonts, how to add background to web pages, etc.

2.3.3 JavaScript

According to Paul Deitel and Harvey Deitel (2012, p. 17 and 1251), JavaScript is a scripting programming language that usually used to add and create a function to a web page by a front-end developer and able to provide interactivity with our user, for example, an animation effect and user interaction. JavaScript can work in various of website browser as well.

2.3.4 PHP

According to Paul Deitel and Harvey Deitel (2012, p. 17 and 30), PHP is an object-oriented programming language for developing web applications. PHP is a platform and can be implemented on UNIX, Linux Operating System, MAC and Windows. PHP also support a lot of Database such as MySQL, Informix, Oracle, Sybas, Solid, Generic ODBC, and PostgreSQL.

2.3.5 Laravel

Laravel is a PHP framework, made for develop a web application with MVC (Model, View, Controller) pattern. Laravel was created by Taylor Otwell. Laravel offers a set of tools and strong architecture of application the unite a lot of framework features, such as CodeIgniter, Yii, MVC, Ruby on Rails, Sinatra, and many more. Laravel is an open source framework. Furthermore, Laravel has features that accelerate and simplify a web developer's task.

2.3.6 AJAX

AJAX is an abbreviation for Asynchronous JavaScript and XML. The essence of AJAX is using XML object to interact with the servers. AJAX capable to send and receive any information in different format, such as HTML, JSON, XML, and text files. AJAX also able to communicate to server, update the information to the latest one on a page without us have to refresh the page.

2.3.7 JQuery

JQuery contains a lot of JavaScript library that fast and easy to use. JQuery is capable to make HTML document traversal, event handling, manipulation, animation and AJAX way simpler. JQuery has user friendly API that can works in numbers of browser.

2.3.8 Vue.js

Vue.js is a dynamic, forward-looking framework for building the user interface. Vue.js is also capable to support the front-end developer to build the modern one-page website. The main library of vue.js is focused on view layer only. Vue.js used by developer because of easy to use and integrate with other libraries or existing project.

2.3.9 JSON

JSON is an abbreviation for JavaScript Object Notation. JSON is used to parsing the data between the server and web browser. JSON is a text format, self-reliant language. JSON is useful when we have data stored in JavaScript object, we can parse and generate the data into JSON, and send it to server.

There are two main parts in JSON, a group of name/value pairs and an ordered list of values.

- A group of name or value, or in other programming language usually called as object, associative array, struct.

- An ordered list of values, or in other programming language known as array, vector, list.

2.3.10MySQL

MySQL is a very fast and robust open-source relational database management system (RDBMS). This RDBMS enables you to efficiently store, search, sort, and retrieve data to/from database. It uses SQL (Structured Query Language) and has been publicly available since 1996.

2.3.11 Hypertext Transfer Protocol (HTTP)

HTTP is a protocol that used to send commands from the web browser to the web server and send files or data from the web server to the web browser. Furthermore, generally web browsers also support various types of protocols, such as ftp: for file transfer protocol (FTP), rtsp: for real time streaming protocol (RTSP), and https: for encrypted http (SSL) versions.

HTTP communicates over TCP / IP. HTTP clients connect to the HTTP server using TCP. After making a connection, client can send an HTTP request message to the server. HTTP is used to send requests from web clients (browsers) to the web server, returned to web content (web pages) from the server to the client.

HTTP is not limited to use with TCP / IP, although HTTP is one of the most popular TCP / IP application protocols over the Internet. And indeed HTTP can be implemented over other protocols over the Internet or on other networks.

2.4 Unified Modeling Language

Hassan Gomaa (2011, p. 3-4) says that UML is standardized is standardized modelling language to describe object model in system application through graphic and notation, a model to describe result of object-oriented analysis and design.

Unified Modeling Language (UML) was developed for standardized the graphical language for a system or software that object-oriented paradigm.

This graphical language helps the developers to obtain better understanding to the software, to communicate with team, and see it from different perspective.

2.4.1 Use Case Diagram

Use Case Diagram captures a particular functionality of a system.

Use case diagram can be used to visualize the interactions among users/actors and admin, to gather the requirements for the system (p.15), to get the user’s point of view, and to identify the external and internal factors in the system. This diagram consists of actors, use cases and their relationships.

There are two relationships in use case diagram:

• Extend

Extend is the relationship that specifies extending use case based on the base use case and that extending use case is represents the optional behavior or alternative path (p.85). It is often advised, to reduce the usage of extend use case to avoid using extend to simplify a use case diagram. To describe the extend use case, we can draw an arrow to the base use case. Extend relationship also shows the conditional behavior of base use case that will executed only in under circumstances.

• Include

Include could be used to splitting the large use case into several small use cases (p.82). The base use case is dependent of the included use case(s). In include relationship, the base case must be done first before the included use case occurs. To describe the include use case, we can draw an arrow to the included use case(s).

Figure 2. 1 Use Case and Notation Example

[pic]

Figure 2. 2 Example of Use Case

2.4.2 Activity Diagram

Basically, activity diagram describing types of activity flow that we will design and build in a system. Each flow should be having the starting point, decision that might happen on system, along with end point of the system. The basic purpose of activity diagram is capture the dynamic behavior of the system.

Hassan Gomaa (2011, p.89) states that Activity Diagram is diagram that are used to describe the flow and sequence in activity in an application. It can be used as a tool to describe use case model precisely, as it can show the sequences inside a model, or even describe alternative sequences besides the main sequence. One Activity diagram can also be used to describe more than one use case model.

Figure 2. 3 Example of Activity Diagram

2.4.3 Entity Relationship Diagram

According to Gary Shelly, Harry J. Rosenblatt (2009, p. 398), Entity Relationship Diagram or also known as ERD is a model that describe the logical relationship and interactions among the system (p.402). An ERD represents the overall view of a system and a blueprint for creating the physical data structure.

In designing an Entity Relationship Diagram, we use key fields to maintain, access and make the data structure keep organized. There are four types of key fields:

• Primary Key, is a unique field owned by particular member of an entity to identify them. For example, customer ID.

• Candidate Key, is a key that can be a primary key, because sometimes we have choice of field that we can make as primary key, that key is called candidate key.

• Foreign Key, is a key that does not need to be unique, a field in a table that have to be a match with a primary key from another table to build a relationship between two tables.

• Secondary Key, is a key that its value also does not have to be unique, we can use secondary key to access or retrieve access. Secondary key also can be used to sort the data and display it in a certain order, for example, we want to display customer based on their ZIP code.

Also there are some kinds of relationship in Entity Relationship Diagram:

• A one-to-one relationship, occurs when each entity in a class just need exactly one entity as well from other class. For example, the relationship between vehicle ID number and a vehicle. One ID belongs to just one vehicle and one vehicle must be only having one ID.

• One-to-many relationship, for instance, the relationship between employees and company. A company can have many employees, but employees can only work for one company.

• Or many-to-many relationship, for example the relationship between students and classes. One student can have many classes, and one class can have many students as well.

[pic]

Figure 2. 4 Example of Entity Relationship Diagram

And for indicate the cardinality, writers use the Crow’s foot style because of its readability and efficiency.

Figure 2. 5 Notation Table for Crow's Foot

2.4.4 Class Diagram

Class Diagram is a static diagram. Besides for visualizing, describing and documenting different aspects of a system, class diagram also can be used for constructing executable code of the software application, describe the responsibilities of the system, and describing the collaboration among the elements of static view.

This diagram shows the classes and their relationships on the system, such as inheritance, aggregation and association, also the operations and attributes of the classes.

There are three parts in a class:

• Name: Name of a class written in the first row of class shape. The name of the class should be unique et meaningful to describe the class

• Attributes: The list of attributes that own by a class written in second row of class shape and each attribute listed in different line. Attributes should be clearly identified and specified, unnecessary attributes will just make the class complicated.

• Methods: Method also known as operation and written in the third row of the class shape. Each method should separate in different line and describe what responsibility that can done by that class.

The following are types of relationship that are possible in Class Diagram:

• Association and Multiplicity

If two classes must communicate with each other, they can be linked and represented by a connector, a line. We also can indicate the multiplicity between each class by adding the multiplicity adornment on the line.

Multiplicity also known as Cardinality. Multiplicity is the number of objects of a class that are related to another object from the other class that are associated with that class (p.96).

Some typical examples of multiplicity:

– One to one:

This relationship occurs when the association is only one to one in both directions. For example, the relation between company and CEO, a company can only lead by one CEO while one CEO can only work in one company.

[pic]

Figure 2. 6 Example of One to One Relationship

One to many:

One to many is the relationship that happens when one object can relate to other object in many numbers. For example, the relationship between bank and accounts, one bank has many accounts, but one account can only have one bank.

[pic]

Figure 2. 7 Example of One to Many Relationship

– Many to many:

Many to many occurs when the relation is flows in many numbers in both directions. For instance, the relations between projects and employees, one employees can have many projects, and one project also owned by many employees.

[pic]

Figure 2.8 Example of Many to Many Relationship

• Aggregation and Composition

Aggregation occurs when the sub-class is not strongly dependent on the lifecycle in the model. For instance, the relation between books and library, when the library dissolve, the books will remain so. To represent the aggregation, we can use a line with the white diamond shape end near the parent class.

Composition is similar with the aggregation, but in composition, when you dissolve the parent class, the child class will also destroy. To represent composition, we draw a line with the black diamond shape end near the parent class.

Figure 2. 9 Example of Aggregation in Class Diagram

Figure 2. 10 Example of Composition in Class Diagram

• Generalization or Specialization

Generalization or usually known as Inheritance relationship is the process of sub-class or also known as child class accessing the attributes and methods of parent class or super class. Some class may be having similar attributes and some different also.

Figure 2. 11 Example f Generalization in Class Diagram

• Visibility

Visibility visualize whether the element of certain class is visible or not from outside the class. As follows are some notation on visibility:

- (+) symbol: means public visibility, the element is visible from outside the class.

- (-) symbol: means private visibility, the element is hidden outside the class.

- (#) symbol: means protected visibility, the element can be visible for all its child classes or subclasses.

- Figure 2. 12 Summary of Notation in Class Diagram

2.4.5 Sequence Diagram

As states by Hassan Gomaa (2011, p.89), Sequence diagram is used by developers to understand the requirements for a new system. Sometimes known as event diagrams or event scenarios.

Sequence diagram describe the interactions among classes on the system regarding to the exchange of messages over time, this type of diagram is a good way to visualize various runtime scenarios and can help to estimate how the system will respond and behave.

Figure 2. 13 Example of Sequence Diagram

2.5 Model View Controller (MVC)

MVC is short of Model-View-Controller, a standard design pattern that many programmers already familiar. This pattern helps developer to develop an application that separate each different aspect of the application, which helpful to manage the complexity when we develop an application and make developer to focus in just one aspect of implementation at a time.

The MVC pattern include these three components:

• Model

The purpose of model object is to retrieve and store model state in the database.

• View

The purpose of View object is to display the user interface of the application.

• Controller

Controller handles the user interaction such as user input, works as the connector. It works with a model object and select which view to display on the interface.

2.6 Human and Computer Interaction

2.6.1 Eight Golden Rules

Shneider and Plaisant (2010, p.88) states that there are eight principles in designing the interface called golden rules, which are:

1. Strive for Consistency

When we make the Use Interface, we have to make a consistent sequence or standard rules that shows the consistency in your website, for instance, the sequence of writing, font family, color scheme, language, etc.

2. Cater to Universe Usability

Knowing who is the user and target of the software, make the software readable and usable for the beginner, add the explanation or tutorial. This feature can improve the functionality of the interface design and increasing the system quality.

3. Offer Informative Feedback

Every website should be having a feedback system that give them a warning or informative sign whenever user do the mistake. Also, the warning should be human-readable.

4. Design Dialog to Yield Closure

Don’t make user hanging, for instance when user fill the registration form and finish, give them “Thank You” message or an invoice of purchase as the feedback that they already done the registration.

5. Offer Simple Error Handling

User doesn’t like to be told if they’re wrong. The system should be made to avoid the mistake as small as possible, but when unavoidable errors occur, make sure user get the simplest step of mechanism, and human-readable to fix the problem that user made.

6. Permit Easy Reversal of Actions

When user do the error accidentally, they should be allowed to go back to the previous state, instead of they have to start over the process. For instance, the “Undo” icon on Microsoft Word.

7. Support Internal Locus of Control

When error occurs on the program and it started to unexpectedly crashed, give user the power to choose whether they want to continue running the program or force exit.

8. Reduce Short-Term Memory Load

Human is the creature with the limited capacity of short-term memorizing. Therefore, we have to make the website or system as simple as possible, without having to make user confused with the stacks of menus.

2.7 Learning Management System

According to Nor Azura Adzharuddin and Lee Hwei Ling, Learning Management System or usually known as LMS, usually used in community or higher institution as an online portal that connects lectures and students.

In various implementations, we can find features in LMS that can organize the certification, educational sequence planning, and competency management.

In this realization, LMS will be the medium between teacher or may called facilitator and student or participant, LMS's server will provide the learning material to the students, and also has the control to manage the content from many client applications or plug-ins which may be cannot communicate through typical webpage request responses and commands.

LMS also allows lectures to interact with their students by sharing the learning content and resource, then let them discuss it in the forum discussion.

A well-controlled records drift in an educational institution can result in the improvement of instructional standards and can make certain more equality.

2.8 Gamification

2.7.1 The Definition of Gamification

According to Kiryakova,G. (2014, p.1), “Gamification is an integration of game elements and game thinking in activities that are not games”.

Sangkyun Kim, Kibong Song, Barbara Lockee, & John Burton (2018, p. 27) states that gamification is activities that are related each other and systematic to solve problem by implementing several characteristics of game elements in the process.

Gamification was created because of teachers realized that there is a lack of motivation in students to participate in education activities, such as learning, homework. Hence, they tried the new approach to increase the student's engagement and motivation, by implementing the elements and mechanics of game in the learning process.

2.7.2 The Implementation of Gamification

Research conducted by Caitlin Holman, Stephen Aguilar, Barry Fishman of the University of Michigan in 2013 entitled "GradeCraft: What Can We Learn from a Game-Inspired Learning Management System?". This research discusses GradeCraft application design to develop Game experience in education for students, and also apply learning analytic and also capture information mentioned in this case as student "process" data. In this study discussed the use of gamification in the Learning Management System, as well as the collection and appearance of data obtained from student access data and also gamification components such as badges for teachers to learn more about student learning process, and not concentrated on the value.

Research conducted by Gabriela Kiryakova, Nadezhda Angelova, and Lina Yordanova in Proceedings of 9th International Balkan Education and Science Conference in 2014 entitled "GAMIFICATION IN EDUCATION". This study discusses the lack of motivation and participation of students in participating actively in a learning process. By applying the video game elements into learning then we can follow the development of student learning process where student development is important in achieving the learning objectives. With this, Gamification is an effective technique to improve the spirit, motivation, attitude and behavior towards learning.

2.9 Research Methodology

2.9.1 Agile Development

According to Pressman (2010, p. 71-73) the role of person or team inside an agile development team is very important and will have an effect on software development. Agile development focuses on ability on each individual. Ability required for build a team in agile development, namely:

a. Competence

 Every person in a team must their own talent, skill of the software engineering required, and overall knowledge of the selected process.

b. Common focus

 Each individual has different tasks in a team and each individual must be able to focus on one goal, which is provide the software to the customer accordingly with the promised deadline.

c. Collaboration

  Team members should be able to work with stakeholders as well as other members, in order to analyze and using information that has been communicated.

d. Decision-making abilities

  Each team is given the authority to make decisions in the project, so it takes the ability to making decisions well and beneficial for each stakeholders.

e. Fuzzy problem-solving ability

  Every software manager must realize that an agile team will continually deal with ambiguity and change that happen. Therefore, the team must be able to solve every problem are there, because not necessarily the problem solved is now a problem to be solved later on.

f. Mutual trust and respect

Members in a team must have a sense of trust and respect to form a strong team.

g. Self-organization

  In the team must be able to organize the team in arranging the work to be completed. Then the team should be able to set up the best process for accommodate the environment and manage the best work schedule so it can reach the specified time.

2.9.2 Scrum Development

According to Pressman (2010, p. 82) scrum is a rapid method of software engineering. The principle of scrum is in accordance with the principles contained in rapid device development methods used to guide software development activities, such as: fulfillment of needs, analysis, design, and the delivery. The flow of the scrum process can be seen below (Pressman, 2010, p. 83):

Figure 2. 14 Scrum Development

According to Pressman (2010, p. 83), at every stage of development, work activities are enclosed within a process pattern called sprint. Each process pattern that occurs, there will be a set of the following activities:

a. Backlog

A priority detail on the features to be built on a project. The contents of the feature can be added at any time.

b. Sprints

A collection of work activities undertaken to meet the needs defined in the backlog and must be completed at a predetermined time (usually in 30 days). Changes cannot be made in the sprint process so each team will work in a stable environment.

c. Scrum Meeting

Daily meetings by the Scrum team to discuss what has been done since the last meeting, plan and discuss the problems (usually done in 15 minutes).

As stated by Pressman (2010, p. 84), "three questions are asked and answered by all team members":

• What did you do since last team meeting?

• What obstacles are you encountering?

• What do you plan to accomplish by the next team meeting?

d. Demos

Addressed the result of functionality that has been implemented so that it can be evaluated by the user. The demo must be a feature that has been completed within the specified time.

2.10 Testing

Software testing is a technique to finding an as yet undiscovered error. The success testing is the one that discover and fix that yet undiscovered error. Software testing also used to finds the strength and limitations of the system, the well-tested will increase the confidence of users and clients in using the product.

However, Arunkumar states in his book that “Software Testing does not guarantee bug free product” (Arunkumar Khannur,2014 p.34).

2.10.1 Black Box Testing

Black Box Testing or also known as Requirements-based (Functional or Behavioral) Test Design just focuses on the functional of the system and compares it with specified requirements. Black box testing has no concern to how the mechanism inside the software works, as long as it executes the command and gives the right output.

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download