IT Aspires Volume 2 JTMK

Jabatan Teknologi Maklumat & Komunikasi Politeknik Seberang Perai

All right reserved No part of this publication may be translated or reproduced in any retrieval system, or transmitted in any form or by any means, electronic, mechanical, recording, or otherwise, without prior permission in writing from Politeknik Seberang Perai. Published by Politeknik Seberang Perai Jalan Permatang Pauh 13500 Permatang Pauh Pulau Pinang Tel : 04-5383322 Fax : 04-5389266 Email : [email protected] FB : www.facebook.com/JTMKPSP Website : www.psp.edu.my

Advisory Board Sr Harith Bin Abd Khalid, MRISM Dr Salmi Binti Che Meh En Izwan Affendi Bin Adnan Ts Leila Adja Radjeman @ Radjiman En Mohd. Asyraf Bin Mohd Arshad Editorial Board Rosmawati Binti Jaafar Norbahiah Binti Zakaria Rozita Binti Saad Izlin Zuriani Binti Ishak Layout and Designer Rozita Binti Saad Norbahiah Binti Zakaria Reviewer Board Dr Nur Azilina Binti Abdul Aziz Politenik Seberang Perai Dr Mohd Najib Bin Hamdan Bahagian Instruksional dan Pembelajaran Digital Jabatan Pendidikan Politeknik dan Kolej Komuniti Dr Muhammad Zulfaris Bin Mohd Salleh Politeknik Balik Pulau Ts Dr Letchumanan A/L Shanmugam Politeknik Balik Pulau Dr. Nursakinah binti Md Salleh Unit Penilaian dan Inovasi Kurikulum Jabatan Pendidikan Politeknik dan Kolej Komuniti Husaini Aza Bin Mohd Adam Kolej Komuniti Seberang Jaya

Assalamualaikum warahmatullahi wabaraktuh. The highest appreciation is given to Allah SWT for his generosity and blessing, that enabled JTMK Academic Jour-IT ASPIRE to be published for the second time. Here, I'd like to express my thanks to all of the Department of Information and Communication staff who successfully organized for this journal's initial publication. This journal is a compilation of articles written by lecturers and finalsemester students in the Diploma in Information Technology (Digital Technology) programme about their final projects, which include system development projects, internet of things (IoT) projects, and mobile applications. The journal offers a place for lecturers and students to collaborate and share knowledge though research writing. The projects contained in this journal, that focuses on the field of information technology and its implications for industrial purpose, have been completed. The end product, which was created using elements from the internet of things and digital system integration, illustrates how various technologies and people interact. The project supervisor and students can use this academic journal IT ASPIRE as a reference to design a more effective final project which will contribute to success in information technology education as a whole. In addition, it really is hoped that this journal would serve as a resource for a variety of readership groups looking to learn more about information technology or using it as a model for their own projects. Finally, in addition to providing readers with knowledge and a broad overview of project-based information technology and applications, it is intended that this magazine will help readers continue to expand their knowledge in order to produce successful projects in the future. En Izwan Affendi Bin Adnan Head of Department Department of Infromation and Coomunication technology Politeknik Seberang Perai

TA BLE OF CON TEN T Editorial Board ii Preface iv 01 SYSTEM ANALYSIS & DESIGN A Kindergarten Attendance System Using QR Code and Whatsapp API 1 CStar Application 13 Online Shopping Website 26 Event Management Application 33 E-Pengurusan Data JTMK 46 Student Management System | SMK Junjung 55 02 NETWORK Stabilize Network Connection at ICT SK Bandar Baru Perda 62 Upgrade Network using Hybrid Method (Bahasa melayu) Menaiktaraf Rangkaian Menggunakan Kaedah Hybrid Di Sekolah Kebangsaan Jalan Baharu 69 Naik Taraf Isyarat Wifi di Trio Agro Sdn Bhd 85 Naik Taraf Dan Pemantauan Rangkaian Di Makmal Komputer SMKA Al Irshad 92 Naik Taraf Rangkaian Di Makmal Komputer Sri Al-Hasanah 97 Menaik taraf rangkaian di Masjid Ubudiah 103 03 IOT IoT Smart Agriculture & Automatic Irrigation System 115 Smoke Prevention System 123 IOT Cermin Pintar di Reuso Barbershop 131 04 MOBILE APPS IQ Test Application for Autism Kids 143

SAD

IT ASPIRES Vol 2 | 1 A Kindergarten Attendance System Using QR Code and Whatsapp API Nurul Sara Yasmin Binti Mazlan1 Nurul Hanna Binti Mohd Darus2 Nurul Syifaa Binti Abdul Malek3 Azilah binti Abd Rahim4 1Jabatan Teknologi Maklumat dan Komunikasi, Politeknik Seberang Perai; ([email protected]) 2Jabatan Teknologi Maklumat dan Komunikasi, Politeknik Seberang Perai; ([email protected]) 3Jabatan Teknologi Maklumat dan Komunikasi, Politeknik Seberang Perai; ([email protected]) 4Jabatan Teknologi Maklumat dan Komunikasi, Politeknik Seberang Perai; ([email protected]) Abstract The student attendance system is mainly used to identify the students' classroom participation, especially at Nur Haura Kindergarten. The previous system was inefficient in terms of processing time and accuracy. This attendance system aims to collect attendance by scanning QR codes. Then, a monthly or yearly report will be generated in an xls sheet for further use. It also allows parents to directly register their children on the web after receiving a message through WhatsApp. Thus, after parents successfully register their children, the QR code will be generated automatically. To ensure accuracy, the QR code included each of their identity card numbers to distinguish between students. Sequence testing is used to determine whether the proposed system is accurate enough to satisfy the user. The performance of the generated QR code is tested to ensure that users can use it effortlessly. The message received by using WhatsApp API is used in this project to ensure that parents can register their children without wasting time and effort because being able to register online is extremely convenient. As a result, the system was created to assist teachers in simplifying the process of taking students' attendance and easily managing attendance records. Keywords: attendance, attendance management, QR code, register 1. INTRODUCTION An attendance management system is a tool for tracking students' attendance. It keeps track of attendance and displays the status of students, whether they are absent or present in class. Teachers can use student attendance systems to record and manage daily student attendance to speed up the daily attendance process. The kindergarten usually takes students' attendance manually by filling out attendance sheets. Even though the process is slow and inefficient, it is used in almost every institution. The organization's limited budget is one of the reasons they continue to use the traditional method of taking attendance. Since attendance checking in today's context is defined by many factors, such as maintaining contactless operations, most institutions benefit greatly from the use of QR code attendance. A Quick Response Code (QR) code is a type of two-dimensional digital image that is widely used. It encodes alphanumeric data that can be decoded with a handheld scanner or a QR code scanning app. (Scanova Blog, 2019). There are two types of QR codes which are static and dynamic. A static QR code contains information that cannot be changed once it is live. The benefits of using static QR codes are that they do not expire, so once the content is set, the work is done. Then there's the dynamic QR code, which allows changes to your information as many times as you want. The main advantage of using dynamic is that it is adaptable because it allows for changes.

IT ASPIRES Vol 2 | 2 1.1 Problem Statement According to observations, most of Nur Haura Kindergarten branches still use the manual method of taking daily attendance. The teacher must individually record each student's attendance by calling out their names. As a result, the owner finds it difficult to control student attendance data because Nur Haura has six different branches. This system is only focusing on one branch to test its functionality before expanding to other branches. Furthermore, Nur Haura's kindergarten attendance sheet is frequently lost, and the entire attendance procedure is prone to human error. As a result, data loss is possible, and the attendance list's data may be incorrect due to misunderstanding. Besides, the teacher must manually analyze the number of absences to generate a monthly report. This method takes time, and the calculation's result may be incorrect if the teacher overlooks any information from the attendance record. As a result, a QR code student attendance system is proposed as a replacement for the manual system. Besides that, Nur Haura's kindergarten frequently distributes a large amount of paper filled with forms that parents must fill out in order for the school to keep track of their children's data. Fields are usually left blank when parents fill out this type of information on paper, either because the parent is unwilling to respond or because human error causes them to skip over a question. Aside from that, everyone's handwriting is different, making it difficult for the teacher to understand the information provided. As a result, the teacher may key in incorrect information, resulting in data errors. 1.2 Objectives The main objectives for this project are: a. To Register Students Through Whatsapp API for Generating A QR Code. b. To Collect Student Attendance Using QR Codes. c. To generate yearly and monthly student attendance reports 1.3 Scope of Work This project was created for Nur Haura Kindergarten in Bayan Lepas, Pulau Pinang. An attendance management system can assist the organization in tracking each student's exact arrival time. This project was created using Sublime Text, which is written in PHP. Thus, the project scope, such as user scope and system scope. There are two different users for this system which are teachers and parents. The scope for teachers is: a. Teachers can log in to their accounts using the username and password created. b. For better security, teachers can change passwords immediately after the login process is done. c. The pre-registration form is used to register students that are interested in attending kindergarten and send link confirmation through the WhatsApp link. d. Teachers can manage user accounts where account details can be edited. e. Besides, they can also manage student details where all the information is stored. f. The generated QR code is used to collect students' attendance. g. By selecting from date to date, teachers can generate daily, monthly, and yearly reports and export it in Excel files. Meanwhile, the scope for parents is: a. After the pre-registration process is done, parents will automatically receive a WhatsApp API link which will ask them to check if the student's IC number and name shown are correct. b. Parents can use students' IC numbers to login into their accounts by using them as account usernames and passwords. c. Parents can fill out the registration form with student data and parents' data just once.

IT ASPIRES Vol 2 | 3 2. LITERATURE REVIEW An existing or similar system was examined in the literature review for potential strengths, weaknesses, and issues encountered during project system development to conduct more thorough research. The journals selected are those relevant to the proposed system. This review helps us by informing us about how the current system works. 2.1 Bluetooth Smart-based Attendance Management System Faculty and teachers will be able to move around the classroom without carrying physical attendance sheets thanks to a Bluetooth attendance monitoring system. This system is accelerating the development of wireless sensors, resulting in high demand for this technology. It uses little energy, as stated in this journal because it only requires electronic tags that can be embedded in students' matric cards. Even if the device is submerged in dirt or is practically indestructible, the tags can be read. Furthermore, each student is assigned a unique tag that the application can detect via Bluetooth. When students attend a lecture, the student database entry receives a serial number associated with their student ID. To avoid detecting tags outside of the class, the application is also set to detect tags only within a certain range. It is only intended to work with the Android app. If the tag is valid, the system will continue to record their attendance; if it is not, the system will notify them that the tag is invalid (Lodha et al., 2015). 2.2 Students Attendance System Using QR Code Technology has recently been used at a rate that has exceeded all of our expectations. Every year, technological advancements become smarter, more innovative, and more affordable. Monitoring attendance records, according to Fadi Masalha and Nael Hirzallah (2014), is a difficult process, especially in universities where many students are enrolled in a single class. This can lead to a variety of problems, including time constraints and data loss. Because of the increased usage of smartphones, which are mostly used by people under the age of 26, this journal proposed a system with a solution that provides a QR code for the student. The proposed system is divided into two modules: the Server and the Mobile Module. In order to generate a QR code containing relevant data, the system requires the lecturer to log in using its Server Module. After the lecturer has displayed the QR code, the student will use the system Mobile Module to scan it. In addition to using multi-factor authentication, the student will scan their face, and the Mobile Module will transmit the information it has gathered to the Server Module at the time of the scan to verify the student's attendance. However, if a student receives a QR code image outside of a classroom, this proposed approach may become difficult. Because each student should have their own QR code for identification, but the system only generates one for the entire class, data errors and fraudulent activity will occur (Fadi Masalha and Nael Hirzallah, 2014). 2.3 Student Attendance System Using Near-Field Communication (NFC) Technology NFC technology and student attendance systems have existed for some time. The implementation of NFC technology in student attendance systems will almost certainly have a significant impact on the teaching and learning environment. In student attendance systems, NFC technology provides wireless student identification that is transmitted wirelessly to an attendance reader. As a result, when students touch or are brought within a few centimetres of each other, their attendance is automatically marked. An NFC-based attendance system is expected to make use of items that students always have and should always bring, such as their matric cards. Students must bring a matric card to school if this NFC technology is used as a system to track attendance. This system will operate at a close distance of about 10-20 cm and will automatically record student attendance. In fact, they must carry a card containing personal information about themselves. They are unable to mark their attendance because they did not bring their card. One of the reasons the

IT ASPIRES Vol 2 | 4 kindergarten is unable to use NFC technology is the high cost of installing hardware, and software and hiring technicians for maintenance (Mohd Ameer Hakim bin Mohd Nasir et al., 2015). 3. METHODOLOGY This project is developed using the System Development Life Cycle (SDLC) with an agile approach. The reason for using agile for this project development is that it helps deliver high-quality products while also completing tasks at a lower cost. This agile method in Figure 3.1 allows developers to find problems and create solutions more quickly and efficiently. Agile allows developers to independently decide what they can do in a given time frame. It gets a working piece of software installed, tested, and presented to the client at the end of the iteration. Figure 3.1 The flow on an agile development model, Hazevytch (2020) 3.1 Requirements A process such as data collection, qualitative and quantitative or descriptive data analysis, and identifying everything required to proceed to the next stage is carried out at this stage. A proposal for the project title is one of the things that is brainstormed at this stage because it symbolizes the project itself. We also discovered a potential issue with the kindergarten still using manual attendance today. 3.2 Design The design stage is the process of creating a system based on the findings of the analysis. The system design documents are created in accordance with the requirements, which aids in the definition of the overall system architecture for Nur Haura Kindergarten Attendance Management System. The design of the web interface is now being processed. By using the ideas that have been collected in the requirements phase. Thus, a client's opinions will also be heard to improve the system interface better. Context Diagrams, DFD, and ERD are tools our team uses throughout this design phase to make sure that our team comprehends the system's capabilities and limitations. In order to demonstrate the system under study as a single high-level process and the connection it has to other external entities, context diagrams have been employed. Knowing a little bit about Data-Flow Diagrams can be useful because Context Diagrams are specialized versions of them. Therefore, DFD have been employed in this design. The functions or processes that capture, manipulate, store, and distribute data between system components as well as between a system and its environment are visually represented by DFD. Figure 3.1 and Figure 3.2 shows the graphical image serves as a useful tool for user and system designer communication since it allows our team to see how the system functions before deploying it. Next, ERD diagrams as in Figure 3.3 are commonly used in conjunction with a data flow diagram to display the contents of a data store. By using the ERD, it helps our team to visualize how data is connected in a general way and are particularly useful for constructing a relational database.

IT ASPIRES Vol 2 | 5 Figure 3.1 Contex diagram Figure 3.2 Data Flow Diagram (DFD)

IT ASPIRES Vol 2 | 6 Figure 3.3 Entity Relationship Diagram (ERD) 3.3 Develop The interface development process is completed at this stage. All of the project's functions are also implemented. At this stage, the development team provides ongoing support to maintain the system's functionality and address any new defects. This attendance kindergarten may undergo additional iterations in the future to improve an existing product. The software used in developing this project is Sublime Text and written in PHP language. The usage of XAMPP Control Panel is to handle MySQL databases. It helps localhost or server to test its websites. The reason we decide to use this software is because it is easy to work with. It has useful features such as multi-line editing, split editing, and more. Aside from that, it is a user-friendly text editor that even a novice can work with. 3.4 Test When the development process is finished, the testing phase is carried out. Before the system is made available to users, the testing procedure is helpful for identifying flaws that may exist. a. Unit Testing It is the phase in which an application's smallest testable unit is tested. Typically, the test is run during the coding phase. b. Functional Testing This phase is used to determine whether the system’s features function as expected. The main function of the attendance management system is to test whether the output is consistent with Nur Haura Kindergarten’s expectations. c. User Acceptance Testing It is a type of testing done by the client or end user to ensure that the system can handle the required tasks in real-world scenarios. Make inquiries to see if the system is complete according to the specifications they require.

IT ASPIRES Vol 2 | 7 3.5 Deploy When the Nur Haura Kindergarten system is finished, the deployment step is carried out by the development team, who will explain to the kindergarten's owner the results achieved in meeting the requirements. This stage helps maintain functionality and prevent bugs. As people interact with the system, there will be opportunities to gather feedback and make changes that will be incorporated into future revisions of the system. 4. RESULT AND DISCUSSION The Attendance Management System was developed for the use of two users namely teachers and parents. Parents will provide the basic information such as name, phone number, identity card number and email before the information is entered into the system. Basic information is given by parents via email, whatsapp application or manually written. Once the teacher enters the system as shown in Figure 4.1, the teacher will pre-register for parents through the information provided. The default password is given to the parent, which is the identification card number as the password and username. Figure 4.1 is the main page for this project where user login is conducted here. In Figure 4.2 teachers can pre-register students using their no MyKad as username and password for parents to use. Figure 4.1 Login Page Figure 4.2 Students Pre-registration page After parents are registered by the teachers or admin, parents will log into the system and make a registration for their child. Figure 4.3 shows forms that must be completed by parents.

IT ASPIRES Vol 2 | 8 Figure 4.3 Example of registration form by parents Figure 4.4 shows the page that allows teachers to edit or delete user accounts. Furthermore, if there are a large number of students, teachers can search for them by their full names. Then, teachers can see all the registered data and can edit them, if necessary, by clicking the edit button as in Figure 4.5. Figure 4.4 View User Account Details

IT ASPIRES Vol 2 | 9 Figure 4.5 View Student’s Details Figure 4.6 displays the attendance camera scanner. When a QR code is scanned, it can collect student attendance, and the daily attendance is displayed beside the camera. When the QR code is scanned twice, it will show a message that the attendance has been recorded. Figure 4.6 Attendance Scanner Figure 4.8 shows a page where reports can be generated. Teachers can print reports by selecting from and to dates. The attendance percentage is calculated by multiplying the number of days they attend school by the number of days in a month and dividing the result by 100. Furthermore, Figure 4.9 shows the report generated after clicking the "Hantar Laporan" button, which is saved in an XLS file. Figure 4.8 Attendance Report

IT ASPIRES Vol 2 | 10 Figure 4.9 View Student’s Details The last phase of any software development or change request lifecycle before going live is user acceptance testing. Verifying sure the software performs as intended in actual circumstances is the last step in any development process. In this phase, actual three users from Nur Haura Kindergarten tested the program to see if it performs as intended in practical situations, validating changes made, and evaluating conformity with their organization's business requirements. As a result, we received some feedback on the system. All the comments from our users were listed down below. We provided the UAT below as proof that user acceptance testing is conducted with teachers and the owner of the kindergarten.

IT ASPIRES Vol 2 | 11 Table 10: Unit Acceptance Testing (Teachers) USER ACCEPTANCE TESTING (UAT): Teachers No Test Case Name Acceptance Requirement Test Result Tester Comments Pass Fail 1. Login Page Users can fill up their username and password in the space that given Pass Teacher and Owner of Nur Haura Kindergarten The login page is very easy to understand and use 2. Tukar kata laluan Page Teacher can change their username and password to secure their account Pass Teacher and Owner of Nur Haura Kindergarten Very secure and easy to reset the password 3. Daftar Guru Page Can register a new account Pass Teacher and Owner of Nur Haura Kindergarten Quick and easy to use 4. Daftar Pelajar Page Teacher can register parent account Pass Teacher and Owner of Nur Haura Kindergarten It speeds up the enrollment process for students when parents receive an easy-to-use link from the teacher. 5. Paparan Guru & Pelajar Teacher can view, edit and delete user accounts if needed Pass Teacher and Owner of Nur Haura Kindergarten Easy to track who has user account and made some modification when needed 6. Paparan Pendaftaran Pelajar In this page teacher can view. Edit and delete student with a QR code Pass Teacher and Owner of Nur Haura Kindergarten Easy to track who has registered to Nur Haura kindergarten and made some modifications when needed 7. Imbas Kehadiran Pelajar Page Teacher needs to scan a QR code to collect student attendance based on IC number Pass Teacher and Owner of Nur Haura Kindergarten Save more time on taking student attendance 8. Laporan Kehadiran Pelajar Page In order to generate a report, teachers need to select a date to see their student Pass Teacher and Owner of Nur Haura Kindergarten Accurate re attendance report and very easy to track

IT ASPIRES Vol 2 | 12 Table 11: Unit Acceptance Testing (Parents) USER ACCEPTANCE TESTING (UAT) : Parents No Test Case Name Acceptance Requirement Test Result Tester Comments Pass Fail 1. Login Page Users can fill up their username and password in the space that given. Pass Parents The login page is very easy to understand and use 2. Registration form page To register their children, parents must complete the registration form. Pass Parents The registration form reduces the amount of time needed for tedious, manual procedures and several documents 5. CONCLUSION In conclusion, the implementation of this Attendance Management System (AMS) has achieved its main objectives as a web-based system in automating the entire workflow of the attendance logging system of Nur Haura Kindergarten. It has reached a stable state in which all bugs have been removed. The system operates at a high level of efficiency, and all teachers involved with it understand its benefits. It has helped in monitoring and managing student attendance. The system not only allows teachers to process attendance transactions, but also makes it simple for them to generate timely, accurate, and relevant reports. Furthermore, this project has provided an excellent opportunity to learn and practice programming skills, particularly web-based programming languages such as PHP. Finally, this system is said to be successful because all the organization's requirements have been met. REFERENCES Hazevytch, L. (2020, February 26). Agile Advantages For Software Development And Your Business. DevCom. https://devcom.com/tech-blog/agile-advantages-for-business/ Lodha, R., Gupta, S., Jain, H., & Narula, H. (2015). Bluetooth Smart Based Attendance Management System. Procedia Computer Science, 45, 524–527. https://doi.org/10.1016/j.procs.2015.03.094 Fadi Masalha and Nael Hirzallah (2014). A Students Attendance System Using QR Code. International Journal of Advanced Computer Science and Applications, 5(3). https://doi.org/10.14569/ijacsa.2014.050310 Mohd Ameer Hakim bin Mohd Nasir, Muhammad Hazimuddin bin Asmuni, Norsaremah Salleh & Sanjay Misra (2015). A Review of Student Attendance System Using Near-Field Communication (NFC) Technology. https://www.researchgate.net/publication/300791064_A_Review_of_Student_Attendance _System_Using_Near-Field_Communication_NFC_Technology Scanova Blog. (2019). What is a QR Code: A Beginner’s Guide by Scanova. Scanova Blog. https://scanova.io/blog/what-is-a-qr-code/

IT ASPIRES Vol 2 | 13 CStar Application Noor Hafizzah binti Ismail1 Puan Nurhidayah binti Mokthtar2 Lim Zhi Ting3 Loh Wei Ting4 Kam Weng Xuan5 1 Jabatan Teknologi Maklumat dan Komunikasi, Politeknik Seberang Perai; ([email protected]) 2 Jabatan Teknologi Maklumat dan Komunikasi, Politeknik Seberang Perai; ([email protected]) 3 Jabatan Teknologi Maklumat dan Komunikasi, Politeknik Seberang Perai; ([email protected]) 4 Jabatan Teknologi Maklumat dan Komunikasi, Politeknik Seberang Perai; ([email protected]) 5 Jabatan Teknologi Maklumat dan Komunikasi, Politeknik Seberang Perai; ([email protected]) Abstract The number of autism children are increasing in world. Autism spectrum disorders (ASD) are a diverse group of conditions. Understanding the needs of the children are also a very challenging task because of their difficulty in expressing their need. Thus, we build a mobile app named CStar on the concept of educational games for children with the autism spectrum disorder (ASD) to assist them. This mobile application will help children with ASDs to learn while playing the application game. Through this application, autism children can recognize letters, numbers and learn some gesture movement. As autistic children could get hard in paying attention, CStar application is formed with several games with different level, creating an interesting and funny learning environment for them. This application is convenient for them to learn at anytime and anywhere, moreover, help user to save physical space as it only consumes space in mobile phone. Agile method is implemented while building CStar application as it could provide rapid, continuous delivery of useful software to end user. Then, we test CStar application by using unit testing plan, integration testing plan and user acceptance test. CStar application was created using Android Studio software, Firebase for data storage, Adobe Photoshop and Adobe Animate to create the application for interface design. With the existence of this application, it can assist autism children to learn in their daily lives while playing game and help parents or caregiver to identify the ability of children, moreover, saving physical storing space. Keywords: Mobile app, educational games, autism children 1. INTRODUCTION Nowadays, autism is on the rise. The autism spectrum is a range of neurodevelopmental conditions generally characterized by difficulties in social interactions and communication, repetitive behaviours, intense interests, and unusual responses to sensory stimuli (Dwyer et al., 2022). It is commonly referred to as autism and officially designated autism spectrum disorder (ASD), but the latter term is controversial among neurodiversity advocates, neurodiversity researchers, and many autistic people due to the use of the word "disorder". Autism Spectrum Disorder (ASD) is a disorder accompanied by cognitive and social deficits (i.e., lack of visual eye-contact, poor social awareness, and stereotypic behaviours), which in turn hinders functional qualities of independence and social interactions (American Psychiatric Association, 2013).

IT ASPIRES Vol 2 | 14 Current reports estimate the number of children diagnosed with ASD as 1 in 68 (Center for Disease Control and Prevention [CDC], 2018), with steady rates increasing over the last 20 years (Neggers, 2014). Moreover, there is a sufficient research pool to be demonstrate concern for quality of life for parents of children with ASD (Khanna et al., 2011). Hence, CStar is an app for children with ASDs is developed for android devices to focus on supporting to verbal communication problems, which can assist the children in the way of communication and interaction with others. In conclusion, due to children with ASDs have a difficulty in expressing needs verbally, i.e., interaction using gestures or pointing instead of words, this mobile app will give a new alternative way that help the children to select and choose what they need (or want to say) and thus, reducing any unwanted miscommunication. 1.1 Problem Statement As we know, it is difficult to identify autism level of autistic kids by using medical test such as blood testing. Besides, the learning methods before is traditional learning methods such as books, toys that can only be read, and more are not interactive. Lastly, the problem is physical therapy game such as education book or toy cost a lot of money and take up a lot of space to store the game tools. 1.2 Objectives The objective CStar application developed are: a. To develop mobile app that able to identify the level of autistic children through scoring method. b. To create an interesting app environment for autistic children to have fun while learning at the same time. c. Develop a free therapy mobile app game that can be downloaded through Google Play Store. 1.3 Scope of Project 1.3.1 User Scope This project was developed for RHC Training Centre in the original application concept. a. Children with autism – Children with autism with ages from two and a half years old and above can use this mobile app to play variety games that can assist them to improve their interactive responses. b. Parents and community – This mobile apps can be used for parents and the global community for understanding the needs of autism children. c. Therapist at RHC Training Centre – Through this mobile apps, it can be used for therapy and education to help the autism children in growing and development. 1.3.2 System Scope This mobile app can be downloaded from Google Play Store. It can only be used by android mobile user. System design lets users manipulate the mobile devices intuitively, with finger movements that mirror common motions, such as pinching, swiping, and tapping. Our mobile app has different games for autism children which is visual simulation game, auditory stimulation game, and cognitive stimulation problem-solving game. It aims for providing therapy, education, and leisure games in an online way to meet nowadays requirement of humanity. The software used for the development of this application is Android Studio. Java programming language and Firebase database.

IT ASPIRES Vol 2 | 15 2. LITERATURE REVIEW In this literature review, we examine the literature published in preceding period of 5 years regarding autism children and mobile applications development for mini game. This review benefits us by providing specialized information to how mini game can contribute to assist autism kids, moreover, helps us to have in-depth understanding in developing mobile application. 2.1 Autism in Young Children According to Centre for Disease Control (CDC) in United States, the incidence of autism is at 1 in 68 children. That would mean that approximate 9,000 children in Malaysia are born with autism every year (Team, 1987). Autism is a complex developmental disability that typically appears during the first three years of life due to a neurological disorder that affects the functioning of the brain. It is four more times prevalent in boys than girls. Autism shows no racial, ethnic, or social boundaries, and cuts across family income, lifestyle and educational levels. Furthermore, intervention for kid with ASD must be implemented to motivate them to perform daily communication and perform interaction with others such as people or animal. 2.2 Game for therapy of Autistic Children There is an ongoing controversy as to whether game is good for assist kids affected by autism. The game application is act as a play therapy tool aimed at improving autistic kids social, cognitive, and furthermore increase their knowledge, despite the use of online or offline game. According to specialist of RHC training centre, CStar is suitable for the use of autistic kid age at two and half years old and above. A picture is provided below as evidence of specialist RHC training centre. Table 1: Comparison Existing Game with Proposed Application App/ Comparison AutiSpark: Kids Autism Games A Serious Game for children with autism spectrum disorder as a tool for play therapy Our application: CStar Application Description An educational program especially made for children with autism spectrum disorder (ASD) with learning games tested and approved by special educators and occupational therapists. The design and development of a TUI for children with ASD from 5 to 9 years old. The TUI uses building blocks following the concept of “LEGO® Based Therapy”. This application focuses on therapy for autism kids aged two and a half years old and above. It promotes e-learning and interaction training to autism kids. User Security (login) Yes No Yes Database Yes No Yes Sound effect Yes Yes Yes Portability Yes No Yes Cost Yes Yes No 2.3 Development of Online Game-Based Education Today’s children belong to a generation that is familiar with technologies, such as computers, tablets, and the internet. Prensky called this generation “digital natives”, affirming that digital language is part of their lives and it can even change their thinking patterns (Laranjeiro, D. Development of Game-Based M Learning Apps for Pre-schoolers. Educ. Sci. 2021, 11, 229). At this new era, kids are belonging to a generation of technologies and even they implement the user of smartphones in their

IT ASPIRES Vol 2 | 16 daily lives. In the development of digital world, traditional gaming method should also be improved into the technology style to emerged into kid’s life. Moreover, the app aims to have several goals for education in kids such as logical thinking, numeracy, but most emphasize on interactive responses. 2.4 Autism Level Measurement through Game Scoring Assessment plays an essential role in providing useful information to guide learning and to adapt the learning mode to autistic children's specificities. CStar game is characterized by conditions of victory or defeat which are the objectives of the scenes composing the game, and a narration. Moreover, we assign level to each game varies from scene to scene. At the end of each played scene, a new weighting of the concepts is calculated to measure the child's understanding of a specific concept through the decisions taken while playing (Tahiri & Alami, 1970). Thus, we could achieve our objective we proposed. 3. METHODOLOGY Methodology we used for our CStar application is Agile method. We choose this method due to the flexibility of the Agile approach; it proposes incremental and iterative approach to software design. In the Agile model in software testing, both development and testing activities are concurrent. Figure 1: Agile Methodology (Abhishek, 2021) 3.1 Phase 1: Plan The first stage of our project application in the life cycle of agile software development. This initial stage is about discussing the project title and plan how to make the project meet requirement. We contact RHC training centre and schedule to have a meeting with RHC training centre. Since our project application is aimed to provide therapy for autism, we need to do research about details concerning historical and current application technology based on autism therapy. 3.2 Phase 2: Design This speculative phase is when the Agile lifecycle really takes shape for our team and project application. Release planning is where we get together with our RHC training centre and identifies exactly what they are looking for. We discuss how this will be made possible by building the backlog at the story level that means storyboard. A good way to think about stories is how the end-user might describe the feature or product. A story should include the type of user, what they want from the product and why. Figure 2 shows the login page, user can sign up to create an account and login into the

IT ASPIRES Vol 2 | 17 application by using username and password. Figure 3 shows the main page, there are 3 levels of games which are basic, medium, and advanced. In each level page, there are 2 games. Figure 2: Login Page and Main Page Figure 3: Basic, Medium and Advanced Level Page In gesture recognition page, there are several movements, user can learn according to the video, and they can take a picture. In auditory stimulation, user can play for the audio and learn read according to the word. In selection page, there are 9 questions, user can select for answers according to the questions. In puzzle page, user can drag the alphabet to match the word of questions. Figure 4: Basic Level (Visual Stimulation and Auditory Stimulation)

IT ASPIRES Vol 2 | 18 Figure 5: Medium Level (Cognitive Problem Solving) In maze game page, user can play for the maze by swiping the block. In hint and find game page, user can find the object according to the hint of word. Figure 6: Advance Level The application design is also based on use case diagram and data model diagram as in Figure 7 and Figure 8. Figure 7: Use Case Diagram

IT ASPIRES Vol 2 | 19 Figure 8: Data Model Diagram 3.3 Phase 3: Develop Once the requirements have been defined based on feedback from the product owners, we begin to start our development of project application. In this case, we develop our application using Android Studio, java programming language, firebase database. We first implement the interface according to our initial design by using tools such as adobe photoshop. Next, we start to build our app in android studio, then we implement the function we mentioned in the storyboard. Figure 9: Image Editing in Adobe Photoshop Figure 10: Code and Design the Application Interface in Android Studio 3.4 Phase 4: Test As the testing proceeds, we may encounter many bottlenecks, requiring different strategies and tactics to solve it. We decide to implement unit testing, integrated testing, and the mostly we used to be system testing on our project. We will also apply user acceptance test on our project to determine whether end user such as parent or autistic kids could accept and use our project output application. No matter how healthy any component seems to be, one can’t tell with all certainty if the software is working to its full potential until an integration test is performed.

IT ASPIRES Vol 2 | 20 3.5 Phase 5: Deploy Our project application has now been delivering to caregiving or autistic kids. We emphasize deployment because it closely monitors these early stages for bugs or defects missed in testing. During this phase, we provide ongoing support to keep the CStar application running smoothly and fix any new bugs. Over time, further iterations are possible to update an existing product or add other functionality. 3.6 Phase 6: Review and Launch After completing all the previous stages, we upload our project to Google Play Store, then we present the result we achieved to supervisor in meeting the requirements. After that, the Agile software development phases start over – either with an new iteration or moving to the next stage and scaling Agile. 4. RESULT AND DISCUSSION Based on the Figure 11 below, these are the interface for each page in CStar application. In these interfaces, user can sign up to create account if they have no account before. Then, they can login into this application. After user successfully create account, they can back to login page to login by input username and password. Next, in main page, there are 3 options of level that user can choose which are basic level, medium level, and advanced level. Figure 11: Login Page, Sign Up Page and Main Page Interfaces of 3 Level of Games Pages Figure 12 shows two different mini games for each level. When user choose for the basic level, there are gesture recognition and voice game. Besides, the selection game and puzzle game are in the category of medium level. For the advanced level, maze game and hint and find game can be chosen by the user.

IT ASPIRES Vol 2 | 21 Figure 12: Basic Level Games Page, Medium Level Game Page and Advanced Level Game Page Figure 13 shows examples of gesture recognition game interfaces where there are 9 movements, users can learn for gesture movements with the help of videos. Then, they can take pictures below every gesture movement. The interfaces of voice game shows there are 9 voice games. User can read according to the word appear with the help of audio. Figure 13: Gesture Recognition Games and Voice Games When user choose to play the selection game, they will select for the answers according to the question. The selection games have 9 questions. The score will be calculated. User can select for the answer which there are 4 selections. All questions provide picture to guide them for answering questions. Below the question, there are also the scoring for each question they answer. While for the puzzle game, user can click for the alphabet to match the word according to the given picture. There have 9 puzzle games questions and each puzzle games, there are alphabets. User can click for the alphabets to match the word with the help of hint. Figure 14 shows examples of selection game and puzzle game interfaces.

IT ASPIRES Vol 2 | 22 Figure 14: Selection Game and Puzzle game User that chooses for maze game can move the block to the end according to the path of maze. In hint and find game, user can learn to find the object in each scene according to the level. They can find the object with the help of word and hint in this mini game. The interfaces of maze game show that there 6 maze games. User can swipe the block to the end according to the path. The interfaces of hint and find game show that there are 3 level of game. User can find the objects with the help of word below and there are also hint button when they click on it. Figure 15 shows examples of maze games and hint and find games interfaces. Figure 15: Maze Games and Hint and Find Games We implement Unit Testing Plan (UTP), we will test for each section of CStar application. In this testing procedures, users need to enter username and password before logging into this application. If the user has no account yet, it will require them to sign up for create account. The testing here will be done to find out whether the user can sign up for new account in this application. Then, tester will test if each module is completely functioning or not, moreover, seeking the possible bugs in CStar applications. Besides, we implement Integration Testing Plan (ITP), testing will be done on login and sign-up section. Where these 2 sections will be test whether after the user login the application, it will continue to display the home page of this application. In addition, the final testing that was carried out was User Acceptance Test (UAT) to verify that CStar application can function completely or not. Tester will be given the apk file of CStar application and they need to identify if any features have been

IT ASPIRES Vol 2 | 23 overlooked or if it contains any bugs. The result of user acceptance test will be recorded, if any bugs is founded, developers will adjust the code based on test results, resolving any bugs or making suggested changes and then retests. Once the CStar application meets the users' criteria, the tester signs off on the changes. The results of the tests obtained are recorded as in the Table 2. Table 2: User Acceptance Test (UAT) User Acceptance Test (UAT) Name of test Test Procedure Condition Needed Expected Results Results (Pass/Fail) Log In Users need to input username and password to log into this application Input username and password User can use this application Pass Sign Up Users need to register for username and password if they have no account yet. Username and password Sign Up Successfully Pass Gesture Recognition Game Users need to follow the gesture movement and take picture of it. No Can make a gesture movement and take picture for each gesture. Pass Voice game Users need to press for audio button and speak accordingly with the help of word. No User can speak with the help of audio and word appear. Pass Selection game Users need to select for options according to the questions User can select for the options Pass Puzzle game Users need to click for the alphabets for matching the word according to the picture. User can click for the alphabets Pass Maze game Users need to move the block according to the path of maze to the end User can move the block smoothly to the end Pass Hint and Find game Users need to find the objects User can find the object Pass The advantages of using CStar application are autism children can improve their learning skills in daily lives in aspects of gesture movement, speaking, reading, and counting. Besides, CStar application can be used at anywhere and anytime their want. Furthermore, CStar application also provide entertainment for autism children at the time they play the game in app. Moreover, by using CStar application, user such as parents or expert of RHC training centre can save their physical space as they don’t user the physical game tools that consume real space. In the case CStar application is a free application, user also reduces expenses for buying game tools online either game or offline game. Lastly, the use of CStar application enable user to play the game at anywhere because of its portability characteristic. CStar application is only can be used in Android operating system and it cannot be used in IOS operating system. CStar application needs internet connection when user login in into the application. Users need to download this application in Google Play Store then can directly use this application. This application regarding the user signs up if they have no account, so user need to register their username in this application before login. Then, user will go directly to the login page and login into this application. The conditions of the android operating system that can be used minimum are android 5.0 (Lollipop). Therefore, CStar application has some limitations which is this application can only be used by android user and can only be operated in android devices only. iOS user cannot use this application in their iOS device. Furthermore, CStar application does not have any maintenance work. So, after being remove in future, the application will remain same. Other than that, CStar application could not reset password of user if they forget user password because the features are not implemented. A very

IT ASPIRES Vol 2 | 24 important limitation of CStar application is, there is no admin system for admin to manage user, such as admin cannot operate the application to update or delete user. Lastly, when the users is offline, they cannot go through login function because firebase database implemented in CStar application need internet access to function 5. CONCLUSION As a conclusion, CStar application is built successfully with three levels of game. CStar application consists of games that is basic level, medium level and advanced level, thus, our mobile app project can assist children with autism to trigger the children's imagination for cognitive development as it is expected to become reliable to support content for the children to learn and apply in real situations. Moreover, CStar application also brings several benefits to user, the module of application is all function and achieve the motif to help user saves physical space. Furthermore, caregiver or parents could also assess the ability of their children through the game provided basic assessment. This mobile application will help RHC Training Centre to support children with ASD, especially to facilitate their positive behavioural skills. In CStar application, there is no admin system for the application owner (RHC training centre), this means that application owner cannot review and manage users’ detail. Admin system should be formed in the future to enable project owner to restrict application users, furthermore, to track who has used this application. In addition, it can also be developed in a new environment using the iOS platform for the purpose of application development for comprehensive use by all mobile application users. REFERENCES Albright, J. (2021, May 12). Development of game-based M-learning apps for preschoolers. Development of Game-Based M-Learning Apps for Preschoolers. Retrieved July 13, 2022, from https://files.eric.ed.gov/fulltext/EJ1297311.pdf Dwyer, P., Ryan, J. G., Williams, Z. J., & Gassner, D. L. (2022, April 1). First do no harm: Suggestions regarding respectful autism language. American Academy of Pediatrics. Retrieved July 15, 2022,from https://publications.aap.org/pediatrics/article/149/Supplement%204/e2020049437N/185653/FirstDo-No-Harm-Suggestions-Regarding-Respectful?autologincheck=redirected Health Organization, W. (2022, March 30). Autism. World Health Organization. Retrieved July 14, 2022, from https://www.who.int/news-room/fact-sheets/detail/autism-spectrum-disorders Health Service, N. (2019, April 18). Signs of autism in children. NHS choices. Retrieved July 14, 2022, from https://www.nhs.uk/conditions/autism/signs/children/ Osman, H. A., & Shirmohammadi , S. (2017). A serious game for children with autism spectrum disorder as a tool for ... A Serious Game for children with Autism Spectrum Disorder as a tool for play therapy. Retrieved July 13, 2022, from https://www.researchgate.net/publication/317424619_A_Serious_Game_for_children_with_Autis m_Spectrum_Disorder_as_a_tool_for_play_therapy Tan, S. W., Abdullah, M. H. L., & Mohd Daud, N. F. N. (1970, January 1). Mobile games for children with autism spectrum disorder to support positive behavioural skills. SpringerLink. Retrieved July 14, 2022, from https://link.springer.com/chapter/10.1007/978-981-13-6031-2_43 Tahiri, N., & Alami, M. E. (1970, January 1). [PDF] A new evaluation technique through serious games for children with ASD: Semantic scholar. undefined. Retrieved July 23, 2022, from

IT ASPIRES Vol 2 | 25 https://www.semanticscholar.org/paper/A-New-Evaluation-Technique-Through-Serious-GamesTahiri-Alami/119320e5c0b3f358076380bfacdbcb52bdf39809 Team, N. (1987). Autism. NASOM. Retrieved July 15, 2022, from https://www.nasom.org.my/autism/#:~:text=According%20to%20Centre%20for%20Disease,born %20with%20autism%20every%20year. Wikimedia Foundation. (2022, July 14). Autism spectrum. Wikipedia. Retrieved July 15, 2022, from https://en.wikipedia.org/wiki/Autism_spectrum

IT ASPIRES Vol 2 | 26 Online Shopping Website Rooszana Binti A.Rahman1 Siti Nur Alysha Binti Abdul Rahim2 Nurul Haziqah Binti Hamkah3 Nur Humaira Binti Saharon4 1 Jabatan Teknologi Maklumat dan Komunikasi, Politeknik Seberang Perai; ([email protected]) 2 Jabatan Teknologi Maklumat dan Komunikasi, Politeknik Seberang Perai; ([email protected]) 3 Jabatan Teknologi Maklumat dan Komunikasi, Politeknik Seberang Perai; ([email protected]) 4 Jabatan Teknologi Maklumat dan Komunikasi, Politeknik Seberang Perai; ([email protected]) Abstract Online shopping website allows users to buy or sell items over the internet. A person can either be a seller or customer in order to perform the selling or buying process of items when using this website. The major problem when dealing with traditional shop is that it usually has the restriction on the opening time where the customer has to come to the shop on the specific operation hours. Next, the offline business cannot be operated from anywhere because of the geographical restrictions where the traditional store has their own specific location. Online shopping website based on e-commerce platform is developed in order to provide the information regarding the item that the seller sold. This website will let a customer view and purchase items online. Meanwhile, it also allows seller sell their items which is specifically drinks product without the need for customer especially customer that are far away from seller’s store location to come and walk in. Based on the experimental result, this website is able to conduct online transaction between seller and buyer properly. Keywords: Online shopping, online shopping website, e-commerce 1. INTRODUCTION Internet usage in Malaysia has developed rapidly and has become a common way for transaction of products, services and information. According to research have stated that websites are valuable in retail outlets due to its features that are not limited by distance, low cost, order taking and customer feedback conveniences anytime and anywhere. Therefore, many companies have transformed or expanded their businesses from traditional physical stores to online stores (e.g. E-Commerce websites) to focus on transactions of commodities or services through electronic systems such asthe Internet and other computer. According to Asean Today, the digital economy contributes 18.5% to Malaysia's economy, amounting to RM267.7 billion in gross domestic product (PDB). The e-commerce sector accounts for 43% of the digital economy's value, contributing RM115.5 billion in revenue. However, they still have a certain company that use online transactions but customer can only order via calls or message through all kind of media social such as whatsapp and facebook. This means that company did not have their own online store website since some Malaysians are still reluctant to shop online because of their lack of trust especially in terms of seller reliability and process security. They hardly believe in online shopping, as they are unable to touch and feel the merchandise before purchasing. Thisresearch proposal proposesto build a website forthat kind of companywhich we choose Teraju Falah Enterprise that still did not have their own E-Commerce website. This website which is developed to ease the Teraju Falah Enterprise’s customer to make an online order without make it complicated as they have to wait for that company responses when they make an order via call or messages through media social.

IT ASPIRES Vol 2 | 27 1.1 Problem Statement One of the problems that may arise is that it takes a generally long time for the customer to get a response regarding the purchase of the product from the company after making a call or sending a message since the company basically needs to check whether their product specifically is still available or not in a subtle way. Moreover, they really do not mostly have a dedicated platform to give feedback about the products that they specifically have been purchased, which for all intents and purposes is significant. Furthermore, customer also need to actually take a particularly long time to specifically do bank transactions because they need to basically obtain an account number first from this company before making a payment and then they need to show proof of the payment receipt, which definitely shows that moreover, they essentially do not kind of have a dedicated platform to actually give feedback about the products that they definitely have been purchased, or so they literally thought. 1.2 Objective The following are the objectives of our project should achieve in order to solve the problems and provide suitable solution to the entire solution: a. To create a website that can display the latest product. b. To enable customers to provide comments regarding the products listed on the website. c. To securely allow customers to conduct online transactions from the website itself. 1.3 Scope of Work This project is developed for Mr. Abdul Rahim, the owner of Teraju Falah Enterprise from Sungai Petani. The scopes of this project are customer, company and system. Every user requires having an email and password to log into this website. Every user can only view, buy the product and edit their own details. 1.3.1 User Scope Customer This website will ease them to order the product without wasting too much of their time. Customer can view the products details, login, buy the product, make a transaction and give feedback about the product. Company This website can be flexible for their workers since the order will directly go through the website itself. Company can view the order list, edit, update and delete their product details. 1.3.2 System Scope This website we build and upgraded much better from an existing website. In this website there are 12 pages which are home page, contact page, register page, login page, account page, shop page, single product page, cart page, order details page, checkout page, payment page and payment complete page. Customer have to log in their email and password first and then fill their bank details for online transaction before purchasing the products. The software used for the development of this website are Visual Studio Code, Framework CSS, payment gateway for online payment and mysql for database.

IT ASPIRES Vol 2 | 28 2. LITERATURE REVIEW In this chapter, it will discuss the comparisons and explain about the website that use other or similar methods that related to e-commerce. The literature review will also allow to improve the performance of the website to reduce the problems that often occur in some website such as excessive advertising. We use Syarikat Thong Guan Trading SDN. BHD. and Aik Cheong Coffee Roaster SD. BHD. and make a comparison so that we can make a better website for Teraju Falah Enterprise. Table 2.1 Literature Review Features Syarikat Thong Guan Trading SDN. BHD Aik Cheong Coffee Roaster SD. BHD User Register No No Product Details Yes No Online Shopping No No Easy to purchase Yes Yes Online Payment No No Accessibility Yes Yes Login in to the system No No Figure 2.1 Syarikat Thong Guan Trading SDN. BHD Figure 2.2 Aik Cheong Coffee Roaster SD. BHD Both companies generally lacked an online payment option because they did not literally have their generally own internet store in a basically big way. Their customers actually are unable to both purchase

IT ASPIRES Vol 2 | 29 and review the product made by their company in a really big way. Users of both firm websites specifically are unable to sign up and log in to the system, demonstrating that their customers actually are unable to both purchase and review the product made by their company in a subtle way. 3. METHODOLOGY The methodology is the systematic, theoretical analysis of the methods applied to a field of study. It comprises the theoretical analysis of the body of methods and principles associated with a branch of knowledge. Typically, it encompasses concepts such as paradigm, theoretical model, phases and quantitative or qualitative techniques. The methodology is the general research strategy that outlines how research is to be undertaken and among other things, identifies the methods to be used in it. These methods, described in the methodology, define the means or modes of data collection or sometimes, how a specific result is to be calculated. The methodology does not define specific methods, even though much attention is given to the nature and kinds of process to be followed in an articulated procedure or to attain an objective. Agile SDLC model is a combination of iterative and incremental process models with a focus on process adaptability and customer satisfaction by rapid delivery of working software product. Agile methods break the product into small incremental builds. These builds are provided in iterations. Figure 3.1 Agile Model 3.1 Planing Phase This phase is an important step to start the project. To achieve this project, the group members are required to prepare a project proposal by recording all the necessary details. We also, state all of the objectives to help us define goals and make decisions to successfully achieve this project. Finally, we analyse the system that will be developed to meet the client’s needs and to achieve the best results. 3.2 Design Phase For the design phase we sketched the model design for the website so that it is easier to see the preliminary sketches before the project starts. We design our website by using Figma before we build the actual website itself. 3.2 Development Phase For our development phase, our group develop this project according to the design and procedures

IT ASPIRES Vol 2 | 30 that have been discussed in phase 3, As we develop this project, the supervisor monitor us regularly. 3.3 Testing Phase In this phase, we test the website to make sure every single page we have generated is seamlessly function well. 3.4 Deployment Phase In this phase, the website is complete and fully functional. The users of this website can finally use this system to its full potential. The requirements of the process owner are fulfilled and they can check all the functionality of this system. 3.5 Review Phase In this phase, the users of this system can give feedback if they want any changes to their current system and if any functionality is not working, we will fix the problem right away. 4. HARDWARE AND SOFTWARE REQUIREMENT The system requirements under the headings of the software requirements would be discussed below: 4.1 Hardware Requirement Table 4.1 Hardware Requirement Hard ware Description Processor Intel CORE i5 Memory 8.00 GB Hard Disk Space 1TB Others Other required standard computer peripherals, such as keyboard and mouse 4.2 Software Specification Table 4.2 Software Specification Software Description Server Environment Operating System Windows 11 Home Single Language Programming Tool Visual Studio Code (PHP) Database Server Xampp Control Panel v.3.3.0 Web Server Apache 2.4.53 Client Environment Internet Browser Google Chrome

IT ASPIRES Vol 2 | 31 5. DISCUSSIONS 5.1 Advantage of the Project After the production of this website, all objectives have been achieved. The advantage of the project is all the information was securely. Moreover, the website can run smoothly without any redundant. Beside that the company will get more customer around Malaysia. Next, customer did not have to come all the way to the company store just to purchase the product. It will save time for the customer. This project been built to ease the company as well as the customer. 5.2 Limitation of the Project There are a few limitations in our project which is time and knowledge limitation to complete this entire project. This is because we were given only 16 weeks to complete the entire project which includes the planing phase, designing phase, developing phase, testing phase, deployment phase and review phase. Hence, we just learn all of the software that are require in our project in our last semester. 6. CONCLUSION As the conclusion, E-Commerce has become a major resource in modern business not only in the entrepreneur’s but also for the customer’s point of view. In this project, the user is provided with an e- commerce website that can sell or buy our item over the internet that will be much easier and more convenience to the user. The PHP language technology is used to implement this e-commerce web based system. In addition, MySQL is used with PHP as back-end tool and can be interfaced very well with PHP. Therefore, PHP and MySQL are excellent choice for webmasters in order to automate their web sites. Next, a good shopping cart must be design accompanied with user-friendly shopping cart application logic. It should be convenient for the customer to view the contents of their cart and able to remove or add items to their cart. The shopping cart application described in this project provides a number of features that are designed to satisfy the customer. Last but not least, the development of this project has given me a precise knowledge about the e-commerce platform and hopefully that the system may meets all the user requirements where this project able to be user friendly and more convenience for a better human-to- machine interaction (HCI).

IT ASPIRES Vol 2 | 32 REFERENCES Zeronara.net. (n.d.-b). Welcome To AIK CHEONG SDN. BHD. https://www.aikcheong.com.my/ Syarikat Thong Guan trading Sdn. Bhd.: About us. (n.d.). Syarikat Thong Guan Trading Sdn. Bhd.: Welcome.https://www.888teacoffee.com.my/index.php/about-us/companyprofile?showall=&start=1 Ilieva, S., Ivanov, P., & Stefanova, E. (2004, September). Analyses of an agile methodology implementation. In Proceedings. 30th Euromicro Conference, 2004. (pp. 326-333). IEEE. https://asana.com/resources/agile-methodology

IT ASPIRES Vol 2 | 33 Event Attendance System Using Whatsapp API and Quick Response (QR) Code Siti Aisyah Binti Roslan1 Nur Syafiqah Binti Wahayu2 Siti Nur Azrina Binti Aziman3 Azilah Binti Abd Rahim4 1 Jabatan Teknologi Maklumat dan Komunikasi, Politeknik Seberang Perai; ([email protected]) 2 Jabatan Teknologi Maklumat dan Komunikasi, Politeknik Seberang Perai; ([email protected]) 3 Jabatan Teknologi Maklumat dan Komunikasi, Politeknik Seberang Perai; ([email protected]) 4 Jabatan Teknologi Maklumat dan Komunikasi, Politeknik Seberang Perai; ([email protected]) Abstract Along with the development of technology, the approach of recording participants’ attendance for events has changed in many ways. Traditional manual methods that have some challenges such as the usage of papers, lost and difficult to search the data for needs. Therefore, Event Attendance System was developed to record participants’ attendance using Quick Response (QR) code. QR code in .png format will send to the user via WhatsApp Application Programming Interface (API) to their WhatsApp application. The QR code that received by the user will be used to record the attendance on the day of event. Then, e-certificate will be generated through the Event Attendance System. The development process of this system is using agile methodology. This system was built using PHP programming language, MySQL database and Apache web server. The Event Attendance System has been tested in user acceptance testing and received a good response from users. The results of this project showed that the method of combining QR code and Whatsapp API can solve existing problems to record the attendance of the events. This method could also be applied and used in other forms of record attendance with improvement of security aspects. 1. INTRODUCTION The meaning of attendance is closely related to the frequency and consistency of a person when attending an event or place such as school or work. Attendance can be classified for several purposes. However, the word ‘attendance’ is usually associated with being present somewhere, such as in classes, gatherings, events, and so on. To take attendance for events involving many participants will usually use biometric system, proximity cards and badges, manual timekeeping systems like excel and time clock system (Timchenko and Chernets, 2021) Nowadays, the method of using QR has been widely used to take attendance. QR code stands for Quick Response code. QR code is a type of code that can be read or scanned using smartphones or with specific scanners for QR codes. QR Code has a pattern representing black modules displayed in a square grid on a white background, QR codes are similar to barcodes. Although a QR Code typically links to a website or application, the data it contains can also be used for other things like saving contact information and sharing social media updates (Kogoi, R., 2022). With the rapid development of technology, various things can be done easily such as creating a certificate online. An electronic certificate is a collection of data that enables the identification of the certificate's holder, secure information interchange with other people and organizations, and electronic signing of data supplied in a way that makes it possible to verify its integrity and origin. Digital certificates can be used for electronic document signing as well as user identification in secure email. Emails are digitally signed by the sender and verified by the recipient. To cryptographically link the owner of a public key with the entity that owns it, a digital certificate,

IT ASPIRES Vol 2 | 34 also known as a public key certificate, is used. Public keys for encryption and authentication can be exchanged with the aid of digital certificates (Shacklett, M. E., 2021). With this sophisticated technology, it can connect one application to another by using Application Programming Interface (API) technology. Any software with a specific function is referred to as an application when discussing APIs. Interface can be compared to a service agreement between two programmes. This agreement specifies the requests and responses that the two parties will use to communicate. Developers can find instructions in their API documentation on how to format those requests and responses (Amazon Web Services, Inc. ,2022) 1.1 Problem Statement The use of QR codes that need to be scanned by staff will cause some major problems. Among them, is sharing QR codes between staff. This can happen when staff take a screenshot or take a picture of the QR code from their mobile phone screen and then share it with other staff. In addition, staff can also scan the QR code and fill in the information of other staff as representatives. This will cause identity falsification where the staff is not present, but attendance is still taken. Most people still take attendance by printing a list of names on paper. By using paper, which is readily misplaced, will result in data loss. Finding information will take longer if attendance is taken on paper. For instance, people must go through a mountain of paperwork to identify a staff member's name so they can track their attendance. This may cause delays and time wastage. The issue of delay in printing the participation certificate often occurs. This is because the program manager needs to collect the data of the participants who attend. The process to print the certificate will also take a long time if there are many certificates, not to mention if there is damage to the printer or running out of ink which will affect the quality of the certificate. In addition, the cost to print each certificate is high because it uses paper that has a good quality. 1.2 Objectives The objectives for this project are: a. To Develop An Attendance System Using Quick Response (QR) Code. b. To Send Generated Unique Quick Response (QR) Code To The Staff Through Whatsapp Application Programming Interface. c. To Generate e-certificate base on attendance. 1.3 Scope of Work This project was built for the staff of Information & Communication Technology Department Politeknik Seberang Perai (PSP). This system has three user which are Event Manager, Staff and Head of Department who will use this system. In the event manager's user scope, there are seven activities that will be performed by the event manager such as Event manager will create events by entering event information. There are three activities that the staff will be able to do in this system such as the staff will log into the system to check the event they participated in. The systems scope for this system are divided by four module which is event registration module, Quick Response (QR) code capture module, Application Programming Interface (API) through WhatsApp and E-certificate module. 2. LITERATURE REVIEW Studies have been made to ensure that this system can be built successfully. This system has been compared with other systems or applications as part of the study. This work has contributed to further increase the effectiveness of this system. To produce a system that can function well, research into a system that has almost the same function as this system has been carried out. The following is information obtained based on research conducted on three systems.

IT ASPIRES Vol 2 | 35 2.1 School Attendance Management System (Sams) School Attendance Management System is a system that can store student data systematically. This system has several functions such as adding student names and collecting student attendance. A mobile computing system called the School Attendance Management System can be used to gather information about student attendance at school. This system must carry out all fundamental operations like adding the student’s name and counting the number of attendees. The system offers a high level of capacity for storing student names in databases, which will be kept in a more orderly fashion (Farah Syahirah, 2018). 2.2 Student Attendance System Based on QR Code with Unique Identification Capturing To track attendance in class or at events, students will use mobile devices to scan Quick Response (QR) codes. The effectiveness and efficiency of taking student attendance will be improved through an attendance monitoring system based on QR codes. It will address the problems of calling out names and paper recording that have plagued traditional attendance taking. The goal of this project is to create a QR code-based attendance system that will use mobile devices to scan QR codes to track attendance in classes or other events. The QR code system is a collection of android programmes designed to capture and store attendance data in the cloud. It will address the problems that those traditional attendance-taking techniques, like calling out names and paper recording. These traditional attendance systems used a lot of labour and resources while being ineffective (Ng Sam Kee, 2021). 2.3 Event Attendance Application Using QR Code A web-based system for tracking attendance at events is called the Event Attendance application using Quick Response (QR) code. The system creates the QR code with the event details. A QR code will be displayed during the event on the LCD screen or printed and stuck to the wall. Then, tables are created as reports of those who attended the event. The main objective of this system is to create a quick and effective attendance system using a QR code. To validate their attendance at an event, students must scan the code. Student information will be automatically added to the database after a student scans the code. The program’s effectiveness will rise because of the organizer’s ability to take attendance more quickly (Muhammad Shazmil, 2019). 3. METHODOLOGY The methodology used to develop this system is the Agile methodology as in Figure 1.1. This methodology is used because it has high flexibility for projects and the ability to adopt projects frequently. Agile techniques were used in the creation of this system. This methodology is used because it allows frequent use of projects and offers great project flexibility. This method can also provide high customer satisfaction over the development process because it can provide good quality to the customer

IT ASPIRES Vol 2 | 36 Figure 1: Agile Methodology (vintank, 2020) 3.1 Requirements This is the most important phase in building an event attendance system. Brainstorming on the project title was carried out in this phase. Owner of this system have been interviewed to find out more about the system that will be built. The problem has been analysed and the objectives have been determined based on the problem that has been analysed. User scope for this project has been found to know who will use this system. Functional and non-functional requirements have been determined in this phase. Where, how this system will work has been discussed. After that, a complete proposal has already been prepared based on the observations and research done. 3.2 Design The design phase is no less important in building an Event Attendance System. This phase is to know how the design in this system will work and operate. A prototype for the system has been built in this phase. Make a flowchart, ERD, DFD to better understand each process that will be carried out by each different user category. The design of this system is based on the problem statement and objectives that have been discussed. Free websites like Figma have been used to design the interface so that it can show the project owner how the system will work. 3.3 Develop This phase have turn the sketch in the design phase into reality. Coding have been started to be developed in this phase. This phase has taken a long time to complete a complete system with working functions. Programming language PHP has been used to create the code necessary for this system to function. To create this system, software like Visual Studio Code and XAMPP used to store the database. The important part to achieve the objectives in the construction of this project is coding to generate QR code, coding for Application Programming Interface (API) , QR code scanner and coding to generate e-certificate. 3.3.1 Generate QR Code To generate QR code looping statement has been used which is for loop and while loop as in Figure

IT ASPIRES Vol 2 | 37 3.1. Looping is chosen because, the selected data is more than one. The sql statement used is intended to take all the data in the table tbl_user and ‘where id’ means if the username in tbl_user is selected a QR code will be generated for each user. The generated QR code has a unique data which is the ic number. While the generated QR code is in image format which is .png. The phone number is used to send the QR code to the participants. Figure 3.1: Generate QR Code Coding 3.3.2 Application Programming Interface(API) Coding API is used to act as an intermediary between the system and the user as in Figure 3.2. The platform used is WhatsApp application. WhatsApp application is used to send QR codes to participants. Figure 3.2: API Coding 3.3.3 QR Code Scanner This QR Code Scanner or Reader in need a combination of HTML CSS & JavaScript. Figure 3.3 shows the JavaScript coding for the QR code scanner to function.

IT ASPIRES Vol 2 | 38 Figure 3.3: QR Code Scanner Coding 3.3.4 Generate E-Certificate Figure 3.4 is the coding to generate e-certificate. When the participant scans the QR code during the event day attendance will be recorded, eventManager can create a certificate based on the recorded attendance. Figure 3.4: E-Certificate Codin 4. RESULT AND DISCUSSION This system's major objective is to make it easier to take participant attendance by using QR codes. The event manager and the regular user can both use this system. Figure 4.1 is the main page that will be seen by both users when accessing this system. Figure 4.1 Index Page

IT ASPIRES Vol 2 | 39 As can be seen in the Figure below, after the user or event manager login, they will go to this page where they will choose their position. Figure 4.2 shows that if the user is a normal user, then they does not need to tick the checkbox and skip directly. If the user is an event manager then they needs to tick the checkbox and press the ok button as shown in Figure 4.3. Figure 4.2 User Select Position Page Figure 4.3 Evet Manager Select Position Page Figure 4.4 shows the page where the event manager can create the event they will organize. The event manager can fill in the event information on the form that has been provided. After the event manager creates an event, they can look back at the events they has created as shown in Figure 4.5. On the page there are also four buttons that have different functions. Figure 4.4: Create Event Page

IT ASPIRES Vol 2 | 40 Figure 4.5: List of Event Page Figure 4.6 is a page where the event manager will send a QR code to participants via WhatsApp. A QR code will be generated after the event manager selects the participants for the event. Figure 4.7 shows the QR scanner that will be used by the event manager on the day of the event. Where participants will start scanning the QR code they received on WhatsApp on the QR scanner. Figure 4.6: List of Participant Page Figure 4.7: QR Scanner Page In Figure 4.8 is a page where the event manager can see the attendance for the event they organizing. The event manager can download the attendance in pdf or excel form to make it easier for the event manager to look back.

IT ASPIRES Vol 2 | 41 Figure 4.8: Attendance Page Figure 4.6: Download attendance in PDF and XLS 4.1 Unit Testing Plan Several tests have been carried out on several pages in this system to identify whether it is successful or not. Unit testing has been divided into two, namely the user and the event manager. The goal of this unit testing is to confirm that the system can be used smoothly and then to troubleshoot any issues that arise Table 4.1 : Result of User Unit Testing UNIT TESTING PLAN (UTP): User NO Test Case Name Test Procedure Pre-Condition Excepted Result Result 1. Login Page User can fill the username and password at the textfield given. Who don’t have an account cannot login to the system. Successfully login to the system if user fill the valid data. pass 2. View Event Page User can view event in their account. User just can view the event that they have been selected. The event detail will show on the page. Pass 3. View Attendance User can view their attendance User just can view the attendance that the have been attend. The attendance detail will show on the page. Pass 4. View Certificate User can view their certificate. User can view the certificate if they join the event. The certificate will display on the view certificate page. Pass 5. Change Password The user can change their password when they successfully login. Insert the valid current password to be able change the password. Successfully change the password. Pass Table 4.2 : Result of Event Manager Unit Testing

IT ASPIRES Vol 2 | 42 UNIT TESTING PLAN (UTP): Event Manager NO Test Case Name Test Procedure Pre-Condition Excepted Result Result 1 Login Page Event Manager can fill the username and password at the textfield given. Who don’t have an account cannot login to the system. Successfully login to the system if user fill the valid data. pass 2 Create Event Event Manager can create an event by fill all the requirement. Only event manager can create the event in this page. Events create successfully. Pass 3 Select staff Event Manager can select specific individuals to attend the event. Only selected participants will be notified. A QR code will be generated according to the selected name. Pass 4 Generate QR code QR code will be created after event manager click on button select staff. QR code will be create by IC number All the QR code for user will be display. Pass 5 Send QR code Event managers need to click send on page QR code. Users who are not selected will not receive a QR code. QR code will be send to WhatsApp Pass 6 Scan QR code Event manager will scan the QR code using QR scanner. User without name in list cannot scan. User data will display on QR scanner page. Pass 7 Generate ecertificate The event manager will look at the data of the participants present to ensure the presence of the participants before generating the certificate users who attend the ceremony will receive a cert Certificate will display on certificate page. Pass 8 Change Password The event manager can change their password when they successfully login. Insert the valid current password to be able change the password. Successfully change the password. Pass 4.2 User Acceptance Testing User acceptance testing has been successfully conducted for two users, the user and the event manager. This is to ensure that the system works as intended as well as to get user feedback. Table 4.3 : Result of User Acceptance Testing USER ACCEPTANCE TESTING (UAT): User No Test Case Name Acceptance Requirement Test Result Tester Comments Pass Fail 1. Login Page User can fill the username and password at the textfield given. Pass Student of PSP and representative of the system owner. This page easy to give user understand how to use because username and password have been set, user does not need to register.

IT ASPIRES Vol 2 | 43 2. View Event Page User can view event in their account. Pass Student of PSP and representative of the system owner. Users can clearly see all the details of the event they are involved in. 3. View Attendance User can view their attendance Pass Student of PSP and representative of the system owner. User can see all attendance for each event they attend. 4. View Certificate User can view their certificate Pass Student of PSP and representative of the system owner. Make it easy for users to see the certificate they get for each event they attend. 5. Change Password The user can change their password when they successfully login. Pass Student of PSP and representative of the system owner. Have security in the system and the user can easily change the password to be more secure. Table 4.4 : Result of Event Manager User Acceptance Testing USER ACCEPTANCE TESTING (UAT): Event Manager No Test Case Name Acceptance Requirement Test Result Tester Comments Pass Fail 1. Login Page Event Manager can fill the username and password at the textfield given. Pass Representative of the system owner. This page easy to give user understand how to use because username and password have been set, user does not need to register. 2. Create Event Event Manager can create an event by fill all the requirement. Pass Representative of the system owner. Have validation when the event manager fills out the form to create an event 3. Select Staff Event Manager can select specific individuals to attend the event. Pass Representative of the system owner. Make it easier for the event manager to choose participants whether to choose all or one 4. Generate QR code QR code will be created after event manager click on button select staff. Pass Representative of the system owner. Easy and no need to create one by one

IT ASPIRES Vol 2 | 44 5. Send QR code Event managers need to click send on page QR code. Pass Representative of the system owner. Quick and easy to send a QR for each participant 6. Scan QR code Event manager will scan the QR code using QR scanner. Pass Representative of the system owner. It is easy to identify the presence of participants and to be able to track participants who are not involved in the event 7. Generate ecertificate The event manager will look at the data of the participants present to ensure the presence of the participants before generating the certificate Pass Representative of the system owner. Making it easier for event managers to make certificates for all participants more quickly 8. Change Password The event manager can change their password when they successfully login. Pass Representative of the system owner. Have security in the system and the user can easily change the password to be more secure. 5. CONCLUSION In conclusion, as stated in the objective, this system provides many advantages such as registering attendance by using the Quick Response (QR) code facility. In this age of rapidly developing technology, the use of paper to take attendance is no longer the main choice. This is said because the use of paper will result in risks such as data loss because paper is easily lost or torn. By using a QR code, the attendance will be directly stored in the database so there is no need to worry about losing data. This system is also complete with an Application Programming Interface (API) system, which is a system that will be built to be able to send notifications to WhatsApp staff who have registered in the registration system. So, the user will know that they have registered. In addition, this system will provide an e-certificate to each staff member who attends the event. If people want to print a certificate, it costs money because of the use of paper and ink. With the existence of e-certificates, there is no need to worry about the costs that need to be incurred because the e-certificates can be stored in various places such as PC, Pen Drive, Cloud and so on. So, if you lose the certificate, just need to reprint the ecertificate.