## TIN: Terapan Informatika Nusantara
Vol 4, No 1, June 2023, page 52-64 ISSN 2722-7987 (Media Online) Website https://ejurnal.seminar-id.com/index.php/tin DOI 10.47065/tin.v4i1.4199

## Implementasi Aplikasi Administrasi SPP Online Berbasis Web pada Sekolah Menengah Kejuruan
Betantiyo Prayatna, Elsa Charolina L Siantar, Iqbal Pradibya, Errissya Rasywir *
Fakultas Ilmu Komputer, Program Studi Teknik Informatika, Universitas Dinamika Bangsa, Kota Jambi, Indonesia Email: 1 betantiyo@gmail.com, 2 elsacharolina15@gmail.com, 3 iqbalpradibya@gmail.com, 4 errisya.jurnal@gmail.com Email Penulis Korespondensi: errisya.jurnal@gmail.com
Abstrak− SMK  2  PGRI  Kota  Jambi  merupakan  salah  stau  sekolah  menengah  kejurusan  yang  ada  di  Kota  Jambi  yang  masih menggunakan sistem pembayaran SPP (Sumbangan Pembinaan Pendidikan) secara manual tanpa mengunakan sistem informasi yang terkomputerisasi. Selain itu dari pihak sekolah belum memanfaatkan pembayaran SPP secara online melalui website. Padahal SMK 2 PGRI sudah tersedia komputer yang terhubung oleh jaringan internet yang terdapat di labor computer. Jaringan sekolah yang telah ada  belum  di  manfaatkan  secara  optimal  seperti  belum  adanya  website  sekolah  yang  khusus  untuk  melakukan  proses  pembayaran SPP  secara  online,  dan  pencarian  informasi  tentang  data  pembayaran  SPP  masih  di  laukan  dengan  cara  manual  sehingga mengakibatkan  kesulitan  bagi  pegawai  TU  (Tata  Usaha)  untuk  mencari  data.  Oleh  karena  itu  penelitian  ini  bertujuan  untuk membantu  menyelesaikan  masalah  yang  terjadi  dengan  membangun  Aplikasi  berbasis  website.  Dengan  menggunakan  bahasa pemrograman  HTML,  PHP,  MySQL  database.  Dengan  menggunakan  metode  pengembangan  sistem Waterfall dan  alat  bantu pemodelan  sistem  yang  digunakan  yaitu  usecase diagram,  aktivity  diagram,  class  diagram ,  dan interface .  Hasil  dari  penelitian  ini adalah  sebuaah  aplikasi  berbasis  website  yang  dapat  membantu  menyelesaikan  permasalahan  yang  ada  pada  SMK  PGRI  2  Kota Jambi dalam mengelola Sistem Administrasi.
Kata Kunci: Perancangan; Aplikasi, UML; Administrasi; Website
Abstract− SMK 2 PGRI Kota Jambi is one of the vocational high schools in Kota Jambi that still uses a manual payment system for SPP (Education Development Contribution) without utilizing computerized information systems. Additionally, the school has not yet utilized online SPP payment through a website, despite having computers connected to the internet in the computer lab. The existing school  network  has  not  been  optimally  utilized,  as  there  is  no  dedicated  school  website  for  online  SPP  payment  processing,  and information retrieval regarding SPP payments is still done manually, causing difficulties for the administrative staff (Tata  Usaha) in finding data. Therefore, this research aims to help resolve the issues by developing a website-based application. The application will be  developed  using  HTML,  PHP,  and  MySQL  database  programming  languages.  The  Waterfall  development  method  will  be employed,  and  the  system  modeling  tools  used  include  use  case  diagrams,  activity  diagrams,  class  diagrams,  and  interfaces.  The outcome of this research will be a website-based application that can assist in resolving the problems faced by SMK PGRI 2 Kota Jambi in managing their Administrative System.
Keywords : Design; Application; UML; Administration; Website

## 1. PENDAHULUAN
Perkembangan  teknologi  di  era  saat  ini  berjalan  yang  sangat  pesat,  hal  ini  terbukti  dengan  banyaknya  penggunaan jaringan internet diberbagai kalangan masyarakat saat ini (Bahrudin et al., 2020; Sadewo et al., 2018; Syaidathurrahma &  Lestari,  2020;  Tamtelahitu,  2020).  Seperti  halnya  pendidikan  untuk  mengetahui  layanan  informasi  pembayaran SPP(Firmansyah, 2018). Perkembangan teknologi informasi kini semakin berkembang pesat, banyaknya instansi yang berusaha untuk meningkatkan pekerjaannya dengan menggunakan sistem informasi yang terkomputerisasi karena dalam proses  pengolahan  data  menjadi  sebuah  informasi  menjadi  lebih  cepat  (Aeniah,  2020;  Angeline  &  Astuti,  2018; Bahrudin  et  al.,  2020;  Idam  et  al.,  2019;  Jasmir  et  al.,  2018;  Nicolas  et  al.,  2021;  Widestyanto  &  Samsinar,  2022). Perkembangan  komputer  memiliki  peran  penting  dalam  membantu  dan  mempermudah  kegiatan  atau  penyelesaian dalam proses pekerjaan yang dilakukan (Fernando et al., 2021; Haryani & Fitriani, 2019; Idam et al., 2019; Nicolas et al., 2021; Ramadiani & Rahmah, 2019). SMK 2 PGRI Kota Jambi merupakan salah stau sekolah menengah kejurusan yang ada di Kota Jambi yang masih menggunakan sistem pembayaran SPP (Sumbangan Pembinaan Pendidikan) secara manual tanpa mengunakan sistem informasi yang terkomputerisasi. Selain itu dari pihak sekolah belum memanfaatkan pembayaran  SPP  secara  online  melalui  website.  Padahal  SMK  2  PGRI  sudah  tersedia  komputer  yang  terhubung  oleh jaringan internet yang terdapat di labor komputer. Jaringan sekolah yang telah ada belum di manfaatkan secara optimal seperti  belum  adanya  website  sekolah  yang  khusus  untuk  melakukan  proses  pembayaran  SPP  secara  online,  dan pencarian  informasi  tentang  data  pembayaran  SPP  masih  di  laukan  dengan  cara  manual  sehingga  mengakibatkan kesulitan bagi pegawai TU (Tata Usaha) untuk mencari data. Oleh karena itu penelitian ini bertujuan untuk membantu menyelesaikan  masalah  yang  terjadi  dengan  membangun  Aplikasi  berbasis  website.  Dengan  menggunakan  bahasa pemrograman HTML, PHP, MySQL database. Dengan menggunakan metode pengembangan sistem Waterfall dan alat bantu pemodelan sistem  yang digunakan  yaitu usecase diagram, aktivity diagram, class diagram , dan interface . Hasil dari  penelitian  ini  adalah  sebuaah  aplikasi  berbasis  website  yang  dapat  membantu  menyelesaikan  permasalahan  yang ada pada SMK PGRI 2 Kota Jambi dalam mengelola Sistem Administrasi
Bedasarkan  informasi  yang  penulis  dapatkan  dari  sistem  yang  selama  ini  diterapkan  pada  SMK  PGRI  2  Kota Jambi di atas, maka dapat di simpulkan bahwa kegiatan laporan, pengolahan data pembayaran memerlukan dukungan sistem informasi agar dapat lebih meningkatkan mutu pelayanan kepada pihak-pihak yang berkepentingan ( siswa, guru, orang  tua,  dan  pihak  sekolah  terkait)  .  Maka  penulis  berminat  akan  merancang  dan  dibuatnya  sebuah  system

## TIN: Terapan Informatika Nusantara
Vol 4, No 1, June 2023, page 52-64 ISSN 2722-7987 (Media Online) Website https://ejurnal.seminar-id.com/index.php/tin DOI 10.47065/tin.v4i1.4199
pembayaran SPP yang berjudul “Perancangan Aplikasi Administrasi Spp Online Berbasis Web Pada Smk Pgri 2 Kota Jambi”.  Rumusan  Masalah Penelitian  ini  adalah  Bagaimana  merancang  sistem  pembayaran  SPP  secara  online  pada SMK PGRI 2 Kota Jambi? Dan bagaimana menerapkan sistem pembayaran SPP secara online pada SMK PGRI 2 Kota Jambi?. Sedangkan,
Batasan Masala h Penelitian ini dilakukan pada SMK PGRI 2 Kota Jambi, Perancangan pembayaran SPP SMK PGRI 2 Kota Jambi menggunakan pemograman PHP, Software visual studio dan SQLyog. Perancangan ini objek penelitian di ambil sampel dari data tata usaha.
Tujuan dari perancangan aplikasi administrasi SPP online berbasis WEB pada SMK PGRI 2 Kota Jambi adalah Merancang  sebuah  aplikasi  berbasis  website  yang  nantinya  akan  dapat  digunakan  sebagai  media  pembayaran  yang berguna bagi pihak-pihak yang berkepentingan. Adapun manfaat memudahkan bagi pegawai tata usaha untuk mencari data siswa yang belum melakukan pembayaran SPP di SMK PGRI 2 Kota Jambi, dan memberikan fasilitas untuk orang tua siswa mengetahui biaya SPP dan keterangan pembayaran, juga bisa dijadikan sebagai sarana informasi bagi pihak- pihak yang berkepentingan dengan SMK PGRI 2 Kota Jambi.

## 2. METODOLOGI PENELITIAN

## 2.1 Kerangka Dasar
Kerangka  Penelitian  merupakan  urutan  langkah-langkah  yang  harus  dilakukan  sehingga  tujuan  dari  penelitian  dapat tercapai sesuai dengan yang di harapkan. Adapun langkah-langkah yang akan digunakan oleh penulis untuk melakukan penelitian dapat di lihat sebagai berikut:

## Gambar 1. Kerangka Penelitian
Bedasarkan gambar 1 mengenai kerangka kerja penelitian yang telah digambarkan diatas, maka dapat diuraikan pembahasan  masing-masing  tahap  dalam  penelitian.  Tahapan  Identifikasi  Masalah,  pada  tahap  ini  penulis  melakukan indentifikasi masalah pada sistem yang sedang berjalan untuk mengetahui kebutuhan yang harus di penuhi. Dengan cara melihat,  mengamati,  dan  mengkaji  lebih  dalam  masalah  apa  yang  sedang  terjadi  pada  SMK  PGRI  2  Kota  Jambi. Sehingga penulis dapat  menyimpulkan solusi  yang di butuhkan  untuk  mengatasi permsalahan tersebut.  Hasilnya akan digunakan penulis untuk memenuhi kebutuhan yang dibutuhkan pada sekolah SMK PGRI 2 Kota Jambi. Tahapan Studi Litelatur,  pada  tahap  ini  penulis  melakukan  pencarian  landasan  teori  yang  diperoleh  dari  berbagai  jurnal,  dan  buku, untuk  melengkapi  konsep  dan  teori  yang  digunakan  agar  teori  yang  di  teliti  memiliki  landasan  dan  keilmuan  yang ilmiah  dari  penelitian  yang  penulis  bahas.  Studi  Literatur  ini  juga  bertujuan  agar  mendapatkan  landasan  teoritis mengenai permasalah yang diteliti. Dengan dilakukannya cara ini, peneliti bisa lebih memahami permasalah yang akan diteliti  sesuai  dengan  penelitian  yang  diambil.  Sehingga  dapat  mempermudah  dan  memahami  konsep  dari  teori  serta merancang aplikasi pembeyaran SPP pada SMK PGRI 2 Kota Jambi.
Pada tahapan Pengumpulan Data, penulis menggunakan teknik pengumpulan data yang diantaranya, Pengamatan (Observarsi),  pengamatan  langsung  atau  kegiatan  yang  sedang  dilakukan.  Dalam  penelitian  ini  pengumpulan  data dengan  cara  mengamati  secara  langsung  sistem  yang  berjalan  di  SMK  PGRI  2  Kota  Jambi.  Sekaligus  mencari  letak permasalahan  yang  terjadi  pada  SMK  PGRI  2  Kota  Jambi.  Agar  penulis  dapat  mengetahui  apa  saja  kebutuhan  yang

## TIN: Terapan Informatika Nusantara
Vol 4, No 1, June 2023, page 52-64 ISSN 2722-7987 (Media Online) Website https://ejurnal.seminar-id.com/index.php/tin DOI 10.47065/tin.v4i1.4199
diperlukan pada SMK PGRI 2 Kota Jambi yang akan di rancang penulis. Tahap kedua adalah wawancara. Pengumpulan data  yang  dilaksanakan  dengan  cara  tanya  jawab  langsung  antara  penulis  dan  pihak  SMK  PGRI  2  Kota  Jambi. Wawancara ini dilakukan untuk mendapatkan informasi yang akurat, serta keterangan-keterangan yang ada sesuai fakta mengenai  hal-hal  yang berkaitan dengan  masalah  yang di teliti. Metode  wawancara ini dilakukan  untuk  mendapatkan informasi  yang  akan  menjadi  acuan  penulis  dalam  penelitian.  Dengan  dilakukannya  wawancara  ini,  penulis  berharap penjelasan lebih jelas pada permasalahan yang terjadi di SMK PGRI 2 Kota Jambi. Pengembangan SistemDalam hal ini penulis  menggunakan  metode  pengembangan  sistem  model  Waterfall  untuk  menyusun  sistem  yang  baru.  Tahapan  ini dilakukan  agar  sistem  yang  baru  dapat  memecahkan  masalah  yang  terjadi  pada  SMK  PGRI  2  Kota  Jambi.  Dengan menggunakan  sistem  model  waterfall  ini  penulis  dapat  mengembangkan  sistem  dengan  tahapan-tahapan  yang  baik. Sehingga bisa menyelesaikan pengembangan sistem dengan baik dan tertata baik.

## 2.2 Metode Pengembangan Sistem
Metode  pengembagan  sistem  merupakan  bagaimana  cara  penulis  mengembangkan  perangkat  lunak  yang  dilakukan dalam  metode  pengembangan  sistem  ini  penulis  mengembangkan  perangkat  lunak  menggunakan  metode  Waterfall, menurut  Pressman  (Effect  et  al.,  2020;  Fernando  et  al.,  2021;  Ramdhan  &  Nufriana,  2019;  Sitohang  &  Rikki,  2019; Svacina et al., 2020; Yousuf & Salloum, 2020), “model Waterfall atau biasanya disebut klasik Lofe Cycle adalah model klasik  yang bersifat sistematis, atau berurutan”. Berikut adalah  gambar dari  model  Waterfall beserta  uraiannya  dapat dilihat pada gambar berikut:

## Gambar 2. Metode Waterfall
Gambar  diatas  adalah  tahapan  umum  dari  model  proses  ini.  Adapun  penjelasan  dari  masing-masing  tahapan adalah sebagai berikut : 1.Analisis  kebutuhan  bertujuan  untuk  memngetahui  sifat  program  yg  akan  dibuat.  Pada tahapan ini proses pengumpulan kebutuhan dilakukan secara intensif untuk menspesifikasi kebutuhan perangkat lunak agar  dapat  dipahami  perangkat  lunak  seperti  apa  yang  dibutuhkan  oleh  user.    Spesifikasi  kebutuhan  perangkat  lunak pada  tahap  ini  perlu  untuk  didokumentasikan.  2.  Tahap  ini  akan  membahas  tentang  rancangan  dari  model  sistem. Penulis  menggunakan  use  case  diagram,  activity  diagram  sebagai  alat  bantu  desain  sistem,  dan  class  diagram  untuk menggambarkan  keadaan  (atribut  property)  suatu  sistem.  Serta  menentukan  rancangan  input  dan    output  yang digunakan  dalam  mendesain  struktur  software  yang  didapatkan  dari  spesifikasi  akan  kebutuhan.  3.  Implementasi  & Pengujian  Unit  Pada  tahap  ini  sistem  yang  telah  dirancang,  diimplementasikan  dengan  menggunakan  program  bantu yaitu  Visual  Studio  Code,  kemudian  dilakukan  pengujian  terhadap  tiap-tiap  unit  atau  modul    yang  telah  dibuat. 4.Pengujian Sistem Pada tahap ini penulis  melakukan uji coba, dimana  semua  fungsi-fungsi software harus dilakukan penguji  secara  keseluruhan  agar  software  yang  dikembangkan  bebas  dari  error  dan  hasilnya  sesuai  dengan  kebutuhan yang  sudah  didenfiinisikan  sebelumnya.  5.Maintenanc  Tahap  ini  merupakan  tahap  akhir  dimana  kita  melakukan pengoperasian  sistem  dan  jika  diperlukan  maka  dilakukan  perbaikan-perbaikan.  Penulis  tidak  sampai  pada  tahap pemeliharaan tetapi hanya sebatas pengujian sistem. Karena pada tahan maintenance sudah merupakan tanggung jawab user sebagai pengguna sistem.

## 2.3 Alat Bantu Perancangan Sistem
a. Class Diagram
Class  diagram  adalah  salah  satu  diagram  yang  paling  populer  bagi  software  engineering  (Fachruddin  et  al.,  2020; Rasywir  et  al.,  2020)  .  Class  Diagram  mewakili  entitas  kunci  dalam  bisnis  serta  domain  teknis.  Class  Diagram sifatnya  sangat  struktural  dan  statis.  Analisa  kebutuhan  data  untuk  perangkat  lunak  akan  dibangun  dapat digambarkan dengan class diagram seperti terlihat pada gambar berikut:

## TIN: Terapan Informatika Nusantara
Vol 4, No 1, June 2023, page 52-64 ISSN 2722-7987 (Media Online) Website https://ejurnal.seminar-id.com/index.php/tin DOI 10.47065/tin.v4i1.4199
Gambar 3. Class Diagram
b. Analisis Sistem Yang Berjalan
Analisa sistem yang sedang berjalan dapat diartikan sebagai suatu kegiatan untuk memperoleh gambaran mengenai keadaan sistem yang sedang berjalan. Pada umumnya cara pembayaran SPP,  pada SMK PGRI 2 Kota Jambi masih menggunakan  cara  manual,  yaitu  bagian  administrasi  mencatat  dalam  buku  besar  kemudian  diinputkan  kedalam microsoft excel data yang diinputkan seperti data pembayaran SPP setiap bulannya, pembayaran uang makan setiap bulannya  data  pengeluaran  sekolah  direkap  secara  manual,  sehingga  banyak  kesalahan  dalam  perhitungannya, dengan begitu laporan yang akan diserahkan ke kepala sekolah dan kepala yayasan terkadang tidak akurat.

## 2.4 Analisis Kebutuhan Perangkat Lunak
Pada gambar 4 dibawah merupakan use case diagram pada sistem. Terdapat 2 aktor yang dapat menggunakan sistem ini yaitu  operator  dan  wali  murid  atau  user.  Pada  usecase  ini  bisa  kita  lihat  bahwa  operator  bisa  mengelola  data  user, mengelola data siswa, mengelola tagihan, mengelola pembayaran dan mencetak laporan (Ahlunaza, 2022). Wali murid atau user bisa  membayar tagihan dan  melihat tagihan. Untuk  masuk kedalam sistem  ini  operator dan user harus login terlebih dahulu.
Gambar 4. Use Case Diagram

## 2.5 Rancangan Struktur Program
Rancangan  struktur  program  yang  digunakan  anatara  lain  adalah  menggunakan  diagram  flowchart.  Flowchart  login berisikan  langkah-langkah  aktor  mengisi  username  dan  password,  dan  sistem  melakukan  mengecek  username  dan password  ada  di  database,  jika  ada  maka  sistem  akan  menampilkan  halaman  menu  utama  jika  tidak  ada  maka  sistem akan menampilkan pesan kesalahan. Flowchart user menjelaskan gambaran program bagaimana aktor dapat mengelola data  user  dari  dalam  sistem  seperti  menambah  dan  menghapus.    Flowchart  Data  Pembayaran  merupakan  flowchart

## TIN: Terapan Informatika Nusantara
Vol 4, No 1, June 2023, page 52-64 ISSN 2722-7987 (Media Online) Website https://ejurnal.seminar-id.com/index.php/tin DOI 10.47065/tin.v4i1.4199
mengenai data pembayaran, Flowchart data pembayaran dengan tombol detail dan hapus dimulai dari tampilan halaman Data  Pembayaran.  Pengguna  akan  melihat  daftar  pembayaran  yang  tersedia,  termasuk  informasi  seperti  nomor pembayaran,  nama  siswa,  tanggal  tagihan,  status,  dan  total  tagihan.  Di  sebelah  setiap  entri  pembayaran,  terdapat  dua tombol yaitu "Detail" dan "Hapus". Flowchart data rekening sekolah menjelaskan gambaran program bagaimana aktor dapat mengelola data pembelian dari dalam sistem seperti menambah dan menghapus. Flowchart data siswa mengenai data  siswa,  Flowchart  data  siswa  dengan  tombol  edit,  detail,  dan  hapus  dimulai  dari  tampilan  halaman  Data  Siswa. Pengguna akan melihat daftar siswa yang tersedia. Flowchart data siswa wali merupakan flowchart data siswa wali yang hanya  menampilkan  menu  Data  Siswa  dimulai  dari  tampilan  halaman  utama  Wali  Murid.  Ketika  seorang  wali  murid berhasil melakukan log in, mereka akan diarahkan ke halaman ini. Pada halaman utama Wali Murid, terdapat beberapa menu  yang  tersedia.  Flowchart  Data  Tagihan  merupakan  flowchart  mengenai  data  tagihan  flowchart  data  tagihan dengan tombol tambah, detail, dan hapus dimulai dari tampilan halaman Data Tagihan. Pengguna akan  melihat daftar tagihan  yang tersedia, termasuk  informasi seperti  nomor tagihan. Di sebelah setiap entri tagihan,  terdapat tiga tombol yaitu "Tambah", "Detail", dan "Hapus".

## 3. HASIL DAN PEMBAHASAN
Implementasi  tampilan  input  merupakan  tampilan  masukan  pada  sistem  administrasi  pembayaran  SMK  PGRI  2  Kota Jambi yang telah dirancang. Berikut ini adalah tampilan input dari sistem yang telah dirancang sebelumnya.

## 3.1 Halaman Tampilan Input
1. Halaman Tampilan Input Login Operator
Tampilan input login digunakan admin untuk masuk kedalam sistem dengan mengisi email dan password. Tampilan input login dapat dilihat pada gambar
Gambar 7. Halaman Login Operator
Pada gambar 7 diatas adalah gambar halaman login pada operator yang dimana operator harus login terlebih dahulu  agar  bisa  masuk  kedalam  sistem.  Operator  login  menggunakan  email  dan  password  yang  telah  diinput terlebih  dahulu.  Halaman  ini  juga  terdapat  elemen  kotak  centang  “Remember  Me”  untuk  memudahkan  operator dalam proses login di lain waktu. Jika operator salah dalam memasukan email atau password, maka operator tidak akan bisa masuk kedalam akun operator tersebut.
2. halaman Tampilan Input Login Wali Murid
Tampilan input login digunakan admin untuk masuk kedalam sistem dengan mengisi email dan password.

## TIN: Terapan Informatika Nusantara
Vol 4, No 1, June 2023, page 52-64 ISSN 2722-7987 (Media Online) Website https://ejurnal.seminar-id.com/index.php/tin DOI 10.47065/tin.v4i1.4199
Pada  gambar  8  diatas  adalah  gambar  halaman  login  pada  wali  murid  yang  dimana  wali  murid  harus  login terlebih  dahulu  agar  bisa  masuk  kedalam  sistem.  Wali  murid  login  menggunakan  email  dan  password  yang  telah diinput terlebih dahulu. Halaman ini juga terdapat elemen kotak centang “Remember Me” untuk memudahkan wali murid dalam proses login di lain waktu. Jika wali murid salah dalam memasukan email atau password, maka wali murid tidak akan bisa masuk kedalam akun wali murid tersebut.
3. Halaman Tampilan Menambah Data Operator
Pada  halaman  ini  hanya  operator  yang  dapat  mengolah  data  menambah  operator  yaitu  tambah,  edit,  hapus  data operator.

## Gambar 9. Halaman Tambah Akun Operator
Pada gambar 9 diatas adalah gambar halaman tambah user. Dimana terdapat form data user yang digunakan untuk menginput data user. Terdapat input Nama, Email, Password, No Hp, dan hak akses. Pada hak akses user bisa memilih  apakah  mereka  akan  membuat  akun  operator  atau  kepala  sekolah.  Karena  operator  dan  kepala  sekolah memiliki hak akses yang sama.
4. Tampilan Menambah Data Kepala Sekolah
Pada  halaman  ini  hanya  operator  yang  dapat  mengolah  data  menambah  kepala  sekolah  yaitu  tambah,  edit,  hapus data operator.

## Gambar 10. Halaman Tambah Akun Kepala Sekolah
Pada gambar 10 diatas adalah gambar halaman tambah user. Dimana terdapat form data user yang digunakan untuk menginput data user. Terdapat input Nama, Email, Password, No Hp, dan hak akses. Pada hak akses user bisa memilih  apakah  mereka  akan  membuat  akun  operator  atau  kepala  sekolah.  Karena  operator  dan  kepala  sekolah memiliki hak akses yang sama.
5. Tampilan Menambah Rekening Bank Sekolah.
Pada halaman menambah rekening bank sekolah ini hanya operator yang dapat menambah data biaya.

## TIN: Terapan Informatika Nusantara
Vol 4, No 1, June 2023, page 52-64 ISSN 2722-7987 (Media Online) Website https://ejurnal.seminar-id.com/index.php/tin DOI 10.47065/tin.v4i1.4199
Gambar 11. Halaman Tambah Data Rekening Bank Sekolah
Pada  gambar  11  diatas  adalah  gambar  halaman  tambah  data  rekening  bank  sekolah.  Dimana  terdapat  form data biaya yang digunakan untuk membuat data rekening bank sekolah yang baru. Terdapat input nama bank, nama pemilik bank, dan nomor rekening yang digunakan untuk membuat data rekening bank sekolah yang baru. Halaman ini hanya dapat diolah oleh operator dan kepala sekolah.
6. Halaman Tambah Data Wali Murid
Pada halaman menambah Data Wali Murid ini hanya operator yang dapat menambah data wali murid.
Gambar 12. Halaman Tambah Data Wali Murid
Pada  gambar  12  diatas  adalah  gambar  halaman  tambah  data  wali  murid.  Dimana  form  data  wali  murid  ini digunakan  untuk  menambahkan  data  wali  murid  siswa  siswi  SMK  PGRI  2  Kota  Jambi  yang  akan  memiliki  hak akses  untuk  bisa  membuka  sistem  ini  nantinya.  Terdapat  nama,  email,  password,  dan  no  hp  yang  harus  diisi  agar wali murid terdaftar pada sistem. Menambah data wali murid hanya bisa dilakukan operator dan kepala sekolah. 7. Halaman Tambah Data Siswa
Pada halaman menambah Data siswa ini hanya operator yang dapat menambah data siswa.
Gambar 13. Halaman Tambah Data Siswa
Pada  gambar  13  diatas  adalah  gambar  halaman  tambah  data  siswa.  Dimana  terdapat  form  data  siswa  yang akan  diinput  untuk  mendaftarkan  data  siswa.  Dengan  mengisi  wali  murid  dengan  memilih  nama  wali  murid  yang akan  ditambahkan  datanya,  nama  siswa,  nisn  siswa,  jurusan  siswa,  kelas,  angkatan,  dan  foto  siswa  tersebut. Halaman ini hanya bisa diakase oleh operator atau kepala sekolah.

## TIN: Terapan Informatika Nusantara
Vol 4, No 1, June 2023, page 52-64 ISSN 2722-7987 (Media Online) Website https://ejurnal.seminar-id.com/index.php/tin DOI 10.47065/tin.v4i1.4199

## 8. Halaman Tambah Data Siswa
Pada halaman menambah Data siswa ini hanya operator yang dapat menambah data siswa.

## Gambar 14. Halaman Tambah data biaya
Pada  gambar  5.8  diatas  adalah  gambar  halaman  tambah  data  biaya.  Dimana  terdapat  form  data  biaya  yang digunakan  untuk  menginput  data  biaya.  Terdapat  input  Nama  biaya,  jumlah  atau  nominal  yang  disediakan  oleh sekolah. Dalam menambahkan data biaya ini hanya bisa dilakukan oleh operator sekolah atau kepala sekolah.
9. Halaman Tambah Data Tagihan
Pada halaman menambah data tagihan ini hanya operator yang dapat menambah data tagihan.
Gambar 15. Halaman Tambah Data Tagihan
Pada gambar 14 diatas adalah gambar tampilan halaman data tagihan. Dimana terlebih dahulu mengisi form data tagihan yang terdapat kotak ceklis untuk memilih jumlah SPP yang dibayar, memilih angkatan, memilih kelas, tanggal  tagihan,  dan  jatuh  tempo,  serta  memberi  keterangan.  Form  ini  hanya  bisa  diisi  oleh  operator  atau  kepala sekolah yang memiliki hak akses pada sistem ini.

## 3.2 Halaman Tampilan Output
1. Tampilan Dashboard Operator
Pada halaman dashboard, Menampilkan teks yang menandakan berhasil login ke akun operator.
Gambar 16. Halaman Dashboard Operator
Pada  gambar  15  diatas  adalah  gambar  halaman  dashboard  operator.  Dimana  ketika  operator  berhasil  login dengan  akun  operator  maka  akan  Menampilkan  tampilan  gambar  di  atas.  Dengan  ini  menandakan  bahwa  operator berhasil login kedalam halaman operator.

## TIN: Terapan Informatika Nusantara
Vol 4, No 1, June 2023, page 52-64 ISSN 2722-7987 (Media Online) Website https://ejurnal.seminar-id.com/index.php/tin DOI 10.47065/tin.v4i1.4199
2. Halaman Tampilan Halaman Data User Pada halaman data user hanya operator yang dapat mengakses dan melihat informasi yang tersedia..
Gambar 17. Halaman Data User
Pada gambar 16 diatas adalah gambar halaman tampilan data user. Dimana setelah berhasil menyimpan data baru  operator  atau  kepala  sekolah  maka  tampilan  yang  muncul  seperti  gambar  di  atas.  Jika  data  yang  ditampilkan sesuai  dengan  data  operator  tersebut  maka  data  berhasil  terdaftar.  Halaman  ini  juga  bisa  mengedit  data  jika  ada kesalahan dalam penginputan data, dan bisa menghapus data jika data yang ada tidak dibutuhkan.
3. Tampilan Halaman Rekening Bank Sekolah.
Pada halaman data bank sekolah hanya operator yang dapat mengakses dan melihat informasi yang tersedia.

## Gambar 18. Halaman Rekening Bank Sekolah
Pada gambar 17 diatas adalah gambar halaman tampilan data rekening bank sekolah. Dimana setelah berhasil menyimpan  data  baru  rekening  bank  sekolah  maka  tampilan  yang  muncul  seperti  gambar  di  atas.  Jika  data  yang ditampilkan sesuai dengan data rekening bank sekolah tersebut maka data berhasil terdaftar. Halaman ini juga bisa mengedit  data  jika  ada  kesalahan  dalam  penginputan  data,  dan  bisa  menghapus  data  jika  data  yang  ada  tidak dibutuhkan.
4. Tampilan Halaman Wali Murid
Pada halaman data wali murid hanya operator yang dapat mengakses dan melihat informasi yang tersedia.
Pada  gambar  18  diatas  adalah  gambar  halaman  tampilan  data  wali  murid.  Dimana  setelah  berhasil menyimpan  data  baru  wali  murid  maka  tampilan  yang  muncul  seperti  gambar  di  atas.  Jika  data  yang  ditampilkan

## TIN: Terapan Informatika Nusantara
Vol 4, No 1, June 2023, page 52-64 ISSN 2722-7987 (Media Online) Website https://ejurnal.seminar-id.com/index.php/tin DOI 10.47065/tin.v4i1.4199
sesuai dengan data wali murid yang di inginkan maka data berhasil terdaftar. Halaman ini juga bisa mengedit data jika ada kesalahan dalam penginputan data, dan bisa menghapus data jika data yang ada tidak dibutuhkan dan, dapat melihat detail data.
5. Tampilan Halaman Data Siswa
Pada halaman data siswa hanya operator yang dapat mengakses dan melihat informasi yang tersedia.

## Gambar 20 Halaman Data Siswa
Pada gambar 19 diatas adalah gambar halaman tampilan data siswa. Dimana setelah berhasil menyimpan data siswa maka  tampilan  yang  muncul  seperti  gambar  di  atas.  Jika  data  yang  ditampilkan  sesuai  dengan  data  siswa  yang  di inginkan maka data berhasil terdaftar. Halaman ini juga bisa mengedit data jika ada kesalahan dalam penginputan data, dan bisa menghapus data jika data yang ada tidak dibutuhkan dan, melihat detail data.
6. Tampilan Halaman Data Biaya
Pada halaman data biaya hanya operator yang dapat mengakses dan melihat informasi yang tersedia.

## Gambar 21. Halaman Data Biaya
Pada gambar 20 diatas adalah gambar halaman tampilan data biaya. Dimana setelah berhasil menyimpan data biaya,  maka  tampilan  yang  muncul  seperti  gambar  di  atas.  Jika  data  yang  ditampilkan  sesuai  dengan  data  biaya tersebut  maka  data  berhasil  terdaftar.  Halaman  ini  juga  bisa  mengedit  data  jika  ada  kesalahan  dalam  penginputan data, dan bisa menghapus data jika data yang ada tidak dibutuhkan.
7. Tampilan Halaman Data Tagihan
Pada halaman data tagihan hanya operator yang dapat mengakses dan melihat informasi yang tersedia.

## TIN: Terapan Informatika Nusantara
Vol 4, No 1, June 2023, page 52-64 ISSN 2722-7987 (Media Online) Website https://ejurnal.seminar-id.com/index.php/tin DOI 10.47065/tin.v4i1.4199
Pada  gambar  21  diatas  adalah  gambar  halaman  tampilan  data  tagihan.  Dimana  setelah  berhasil  menyimpan data  tagihan  maka  tampilan  yang  muncul  seperti  gambar  di  atas.  Jika  data  yang  ditampilkan  sesuai  dengan  data tagihan yg diinginkan maka data berhasil terdaftar. Halaman ini juga bisa mengedit data jika ada kesalahan dalam penginputan data, dan bisa melihat detail data siswa.
8. Tampilan Halaman Data Pembayaran
Pada halaman data pembayaran hanya operator yang dapat mengakses dan melihat informasi yang tersedia.

## Gambar 23. Halaman Data Pembayaran
Pada  gambar  22  diatas  adalah  gambar  halaman  tampilan  data  pembayaran.  Dimana  setelah  berhasil menyimpan data pembayaran maka tampilan yang muncul seperti gambar di atas. Jika data yang ditampilkan sesuai dengan  data  pembayaran  tersebut  maka  data  berhasil  terdaftar.  Halaman  ini  juga  bisa  mengedit  data  jika  ada kesalahan dalam penginputan data, dan bisa melihat detail data siswa.
9. Tampilan Halaman Dashboard Wali Murid
Pada halaman dashboard, Menampilkan teks yang menandakan berhasil login ke akun wali murid..
Gambar 24. Halaman dashboard wali murid
Pada  gambar  23  diatas  adalah  gambar  halaman  dashboard  wali  murid.  Dimana  ketika  wali  murid  berhasil login  dengan  akun  maka  akan  Menampilkan  tampilan  gambar  di  atas.  Dengan  ini  menandakan  bahwa  wali  murid berhasil login kedalam halaman wali murid.
10. Tampilan Halaman Data Siswa Pada halaman data siswa di wali murid, wali murid bisa melihat tampilan nama data siswa masing-masing.

## TIN: Terapan Informatika Nusantara
Vol 4, No 1, June 2023, page 52-64 ISSN 2722-7987 (Media Online) Website https://ejurnal.seminar-id.com/index.php/tin DOI 10.47065/tin.v4i1.4199
Pada gambar 24 diatas adalah gambar halaman data siswa pada wali murid. Dimana ketika operator berhasil menyimpan  nama  siswa  dengan  wali  murid  masing-masing  maka,  ketika  wali  murid  masuk  kedalam  data  siswa maka  wali  murid  bisa  melihat  data  anaknya  sendiri.  Wali  murid  hanya  bisa  melihat  data,  tidak  ada  akses  untu menghapus, mengedit, dan melihat detail dari data siswa masing-masing.
11. Tampilan Halaman Data tagihan Pada halaman data tagihan di wali murid, wali murid bisa melihat tampilan data tagihan.
Gambar 26. Halaman Data Tagihan
Pada  gambar  25  diatas  adalah  gambar  halaman  data  tagihan  pada  wali  murid.  Dimana  ketika  operator berhasil menyimpan tagihan maka, wali murid bisa melihat tagihan apa saja yang ditagih oleh operator sekolah pada anak mereka masing-masing. Jika wali murid telah melunasi tagihan tersebut, maka dihalaman akan terdapat tulisan dengan button hijau, yang menandakan bahwa pembayaran telah dibayar atau lunas. Wali murid hanya bisa melihat data ini, tidak ada akses untu menghapus, mengedit, dan melihat detail dari data siswa masing-masing.
12. Tampilan Halaman Data Pembayaran
Pada halaman data pembayaran di wali murid, wali murid hanya bisa melihat tampilan data pembayaran dan melihat detail pembayaran.

## Gambar 27. Halaman Data Pembayaran
Pada  gambar  26  diatas  adalah  gambar  halaman  data  pembayaran  pada  wali  murid.  Dimana  ketika  operator berhasil  mengkonfirmasi  pembayaran,  wali  murid  bisa  melihat  keterangan  yang  diberikan  oleh  operator,  apakah telah  di  konfirmasi  atau  belum  di  konfirmasiWali  murid  hanya  bisa  melihat  data  ini,  tidak  ada  akses  untu menghapus, mengedit, dan melihat detail dari data siswa masing-masing.

## 4. KESIMPULAN
Berdasarkan  hasil  penelitian  dan  analisis  yang  dilakukan  oleh  penulis  terhadap  perancangan  aplikasi  administrasi  spp online  berbasis  web  pada  SMK  PGRI  2  Kota  Jambi,  maka  dapat  disimpulkan,  yaitu    bahwa  sistem  administrasi keuangan  yang  konvensional  setiap  proses  pembayaran  dilakukan  dengan  cara  mencatat  pada  kartu  pembayaran  dan kemudian dicatat lagi pada buku arsip. Dengan adanya  Aplikasi  Administrasi Keuangan Sekolah  ini dapat  membantu pihak  sekolah  SMK  PGRI  2  Kota  Jambi  dalam  proses  pembayaran  siswa  serta  proses  pencatatan  keuangan  sekolah. Dengan  adanya  aplikasi  ini  juga  membantu  pihak  sekolah  dalam  memanagement  keuangan  sekolah.  Penelitian  ini menghasilkan sebuah sistem informasi administrasi pembayaran SMK PGRI 2 Kota Jambi berbasis web yang dibangun menggunakan bahasa pemrograman PHP dengan framework Laravel dan database PhpMyAdmin.

## TIN: Terapan Informatika Nusantara
Vol 4, No 1, June 2023, page 52-64 ISSN 2722-7987 (Media Online) Website https://ejurnal.seminar-id.com/index.php/tin DOI 10.47065/tin.v4i1.4199

## REFERENCES
Aeniah,  B.  (2020).  Meningkatkan  Prestasi  Belajar  IPS  Materi  Mengenal  Cara  Menghadapi  Bencana  Alam  Dengan Model  Cooperative  Tipe  Circuit  Learning  Siswa  Kelas  VI  Semester  I  SDN  Batu  Kembar  Kecamatan  Janapria Tahun Pelajaran 2015/2016. JISIP (Jurnal Ilmu Sosial Dan Pendidikan) , 4 (1). https://doi.org/10.36312/jisip.v4i1.1043
Ahlunaza,  N.  (2022).  Perancangan  Aplikasi  Sistem  Informasi  Geografis  Lokasi  Latihan  Bolavoli  Di  Kota  Jambi Berbasis Android. Jurnal Informatika Dan Rekayasa Komputer … , 1 (April), 118–130.
Angeline,  M.,  &  Astuti,  F.  (2018).  Rancang  Bangun  Sistem  Pendukung  Keputusan  Pemilihan  Pramuwisata Menggunakan Metode Profile Matching. Jurnal Ilmiah SMART , II (2), 45–51.
Bahrudin,  A.,  Jupriyadi,  &  Permata.  (2020).  Optimasi  Arsip  Penyimpanan  Dokumen  Foto  Menggunakan  Algoritma Kompresi Deflate (Studi Kasus :Studio Muezzart). Jurnal Ilmiah Infrastruktur Teknologi Informasi , 1 (2), 14–18. https://doi.org/10.33365/jiiti.v1i2.582
Effect, T. H. E., Diversity, O. F., The, O. F., Of, B., Decision, I., Decision, F., Policy, D., & Company, T. O. (2020). Impact Factor : International Scientific Journal Theoretical & Applied Science THE EFFECT OF DIVERSITY OF THE  NATIONALITY  ,  BOARD  OF  DIRECTOR  ,  INVESTMENT  DECISION  ,  FINANCING  DECISION  , AND Impact Factor : International Scientific Journal Theoretical . https://doi.org/10.15863/TAS Fachruddin, Pahlevi, M. R., Ismail, M., & Rasywir, E. (2020). Pengujian Implementasi Sistem Pengelolaan Keuangan Masjid Berbasis Web Dan Android. Jurnal Paradigma UBSI , 22 (2), 124–131.
Fernando, R.,  Assegaf, S., &  Rohaini, E. (2021). Perancangan  Aplikasi Sistem Informasi Geografis Pelayanan Publik Di Sungai Bahar Utara Berbasis Android. Jurnal Ilmiah Mahasiswa Teknik Informatika , 3 (2), 124–125. Firmansyah, R. (2018). Usability Testing Dengan Use Questionnaire Pada Aplikasi Sipolin Provinsi Jawa Barat. Swabumi , 6 (1), 1–7. https://doi.org/10.31294/swabumi.v6i1.3310
Haryani, & Fitriani, D. (2019). Sistem Pendukung Keputusan Penentuan Karyawan Terbaik Pada Collection Pt . Panin Bank Menggunakan. Jurnal Mantik Penusa , 3 (1), 1–8.
Idam, F., Junaidi,  A.,  & Handayani, P. (2019). Pemilihan  Karyawan Terbaik Menggunakan Metode Profile Matching Pada PT. Surindo Murni Agung. Jurnal Infortech , 1 (1), 21–27. https://doi.org/10.31294/infortech.v1i1.6985 Jasmir,  Zaenal,  D.,  J,  P.  A.,  &  Rasywir,  E.  (2018).  Prediksi  Mahasiswa  Drop  Out  Dengan  Menggunakan  Algoritma
Klasifikasi Data Mining. Prosiding Annual Research Seminar , 4 (1), 82–87.
http://seminar.ilkom.unsri.ac.id/index.php/ars/article/view/1864
Nicolas,  P.  P.,  Soetanto,  H.,  Wahyudi,  W.,  &  Rossi,  A.  (2021).  Sistem  Pendukung  Keputusan  Pemilihan  Karyawan Terbaik pada PT. XYZ dengan Metode Profile Matching dan Interpolasi. Jurnal Sistem Dan Teknologi Informasi (Justin) , 9 (2), 121. https://doi.org/10.26418/justin.v9i2.44159 Ramadiani, R., & Rahmah, A. (2019). Sistem pendukung keputusan pemilihan tenaga kesehatan teladan menggunakan metode  Multi-Attribute  Utility  Theory. Register:  Jurnal  Ilmiah  Teknologi  Sistem  Informasi , 5 (1),  1. https://doi.org/10.26594/register.v5i1.1273
Ramdhan,  N.  A.,  &  Nufriana,  D.  A.  (2019).  Rancang  Bangun  Dan  Implementasi  Sistem  Informasi  Skripsi  Oline Berbasis  WEB. Jurnal  Ilmiah  Intech :  Information  Technology  Journal  of  UMUS , 1 (02),  1–12. https://doi.org/10.46772/intech.v1i02.75
Rasywir,  E.,  Sinaga,  R.,  &  Pratama,  Y.  (2020).  Analisis  dan  Implementasi  Diagnosis  Penyakit  Sawit  dengan  Metode Convolutional Neural Network ( CNN ). Jurnal Paradigma UBSI , 22 (2), 117–123.
Sadewo,  M.  G.,  Windarto,  A.  P.,  &  Wanto,  A.  (2018).  Penerapan  Algoritma  Clustering  Dalam  Mengelompokkan Banyaknya  Desa/Kelurahan  Menurut  Upaya  Antisipasi/  Mitigasi  Bencana  Alam  Menurut  Provinsi  Dengan  K- Means. KOMIK (Konferensi Nasional Teknologi Informasi Dan Komputer) , 2 (1), 311–319. https://doi.org/10.30865/komik.v2i1.943
Sitohang, D. W., & Rikki, A. (2019). Implementasi Algoritma K- Means Clustering untuk Mengelompokkan Data Gizi Balita  pada  Kecamatan  Garoga  Tapanuli  Utara. KAKIFIKOM  (Kumpulan  Artikel  Karya  Ilmiah  Fakultas  Ilmu Komputer) , 02 , 80–92. https://doi.org/10.54367/kakifikom.v1i2.642
Svacina, J., Simmons, J., & Cerny, T. (2020). Semantic code clone detection for enterprise applications. Proceedings of the ACM Symposium on Applied Computing , 129–131. https://doi.org/10.1145/3341105.3374117 Syaidathurrahma,  &  Lestari,  V.  (2020).  Sistem  Pendukung  Keputusan  Pemilihan  Karyawan  Terbaik  Menggunakan Metode Profile Matching ( Studi Kasus : PT . Karya Hevea ). Jurnal Sistem Informasi Dan Teknologi Jaringan ( SISFOTEKJAR ) , 2 , 12–16.
Tamtelahitu, T. M. (2020). Komparasi Algoritma Clustering dengan Dataset Penyebaran Covid-19 di Indonesia Periode Maret-Mei 2020. Jurnal Teknologi Technoscientia , 13 (1), 27–34.
Widestyanto,  C.  R.,  &  Samsinar,  S.  (2022).  Sistem  Pendukung  Keputusan  Pemilihan  Karyawan  Terbaik  Pada  PT. Menara Depok  Asri Menggunakan Metode Profile  Matching. Prosiding Seminar Nasional … , September , 1893– 1903.
Yousuf,  H.,  &  Salloum,  S.  (2020).  Survey  analysis:  Enhancing  the  security  of  vectorization  by  using  word2vec  and CryptDB. Advances in Science, Technology and Engineering Systems , 5 (4), 374–380.
https://doi.org/10.25046/aj050443