## RANCANG BANGUN SISTEM INFORMASI PEMBAYARAN SUMBANGAN PEMBINAAN PENDIDIKAN (SPP) DI SMK VOCTECH 2 KOTA TANGERANG BERBASIS WEB
Faridi 1) , Dyas Yudi Priyanggodo 2) ,  Yanuardi 3) , Kurnia Nur Fazar 4)
1,2,3,4 Program Studi Teknik Informatika, Fakultas Teknik, Universitas Muhammadiyah Tangerang Jl. Perintis Kemerdekaan I/33, Cikokol, Kota Tangerang
Co Responden Email: faridimkom@gmail.com
Article history
Received 01 Jul 2022 Revised 23 Sep 2022 Accepted 03 Oct 2022 Available 27 Oct 2022
Keywords Codeigniter,
MySQL,
School,
Javascript, Voctech

## Abstract
In today's modern era, technological developments are very rapid, especially the development  of  Information  Technology  (IT).  Many  large  companies  are competing to use it. Apart from companies, the world of education does not want to  be  left  behind  in  technology  matters.  An  example  of  using  Information Technology (IT) in schools is the web-based school tuition fee payment system. At Voctech  2  Voctech  2,  Tangerang  City,  the  tuition  payment  system  still  uses Microsoft Excel when recording the data, so there is a buildup of files containing student payment data that can be at risk of being lost. With these problems it can be concluded, the author will design a school payment system entitled "Design of a Web-Based Payment Information System for Educational Contributions (SPP) at  Voctech  2  Tangerang  City".  By  utilizing  HTML,  CSS,  PHP,  Javascript  as  a programming  language,  Framework  Codeigniter  (CI),  MySQL  as  its  database. With this SPP payment system, it makes it easier for Administration to record data, and  students/student  guardians  can  find  out  the  amount  of  fees  that  have  been paid without checking with the school.
Riwayat Diterima 01 Jul 2022
Revisi 23 Sep 2022 Disetujui 03 Okt 2022 Terbit 27 Okt 2022
Kata Kunci
Codeigniter , MySQL,
Sekolah,
Javascript , Voctech

## Abstrak
Pada  era  modern  saat  ini,  perkembangan  teknologi  sangatlah  pesat,  terutama perkembangan  Teknologi  Informasi  (IT).  Banyak  perusahaan  –  perusahaan  besar berlomba – lomba menggunakannya. Selain perusahaan, dunia pendidikan pun tidak mau tertinggal dalam urusan teknologi. Contoh pemanfaat Teknologi Informasi (IT) di  sekolah  adalah  sistem  pembayaran  SPP  (Sumbangan  Pembinaan  Pendidikan) sekolah  berbasis  web.  Di  sekolah  SMK  Voctech  2  Kota  Tangerang  sistem pembayaran SPP masih menggunakan Microsoft Excel saat mendatanya, sehingga terjadilah  penumpukan  file  yang  berisi  data  data  bayaran  siswa  dapat  beresiko hilang. Dengan permasalahan tersebut dapat disimpulkan, penulis akan merancang sistem  pembayaran  sekolah  yang  berjudul  “Rancang  Bangun  Sistem  Informasi Pembayaran  Sumbangan  Pembinaan  Pendidikan  (SPP)  Di  SMK  Voctech  2  Kota Tangerang Berbasis Web”. Dengan  memanfaatkan  HTML, CSS, PHP, Javascript sebagai  bahasa  pemrograman, Framework  Codeigniter (CI),  MySQL  sebagai database  nya.  Dengan  adanya  sistem  pembayaran  SPP  ini  mempermudah  Tata Usaha dalam mendata, dan siswa/wali siswa dapat mengetahui jumlah biaya yang sudah terbayar tanpa mengecek ke sekolah.

## PENDAHULUAN
Pada era modern saat ini, perkembangan teknologi sangatlah pesat, terutama perkembangan  Teknologi  Informasi  (IT). Banyak  perusahaan  –  perusahaan  dari  yang kecil  sampai  yang  besar  berlomba  –  lomba menggunakannya. Selain perusahaan - perusahaan,  dunia  pendidikan  pun  tidak  mau tertinggal dalam urusan teknologi. Contohnya
seperti pemanfaatan Teknologi Informasi (IT). Teknologi  informasi  banyak  dipergunakan sebagai  pengolahan  data,  memperoleh  data, menyusun data, menyimpan datadan menyajikan  informasi  yang  akurat.  Contoh teknologi  informasi  di  sekolah  adalah  sistem informasi  pembayaran  SPP  (Sumbangan Pembinaan Pendidikan) sekolah berbasis web.
Sekolah adalah suatu lembaga pendidikan  untuk  para  siswa/siswi  belajar
dibawah  pengawasan  para  guru  yang  bersifat wajib. Dan setiap siswa diwajibkan membayar uang  yang  sudah  diatur  perbulannya  ke  loket Tata  Usaha  di  sekolahnya.  Di  sekolah  SMK Voctech  2  Kota  Tangerang  sistem  informasi pembayaran  SPP  (Sumbangan  Pembinaan Pendidikan)  masih  menggunakan  Microsoft Excel  saat  mendatanya,  sehingga  terjadilah penumpukan  data  dan  data  nya  pun  beresiko hilang ataupun terhapus.
Dengan  permasalahan  tersebut  dapat disimpulkan,  penulis  akan  merancang  sistem informasi  pembayaran  sekolah  yang  berjudul “Rancang Bangun Sistem Informasi Pembayaran Sumbangan Pembinaan Pendidikan  (SPP)  Di  SMK  Voctech  2  Kota
Tangerang Berbasis Web”.

## 1. LANDASAN TEORI

## 1.1 Rancang Bangun
Rancang  bangun  adalah  suatu  kegiatan menerjemahkan hasil analisa ke dalam bentuk paket perangkat lunak kemudian menciptakan sebuah  sistem  tersebut  ataupun  memperbaiki sistem yang sudah ada (Ferdiansyah, 2018).

## 1.2 Informasi
Informasi merupakan  data yang diolah menjadi bentuk yang berguna dan berarti bagi yang  menerimanya,  informasi  disebut  juga data  yang  diproses  atau  data  yang  memiliki arti. Informasi juga merupakan sebuah istilah yang tepat dalam pemakaian umum, informasi dapat  mengenai  data  mentah,  data  tersusun, kapasitas  sebuah  saluran  komunikasi,  dan sebagainya (Pratama & Purwadiyanta, 2018).
Sistem adalah sekelompok  elemen yang berhubungan dan satu sama lain mempengaruhi  ketika  ada  kegiatan  bersama untuk  sebuah  tujuan,  sedangkan  sistem informasi merupakan yang memiliki keterkaitan  satu  dengan  lainnya  untuk menghasilkan  informasi/data    yang  berguna bagi  orang  yang  dituju  (Herdiansah,  2020). Menejemen  Sistem  informasi  yang  baik berhubungan  sangat  berhubungan  dengan proses  dengan  pengolahan  data  yang  baik. (Fitriawati et al., 2019)

## 1.3 CodeIgniter
CodeIgniter  merupakan  sebuah  web application  framework  yang  bersifat  open source yang sering digunakan untuk membangun  aplikasi  php  dinamis.  Tujuan
utama  pengembangan  CodeIgniter  adalah untuk membantu developer untuk mengerjakan  aplikasi  lebih  cepat  daripada menulis  semua  code  dari  awal.  CodeIgniter menyediakan  berbagi  macam  library  yang dapat  mempermudah  dalam  pengembangan (Ilmi dkk., 2016).

## 1.4 PHP
PHP  merupakan  bahasa  pemrograman yang    bisa    disisipkan    kedalam    script HTML    dan    berjalan    di    sisi    server, biasanya    dipakai    untuk    membuat  website agar lebih dinamis (IpanRipai, 2017).

## 1.5 MySQL
Menurut (Rochman dkk., 2018) MySQL didefinisikan nama database server. Database server  adalah  server  yang  berfungsi  untuk menangani  database.  Database  adalah  suatu pengorganisasian data. Dengan menggunakan MySQL,  kita  bisa  menyimpan  data  dan kemudian  data  bisa  diakses  cara  yang  mudah dan cepat.

## 1.6 Black Box
Menurut (Amri & Aji, 2018) Black Box Testing adalah suatu pengujian yang dilakukan hanya  untuk  mengamati  hasil  dari  eksekusi pada  software  tersebut.  Pengamatan  hasil  ini melalui data uji dan memeriksa fungsional dari perangkat  lunak  itu  sendiri.  Jadi  dapat dianalogikan  seperti  kita  melihat  suatu  kotak hitam.  Dimana  kita  hanya  bisa  melihat penampilan pada luarnya saja, tanpa mengetahui apa yang ada dibalik kotak hitam tersebut. Pengujian black box testing ini juga mengevaluasi  hanya  pada  tampilan  luarnya saja  (interface),  fungsionalnya,  dan  tidak melihat atau mengetahui apa yang sesungguhnya terjadi di dalam proses detilnya. Namun  hanya  mengetahui  proses  input  dan output-nya saja.
1.7 Agile Methode
Menurut  (Amri  &  Aji,  2018)  Istilah Agile sendiri terdiri dari dua pengertian, yaitu: pertama  pengertian  dari  segi  filosofi,  dan kedua pengertian dari segi pedoman pengembangan  perangkat  lunak.  Dari  segi filosofi,  agile  mempunyai  arti  antara  lain: mendorong demi terciptanya kepuasan pelanggan;  mempercepat  delivery  perangkat lunak  secara  bertahap  (incremental);  tim
Tangerang, Oktober 2022, pp 279-286                                                                                               E ISSN : 2722-2713
proyek yang ramping dan mempunyai motifasi yang  sangat  tinggi;  minimasi  pekerjaan  serta menyederhanakan  (birokrasi)  keseluruhan proses.
Sedangkan  menurut  (Haryana,  2019) Agile  Development  Methods  merupakan metodologi  pengembangan  perangkat  lunak modern  yang  didasarkan  pada  prinsip-prinsip pengembangan  sistem  jangka  pendek  yang memerlukan  adaptasi  cepat  dari  pengembang terhadap  perubahan  dalam  bentuk  apapun. Namun  penggunakan  metode  agile  ini  tentu harus  diteliti  dan  diuji  cobakan  apakah  benar cocok dan baik penerapan saat ini.

## METODE PENELITIAN
Menurut  (Amri  &  Aji,  2018)  Istilah Agile sendiri terdiri dari dua pengertian, yaitu: pertama  pengertian  dari  segi  filosofi,  dan kedua pengertian dari segi pedoman pengembangan  perangkat  lunak.  Dari  segi filosofi,  agile  mempunyai  arti  antara  lain: mendorong demi terciptanya kepuasan pelanggan;  mempercepat  delivery  perangkat lunak  secara  bertahap  (incremental);  tim proyek yang ramping dan mempunyai motifasi yang  sangat  tinggi;  minimasi  pekerjaan  serta menyederhanakan  (birokrasi)  keseluruhan proses.
Pada
penelitian ini, penulis menggunakan  metode  pengembangan  sistem Agile  Software    Development  jenis  Extreme Programming (XP). Alasan penulis
menggunakan  metode  agile  adalah  proses pengambangan  sistem  nya  membutuhkan waktu  relatif  cepat,  dan  perubahannya  pun dapat  ditangani  dengan  cepat  sesuai  dengan keinginan  pengguna.  Extreme  Programming (XP)  merupakan  Agile  Methods  yang  paling banyak  digunakan.  Tahap  –  tahapan  yang harus  dilalui  adalah  :  Planning/perencanaan,
Design, Coding, Dan Testing.
Gambar 1. Kerangka extreme programming Sumber : (Fatoni & Dwi, 2016)

## 1.8 Planning / Perencanaan
Pada  tahapan  planning  /  perencanaan terhadap  software  yang  diinginkan    yaitu mengacu  pada  para  penggunanya.  Para penggunanya menjelaskan kebutuhan – kebutuhan apa saja yang dibutuhkan terhadap software  tersebut.  Ketika  semua  kebutuhan para  pengguna  sudah  ditentukan,  maka developer  akan  memperhitungkan  waktu lamanya pengerjaan software tersebut.

## 1.9 Design
Pada  proses  design  akan  berisikan semua  implementasi    dari  kebutuhan  para penggunanya.  Perubahan  design  dapat  terjadi walaupun sudah masuk ke tahap coding.

## 1.10 Coding
Pada
tahap coding, proses pengembangan  aplikasi  tidak  bisa  langsung diimplementasikan terhadap design yang telah dibuat.  Dalam  hal  ini  penulis  melakukan coding dengan menggunakan bahasa pemrogramman HTML, CSS, Javascript, PHP dan  menggunakan  Framework  CodeIgniter (CI).

## 1.11 Testing
Pada  tahap  ini  developer  tidak  bisa langsung mengimplementasikan software begitu saja, tetapi harus di uji terlebih dahulu. Dalam pengujian tersebut developer menggunakan  pengujian  Black  Box.  Pada tahapan  pengujian  Black  Box  dilakukan pengujian  semua  isi  software  nya,  yang nantinya menghasilkan input dan output yang sesuai dengan yg diuji.

## HASIL DAN PEMBAHASAN
Berdasarkan  hasil  pengamatan  dari SMK  Voctech  2  Kota  Tangerang,  terdapat beberapa  kebutuhan  pengguna,  seperti  tata usaha, bendahara, dan murid terhdapat sistem informasi pembayaran SPP sebagai berikut :
a. Tata usaha sekolah dapat menginput data angkatan,  data  jurusan,  dan  juga  data siswa.
b. Bendahara  sekolah  dapat  menginput pembayaran  dan  membuat  laporan  hasil rekapitulasi.
Tangerang, Oktober 2022, pp 279-286                                                                                               E ISSN : 2722-2713
c. Murid dapat melihat data hasil pembayaran  SPP  dan  juga  murid  dapat mencetak hasil pembayaran SPP.

## 1.12 Desain Sistem
1. Usecase Diagram

## Gambar 2. Usecase diagram

## Tabel Penjelasan Use Case
No Aktor Penjelasan 1 Tata Usaha User yang bertugas mengelola data angkatan,  data  jurusan, dan  data  siswa.  Untuk mengelola  data  tersebut tata usaha perlu login ke aplikasi terlebih dahulu. 2 Bendahara User yang bertugas mengelola data angkatan,  data  jurusan, data pembayaran, membuat  laporan  dan rekapitulasi. Untuk melakukan tugas tersebut Bendahara perlu  login  ke  aplikasi terlebih dahulu. 3 Siswa User  yang  hanya  bisa melihat  dan  mencetak data  pembayaran  saja. Untuk melihat data pembayaran  tentu  saja perlu login terlebih
dahulu.
2. Activity Diagram
A. Proses input data angkatan di halaman tata usaha
Gambar 3. Data angkatan

## B. Proses input data jurusan di halaman tata usaha
Gambar 4. Data jurusan
C. Proses input data siswa di halaman tata usaha
Gambar 5. Data siswa
D. Proses input pembayaran SPP halaman bendahara
Gambar 6. Input pembayaran
E. Proses pembuatan laporan halaman bendahara Gambar 7. Pembuatan laporan F. Proses siswa melihat data pembayaran SPP Gambar 8. Melihat data pembayaran
3. Class diagram
Tangerang, Oktober 2022, pp 279-286                                                                                               E ISSN : 2722-2713
1.13 Implementasi Tampilan Antar Muka
a. Tampilan Login
Pada  bagian  login  terdapat  2  bagian login, yang ke-1. Login administrasi dan yang ke-2. Login siswa. Login administrasi dapat diisi dengan username  dan  password  yang  sudah  di tentukan. Untuk login siswa dapat diisi dengan NIS (Nomer Induk Siswa).
Gambar 10. Tampilan login

## b. Tampilan Input Data Jurusan
Input data jurusan hanya dapat di akses melalui login tata usaha, yang fungsinya untuk menginput data jurusan si siswa.
Gambar 11. Tampilan data jurusan

## c. Tampilan Input Data Angkatan
Tampilan  input  data  angkatan  hanya dapat  diakses  melalui  login  tata  usaha, yang  fungsinya  untuk  menginput  data angkatan siswa.
Gambar 12. Tampilan data angkatan
d. Tampilan Input Data siswa
Tampilan input data siswa hanya dapat diakses  melalui  login  tata  usaha,  yang fungsinya  untuk  menginput  data  siswa
SMK  Voctech  2  Kota  Tangerang. Bagian  ini  juga  menentukan  username dan password untuk siswa login.
Gambar 13. Tampilan data siswa

## e. Tampilan Pembayaran
Tampilan  pembayaran  hanya  bisa diakses  melalui  login  bendahara,  yang fungsinya untuk menginput hasil pembayaran SPP siswa.
Gambar 14. Tampilan pembayaran f. Tampilan Laporan
Setelah proses input pembayaran selesai,  maka  tampilan  laporan  akan menampilkan  data  yang  telah  di  input dari tampilan pembayaran.
Gambar 15. Tampilan laporan

## g. Tampilan Beranda Siswa
Diberanda  siswa  terdapat  tampilan sambutan.  Yang  berisikan  tulisan sambutan untuk siswa yang masuk.

## Gambar 16. Tampilan beranda siswa

## h. Tampilan Data Pembayaran
Tampilan data pembayaran berisikan data hasil  pembayaran  SPP  siswa.  Data  ini berasal  dari  inputan  pembayaran  di halaman  bendahara.  Tampilan  data pembayaran  ini  diakses  melalui  login siswa.
Gambar 17. Tampilan data pembayaran

## KESIMPULAN
Berdasarkan  uraian  pada  bab  –  bab sebelumnya, dapat diambil kesimpulannya sebagai penutup atau akhir dari pembahasan tugas akhir sebagai berikut :
1. Dengan  adanya  sistem  informasi dapat membantu pekerjaan bendahara dan  tata  usaha  dalam  membuat laporan dan rekapitulasi hasil pembayaran SPP.
2. Dengan  adanya  sistem  informasi pembayaran  SPP  siswa  /  wali  siswa dapat  mengetahui  status  pembayaran SPP  nya.  Tanpa  harus  datang  ke sekolah.

## SARAN
Berdasarkan  dari  uraian  diatas penulis dapat memberikan beberapa saran, diantaranya :
1. Sistem  informasi  pembayaran  SPP berbasis  web  ini  masih  perlu  di tingkatkan,  agar  tampilan  nya  lebih menarik  sesuai  dengan  keinginan pihak sekolah.
2. Perlu dievaluasi secara berkala terhadap prosedur pembayaran SPP.

## REFERENSI
Amri, I., & Aji, A. P. (2018). Rancang Bangun Sistem Afile:///C:/Users/sempak/Downloads/90
5-2846-1-PB.pdfplikasi Penerimaan Siswa Baru Menggunakan Metode Agile Di  SMK  Modellink  Kabupaten  Sorong. Jurnal Teknik Informasi dan Keamanan , 4 (2), 51–57. http://ejournal.um- sorong.ac.id/index.php/insect Fatoni,  A.,  &  Dwi,  D.  (2016).  Rancang Bangun  Sistem  Extreme  Programming Sebagai Metodologi Pengembangan Sistem. Prosisko , 3 (1),  1–4.  http://e- jurnal.lppmunsera.org/index.php/PROSI SKO/article/view/116
Ferdiansyah,  D.  (2018).  Penerapan  Konsep Model  View  Controller  Pada  Rancang Bangun Sistem Informasi Klinik Kesehatan Berbasis Web. Jurnal Kajian Ilmiah , 18 (2), 195. https://doi.org/10.31599/jki.v18i2.289
Fitriawati, N., Herdiansah, A., & Gunawan, A.
(2019).  Sistem  Informasi  Program Keluarga Harapan Studi Kasus
Kecamatan  Kosambi  Tangerang. Jurnal Teknik  Informatika  (JIKA)  Universitas Muhammadiyah Tangerang , 3 (2), 21–26.
Herdiansah,  A.  (2020).  Sistem  Pendukung Keputusan  Referensi  Pemilihan  Tujuan Jurusan  teknik  Di  Perguruan. Jurnal MATRIK , 19 (2), 223–234.
Herdiansah, A., Handayani, N., & Kurniawan, A.  (2019).  Development  of  Decision Support Systems Selection of Employee Acceptance  Using  Weighted  Product Method. Journal  of  Information  System and Informatics , 1 (2), 87–97
Ilmi,  M.,  Said,  D.  L.,  &  Hadi,  A.  (2016).
Perancangan Sistem Informasi Pernikahan dan Status Pernikahan Kantor  Urusan  Agama  Kecamatan
Canduang  Agam  Berbasis  Web  Dengan Framework Codeigniter. Jurnal Vokasional Teknik Elektronika & Informatika , 4 (1), 82–91.
IpanRipai,  M.  K.  (2017).  Rancangan  Bangun Media Pembelajaran Menggunakan Android Untuk Mata Kuliah Pemrograman  Internet  Menggunakan Magazine  App  Marker. Jurnal  ICT
learning , 3 (1), 1–6.
Parlika, R., Nisaa’, T. A., Ningrum, S. M., & Haque,  B.  A.  (2020). Studi  Literatur Kekurangan  dan  Kelebihan  Pengujian Black Box . 10.
Prasetiyo  Kanji.  (2018). Perancangan  DFD Berdasarkan Hasil Pengukuran Kualitas Website  Melalui  Metode  Webqual4.0
Pada  jd.id  |  Jurnal  RESTI  (Rekayasa Sistem dan Teknologi Informasi) .
Pratama,  I.  A.,  &  Purwadiyanta,  S.  (2018).
Sistem  Informasi  Geografis  Lokasi Perumahan  Di  Kabupaten  Tasikmalaya
Berbasis  Web. Jurnal  Manajemen  Dan Teknik  Informatika , 02 (01),  51–60. http://jurnal.stmik- dci.ac.id/index.php/jumantaka/article/vie w/350/420
Rochman,  A.,  Sidik,  A.,  &  Nazahah,  N.
(2018).  Perancangan  Sistem  Informasi Administrasi  Pembayaran  SPP  Siswa Berbasis  Web  di  SMK  Al-Amanah. Jurnal  Sisfotek  Global , 8 (1),  51–56. https://doi.org/10.1002/ijc.23959
Santoso,  K.  I.,  Sediyono,  E.,  &  Suhartono.
(2013).  Studi  Pengamanan  Login  Pada Sistem Informasi Akademik Menggunakan  Otentifikasi  One  Time Password  Berbasisis  SMS  dengan  Hash
MD5. Jurnal Sistem Informasi Bisnis, 1 , 7.
Taufiq, R. (2013). Sistem Informasi Manajemen. Yogyakarta: Graha Ilmu.