audio qr for class attendance

AUDIO QR FOR CLASS ATTENDANCE

Chin Ching Voon

Bachelor of Computer Science with Honors

(Computational Science)

2020

AUDIO QR FOR CLASS ATTENDANCE

CHIN CHING VOON

This project is submitted in partial fulfilment of the requirements for the degree of

Bachelor of Computer Science with Honors

(Computational Science)

Faculty of Computer Science and Information Technology

UNIVERSITI MALAYSIA SARAWAK

2020

AUDIO QR UNTUK KEHADIRAN KELAS

CHIN CHING VOON

Projek ini merupakan salah satu keperluan untuk

Ijazah Sarjana Muda Sains Komputer dan Teknologi Maklumat

(Sains Komputan)

Fakulti Sains Komputer dan Teknologi Maklumat

UNIVERSITI MALAYSIA SARAWAK

2020

i

DECLARATION

I hereby declare that the project report entitled “Audio QR For Class Attendance” is my original

work except for the cited references. I declare that this report has not been submitted in a previous

application for award of a degree.

Signed,

12 – 12 – 2019 …….………………………………………. ……………….………………………….

CHIN CHING VOON Date

Faculty of Computer Science and Information Technology

Universiti Malaysia Sarawak

ii

ACKNOWLEDGEMENT

The completion of my final year project would have been impossible without the supporting of

material and moral from various people. It is my obligation to express my deep gratitude for them.

First of all, I would like to thank my supervisor, Dr. Chiew Kang Leng for his effective supervision,

availability and professional advice. I am appreciated that my supervisor tried to make time for

meeting and discussion even though with his hectic schedule.

I am greatly indebted to the final year project coordinator, Professor Dr. Wang Yin Chai for guiding

and providing useful and important information. I would like to thank to the respondents that has

filled in the questionnaire. I extend my gratitude for my family, friends and course mates, who has

been giving encouragement, moral support and positive thinking. My appreciation finally goes to

the lecturers who taught me in UNIMAS. All the knowledge taught by lecturers helped me a lot to

complete this project.

iii

ABSTRACT

Check-in attendance is common and important in every stage of our life. In our working life, we check-in

and check-out when come on and off duties. This applies to student as well in taking class attendance. Being

punctual is very important to improve efficiency and help people to build their personal image. With the

rapid growth in technology, there are various existing ways to take attendance. This study investigates the

most effective and suitable technology to be used on attendance taking system for the targeted UNIMAS

students. During the study of this proposed system, a questionnaire regarding the current UNIMAS

attendance system has been distributed to the students in UNIMAS. The results of the questionnaire are

analyzed so that the attendance taking system can be improved to be more effective. The purpose of this

project is to take class attendances by implementing the audio-based technology and record it to the system.

By applying audio-based technology to the attendance system, lecturer can emit high-frequency sound. The

high-frequency sound is to be received by the students to encode it and check-in their attendances. This

project is proposed to solve the common problems faced by the students and lecturers in UNIMAS when

using the current UNIMAS QR attendance system.

iv

ABSTRAK

Pengambilan kehadiran adalah biasa dan penting pada setiap peringkat dalam kehidupan kita. Kita akan

mendaftar kehadiran apabila bermula untuk kerja atau menghadiri ke kelas. Kita haruslah menepati masa

untuk meningkat kecekapan kerja dan imej kita. Dengan perkembangan teknologi yang pesat pada hari ini,

terdapat beberapa cara yang berbeza untuk mengambil kehadiran. Projek ini mengaji teknologi yang paling

cekap dan sesuai untuk digunakan dalam pembinaan sistem kehadiran UNIMAS. Soal selidik yang berkaitan

dengan sistem kehadiran UNIMAS kini telah diedarkan kepada siswa-siswi UNIMAS. Keputusan soal

selidik akan dianalisis supaya kecekapan sistem kehadiran UNIMAS kini dapat dipertingkatkan. Tujuan

projek ini adalah untuk melaksanakan sistem yang mengambil kehadiran dengan menggunakan teknologi

audio. Dengan menggunakan teknologi audio, pensyarah boleh memancarkan bunyi berfrekuensi tinggi.

Bunyi berfrekuensi tinggi yang dipancarkan akan diterima oleh siswa-siswi dengan menggunakan telefon

pintar. Selepas bunyi berfrekuensi tinggi itu dikodkan, kehadiran siswa-siswi akan diambil. Projek ini

bertujuan untuk menyelesaikan masalah yang dihadapi oleh siswa-siswi dan pensyarah UNIMAS semasa

menggunakan sistem kehadiran UNIMAS kini.

v

TABLE OF CONTENTS

Declaration ........................................................................................................................................ i

Acknowledgement ........................................................................................................................... ii

Abstract .......................................................................................................................................... iii

Abstrak ............................................................................................................................................ iv

Table of contents .............................................................................................................................. v

List of Tables .................................................................................................................................... x

List of Figures ............................................................................................................................... xii

CHAPTER 1 Introduction ............................................................................................................ 1

1.1 Introduction ............................................................................................................................ 1

1.2 Problem Statement .................................................................................................................. 2

1.3 Scope ...................................................................................................................................... 2

1.4 Objectives ............................................................................................................................... 2

1.5 Methodology ........................................................................................................................... 3

1.5.1 Requirements Planning .................................................................................................... 4

1.5.2 User Design ...................................................................................................................... 4

1.5.3 Construction ..................................................................................................................... 4

1.5.4 Cutover ............................................................................................................................. 4

vi

1.6 Significance of Project ............................................................................................................ 4

1.7 Project Schedule ..................................................................................................................... 5

1.8 Expected Outcome .................................................................................................................. 5

CHAPTER 2 Literature Review ................................................................................................... 6

2.1 Introduction ............................................................................................................................ 6

2.2 Attendance Technologies ....................................................................................................... 6

2.2.1 Quick Response (QR) Code Attendance .......................................................................... 6

2.2.2 Sound Attendance ............................................................................................................ 6

2.2.3 GPS Attendance ............................................................................................................... 7

2.2.4 Manual Click Attendance ................................................................................................ 7

2.2.5 Radio-Frequency Identification (RFID) Attendance ....................................................... 8

2.2.6 Fingerprint Attendance .................................................................................................... 8

2.3 Functionalities ........................................................................................................................ 8

2.3.1 UNIMAS QR Code Application/ UNIMAS Now ........................................................... 8

2.3.2 CourseKey ........................................................................................................................ 9

2.3.3 Attendance Taker ........................................................................................................... 11

2.3.4 Alora .............................................................................................................................. 12

2.3.5 Scan Attendance Manager (SAM) ................................................................................. 12

2.4 User Interface ....................................................................................................................... 13

vii

2.4.1 UNIMAS Attendance System ........................................................................................ 13

2.4.1.1 UNIMAS Now/ Receiver Interface ........................................................................ 13

2.4.1.2 UNIMAS QR Code Application/ Sender Interface ................................................ 13

2.4.2 CourseKey ...................................................................................................................... 15

2.4.2.1 Receiver Interface of CourseKey ........................................................................... 15

2.4.2.2 Sender Interface of CourseKey .............................................................................. 16

2.4.3 Attendance Taker ........................................................................................................... 18

2.4.4 Alora .............................................................................................................................. 19

2.4.5 Scan Attendance Manager (SAM) ................................................................................. 20

2.5 Discussion ............................................................................................................................. 21

2.5.1 Comparing Attendance Technology Used ..................................................................... 21

2.5.2 Comparing Functionalities ............................................................................................. 22

2.6 Summary ............................................................................................................................... 26

CHAPTER 3 Requirement Analysis and Design ....................................................................... 27

3.1 Introduction .......................................................................................................................... 27

3.2 Rapid Application Development .......................................................................................... 27

3.2.1 Requirements Planning .................................................................................................. 28

3.2.1.1 Analysis of Current System .................................................................................... 28

3.2.1.2 Analysis of Proposed System ................................................................................. 29

viii

3.2.1.3 Requirement Elicitation (Questionnaires) .............................................................. 30

3.2.1.4 Design ..................................................................................................................... 33

3.2.2 User Design .................................................................................................................... 55

3.2.3 Construction ................................................................................................................... 55

3.2.4 Cutover ........................................................................................................................... 56

3.3 Summary ............................................................................................................................... 56

CHAPTER 4 Implementation and Testing ................................................................................. 57

4.1 Introduction .......................................................................................................................... 57

4.2 Environment Setup ............................................................................................................... 57

4.2.1 Installation of Used Software ......................................................................................... 57

4.2.2 Server-Side Setup ........................................................................................................... 58

4.3 Implementation on Mobile Side ........................................................................................... 59

4.3.1 Software Development Kit (SDK) Setup ....................................................................... 59

4.3.2 Database Connectivity ................................................................................................... 60

4.3.3 Login and Register Functions in Mobile Side ............................................................... 62

4.3.4 Play and Pause Functions ............................................................................................... 65

4.3.5 Receive Function ........................................................................................................... 69

4.4 Implementation on Website .................................................................................................. 73

4.4.1 Login and Register Functions in Website ...................................................................... 73

ix

4.4.2 Course Management Function ....................................................................................... 75

4.4.3 Class Management Function .......................................................................................... 77

4.4.4 Attendance Sheet Management Function ...................................................................... 79

4.5 Functional Testing ................................................................................................................ 81

4.5.1 Functional Testing for Mobile Side ............................................................................... 81

4.5.2 Functional Testing for Website ...................................................................................... 84

4.6 Usability Testing................................................................................................................... 88

4.7 Summary ............................................................................................................................... 93

CHAPTER 5 Conclusion and Future Work ................................................................................ 94

5.1 Introduction .......................................................................................................................... 94

5.2 Project Achievement ............................................................................................................. 94

5.3 Project Limitations ............................................................................................................... 96

5.4 Future Works ........................................................................................................................ 96

5.5 Conclusion ............................................................................................................................ 97

References ...................................................................................................................................... 99

Appendix A .................................................................................................................................. 101

Appendix B .................................................................................................................................. 102

Appendix C .................................................................................................................................. 122

x

LIST OF TABLES

Table 2.1: Comparison of functionalities between the existing systems and proposed system ..... 22

Table 2.2: Summarization of user interface and experience of existing system ............................ 24

Table 4.1: Test Case of Register Function in Mobile Side ............................................................ 81

Table 4.2: Test Case of Login Function in Mobile Side ................................................................ 82

Table 4.3: Test Case of Emitting the Inaudible Audio ................................................................... 82

Table 4.4: Test Case of Pausing the Emitting Audio ..................................................................... 83

Table 4.5: Test Case of Receiving Audio and Taking Attendance ................................................ 83

Table 4.6: Test Case of View Taken Attendance History .............................................................. 84

Table 4.7: Test Case of Course Management ................................................................................ 85

Table 4.8: Test Case of Class Management ................................................................................... 85

Table 4.9: Test Case of Attendance Management .......................................................................... 87

Table 5.1: Project Achievements versus Objectives ...................................................................... 94

Table 5.2: Descriptions and Reasons of the Future Works ............................................................ 96

Table B.1: Use Case Description of Login .................................................................................. 102

Table B.2: Use Case Description of Register Account ................................................................ 102

Table B.3: Use Case Description of View Profile ....................................................................... 104

Table B.4: Use Case Description of Edit Profile ......................................................................... 104

Table B.5: Use Case Description of Take Attendance ................................................................. 105

Table B.6: Use Case Description of View History ...................................................................... 106

Table B.7: Use Case Description of Manage Course ................................................................... 107

Table B.8: Use Case Description of Add Course ......................................................................... 107

Table B.9: Use Case Description of Delete Course ..................................................................... 108

xi

Table B.10: Use Case Description of View Course Detail .......................................................... 109

Table B.11: Use Case Description of Edit Course ....................................................................... 110

Table B.12: Use Case Description of Manage Class ................................................................... 111

Table B.13: Use Case Description of Add Class ......................................................................... 111

Table B.14: Use Case Description of Delete Class ...................................................................... 112

Table B.15: Use Case Description of View Class Detail ............................................................. 113

Table B.16: Use Case Description of Manage Attendance .......................................................... 114

Table B.17: Use Case Description of Add Attendance Sheet ...................................................... 114

Table B.18: Use Case Description of Edit Attendance Sheet ...................................................... 115

Table B.19：Use Case Description of Delete Attendance Sheet ................................................. 116

Table B.20: Use Case Description of View Attendance Sheet .................................................... 117

Table B.21: Use Case Description of Emit High Frequency Sound ............................................ 118

Table B.22: Use Case Description of Receive High Frequency Sound ....................................... 118

Table B.23: Use Case Description of Manage Student ................................................................ 119

Table B.24: Use Case Description of Add Student to Class ........................................................ 120

Table B.25: Use Case Description of Delete Student from Class ................................................ 121

Table C.1: Test Case of Register User on Website ...................................................................... 122

Table C.2: Test Case of Login on Website .................................................................................. 122

Table C.3: Test Case of Edit Profile ............................................................................................ 123

Table C.4: Test Case of Change Password .................................................................................. 123

xii

LIST OF FIGURES

Figure 1.1: Processes of the Rapid Application Development (Kissflow, 2019) ............................ 3

Figure 2.1: Display portal of QR code for students to scan ............................................................. 9

Figure 2.2: Page of creating assessment (How can we help?, n.d.) ............................................... 10

Figure 2.3: Interface of sending question to lecturer (How can we help?, n.d.) ............................ 11

Figure 2.4: Interfaces of UNIMAS Now ........................................................................................ 13

Figure 2.5: Home page of UNIMAS QR Code Application .......................................................... 14

Figure 2.6: Page of creating new attendance sheet in UNIMAS QR Code Application................ 14

Figure 2.7: Listing of attendance sheets ......................................................................................... 15

Figure 2.8: Interface of CourseKey mobile application (How can we help?, n.d.) ........................ 16

Figure 2.9: Page for managing the courses (How can we help?, n.d.) ........................................... 16

Figure 2.10: Page for emitting sound to take attendance (How can we help?, n.d.) ...................... 17

Figure 2.11: Page for managing student attendances (How can we help?, n.d.) ............................ 18

Figure 2.12: Page for checking in using alphanumeric code (How can we help?, n.d.) ................ 18

Figure 2.13: Interfaces of Attendance Taker application ............................................................... 19

Figure 2.14: Interfaces of Alora application .................................................................................. 20

Figure 2.15: Interfaces of SAM application ................................................................................... 21

Figure 3.1: Processes of the Rapid Application Development (Kissflow, 2019) .......................... 27

Figure 3.2: Result for Questionnaire Question 1 ............................................................................ 30





xiii

Figure 3.7: System Architecture Design ........................................................................................ 33

Figure 3.8: Use Case Diagram ....................................................................................................... 34

Figure 3.9: Sequence Diagram of Take Attendance ...................................................................... 35

Figure 3.10: Sequence Diagram of Emit Sound Frequency ........................................................... 35

Figure 3.11: Sequence Diagram of Manage Class ......................................................................... 36

Figure 3.12: Sequence Diagram of Receive Sound and Record Attendance ................................. 36

Figure 3.13: Sequence Diagram of Delete Attendance Sheet ........................................................ 37

Figure 3.14: Sequence Diagram of View and Edit Attendance Sheet ........................................... 37

Figure 3.15: Sequence Diagram of User Login .............................................................................. 38

Figure 3.16: Sequence Diagram of User Registration .................................................................... 38

Figure 3.17: Sequence Diagram of Add Course ............................................................................ 39

Figure 3.18: Sequence Diagram of View and Edit User Profile .................................................... 39

Figure 3.19: Sequence Diagram of View History .......................................................................... 40

Figure 3.20: Sequence Diagram of Add Course ............................................................................ 40

Figure 3.21: Sequence Diagram of Delete Course ......................................................................... 41

Figure 3.22: Activity Diagram for User as Student ....................................................................... 42

Figure 3.23: Activity Diagram for User as Lecturer to Manage Course ........................................ 43

Figure 3.24: Activity Diagram for User as Lecturer to Manage Class .......................................... 44

Figure 3.25: Activity Diagram for User as Lecturer to View Profile ............................................ 45

Figure 3.26: Class Diagram ............................................................................................................ 46

Figure 3.27: Wireframe for Student Login Page ............................................................................ 47

Figure 3.28: Wireframe for Student Take Attendance ................................................................... 47

Figure 3.29: Wireframe for Receiving Audio Frequency .............................................................. 48

xiv

Figure 3.30: Wireframe for Student View Attendance History ..................................................... 48

Figure 3.31: Wireframe for Lecturer to Emit Sound Frequency .................................................... 49

Figure 3.32: Wireframe for Lecturer Login Page .......................................................................... 50

Figure 3.33: Wireframe for Class List ........................................................................................... 50

Figure 3.34: Wireframe for Add New Class .................................................................................. 51

Figure 3.35: Wireframe for Course List ......................................................................................... 51

Figure 3.36: Wireframe for Add New Course ................................................................................ 52

Figure 3.37: Wireframe for Add/Delete Student ............................................................................ 52

Figure 3.38: Wireframe for List of Attendance Sheet .................................................................... 53

Figure 3.39: Wireframe for Create New Attendance Sheet ........................................................... 53

Figure 3.40: Wireframe for Edit Attendance Sheet and Take Attendance Manually .................... 54

Figure 3.41: Wireframe for Lecturer View Profile ........................................................................ 54

Figure 3.42: Wireframe for Lecturer Edit Profile .......................................................................... 55

Figure 4.1: Database Design of the Proposed System ................................................................... 58

Figure 4.2: Application of CHIRP_APP_KEY, CHIRP_APP_SECRET and

CHIRP_APP_CONFIG .................................................................................................................. 60

Figure 4.3: Permission Internet in AndroidManifest File .............................................................. 61

Figure 4.4: Constant Class in Java ................................................................................................. 61

Figure 4.5: Part I of User Login Function in Mobile Site .............................................................. 62

Figure 4.6: SharedPreferences Editor ............................................................................................. 63

Figure 4.7: UserLogin.php to Handle the POST Request .............................................................. 63

Figure 4.8 Interface of Register Account Page in Mobile Site ...................................................... 64

Figure 4.9: Interface of Login Page in Mobile Site ........................................................................ 65

xv

Figure 4.10: Checking of User Identity .......................................................................................... 65

Figure 4.11: Interface of Home Page for Lecturer ......................................................................... 66

Figure 4.12: Function of getAttendanceDetail in HomeFragment Class ....................................... 66

Figure 4.13: Function of sendPayload in HomeFragment Class ................................................... 67

Figure 4.14: Activity when Play Button is Clicked ....................................................................... 68

Figure 4.15 Pause Button and Audio is Emitting ........................................................................... 68

Figure 4.16: Interface of Home Page for Student .......................................................................... 69

Figure 4.17: Function of bytesToHex ............................................................................................ 70

Figure 4.18: Function of takeAttendance ....................................................................................... 71

Figure 4.19: Interface of History Page ........................................................................................... 71

Figure 4.20: Get User History By Using HTTP REQUEST .......................................................... 72

Figure 4.21: Function of getAllAttendanceHistory in DbOperations Class .................................. 72

Figure 4.22: DbConnect Class ....................................................................................................... 73

Figure 4.23: Login Function in DbOperations Class ..................................................................... 74

Figure 4.24: Register Function in DbOperations Class.................................................................. 74

Figure 4.25: Validation of Password Using JavaScript .................................................................. 74

Figure 4.26: Interface of Course Management Page ...................................................................... 75

Figure 4.27: Front End of Modal Pop Up for Add New Course .................................................... 76

Figure 4.28: Functions in CourseOperation Class ......................................................................... 77

Figure 4.29: Interface of Manage Enrolment of Student in Class .................................................. 78

Figure 4.30: Student Enrolment Function Using AJAX ................................................................ 79

Figure 4.31: Interface of Attendance Management Page ............................................................... 79

Figure 4.32: Some of the Attendance Management Functions in AttendanceOperation Class ..... 80

xvi

Figure 4.33: Some of the Attendance Management Functions in AttendanceOperation Class ..... 80

Figure 4.34: Question 1 of Feedback Form .................................................................................... 89








Figure 4.42: Additional Comments on the Feedback Form ........................................................... 93

Figure A.1: Gantt Chart of FYP ................................................................................................... 101

1

CHAPTER 1 INTRODUCTION

1.1 Introduction

In recent times, people use Quick Response (QR) code to send and receive data, payment and so

on. With the rapid development of technology, data can be transferred via sound wave with

speaker and microphone. Audio is not a new technology since there is a technology uses dial-

up modems to connect to internet. QR code is an encoded piece of data while audio QR sends

data encoded in ultrasonic audio (Pagin, 2014). Ultrasonic sound wave is used as a medium by

a device to transmit and receive data to other devices. The frequency of the ultrasonic sound

will be above 20,000Hz which cannot be heard by humans (Goyal, 2019). Audio QR is an early

stage technology, people used this idea for mobile payment, including EBT payment as an

alternative of QR code scanning and NFC. Audio QR works by emitting the ultrasonic sound in

the form of pulses from speaker and the receiver’s microphone is identified by sound frequency

and convert it to original data. There is no identifiable information passes between the two

devices which is more secure compared to other method such as QR code. Near Field

Communication (NFC) is one of the technologies that allow devices to send and receive data at

a close range within 4 cm while audio QR has wider range compare to NFC (Techachyut, 2017).

Audio QR is more convenient compare to QR code because speaker and microphone are

normally use in every smartphone. Google TezAudio is one of the mobile applications that is

using Audio QR technology for payment (Nukala, 2017).

Nowadays, UNIMAS students scan Quick Response (QR) code to take attendance in class which

is environmentally friendly. This is because no paper is used in the process. Through QR code

2

to take attendance, lecturer can record all the attendances easily. This way can track the time

that student scan the QR code but cannot track the actual time they reach class. This is because

the window uses to display the QR code must minimize when class is started which will disturb

the class progress. Therefore, this project is to develop a better system to take attendance in

class which is to use audio-based technology.

1.2 Problem Statement

Attendance using QR code that is displayed on the projector screen will occupy the screen and

prevent the actual class activity. Sometimes, students might have some problems to scan the QR

code and ask lecturer to help them to manual set attendance. To manual set the attendance, lecturer

need to minimize the QR code window and help those students. This causes other students cannot

scan the QR code. Students and lecturers will feel inconvenient when there is a late comer as the

lecturer need to pause the lecture and show the QR code.

1.3 Scope

This project will develop an android mobile application and a web application for UNIMAS

students to take their attendances. UNIMAS students need to install the application to record the

audio that played by mobile phone of the lecturer to take their attendances in class.

1.4 Objectives

The objectives of this project are stated below:

3

- To design a system that does not use and occupy the projector screen so that the class and

attendance taking can be carried out at the same time.

- To utilize audio-based technology for attendance taking.

- To implement an audio QR attendance system.

1.5 Methodology

The Rapid Application Development (RAD) methodology is chosen to develop this proposed

project. Practically, RAD is an agile project management strategy which is popular for the software

or application development (Nagar, 2019). RAD is required more actions and testing. This

methodology is flexible and adaptable to changes which can cut down the project risk (What is

RAD Model? Advantages & Disadvantages, 2019). The process of RAD can be divided into 4 main

phases as shown in Figure 1.1.

Figure 1.1: Processes of the Rapid Application Development (Kissflow, 2019)

4

1.5.1 Requirements Planning

In the initial phase, the project scope and application requirements need to be decided. Developer

will insight the current problem and determine the goals of the project.

1.5.2 User Design

During this phase, design of the system will be determined by the collected requirements. After the

design is came out, supervisor will test the product. Developer collected the feedbacks and refined

it. These steps will keep repeating until the design of the system is satisfactory.

1.5.3 Construction

The design of the system will be converted into the working model. The construction will be much

faster as the satisfactory design is already met in the previous phase. Developer will make sure the

process is working smoothly and the result is satisfying the requirements. Supervisor will still give

input and suggest alteration or changes that can solve the problems that arise.

1.5.4 Cutover

In this final phase, the users and developer will keep testing the system for bug and user training

will proceed if needed. The developed product will move to live production environment in this

phase (Kissflow, 2019).

1.6 Significance of Project

The purpose of this project is to develop a mobile application for UNIMAS students to take their

class attendances by implementing the audio-based technology. With a speaker in the class and the

audio qr for class attendance

Documents