aplikasi rekapitulasi absensi untuk asisten …
TRANSCRIPT
APLIKASI REKAPITULASI ABSENSI UNTUK ASISTEN
LABORATORIUM AKUNTANSI MENEGAH UNIVERSITAS
GUNADARMA BERBASIS WEBSITE
Ari Dwi Saputra Fakultas Teknologi Industri
Depok, Indonesia
Ivan Maurits
Fakultas Teknologi Informasi
Universitas Gunadarma
Depok, Indonesia [email protected]
Abstrak
Praktikum adalah kegiatan akademik yang selalu dilaksanakan di Universitas Gunadarma pada
tiap semesternya. Pada pembuatan rekapitulasi Asisten dan Programmer di dalam
Laboratorium Akuntansi Menengah di Universitas Gunadarma disaat pandemi,
Admin Laboratorium memasuki ruangan Zoom Meeting atau Google Meeting yang sudah
dibuatkan oleh Programmer yang diberikan kepada Asisten penanggung jawab untuk praktik
mata kuliah dan kelas tertentu, kemudian Admin Laboratorium melihat siapa saja yang ikut
membantu dalam proses praktik tersebut dan mencatatnya pada aplikasi spreadsheet yang
nantinya akan dijadikan untuk rekapitulasi absensi untuk Asisten dan Programmer. Dengan
adanya kasus tersebut, penulis membuat “Aplikasi Rekapitulasi Absensi untuk
Laboratorium Akuntansi Menengah Universitas Gunadarma” yang bertujuan untuk
membuat aplikasi rekapitulasi absensi Asisten dan Programmer secara otomatis. Penulisan
ini menghasilkan aplikasi yang dapat merekapitulasi absen dari Asisten dan Programmer dan
juga Admin itu sendiri yang proses absennya dilakukan secara mandiri oleh Asisten,
Programmer, dan Admin yang diproses secara otomatis oleh aplikasi, jadi Admin tidak perlu
masuk ke dalam ruangan Zoom Meeting atau Google Meet untuk mengecek satu per satu siapa
saja Asisten dan Programmer yang ikut serta dalam praktikum tersebut. Kata Kunci : aplikasi, program, absensi, rekapitulasi
PENDAHULUAN
Universitas Gunadarma adalah salah satu Penrguruan Tinggi Swasta (PTS) yang berada di
Indonesia yang memiliki beberapa fakultas, diantaranya adalah Fakultas Ilmu Komputer dan
Teknologi Informasi Teknologi Industri, Ekonomi, Teknik Sipil dan Perencanaan, Psikologi,
Kedokteran, Sastra dan komunikasi.
Pada praktiknya hari ini, Admin melakukan rekapitulasi manual dengan masuk kedalam aplikasi
video conference kemudian menulis siapa saja asisten yang masuk pada video conference
tersebut dan mencatatnya di dalam aplikasi spreadsheet yang membutuhkan waktu dan tenaga
lebih untuk Admin yang bertugas. Dari kasus tersebut, terbentuklah ide untuk membuat aplikasi
rekapitulasi otomatis berbasis web untuk seluruh asisten yang ada pada
Laboratiorium Akuntansi Menengah di Universitas Gunadarma dengan tujuan untuk
mempermudah pekerjaan Admin untuk melakukan rekapitulasi absensi.
METODE PENELITIAN Website (Situs Web) merupakan kumpulan dari halaman-halaman web yang berhubungan
dengan file-file lain yang terkait. Dalam sebuah website terdapat suatu halaman yang dikenal
dengan sebutan home page. Home page adalah sebuah halaman yang pertama kali dilihat ketika
seseorang mengunjungi website. Dari home page, pengujung dapat mengklik hyperlink untuk
pindah kehalaman lain yang terdapat dalam website tersebut (Dani, 2014).
HTML merupakan bahasa pemrograman yang digunakan untuk menampilkan dokumen pada
browser dalam sebuah web. HTML bertujuan untuk mendefinisikan struktur dokumen web dan
tata letak tampilan. HTML menggunakan beragam tag dan atribut. Sebuah dokumen HTML
ditandai dengan tag awal <HTML> dan diakhiri dengan tag </HTML> (Dwi dan Siska, 2014).
Hypertext Preprocessor atau yang sering disingkat dengan PHP merupakan bahasa
pemrograman web dari sisi server yang disisipkan (embedded script) dalam dokumen HTML.
Kode PHP diapit dengan menggunakan tag awal <?php dan tag akhir ?> (Dwi dan Siska, 2014).
PHP Native merupakan pemrograman web perpaduan bahasa pemrograman yang didasari
dengan bahasa pemrograman PHP yang mana bisa disisipi oleh text Javascript, CSS, Boostrap,
dan lain-lain. Native sendiri artinya asli, yakni pemrograman PHP yang murni disusun dan
decoding/dibangun oleh para programmer sendiri tanpa ada istilah tambahan buat
settingan/konfigurasi lainnya. Manfaat dari PHP Native sederhana kalau sudah menguasainya
maka akan lebih mudah menggunakan PHP Framework (Ivan David, 2019).
MySQL adalah sebuah database management system (manajemen basis data) menggunakan
perintah dasar SQL (Structured Query Language) yang cukup terkenal. Database management
system (DBMS) MySQL multi pengguna dan multi alur ini sudah dipakai lebih dari 6 juta
pengguna di seluruh dunia (K. Yasin, 2019).
Javasript adalah bahasa pemrograman untuk sisi client atau client side. Javascript
adalah bahasa pemrograman yang mendekati bahasa manusia atau bisa dikatakan bahasa
tingkat tinggi, maka dari itu javascript mudah di pelajari. Javascript sendiri tujuannya di
buat untuk memperkaya fitur pada website agar lebih dinamis, seperti untuk
menampilkan dan menghilangkan objek-objek pada website kemudian dengan fungsi
javascript dapat memanggil kembali objek yang di hilangkan tersebut (Mansur dan Muh.
Dirga F., 2021).
Framework adalah kumpulan intruksi-intruksi yang dikumpulkan dalam class dan function-
function dengan fungsi masing-masing untuk memudahkan developer
dalam memanggilnya tanpa harus menuliskan syntax program yang sama berulang-
ulang serta dapat menghemat waktu (A. Sallaby dan I. Kanedi, 2020).
Bootstrap merupakan sebuah library atau kumpulan dari berbagai fungsi yang terdapat di
framework CSS dan dibuat secara khusus di bagian pengembangan pada front-end website.
Bootsrap juga termasuk ke dalam salah satu dari framework HTML, Javascript, dan juga CSS
yang sangat populer pada ranah web developer (Zakaria, 2020).
Use case diagram merupakan diagram yang menggambarkan hubungan antara aktor dengan
sistem. Use case diagram bisa mendeskripsikan sebuah interaksi antara satu atau lebih aktor
dengan sistem yang akan dibuat. Use case diagram juga bisa digunakan untuk mengetahui
fungsi apa saja yang ada di dalam sebuah sistem dan bisa juga mempresentasikan sebuah
interaksi aktor dengan sistem. Komponen tersebut kemudian menjelaskan komunikasi antara
aktor (Michael Kharisma, 2019).
Activity Diagram memodelkan workflow proses bisnis dan urutan aktifitas dalam sebuah proses. Diagram ini sangat mirip dengan flowchart karena memodelkan workflow dari suatu aktifitas
lainnya atau dari aktifitas ke status (Hamim Tohari, 2014).
Struktur Navigasi merupakan alur dari suatu program yang menggambarkan
rancangan hubungan antara area yang berbeda sehingga memudahkan proses pengorganisasian
seluruh
elemen-elemen website. Struktur navigasi dikelompokan menjadi 4 struktur yang berbeda, yaitu :
linier, hirarki, non linier serta composite (Doni Ardiansyah, 2016).
HASIL DAN PEMBAHASAN
Pembuatan aplikasi menggunakan bahasa pemrograman PHP yang dirancang untuk membuat
website dinamis dan didukung oleh framework Bootstrap 5 untuk mempercantik tampilannya.
Alasan untuk menggunakan PHP sebagai bahasa pemrogramannya karena PHP mudah untuk
diaplikasikan dan sudah banyak yang menggunakan nya sebagai bahasa pemrograman utama
dalam pembuatan websitenya ditambah dengan framework Bootstrap 5 yang memberikan kesan
menarik dan memudahkan dalam membuat programnya serta mendapat fitur responsive yaitu
website dapat dibuka di berbagai perangkat tanpa khawatir tampilannya menjadi tidak tertata
rapih. Aplikasi dirancang se sederhana mungkin untuk user tetapi se kompleks mungkin untuk
admin.
Aplikasi terdiri dari 3 tipe pengguna, yaitu programmer, asisten, dan admin yang dimana
programmer dan asisten dijadikan satu karena kesamaan fungsi pada aplikasi ini. Berikut
rancangan untuk halaman login yang digambarkan oleh Gambar 1.
Gambar 1 Rancangan Halaman Login
Pada akun yang memiliki status admin akan mengakses seluruh menu yang ada pada aplikasi
ini, tetapi untuk akun yang memiliki status programmer dan asisten mereka hanya
bisa mengakses menu jadwal dan absen. Didalam menu absen terdapat tabel untuk
menampilkan history absensi diri sendiri dan tombol untuk menambahkan absensi yang
dimana jika tombol ditekan maka muncul modal yang didalamnya ada form untuk
menambahkan absensi, jika berhasil ditambahkan maka akan muncul pada tabel yang ada
dibawahnya jika gagal maka akan muncul semuah notifikasi jika absen gagal dilakukan. Berikut
rancangan halaman utama bagian absen untuk akun yang memiliki status assisten dan
programmer yang terdapat pada gambar 2.
Gambar 2 Rancangan Halaman Utama Asisten dan Programmer
Perbedaan halaman utama untuk asisten dan programmer tidak jauh berbeda, bedanya pada
akun dengan status sebagai admin akan mendapat menu tambahan pada nav-bar yaitu menu
admin. Berikut rancangan halaman utama untuk akun dengan status admin yang berada pada
gambar 3.
Gambar 3 Rancangan Halaman Utama Admin
Terdapat modal saat tombol “Tambah Absensi” diklik. Rancangan modal tambah absensi dapat
dilihat pada gambar 4.
Gambar 4 Rancangan Modal Tambah Absensi
Pada menu jadwal yang berada pada halaman utama di semua user, terdapat tabel yang berisi
seluruh kategori atau jadwal yang sudah dibuat oleh admin sebelumnya. Pada akun dengan
status admin maka pada kolom tabel jadwal akan berubah menjadi lihat jadwal/hapus jadwal
ketika jadwal sudah diupload sebelumnya tetapi jika jadwal belum diupload sebelumnya maka
kolom tabel jadwal akan muncul untuk upload jadwal. Berikut rancangan untuk menu jadwal
pada halaman utama admin pada gambar 5.
Gambar 5 Rancangan Menu Jadwal Admin
Jika tombol upload jadwal diklik, maka muncul tampilan modal untuk mengupload jadwal.
Rancangan modal upload jadwal dapat dilihat pada gambar 6.
Gambar 6 Rancangan Modal Upload Jadwal Rancangan memu jadwal pada halaman utama untuk akun yang memiliki status asisten dan
programmer tidak jauh berbeda, tampilannya sama dengan pengurangan menu admin pada nav-
bar dan perubahan pada kolom tabel jadwal, kolom tabel jadwal jika jadwal belum diupload
oleh admin maka akan muncul text “Jadwal Belum Tersedia” jika sudah diupload oleh admin
maka yang muncul adalah tombol lihat jadwal tanpa adanya tombol hapus jadwal. Rancangan menu jadwal pada akun dengan status asisten dan programmer dapat dilihat pada gambar 7.
Gambar 7 Rancangan Menu Jadwal Asisten dan Programmer
Menu admin adalah menu yang dikhususkan dan hanya dapat diakses dan akan muncul jika
pengguna login menggunakan akun dengan status admin. Pada Menu admin terdapat informasi
berapa jumlah akun yang terdaftar sebagai admin, asisten, dan programmer. Menu admin
teradapat tiga sub menu, yaitu kategori, akun, dan rekap yang secara defaultnya membuka
halaman kategori yang dimana sub menu kategori ini terdapat tabel pada bagian kiri layar yang
berisikan semua kategori yang sudah dibuat sebelumnya lalu pada bagian kanan terdapat form
untuk menambahkan absensi. Gambar 8 memperlihatkan rancangan halaman menu admin untuk
sub menu kategori.
Gambar 8 Rancangan Menu Admin Sub Menu Kategori
Rancangan sub menu akun terdapat tabel dibagian kiri layar yang berisikan akun-akun yang
sudah terdaftar pada database, yang dimana akun ini dapat diubah atau dihapus. Pada bagian
kanan layar terdapat form untuk membuat akun baru. Berikut rancangan sub menu akun pada
menu admin yang dapat dilihat pada gambar 9.
Gambar 9 Rancangan Menu Admin Sub Menu Akun Saat tombol ubah ditekan pada setiap record pada tabel akun, maka akan muncul modal yang berisikan form ubah data. Gambar 10 menggambarkan rancangan untuk modal ubah data.
Gambar 10 Rancangan Modal Ubah Data Akun
Sub menu rekap pada menu admin terdapat form untuk mendownload rekapitulasi dalam format
.xls dengan memilih bulan dan kategori apa saja yang ingin didownload oleh
admin. Dibawahnya terdapat tabel yang berisikan seluruh catatan absensi dari seluruh akun
termasuk admin itu sendiri. Gambar 11 merupakan rancangan dari tampilan sub menu rekap pada
menu admin.
Gambar 11 Rancangan Menu Admin Sub Menu Rekap
Ketika aksi hapus diklik, maka akan muncul modal konfirmasi hapus agar kesalahan klik admin
dapat dikurangi. Jika admin menekan hapus tanpa konfirmasi efeknya akan sangat fatal, data
yang dihapus tidak bisa dikembalikan lagi. Dari kasus tersebut penulis membuat modal untuk
konfirmasi penghapusan yang diterapkan ke sub menu kategori, akun, dan rekap. Gambar 12
merupakan rancangan modal konfirmasi penghapusan.
Gambar 12 Rancangan Modal Konfirmasi Penghapusan Menu selanjutnya adalah menu cara absen yang berisikan tata cara menggunakan website ini. Rancangan menu cara absen dapat dilihat pada gambar 13.
Gambar 13 Menu Cara Absen
Menu yang terakhir adalah web praktikum dan web labamen, menu ini hanya mengarahkan
pengguna ke web praktikum dan ke web labamen.
Hasil Implementasi
Tampilan Halaman Login
Gambar 14 Tampilan Halaman Login
Tampilan login tidak berubah dari rancangan tetap menggunakan tampilan sederhana dengan
logo labamen yang berada pada form login dan tampilan login admin, programmer, dan asisten
tidak dipisah.
Tampilan Halaman Utama Menu Absen Asisten Dan Programmer
Gambar 15 Halaman Utama Menu Absen Asisten Dan Programmer
Tampilan halaman utama untuk Asisten dan Programmer ada sedikit penambahan fitur yaitu
tabel menggunakan plugin dari datatables. Datatables ini berfungsi untuk merubah tabel biasa
menjadi tabel yang indah dan juga lebih interaktif, table dapat mengurutkan ascending dan
descending berdasarkan heading yang diklik dan juga dapat mencari pada setiap kolom yang
tersedia pada tabel dan juga terdapat pagination yaitu pemisahan tampilan tabel jika data lebih
dari yang ditentukan.
Gambar 16 Modal Tambah Data Absensi
Berikut adalah tampilan modal untuk tambah data absensi pada semua akun terdapat field
kategori, pertemuan, dan shift. Jika berhasil maka ada pemberitahuan bahwa data berhasil
diinput jika gagal maka tampil pemberitahuan bahwa data gagal diinput.
Gambar 17 Tampilan Halaman Utama Menu Jadwal Asisten Dan Programmer Berikut adalah tampilan dari menu jadwal yang berada pada halaman utama untuk akun dengan status asisten dan programmer.
Gambar 18 Tampilan Halaman Utama Menu Absen Admin
Berikut adalah tampilan halaman utama menu absen pada akun dengan status admin.
Gambar 19 Tampilan Halaman Utama Menu Jadwal Admin
Berikut adalah tampilan halaman utama menu jadwal pada akun dengan status admin, terdapat
tombol hapus dan upload jadwal pada kolom tabel jadwal.
Gambar 20 Tampilan Modal Untuk Tombol Lihat Jadwal
Berikut adalah modal untuk tombol lihat jadwal jika tabel jadwal sebelumnya sudah diupload
oleh admin.
Gambar 21 Tampilan Modal Upload Jadwal
Berikut adalah modal untuk upload jadwal jika jadwal belum diupload oleh admin.
Gambar 22 Tampilan Menu Admin Sub Menu Kategori
Berikut adalah menu admin sub menu kategori, yang tabelnya berubah dari rancangan karena
menggunakan plugin dari datatables.
Gambar 23 Tampilan Menu Admin Sub Menu Akun
Berikut adalah tampilan untuk menu admin sub menu akun yang tabelnya berbeda
dari rancangan karena menggunakan plugin dari datatables. Form tambah akun yang berada
pada bagian kanan layar berisikan field npm, nama, kelas, nomor rekening, dan status yang
terdiri dari admin, asisten, dan programmer.
Gambar 24 Tampilan Modal Ubah Akun
Modal ubah akun adalah modal yang akan muncul ketika tombol ubah pada kolom aksi pada
tabel akun diklik. Berisikan npm, nama, kelas, nomor rekening, status, dan password yang dapat
diisi atau tidak (Optional) yang terisi otomatis sesuai dengan data yang satu baris dengan
tombol ubah tersebut.
Gambar 25 Tampilan Menu Admin Sub Menu Rekap
Menu admin sub menu kategori terjadi perubahan pada tabel dari rancangan
karena menggunakan plugin dari datatables.
Gambar 26 Tampilan Modal Konfirmasi Hapus
Modal konfirmasi hapus adalah modal yang diterapkan pada setiap tombol hapus, text yang
berada di tengah modal akan menyesuaikan dengan apa yang akan dihapus.
Gambar 27 Tampilan Hasil Download Rekap
File .xls adalah file hasil dari form download rekap, yang akan mendownload hasil dari
rekapitulasi absensi dari semua akun dan pada periode dan kategori yang dipilih pada form.
KESIMPULAN DAN SARAN Berdasarkan hasil dari pemaparan dan pembahasan sebelumnya, dapat ditarik
kesimpulan bahwa Aplikasi Rekapitulasi Absensi untuk Asisten Laboratorium
Akuntansi Menengah Universitas Gunadarma Berbasis Website ini telah berhasil dibuat
dan sudah mencapai tujuan utamanya yaitu merekapitulasi absensi. Secara fungsionalitas
aplikasi ini sudah berjalan dengan baik tetapi masih harus melakukan banyak
pengembangan pada aspek keamanan, pengembangan bukti untuk absensi supaya tidak ada
yang curang saat mengabsen, pengembangan pada jadwal supaya hanya bisa mengabsen pada
jadwal yang ditentukan saja dan lain-lain.
DAFTAR PUSTAKA
Eko Hendrianto, Dani. 2014. “Pembuatan Sistem Informasi Perpustakaan Berbasis
Website Pada Sekolah Menegah Pertama Negeri 1 Donorojo Kabupaten Pacitan”. IJNS –
Indonesian Journal on Networking and Security, Volume 3 No 4.
Jayanti, Dwi, dan Iriani, Siska. 2014. Journal Speed – Sentra Penelitian Engineering dan
Edukasi – Volume 6 No 3, Ijns.org.
David, Ivan. 2019. Perbedaan PHP Native dan Framework.
https://sigma.web.id/?p=561. Dilihat pada tanggan 17 Juli 2021.
Yasin, K. 2019. Pengertian MySQL, Fungsi, dan Cara Kerjanya (Lengkap).
https://www.niagahoster.co.id/blog/mysql-adalah/#Pengertian_MySQL. Dilihat tanggal
12 juli 2021.
Marlina, Masnur, dan Dirga.F, Muh. 2021. “APLIKASI E-LEARNING SISWA SMK
BERBASIS WEB” dalam JURNAL SINTAKS LOGIKA Vol. 1 No. 1.
Sallaby, A., dan Kanedi, I. 2020. Perancangan Sistem Informasi Jadwal Dokter
Menggunakan Framework Codeigniter. JURNAL MEDIA INFOTAMA, 16(1).
Zakaria. 2020. Pengertian Bootstrap Beserta Fungsi, Kekurangan, dan Kelebihan
Bootstrap. https://www.nesabamedia.com/pengertian-bootstrap/. Dilihat pada tanggal 17
Juli 2021.
Huatauruk, Michael Kharisma. 2019. UML Diagram: Use Case Diagram.
https://socs.binus.ac.id/2019/11/26/uml-diagram-use-case-diagram/. Dilihat pada
tanggal 15 Juni 2021.
Tohari, Hamim. 2014. “Astah Analisis Serta Perancangan Sistem Informasi Melalui
Pendekatan UML”. Yogyakarta: Andi.
Ardiansyah, Doni. 2016. Pengertian Struktur Navigasi. Sistem Informasi Pendaftaran
Event dengan PHP untuk Panduan Skripsi. Cirebon: CV. ASFA Solution.