Abstract: Dwi Warna Vocational School is an institution engaged in education, at Dwiwarna Vocational school the
Education Development Contribution (SPP) system still uses a manual system where the payment process is made
directly by students by queuing and then handing over the Education Development Contribution Payment card to the
treasurer so that they experience difficulties in handling queues and financial reports that are currently presented are
inadequate, causing difficulties in calculating data and preparing reports on the payment of Education Development
Contributions. The1method1that1will be used in this1research1is Extreme1Programming (XP), which is known as the
technical how to method1or how a1technical team1develops1software efficiently1through various1principles
and1practical software development1techniques. XP is the1basis for how1the team1works on a daily basis. In addition
to Extreme Programming, the authors describe system flow with flowcharts and software flow using the Unified
Modeling Language (UML). In1such a way that it is easier1to learn and understand, UML offers a blueprint diagram
that will be used for1Use Case1Diagrams, Activity Diagrams, and1Class Diagrams as1well as Entity1Relationship
Diagrams as relationships between tables. based on the problems from the description above which is the background
for conducting research entitled designing a web-based tuition payment information system. With the development of
this payment information system, it is hoped that it will make it easier to search payment data and make payment
transactions using a computerized system, with the development of this payment information system it is hoped that
students can get information regarding payments for Education Development Contributions at Dwi Warna Vocational
High School along with online transactions so that assist in the payment process that is easily accessible. And this
information system is designed and developed using the programming language PHP, HTML, CSS using the MySQL
Database.
25
JINTEKS (Jurnal Informatika Teknologi dan Sains) ISSN 2686-3359 (Online)
Vol. 5 No. 1, Februari 2023, hlm. 25 – 31
secara langsung oleh1siswa dengan cara siswa Sistem1administrasi pembayaran SPP1siswa yang
datang ke ruang tata usaha dan menyerahkan uang berjalan saat ini masih1dilakukan secara manual
serta kartu pembayaran Sumbangan Pembinaan dari segi pencatatan data dengan1menggunakan
Pendidikan (SPP) kepada bendahara dan bendahara sebuah buku besar. Kendala,yang,terdapat dalam
memberikan cap stempel dikartu pembayarannya sistem berjalan1saat ini mengenai administrasi
sebagai tanda bukti bahwa sudah melakukan Pembayaran SPP yang sering menyita1waktu lama
Pembayaran, sehingga menyita banyak waktu dikala ketika proses antrian Pembayaran disetiap bulannya.
menangani antrian banyak siswa yang melakukan Dan1terkadang dapat mengakibatkan salah
Pembayaran. Oleh1karena1itu, perlu dilakukan perhitungan data dalam pembuatan laporan. Hasil
penelitian dan pengembangan sistem pembayaran laporan1disajiakan kurang optimal karena1masih
SPP baru1yang akan meningkatkan akurasi, disimpan didalam sebuah buku1dan bagian
kecepatan, dan memberikan pelayanan administrasi bendahara harus mengurutkan satu1persatu dari
pembayaran SPP1secara1efektif dan efisien. seluruh data yang1ada sampai1data yang diinginkan
Sumbangan1pembinaan Pendidikan ialah ditemukan1saat pembuatan1hasil1laporan yang
sumbangan,pembinaan,pendidikan,yang dibayarkan akan diberikan1kepada pimpinan sekolah1[4].
oleh siswa1di1sekolah-sekolah. Tujuan Sumbangan Pada penelitian berikutnya yang dilakukan
Pembinaan Pendidikan agar sekolah dapat oleh (Triono, Nunung & Dheanisa, 2022) dalam
membiayai 1keperluan penyelenggaraan,pendidikan jurnalnya yang1berjudul “Sistem Pelayanan
sehingga,kegiatan belajar mengajar,dapat berjalan Pembayaran1Administrasi1Berbasis1Web Pada
dengan baik. Sumbangan Pembinaan Pendidikan SMK Assalam Curug” menguraikan bahwa
pada umunya dibayarkan1setiap1bulan oleh,siswa Pembayaran SPP masih1sering mengalami kendala
[1]. seperti pendataan1serta proses informasi
Pembayaran Sumbangan Pembinaan Pembayaran yang dilakukan secara1manual dimana
Pendidikan (SPP)1yaitu1salah satu kegiatan usaha laporan rekaman1masih menggunakan buku besar
yang1membantu dalam1mengatur kegiatan belajar sehingga membuat pekerjaan menjadi berantakan
mengajar di sekolah1agar dapat1berjalan dengan dan menghabiskan banyak waktu1serta tenaga
lancar, dengan1adanya kegiatan pembayaran bagian keuangan dalam pencarian data siswa serta
Sumbangan Pembinaan Pendidikan,(SPP) atau pengarsipannya1[5].
dana,iuran tersebut. Dalam proses,pendataan siswa Berdasarkan dua penelitian diatas memiliki
serta administrasi keuangan siswa1yang benar1ialah permasalah yang sama yakni Pembayaran yang
merupakan peranan1sangat penting untuk sekolah dilakukan masih secara manual ini dapat
dan siswa. Suatu1informasi dibutuhkan untuk disimpulkan bahwa sistem informasi ini belum
pembayaran Dana Sumbangan Pembangunan (DSP) terealisasikan ke sekolah-sekolah yang ada
beserta iuran pembayaran bulanan siswa, dipelosok
informasi1ini1berpengaruh dalam kelancaran Berdasarkan permasalahan tersebut,
proses belajar dan memaksimalkan fasilitas belajar penulis melakukan sebuah penelitian mengenai
mengajar yang ada disekolah [2]. bagaimana perancangan sistem1informasi berbasis
Pembayaran SPP diterapkan sesuai dengan website yang1terintegrasi sehingga proses
kebijakan masing-masing sekolah, dapat diatur transaksi1yang1ada1di SMK Dwi Warna
dengan membayar per bulan, triwulanan atau menjadi1lebih efisien dan1efektif dalam program
setengah tahunan. Berdasarkan Permendikbud pelayanan pembayaran. Dari sistem yang sedang
Nomor 75 Tahun 2016 pasal 10 ayat (1) dijelaskan berjalan, penulis berencana untuk membuat suatu
bahwa Komite Sekolah melakukan penggalangan sistem1informasi pembayaran SPP secara1online
yang bertujuan untuk mempermudah proses
dana dan sumber daya pendidikan lainnya untuk
transaksi pembayaran, sehingga para siswa tidak
menjalankan fungsinya dalam memberikan
akan menyita banyak1waktu untuk melakukan
dukungan terhadap personel, sarana dan prasarana, pembayaran SPP1ataupun1mencari informasi
serta pengawasan pendidikan. Kemudian dalam mengenai tunggakan1SPP yang tersedia melalui
pasal 10 ayat (2) disebutkan bahwa penghimpunan web.
dana dan sumber daya pendidikan lainnya
sebagaimana dimaksud pada ayat (1) berupa TINJAUAN PUSTAKA
bantuan dan atau sumbangan, bukan iuran[3]. Sistem1Informasi1
Penelitian sebelumnya yang dilakukan oleh Hubungan keterkaitan sistem dan
(Abdur, Achmad & Nada,12018)1dalam jurnalnya informasi menjadikan satu kesatuan yang memiliki
yang berjudul “Perancangan Sistem1Informasi makna1tersendiri. Sistem informasi merupakan,
Administrasi1Pembayaran1SPP Siswa Berbasis suatu,1kombinasi yang1terstruktur antara manusia
Web Di SMK AL-Amanah” menguraikan bahwa dan jaringan komunikasi yang saling bekerja1sama
26
JINTEKS (Jurnal Informatika Teknologi dan Sains) ISSN 2686-3359 (Online)
Vol. 5 No. 1, Februari 2023, hlm. 25 – 31
dan1berhubungan untuk mengumpulkan dan sistem informasi tersebut masih layak dipakai atau
menyebarkan informasi kedalam,sebuah organisasi tidak, masih manual atau komputerisasi. Jika sistem
ataupun,perusahaan [6]. informasinya tidak layak [13].
Sistem informasi merupakan sistem yang
disusun secara1sistematik dan teratur dari lagi maka perlu adanya perubahan dalam
jaringan1aliran1informasi yang menghubungkan pengolahan datanya sehingga menghasilkan
setiap bagian dari suatu sistem, sehingga informasi yang cepat dan akurat serta keputusan
memungkinkan diadakannya komunikasi antar yang lebih baik.
bagian atau satuan fungsional1[7]. Sistem yaitu
suatu1unsur dalam kerja yang saling berhubungan METODE
dalam melakukan kegiatan demi mencapai sasaran Metode1penelitian yang1digunakan yaitu
yang dituju. Oleh karena itu, bisa dikatakan bahwa metode1Kualitatif melalui pendekatan Deskriptif.
sistem ialah komponen dari suatu jaringan kerja Metode Kualitatif melalui pendekatan deskriptif
yang mempunyai tujuan [8]. terdiri dari menganalisa proses kerja yang ada,
membuat deskripsi tentang suatu keadaan secara
Perancangan objektif, dan meringkas bermacam kondisi serta
Perancangan yaitu sebuah proses rencana situasi untuk memecahkan masalah berdasarkan
untuk menjelaskan perencanaan yang akan Dibuat berbagai data yang akan dikumpulkan dalam bentuk
menggunakan teknik yang bervariasi serta detail wawancara atau observasi terhadap kasus yang teliti
perancangan yang dibuat dan keterbatasan yang di lapangan. Adapun teknik-teknik pengumpulan
nantinya akan di lakukan dalam proses pengerjaan. data untuk informasi yang dibutuhkan ialah
Proses perancangan memiliki tiga unsur penting wawancara,1observasi,1dan studi1pustaka.
yaitu mengetahui teknik perancanagan apa yang
Model Pengembangan Sistem
digunakan, kebutuhan dan kendala yang
memungkinkan terjadi dalam pembuatan
perancangan [9].
Unified1Modelling1Language (UML)
Unified Modelling Language1(UML) yaitu
alat bantu dalam1pengembangan sistem berorientasi
objek. UML menyediakan bahasa permodelan yang
mudah dimengerti dan dilengkapi suatu1mekanisme
efektif untuk membuat1pengembangan sistem
dengan baik [4].
Gambar 1. Metode Extreme1Programming
Entity Relationship Diagram (ERD)
Extreme1Programming1(XP) dikenal
ERD adalah bentuk paling awal1dalam
dengan1metode2technical how to1atau bagaimana
melakukan1perancangan basis1data relasional. ERD
suatu tim1teknis mengembangkan perangkat
merupakan1singkatan dari Entity Relationship
lunak1secara1efisien melalui berbagai prinsip dan
Diagram, dikembangkan berdasarkan teori
teknik praktis pengembangan perangkat lunak.
himpunan dalam bidang matematika. ERD
XP1menjadi dasar1bagaimana tim bekerja sehari-
digunakan1untuk pemodelan1basis1data relasional.
hari.1Proses1extreme programming ada 4 tahap
Model1ERD1terdiri1dari beberapa,komponen dasar
yaitu: [14]
yaitu Entitas, Atribut,1Relasi dan Tingkat
1. Planning. yaitu Tahap2planning1dimulai
Hubungan [10].
dengan membuat user stories yang
menggambarkan1output,1fitur, dan fungsi-
Aliran1Sistem1Informasi1 fungsi,dari software1yang akan dibuat.
Menurut Jogiyanto Aliran sistem informasi
User stories1tersebut kemudian diberikan
merupakan sebuah bagan untuk menggambarkan bobot seperti,prioritas dan1dikelompokkan
sebuah arus1kerja dari awal sampai akhir
untuk selanjutnya dilakukan proses
pengerjaan program tersebut [11]. Aliran sistem delivery1secara1incremental.
informasi merupakan suatu alat bantu sistem yang
2. Design. pada Extreme Programming
digunakan1untuk merancang sebuah1sistem dari mengikuti prinsip Keep It Simple (KIS).
awal sampai akhir perancangan [12]. Zefriyenni dan
Untuk design yang sulit, Extreme
Santoso (2015) Aliran sistem informasi sangat Programming akan menggunakan Spike
berguna untuk mengetahui permasalahan yang ada
Solution1dimana pembuatan design dibuat
pada suatu sistem. Dari sini dapat diketahui apakah
27
JINTEKS (Jurnal Informatika Teknologi dan Sains) ISSN 2686-3359 (Online)
Vol. 5 No. 1, Februari 2023, hlm. 25 – 31
Kartu SPP
yang sudah isi
Planning
Penulis menjelaskan kebutuhan sistem
Mengisi
Data
Pembayar
Data
Pembayaran
pembayaran SPP (System Requirements) pada poin
an
A ini, Penulis memberikan ringkasan semua
Kartu SPP kebutuhan admin dan pengguna untuk sistem
informasi pembayaran SPP berikut:
Tanda Tangan pada
Karu SPP dan
diberi Stempel
a. Kebutuhan User
Kartu SPP Kartu SPP
User dapat melakukan login, melakukan
yang sudah di yang sudah di
Stempel Stempel pembayaran SPP, melihat tagihan SPP, melihat
riwayat transaksi, melihat notifikasi pembayaran,
Selesai
mencetak bukti pembayaran, dan logout.
Berdasarkan kebutuhan tersebut dapat digambarkan
kedalam Use1Case1Diagram berikut:
Gambar,2.,Aliran Sistem,Informasi,Yang,Berjalan
28
JINTEKS (Jurnal Informatika Teknologi dan Sains) ISSN 2686-3359 (Online)
Vol. 5 No. 1, Februari 2023, hlm. 25 – 31
b. Class Diagram1
b. Kebutuhan Admin
Admin memiliki4akses untuk masuk,
mengelola2data SPP, Mengelola data2siswa,
Mengelola transaksi masuk, Mengelola hak akses,
mencetak laporan, dan keluar. Berdasarkan
kebutuhan tersebut dapat digambarkan kedalam
Use1Case1Diagram1berikut: Gambar 7. Class1Diagram
c. Entity1Relationship1Diagram1
Id_admin1
tb_admin menambah1
email1
password1 Id_user1
email1 tb_user
password1
Mengelola1
Memiliki1
Id_spp
tb_spp
bulan
tahun
Jatuh_tempo
Memiliki
Design
a. Diagram,Aktivity tb_pembayaran
1
Bayar
M
tb_siswa
Id_pembayaran Id_siswa
Id_spp Nama_siswa
Id_siswa nis
tangggal_pembaya
kelas
ran
Bulan_bayar jurusan
Tahun_bayar Tahun_ajaran
Jumlah_bayar Jenis_kelamin
Metode_bayar alamat
d. User Interface
29
JINTEKS (Jurnal Informatika Teknologi dan Sains) ISSN 2686-3359 (Online)
Vol. 5 No. 1, Februari 2023, hlm. 25 – 31
Testing
Pada1tahap terakhir2ini adalah1pengujian
yang dimana2pengujian program dengan cara
melihat1kinerja aplikasinya,tanpa perlu,mengetahui
susunan2atau struktur2program [15]. pengujian
sistem yang nantinya akan dibuat dengan
menggunakan balckbox testing sebagai berikut.
Tabel,1.,Blackbox,Testing
No Skenario1Pengujian Test1Case Hasil1yang1diharapkan Hasil1Pengujian .Kesimpulan1
1. Hanya1mengisi1data Username1dan Jika berhasil, maka akan Sesuai Normal
username1dan password1diisi1 masuk ke menu
mengosongkan dashboard
data1password,
lalu1langsung enterr untuk
masuk ke dalam program
2. Menginput1data Upload1data1di menu Jika1berhasil, Sesuai Normal
siswaayang1salah, lalu button upload data maka1sistem1akan
langsung1enter1untuk1masuk menampilkan menu isian
ke1dalam program1 data siswa
3. Menghapus data Siswa atau Hapus1data yang ada di Jikal1berhasil maka Sesuai Normal
admin1yang ada di menu1data siswa data1yang ada di data
dalam1data1grid dengan menekan grid akan hilang1
tombol1delete
4. Menambahkan Admin1atau Tambah1admin atau Jika berhasil1maka Sesuai Normal
User1baru didalam user1baru di menu admin atau user ada pada
programm tambah admin dengan data1grid1admin
menekan atau1user1
tombol1tambah
adminnn
5. Melakukan Pembayaran User melakukan Jika berhasil maka akan Sesuai Normal
dengan memasukan data Pembayaran dengan dapat notifikasi dan alert
yang benar menekan menu sukses
30
JINTEKS (Jurnal Informatika Teknologi dan Sains) ISSN 2686-3359 (Online)
Vol. 5 No. 1, Februari 2023, hlm. 25 – 31
Pembayaran dan
measukan semua data
yang benar jika sudah
tekan tombol bayar
6. Logout1program1 Admin atau Jika berhasil logout1 Sesuai Normal
user,melakukanm maka1akan diredirect1
logout1dengan ke1halalman1login
menekan,tombol1logout
31