pISSN: 2723 - 6609 e-ISSN: 2745-5254
Vol. 5, No. 11, November 2 024 http://jist.publikasiindonesia.id/
Indonesian Journal of Social Technology, Vol. 5, No. 11, November 2024 5040
Online Attendance and Leave Application Using Mobile Web-
Based Location and Photo Coordination Validation
(Application to the Housing, Residential Areas and
Environment Office of Trenggalek Regency)
Arfan Safut Pranoto1*, Wahyu Sri Utami2
Universitas Teknologi, Yogyakarta, Indonesia
Email: [email protected]1*, [email protected]2
*Correspondence
ABSTRACT
Keywords: photos,
attendance system
applications, PHP,
employees, mobile web.
The development of an employee attendance system by
utilizing online attendance with photos that are also used for
employee leave applications. Online-based attendance
systems and online leave applications are very useful for
employees and companies. The problem raised in the
background above, formulation of the problem is to build an
employee online attendance and leave application using
PHP and MySQL that are dynamic and structured to be
more efficient. If this mobile web application is not made, it
will be outdated to do a better absence because in this era
all systems are very advanced and easy to use. In this
research, what is used to create an attendance application is
to use programming languages such as HTML, CSS, and
PHP, and to make connections only by creating a database
that will be used in creating what I will create.
Introduction
The development of internet technology in the past year has experienced very
good progress. The use of information and communication technology today has
become one of the factors that are very influential in the competitiveness and
development of a company (Firliana & Rhohman, 2019).
This information technology cannot be separated in today's era which has or
almost all of the world uses internet technology. The issues used in the internet world
have been very global and always on time (Subiantoro & Sardiarinto, 2018). At this
time, the development of new technology has moved towards smart devices
(mobile/website). In terms of companies, can take advantage of the development of
information and communication technology in almost all lines of the company's
operations (Qois & Jumaryadi, 2021).
Online Attendance and Leave Application Using Mobile Web-Based Location and
Photo Coordination Validation (Application to the Housing, Residential Areas and
Environment Office of Trenggalek Regency)
Indonesian Journal of Social Technology, Vol. 5, No. 11, November 2024 5041
One of the uses of information and communication technology is the development
of an employee attendance system by utilizing online attendance with photos that are
also used for employee leave applications. Online-based attendance systems and online
leave applications are very useful for employees and companies. Therefore, companies
are required to use Attendance and online leave for company convenience (Yani &
Rosyida, 2022).
The use of a mobile web attendance system and leave application can increase the
efficiency of the human resources department in managing employee information,
including in the supervision of the orderly administration of attendance and employee
leave applications (Kholifah, Jefi, Solecha, & Fai, 2022). In addition, this software
makes it easier for employees to make absences and apply for leave where most of the
company's employees are employees who work in the field or do not work in one work
area only. Employee attendance includes the employee's clock-in and work hours.
Leave itself consists of daily sick leave (Arfah & Suwardoyo, 2022).
The location itself can be explained, namely as a place on the earth's surface. The
location itself is located in various regions or called space and to determine employees
when they are absent online outside the company (Sholahudin & Handayani, 2022).
This research will develop a mobile web with two sides, namely admin and user.
The admin side includes a login form, an admin menu with dashboard sub-menus,
employee data, leave data, and attendance data, as well as web settings. Admins can
input, view, and print employee data, leave, and attendance (Rokhmah & Muslihah,
2021). The user side includes the login menu, dashboard, leave, and absence. Registered
users can access their profiles, apply for leave, and view leave history as well as make
attendance and attendance lists. The purpose of this research is to prepare for thesis
research, while the benefit is to make it easier for employees to take attendance and
leave online.
Method
Research Data
In this part the data that I have made and will test and in as much detail as
possible explain the data and give examples in the form of photos if there are too
many then attachments must be made.
Data Source
The data is used to compile and complete the data by means of library studies and
internet searching. Online attendance and leave applications use location and photo
coordinate validation.
Table 1
Data source table
No Data Information
Arfan Safut Pranoto, Wahyu Sri Utami
Indonesian Journal of Social Technology, Vol. 5, No. 11, November 2024 5042
1 study book
It is used to obtain data and information by searching
for various author's journals, scientific papers, theses,
and theses that are related to the problem
in the report
2 Internet
Searching
Internet searching is a data collection technique
through the help of technology in the form of search
engines/tools on the Internet where all information
from various eras is available it.
How to Get Data
a. Observation
I made direct observations with the aim of obtaining attendance information
that I built and designed to make it easier in the future, therefore I had to make some
improvements in the future.
b. Interview
Collecting the data and information needed to build an attendance system to
make it easier to attend online and will make it easier for employees to attend or take
leave.
Data Collection Time
Table 2
Data Collection Table
It Headi
ng
Author(th) Techno
logy
Tools
(Programm
ing
languages,
databases,
etc.)
User Fea
ture
1. GPS-
Based
Empl
oyee
Atten
dance
mobil
e
applic
ation
Abas
Surayana
and
Febriyan
t o and
Jenny
Januarini
(2019)
Mobile HTML
and
CSS
and
PHP
MySql
Employ
ee
Admin
Employe
e Login
and
Absence
Admin
login
dashboard
menu
Online Attendance and Leave Application Using Mobile Web-Based Location and
Photo Coordination Validation (Application to the Housing, Residential Areas and
Environment Office of Trenggalek Regency)
Indonesian Journal of Social Technology, Vol. 5, No. 11, November 2024 5043
2. Applica
tion
Absorpt
ion
Uses a
Mobile
Base
Locatio
n
(Kuswant
o,
Wijonark
o, &
Cahyo,
2021)
Mobile Waterfall
and PHP
and Mysql
Registr
ant
Admin
Visitors
View the
web and log
in
Admin
View
Registratio
n, Check
Files
3. Applic
ation of
Student
and
Lecture
r
Attend
ance
System
Rina
Firliana
and
Fatkur
Rhohma
n (2019)
Web PHP and
MySql
Lecturer
Student
Admin
Students
Login in to
the web and
log in
Lecturers
on the web
Admin
Check
registratio
n, view
data
4. Plannin
g
Web-
Based
Informa
tion
System
for
Processi
ng
Attenda
nce
Data
and
Taking
Leave
Letters
(Saras
waha,
Kharis
ma, &
Pinandi
to,
2023)
Web PHP and
MySql
Registr
ant
Admin
Registrants
view web
lists using
Gmail
Admin
Viewing
Registration
Data
5. WebA
pp-
Based
Online
Attend
ance
and
Leave
Arfan
Chaaph
ut in
the
soul
Web
Mobile
HTML
and CSS
PHP and
MySQL
Database
and XAMPP
Employ
ee
Admin
Employe
es view
web
Login and
register
using
Google
Arfan Safut Pranoto, Wahyu Sri Utami
Indonesian Journal of Social Technology, Vol. 5, No. 11, November 2024 5044
Model Architecture
In the initial process, employees enter themselves and scan attendance before
starting work. Then the system will save the data whose results will be displayed to the
Admin. The admin processes employee data and the employee attendance schedule, and
the system stores the data.
Analysis and Planning
It is a process of decomposing a subject and investigating the actual situation in an
entity or finding indications of important components and elements in building an
information system.
Results and Discussion
System Analysis
Analysis and design contain functional needs that contain input, process, and
output needs as well as non-functional needs that contain software and hardware needs.
Running System Analysis
In the ongoing needs analysis, the need for software and hardware has been met
and the input needs have also been met. Currently, the development of features for the
application is underway.
Proposed System Analysis
Functional needs have a type of need that contains what processes are needed by
the designed system.
System Design
Applic
ation
Online Attendance and Leave Application Using Mobile Web-Based Location and
Photo Coordination Validation (Application to the Housing, Residential Areas and
Environment Office of Trenggalek Regency)
Indonesian Journal of Social Technology, Vol. 5, No. 11, November 2024 5045
a. Entity Relationship Diagram (ERD)
At this stage, ERD is used to describe the relationships between entities
contained in the application to be created. Attendance data collection applications
have interconnected or related entities. Employee entities are related one to many to
employee entities, attendance and leave schedules, and attendance and leave history.
Employee entities are one-to-one related to the Absence and leave history entities.
b. Use Case Diagram
In the use case diagram, the admin has the right to log, manage employee data,
attendance and leave data, and attendance and leave history.
Physical Design
1. Activity Diagram
Activity diagrams are used to describe the system that occurs in an
application. This diagram can also be used to illustrate the workflow contained in the
Arfan Safut Pranoto, Wahyu Sri Utami
Indonesian Journal of Social Technology, Vol. 5, No. 11, November 2024 5046
use case. Workflows that occur in login activities performed by Admins and
employees.
2. Activity Diagram Input Absensi
The process begins by logging in to the website. When doing the system login
process, you will be prompted to check your Email and password, if it matches the
data stored in the database, it will display the attendance menu.
Online Attendance and Leave Application Using Mobile Web-Based Location and
Photo Coordination Validation (Application to the Housing, Residential Areas and
Environment Office of Trenggalek Regency)
Indonesian Journal of Social Technology, Vol. 5, No. 11, November 2024 5047
Activity Diagram Taking Leave
The process begins by logging in to the website. When doing the system login
process, you will be prompted to check your Email and password, if it matches the data
stored in the database, it will display the attendance menu. Then in the Dashboard
menu, select the menu to take leave, after selecting the leave menu, it will display the
leave information and leave date.
Figure 3 Activity Diagram of Taking Leave
Implementation
Implementation is a continuation of the system design in the previous chapter. In
the chapter on results and discussions, Kemudain explains how the system works and
the results that have been loaded.
The results of the discussion on the creation of Online Attendance and Leave
Using Validation of Location Coordinates and Mobile Web-Based Photos consist of the
results of analysis, design, and coding.
Login Display
Arfan Safut Pranoto, Wahyu Sri Utami
Indonesian Journal of Social Technology, Vol. 5, No. 11, November 2024 5048
The Login Menu is a menu to start logging in to the application by entering the
username and password that has been registered previously.
Registration Display
A screenshot of a phone Description is automatically generated with
medium confidence.
Online Attendance and Leave Application Using Mobile Web-Based Location and
Photo Coordination Validation (Application to the Housing, Residential Areas and
Environment Office of Trenggalek Regency)
Indonesian Journal of Social Technology, Vol. 5, No. 11, November 2024 5049
Dashboard Display
The dashboard menu is where it is on the menu after registering and logging in
sessions. On the dashboard menu, the menu will display and will later be used to do
online attendance and leave.
Attendance Display
On the display in the attendance menu, the user will be absent by taking a photo.
Arfan Safut Pranoto, Wahyu Sri Utami
Indonesian Journal of Social Technology, Vol. 5, No. 11, November 2024 5050
Figure 4 Attendance Menu Display
Leave View
On the leave display, the user will fill in the data to apply for leave to be used.
Online Attendance and Leave Application Using Mobile Web-Based Location and
Photo Coordination Validation (Application to the Housing, Residential Areas and
Environment Office of Trenggalek Regency)
Indonesian Journal of Social Technology, Vol. 5, No. 11, November 2024 5051
Figure 5 Leave Menu Display
The result of designing a Web-based Mobile Application for companies that will
do Attendance online and can see attendance history quickly and well. The following
are the results of the application design that has been made.
Conclusion
From the results of this study, it can be concluded that an online attendance and
leave system because in this era it is very advanced, especially the attendance system is
very good for use in companies such as offices, schools, universities, and I made this
attendance system want to try or can make it easier for employees and students to do
attendance online.
Bibliography
Arfah, Anggita Arfina, & Suwardoyo, Untung. (2022). Aplikasi absensi karyawan
menggunakan geolocation dan finger print berbasis android. Jurnal Sintaks
Logika, 2(2), 18.
Firliana, Rina, & Rhohman, Fatkur. (2019). Aplikasi sistem informasi absensi
mahasiswa dan dosen. DoubleClick: Journal of Computer and Information
Technology, 2(2), 7074.
Kholifah, Desiana Nur, Jefi, Jefi, Solecha, Kusmayanti, & Fai, M. Arif. (2022).
Perancangan Program Absensi Karyawan Berbasis Web Menggunakan Metode
Waterfall Pada PT Kedai Sayur Indonesia. Indonesian Journal on Software
Engineering (IJSE), 8(1), 115124.
Arfan Safut Pranoto, Wahyu Sri Utami
Indonesian Journal of Social Technology, Vol. 5, No. 11, November 2024 5052
Kuswanto, Herman, Wijonarko, Bambang, & Cahyo, Hendrawan Dwi. (2021). Aplikasi
Absensi Menggunakan Location Base Services Berbasis Mobile. CONTEN:
Computer and Network Technology, 1(1), 3140.
Qois, Naviza, & Jumaryadi, Yuwan. (2021). Implementasi Location Based Service Pada
Sistem Informasi Kehadiran Pegawai Berbasis Android. Sistemasi: Jurnal Sistem
Informasi, 10(3), 550561.
Rokhmah, Siti, & Muslihah, Isnawati. (2021). Rancang Bangun Sistem Informasi
Absensi Pegawai pada ITB AAS Indonesia. Jurnal Informatika, Komputer Dan
Bisnis (JIKOBIS), 1(01), 1118.
Saraswaha, I. Putu Sancaya, Kharisma, Agi Putra, & Pinandito, Aryo. (2023).
Pengembangan Lanjut Aplikasi berbasis Android Sistem Presensi Online dengan
Penambahan Fitur Notifikasi dan Fitur Permohonan Ijin atau Cuti di PT. Bintang
Mas Glassolutions. Jurnal Pengembangan Teknologi Informasi Dan Ilmu
Komputer, 7(4), 20102019.
Sholahudin, Alfian, & Handayani, Tuti. (2022). Analisis dan Perancangan Aplikasi
Absensi Karyawan Dengan Teknologi QR Code Berbasis Android Pada UD
Sejahtera. Prosiding Simposium Nasional Multidisiplin (SinaMu), 3.
Subiantoro, Subiantoro, & Sardiarinto, Sardiarinto. (2018). Perancangan Sistem Absensi
Pegawai Berbasis Web Studi Kasus: Kantor Kecamatan Purwodadi. Swabumi
(Suara Wawasan Sukabumi): Ilmu Komputer, Manajemen, Dan Sosial, 6(2).
https://doi.org/10.31294/swabumi.v6i2.4868
Yani, Achmad, & Rosyida, Susy. (2022). Penerapan Sistem Informasi Absensi
Karyawan Pada Cv. Bintang Bangun Persada Bekasi. Jurnal Khatulistiwa
Informatika, 10(1), 17.