## Bulletin of Information Technology (BIT)
Vol 4, No 1, Maret 2023, Hal 9 - 1 ISSN 2722-0524 (media online) DOI 10.47065/ bit.v3i1. 452 https://journal.fkpt.org/index.php/BIT

## Perancangan Aplikasi Pengelolaan Keuangan Menggunakan Metode Progressive Web Apps (Studi Kasus : SDIT Zahra Asy Syifa Patumbak
Deli Serdang)

## Anton Prayitno, Eko Hariyanto, Suheri
Fakultas Sains dan Teknologi, Program Studi Sistem Komputer,  Universitas Pembangunan Panca Budi, Medan, Indonesia Email: 1 antonprayitnomulyono@gmail.com, 2 eko_hariyanto_mdn@yahoo.co.id, 3 suheri@dosen.pancabudi.ac.id Email Penulis Korespondensi: antonprayitnomulyono@gmail.com
Abstrak − Sekolah merupakan sebuah institusi pendidikan yang  menjadi wadah dan berlangsungya proses pendidikan. Sekolah Islam Terpadu memiliki karakteristik yang kuat dalam landasan filosofis, pembentukan karakter peserta didik, interaksi pendidikan, menumbuhkan kemaslahatan dan meniadakan kemaksiatan. Manajemen pengelolaan keuangan baik di sekolah menjadi perhatian yang serius agar proses pendidikan dapat berjalan sesuai dengan tujuannya. SDIT Zahra Asy Syifa Patumbak merupakan salah satu sekolah  dasar  yang  berlandaskan  Islam  yang  masih  memiliki  kelemahan  dalam  pengelolaan  keuangan  dikarenakan  pencatatan transaksi keuangan khususnya tagihan pembayaran dari siswa belum tersistem dengan baik secara komputerisasi. Dibutuhkan peran teknologi komputer berupa aplikasi yang tersistem untuk pengelolaan keuangan ini yang dapat dibangun menggunakan  metode Progressive  Web  Apps (PWA).  PWA  merupakan  metode  pengembangan  perangkat  lunak  yang  memungkinkan  pengguna merasakan pengalaman menggunakan aplikasi mobile melalui browser. Perancangan aplikasi ini menggunakan Unified Modelling Language  (UML)  dengan  diagram use  case , activity , sequence , dan class .  Hasil  perancangan  aplikasi  pengelolaan  keuangan  di SDIT Zahra Asy Syifa Patumbak dapat membantu dan mempermudah kerja pegawai administrasi keuangan dalam mengolah data keuangan, membuat laporan keuangan menjadi lebih rapi dan terstruktur, serta mudah melakukan monitoring tunggakan.
Kata Kunci : Perancangan; Aplikasi; Keuangan; Progressive Web Apps
Abstract − School is an educational institution which is a place for the educational process to take place. Integrated Islamic Schools have strong characteristics in terms of philosophical foundations, character formation of students, educational interaction, growing benefit and eliminating disobedience. Good financial management in schools is a serious concern so that the education process can run  according  to  its  goals.  SDIT  Zahra  Asy  Syifa  Patumbak  is  one  of  the  Islamic-based  elementary  schools  which  still  has weaknesses in financial management because the recording of financial transactions, especially payment bills from students, has not been computerized properly. The role of computer technology is needed in the form of a systemized application for financial management that can be built using the Progressive Web Apps (PWA) method. PWA is a software development method that allows users to experience the experience of using mobile applications through a browser. The design of this application uses the Unified Modeling  Language  (UML)  with  use  case,  activity,  sequence,  and  class  diagrams.  The  results  of  the  design  of  a  financial management application at SDIT Zahra Asy Syifa Patumbak can help and facilitate the work of financial administration employees in processing financial data, making financial reports neater and more structured, and easy to monitor arrears.
Keywords : Design; Application; Financial; Progressive Web Apps

## 1. PENDAHULUAN
Sekolah  merupakan  sebuah  institusi  pendidikan  yang  menjadi  wadah  dan  berlangsungya  proses  pendidikan, memiliki sistem yang komplek dan dinamis dalam perkembangan masyarakat yang semakin maju[1]. Didalam sekolah terjadi  interaksi  transfer  ilmu  antara  pendidik  dan  peserta  didik  berdasarkan  kurikulum  tertentu[2].  Saat  ini  telah banyak  institusi  sekolah  baik  tingkat  dasar  maupun  menengan  yang  dipadukan  dengan  pendekatan  agama  seperti Sekolah  Dasar  Islam  Terpadu  (SDIT).  Sekolah  Islam  Terpadu  memiliki  karakteristik  yang  kuat  antara  lain  :  (1) menjadikan Islam sebagai landasan filosofis; (2) mengedepankan qudwah hasanah dalam membentuk karakter peserta didik; (3) mengutamakan nilai ukhuwah dalam interaksi pendidikan; (4) menumbuhkan kemaslahatan dan meniadakan kemaksiatan dan kemungkaran; dan lain-lain[3].
Sama  seperti  sekolah  dasar  pada  umumnya,  manajemen  pengelolaan  sekolah  khususnya  pengelolaan  keuangan menjadi  perhatian  yang  serius.  Keuangan  adalah  salah  satu  komponen  utama  sehingga  perlu  adanya  pengelolaan keuangan yang baik agar proses pendidikan dapat berjalan sesuai dengan tujuannya[4]. Salah satu kunci keberhasilan dalam  pembangunan  pendidikan,  terletak  pada  kemampuan  SDM  dalam  mengelola  dana  yang  tersedia  dengan mengacu  pada  kebutuhan  pokok  dan  skala  prioritas  program  pembangunan  pendidikan  dari  tahun  ke  tahun  secara bertahap dan berkesinambungan sesuai dengan perencanaan program[5]
SDIT Zahra Asy  Syifa Patumbak  merupakan salah satu sekolah dasar yang berlandaskan Islam untuk  menyiapkan generasi berdaya dengan karakter shalih, cerdas, dan mandiri serta memprioritaskan tahsin dan tahfidz. Sekolah ini berlokasi pada Kecamatan Sibiru-biru, Kabupaten Deli Serdang, Sumatera Utara. Pencatatan laporan keuangan pada SDIT  Zahra  Asy  Syifa  Patumbak  saat  ini  masih  terdapat  beberapa  kelemahan  dikarenakan  proses  yang  dilakukan belum tersistem secara komputerisasi yaitu pada pencatatan laporan dan penyebaran informasi keuangan yang terjadi antar pegawai dan kepala sekolah termasuk sumbangan pembinaan pendidikan.
Sumbangan Pembinaan Pendidikan (SPP) merupakan iuran rutin sekolah yang mana pembayarannya dilakukan setiap sebulan  sekali.  SPP  merupakan  salah  satu  bentuk  kewajiban  setiap  siswa  yang  masih  aktif  disekolah  tersebut[6]. Berdasarkan  latar  belakang  di  atas,  penulis  melakukan  perancangan  dan  pembuatan  aplikasi  komputer  untuk mengelola keuangan khususnya SPP pada SDIT Zahra Asy Syifa Patumbak.

## Bulletin of Information Technology (BIT)
Vol 4, No 1, Maret 2023, Hal 9 - 1 ISSN 2722-0524 (media online) DOI 10.47065/ bit.v3i1. 452 https://journal.fkpt.org/index.php/BIT
Menurut  Eddy  Prahasta  menyatakan  bahwa  Aplikasi  adalah  tugas  khusus  yang  dijalankan  didalam  enterprise-nya secara otomatis dan semi otomatis. Menurut Roger S. Pressman Perangkat lunak Aplikasi adalah program-program mandiri yang menjawab kebutuhan bisnis yang terinci[7]

## 2. METODOLOGI PENELITIAN

## 2.1 Metode Pengumpulan Data
Metode pengumpulan data yang penulis gunakan dalam penelitian antara lain adalah :
1. Metode Observasi
Pengumpulan  data  secara  observasi  ini  dilakukan  dengan  meninjau  langsung  ke  SDIT  Zahra  Asy  Syifa Patumbak untuk mendapatkan gambaran alur proses pengolahan data SPP.
2. Metode Wawancara
Dalam wawancara ini penulis melakukan tanya jawab langsung kepada beberapa narasumber yang berada di SDIT Zahra Asy Syifa Patumbak seperti pegawai keuangan.
3. Metode Studi Pustaka
Studi  pustaka  yang  dilakukan  dengan  mempelajari  teori-teori  yang  berhubungan  dengan  metode  penelitian, perancangan aplikasi perangkat lunak. Studi kasus tersebut didapat dari buku-buku, jurnal, dan internet.

## 2.2 Metode Pengembangan Perangkat Lunak
Dalam pengembangan aplikasi perangkat lunak penulis menggunakan konsep Progressive Web Apps (PWA) dan Unified  Modelling  Languange (UML).  Progressive  Web  Apps  merupakan  metode  pengembangan  perangkat  lunak yang memungkinkan pengguna merasakan pengalaman menggunakan aplikasi mobile melalui browser. PWA adalah konsep  penerapan  pembuatan website yang menerapkan teknologi service  worker, web manifest, dan cache API[8]. PWA adalah gabungan dari web apps dan mobile apps. Dengan perkenalan API web yang baru, PWA dapat membantu membawa UI dan UX aplikasi ke browser web di perangkat mobile Anda. Jadi, Progressive Web Apps adalah aplikasi web  tradisional  yang  disempurnakan  dengan  teknologi  web  modern,  memungkinkan  mereka  untuk  memberikan pengalaman yang lebih mirip aplikasi[9].
Menurut Windu Gata, Grace, UML adalah bahasa spesifikasi standar yang dipergunakan untuk mendokumentasikan, menspesifikasikan dan membanngun perangkat lunak. UML merupakan metodologi dalam mengembangkan system berorientasi  objek  dan  juga  merupakan  alat  untuk  mendukung  pengembangan  sistem[10].  UML  adalah  salah  satu tool/model untuk merancang pengembangan software yang berbasis object-oriented. UML sendiri juga memberikan standar penulisan sebuah sistem blueprint, yang meliputi konsep proses bisnis, penulisan kelas-kelas dalam bahasa program yang spesifik, skema database, dan komponen yang diperlukan dalam sistem software[11]. Berikut rancangan aplikasi menggunakan UML.

## 1. Use Case Diagram
Rancangan  use  case  diagram  aplikasi  (gambar  1)  menggambarkan  pengguna  aplikasi  yaitu  admin.  Admin melakukan login terlebih dahulu sebelum mengakses menu yang lainnya. Data menu tahun ajaran, kelas, dan siswa dapat mempengaruhi data pada menu rombongan belajar (Rombel).
2. Activity Diagram
Rancangan activity diagram dalam penelitian ini mengikuti alur rancangan pada use case diagram dimana admin harus melakukan login terlebih dahulu. Apabila hasilnya valid maka admin dapat masuk ke halaman beranda dan mengakses menu-menu yang ada didalam halaman beranda. Rancangan activity diagram dapat dilihat pada gambar 2.

## Bulletin of Information Technology (BIT)
Vol 4, No 1, Maret 2023, Hal 9 - 1 ISSN 2722-0524 (media online) DOI 10.47065/ bit.v3i1. 452 https://journal.fkpt.org/index.php/BIT
Login TIDAK VALID Tampil halaman beranda VALID Keluar Memilih menu Tahun Ajaran Memilih menu Kelas Memilih menu Data Siswa Memilih menu Rombel Tampil halaman Tahun Ajaran Tampil halaman Kelas Tampil halaman Data Siswa Tampil halaman Rombel
Gambar 2. Rancangan Activity Diagram
3. Class Diagram
Rancangan class diagram dalam penelitian ini (gambar  3) terdiri dari beberapa entitas yang mendukung antara lain siswa, tahun ajaran, kelas, rombel, dan tagihan.
4. Sequence Diagram
Rancangan sequence diagram menggambarkan urutan proses kerja yang dilakukan oleh admin dimulai dari input data tahun ajaran, input data kelas, input data siswa, input data rombel, dan input data tagihan.
Siswa Tahun_ajaran Kelas Rombel Tagihan id_siswa nisn nm_siswa tgl_lahir alamat jenis_kelamin id t_ajaran tgl_mulai tgl_akhir status_ta id nm_kelas id id_ta id_kelas id_siswa id_tagihan id_siswa bulan tahun jenis tgl_bayar nominal keterangan input() edit() delete() input() edit() delete() input() edit() input() edit() delete() input() edit() delete()
Gambar 3. Rancangan Class Diagram
Admin Tahun Ajaran Kelas
Siswa
Rombel Tagihan 1. Input Data Tahun Ajaran 2. Tampil Data Tahun Ajaran 3. Input Data Kelas 4. Tampil Data Kelas 5. Input Data Siswa 6. Tampil Data Siswa 7. Input Data Rombel 8. Tampil Data Rombel 9. Input Data Tagihan 10. Tampil Data Tagihan
Gambar 4. Rancangan Sequence Diagram

## Bulletin of Information Technology (BIT)
Vol 4, No 1, Maret 2023, Hal 9 - 1 ISSN 2722-0524 (media online) DOI 10.47065/ bit.v3i1. 452 https://journal.fkpt.org/index.php/BIT

## 3. HASIL DAN PEMBAHASAN

## 3.1 Halaman Login Aplikasi
Halaman login (gambar 5) berfungsi untuk melakukan otentikasi penggunaan aplikasi. Halaman ini pertama kali tampil sebelum mengakses menu yang lainnya.

## Gambar 5. Tampilan Halaman Login

## 3.2 Halaman Data Tahun Ajaran
Halaman data tahun ajaran (gambar 6) berfungsi untuk mengelola  data tahun ajaran yaitu menambah, merubah dan menghapus data tahun ajaran. Pada halaman ini admin harus menentukan tahun ajaran yang sedang aktif berjalan.

## Gambar 6. Tampilan Data Tahun Ajaran

## 3.3 Halaman Data Kelas
Halaman Data Kelas berfungsi untuk  membuat penamaan kelas dimana nantinya data kelas ini akan digunakan pada data rombel. Halaman data kelas dapat dilihat pada gambar 7 di bawah ini.

## Gambar 7. Tampilan Halaman Data Kelas

## 3.4 Halaman Data Siswa
Halaman data siswa dapat dilihat pada  gambar  8 di bawah  ini. Halaman data siswa berfungsi untuk  mengelola seluruh data siswa yaitu menambah, merubah dan menghapus data siswa. Data siswa digunakan pada halaman data rombel dan tagihan.

## Bulletin of Information Technology (BIT)
Vol 4, No 1, Maret 2023, Hal 9 - 1 ISSN 2722-0524 (media online) DOI 10.47065/ bit.v3i1. 452 https://journal.fkpt.org/index.php/BIT
Gambar 8. Tampilan Halaman Data Siswa

## 3.5 Halaman Data Rombel
Halaman data rombongan belajar berfungsi mengelola data rombongan belajar yaitu merubah data sesuai dengan tahun ajaran  yang berjalan dan data kelas  yang telah diinput pada halaman  sebelumnya.  Halaman ini dapat dilihat pada gambar 9 di bawah ini.
Gambar 9. Tampilan Halaman Rombongan Belajar (Rombel)

## 3.6 Halaman Data Tagihan
Halaman data tagihan berfungsi untuk mengelola data pembayaran tagihan siswa yaitu menambah, merubah dan menghapus  data  pembayaran  tagihan  siswa.  Adapun  jenis  pembayaran  tagihan  yang  dikelola  adalah  tagihan pendaftaran, tagihan pembangunan, tagihan seragam, tagihan buku, tagihan SPP, tagihan ekstrakurikuler, dan tagihan lainnya. Halaman ini dapat dilihat pada gambar 10 di bawah ini.
Gambar 10. Tampilan Halaman Data Tagihan

## 4. KESIMPULAN
Berdasarkan hasil dan pembahasan di atas, maka dapat diambil beberapa kesimpulan dalam penelitian ini antara lain:
1. Aplikasi  pengelola  keuangan  ini  dapat  membantu  dan  mempermudah  kerja  pegawai  administrasi  keuangan  di SDIT Zahra Asy Syifa Patumbak dalam mengolah data keuangan.
2. Laporan data keuangan menjadi lebih rapi dan terstruktur berdasarkan kategori jenis pembayarannya.
3. Pegawai administrasi keuangan lebih mudah melakukan monitoring dan pengawasan terhadap tunggakan tagihan.

## UCAPAN TERIMAKASIH
Terima kasih disampaikan kepada pihak-pihak yang telah mendukung terlaksananya penelitian ini.

## Bulletin of Information Technology (BIT)
Vol 4, No 1, Maret 2023, Hal 9 - 1 ISSN 2722-0524 (media online) DOI 10.47065/ bit.v3i1. 452 https://journal.fkpt.org/index.php/BIT

## REFERENCES
[1] N. Wulan Sari and F. Hanum, “Peran Kultur Sekolah Dalam Membangun Prestasi Siswa Di MAN 1 Yogyakarta,” E-Societas Jurnal Pendidikan Sosiologi , vol. 7, no. 2, 2018, Accessed: Jan. 03, 2023. [Online]. Available: https://journal.student.uny.ac.id/ojs/index.php/societas/article/view/12417/11994
[2] H. Sukmawati, “Tripusat Pendidikan,” Journal PILAR , vol. 4, no. 2, pp. 175–194, 2013, Accessed: Jan. 04, 2023. [Online]. Available: https://journal.unismuh.ac.id/index.php/pilar/article/view/458
[3] Khodijah, “Implementasi Kurikulum Pendidikan Karakter Di Sekolah Dasar Islam Terpadu (SDIT),” Elementary Jurnal Ilmiah Pendidikan Dasar , vol. 2, no. 2, pp. 57–71, 2016, Accessed: Jan. 04, 2023. [Online]. Available: https://e-journal.metrouniv.ac.id/index.php/elementary/article/view/implementasi- kurikulum-pendidikan-karakter-di-sekolah-dasar-islam-terpadu
[4] R. Pusvitasari and M. Sukur, “Manajemen Keuangan Sekolah Dalam Pemenuhan Sarana Prasarana Pendidikan (Studi kasus di SD Muhammadiyah 1 Krian, Sidoarjo),” AL-TANZIM: Jurnal Manajemen Pendidikan Islam , vol. 4, no. 1, pp. 94–106, Apr. 2020, doi: 10.33650/al-tanzim.v4i1.959.
[5] A. H. B. Sukma and A. M. Nasution, “Manajemen Keuangan Sekolah Dalam Pemenuhan Sarana Prasarana Pendidikan di Bekasi,” Al-fahim : Jurnal Manajemen Pendidikan Islam , vol. 4, no. 1, pp. 45–57, Mar. 2022, doi: 10.54396/alfahim.v4i1.226.
[6] Sarmidi and M. Fahmi, “Aplikasi Pembayaran SPP Siswa di SMK Nashirul Huda Kabupaten Tasikmalaya,” Jurnal Manajemen Dan Teknik Informatika , vol. 03, no. 01, pp. 261–270, 2019.
[7] S. T. Faulina, N. Lestari, and A. Anggraini, “Penerapan Metode Waterfall pada Aplikasi Pemesanan Soundsystem Dan Organ Tunggal Jefri,” Jurnal Informatika dan Komputer , vol. 12, no. 2, pp. 1–9, 2021, [Online]. Available: www.polinpdg.ac.id
[8] S. Aripin and S. Somantri, “Implementasi Progressive Web Apps (PWA) pada Repository E-Portofolio Mahasiswa,” Jurnal Eksplora Informatika , vol. 10, no. 2, pp. 148–158, Mar. 2021, doi: 10.30864/eksplora.v10i2.486.
[9] R. Maulana and M. Irfan, “Penerapan Progressive Web Apps (PWA) Pada Sistem Layanan Konsultasi Kepada Pakar Syari’ah Islam,” Jurnal INSYPRO (Information System and Processing) , vol. 4, no. 1, pp. 45– 52, 2019.
[10] R. Irviani and R. Oktaviana, “Aplikasi Perpustakaan Pada SMAN 1 Kelumbayan Barat Menggunakan Visual Basic,” Technology Acceptance Model , vol. 8, no. 1, pp. 63–69, 2017, [Online]. Available: www.stmikpringsewu.ac.id
[11] F. Sonata and V. W. Sari, “Pemanfaatan UML (Unified Modeling Language) Dalam Perancangan Sistem Informasi E-Commerce Jenis Customer-To-Customer,” Jurnal Komunika : Jurnal Komunikasi, Media dan Informatika , vol. 8, no. 1, p. 22, Jun. 2019, doi: 10.31504/komunika.v8i1.1832.