ONLINE ATTENDANCE TRACKING SYSTEM TANG LIANG HAO BACHELOR OF COMPUTER SCIENCE (INTERNET COMPUTING) WITH HONOURS UNIVERSITI SULTAN ZAINAL ABIDIN 2021

Full text

(1)ONLINE ATTENDANCE TRACKING SYSTEM. TANG LIANG HAO. BACHELOR OF COMPUTER SCIENCE (INTERNET COMPUTING) WITH HONOURS UNIVERSITI SULTAN ZAINAL ABIDIN 2021.

(2)

(3) ONLINE ATTENDANCE TRACKING SYSTEM. TANG LIANG HAO. BACHELOR OF COMPUTER SCIENCE (INTERNET COMPUTING) WITH HONOURS. Universiti Sultan Zainal Abidin 2021.

(4) DECLARATION I hereby declare that the report is based on my original work except for quotations and citations, which have been duly acknowledged. I also declare that it has not been previously or concurrently submitted for any other degree at Universiti Sultan Zainal Abidin or other institutions.. _______________________________ Name: Tang Liang Hao Date: 28.1.2021. i.

(5) CONFIRMATION This is to confirm that: The research conducted and the writing of this report were under my supervision. _______________________________ Name:Dr.Wan Suryani Date:. ii.

(6) DEDICATION First of all, I would like say thank you to my supervisor, Dr. Wan Suryni Binti Wan Awang because with guidance, the advice, and the thoughtful ideas are given me the. opportunity to prepare this report successfully. Besides, my gratitude is also to my friends who share ideas, opinions, knowledge, and reminders. They helped me figuring out my every question that was important to me in completing this report. Thanks also to my beloved mother and father always supporting me and give me motivated to prepare for this report for Final Year Project. I would like to take the opportunity to thank all lecturers of the Informatics and Computing Faculty for lending their helping hand to me by advising me and sharing ideas and opinions in making this report successful. Thank you.. iii.

(7) ABSTRACT Online Attendance Tracking System was developed for the student and lecturer in Unisza. Existing online attendance collecting way does not have tracking features. This system may help lecturer to collect attendance data uniformly at one system and hence provide tracking feature for avoiding cyber truancy during online learning. This system will use TOTP algorithm to collect attendance and tracking student status. Development model using to develop this system is incremental development model which consists the planning stage, analysis stage, design stage, implementation stage, testing stage, evaluation stage and deployment stage. The use of incremental development model is for ensuring the development of the system can be runs smoothly and according to planning.. iv.

(8) CONTENTS PAGE DECLARATION CONFIRMATION DEDICATION ABSTRACT CONTENTS LIST OF TABLES LIST OF FIGURES LIST OF ABBREVIATIONS CHAPTER 1 INTRODUCTION 1.1 Introduction 1.2 Project Background 1.3 Problem Statement 1.4 Objectives 1.5 Scope 1.6 Limitation of Work 1.7 Expected Result 1.8 Activities, Milestones (Gantt Chart) 1.9 Summary of the Chapter CHAPTER 2 LITERATURE REVIEW 2.1 Introduction 2.2 Existing System 2.3 Proposed System 2.4 Advantage of Proposed System 2.5 Architecture 2.5.1 TOTP Algorithm 2.5.2 TOTP in Recording Attendance 2.5.3 TOTP in Anti Cyber Truancy 2.5.4 Programming Language 2.5.5 Web Framework 2.5.6 Database 2.6 Related Method of Attendance Tracking System 2.7 Comparison 2.8 Conclusion CHAPTER 3 METHODOLOGY 3.1 Introduction 3.2 Chosen Methodology 3.3 Stages in incremental Development Model 3.4 Hardware and Software Requirement 3.5 ER Diagram (ERD) 3.6 Class Diagram 3.7 Data Flow Diagram (DFD) 3.8 Use Case 3.9 Prototype 3.9.1 Main Page 3.9.2 Student Page v. i ii iii iv v vii viii x 1 1 1 2 3 3 3 3 4 5 6 6 7 7 8 8 8 9 9 10 10 10 11 11 12 13 13 13 13 17 17 18 19 22 23 23 24.

(9) 3.9.3 Lectuer Page 3.9.4 Admin Page 3.10 Project Plan REFERENCES. 27 30 32 33. vi.

(10) LIST OF TABLES. Table No.. Title. Page. Table 2.1. Comparison Table. vii. 11-12.

(11) LIST OF FIGURES. Figure No.. Title. Page. Figure 1.1. Activity of FYP1. 4. Figure 1.2. Gantt chart of FYP1. 5. Figure 3.1. ERD of Online Attendance Tracking System. 17. Figure 3.2. Class Diagram of Online Attendance Tracking System. 18. Figure 3.3. DFD of student. 19. Figure 3.4. DFD of lecturer. 20. Figure 3.5. DFD of admin. 21. Figure 3.6. Use Case Diagram. 22. Figure 3.7. Login Page. 23. Figure 3.8. Sign Up Page. 23. Figure 3.9. Student Page. 24. Figure 3.10. Student’s Course Page. 24. Figure 3.11. Student’s Course Page (Con). 25. Figure 3.12. Page For Attendance Signing. 25. Figure 3.13. Page For Activeness Status Proving. 26. viii.

(12) Figure 3.14. Lecturer Page. 27. Figure 3.15. Lecturer’s Course Page. 27. Figure 3.16. Attendance Record Page. 28. Figure 3.17. Activeness Record Page. 28. Figure 3.18. TOTP Activeness Page. 29. Figure 3.19. Add Student In Course Page. 29. Figure 3.20. Admin Page. 30. Figure 3.21. Edit User Page. 30. Figure 3.22. Edit Course Page. 31. Figure 3.23. Gantt Chart of Project Plan. 32. ix.

(13) LIST OF ABBREVIATIONS QR code. Quick Response code. TOTP. Time-based One-time Password. RFID. Radio Frequency Identification. HOTP. HMAC-based One-time Password. HMAC. Hash-based message authentication codes. OTP. One-time Password. PHP. Hypertext Preprocessor. MYSQL. Structured Query Language. x.

(14) CHAPTER 1. INTRODUCTION. 1.1. Introduction 2020 is a special year for us. Throughout this year, many things had changed. and much of our daily routine had restricted. University also affected and most of the university had to turn it into online learning. Online learning had become a trend and a need for all universities. Online Attendance Tracking System, a website whom purposely designed for lecturer and students in Unisza. The aim of developing an Online Attendance Tracking System is to create a reliable system to collect and track students' attendance data on Unisza campus.. 1.2. Project Background Developing Online Tracking Attendance System is a tedious and continuous. process. These processes include thinking about the idea and feature in the system, implement the code, figuring the solution and debugging. This all needs manual works for researching on Internet and are time-consuming. Other than that, the different lecturer had their way to collect attendance data, this provides a good environment for students truanting after signing the attendance. Therefore, Online Tracking Attendance System is important to lecturers which can simplify lecturer work. The purpose of developing this system is to provide a uniform online attendance system to collect data and hence tracking student status as well. This can save lecturers time in managing student attendance.. 1.

(15) 1.3. Problem Statement As online learning had become a part of our daily life instead of face to face. learning like usual we did before. Online attendance recorder had become important to every university. In Unisza, every lecture had their own way to collect data, for example: using Google Form, screenshot the meeting as a prove, spreadsheets and so on. All of these are a good way to collect attendance data but not systematic and efficient. Not only that, this system also provides anti truant feature to lecturer to check the status of students. Online attendance tracking system provides a platform for lecturers to store students’ attendance data and get a view of the latest data from the system. [1] Other than problems involving record management, the second problem is truanting exist in students. Online learning provides the solution for lecturer teaching but came to another problem which is students can easily truanting during an online class. Due to the quote and signal of internet of some students, and also a large amount of student attendance in class, the front cam is not recommended open when online class. This provides a good opportunity for sort of the student to truant. By using Online Attendance Tracking System, lecturer can manually generate a pin code from the system and provide it to the student for inserting in this system for proving their status is not truanting. This can provide an efficient and time-saving way for lecturers to check their student’s status.. 1.4. Objectives The objective of this Online Attendance Tracking System is to provide a. systematic online attendance system which include the function of data record and tracking students’ status. . To study the effective way to avoid cyber truancy. . To develop an online system that is systematic and effective. . To design the architecture of the system and its functionalities. 2.

(16) 1.5. Scope Online Attendance Tracking System is a system purposely designed for the. lecturer and student in Unisza. Only the Unisza students’ attendance data will be collected in this system. This is a website which provides lecturer manage and tracks their student in the online class. Two main parts will be concerned in this system which is a web design and database design. The web should contain the main function of the online attendance function and feature while the database in charge of storing the record or data of the student attendance, lecturer and student list.. 1.6. Limitation of Work The limitation of this system are limited knowledge and limited research. It is. a need to master the relative knowledge and skill to create a online attendance tracking system by using Laravel framework. Besides TOTP algorithm is needed to study for achieve anti truant feature in the system. Besides, TOTP related research on the online attendance tracking system is little in literature. Most of the study is all about the way of attendance record or tracking by using QR code, RFID or face recognise.. 1.7. Expected Result In the end, Online Attendance Tracking System should result with the. functionality of collecting attendance data and prevent students' truancy. Additionally, the system will provide features for lecturer to manage students' attendance effectively and check the students' status. The features enable a lecturer and administrative staff to monitor students’ attendance efficiently and effectively.. 3.

(17) 1.8. Activities, Milestones (Gantt Chart) Week 1. Date. Activity. 21/10/2020 - 27/10/2020. Determination the Project Title with supervisor. 2. 28/10/2020 - 3/11/2020. Confirm Project Title Proposal. 3. 4/11/2020 - 10/11/2020. Proposal. writing. (Chapter. 1. :. Introduction) 4. 11/11/2020 - 17/11/2020. Proposal writing (Chapter 2 : Literature Review). 5. 18/11/2020 - 25/11/2020. Proposal writing ( Continued). 6. 26/11/2020 - 1/12/2020. Proposal. Progress. Presentation. and. Panel’s Evaluation 7. 2/12/2020 - 8/12/2020. Proposal. writing. (Chapter. 3. :. Methodology) 8. 13/12/2020 - 19/12/2020. Proof of Concept (POC) Methodology Workshop. 9. 20/12/2020 - 26/12/2020. Final. Year. Project. Format. Writing. Workshop 10. 27/12/2020 - 2/1/2021. Drafting Report of Proposal. 11. 3/1/2021 - 9/1/2021. Submit Draft of Report to supervisor. 12. 10/1/2021 - 16/1/2021. Preparation for Final Presentation and Final Report Submission. 13. 17/1/2021 - 123/1/2021. Final Presentation and Panel’s Evaluation. 14. 24/1/2021 - 30/1/2021. Final Report submission and Supervisor’s Evaluation. Figure 1.1: Activity of FYP1. 4.

(18) Figure 1.2: Gantt chart of FYP1. 1.7. Summary of the Chapter Online learning had been a normal lifestyle to all university student in. Malaysia. All the attendance is recorded online and it lead to the problem of cyber truancy. Most of the existing way to collect attendance does not include tracking function. From the problem statement stated, two main requirements should be included in proposed system for the next chapter. The first requirement is to develop. a. systematic online attendance system to record attendance data in University Unisza. The second requirement is to develop a system which allows lecturers to track the activeness of the student during online class.. 5.

(19) CHAPTER 2. LITERATURE REVIEW. 2.1. Introduction Online learning had been introduced a while, most of the brick-and-mortar. learning had converted to online class. For example, in Unisza, online classes have been implemented as the main platform for teaching and learning in this pandemic situation. There are several ways to collect and manage student attendance data. Every way had their own benefit in managing attendance data. In this literature review, a system named Online Attendance Tracking System will be developed for all lecturers in Unisza. This system provides a systematic and effective in uniform website, whereby the lecturers and students can use the same system to collect and record attendance. In addition, the issue with online learning came up. The main problem faced by online learning is cyber truancy. Although mandatory attendance in traditional schools is easy to collect, monitoring of attendance and absenteeism in an online environment are less obvious. Within the traditional school model, attendance of students is defined as physically present or absent, it is not difficult to notice truancy in face-to-face classroom. However, online learning environment is not like physical class, interaction between lecturer and students is less, and lack of feedback from the student to lecturer. Online learning in virtual classroom is difficult to determine students’ status whether is still stay with lecturer or absent. [2][3] Online learning environment is not like physical class, interaction between lecturer and students is less, and lack of feedback from the student to lecturer.During online learning, student may absent due to boring or want to do other stuff. Lecturer is difficult to track the current status of student during online learning compare to physical classroom learning. [4] In this system, TOTP method will be used to avoid cyber truancy during online learning. In the meanwhile, some elements need to be. 6.

(20) studied and considered in developing an Online Attendance Tracking System so that this system can be developed successfully.. 2.2 Existing System The existing system that so far used by lecturer is like a ‘semi-automatic’ method to collect attendance. The meaning of ‘semi-automatic’ is that lecturer needs to prepare their attendance collecting method to their student manually. This take time organises the attendance data collected for getting the latest and comprehensive attendance data. The example of these attendance collecting methods is Google Form, spreadsheet, screenshot and so on. Although it is a simple way to collect attendance data, lecturer need to repeat this action in every class started. Besides, all of these methods did not provide tracking function to track student’s status. This may cause lecturer unable to know the latest status of the student during online class.. 2.3 Proposed System To overcome the drawbacks of the existing system, the proposed system had evolved in a way of solving the problem. The aim of the project is to provide an efficient system to collect student’s attendance and it can save a lot of time from it. There got two main requirements from the existing system. The first one is to provide a utilise and functionality system to collect attendance system. In this system, lecturer is free to record and collect attendance data in every class. The second requirement is to provide an online attendance system with the avoiding cyber truancy function. In this system, all students attendance are collected automatically. TOTP play an important role to collect attendance and track student status. In the sector of collecting attendance, students need to insert TOTP code in this system to prove they have attended the class. While in tracking student status sector, student is allowed to insert TOTP code in related section in the system to prove their activeness.. 7.

(21) 2.4 Advantage of Proposed System Compared to the existing system, proposed system provides an automatic system to collect student’s attendance. It gives lecturer easy to collect attendance data and free from manual. This system give lecturer can collect data fast and effective. Besides, it also benefits to both lecturer and student, this system provides a function to generate latest attendance data in report. Last but not least, proposed system provides anti truanting feature which the existing system does not provide.. 2.5 Architecture The architecture of this system constitutes of two main functions which are attendance record and anti-cyber truancy. Both of these features have applied a method called TOTP algorithm to achieve its goal. There got several types of method that can be used in online attendance tracking system, for example, RFID, face recognisation, QR code and so on. Among these method, TOTP algorithm is selected as the main method to develop and design the system.. 2.5.1 TOTP Algorithm TOTP algorithm also known as “Time-based-one-time password”, it is the extension of the One-time password (OTP) algorithm, namely HMAC-based OneTime password (HOTP) algorithm. OTP algorithm is a method provide a password but it can only use once. User only can access the website or application by using the given OTP algorithm within the time given. OTP code is generated by using two inputs which are seed and moving factor. Seed is the secret key, a static value and the moving factor is the counter. When a new OTP is requested, seed remains static while the moving factor change. There got two types of OTP algorithms which are HOTP and TOTP. Each of it has different moving factor. [5] HOTP also called HMAC-based OTP, which is the original OTP algorithm. HOTP contain two main pieces of information to generate OTP code. The first is secret key, also known as “seed” and the second pieces is counter, the moving factor in HOTP. TOTP is based on HOTP and the different between HOTP and TOTP is the. 8.

(22) moving factor. TOTP used time instead of the counter. Timestep is the amount of time which each password is valid. TOTP code is only valid for the duration of the timestep.. 2.5.2 TOTP in Recording Attendance In the sector of attendance record in this system, TOTP play a role to record the attendance. Due to the TOTP characteristic, student needs to insert the TOTP code given in the system in time else it will not be accepted. Based on this concept, attendance status of the online class can be classified as three classes. The first TOTP code generates in the system and those the student who insert the code within the time are considered as present. The second new TOTP code generated in the system will be considered as late and the third and so on TOTP code generate or the student didn’t insert any TOTP code will be considered as absent. The timestep of the TOTP in this system can be set as 10 minutes or other. This means that the student who inserts the TOTP code in first 10 minutes is stated as present and the next 10 minutes is stated as late and the rest is considered as absent. By using TOTP algorithm, lecturer can easily recognise the student who is present or late in the class.. 2.5.3 TOTP in Anti Cyber Truancy For achieving anti-cyber truancy in this system, TOTP algorithm is used as the method to track the status of student during online class. The feature of anti-cyber truancy is sort of similar as the function in recording attendance. In this system, lecturer can open the anti-cyber truancy function to track their student’s current status. Lecturer is allowed to open this function and student needed to insert the TOTP code to prove their activeness. After that, lecturer can view the student activeness of the online class in the system. This feature can give direct feedback to lecturer know their class situation during online learning. This is because online learning environment is less evident compared to brick-and-mortar class in university. It is difficult to determine student’s 9.

(23) status and the interaction between lecturer and student become less and lack of feedback during online class compare to physical class. Therefore, this feature can give a feedback to lecturer know about their class situation.. 2.5.4 Programming Language The programming language used for developing this system is PHP language. PHP is a server-side scripting language that is suited to web development. Other than that it is a free, simple and open-source programming language. One of the advantages of PHP is that it is able to run on different operating systems. Besides, PHP supports the function of MySQL connection. It also is a programming language that is easy to learn and provides robust functionality. Base on all these features, PHP is very suitable for developing Online Attendance Trending System.. 2.5.6 Web Framework Laravel is a free, open-source PHP web framework. Laravel is one of the suitable choices in developing websites. Laravel web framework consists of many functions and features which provide developer have a better choice in the development website. First, Laravel is in model-view-controller (MVC) architectural pattern, this enables us to achieve effectively resources using and facilitates multiple views. Besides, middleware supported to enable the reliability and safety of the website. It can give protection to the system and ensure the data is difficult to access or modified by an unauthorised user. On the other hand, TOTP can be achieved which can used as an anti truanting function in the Online Attendance Tracking System.. 2.5.7 Database MySQL is selected as the database for the Online Attendance Trending System. MySQL, Structured Query Language, is a language used to communicate with the database. Users able to create database and use CRUD (create, read, update and delete ) command to achieve the need. The advantage of using MySQL is to provide 10.

(24) high performance, high reliability and easy to use. So MySQL will be playing the role to store and modify attendance data in Online Attendance Tracking System.. 2.6 Related Method of Online Attendance Tracking System There got several types of similar online attendance tracking system with different method. QR code method is the major choice of developer used to achieve their goal. Based on QR code, the system can perform the goal differently. In Reference [6], this system tracking student by using QR code. Student needs to scan the QR code before class started. There may consist of some QR code within the slide that lecturer is being teaching. All the QR code had to be done manually before class started by lecturer. In Reference [7], QR code is used in this system to track student. The system Mobile Module is developed to track student attendance by provided QR code. Then it will send the latest information of the students through the Service Module to lecturer. After that, lecturer is needed to approve their attendance.. 2.7 Comparison Reference. Tools &. Approach. Limitation. Objective. Set QR code. Lecturer have. Approach to. (2014). A. within the. to set QR code check students’. Students. slide. inside the. status via. Attendance. slide before. scanning the. System Using QR. class start. QR code in the. Technologie s Fadi Masalha.. QR code. Code, (IJACSA). slide. International Journal of Advanced. 11.

(25) Computer Science and Applications, Vol. 5, No. 3 D. Deugo. (2015).. QR code. Generate QR. Maximum. Approach to. Using QR-Codes. code and send. size in this. request student. for Attendance. to lecturer for. system is 50. send QR code. Tracking, The. checking their. students.. to prove their. School of. status. Lecturer is. current status. Computer. needed. Science, Carleton. manually. University,. approve their. Ottawa, Ontario,. attendance. Canada,Int'l Conf. Frontiers in Education Table 2.1: Comparison Table. 2.8 Conclusion Online Attendance Tracking System is a system which concludes the function of attendance collector and anti-cyber truancy. Although there got a lot of other methods to achieve the goal, TOTP is the most suitable as a method to develop this system. TOTP can perform some of the features that other method can’t perform. The characteristics of the TOTP are suitable and it meets the requirement of this system. TOTP algorithm can perform well in Online Attendance Tracking System. In attendance signing system, TOTP can play as role to state the status of student who is being present, late or absent. On the other hand, in activeness status section, TOTP play as a role to track student status who is being active or non. TOTP algorithm makes these two function in the system effective and efficient.. 12.

(26) 13.

(27) CHAPTER 3. METHODOLOGY. 3.1. Introduction There have many types of development methodology model for developing. system. Each method has its benefit and technique to plan and develop system. Choosing the right method can guide system development successfully and effectively in time. The methodology chosen for the system must be suitable and appropriate. Every phase and step in the methodology model is important to guide and deliver the system successfully develop. In this chapter, a methodology has been chosen to develop this Student Attendance Tracking System.. 3.2 Chosen Methodology After doing some research on the suitable methodology for this system, incremental. development model is chosen for developing system. Incremental. development model is an agile methodology. The reason for choosing this methodology is because of its characteristic. In incremental development, the process works is sliced into pieces. Each of the increment builds on top of the previous works had done. So, the comprehensive and fully functioning system can be built up over time.. 3.3 Stages in incremental Development Model Stage 1 - Planning Planing phase is the heart of the project life cycle, all the after phases in the project are connected and related to the decision made at this phase. The requirements and deliverable of the project are defined, and also the project schedule is created. At first, the topic and theme of the final year project is needed to decide from some research from the internet. Then the topic selected for the system will be used to design and develop in the upcoming phases. After several times of discussion with the 14.

(28) supervisor, a project name “Online Attendance Tracking System” is produced. The confirmation of the project name means that the studies on the project-related research and articles have to be started. There has got several types of existing online attendance system or method had been used by Unisza’s lecturer. A problem statement is created after some researches on existing methods. Based on the problem, an objective of this system comes out. The project objectives should be refined to meet the requirement. An articulate objective gives a precise direction and provides a better understanding of development requirements to develop a system. The objectives of the project are used as measurements to determine project satisfaction and successful completion. Then, the project scopes on functionality of the system have been defined and the target user of this system also has been declared as well. Stage 2 - Analysis In this stage, requirement analysis has been made in this project. The purpose of this stage is to formulate and formalise the system’s requirements. It also is a phase to identify the overall direction of the project. Requirements of the proposed system are gathered through the research and articles through the internet. There got two requirements, functional and non-functional requirements which are the element for developing system. Functional requirement in this system is user requirements which this system is mainly focusing on attendance record and attendance tracking. While the non-functional requirements are system performance and usability. After doing a lot of research on literature review, a suitable user interface, function, features, programming language and methodology are decided. All this is done to ensure that the project is delivered matches the requirements that had made in planning phase. The features of the system had been studied to make sure that it is included in the proposed system. Then, a suitable methodology is chosen for system development. Besides drawing Use case diagram is to know the detail information of the relationship between lecturer and student in this system. The study of the literature review will be the element of designing prototype in the next phase. This phase gives a clear understanding of the interface and function in the system that should be included. 15.

(29) Stage 3 - Design Design stage is the stage where the project development begins. In this stage, decision on the user interface should be declared. The appearance of the system designed must be appropriate and the functions of the system have to state within the layout. The interface design of the system included the layout of the system, the link function button to redirect to another page, position of navigation bar, functionality button layout design and so on. Next, design phase also included database of the proposed system. Entity Relationship Diagram (ERD) must be developed so that all entities can be extracted. All the data elements of the system have to included and properly assigned so that the primary key in the system can be identified. Primary key is constraint uniquely identifies each record in a table and it can link and identify the other foreign key in another table. All the table in this system should draft out so that all the data and table that will be used in this system can be stated. In this stage, all the basic structure in this system had declared and draft out. This give an idea in next stage to implement the system. Stage 4 - Implementation Implementation stage is a stage which put the project plan into action. The system develop in this stage should meet the objectives of the project plan that had set at the planing stage. Two main method had used in this system which are MYSQL and Laravel. MYSQL is a database and it should designed based on the database design produced in the design stage. As for the user interface design, Laravel is the main structure to represent all the function and features in the system. The function and features in the system must be included and have been identified earlier. The changes in the main methods are unnecessary unless it is necessary. The development of the system must base on the methodology as planned earlier so that the development process can go accordingly and smoothly. The methodology chosen is incremental methodology so that the entire system can be developed based on the pieces. The first incremental in the system is. 16.

(30) the thin slice which is the basic structure of the application. Then the other feature will be add on in the system by increment until the system is full functionality. Stage 5 - Testing Once the system has been developed successfully, testing should be carried out to check the performance and functionality of the system. The expected output should be produced. If the output is not as expected, then it will proceed to the next stage, evaluation stage. Stage 6 - Evaluation In evaluation stage, system functions will be checked whether it is same as the intended function. The requirement that had mentioned in the previous stage will be checked whether it has met or not. If the system needed to add new functions, then the system will go back to the planning stage. This means that the development of the system will based on the system done at stage 4 for developing new functions. Besides enhancing of the existing function also will lead the development of the system go back to the planning stage as well. Stage 7 - Deployment Deployment is the last stage of this methodology. At this stage, all the requirements have already met and the function and features achieved in this system. Therefore, this system is ready to deploy and ready to be used by the user.. 17.

(31) 3.4 Hardware and Software Requirements Hardware - Laptop or computer with  Hard Drive: Minimum 32 GB; Recommended 64 GB or more.  Memory (RAM): Minimum 1 GB; Recommended 4 GB or above.  Any CPU (Intel i5/ i7/ Xeon recommended). - Ethernet connection (LAN) OR a wireless adapter (Wi-Fi) Software - Laravel web framework - FIK web hosting - MySQL database. 3.5 ER Diagram (ERD). Figure 3.1: ERD of Online Attendance Tracking System The full name of ERD is entity relationship diagram. It is a type of structural diagram that used for database design. In ERD, the symbols are used to show the inter-relationships among the entities. In this system, it got five entities which are 18.

(32) User, Course, studentList, Attendance and ActivenessStatus. The purpose of drawing ERD is for giving a concept to develop physical database in implementation stage. User entity contains this user’s attributes and it stores all of the user in this system. These users included student, lecturer and admin. The Course entity contains attribute which related the subject and course of the university. Each lecturer may have one or more courses taken so that each course will have one studentList entity to store the student information which takes the related course. After that, Attendance entity and ActivenessStatus entity are linked with Course entity. This means that the attendance and activeness of the student are taken based on the related course. Each course only can have one Attendance and ActivenessStatus entities.. 3.6 Class Diagram. Figure 3.2: Class Diagram of Online Attendance Tracking System In this class diagram, it shows the relationship between the five classes. Each classes are formed in two-part that are attribute part and operation part. Attribute part contains the attribute which stores at database while operation part stated the operation function can perform in this class. Symbol (+) is public attribute while (-) is private 19.

(33) attribute. User class and Course class are simple association relationship and the relationship between User class and Course class are one-to-many relation. studentList, Attendance and ActivenessStatus classes are composition relationship with Course class. This means that these three classes depend on Course class and stand-alone by itself.. 3.7. Data FLow Diagram (DFD) Data flow diagram also known as DFD, the purpose of drawing DFD is to. graphically represent the flow of data in the system. DFD describe all the processes that are involved in this system. In this system, it consists of three DFD which are related to the position of the user, that are student, lecturer and admin. Each position has its process and data flow.. Figure 3.3 : DFD of student In the Figure 3.3, the process of student in DFD mainly concerns two things, there are signing attendance and proving activeness. All the data collected from the attendance and activeness sites will be stored at Attendance database and ActivenessStatus database respectively. The data that sign or prove in this system will be updated to the relative database. This data can be viewed by the student through the system so that student can get known the latest performance. 20.

(34) Figure 3.4 : DFD of lecturer In Figure 3.4, it show the DFD of lecturer. Lecturer page is given some functionality to modify or edit the status of the student’s attendance and activeness status. Besides, lecturer also can add new student into the course. A studentList entity is the database of storing the student information. Lastly, lecturer can view the data of student list, attendance and activeness status as well.. 21.

(35) Diagram 3.5 : DFD of admin In Figure 3.5, it is a DFD about admin. This system gives the admin right to add user, add lecturer and add course in this system. The new user (student or lecturer) will be added in User database while the new course will be added in Course database. Admin also can view the user and course data as well.. 22.

(36) 3.8 Use Case. Figure 3.6: Use Case Diagram In this use case diagram, it exists three types of user in this system that are student, lecturer and admin. Each user has different functionality based on their type. For example, lecturer can modify student attendance or activeness, add student in their course and view student attendance or activeness. While the student role can perform signing attendance and proving activeness in this system. Besides, student can view their attendance and activeness as well. Lastly, admin can add user and course in their page.. 23.

(37) 3.9 Prototype 3.9.1 Main Page. Figure 3.7: Login Page The main page of the system is the login page. Different type of user will login different page based on their role in this system. For example, student will login to student page and lecturer will login to lecturer’s page. If the student didn’t own an account, then the sign up option is prepared for the student to create an account.. Figure 3.8: Sign Up Page In sign up page, student have to fill in all the section to sign up an account. The data of the student will be store at User database.. 24.

(38) 3.9.2 Student Page. Figure 3.9: Student Page In student page, it show the course list that taken by the student after login. Student can view the brief information about course in this page. Then student can click the course to redirect to the related course page.. Figure 3.10: Student’s Course Page After clicking the related course, it shows the information about this course and the performance of the student in this course. In this page, monthly attendance report is shown. The upper part got two function for student to sign attendance and prove activeness.. 25.

(39) Figure 3.11: Student’s Course Page (Cont’d) Then, the lower part of the page will show the attendance record. Student can view their attendance history record.. Figure 3.12: Page For Attendance Signing In attendance site, student have to insert TOTP code within the time. TOTP algorithm used here is for identifying the status for the student attendance. Three status are stated in this page which is present, late and absent. TOTP will be regenerated after 10 minutes. Student have to insert it within this 10 minutes so that they will be stated as present else late or absent. 26.

(40) Figure 3.13: Page For Activeness Status Proving In status activeness site, student have to insert TOTP code to prove their activeness in online class when lecturer activate this site. Then lecturer can view the activeness data to get known their student status during online class.. 27.

(41) 3.9.3 Lecturer Page. Figure 3.14: Lecturer Page In lecturer page, it will show the course that the lecturer teaches. In this example, it shows three courses that the lecturer Dr. Alice teaches.. Figure 3.15: Lecturer’s Course Page After clicking on one of the course, it shows the related information about the course. Lecturer can perform 4 functions which are add student, view activeness and attendance and activate TOTP.. 28.

(42) Figure 3.16: Attendance Record Page Lecturer can view and edit student attendance at this page. For example, lecturer can edit it as present, late or absent. Lecturer also can search the student name or date.. Figure 3.17: Activeness Record Page In activeness status page, lecturer can view the activeness status of their student during online class. If the student insert the TOTP code, then it will show “active” status else “Non” status. Lecturer also can modify the student status at this page.. 29.

(43) Figure 3.18: TOTP Activeness Page At TOTP activeness page, this is a page for lecturer to activate TOTP code for student. This means that students have to insert TOTP code to prove their activeness. Lecturer can set date, time and duration for activation.. Figure 3.19: Add Student In Course Page The last function of lecturer page is adding student function. Lecturer can add new student in to their course.. 30.

(44) 3.9.4 Admin Page. Figure 3.20: Admin Page This is the main page of the admin page. It got two main function for admin to edit user and course.. Figure 3.21: Edit User Page Admin can add new user and can classify it as a student or lecturer. Admin can view all the users information in this page.. 31.

(45) Figure 3.22: Edit Course Page Admin can add new course in this page. Admin can search the course name and lecturer page at this page too. Besides, admin can perform edit the course information in this page.. 32.

(46) 3.9 Project Plan. Figure 3.23: Gantt Chart of Project Plan. 33.

(47) REFERENCES [1] Abdoulrahmaine Mohammad, Mohammad Elmi Hassan, Muslim Musa (8 November 2016). Attendance management system, Islamic University of Technology (IUT) [2] Leslie Williams.(2013). A Case Study of Virtual Physical Education Teachers' Experiences in and Perspectives of Online Teaching. Graduate Theses and Dissertations. [3] Leanna Archambault, Kathryn Kennedy & Stacy Bender. (2013). Cyber-Truancy, Journal of Research on Technology in Education [4] John Wiley & Christopher J. Schreck. (2017). The Encyclopedia of Juvenile Delinquency and Justice. [5] Abhishek Arvind, Pradyumna Mahajan, Rishikesh Chalk. (05 May 2020). TOTP Based Authentication Using QR Code for Gateway Entry System. International Journal Of Engineering And Computer Science Volume 9 [6] Fadi Masalha. (2014). A Students Attendance System Using QR Code, (IJACSA) International Journal of Advanced Computer Science and Applications, Vol. 5, No. 3 [7] D. Deugo. (2015). Using QR-Codes for Attendance Tracking, The School of Computer Science, Carleton University, Ottawa, Ontario, Canada,Int'l Conf. Frontiers in Education. 34.

(48)

(49)

No results found