bab iv perancangan sistem usulan...aplikasi web pembayaran spp dengan memasukkan username dan...
TRANSCRIPT
26
BAB IV
PERANCANGAN SISTEM USULAN
4.1. Tahapan Perancangan Sistem
4.1.1. Analisis Kebutuhan
Dalam mengidentifikasi kebutuhan fungsional program, penulis akan membuat
kebutuhan yang dapat diperoleh berdasarkan kebutuhan pengguna dan kebutuhan
sistem yang terkait dengan proses pembayaran SPP pada TKQ Markaz Hanan
Karawang yang diusulkan.
A. Kebutuhan Pengguna
Dalam aplikasi web pembayaran SPP terdapat dua pengguna yang dapat saling
berinteraksi dalam lingkungan sistem, yaitu: Admin dan Orang Tua Siswa. Kedua
pengguna tersebut memiliki karakteristik interaksi dengan sistem yang berbeda-beda
dan memiliki kebutuhan informasi yang berbeda-beda, seperti berikut:
1. Skenario Kebutuhan Admin
a) Melakukan log in.
b) Mengelola data siswa.
c) Mengelola pembayaran SPP.
d) Membuat laporan pembayaran SPP.
e) Melakukan log out.
2. Skenario Kebutuhan Orang Tua Siswa
a) Melakukan log in.
b) Melihat laporan pembayaran SPP.
c) Melakukan log out.
27
3. Skenario Kebutuhan Direktur
a) Direktur dapat melihat laporan bulanan.
B. Kebutuhan Sistem
Berikut kebutuhan sistem bagian Admin dan Orang Tua Siswa:
1. Kebutuhan Sistem Admin
1) Pengguna harus melakukan log in terlebih dahulu untuk dapat mengakses
aplikasi web pembayaran SPP dengan memasukkan username dan password
agar privasi pengguna tetap terjaga keamanannya.
2) Mengelola data siswa dan pembayaran SPP dan sistem akan menyimpan data
tersebut ke dalam database.
3) Pengguna dapat melihat data siswa yang melakukan transaksi pembayaran
dan mencetak apabila dibutuhkan.
4) Pengguna dapat membuat laporan yang tersimpan di dalam database.
5) Pengguna harus melakukan log out setelah selesai menggunakan aplikasi web
pembayaran SPP.
2. Kebutuhan Sistem Orang Tua Siswa
a) Pengguna harus melakukan log in terlebih dahulu untuk dapat mengakses
aplikasi web pembayaran SPP dengan memasukkan username dan password
agar privasi pengguna tetap terjaga keamanannya.
b) Pengguna dapat melihat laporan yang tersimpan, bulan apa saja yang sudah
dibayar.
c) Pengguna harus melakukan log out setelah selesai menggunakan aplikasi web
pembayaran SPP.
28
4.1.2. Rancangan Diagram Use Case
Gambar IV.1. Rancangan Diagram Use Case
Tabel IV.1.
Deskripsi Rancangan Melakukan Pembayaran
Use Case Name Melakukan Pembayaran
Requirements Siswa memberikan uang SPP
Goal Pembayaran SPP setiap bulan
Pre-Conditions Siswa menyetor uang SPP
Post-Conditions Dicatat transaksi pembayaran ke
dalam kartu SPP
Failed end Condition Tidak membawa kartu SPP
Actors Orang tua siswa
Main Flow/Basic Path
1. Siswa menyetorkan
kartu SPP ke bendahara
2. Siswa menyerahkan
uang SPP ke bendahara
3. Siswa menerima
kartu SPP yang telah dicatat oleh
bendahara
Alternate Flow/Invariant A A1. Pencatatan transaksi pembayaran
29
SPP ke dalam kartu SPP
Invariant B
B1. Orang tua siswa menyerahkan
kartu SPP
B2. Orang tua siswa menyerahkan
uang SPP
B3. Orang tua siswa menerima kartu
SPP yang telah dicatat transaksi
pembayaran
Tabel IV.2.
Deskripsi Rancangan Use Case Log In Siswa
Use Case Name Log in
Requirements Memasukkan username dan password
Goal Mengakses halaman website
Pre-Conditions Melakukan log in
Post-Conditions Memiliki username dan password
Failed end Condition Jika gagal log in tidak dapat masuk ke
menu utama
Actors Orang tua siswa
Main Flow/Basic Path
1. Orang tua siswa
dapat mengakses halaman website
2. Melakukan log in
3. Memasukkan
username dan password
4. Jika data tidak tepat
menampilkan pesan “NIS atau
Password salah. Silakan ulangi
kembali.”
5. Jika berhasil log in,
sistem menampilkan menu utama.
6. Memilih kategori
yang dituju.
Alternate Flow/Invariant A A1. Sistem memproses username dan
password
Invariant B
B1. Orang tua siswa memasukkan
username dan password
B2. Jika data tidak tepat menampilkan
pesan “Username atau Password
salah. Silakan ulangi kembali.”
B3. Sistem menampilkan menu utama
Tabel IV.3.
Deskripsi Rancangan Use Case Log In Admin
Use Case Name Log in
30
Requirements Memasukkan username dan password
Goal Mengakses halaman website
Pre-Conditions Melakukan log in
Post-Conditions Memiliki username dan password
Failed end Condition Jika gagal log in tidak dapat masuk ke
menu utama
Actors Admin
Main Flow/Basic Path
1. Admin dapat
mengakses halaman website
2. Melakukan log in
3. Memasukkan
username dan password
4. Jika data tidak tepat
menampilkan pesan “Username
atau Password salah. Silakan
ulangi kembali.”
5. Jika berhasil log in,
sistem menampilkan menu utama.
6. Memilih kategori
yang dituju.
Alternate Flow/Invariant A A1. Sistem memproses username dan
password
Invariant B
B1. Admin memasukkan username
dan password
B2. Jika data tidak tepat menampilkan
pesan “Username atau Password
salah. Silakan ulangi kembali.”
B3. Sistem menampilkan menu utama
B4. Admin memilih kategori yang
dituju
Tabel IV.4.
Deskripsi Rancangan Use Case Melihat Laporan Pembayaran
Use Case Name Melihat Laporan Pembayaran
Requirements Orang tua siswa melihat laporan setiap
bulan
Goal Memeriksa pembayaran setiap bulan
yang sudah dibayar
Pre-Conditions Mengecek pembayaran setiap bulan
Post-Conditions Melihat laporan akhir bulan setiap
transaksi pembayaran SPP
Failed end Condition Proses pencarian laporan gagal
Actors Orang tua siswa
Main Flow/Basic Path
1. Orang tua siswa log
in dengan NIS dan Password
2. Orang tua siswa
31
melihat laporan pembayaran
Alternate Flow/Invariant A A1. Pemeriksaan pembayaran setiap
bulan
Invariant B
B1. Orang tua siswa memeriksa
pembayaran setiap bulan yang
sudah dibayar
B2. Orang tua siswa melihat laporan
akhir bulan setiap transaksi
pembayaran SPP
Tabel IV.5.
Deskripsi Rancangan Use Case Melakukan Log out
Use Case Name Log out
Requirements Pengguna dapat melakukan log out
Goal Pengguna telah selesai menggunakan
aplikasi web pembayaran
Pre-Conditions Pengguna keluar dari halaman web
pembayaran
Post-Conditions Telah keluar dari website
Failed end Condition Pengguna tidak dapat log out
Actors Orang tua siswa
Main Flow/Basic Path
1. Pengguna memilih
log out
2. Sistem keluar dari
akses web
Alternate Flow/Invariant A A1. Sistem keluar dari web
pembayaran SPP
Invariant B B1. Pengguna memilih menu log out
B2. Sistem keluar dari akses web
Tabel IV.6.
Deskripsi Rancangan Use Case Mengelola Data Siswa
Use Case Name Mengelola data siswa
Requirements Admin dapat menambah, menghapus
dan edit data siswa
Goal Untuk pembayaran
Pre-Conditions Pengguna telah melakukan log in
Post-Conditions Menambah, menghapus dan edit data
siswa
Failed end Condition Data sudah ada
Actors Admin
Main Flow/Basic Path 1. Pengguna telah
melakukan log in
32
2. Pengguna memilih
menu data siswa
3. Admin dapat melihat
data siswa
4. Pengguna dapat
menambah, menghapus dan edit
data siswa
5. Sistem menampilkan
form data siswa
Alternate Flow/Invariant A A1. Sistem menampilkan data siswa
Invariant B
B1. Pengguna memilih menu data
siswa
B2. Pengguna menambah data siswa
B3. Sistem menampilkan data siswa
Tabel IV.7.
Deskripsi Rancangan Use Case Mengelola Transaksi Pembayaran
Use Case Name Transaksi Pembayaran
Requirements Admin dapat melakukan transaksi
pembayaran SPP
Goal Admin dapat melihat data transaksi
pembayaran
Pre-Conditions Admin melilhat data transaksi
pembayaran melalui web
Post-Conditions Data transaksi pembayaran SPP
tersimpan ke dalam database
Failed end Condition Pengguna tidak dapat melakukan
transaksi pembayaran
Actors Admin
Main Flow/Basic Path
1. Pengguna telah log in
2. Pengguna memilih
menu transaksi pembayaran
3. Admin melihat data
transaksi pembayaran
4. Admin melakukan
transaksi pembayaran
5. Sistem menampilkan
form transaksi pembayaran
Alternate Flow/Invariant A
A1. Sistem melakukan penyimpanan
ke dalam database
A2. Sistem menampilkan data yang
telah tersimpan di dalam database
Invariant B
B1. Admin memilih menu transaksi
pembayaran
B2. Sistem menyimpan data transaksi
pembayarans
33
Tabel IV.8.
Deskripsi Rancangan Use Case Melakukan Log Out
Use Case Name Log out
Requirements Pengguna dapat melakukan log out
Goal Pengguna telah selesai menggunakan
aplikasi web pembayaran
Pre-Conditions Pengguna keluar dari halaman web
pembayaran
Post-Conditions Telah keluar dari website
Failed end Condition Pengguna tidak dapat log out
Actors Admin
Main Flow/Basic Path
1. Pengguna memilih
log out
2. Sistem keluar dari
akses web
Alternate Flow/Invariant A A1. Sistem keluar dari web
pembayaran SPP
Invariant B B1. Pengguna memilih menu log out
B2. Sistem keluar dari akses web
Tabel IV.9.
Deskripsi Rancangan Use Case Menerima Laporan
Use Case Name Menerima Laporan
Requirements Direktur menerima laporan setiap
bulan
Goal Memeriksa pendapatan setiap bulan
Pre-Conditions Mengecek buku kas masuk
Post-Conditions Menerima laporan akhir bulan setiap
transaksi pembayaran SPP
Failed end Condition Bendahara tidak memberikan laporan
pada Direkturs
Actors Direktur
Main Flow/Basic Path
1. Direktur mengecek
buku kas masuk
2. Direktur menerima
laporan bulanan
Alternate Flow/Invariant A A1. Pemeriksaan pendapatan setiap
bulan
Invariant B
B1. Direktur mengecek buku kas
masuk
B2. Direktur menerima laporan
bulanan transaksi pembayaran
SPP
34
Tabel IV.10.
Deskripsi Rancangan Use Case Melihat Laporan
Use Case Name Melihat Laporan
Requirements Direktur melihat laporan setiap bulan
Goal Memeriksa pendapatan setiap bulan
Pre-Conditions Mengecek buku kas masuk
Post-Conditions Menerima dan melihat laporan akhir
bulan setiap transaksi pembayaran
SPP
Failed end Condition Bendahara tidak memberikan laporan
pada Direktur
Actors Direktur
Main Flow/Basic Path
1. Direktur mengecek
buku kas masuk
2. Direktur menerima
laporan bulanan
Alternate Flow/Invariant A A1. Pemeriksaan pendapatan setiap
bulan
Invariant B
B1. Direktur mengecek buku kas
masuk
B2. Direktur menerima laporan
bulanan transaksi pembayaran
SPP
35
4.1.3. Rancangan Diagram Aktivitas
A. Rancangan Diagram Aktivitas Admin
Gambar IV.2. Rancangan Diagram Aktivitas Admin
36
B. Rancangan Diagram Aktivitas Orang Tua Siswa
Gambar IV.3. Rancangan Diagram Aktivitas Orang Tua Siswa
37
4.1.4. Rancangan Dokumen Sistem Usulan
1. Rancangan Dokumen Masukan
Rancangan dokumen masukan adalah segala bentuk masukan yang diperlukan dalam
sistem data dan selanjutnya akan diolah sesuai dengan kebutuhan. Bentuk-bentuk
dokumen masukan ialah, sebagai berikut:
a. Nama Dokumen : Data Siswa
Fungsi : Sebagai data siswa pada sistem
Sumber : Biodata siswa
Tujuan : Bendahara
Media : Form
Jumlah : -
Frekuensi : Setiap ada siswa baru
Bentuk : Lampiran C.1
b. Nama Dokumen : Pembayaran SPP
Fungsi : Sebagai data pembayaran SPP siswa pada sistem
Sumber : Biodata siswa
Tujuan : Bendahara
Media : Form
Jumlah : -
Frekuensi : Setiap siswa membayar SPP
Bentuk : Lampiran C.2
2. Rancangan Dokumen Keluaran
Bentuk dokumen keluaran adalah semua yang dikeluarkan untuk mencatat segala
kegiatan transaksi pembayaran SPP. Bentuk-bentuk dokumen keluaran ialah sebagai
berikut:
38
a. Nama Dokumen : Struk Pembayaran SPP
Fungsi : Sebagai bukti telah membayar SPP
Sumber : Bendahara
Tujuan : Siswa
Media : File
Jumlah : -
Frekuensi : Setiap transaksi pembayaran
Bentuk : Lampiran D.1
b. Nama Dokumen : Laporan Pembayaran SPP
Fungsi : Sebagai bukti pemasukan setiap bulan
Sumber : Bendahara
Tujuan : Direktur
Media : File
Jumlah : -
Frekuensi : Setiap pembuatan laporan di akhir bulan
Bentuk : Lampiran D.2
4.1.5. Rancangan Prototype
A. Tampilan Prototype Admin
1. Tampilan Log In Admin Aplikasi Pembayaran SPP
Gambar IV.4. Tampilan Log In Admin Aplikasi Pembayaran SPP
39
2. Tampilan Menu Utama Aplikasi Pembayaran SPP
Gambar IV.5. Tampilan Menu Utama Aplikasi Pembayara SPP
3. Tampilan Data Siswa Aplikasi Pembayaran SPP
Gambar IV.6. Tampilan Data Siswa Aplikasi Pembayaran SPP
40
4. Tampilan Transaksi Aplikasi Pembayaran SPP
Gambar IV.7. Tampilan Transaksi Aplikasi Pembayaran SPP
5. Tampilan Laporan Aplikasi Pembayaran SPP
Gambar IV.8. Tampilan Laporan Transaksi Aplikasi Pembayaran SPP
41
B. Tampilan Prototype Orang Tua Siswa
1. Tampilan Log In Aplikasi Pembayaran SPP
Gambar IV.9. Tampilan Log In Orang Tua Siswa
2. Tampilan Menu Utama Orang Tua Siswa
Gambar IV.10. Tampilan Menu Utama Orang Tua Siswa
42
3. Tampilan Laporan Pembayaran Orang Tua Siswa
Gambar IV.11. Tampilan Laporan Pembayaran Orang Tua Siswa
4.2. Perancangan Perangkat Lunak
4.2.1. Entity Relationship Diagram (ERD)
Gambar IV.12. Entity Relationship Diagram (ERD)
43
4.2.2. Logical Record Structure (LRS)
Gambar IV.13. Logical Record Structure (LRS)
4.2.3. Spesifikasi File
Dalam perancangan sistem usulan website ini, penulis menggunakan database yang
bernama spp_db. Database ini terdiri dari 3 tabel, yaitu:
1. Spesifikasi File Admin
Nama File : Admin
Akronim : Admin
Fungsi : Untuk menyimpan data admin
Tipe File : File Master
Organisasi File : Indexed Sequential
Akses File : Random
Media : Harddisk
Panjang Record : 85
Kunci Field : id_user
Software : MySQL
Tabel IV.11.
Spesifikasi File Admin
No Elemen Data Nama Field Tipe Size Ket
1 Id Admin id_admin Int 5 Primary Key
44
2 Username Username Varchar 20 -
3 Password Password Varchar 35 -
4 Level Level Varchar 20 -
2. Spesifikasi File Siswa
Nama File : Siswa
Akronim : Siswa
Fungsi : Untuk menyimpan data siswa
Tipe File : File Master
Organisasi File : Indexed Sequential
Akses File : Random
Media : Harddisk
Panjang Record : 123
Kunci Field : nis
Software : MySQL
Tabel IV.12.
Spesifikasi File Siswa
No Elemen Data Nama Field Tipe Size Ket
1 NIS Nis Int 10 Primary Key
2 Nama Siswa nama_siswa Varchar 40 -
3 Tingkat Tingkat Int 5 -
4 Kelas Kelas Varchar 20 -
5 SPP Spp Int 20 -
3. Spesifikasi File SPP
Nama File : SPP
Akronim : SPP
Fungsi : Untuk memasukkan transaksi pembayaran
Tipe File : File Master
Organisasi File : Indexed Sequential
Akses File : Random
Media : Harddisk
Panjang Record : 86
Kunci Field : id_spp
Software : MySQL
Tabel IV.13.
Spesifikasi File SPP
No Elemen Data Nama Field Tipe Size Ket
1 Id SPP id_spp Int 5 Primary Key
2 NIS Nis Int 10 -
3 Jatuh Tempo Jatuhtempo Date
4 Tingkat Tingkat Int 5 -
45
5 Kelas Kelas Varchar 20 -
6 Bulan Bulan Varchar 20 -
7 No Bayar no_bayar Int 8 -
8 Tanggal Bayar tgl_bayar Date -
9 SPP Spp Int 20 -
10 Keterangan Ket Varchar 20 -
4. Spesifikasi File Detail SPP
Nama File : Detail SPP
Akronim : Detail SPP
Fungsi : Untuk menyimpan jumlah pembayaran
Tipe File : File Master
Organisasi File : Indexed Sequential
Akses File : Random
Media : Harddisk
Panjang Record : 21
Kunci Field : -
Software : MySQL
Tabel IV.14.
Spesifikasi File Detail SPP
No Elemen Data Nama Field Tipe Size Ket
1 Id SPP id_spp Int 5 -
2 Jumlah SPP jumlah_spp Int 11 -
3 Id Admin id_admin Int 5 -
46
4.2.4. Class Model/Class Diagram
Gambar IV.14. Class Model/Class Diagram
4.2.5. Sequence Diagram
Gambar IV.15. Sequence Diagram Pembayaran SPP
47
4.2.6. Spesifikasi Hardware dan Software
1. Spesifikasi Hardware
a. Server
1) CPU
(a) Processor Intel ® Core ™ i3 CPU M 350 @ 2.27GHz 2.27GHz
(b) RAM DDR2 4.00 GB
(c) Hard Disk 500 GB
2) Mouse
3) Keyboard
4) Monitor dengan resolusi layar minimum 1024x768
5) Koneksi internet dengan kecepatan 2 Mbps
b. Client
1) CPU
(a) Processor Intel ® Dual Core
(b) RAM DDR2 2.00 GB
(c) Hard Disk 500 GB
2) Mouse
3) Keyboard
4) Monitor dengan resolusi minimum 1024x768
2. Spesifikasi Software
1. Server
a. Operating System Microsoft Windows 7 Ultimate 64-bit
b. Aplikasi bundle web server seperti: Xampp yang terdiri dari beberapa
komponen, di antaranya:
(1) Aplikasi PHP Server v5
48
(2) Aplikasi MySQL Server v5
(3) Aplikasi phpMyAdmin v3
c. Web Browser yang digunakan Google Chrome dan Mozilla Firefox
2. Client
a. Operating System Microsoft Windows Pro 32-bit
b. Web Browser yang digunakan Google Chrome dan Mozilla Firefox
4.3. Jadwal Implementasi
Tabel IV.15.
Jadwal Implementasi
No. Kegiatan
Waktu
Bulan 1 Bulan 2 Bulan 3
1 2 3 4 1 2 3 4 1 2 3 4
1 Pengumpulan Data
2 Analisa Sistem Berjalan
3 Perancangan Sistem
Usulan
4 Dokumen Input dan
Output Usulan
5 Pembuatan Perancangan
Sistem
6 Tes Sistem
7 Pembuatan Laporan