Laporan Pembayaran SPP SD Muhammadiyah Iv Pekanbaru

LAPORAN
RANCANG BANGUN SISTEM PEMBAYARAN UANG

SUMBANGAN PEMBINAAN PENDIDIKAN (SPP)
(Studi Kasus : SD Muhammadiyah IV Pekanbaru )
UIN SUSKA RIAU
DISUSUN OLEH :
1. FAHRIZALDI HUSTIANTO 11751101220

2. RIZAL SIBURIAN 11751100044
3. SITI QOMARIAH 11751202255
4. WAHYU MAHESA 11751101286
Dosen Pengampu : Pizaini, ST

Dosen Pengampu : Muhammad Isryad ST, MT
TEKNIK INFORMATIKA
FAKULTAS SAINS DAN TEKNOLOGI
UNIVERSITAS ISLAM NEGERI SULTAN SYARIF KASIM RIAU
PEKANBARU
2019
KATA PENGANTAR
Assalamu’alaikum wa rahmatullahi wa barakaatuh
Alhamdulillahi robbil’alamin, puji syukur penulis ucapkan kehadirat Allah

SWT karena penulis dapat menyelesaikan Laporan yang berjudul “Rancang
Bangun Sistem Pembayaran Uang Sumbangan Pembinaan Pendidikan”. Laporan
ini disusun untuk memenuhi salah satu syarat kelulusan dari mata kuliah
Rekayasa Perangkat Lunak Berorientasi Objek, Sistem Informasi dan Desain
Interaksi dan Antarmuka. Dalam penyusunan laporan ini, penulis mendapatkan
banyak do’a, dukungan, bimbingan, arahan, serta masukan dari berbagai pihak.
Oleh karena itu, penulis ingin mengucapkan terimakasih kepada :
1. Bapak Prof. Dr. H. Akhmad Mujahidin, M.Ag, selaku Rektor Universitas

Islam Negeri Sultan Syarif Kasim Riau.
2. Bapak Dr. Ahmad Darmawi., M.Ag, selaku Dekan Fakultas Sains dan
Teknologi Universitas Islam Negeri Sultan Syarif Kasim Riau.
3. Ibu Dr. Elin Haerani, S.T., M.Kom, selaku Kepala Jurusan Teknik
Informatika Fakultas Sains dan Teknologi Universitas Islam Negeri Sultan
Syarif Kasim Riau.
4. Bapak Pizaini, S.T., Ibu Okfalisa S.T.,M.Sc, Ph.D, M.Kom, dan Bapak
Muhammad Irsyad, S.T., M.T, selaku Dosen mata kuliah Rekayasa
Perangkat Lunak Berorientasi Objek, Sistem Informasi dan Desain Interaksi
dan Antarmuka Jurusan Teknik Informatika Fakultas Sains dan Teknologi
Universitas Islam Negeri Sultan Syarif Kasim Riau.
5. Teristimewa untuk keluarga dan teman-teman seperjuangan yang selalu

memberikan do’a, motivasi, semangat sekaligus sebagai obat penenang bagi
penulis sehingga penulis mampu menghadapi berbagai macam masalah
hingga menyelesaikan laporan ini.
i
Penulis menyadari laporan ini masih jauh dari kesempurnaan. Oleh karena
itu, penulis mengharapkan kritik dan saran yang membangun dari para pembaca
untuk kesempurnaan laporan ini. Kritik dan saran dapat dikirimkan ke email
penulis yaitu kucrut1306@gmail.com. Semoga laporan ini dapat bermanfaat bagi
penulis khususnya dan pembaca umumnya. Akhir kata penulis ucapkan
terimakasih dan selamat membaca.
Wassalamu ‘alaikum wa rahmatullahi wa barakaatuh
Pekanbaru, 01 Desember 2019
Penulis
ii
DAFTAR ISI
KATA PENGANTAR..............................................................................................i
DAFTAR ISI..........................................................................................................iii
DAFTAR GAMBAR.............................................................................................vi
DAFTAR TABEL..................................................................................................ix
BAB I PENDAHULUAN.......................................................................................1
1.1 Latar Belakang..........................................................................................................1
1.2 Maksud dan Tujuan..................................................................................................2
1.3 Sasaran.....................................................................................................................2
1.4 Organisasi.................................................................................................................2
1.5 Ruang Lingkup..........................................................................................................2
1.5.1 Lingkup Kegiatan...............................................................................................2
1.5.2 Lingkup Aplikasi.................................................................................................3
1.5.3 Keluaran............................................................................................................3
1.5.4 Jangka Waktu....................................................................................................3
1.5.5 Personil..............................................................................................................3
1.5.6 Jadwal Pelaksanaan...........................................................................................4
1.5.7 Rincian Biaya.....................................................................................................4
BAB II PROFIL INSTANSI..................................................................................6

2.1 Sejarah Instansi........................................................................................................6
2.2 Visi dan Misi.............................................................................................................6
2.2.1 Visi.....................................................................................................................6
2.2.2 Misi....................................................................................................................7
2.3 Struktur Organisasi...................................................................................................7
BAB III LANDASAN TEORI...............................................................................8

3.1 Defenisi Sistem Informasi.........................................................................................8
3.2 Defenisi PHP.............................................................................................................9
3.3 Defenisi MySQL........................................................................................................9
iii
3.4 Defenisi XAMPP........................................................................................................9
3.5 Defenisi Unified Modelling Language (UML)..........................................................10
BAB IV ANALISA DAN PERENCANAAN......................................................12

4.1 Model Pengembangan Sistem................................................................................12
4.2 Analisa Sistem Lama...............................................................................................13
4.3 Analisa Sistem Baru................................................................................................14
4.4 Unified Modeling Language (UML).........................................................................15
4.4.1 Use Case Diagram...........................................................................................15
4.4.2 Use Case Spesification.....................................................................................16
4.4.3 Sequence Diagram...........................................................................................26
4.4.4 Class Diagram..................................................................................................35
4.4.5 Activity Diagram..............................................................................................36
4.5 Perancangan Interface............................................................................................44
4.5.1 Low Fidelity......................................................................................................44
4.5.2 High Fidelity.....................................................................................................56
4.6 Navigasi..................................................................................................................67
4.7 Tipograf.................................................................................................................68
4.8 Warna.....................................................................................................................68
4.9 Gambar, Icon dan Logo...........................................................................................70
BAB V IMPLEMENTASI...................................................................................73
5.1 Implementasi..........................................................................................................73
5.2 Lingkungan Implementasi.......................................................................................73
5.3 Implementasi Sistem..............................................................................................74
5.3.1 Halaman Login.................................................................................................74
5.3.2 Halaman Dashboard Bendahara......................................................................74
5.3.3 Halaman Dashboard Siswa..............................................................................75
5.3.4 Tampilan Halaman Data Siswa.........................................................................75
5.3.5 Tampilan Form Tambah Data Siswa.................................................................76
5.3.6 Tampilan Form Ubah Data Siswa.....................................................................76
iv
5.3.7 Halaman Data Pembayaran.............................................................................77
5.3.8 Tampilan Form Input Data Pembayaran..........................................................77
5.3.9 Tampilan Konfgurasi Pembayaran...................................................................78
5.3.10 Tampilan Cetak Bukti Pembayaran................................................................78
5.3.11 Tampilan Form Cetak Bukti Pembayaran.......................................................79
5.3.12 Tampilan Form Cetak Laporan Pembayaran..................................................79
5.3.13 Tampilan Laporan Pembayaran......................................................................80
5.3.14 Tampilan Halaman Pengaturan......................................................................80
5.3.15 Tampilan Tambah Data Nominal Pembayaran...............................................81
5.3.16 Tampilan Ubah Data Nominal Pembayaran...................................................81
5.3.17 Halaman Data Pembayaran Siswa..................................................................82
5.3.18 Halaman Profl Bendahara.............................................................................82
5.3.19 Halaman Profl Siswa.....................................................................................83
5.3.20 Tampilan Form Ubah Password Bendahara..................................................83
5.3.21 Tampilan Form Ubah Profl Bendahara.........................................................84
5.3.22 Tampilan Form Ubah Password Siswa...........................................................84
BAB VI PENUTUP..............................................................................................85
6.1 Kesimpulan.............................................................................................................85
6.2 Saran......................................................................................................................85
DAFTAR GAMBAR
Gambar 2.1 Struktur Organisasi Instansi............................................................................7
v
Gambar 4.1 Kerangka Kerja Model RAD........................................................................12
Gambar 4.2 Flowchart Sistem Lama Pembayaran Uang SPP..........................................13
Gambar 4.3 Flowchart Sistem Baru Pembayaran Uang SPP............................................14
Gambar 4.4 Use Case Diagram Sistem Pembayaran Uang SPP.......................................15
Gambar 4.5 Sequence Diagram Login............................................................................26
Gambar 4.6 Sequence Diagram Menambah Data Siswa..................................................27
Gambar 4.7 Sequence diagram mengubah data siswa......................................................28
Gambar 4.8 Sequence Diagram Menghapus Data Siswa.................................................28
Gambar 4.9 Sequence Diagram Menginput Data Pembayaran SPP.................................29
Gambar 4.10 Sequence Diagram Mencetak Bukti Pembayaran SPP...............................30
Gambar 4.11 Sequence Diagram Mencetak Bukti Pembayaran SPP................................30
Gambar 4.12 Sequence Diagram Mencetak Laporan Pembayaran SPP...........................31
Gambar 4.13 Gambar Sequence Menambah Nominal Pembayaran.................................31
Gambar 4.14 Sequence Diagram Mengubah Nominal Pembayaran.................................32
Gambar 4.15 Sequence Diagram Mengubah Nominal Pembayaran.................................33
Gambar 4.16 Sequence Diagram Mengubah Profil..........................................................33
Gambar 4.17 Sequence Diagram Mengubah Username Dan Password Bendahara........34
Gambar 4.18 Sequence Diagram Mengubah Username Dan Password Siswa.................35
Gambar 4.19 Class Diagram System Pembayaran Uang Spp..........................................36
Gambar 4.20 Activity Diagram Login Bendahara............................................................37
Gambar 4.21 Activity Diagram Login Siswa....................................................................37
Gambar 4.22 Activity Diagram Menambah Data Siswa...................................................38
Gambar 4.23 Activity Diagram Mengubah Data Siswa....................................................38
Gambar 4.24 Activity Diagram Menghapus Data Siswa..................................................39
Gambar 4.25 Activity Diagram Menginput Data Pembayaran SPP..................................39
Gambar 4.26 Activity Diagram Cetak Bukti Pembayaran SPP untuk Bendahara.............40
Gambar 4.27 Activity Diagram Cetak Bukti Pembayaran SPP untuk Siswa....................40
Gambar 4.28 Activity Diagram Cetak Laporan Pembayaran SPP....................................41
Gambar 4.29 Activity Diagram Menambah Nominal Pembayaran...................................41
vi
Gambar 4.30 Activity Diagram Mengubah Nominal Pembayaran....................................42
Gambar 4.31 Activity Diagram Menghapus Nominal Pembayaran..................................42
Gambar 4.32 Activity Diagram Mengubah Profil.............................................................43
Gambar 4.33 Activity Diagram Mengubah Username dan Password..............................43
Gambar 4.34 Activity Diagram Mengubah Username dan Password Siswa....................44
Gambar 4.35 Halaman Login...........................................................................................45
Gambar 4.36 Halaman Dashboard Bendahara.................................................................45
Gambar 4.37 Halaman Dashboard Siswa.........................................................................46
Gambar 4.38 Tampilan Halaman Data Siswa...................................................................46
Gambar 4.39 Tampilan Form Tambah Data Siswa...........................................................47
Gambar 4.40 Tampilan Form Edit Data Siswa.................................................................47
Gambar 4.41 Tampilan Halaman Data Pembayaran SPP.................................................48
Gambar 4.42 Tampilan Input Data Pembayaran Spp........................................................48
Gambar 4.43 Tampilan Konfigurasi Pembayaran.............................................................49
Gambar 4.44 Tampilan Cetak Bukti Pembayaran Spp......................................................49
Gambar 4.45 Tampilan Form Bukti Pembayaran SPP......................................................50
Gambar 4.46 Tampilan Form Cetak Laporan Pembayaran SPP.......................................50
Gambar 4.47 Tampilan Laporan Pembayaran SPP...........................................................51
Gambar 4.48 Tampilan Halaman Pengaturan...................................................................51
Gambar 4.49 Tampilan Form Tambah Data Nominal Pembayaran..................................52
Gambar 4.50 Tampilan Form Ubah Data Nominal Pembayaran......................................52
Gambar 4.51 Tampilan Halaman Data Pembayaran Siswa...............................................53
Gambar 4.52 Tampilan Halaman Profil Bendahara..........................................................53
Gambar 4.53 Tampilan Halaman Profil Siswa.................................................................54
Gambar 4.54 Tampilan Form Ubah Password Bendahara................................................54
Gambar 4.55 Tampilan Form Ubah Profil Bendahara......................................................55
Gambar 4.56 Tampilan Form Ubah Password Siswa.......................................................55
Gambar 4.57 Halaman Login...........................................................................................56
Gambar 4.58 Halaman Dashboard Bendahara.................................................................56
vii
Gambar 4.59 Halaman Dashboard Siswa.........................................................................57
Gambar 4.60 Tampilan Halaman Data Siswa...................................................................57
Gambar 4.61 Tampilan Form Tambah Data Siswa...........................................................58
Gambar 4.62 Tampilan Form Edit Data Siswa.................................................................58
Gambar 4.63 Tampilan Halaman Data Pembayaran SPP.................................................59
Gambar 4.64 Tampilan Input Data Pembayaran SPP.......................................................59
Gambar 4.65 Tampilan Konfigurasi Pembayaran.............................................................60
Gambar 4.66 Tampilan Cetak Bukti Pembayaran Spp......................................................60
Gambar 4.67 Tampilan Form Bukti Pembayaran SPP......................................................61
Gambar 4.68 Tampilan Form Cetak Laporan Pembayaran SPP.......................................61
Gambar 4.69 Tampilan Laporan Pembayaran SPP...........................................................62
Gambar 4.71 Tampilan Form Tambah Data Nominal Pembayaran..................................63
Gambar 4.72 Tampilan Form Ubah Data Nominal Pembayaran......................................63
Gambar 4.74 Tampilan Halaman Profil Bendahara..........................................................64
Gambar 4.75 Tampilan Halaman Profil Siswa.................................................................65
Gambar 5.1 Halaman Login.............................................................................................74
Gambar 5.2 Halaman Dashboard Bendahara...................................................................74
Gambar 5.3 Halaman Dashboard Siswa..........................................................................75
Gambar 5.4 Tampilan Halaman Data Siswa.....................................................................75
Gambar 5.5 Tampilan Form Tambah Data Siswa.............................................................76
Gambar 5.6 Tampilan Form Ubah Data Siswa.................................................................76
Gambar 5.7 Tampilan Halaman Data Pembayaran...........................................................77
Gambar 5.8 Tampilan Form Input Data Pembayaran.......................................................77
Gambar 5.9 Tampilan Konfigurasi Pembayaran...............................................................78
viii
Gambar 5.10 Tampilan Cetak Bukti Pembayaran.............................................................78
Gambar 5.11 Tampilan Form Cetak Bukti Pembayaran...................................................79
Gambar 5.12 Tampilan Form Cetak Laporan Pembayaran...............................................79
Gambar 5.13 Tampilan Form Laporan Pembayaran.........................................................80
Gambar 5.15 Tampilan Tambah Data Nominal Pembayaran............................................81
Gambar 5.16 Tampilan Ubah Data Nominal Pembayaran................................................81
Gambar 5.18 Halaman Profil Bendahara..........................................................................82
Gambar 5.19 Halaman Profil Siswa.................................................................................83
ix
DAFTAR TABEL
Table 4.1 Proses Login.....................................................................................................16
Table 4.2 Proses Menambah Data Siswa..........................................................................17
Table 4.3 Proses Mengubah Data Siswa...........................................................................18
Table 4.4 Proses Menghapus Data Siswa.........................................................................18
Table 4.5 Proses Menginput Data Pembayaran SPP.........................................................19
Table 4.6 Proses Mencetak Bukti Pembayaran SPP.........................................................20
Table 4.7 Proses Mencetak Laporan Pembayaran SPP.....................................................21
Table 4.8 Proses Menambah Nominal Pembayaran.........................................................22
Table 4.9 Proses Mengubah Nominal Pembayaran..........................................................23
Table 4.10 Proses Menghapus Nominal Pembayaran.......................................................23
Table 4.11 Proses Mengubah Profil Bendahara................................................................24
Table 4.12 Proses Mengubah Username dan Password...................................................25
Table 4.13 Gambar Yang Terdapat Pada Sistem...............................................................70
Table 4.14 Icon Yang Terdapat Pada Sistem.....................................................................71
Table 4.15 Logo Yang Terdapat Pada Sistem...................................................................72
ix
BAB I
PENDAHULUAN
I.1 Latar Belakang
Sekolah Dasar Muhammadiyah IV dalam melakukan berbagai kegiatan
tidak terlepas dari pembayaran uang Sumbangan Pembinaan Pendidikan (SPP)
seperti sebagaimana yang diketahui bahwa untuk sekolah swasta pasti akan
memiliki Sumbangan Pembinaan Pendidikan yang wajib dibayar oleh siswa/i nya
setiap bulan. Dalam pembayaran Sumbangan Pembinaan Pendidikan (SPP) di
Sekolah yang kebanyakan masih bersifat manual.
Setelah melakukan beberapa sesi tanya jawab dengan wakil kepala sekolah
yang penulis temui, penulis akhirnya mengetahui bahwa pembayaran SPP di
sekolah tersebut masih bersifat manual. Dimana setiap siswa/i diberikan kartu
pembayaran SPP yang harus dibawa setiap ingin membayar, dan langsung
diberikan kepada bendahara sekolah. Salah satu kendala yang sering terjadi adalah
ketika siswa kehilangan kartu pembayaran, sehingga dari bendahara harus
membuat ulang kartu pembayaran siswa tersebut atau diberikan kwitansi sebagai
bukti sementara bahwa siswa tersebut telah membayar.
Kemudian, penulis melanjutkan wawancara dengan salah satu wali murid

yang sedang menjemput anaknya. Penulis menanyakan bagaimana tanggapan dari
wali murid tentang pembayaran SPP yang masih bersifat manual. Menurut wali
murid, pembayaran SPP tersebut masih kurang efektif, karena mereka tidak dapat
mengecek langsung atau mengetahui apakah anaknya telah membayar ketika uang
tersebut dititipkan ke anaknya. Kemudian, penggunaan kartu pembayaran yang
bisa hilang, rusak maupun basah.
Dengan demikian, pembuatan sistem ini secara keseluruhan akan membantu

orang tau maupun bendahara. Karena orang tua dapat mencetak bukti transaksi
yang telah dilakukan oleh anaknya. Resiko rusak atau hilang pun dapat dikurangi,
karena bukti transaksi dapat dicetak berulang kali. Dari sisi lain juga dapat
mempermudah bendahara dalam menginputkan data murid yang membayar SPP.
1
I.2 Maksud dan Tujuan
Maksud dari pembuatan perangkat lunak ini adalah untuk mempermudah
pihak sekolah dalam hal pembayaran SPP dan pendataan siswa/i nya. Secara
umum orang tua juga akan sangat terbantu karena dapat mengecek dari rumah
apakah anaknya telah membayar SPP atau belum, dan dapat mencetak laporan
transaksi berkali-kali.
Tujuan dari pembuatan perangkat lunak ini adalah menghasilkan sistem

aplikasi yang dapat mempermudah bendahara sekolah dalam mengelola data
pembayaran SPP dan mempermudah wali murid dalam mengecek transaksi
pembayaran SPP.
I.3 Sasaran
Sasaran dari pembuatan sistem ini adalah pihak sekolah dan wali murid.
Karena pihak sekolah akan sangat terbantu dengan adanya sistem pembayaran
SPP ini yang lebih efisien dan efektif. Serta, wali murid juga akan sangat terbantu
dalam mengecek transaksi pembayaran SPP.
I.4 Organisasi
SD Muhammadiyah IV Pekanbaru Jl. Sekuntum Raya No.17, Delima,
Kecamatan Tampan, Kota Pekanbaru.
I.5 Ruang Lingkup

Adapun ruang lingkup pada kegiatan ini adalah sebagai berikut :
I.5.1 Lingkup Kegiatan

Pembuatan sistem aplikasi pembayaran SPP berbasis website yang akan
dikembangkan pada SD Muhammadiyah IV Pekanbaru memiliki beberapa ruang
lingkup yang harus dikerjakan, yaitu sebagai berikut :
a. Meminta izin dan rapat koordinasi dengan pihak sekolah tentang sistem
yang akan dibuat.
b. Menganalisis dan meneliti setiap prosedur yang berhubungan dengan
sistem yang akan dibuat.
c. Menganalisis teknologi apa yang akan digunakan.
2
d. Pembuatan dan updating atau pengembangan aplikasi.
e. Instalasi aplikasi
f. Pelatihan dan Pendampingan
g. Penyusunan laporan pelaksanaan kegiatan
I.5.2 Lingkup Aplikasi

Aplikasi yang dibuat tentunya memiliki ruang lingkup tersendiri, antara
lain:
a. Sistem dapat menginput data masing-masing siswa.
b. Sistem dapat menginput dan mengelola data pembayaran SPP.
c. Sistem dapat mencetak bukti transaksi pembayaran.
I.5.3 Keluaran
Keluaran yang dihasilkan dari kegiatan ini yaitu Sistem Aplikasi
Pembayaran SPP berbasis Website.
I.5.4 Jangka Waktu

Kegiatan dilaksanakan dalam waktu 30 September 2019 s/d 19 Desember
2019.
I.5.5 Personil
Deskripsi dari masing-masing tenaga ahli yaitu:
a. UI/UX Designer, 1 orang
i. Membuat prototipe dari sistem yang akan dibuat sebagai stimulasi
interaksi antara pengguna dan antarmuka
b. Sistem Analisis, 2 orang
ii. Menganalisis hal-hal apa saja yang diperlukan dalam pembuatan
sistem.
iii. Membuat rancangan sistem yang akan dibuat
c. Programmer, 2 orang
iv. Pengkodean sistem dengan menerjemahkan rancangan yang telah
dibuat menggunakan bahasa pemrograman yang telah disepakati.
3
I.5.6 Jadwal Pelaksanaan
Adapun jadwal pelaksanaan pada kegiatan pembuatan system ini adalah
sebagai berikut :
No. Kegiatan Minggu ke- Ket.

1-4 5-8 9-12
1 2 3 4 5 6
1. Perencanaan Pemilihan target
sekolah
2. Survey lokasi dan Mendapatkan
wawancara informasi melalui
narasumber
3. Pengumpulan Data Pengumpulan data
dari narasumber
3. Menganalisis Menganalisis masalah
masalah
4. Perancangan Sistem Merancang sistem
yang akan dibuat
5. Pembuatan aplikasi Membuat sistem
aplikasi yang telah
dirancang
6. Implementasi dan Mengimplementasika
Pengujian n sistem dan
melakukan pengujian
7 Publikasi Sistem Memperkenalkan
sistem kepada user
I.5.7 Rincian Biaya

Adapun rincian biaya pada kegiatan ini terbagi menjadi 2 yaitu sebagai
berikut :
a. Biaya personil
Pengalaman Jumlah Biaya per Jumlah

No Posisi Pendidikan Jam Kerja
Minimal Orang Orang (Rp) (Rp)
Tenaga Ahli
1 UI/UX S1 1 Tahun 1 120
100.000/Jam 12.000.000
Designer jam/orang
2 Sistem S1 1 Tahun 2 100
150.000/Jam 30.000.000
Analisis jam/orang
3 Programme S1 1 Tahun 2 150
120.000/Jam 36.000.000
r jam/orang
Sub Total Personil 78.000.000
4
b. Biaya non personil
Uraian Biaya per

Jenis Biaya Volume Satuan Jumlah (Rp)
Biaya Satuan (Rp)
A. Biaya Kertas A4 1 Rim 37.000 37.000

Penyusunan Tinta printer 1 Paket 135.000 135.000
dan Cetak 3.000 15.000
Jilid 5 Rangkap
Laporan
Alat tulis
1 Paket 35.000 35.000
kantor
Sub Total A 222.000
B. Biaya Konsumsi
35 Paket 15.000 525.000
Presentasi/ personil
Seminar Konsumsi
25 Paket 10.000 250.000
Pelatihan
Transportasi 30 Liter 8.000 240.000
Sub Total B 1.015.000
Sub Total Non Personil 1.237.000
c. Total biaya
No Uraian Biaya (Rp)
I. Biaya Personil 78.000.000
II. Biaya Non-Personil 1.237.000
TOTAL 79.237.000
5
BAB II
PROFIL INSTANSI
II.1 Sejarah Instansi
SD Muhammadiyah IV Pekanbaru merupakan salah satu sekolah swasta
yang bergerak dalam bidang pendidikan formal berbasis keagamaan yang
menggunakan Kurikulum 2013 serta dilengkapi dengan Kurikulum
Muhammadiyah ISMUBA (Al-Islam, Kemuhammadiyahan dan Bahasa Arab).
Sekolah Muhammadiyah IV ini terletak di Jl. Sekuntum Raya No.17 Delima,
Kecamatan Tampan, Kota Pekanbaru. Sekolah Dasar Muhammadiyah IV
Pekanbaru didirikan pada tanggal 15 Januari 1995 dibawah naungan sebuah
Yayasan. Sekolah ini juga didirikan dengan motivasi pada keinginan untuk
membina siswa yang berbentuk social dan amaliyah guna mendidik generasi kita
dengan ajaran Islam secara baik pula.
Kepala Sekolah Dasar Muhammadiyah IV Pekanbaru saat ini dikepalai oleh

Ibu Hj. Nuraini, S.Pd dengan wakilnya Ibu Nidya Junita S.Pd. Sekolah memiliki
beberapa guru dan pegawai. Seekolah telah bekerjasama dengan beberapa instansi
diantaranya yaitu bekerjasama dengan IHF Jakarta untuk pembentukan karakter
bangsa, bekerjasama dengan Rumah Sakit Muhammadiyah Pekanbaru,
bekerjasama dengan Bank BTN dalam tabungan dan bekerjasama dengan BPJS
kesehatan.
II.2 Visi dan Misi
Visi dan misi merupakan bagian penting pada sebuah Sekolah, karena pada
visi dan misi ini terdapat tujuan dari didirikannya Sekolah Dasar Muhammadiyah
IV Pekanbaru. Adapun visi dan misi Sekolah Dasar Muhammadiyah IV
Pekanbaru adalah sebagai berikut :
II.2.1 Visi
Mewujudkan SD Muhammadiyah IV Pekanbaru sebagai sekolah dasar
unggul dan berorientasi pada masa depan, berbudaya serta ber-muhammadiyah.
6
II.2.2 Misi
1. Mencetak lulusan yang unggul, menguasai IPTEK, berwawasan global,
berakhlaqul karimah dan bertaqwa kepada Allah SWT.
2. Meningkatkan kualitas akademik agar peserta didik menjadi insan cerdas
pandai dengan menambah les mata pelajaran.
3. Meningkatkan wawasan keagamaan agar peserta didik menjadi insan yang
beriman, bertaqwa, dan berakhlak mulia.
4. Meningkatkan ketrampilan pesrta didik dengan beberapa program
unggulan seperti: Komputer, Bahasa Inggris, Bahasa Arab, Bela Diri,
Tahfidz Al-Quran, Qiroah dan Qasidah.
5. Meningkatkan wawasan Kemuhammadiyahan dan rasa kebangsaan.
II.3 Struktur Organisasi
Struktur organisasi SD Muhammadiyah IV Pekanbaru adalah sebagai berikut :
Gambar PROFIL INSTANSI.1 Struktur Organisasi Instansi
7
BAB III
LANDASAN TEORI
III.1 Defenisi Sistem Informasi

Sistem adalah setiap sesuatu terdiri dari obyek-obyek, atau unsur-unsur, atau
komponen-komponen yang bertata kaitan dan bertata hubungan satu sama lain,
sedemikian rupa sehingga unsur-unsur tersebut merupakan satu kesatuan
pemrosesan atau pengolahan yang tertentu. Suatu sistem pada dasarnya adalah
sekelompok unsur yang erat hubungannya satu dengan yang lain, yang berfungsi
bersama-sama untuk mencapai tujuan tertentu. Secara sederhana, suatu sistem
dapat diartikan sebagai suatu kumpulan atau himpunan dari unsur, komponen,
atau variabel yang terorganisir, saling berinteraksi, saling tergantung satu sama
lain, dan terpadu.
Secara umum informasi dapat didefinisikan sebagai hasil dari pengolahan
data dalam suatu bentuk yang lebih berguna dan lebih berarti bagi penerimanya
yang menggambarkan suatu kejadian-kejadian yang nyata yang digunakan untuk
pengambilan keputusan.
Sistem informasi adalah suatu sistem dalam suatu organisasi yang

mempertemukan kebutuhan pengolahan transaksi harian yang mendukung fungsi
operasi organisasi yang bersifat manajerial dengan kegiatan strategi dari suatu
organisasi untuk dapat menyediakan kepada pihak luar tertentu dengan informasi
yang diperlukan untuk pengambilan keputusan. Sistem informasi dalam suatu
organisasi dapat dikatakan sebagai suatu sistem yang menyediakan informasi bagi
semua tingkatan dalam organisasi tersebut kapan saja diperlukan. Sistem ini
menyimpan, mengambil, mengubah, mengolah dan mengkomunikasikan
informasi yang diterima dengan menggunakan sistem informasi atau peralatan
sistem lainnya.
8
III.2 Defenisi PHP
PHP atau kependekan dari Hypertext Preprocessor adalah salah satu bahasa
pemrograman open source yang sangat cocok atau dikhususkan untuk
pengembangan web dan dapat ditanamkan pada sebuah skripsi HTML. Bahasa
PHP dapat dikatakan menggambarkan beberapa bahasa pemrograman seperti C,
Java, dan Perl serta mudah untuk dipelajari. PHP merupakan bahasa scripting
server-side, dimana pemrosesan datanya dilakukan pada sisi server.
Sederhananya, serverlah yang akan menerjemahkan skrip program, baru
kemudian hasilnya akan dikirim kepada client yang melakukan permintaan.
Adapun pengertian lain PHP adalah akronim dari Hypertext Preprocessor, yaitu
suatu bahasa pemrograman berbasiskan kode-kode (script) yang digunakan untuk
mengolah suatu data dan mengirimkannya kembali ke web browser menjadi kode
HTML.
III.3 Defenisi MySQL

MySQL adalah sebuah basis data yang mengandung satu atau jumlah tabel.
Tabel terdiri atas sejumlah baris dan setiap baris mengandung satu atau sejumlah
tabel. Tabel terdiri atas sejumlah baris dan setiap baris mengandung satu atau
sejumlah tabel. Tipe data MySQL adalah data yang terdapat dalam sebuah tabel
berupa field-field yang berisi nilai dari data tersebut. Nilai data dalam field
memiliki tipe sendiri-sendiri.
III.4 Defenisi XAMPP

XAMPP adalah sebuah software web server apache yang didalamnya sudah
tersedia database server MySQL dan dapat mendukung pemrograman PHP.
XAMPP merupakan software yang mudah digunakan, gratis dan mendukung
instalasi di Linux dan Windows. Keuntungan lainnya adalah cuma menginstal satu
kali sudah tersedia Apache Web Server, MySQL Database Server, PHP Support
(PHP 4 dan PHP 5) dan beberapa module lainnya.
9
III.5 Defenisi Unified Modelling Language (UML)
Unified Modelling Language (UML) adalah sebuah "bahasa" yg telah
menjadi standar dalam industri untuk visualisasi, merancang dan
mendokumentasikan sistem piranti lunak. UML menawarkan sebuah standar
untuk merancang model sebuah system.
UML dideskripsikan oleh beberapa diagram yang dikelompokkan menurut

sudut pandang tertentu, diantaranya :
1. Use Case Diagram
Use case diagram menggambarkan fungsionalitas yang diharapkan dari
sebuah sistem. Yang ditekankan adalah “apa” yang diperbuat sistem, dan
bukan “bagaimana”. Sebuah use case merepresentasikan sebuah interaksi
antara aktor dengan sistem. Use case merupakan sebuah pekerjaan tertentu,
misalnya login ke sistem, meng-create sebuah daftar belanja, dan
sebagainya. Seorang/sebuah aktor adalah sebuah entitas manusia atau mesin
yang berinteraksi dengan sistem untuk melakukan pekerjaan-pekerjaan
tertentu.
2. Class Diagram
Class adalah sebuah spesifikasi yang jika diinstansiasi akan menghasilkan
sebuah objek dan merupakan inti dari pengembangan dan desain
berorientasi objek. Class menggambarkan keadaan (atribut/properti) suatu
sistem, sekaligus menawarkan layanan untuk memanipulasi keadaan
tersebut (metoda/fungsi). Class diagram menggambarkan struktur dan
deskripsi class, package dan objek beserta hubungan satu sama lain seperti
containment, pewarisan, asosiasi, dan lain-lain.
3. Sequence Diagram
Sequence diagram menggambarkan interaksi antar objek di dalam dan di
sekitar sistem (termasuk pengguna, display, dan sebagainya) berupa
message yang digambarkan terhadap waktu. Sequence diagram terdiri atas
dimensi vertikal (waktu) dan dimensi horizontal (objek-objek yang terkait).
Sequence diagram biasa digunakan untuk menggambarkan skenario atau
rangkaian langkah-langkah yang dilakukan sebagai respons dari sebuah
10
event untuk menghasilkan output tertentu. Diawali dari apa yang men-
trigger aktivitas tersebut, proses dan perubahan apa saja yang terjadi secara
internal dan output apa yang dihasilkan.
11
BAB IV
ANALISA DAN PERENCANAAN
IV.1 Model Pengembangan Sistem

Model yang akan digunakan adalah model RAD. RAD adalah suatu
pendekatan berorientasi objek terhadap pengembangan sistem yang mencakup
suatu metode pengembangan serta perangkat-perangkat lunak. RAD bertujuan
mempersingkat waktu yang biasanya diperlukan dalam siklus hidup
pengembangan sistem tradisional antara perancangan dan penerapan suatu sistem
informasi. Berikut adalah kerangka kerja model RAD :
Gambar analisa dan perencanaan.2 Kerangka Kerja Model RAD
Rapid application development (RAD) atau rapid prototyping juga adalah

model proses pembangunan perangkat lunak yang tergolong dalam teknik
incremental (bertingkat). RAD menekankan pada siklus pembangunan pendek,
singkat, dan cepat. Waktu yang singkat adalah batasan yang penting untuk model
ini. Rapid application development menggunakan metode iteratif (berulang)
dalam mengembangkan sistem dimana working model (model bekerja) sistem
dikonstruksikan di awal tahap pengembangan dengan tujuan menetapkan
kebutuhan (requirement) user dan selanjutnya disingkirkan.
Sistem dibagi-bagi menjadi beberapa modul dan dikerjakan beberapa tim
dalam waktu yang hampir bersamaan dalam waktu yang sudah ditentukan. Model
ini melibatkan banyak tim, dan setiap tim mengerjakan tugas yang selevel, namun
berbeda. Sesuai dengan pembagian modul sistem. Dalam pembuatan system ini,
12
tim dibagi menjadi beberapa bagian antara lain UI/UX designer, Sistem Analisis,
dan Programmer, sehingga pembuatan system menjadi lebih cepat.
IV.2 Analisa Sistem Lama

Perancangan sebuah sistem baru didapatkan dari pengumpulan data atau
informasi tentang sistem yang ada pada saat ini. Mengumpulkan data dan
informasi dilakukan dengan cara observasi di SD Muhammadiyah IV Pekanbaru.
Permasalahan yang diperoleh dari hasil observasi dan wawancara yaitu tentang
sistem pembayaran uang Sumbangan Pembinaan Pendidikan. Saat ini, sistem
pembayaran uang Sumbangan Pembinaan Pendidikan masih menggunakan cara
manual. Ketika siswa ingin membayar uang sekolah kepada bendahara, siswa
membawa kartu SPP kepada bendahara dan bendahara mencatat di buku khusus
untuk pembayaran SPP. Kemudian kartu SPP siswa tersebut diparaf oleh
bendahara yang itu merupakan sebagai bukti pembayaran bahwa siswa tersebut
telah membayar. Apabila kartu SPP siswa tersebut hilang, maka bendahara akan
memberikan bukti pembayaran sementara dengan kwitansi. Dan wali murid tidak
bisa mengecek langsung apakah anaknya sudah membayar atau belum.
Berikut flowchart sistem lama pembayaran Uang Sumbangan Pendidikan :
Gambar analisa dan perencanaan.3 Flowchart Sistem Lama Pembayaran Uang SPP
13
IV.3 Analisa Sistem Baru
Berdasarkan permasalahan mengenai sistem lama yang telah dianalisa,
maka dibangunlah sebuah sistem aplikasi pembayaran uang Sumbangan
Pembinaan Pendidikan. Sistem tersebut dapat mengelola data siswa, pembayaran
uang SPP dan mencetak bukti pembayaran secara digital. Bendahara dan wali
murid siswa melakukan login terlebih dahulu menggunakan username dan
Password. Setelah itu Bendahara melakukan pengelolaan data siswa. Pembayaran
uang SPP, mencetak bukti pembayaran dan mencetak laporan. Sedangkan wali
murid siswa dapat melihat history pembayaran yang telah dilakukan dan dapat
mencetak bukti pembayaran berulang kali jika bukti pembayaran hilang.
Pada sistem ini Bendahara dapat melakukan penambahan data, pencarian

data, perubahan data, melihat data dan mencetak data. Pada data siswa Bendahara
dapat melakukan penambahan data, perubahan data, dan penghapusan data. Pada
cetak bukti pembayaran, Bendahara dapat melihat dan mencetak bukti
pembayaran sekali saja pada saat pembayaran telah dilakukan. Lalu pada cetak
laporan, Bendahara dapat melihat dan mencetak laporan tersebut.
Gambar analisa dan perencanaan.4 Flowchart Sistem Baru Pembayaran Uang SPP
14
IV.4 Unified Modeling Language (UML)
Unified Modelling Language (UML) adalah sebuah "bahasa" yg telah
menjadi standar dalam industri untuk visualisasi, merancang dan
mendokumentasikan sistem piranti lunak. UML menawarkan sebuah standar
untuk merancang model sebuah system.
UML dideskripsikan oleh beberapa diagram yang dikelompokkan menurut

sudut pandang tertentu, diantaranya :
IV.4.1 Use Case Diagram

Use Case Diagram menggambarkan sebuah aktor atau lebih yang
berinteraksi dengan system untuk melakukan pekerjaan-pekerjaan tertentu. Use
case diagram digunakan untuk memahami fungsi-fungsi apa saja yang ada
didalam sebuah system dan siapa saja yang dapat menggunakan fungsi-fungsi
tersebut.
Gambar analisa dan perencanaan.5 Use Case Diagram Sistem Pembayaran

Uang SPP
15
IV.4.2 Use Case Spesification
Use case spesification adalah penjabaran langkah-langkah dari setiap use
case diagram yang telah dibuat.
1. Use Case Spesifikasi Login

Use case spesifikasi login merupakan langkah awal yang harus dilakukan
oleh pengguna ketika ingin mengakses sistem.
Table analisa dan perencanaan.1 Proses Login
Use Case Name Login
Actor Bendahara, Siswa
Descriptions Use Case ini menggambarkan prosedur yang harus

dilakukan user sebelum dapat melakukan event
(usecase) yang lain. Pada saat melakukan login ke
sistem, actor harus mengisi username dan password.
Pre-Conditions Aktor harus membuka halaman utama aplikasi sistem

informasi administrasi pembayaran SPP agar masuk ke
halaman login.
Normal Course User Sistem
Step 1: Aktor membuka Step 2: Sistem

halaman utama sistem menampilkan form login
Step 3: Aktor login Step 4: Sistem akan

dengan memasukkan melakukan pemrosesan
username dan password terhadap username dan
password. Jika valid,
maka sistem akan
menampilkan menu utama
Post-Conditions Login berhasil dan masuk ke dashboard sistem
Exceptions Jika username dan password tidak cocok, maka proses

login tidak berhasil dan tetap dihalaman login
16
2. Use Case Spesifikasi Menambah Data Siswa
Use case spesifikasi menambah data siswa merupakan penjelasan mengenai
langkah-langkah yang dilakukan oleh admin (bendahara) ketika ingin menambah
data siswa.
Table analisa dan perencanaan.2 Proses Menambah Data Siswa
Use Case Name Menambah Data Siswa
Actor Bendahara
Descriptions Usecase ini menggambarkan aktivitas admin dalam

melakukan penambahan data siswa
Pre-Conditions Admin masuk ke menu Data Siswa
Step 1: Admin memilih Step 2: Sistem

menu Data Siswa menampilkan data siswa
Step 3: Memilih menu Step 4: Sistem

menambah data siswa menampilkan form
pengisian data
Step 5: Menginputkan Step 6: Sistem

data siswa lalu klik menampilkan pesan “data
simpan berhasil diinput”
Post-Conditions Data berhasil disimpan dan ditampilkan
Exceptions 1. Jika ada field data yang tidak diisi, maka sistem
akan menampilkan pesan bahwa data harus diisi
2. Jika data yang diinputkan sudah ada, maka sistem
menampilkan pesan bahwa data sudah ada dan tidak
bisa disimpan
3. Use Case Spesifikasi Mengubah Data Siswa

Use case spesifikasi mengubah data siswa merupakan penjelasan mengenai
langkah-langkah yang dilakukan oleh admin (bendahara) ketika ingin mengubah
data siswa.
17
Table analisa dan perencanaan.3 Proses Mengubah Data Siswa
Use Case Name Mengubah Data Siswa
Actor Bendahara

melakukan pengeditan data siswa

Step 3: Memillih data Step 4: Sistem

siswa yang akan diubah menampilkan data siswa
dan menekan tombol yang telah dipilih
“Edit”
Step 5: Admin mengubah Step 6: Sistem

data siswa lalu klik menampilkan pesan “data
tombol simpan berhasil diubah”
Exceptions 1. Data tidak bisa disimpan jika data tersebut menjadi

kosong
menampilkan pesan bahwa data sudah ada dan
tidak bisa disimpan
4. Use Case Spesifikasi Menghapus Data Siswa

Use case spesifikasi menghapus data siswa merupakan penjelasan mengenai
langkah-langkah yang dilakukan oleh admin (bendahara) ketika ingin menghapus
data siswa.
Table analisa dan perencanaan.4 Proses Menghapus Data Siswa
Use Case Name Menghapus Data Siswa
Actor Bendahara

melakukan penghapusan data siswa
18

Step 3: Klik tombol Step 4: Sistem

hapus pada data siswa menampilkan pesan
yang akan di hapus konfirmasi “Apakah anda
yakin ingin menghapus
data ini?”
Step 5: Klik tombol Ok Step 6: Sistem menghapus

saat pesan konfirmasi data dan menampilkan
muncul pesan “data berhasil
dihapus”
Post-Conditions Data berhasil dihapus
Exceptions Data tidak berhasil dihapus jika pesan konfirmasi tidak

di setujui
5. Use Case Spesifikasi Menginput Data Pembayaran SPP

Use case spesifikasi menginput data pembayaran SPP merupakan penjelasan
mengenai langkah-langkah yang dilakukan oleh admin (bendahara) ketika ingin
menginput data pembayaran SPP.
Table analisa dan perencanaan.5 Proses Menginput Data Pembayaran SPP
Use Case Name Menginput Data Pembayaran SPP
Actor Bendahara

melakukan penginputan data pembayaran SPP
Pre-Conditions Admin memilih menu Data Pembayaran

menu data pembayaran menampilkan form data
pembayaran
Step 3: Kemudian admin Step 4: Sistem
19
menginputkan data menampilkan data sesuai
(NISN) dengan scan QR dengan inputan NISN
Code melalui webcam

Bayar jika siswa telah menampilkan form data
membayar uang SPP pembayaran siswa yang
telah berhasil
Post-Conditions Data berhasil diinput
Exceptions 1. Jika data yang diinput tidak ada, maka sistem akan
menampilkan pesan bahwa data tidak tersedia
2. NISN tidak tersedia
6. Use Case Spesifikasi Mencetak Bukti Pembayaran SPP

Use case spesifikasi mencetak bukti pembayaran SPP merupakan penjelasan
mengenai langkah-langkah yang dilakukan oleh admin (bendahara) dan siswa
ketika ingin mencetak bukti pembayaran SPP.
Table analisa dan perencanaan.6 Proses Mencetak Bukti Pembayaran SPP
Use Case Name Mencetak Bukti Pembayaran SPP
Actor Bendahara dan siswa
Descriptions Use Case ini menggambarkan aktivitas aktor dalam

melakukan cetak bukti pembayaran SPP
Pre-Conditions 1. Pembayaran SPP sudah dilakukan

2. Admin masuk ke form pembayaran berhasil
3. Siswa masuk ke menu transaksi pembayaran
Step 1: Admin masuk ke Step 2: Sistem

form pembayaran yang menampilkan form
baru saja dilakukan pembayaran SPP yang
baru saja dilakukan

Cetak Bukti menampilkan formulir
dalam bentuk pdf dan
20
mencetak berkas
Post-Conditions Data berhasil dicetak
Exceptions -
7. Use Case Spesifikasi Mencetak Laporan Pembayaran SPP

Use case spesifikasi mencetak laporan pembayaran SPP merupakan
penjelasan mengenai langkah-langkah yang dilakukan oleh admin (bendahara)
ketika ingin mencetak laporan pembayaran SPP.
Table analisa dan perencanaan.7 Proses Mencetak Laporan Pembayaran
SPP
Use Case Name Mencetak Laporan Pembayaran SPP
Actor Bendahara
Descriptions Use Case ini menggambarkan aktivitas admin dalam

melakukan cetak laporan pembayaran SPP
Pre-Conditions Admin memilih menu Data Pembayaran

menu Data Pembayaran menampilkan data
pembayaran SPP

cetak laporan menampilkan data
pembayaran SPP
berdasarkan periode bulan
pembayaran
Step 5: Klik tombol cetak Step 6: Sistem

pada bulan yang dibayar menampilkan formulir
laporan pembayaran dan
mencetak berkas
Post-Conditions Data berhasil dicetak
Exceptions -
21
8. Use Case Spesifikasi Menambah Nominal Pembayaran
Use case spesifikasi menambah data siswa merupakan penjelasan mengenai
langkah-langkah yang dilakukan oleh admin (bendahara) ketika ingin menambah
nominal pembayaran.
Table analisa dan perencanaan.8 Proses Menambah Nominal Pembayaran
Use Case Name Menambah Nominal Pembayaran
Actor Bendahara

melakukan penambahan nominal pembayaran
Pre-Conditions Admin masuk ke menu Pengaturan

menu Pengaturan menampilkan pengaturan

tambah data menampilkan form
pengisian data
Step 5: Menginputkan Step 6: Sistem

nominal pembayaran lalu menampilkan pesan “data
klik simpan berhasil ditambahkan”
Exceptions 1. Jika ada field data yang tidak diisi, maka sistem
akan menampilkan pesan bahwa data harus diisi
menampilkan pesan bahwa data sudah ada dan tidak
bisa disimpan
9. Use Case Spesifikasi Mengubah Nominal Pembayaran

Use case spesifikasi mengubah data siswa merupakan penjelasan mengenai
langkah-langkah yang dilakukan oleh admin (bendahara) ketika ingin mengubah
nominal pembayaran.
22
Table analisa dan perencanaan.9 Proses Mengubah Nominal Pembayaran
Use Case Name Mengubah Nominal Pembayaran
Actor Bendahara

melakukan pengeditan nominal pembayaran

menu Pengaturan menampilkan pengaturan
Step 3: Memillih nominal Step 4: Sistem

pembayaran yang akan menampilkan nominal
diubah dan menekan pembayaran yang telah
tombol “Edit” dipilih

nominal pembayaran lalu menampilkan pesan “data
klik tombol simpan berhasil diperbarui”
Exceptions 1. Data tidak bisa disimpan jika data tersebut menjadi

kosong
menampilkan pesan bahwa data sudah ada dan
tidak bisa disimpan
10. Use Case Spesifikasi Menghapus Nominal Pembayaran

Use case spesifikasi menghapus data siswa merupakan penjelasan
menghapus nominal pembayaran.
Table analisa dan perencanaan.10 Proses Menghapus Nominal Pembayaran
Use Case Name Menghapus Nominal Pembayaran
Actor Bendahara
23
melakukan penghapusan nominal pembayaran

menu Pengaturan menampilkan penggaturan

hapus pada nominal menampilkan pesan
pembayaran yang akan di konfirmasi “Apakah anda
hapus yakin ingin menghapus
data ini?”
Step 5: Klik tombol Ya Step 6: Sistem menghapus

saat pesan konfirmasi data dan menampilkan
muncul pesan “data berhasil
dihapus”
Post-Conditions Data berhasil dihapus
Exceptions Data tidak berhasil dihapus jika pesan konfirmasi tidak

di setujui
11. Use Case Spesifikasi Mengubah Username Dan Password Bendahara

Use case spesifikasi mengubah profil bendahara merupakan penjelasan
mengubah profil bendahara.
Table analisa dan perencanaan.11 Proses Mengubah Profil Bendahara
Use Case Name Mengubah Profil Bendahara
Actor Bendahara

melakukan pengeditan profil bendahara
Pre-Conditions Admin masuk ke menu Profil

menu Profil menampilkan profil
24
Step 3: Menekan tombol Step 4: Sistem
“Edit” menampilkan form yang
akan di edit

profil lalu klik tombol menampilkan pesan “data
simpan berhasil diubah”
Exceptions 1. Data tidak bisa disimpan jika data tersebut

menjadi kosong
12. Use Case Spesifikasi Mengubah Username dan Password Siswa

Use case spesifikasi mengubah username dan password merupakan
penjelasan mengenai langkah-langkah yang dilakukan oleh siswa ketika ingin
mengubah username dan password pada profil nya.
Table analisa dan perencanaan.12 Proses Mengubah Username dan
Password
Use Case Name Mengubah Username dan Password
Actor Siswa
Descriptions Use Case ini menggambarkan aktivitas Siswa dalam

melakukan perubahan profil terutama username dan
password
Pre-Conditions 1. Siswa membuka halaman utama sistem

2. Memilih menu profil
Step 1: Siswa membuka Step 2: Sistem

halaman utama sistem menampilkan halaman
login
Step 3: Siswa Step 4: Sistem akan

menginputkan username melakukan pemrosesan
dan password terhadap username dan
password. Jika valid,
maka sistem akan
menampilkan menu utama
25
Step 5: Siswa memilih Step 6: Sistem
menu profil menampilkan profil siswa
Step 7: Sisw memilih Step 8: Sistem

menu edit menampilkan data yang
akan diedit
Step 9: Mengubah Step 10: Sistem

username dan password menampilkan pesan “data
dan klik simpan berhasil diubah”
Post-Conditions Data berhasil diubah dan ditampilkan
Exceptions Data tidak bisa disimpan jika data tersebut menjadi

kosong
IV.4.3 Sequence Diagram

Sequence diagram merupakan suatu diagram yang menggambarkan
interaksi objek dan mengindikasikan komunikasi diantara objek-objek tersebut.
Sequence diagram digunakan untuk menggambarkan suatu perilaku dan
mendeskripsikan bagaimana entitas dan system berinteraksi. Sequence diagram
berhubungan erat dengan use case diagram, dimana satu use case akan menjadi
satu sequence diagram.
1. Sequence Diagram Login
Sequence diagram login dapat dilihat pada gambar berikut :
26
Gambar analisa dan perencanaan.6 Sequence Diagram Login
Proses login adalah proses yang dapat dilakukan oleh Admin (bendahara)
dan Siswa/i. Pengguna mengisi username dan password, kemudian klik tombol
Login. Username dan password tersebut akan diperiksa di database. Apabila
username dan password sesuai, maka akan dialihkan ke halaman dashboard.
2. Sequence Diagram Menambah Data Siswa
Sequence diagram menambah data siswa dapat dilihat pada gambar berikut :
Gambar analisa dan perencanaan.7 Sequence Diagram Menambah Data

Siswa
Proses menambah data siswa adalah proses yang dapat dilakukan oleh
admin (bendahara). Admin dapat menambahkan data siswa dengan mengklik
tombol tambah, lalu system akan menampilkan form tambah data, dan admin
menginputkan data pada form tersebut dan mengklik tombol simpan. Lalu sistem
akan menyimpan data pada database dan sistem akan kembali ke halaman data
siswa dengan menampilkan pesan data telah berhasil ditambah.
27
3. Sequence diagram Mengubah Data Siswa
Sequence diagram mengubah data siswa dapat dilihat pada gambar berikut :
Gambar analisa dan perencanaan.8 Sequence diagram mengubah data siswa

Proses mengubah data siswa adalah proses yang dapat dilakukan oleh admin
(bendahara). Admin dapat mengubah data siswa yang dipilih dengan mengklik
tombol Edit, lalu sistem akan menampilkan form data siswa yang akan diedit, dan
admin mengedit data pada form tersebut dan mengklik tombol simpan. Lalu
sistem akan menyimpan data pada database dan sistem akan kembali ke halaman
data siswa dengan menampilkan pesan data telah berhasil diedit.
4. Sequence diagram Menghapus Data Siswa
Sequence diagram menghapus data siswa dapat dilihat pada gambar berikut :
28
Gambar analisa dan perencanaan.9 Sequence Diagram Menghapus Data
Siswa
Proses menghapus data siswa adalah proses yang dapat dilakukan oleh
admin (bendahara). Admin dapat menghapus data siswa yang dipilih dengan
mengklik tombol Hapus, lalu sistem akan menampilkan pesan konfirmasi kepada
pengguna, jika disetujui maka system akan menghapus semua data dari database
yang telah dipilih. Sistem akan kembali ke halaman data siswa dengan
menampilkan pesan data telah berhasil dihapus.
5. Sequence diagram Menginput Data Pembayaran SPP
Sequence diagram menginput data pembayaran SPP dapat dilihat pada gambar
berikut :
Gambar analisa dan perencanaan.10 Sequence Diagram Menginput Data

Pembayaran SPP
Proses menginput data pembayaran SPP adalah proses yang dapat dilakukan
oleh admin (bendahara) ketika siswa membayar uang SPP. Admin dapat
menginput NISN dengan mengklik tombol Bayar SPP lal menscan QRCode yang
29
terdapat pada kartu pembayaran siswa, lalu sistem akan menampilkan data dan
nominal yang harus dibayarkan berdasarkan NISN siswa. Lalu admin mengklik
tombol bayar dan system akan menyimpan data pembayaran kedalam database,
dan system menampilkan data pembayaran yang telah berhasil dilakukan.
6. Mencetak Bukti Pembayaran SPP

a. Bendahara
Sequence diagram mencetak bukti pembayaran SPP oleh admin dapat

dilihat pada gambar berikut :
Gambar analisa dan perencanaan.11 Sequence Diagram Mencetak Bukti

Pembayaran SPP
Proses mencetak bukti pembayaran spp adalah proses yang dapat dilakukan
oleh admin (bendahara) ketika siswa telah membayar uang SPP. Admin dapat
mengklik tombol cetak bukti dan system akan menampilkan berkas yang akan
dicetak.
b. Siswa/i
Sequence diagram mencetak bukti pembayaran SPP oleh siswa dapat dilihat
pada gambar berikut :
30
Gambar analisa dan perencanaan.12 Sequence Diagram Mencetak Bukti
Pembayaran SPP
Proses mencetak bukti pembayaran SPP adalah proses yang dapat dilakukan
oleh siswa sendiri ketika telah membayar uang SPP. Siswa dapat mengklik menu
history pembayaran, lalu system akan menampilkan data pembayaran yang telah
dilakukan. Siswa memilih periode pembayaran yang akan dicetak dan system
menampilkan data periode pembayaran yang dipilih. Dan siswa dapat mengklik
tombol cetak bukti pembayaran dan system akan menampilkan berkas yang akan
dicetak.
7. Mencetak Laporan Pembayaran SPP

Sequence diagram mencetak laporan pembayaran SPP dapat dilihat pada
gambar berikut :
Gambar analisa dan perencanaan.13 Sequence Diagram Mencetak Laporan

Pembayaran SPP
Proses mencetak laporan pembayaran SPP adalah proses yang dapat
dilakukan oleh admin. Admin dapat mengklik tombol cetak laporan, lalu system
akan menampilkan data laporan pembayaran. Kemudian admin mengklik tombol
cetak dengan memilih periode bulan pembayaran yang akan dicetak, system akan
menampilkan berkas laporan yang akan dicetak.
8. Menambah Nominal Pembayaran
31
Sequence diagram menambah nominal pembayaran berdasarkan tahun
masuk siswa dapat dilihat pada gambar berikut :
Gambar analisa dan perencanaan.14 Gambar Sequence Menambah Nominal

Pembayaran
Proses menambah data nominal pembayaran dapat dilakukan oleh admin.
Admin dapat mengklik tombol tambah data, kemudian sistem akan menampilkan
form tambah data dan admin menginputkan nominal pembayaran spp berdasarkan
tahun angkatan siswa dan klik simpan data, lalu sistem akan menyimpan data
tersebut dan menampilkan data yang telah ditambahkan.
9. Mengubah Nominal Pembayaran

Sequence diagram mengubah nominal pembayaran berdasarkan tahun
32
Gambar analisa dan perencanaan.15 Sequence Diagram Mengubah Nominal
Pembayaran
Proses mengubah data nominal pembayaran dapat dilakukan oleh admin.

Admin dapat mengklik tombol edit, kemudian sistem akan menampilkan form
data yang telah dipilih dan admin mengubah data yang ada dan klik simpan data,
lalu sistem akan menyimpan data tersebut dan menampilkan data yang telah di
ubah.
10. Menghapus Nominal Pembayaran
Sequence diagram mengubah nominal pembayaran berdasarkan tahun

Gambar analisa dan perencanaan.16 Sequence Diagram Mengubah Nominal

Pembayaran
Proses menghapus data nominal pembayaran dapat dilakukan oleh admin.

Admin dapat mengklik tombol hapus, kemudian admin klik tombol ok jika ingin
menghapus dan cancel jika tidak, lalu sistem akan menghapus semua data yang
ada pada database.
11. Mengubah Profil
Sequence diagram mengubah profil dapat dilihat pada gambar berikut :
33
Gambar analisa dan perencanaan.17 Sequence Diagram Mengubah Profil
Proses mengubah profil pada bendahara dapat dilakukan oleh admin. Admin
dapat mengklik tombol edit, kemudian sistem akan menampilkan form data yang
telah dipilih dan admin mengubah data profil yang akan di ubah dan klik simpan,
lalu sistem akan menyimpan data tersebut dan menampilkan data yang telah di
ubah.
12. Mengubah Username dan Password

a. Bendahara
Sequence diagram mengubah username dan password bendahara dapat

34
Gambar analisa dan perencanaan.18 Sequence Diagram Mengubah Username Dan
Password Bendahara
Proses mengubah username dan password adalah proses yang dapat

dilakukan oleh admin. Admin dapat memilih menu profil kemudian memilih
tombol edit, system akan menampilkan form profil bendahara. Bendahara dapat
mengubah username dan password dan mengklik tombol simpan. System akan
menyimpan data yang telah diubah pada database dan system akan kembali ke
halaman profil bendahara.
b. Siswa/i
Sequence diagram mengubah username dan password siswa dapat dilihat

35
Gambar analisa dan perencanaan.19 Sequence Diagram Mengubah Username Dan
Password Siswa
Proses mengubah username dan password adalah proses yang dapat

dilakukan oleh siswa. Siswa dapat memilih menu profil kemudian memilih
tombol edit, system akan menampilkan form profil siswa. Siswa dapat mengubah
username dan password dan mengklik tombol simpan. System akan menyimpan
data yang telah diubah pada database dan system akan kembali ke halaman profil
siswa.
IV.4.4 Class Diagram

Class diagram merupakan diagram yang menggambarkan struktur system
dari segi pendefinisian kelas-kelas yang akan dibuat untuk membangun sebuah
system. Class diagram memiliki 3 struktur utama yaitu nama, attribute dan
operation. Gambar di bawah ini menunjukan class diagram pada Sistem
Pembayaran Uang SPP :
36
Gambar analisa dan perencanaan.20 Class Diagram System Pembayaran
Uang Spp
IV.4.5 Activity Diagram

Activity diagram merupakan diagram yang menggambarkan aliran kerja atau
aktifitas dari sebuah system. Activity diagram dibuat berdasarkan use case yang ada dan
dengan memperhatikan urutan proses kerja system.
1. Activity Diagram Login
Activity Diagram Login menjelaskan proses Login yang bisa dilakukan

pengguna yaitu Bendahara dan Siswa dapat dilihat pada gambar berikut :
37
Gambar analisa dan perencanaan.21 Activity Diagram Login Bendahara
Gambar analisa dan perencanaan.22 Activity Diagram Login Siswa
2. Acticity Diagram Menambah Data Siswa
Activity Diagram menambah data siswa menjelaskan proses penambahan

data siswa yang bisa dilakukan oleh admin (Bendahara) dapat dilihat pada
gambar berikut :
38
Gambar analisa dan perencanaan.23 Activity Diagram Menambah Data Siswa
3. Activity Diagram Mengubah Data Siswa
Activity Diagram mengubah data siswa menjelaskan proses pengubahan

gambar berikut :
Gambar analisa dan perencanaan.24 Activity Diagram Mengubah Data Siswa
4. Activity Diagram Menghapus Data Siswa
Activity Diagram menghapus data siswa menjelaskan proses penghapusan

gambar berikut :
39
Gambar analisa dan perencanaan.25 Activity Diagram Menghapus Data Siswa
5. Menginput Data Pembayaran SPP
Activity Diagram menginput data pembayaran SPP menjelaskan proses

penginputan data pembayaran berdasarkan NISN yang bisa dilakukan oleh admin
(Bendahara) dapat dilihat pada gambar berikut :
Gambar analisa dan perencanaan.26 Activity Diagram Menginput Data

Pembayaran SPP
40
6. Acticity Diagram Mencetak Bukti Pembayaran SPP
Activity Diagram mencetak bukti pembayaran spp menjelaskan proses

pencetakan bukti pembayaran spp yang bisa dilakukan oleh admin (Bendahara)
dan siswa dapat dilihat pada gambar berikut :
Gambar analisa dan perencanaan.27 Activity Diagram Cetak Bukti Pembayaran

SPP untuk Bendahara
Gambar analisa dan perencanaan.28 Activity Diagram Cetak Bukti Pembayaran

SPP untuk Siswa
41
7. Activity Diagram Mencetak Laporan Pembayaran SPP
Activity Diagram mencetak laporan pembayaran SPP menjelaskan proses

pencetakan laporan pembayaran yang bisa dilakukan oleh admin (Bendahara) dapat
Gambar analisa dan perencanaan.29 Activity Diagram Cetak Laporan Pembayaran

SPP
8. Activity Diagram Menambah Nominal Pembayaran
Activity Diagram menambah nominal pembayaran menjelaskan proses

penambahan nominal pembayaran SPP siswa berdasarkan tahun masuk yang bisa
dilakukan oleh admin dapat dilihat pada gambar berikut :
42
Gambar analisa dan perencanaan.30 Activity Diagram Menambah Nominal
Pembayaran
9. Activity Diagram Mengubah Nominal Pembayaran
Activity Diagram mengubah nominal pembayaran menjelaskan proses

pengubahan nominal pembayaran SPP siswa berdasarkan tahun masuk yang bisa
dilakukan oleh admin dapat dilihat pada gambar berikut :
Gambar analisa dan perencanaan.31 Activity Diagram Mengubah Nominal

Pembayaran
10. Activity Diagram Menghapus Nominal Pembayaran
Activity Diagram menghapus nominal pembayaran menjelaskan proses

penghapusan data yang bisa dilakukan oleh admin dapat dilihat pada gambar
berikut :
43
Gambar analisa dan perencanaan.32 Activity Diagram Menghapus Nominal
Pembayaran
11. Activity Diagram Mengubah Profil
Activity Diagram mengubah profil menjelaskan proses pengubahan data

pada profil yang bisa dilakukan oleh bendahara dapat dilihat pada gambar berikut:
Gambar analisa dan perencanaan.33 Activity Diagram Mengubah Profil
12. Activity Diagram Mengubah Username dan Password
a. Bendahara
44
Activity Diagram mengubah username dan password menjelaskan proses
pengubahan password bendahara yang bisa dilakukan oleh admin dapat dilihat
Gambar analisa dan perencanaan.34 Activity Diagram Mengubah Username dan

Password
b. Siswa/i
Activity Diagram mengubah username dan password menjelaskan proses
pengubahan password siswa yang bisa dilakukan oleh siswa dapat dilihat pada
gambar berikut :
Gambar analisa dan perencanaan.35 Activity Diagram Mengubah Username dan

Password Siswa
45
IV.5 Perancangan Interface
Perancangan interface merupakan tahapan rancangan antarmuka
menggunakan gambar sketsa dari sistem yang akan dibangun. Perancangan
interface terbagi menjadi dua bagian, yaitu :
IV.5.1 Low Fidelity
Berikut adalah rancangan interface low fidelity sistem pembayaran SPP :
1. Halaman Login
Rancangan interface halaman login dapat dilihat pada gambar berikut :
Gambar analisa dan perencanaan.36 Halaman Login
2. Halaman Dashboard Bendahara

Tampilan halaman dashboard merupakan tampilan awal yang akan ditemui
pengguna ketika berhasil melakukan login. Berikut adalah tampilan beranda dan
untuk Bendahara :
46
Gambar analisa dan perencanaan.37 Halaman Dashboard Bendahara
3. Halaman Dashboard Siswa

untuk Siswa :
Gambar analisa dan perencanaan.38 Halaman Dashboard Siswa
4. Tampilan Halaman Data Siswa
47
Tampilan halaman data siswa untuk Bendahara dapat dilihat pada gambar
berikut :
Gambar analisa dan perencanaan.39 Tampilan Halaman Data Siswa
5. Tampilan Form Tambah Data Siswa

Tampilan form tambah data siswa untuk Bendahara dapat dilihat pada
gambar berikut :
Gambar analisa dan perencanaan.40 Tampilan Form Tambah Data Siswa
6. Tampilan Form Edit Data Siswa
48
Tampilan form edit data siswa untuk Bendahara dapat dilihat pada gambar
berikut :
Gambar analisa dan perencanaan.41 Tampilan Form Edit Data Siswa
7. Halaman Data Pembayaran SPP
Tampilan halaman data pembayaran SPP untuk Bendahara dapat dilihat

Gambar analisa dan perencanaan.42 Tampilan Halaman Data Pembayaran SPP
8. Tampilan Form Input Data Pembayaran SPP
49
Tampilan form input data pembayaran SPP untuk Bendahara dapat dilihat
Gambar analisa dan perencanaan.43 Tampilan Input Data Pembayaran Spp
9. Tampilan Konfigurasi Pembayaran
Tampilan konfigurasi pembayaran merupakan pemilihan periode bulan yang

akan dibayar , berikut ini adalah tampilan konfigurasi pembayaran :
Gambar analisa dan perencanaan.44 Tampilan Konfigurasi Pembayaran
10. Tampilan Cetak Bukti Pembayaran SPP
50
Tampilan cetak bukti pembayaran SPP untuk Bendahara dapat dilihat pada
gambar berikut :
Gambar analisa dan perencanaan.45 Tampilan Cetak Bukti Pembayaran Spp
11. Tampilan Form Bukti Pembayaran SPP
Tampilan form bukti pembayaran SPP untuk Bendahara yang akan dicetak
dapat dilihat pada gambar berikut :
Gambar analisa dan perencanaan.46 Tampilan Form Bukti Pembayaran SPP
12. Tampilan Form Cetak Laporan Pembayaran SPP
51
Tampilan form cetak laporan pembayaran SPP untuk Bendahara dapat
Gambar analisa dan perencanaan.47 Tampilan Form Cetak Laporan Pembayaran

SPP
13. Tampilan Laporan Pembayaran SPP
Tampilan laporan yang akan dicetak untuk Bendahara dapat dilihat pada
gambar berikut :
Gambar analisa dan perencanaan.48 Tampilan Laporan Pembayaran SPP
52
14. Tampilan Halaman Pengaturan
Tampilan halaman pengaturan merupakan penentuan nominal SPP
berdasarkan tahun masuk setiap siswa, berikut ini adalah tampilan halaman
pengaturan :
Gambar analisa dan perencanaan.49 Tampilan Halaman Pengaturan

15. Tampilan Form Tambah Data Nominal Pembayaran
Tampilan form tambah data nominal pembayaran dapat dilihat pada

gambar berikut ini :
Gambar analisa dan perencanaan.50 Tampilan Form Tambah Data Nominal

Pembayaran
53
16. Tampilan Form Ubah Data Nominal Pembayaran
Tampilan form ubah data nominal pembayaran dapat dilihat pada gambar
berikut ini :
Gambar analisa dan perencanaan.51 Tampilan Form Ubah Data Nominal

Pembayaran
17. Halaman Data Pembayaran Siswa
Tampilan halaman data pembayaran SPP untuk Siswa dapat dilihat pada
gambar berikut :
Gambar analisa dan perencanaan.52 Tampilan Halaman Data Pembayaran Siswa
54
18. Halaman Profil Bendahara
Tampilan halaman profil merupakan tampilan yang berisikan biodata
pengguna yang sedang login. Berikut adalah tampilan profil untuk Bendahara :
Gambar analisa dan perencanaan.53 Tampilan Halaman Profil Bendahara
19. Halaman Profil Siswa

pengguna yang sedang login. Berikut adalah tampilan profil untuk Siswa :
Gambar analisa dan perencanaan.54 Tampilan Halaman Profil Siswa
55
20. Tampilan Form Ubah Password Bendahara
Tampilan form ubah password bendahara dapat dilihat pada gambar
berikut ini :
Gambar analisa dan perencanaan.55 Tampilan Form Ubah Password Bendahara
21. Tampilan Form Ubah Profil Bendahara

Tampilan form ubah profil bendahara dapat dilihat pada gambar berikut ini :
Gambar analisa dan perencanaan.56 Tampilan Form Ubah Profil Bendahara
56
22. Tampilan Form Ubah Profil Siswa
Tampilan form edit password siswa dapat dilihat pada gambar berikut ini :
Gambar analisa dan perencanaan.57 Tampilan Form Ubah Password Siswa
IV.5.2 High Fidelity

Berikut adalah rancangan interface high fidelity sistem pembayaran SPP :
1. Halaman Login
Rancangan interface halaman login dapat dilihat pada gambar berikut :
Gambar analisa dan perencanaan.58 Halaman Login
57
2. Halaman Dashboard Bendahara
untuk Bendahara :
Gambar analisa dan perencanaan.59 Halaman Dashboard Bendahara
3. Halaman Dashboard Siswa

untuk Siswa :
Gambar analisa dan perencanaan.60 Halaman Dashboard Siswa
58
4. Tampilan Halaman Data Siswa
berikut :
Gambar analisa dan perencanaan.61 Tampilan Halaman Data Siswa
5. Tampilan Form Tambah Data Siswa

gambar berikut :
Gambar analisa dan perencanaan.62 Tampilan Form Tambah Data Siswa
59
6. Tampilan Form Edit Data Siswa
Tampilan form edit data siswa untuk Bendahara dapat dilihat pada gambar
berikut :
Gambar analisa dan perencanaan.63 Tampilan Form Edit Data Siswa
7. Halaman data pembayaran SPP

Gambar analisa dan perencanaan.64 Tampilan Halaman Data Pembayaran SPP
60
8. Tampilan Form Input Data Pembayaran SPP
Gambar analisa dan perencanaan.65 Tampilan Input Data Pembayaran SPP
9. Tampilan Konfigurasi Pembayaran

Gambar analisa dan perencanaan.66 Tampilan Konfigurasi Pembayaran
61
10. Tampilan Cetak Bukti Pembayaran SPP
gambar berikut :
Gambar analisa dan perencanaan.67 Tampilan Cetak Bukti Pembayaran Spp
11. Tampilan Form Bukti Pembayaran SPP
Tampilan form bukti pembayaran SPP untuk Bendahara yang akan dicetak
dapat dilihat pada gambar berikut :
Gambar analisa dan perencanaan.68 Tampilan Form Bukti Pembayaran SPP
62
12. Tampilan Form Cetak Laporan Pembayaran SPP

Gambar analisa dan perencanaan.69 Tampilan Form Cetak Laporan Pembayaran

SPP
13. Tampilan Laporan Pembayaran SPP
gambar berikut :
Gambar analisa dan perencanaan.70 Tampilan Laporan Pembayaran SPP
63
14. Tampilan Halaman Pengaturan

pengaturan :
Gambar analisa dan perencanaan.71 Tampilan Halaman Pengaturan
15. Tampilan Form Tambah Data Nominal Pembayaran

Gambar analisa dan perencanaan.72 Tampilan Form Tambah Data Nominal

Pembayaran
64
16. Tampilan Form Ubah Data Nominal Pembayaran
Tampilan form ubah data nominal pembayaran dapat dilihat pada gambar
berikut ini :
Gambar analisa dan perencanaan.73 Tampilan Form Ubah Data Nominal

Pembayaran
17. Halaman Data Pembayaran Siswa
gambar berikut :
Gambar analisa dan perencanaan.74 Tampilan Halaman Data Pembayaran Siswa
65
18. Halaman Profil Bendahara

Gambar analisa dan perencanaan.75 Tampilan Halaman Profil Bendahara
19. Halaman Profil Siswa

Gambar analisa dan perencanaan.76 Tampilan Halaman Profil Siswa
66
20. Tampilan Form Ubah Password Bendahara
berikut ini :
Gambar analisa dan perencanaan.77 Tampilan Form Ubah Password Bendahara
21. Tampilan Form Ubah Profil Bendahara

Gambar analisa dan perencanaan.78 Tampilan Form Ubah Profil Bendahara
22. Tampilan Form Ubah Profil Siswa
67
Tampilan form edit password siswa dapat dilihat pada gambar berikut ini :
Gambar analisa dan perencanaan.79 Tampilan Form Ubah Password Siswa
IV.6 Navigasi
Pada tampilan sistem memiliki fitur navigasi yang terletak pada sebelah kiri
interface sistem. Namun, fitur navigasi yang terdapat pada user bendahara dan
siswa berbeda, berikut ini penjelasannya :
1. User Bendahara
Pada user bendahara memiliki beberapa navigasi yaitu :
c. Dashboard
Pada navigasi dashboard menampilkan data pembayaran yang masuk
pada hari ini dalam bentuk tabel yaitu NISN, nama, tanggal pembayaran
dan nominal.
d. Data siswa
Pada menu data siswa menampilkan semua data siswa yaitu NISN,
nama, jenis kelamin, tahun masuk dan alamat.
e. Data pembayaran
Pada navigasi data pembayaran menampilkan data siswa yang telah
membayar yaitu NISN, nama, tanggal pembayaran, bulan pembayaran
dan tahun. Dan pada menu data pembayaran ini bendahara melakukan
proses pembayaran SPP.
68
f. Pengaturan
Pada menu navigasi pengaturan menampilkan nominal pembayaran
uang SPP berdasarkan tahun masuk siswa.
g. Profil
Pada navigasi profil menampilkan data pengguna yang sedang login ke
dalam sistem.
h. Logout
Navigasi logout memberikan fungsi untuk keluar dari sistem.
2. Siswa/i
Pada user siswa memiliki beberapa navugasi yaitu :
a. Dashboard
Pada navigasi dashboard siswa menampilkan foto dan visi dari
sekolah.
b. Data Pembayaran
Pada navigasi data pembayaran menampilkan riwayat pembayaran
yang telah dilakukan oleh siswa.
c. Profil
Pada navigasi profil menampilkan data pengguna yang sedang login ke
dalam sistem.
IV.7 Tipografi
Jenis huruf yang digunakan pada sistem aplikasi pembayaran uang
Sumbangan Pembinaan Pendidikan adalah dengan ukuran 1 rem hurufnya adalah
Segoe UI dan Helvetica Neue dengan pemilihan warna huruf putih. Sedangkan
untuk jenis huruf pada halaman login menggunakan huruf Footlight MT Light
dengan ukuran 30px dan warna tulisan hitam.
Alasan menggunakan jenis font diatas adalah menggambarkan sesuatu yang

global dan dapat diterima oleh segala golongan serta agar tulisan dapat dibaca
dengan jelas sekaligus memperindah tampilan pada sistem. Pemilihan ukuran teks
69
pada dasarnya adalah memilih ukuran yang nyaman untuk dibaca dan membuat
jelas hierarkinya.
IV.8 Warna
Warna memegang peranan penting dari sebuah sistem, warna juga bisa
menjadi referensi dan memiliki makna tersendiri. Warna merupakan hal penting
dan unik dalam dunia desain visual. Warna tidak memiliki bentuk, ukuran maupun
simbol untuk menyampaikan pesan secara langsung. Akan tetapi, warna mampu
berbicara melalui emosi alam bawah sadar manusia, sehingga dapat
mempengaruhi pikiran serta suasana hati orang yang melihatnya. Warna-warna
yang digunakan pada sistem ini adalah sebagai berikut :
1. Background
Pada background sistem, warna yang digunakan adalah warna biru dengan
kode warna #4E73DF. Karena biru merupakan warna yang termasuk
tenang dan bersifat profesional. Penerapan warna biru ke dalam website
untuk menunjukan sifat ketenangan, intelektual, serta bijaksana.
2. Font
Warna tulisan pada sistem yang digunakan adalah warna putih dengan
kode warna #FFFFFF. Pemilihan warna putih untuk tulisan karena agar
tulisan dapat dibaca dengan jelas karena background berwarna gelap.
3. Tombol button
Tombol button yang terdapat pada sistem terdapat 4 tombol, yakni :
a. Button login
Pada tombol button login menggunakan warna hijau dengan kode
warna #1CC88A. Warna hijau merupakan warna sekunder hasil
kombinasi antara warna biru dan kuning. Warna hijau adalah warna
dingin/sejuk yang sering dikaitkan dengan lingkungan dan alam.
Sehingga warna hijau dapat disimbolkan dengan pertumbuhan,
pembaharuan dan kestabilan.
b. Button tambah
70
Tombol button tambah data menggunakan warna biru dengan kode
warna #4E73DF. Biru sering di sebut warna corporate karena hampir
semua perusahaan menggunakan warna biru sebagai warna utamanya.
Karena biru merupakan warna yang termasuk tenang dan bersifat
profesional. Penerapan warna biru ke dalam website untuk
menunjukan sifat ketenangan, intelektual, serta bijaksana.
c. Button edit
Tombol button edit menggunakan warna hijau, dengan kode
#1CC88A. Warna hijau merupakan warna sekunder hasil kombinasi
antara warna biru dan kuning. Warna hijau adalah warna dingin/sejuk
yang sering dikaitkan dengan lingkungan dan alam. Sehingga warna
hijau dapat disimbolkan dengan pertumbuhan, pembaharuan dan
kestabilan.
d. Button hapus
Tombol button hapus menggunakan warna merah dengan kode warna
#E74A3B. Warna merah merupakan salah satu warna primer/utama
yang dianggap cukup efektif jika digunakan untuk tombol hapus.
Secara umum, warna merah memang memiliki daya tarik yang cukup
kuat, karena warna merah yang terlihat kontras, seringkali
diasosiasikan sebagai peringatan, penunjuk bahaya, kewaspadaan dan
tidak stabil.
IV.9 Gambar, Icon dan Logo

Gambar merupakan media visual yang dapat menimbulkan daya Tarik kepad
pengguna, memperjelas bagian yang penting dan memberikan informasi. Adapun
gambar yang digunakan pada sistem adalah sebagai berikut :
Table analisa dan perencanaan.13 Gambar Yang Terdapat Pada

Sistem
71
Gambar Keterangan
Gambar sekolah yang digunakan sebagai

halaman login dan dashboard siswa
Gambar sekolah tampak depan samping

kanan yang digunakan sebagai halaman
dashboard siswa.
Icon terbagi menjadi dua yaitu icon yang dapat diklik dan icon yang tidak
dapat diklik namun hanya memberikan sebuah informasi. Icon yang digunakan
pada sistem adalah sebagai berikut :
Table analisa dan perencanaan.14 Icon Yang Terdapat Pada

Sistem
Icon Keterangan
Melambangkan bahwa pengguna tersebut yang sedang

login.
Memiliki fungsi dapat mengurutkan suatu data

berdasarkan data terbaru atau data terdahulu.
Memiliki fungsi sebagai penentu suatu kondisi, misalnya

pada pemilihan jenis kelamin, apakah laki-laki atau
perempuan.
72
Melambangkan sebagai password yang artinya rahasia.
Memberi pesan bahwa data yang diinput tidak boleh

kosong atau harus terisi.
Memiliki fungsi untuk mendownload suatu file.
Melambangkan sebagai pengguna atau pemakai dalam

sistem.
Melambangkan sebagai Pendidikan, karena studi kasus

pada sistem adalah sekolah.
Melambangkan konektivitas yang terjadi didalam

pembayaran uang sumbangan pembinaan Pendidikan yang
berbentuk sistem aplikasi berbasis web.
Icon yang berhubungan dengan symbol uang yang

digunakan pada menu pembayaran.
Melambangkan keluar atau logout dari suatu sistem.
Melambangkan menu pengaturan yang terdapat pada

sistem.
Logo adalah simbol dari suatu organisasi kelompok dan bisa juga perorangan
yang mencerminkan makna atau pesan yang ingin disampaikan dari kelompok
atau organisasi tersebut. Logo ialah identitas, Logo yang baik akan mencerminkan
kesan yang baik juga terhadap pemiliknya. Logo yang digunakan pada sistem
adalah sebagai berikut :
73
Table analisa dan perencanaan.15 Logo Yang Terdapat Pada
Sistem
Logo Keterangan
Tut Wuri Handayani merupakan logo resmi yang

digunakan Kementerian Pendidikan dan Kebudayaan
Indonesia dan insatansi di bawah naungannya yang
dicetuskan oleh Ki Hajar Dewantara.
Mencerminkan makna bahwa sekolah bergerak dalam
bidang keagamaan yang menggunakan kurikulum
Muhammadiyah.
BAB V
IMPLEMENTASI
V.1 Implementasi
Implementasi merupakan tahap penerapan dari hasil analisis dan
perancangan interface. Tujuan implementasi sistem ini yaitu sebagai berikut :
1. Menerapkan hasil dari analisis dan perancangan interface pada proses

sistem.
2. Memastikan bahwa pengguna dapat mengoperasikan sistem.
V.2 Lingkungan Implementasi

Lingkungan implementasi terdiri atas perangkat penunjang yang dibutuhkan
untuk melakukan tahap implementasi. Perangkat penunjang tersebut terdiri atas
perangkat keras dan perangkat lunak.
1. Perangkat keras :
a. Processor : Intel(R) Core(TM) i3-4005U CPU @1.70 GHz
b. Memory : 6 GB
74
c. Harddisk : 500 GB
2. Perangkat lunak :
a. Sistem Operasi : Microsoft Windows 10
b. Bahasa Pemrograman : PHP
c. Browser : Google Chrome
d. Text Editor : Visual Studio Code
e. Framework : CodeIgniter
f. Web server : XAMPP
V.3 Implementasi Sistem

Berikut adalah hasil implementasi dari analisa dan perancangan Sistem
Pembayaran Uang Ppembinaan Sekolah (SPP) :
V.3.1 Halaman Login

Tampilan halaman login merupakan tampilan awal ketika pengguna ingin
mengakses sistem. Berikut adalah gambar tampilan halaman login :
Gambar implementasi.80 Halaman Login
75
V.3.2 Halaman Dashboard Bendahara
untuk Bendahara :
Gambar implementasi.81 Halaman Dashboard Bendahara
V.3.3 Halaman Dashboard Siswa

pengguna ketika berhasil melakukan login. Berikut adalah tampilan beranda untuk
Siswa :
Gambar implementasi.82 Halaman Dashboard Siswa
76
V.3.4 Tampilan Halaman Data Siswa
berikut :
Gambar implementasi.83 Tampilan Halaman Data Siswa
V.3.5 Tampilan Form Tambah Data Siswa

gambar berikut :
Gambar implementasi.84 Tampilan Form Tambah Data Siswa
77
V.3.6 Tampilan Form Ubah Data Siswa
Tampilan form ubah data siswa untuk Bendahara dapat dilihat pada gambar
berikut :
Gambar implementasi.85 Tampilan Form Ubah Data Siswa
V.3.7 Halaman Data Pembayaran

Gambar implementasi.86 Tampilan Halaman Data Pembayaran
78
V.3.8 Tampilan Form Input Data Pembayaran
Gambar implementasi.87 Tampilan Form Input Data Pembayaran
V.3.9 Tampilan Konfigurasi Pembayaran

Gambar implementasi.88 Tampilan Konfigurasi Pembayaran
79
V.3.10 Tampilan Cetak Bukti Pembayaran
gambar berikut :
Gambar implementasi.89 Tampilan Cetak Bukti Pembayaran
V.3.11 Tampilan Form Cetak Bukti Pembayaran

Tampilan form cetak bukti pembayaran SPP untuk Bendahara dapat dilihat
Gambar implementasi.90 Tampilan Form Cetak Bukti Pembayaran
80
V.3.12 Tampilan Form Cetak Laporan Pembayaran
Gambar implementasi.91 Tampilan Form Cetak Laporan Pembayaran
V.3.13 Tampilan Laporan Pembayaran

gambar berikut :
Gambar implementasi.92 Tampilan Form Laporan Pembayaran
81
V.3.14 Tampilan Halaman Pengaturan
pengaturan :
Gambar implementasi.93 Tampilan Halaman Pengaturan
V.3.15 Tampilan Tambah Data Nominal Pembayaran

Gambar implementasi.94 Tampilan Tambah Data Nominal Pembayaran
82
V.3.16 Tampilan Ubah Data Nominal Pembayaran
Gambar implementasi.95 Tampilan Ubah Data Nominal Pembayaran
V.3.17 Halaman Data Pembayaran Siswa

gambar berikut :
Gambar implementasi.96 Tampilan Halaman Data Pembayaran Siswa
83
V.3.18 Halaman Profil Bendahara
Gambar implementasi.97 Halaman Profil Bendahara
V.3.19 Halaman Profil Siswa

Gambar implementasi.98 Halaman Profil Siswa
84
V.3.20 Tampilan Form Ubah Password Bendahara
berikut ini :
Gambar implementasi.99 Tampilan Form Ubah Password Bendahara
V.3.21 Tampilan Form Ubah Profil Bendahara

Gambar implementasi.100 Tampilan Form Ubah Profil Bendahara
V.3.22 Tampilan Form Ubah Password Siswa

Tampilan form ubah password siswa dapat dilihat pada gambar berikut ini :
85
Gambar implementasi.101 Tampilan Form Ubah Password Siswa
BAB VI
PENUTUP
VI.1 Kesimpulan
Kesimpulan yang dapat diambil dari rancang bangun system yang dilakukan
di SD Muhammadiyah IV Pekanbaru terhadap implementasi dari sebuah sistem
pembayaran uang SPP adalah sebagai berikut :
1. Sistem pembayaran uang SPP ini dapat berguna dengan semestinya dan
layak digunakan, sehingga dapat membantu pihak sekolah dalam membayar
uang Sumbangan Pembinaan Pendidikan (SPP) dengan teknologi yang
digunakan pada system yang telah dibuat.
2. Sistem pembayaran uang SPP ini dapat memudahkan pihak sekolah

terutama Bendahara dalam melihat data siswa, melihat data pembayaran
siswa, mencetak bukti dan laporan pembayaran. System ini juga membantu
siswa ataupun orang tua siswa dalam melihat history pembayaran yang telah
dilakukan dan dapat mencetak bukti pembayaran SPP kapanpun jika
sewaktu-waktu bukti pembayaran hilang.
86
VI.2 Saran
Adapun saran yang dapat penulis berikan kepada pembaca untuk
pengembangan sistem ini menjadi lebih baik kedepannya adalah sebagai berikut :
1. Menambahkan keterangan siswa sedang berada dikelas berapa..
2. Menambahkan fitur pembayaran yang dapat dilakukan secara online.
87

Laporan Pembayaran SPP SD Muhammadiyah Iv Pekanbaru

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Laporan Pembayaran SPP SD Muhammadiyah Iv Pekanbaru

Diunggah oleh

Hak Cipta:

Format Tersedia

LAPORAN

RANCANG BANGUN SISTEM PEMBAYARAN UANG

UIN SUSKA RIAU

1. FAHRIZALDI HUSTIANTO 11751101220

Dosen Pengampu : Pizaini, ST

Assalamu’alaikum wa rahmatullahi wa barakaatuh

Alhamdulillahi robbil’alamin, puji syukur penulis ucapkan kehadirat Allah

1. Bapak Prof. Dr. H. Akhmad Mujahidin, M.Ag, selaku Rektor Universitas

5. Teristimewa untuk keluarga dan teman-teman seperjuangan yang selalu

Wassalamu ‘alaikum wa rahmatullahi wa barakaatuh

Pekanbaru, 01 Desember 2019

1.2 Maksud dan Tujuan..................................................................................................2

1.5 Ruang Lingkup..........................................................................................................2

1.5.1 Lingkup Kegiatan...............................................................................................2

1.5.2 Lingkup Aplikasi.................................................................................................3

1.5.4 Jangka Waktu....................................................................................................3

1.5.6 Jadwal Pelaksanaan...........................................................................................4

1.5.7 Rincian Biaya.....................................................................................................4

BAB II PROFIL INSTANSI..................................................................................6

2.2 Visi dan Misi.............................................................................................................6

2.3 Struktur Organisasi...................................................................................................7

BAB III LANDASAN TEORI...............................................................................8

3.2 Defenisi PHP.............................................................................................................9

3.3 Defenisi MySQL........................................................................................................9

3.5 Defenisi Unified Modelling Language (UML)..........................................................10

BAB IV ANALISA DAN PERENCANAAN......................................................12

4.2 Analisa Sistem Lama...............................................................................................13

4.3 Analisa Sistem Baru................................................................................................14

4.4 Unified Modeling Language (UML).........................................................................15

4.4.1 Use Case Diagram...........................................................................................15

4.4.2 Use Case Spesification.....................................................................................16

4.4.3 Sequence Diagram...........................................................................................26

4.4.4 Class Diagram..................................................................................................35

4.4.5 Activity Diagram..............................................................................................36

4.5 Perancangan Interface............................................................................................44

4.5.1 Low Fidelity......................................................................................................44

4.5.2 High Fidelity.....................................................................................................56

4.9 Gambar, Icon dan Logo...........................................................................................70

5.2 Lingkungan Implementasi.......................................................................................73

5.3 Implementasi Sistem..............................................................................................74

5.3.1 Halaman Login.................................................................................................74

5.3.2 Halaman Dashboard Bendahara......................................................................74

5.3.3 Halaman Dashboard Siswa..............................................................................75

5.3.4 Tampilan Halaman Data Siswa.........................................................................75

5.3.5 Tampilan Form Tambah Data Siswa.................................................................76

5.3.6 Tampilan Form Ubah Data Siswa.....................................................................76

5.3.8 Tampilan Form Input Data Pembayaran..........................................................77

5.3.9 Tampilan Konfgurasi Pembayaran...................................................................78

5.3.10 Tampilan Cetak Bukti Pembayaran................................................................78

5.3.11 Tampilan Form Cetak Bukti Pembayaran.......................................................79

5.3.12 Tampilan Form Cetak Laporan Pembayaran..................................................79

5.3.13 Tampilan Laporan Pembayaran......................................................................80

5.3.14 Tampilan Halaman Pengaturan......................................................................80

5.3.15 Tampilan Tambah Data Nominal Pembayaran...............................................81

5.3.16 Tampilan Ubah Data Nominal Pembayaran...................................................81

5.3.17 Halaman Data Pembayaran Siswa..................................................................82

5.3.18 Halaman Profl Bendahara.............................................................................82

5.3.19 Halaman Profl Siswa.....................................................................................83

5.3.20 Tampilan Form Ubah Password Bendahara..................................................83

5.3.21 Tampilan Form Ubah Profl Bendahara.........................................................84

5.3.22 Tampilan Form Ubah Password Siswa...........................................................84

Gambar 2.1 Struktur Organisasi Instansi............................................................................7