BAB IV RANCANGAN SISTEM DIUSULKAN
4.1.
Struktur Tabel Basis Data Bagian ini dibuat berdasarkan class diagram yang digambarkan pada bab
sebelumnya, struktur tabel basis data merupakan rincian dari setiap class yang ada pada class diagram. Pembuatan program aplikasi ini penulis menggunakan satu database yaitu smana.sql yang terdiri dari tabel berikut : 1. Tabel datasiswa Nama File
: Data Siswa
Panjang Record
: 144 karakter
Record Key
: nis Tabel 4.1 Spesifikasi File datasiswa
No
Nama Field
Akronim
Tipe
Panjang
Keterangan
1
No Induk Siswa
Nis
Varchar
4
Primary Key
2
Nama Siswa
Namasiswa
Varchar
25
3
Tempat
Tempat
Varchar
15
4
Tgl_lahir
Tgl_lahir
Date
5
Alamat
Alamat
Text
6
Kelas
Kelas
Varchar
10
7
Gender
Gender
Varchar
20
8
Periode
Periode
Varchar
10
9
Nama Orang Tua
Namaortu
Varchar
30
10
Telp Siswa
Telpsiswa
Varchar
15
11
Telp Orang Tua
Telportu
Varchar
15
69 http://digilib.mercubuana.ac.id/
70
2.
Tabel datapengguna Nama File
: Data Pengguna
Panjang Record
: 76 karakter
Record Key
: kodepengguna Tabel 4.2 Spesifikasi File datapengguna
No
Nama Field
Akronim
Tipe
Panjang
Keterangan
1
Kode Pengguna
Kodepengguna
Varchar
3
Primary Key
2
Nama Pengguna
Namapengguna Varchar
20
3
Password
Password
Varchar
32
4
Hak Akses
Akseslevel
Varchar
20
5
Alamat
Alamat
Text
6
Jenis Kelamin
Jk
Varchar
1
3. Tabel databayar Nama File
: Data Bayar
Panjang Record
: 53 karakter
Record Key
: kodebayar Tabel 4.3 Spesifikasi File databayar
No
Nama Field
Akronim
Tipe
Panjang
Keterangan
1
Kode bayar
Kodebayar
Varchar
3
Primary Key
2
Nama bayar
Namabayar
Varchar
25
3
Keterangan
Keterangan
Varchar
25
4
Jumlah bayar
Jumlahbayar
Double
4. Tabel transaksipem Nama File
: Transaksi Pembangunan
Panjang Record
: 46 karakter
Record Key
: notranspem Tabel 4.4 Spesifikasi File transaksipem
No
Nama Field
Akronim
Tipe
Panjang
Keterangan
1
No. Transaksi
Notranspem
Varchar
14
Primary key
2
Tgl Transaksi
Tgltranspem
Date
3
Cicilan
Cicilan
Varchar
1
4
Periode bayar
Periodepem
Varchar
9
5
Totalbayarpem
Ttlbyrpem
Double
6
No. Induk Siswa
Nis
Varchar
http://digilib.mercubuana.ac.id/
4
Foreign key
71
Lanjutan Tabel 4.4 Spesifikasi File Transaksi Pembangunan 7
Kode Pengguna
Kodepengguna
Varchar
3
Foreign key
8
Kode bayar
Kodebayar
Varchar
3
Foreign key
9
Nomor Hutang
nohutang
Varchar
12
Foreign key
5. Tabel transaksiiu Nama File
: Transaksi Iuran Tahunan
Panjang Record
: 65 karakter
Record Key
: notransiu Tabel 4.5 Spesifikasi File transaksiiu
No
Nama Field
Akronim
Tipe
Panjang
Keterangan
1
No Transaksi Iuran
Notransiu
Varchar
13
Primary Key
2
Tanggal Transaksi
Tgltransiu
Date
3
Total Bayar
Ttlbyriu
Double
4
Keterangan Tahun
Ket_tahun
Varchar
30
5
No. Induk Siswa
Nis
Varchar
4
Foreign Key
6
Kode Pengguna
Kodepengguna
Varchar
3
Foreign Key
7
Kode Bayar
Kodebayar
Varchar
3
Foreign Key
8
Nomor Hutang
nohutang
Varchar
12
Foreign Key
6. Tabel transaksiop Nama File
: Pembayaran Operasional Sekolah
Panjang Record
: 45 karakter
Record Key
: notransop Tabel 4.6 Spesifikasi File transaksiop
No
Nama Field
Akronim
Tipe
Panjang
Keterangan
1
Nomor Transaksi
Notransop
Varchar
13
Primary Key
2
Tanggal Transaksi
Tgltransop
Date
3
Semester transaksi
Smtbyrop
Varchar
1
4
Periode Transaksi
Periodeop
Varchar
9
5
Juli
Jul
Double
6
Agustus
Agust
Double
7
September
Sept
Double
8
Oktober
Okt
Double
9
November
Nov
Double
10
Desember
Des
Double
http://digilib.mercubuana.ac.id/
72
Lanjutan Tabel 4.6 Spesifikasi File Transaksi Operasional
7.
11
Januari
Jan
Double
12
Februari
Feb
Double
13
Maret
Mar
Double
14
April
Apr
Double
15
Mei
Mei
Double
16
Juni
Jun
Double
17
Jumlah Bulan
jumlahbulan
Int
18
Total Bayar
Ttlbyrop
Double
19
No. Induk Siswa
Nis
Varchar
4
Foreign Key
20
Kode Pengguna
Kodeuser
Varchar
3
Foreign Key
21
Kode Bayar
Kodebayar
Varchar
3
Foreign Key
22
Nomor Hutang
nohutang
Varchar
12
Foreign Key
Tabel pengumuman Nama File
: Pengumuman
Panjang Record
: 78 karakter
Record Key
: nopeng Tabel 4.7 Spesifikasi File pengumuman
No
Nama Field
Akronim
Tipe
Panjang
Keterangan
1
Nomor Pengumuman
Nopeng
Varchar
13
Primary Key
2
Tanggal Pengumuman
Tglpeng
Date
3
No. Telepon
notelp
Varchar
15
4
Pengumuman
pengumuman
Varchar
50
8. Tabel kotakmasuk Nama File
: kotakmasuk
Panjang Record
: 75 karakter
Record Key
: nomorkm Tabel 4.8 Spesifikasi File Kotak Masuk
No
Nama Field
Akronim
Tipe
Panjang
Keterangan
1
Nomor Kotak Masuk
Nomorkm
Varchar
13
Primary Key
2
Pengirim
Pengirim
Varchar
12
3
Pesan Kotak Masuk
Pesankm
Varchar
50
4
Tanggal Kotak Masuk
Tglkm
Date
http://digilib.mercubuana.ac.id/
73
9. Tabel kotakkeluar Nama File
: kotakkeluar
Panjang Record
: 95 karakter
Record Key
: nomorkk Tabel 4.9 Spesifikasi File Kotak Keluar
No
Nama Field
Akronim
Tipe
Panjang
Keterangan
1
Nomor Kotak Keluar
Nomorkk
Varchar
13
Primary Key
2
Penerima
Penerima
Varchar
12
3
Pesan Kotak Keluar
Pesankk
Varchar
50
4
Tanggal Kotak Keluar
Tglkk
Date
4
Status
Status
Varchar
10
10. Tabel datahutang Nama File
: Data Hutang
Panjang Record
: 43 karakter
Record Key
: nohutang Tabel 4.10 Spesifikasi File datahutang
No
Nama Field
Akronim
Tipe
Panjang
Keterangan
1
Nomor Hutang
Kodebayar
Varchar
12
Primary Key
2
Tanggal Hutang
Tglhutang
Date
3
NIS
Nis
Varchar
25
Foreign Key
4
Kode Pengguna
Kodepengguna
Varchar
3
Foreign Key
5
Kode Bayar
Kodebayar
Varchar
3
Foreign Key
6
Jumlah Hutang
Jumlahhutang
Double
7
Terbayar
Terbayar
Double
8
Sisa Hutang
Sisahutang
Double
http://digilib.mercubuana.ac.id/
74
4.2
Perancangan Tampilan (MockUp) Perancangan ini menggambarkan bagaimana tampilan web support akan dibuat,
seperti diantaranya susunan menu, button, pengisian kolom apakah combo box dll dirincikan pada bagian ini a.
Login Gambar berikut adalah gambar pertama yang muncul ketika Bendahara membuka
aplikasi. Pengguna harus login terlebih dahulu.
Gambar 4.1 Mock Up Login
Login adalah tampilan form login sebelum masuk ke dalam menu uta,a aplikasi penyampaian informasi biaya. Terdapat tombol Login dan Cancel. Ketika pilih tombol login dengan keadaan username dan password benar maka aplikasi akan masuk ke dalam tampilan menu utama.
http://digilib.mercubuana.ac.id/
75
b.
Menu Utama Gambar berikut adalah gambar menu utama yang muncul ketika Pengguna
berhasil login aplikasi.
Gambar 4.2 Mock Up Menu Utama
Gambar diatas adalah Menu utama yaitu tampilan yang akan pertama tampil ketika bendahara berhasil melakukan verifikasi login. Terdapat 4 menu, 1 tombol dan gambar berjalan. Terdapat 2 akses level yaitu wakil bendahara dan kepala bendahara.
http://digilib.mercubuana.ac.id/
76
c.
Data Bayar Gambar berikut adalah halaman yang akan muncul ketika Kepala Bendahara
memilih sub menu Data bayar pada Manajemen Data.
Gambar 4.3 Mock Up Data Bayar
Gambar diatas adalah gambar form data bayar. Data bayar adalah sub menu dari manajemen data. Didalam form ini terdapat kode bayar yang terisi otomatis dan yang lain diisi manual oleh kepala bendahara. Terdapat tombol simpan, ubah, hapus.
http://digilib.mercubuana.ac.id/
77
d.
Data Siswa Gambar berikut adalah halaman yang akan muncul ketika Kepala Bendahara
memilih sub menu Data siswa pada Manajemen Data.
Gambar 4.4 Mock Up Data Siswa
Gambar diatas adalah Mock Up form Data siswa. Data siswa dapat diakss oleh Kepala Bendahara. Cara akses form ini adalah dengan cara memilih sub menu Manajemen data yaitu data siswa. Dalam data siswa pilih tambah untuk menambah data, sedangkan ubah untuk mengubah dan haus untuk menghapus data.
http://digilib.mercubuana.ac.id/
78
e.
Data Pengguna Gambar berikut adalah halaman yang akan muncul ketika Kepala Bendahara
memilih sub menu Data pengguna pada Manajemen Data.
Gambar 4.5 Mock Up Data Pengguna
Gambar diatas adalah Mock Up form Data pengguna. Data pengguna dapat diakss oleh Kepala Bendahara. Cara akses form ini adalah dengan cara memilih sub menu Manajemen data yaitu data pengguna. Dalam data siswa pilih tambah untuk menambah data, sedangkan ubah untuk mengubah dan haus untuk menghapus data.
http://digilib.mercubuana.ac.id/
79
f.
Transaksi Operasional Gambar berikut adalah halaman yang akan muncul ketika Wakil Bendahara
memilih sub menu Transaksi Operasional pada Transaksi.
Gambar 4.6 Mock Up Transaksi Operasional
Gambar diatas adalah gambar Mock Up Form sub menu Transaksi operasional. Dalam mock up sub menu transaksi operasional hanya ada tombol simpan untuk menyimpan data. Form ini terdapat nomor transaksi yang otomatis terisi. Nomor transaksi, kode pengguna, nama pengguna terisi otomatis. Sedangkan NIS, Kode bayar jika diisi maka data selanjutnya akan tomatis terisi.
http://digilib.mercubuana.ac.id/
80
g.
Bukti Pembayaran Operasional Gambar berikut adalah halaman yang akan muncul ketika Wakil Bendahara
memilih simpan pada bukti transaksi operasional. SMS ini akan terkirim ke nomor telp orang tua siswa
Gambar 4.7 Mock Up Bukti Pembayaran Operasional
Bukti Pembayaran Operasional adalah bukti yang terkirim lewat SMS. SMS ini diterima oleh siswa ketika siswa telah melakukan pembayaran dan diverifikasi oleh Wakil Bendahara.
http://digilib.mercubuana.ac.id/
81
h.
Transaksi Pembangunan Gambar berikut adalah halaman yang akan muncul ketika Wakil Bendahara
memilih sub menu Transaksi Pembangunan pada Transaksi.
Gambar 4.8 Mock Up Transaksi Pembangunan
Gambar diatas adalah gambar Mock Up Form sub menu Transaksi Pembangunan. Dalam mock up sub menu transaksi pembangunan hanya ada tombol simpan untuk menyimpan data. Form ini terdapat nomor transaksi yang otomatis terisi. Nomor transaksi, kode pengguna, nama pengguna terisi otomatis. Sedangkan NIS, Kode bayar jika diisi maka data selanjutnya akan tomatis terisi.
http://digilib.mercubuana.ac.id/
82
i.
Bukti Pembayaran Pembangunan Gambar berikut adalah halaman yang akan muncul ketika Wakil Bendahara
memilih simpan Transaksi Pembangunan pada Transaksi. SMS ini akan terkirim ke nomor telepon orang tua.
Gambar 4.9 Mock Up Bukti Pembayaran Pembangunan
Bukti Pembayaran Pembangunan adalah bukti yang terkirim lewat SMS. SMS ini diterima oleh siswa ketika siswa telah melakukan pembayaran dan diverifikasi oleh Wakil Bendahara.
http://digilib.mercubuana.ac.id/
83
j.
Transaksi Iuran Tahunan Gambar berikut adalah halaman yang akan muncul ketika Wakil Bendahara
memilih sub menu Transaksi Iuran Tahunan pada Transaksi.
Gambar 4.10 Mock Up Transaksi Iuran Tahunan
Gambar diatas adalah gambar Mock Up Form sub menu Transaksi Iuran Tahunan. Dalam mock up sub menu transaksi pembangunan hanya ada tombol simpan untuk menyimpan data. Form ini terdapat nomor transaksi yang otomatis terisi. Nomor transaksi, kode pengguna, nama pengguna terisi otomatis. Sedangkan NIS, Kode bayar jika diisi maka data selanjutnya akan tomatis terisi.
http://digilib.mercubuana.ac.id/
84
k.
Bukti Pembayaran Iuran Tahunan Gambar berikut adalah gambar yang akan muncul ketika Wakil Bendahara
memilih simpan pada Transaksi Operasional. SMS ini akan terkirim ke nomor telepon siswa.
Gambar 4.11 Mock Up Bukti Pembayaran Iuran Tahunan
Bukti Pembayaran Operasional adalah bukti yang terkirim lewat SMS. SMS ini diterima oleh siswa ketika siswa telah melakukan pembayaran dan diverifikasi oleh Wakil Bendahara.
http://digilib.mercubuana.ac.id/
85
l.
Data Hutang Gambar berikut adalah mock up form Hutang yang akan tampil ketika kita ingin
memasukkan data hutang atau data pembayaran.
Gambar 4.12 Mock Up Hutang
Gambar diatas adalah gambar mock up hutang. Sebelumnya, Wakil Bendahara telah menginput data hutang setiap siswa. Karena belum membayar maka nomor transaksi dikosongkan. Namun ketika ada transaksi pembayaran, maka buka form ini lagi Kemudian masukkan NIS dan kode bayar, enter maka akan muncul nomor hutang dan data lainnya. Setelah itu masukkan nomor transaksi maka akan muncul total pembayaran dan akan menghitung otomatis terbayar dan sisa hutang. Pilih simpan untuk menyimpan data ini.
http://digilib.mercubuana.ac.id/
86
m.
Tagihan Hutang Gambar berikut adalah gambar tagihan hutang yang akan tampil ketika kita ingin
menagih hutang.
Gambar 4.13 Mock Up Tagihan Hutang
Gambar diatas adalah gambar Mock Up Tagihan hutang. Ketika ingin menagih hutang kepada orang tua siswa, buka form hutang pilih tab Tagihan. Kemudia masukkan NIS enter maka data siswa akan muncul, kemudian masukkan kode bayar lalu enter maka data bayar dan data hutang akan muncul. Setelah itu pilih kirim untuk mengirim tagihan hutang kepada orang tua. Jika ingin melihat data ini maka buka kotak keluar.
http://digilib.mercubuana.ac.id/
87
n.
Kotak Masuk Gambar berikut adalah mock up form Kotak Masuk yang akan tampil ketika kita
ingin melihat kotak masuk atau ada pemberitahuan pesan masuk.
Gambar 4.14 Mock Up Kotak Masuk
Gambar diatas adalah gambar mock up kotak masuk. Apabila ada pesan masuk dari orang tua, seperti pesan Cek Pembayaran, maka akan ada notifikasi pemberitahuan. Setelah itu wakil bendahara akan membuka Kotak masuk, Pilih balas untuk membalas pesan sesuai format.
http://digilib.mercubuana.ac.id/
88
o.
Kotak Keluar Gambar berikut adalah mock up form Kotak Keluar yang akan tampil ketika kita
ingin melihat kotak keluar atau puesan yang sudah dikeluarkan dari sistem.
Gambar 4.15 Mock Up Kotak Keluar
Gambar diatas adalah gambar mock up kotak keluar. Setiap pesan keluar seperti pengumuman, membalas pesan masuk, mengirim tagihan. Data ini akan tersimpan pada kotak keluar. Dalam form ini kita hanya dapat melihat pesan keluar sudah terkirim atau terbalas atau belum.
http://digilib.mercubuana.ac.id/
89
p.
Laporan Gambar berikut adalah gambar yang muncul ketika memilih menu laporan.
Gambar 4.16 Mock Up Laporan
Gambar diatas adalah gambar Mock Up Laporan. Dalam mock up laporan, wakil bendahara memilih jenis laporan yang akan dicetak, kemudia pilih tanggal awal dan tanggal btaas akhir laporan yang akan dicetak. Ketika pilih print maka laporan tercetak.
http://digilib.mercubuana.ac.id/
90
q.
Laporan Operasional Gambar berikut adalah gambar laporan operasional yang akan tampil ketika kita
ingin mencetak laporan.
Gambar 4.17 Desain Laporan Operasional
Gambar diatas adalah gambar laporan operasional. Setelah selesai memasukkan tanggal awal dan akhir, kemudian pilih Print maka akan muncul tampilan laporan seperti gambar diatas.
r.
Laporan Iuran Tahunan Gambar berikut adalah gambar laporan iuran tahunan yang akan tampil ketika
kita ingin mencetak laporan iuran tahunan.
http://digilib.mercubuana.ac.id/
91
Gambar 4.18 Desain Laporan Iuran Tahunan Gambar diatas adalah gambar laporan iuran tahunan. Setelah selesai memasukkan tanggal awal dan akhir, kemudian pilih Print maka akan muncul tampilan laporan seperti gambar diatas.
s.
Laporan Pembangunan Gambar berikut adalah gambar laporan pembangunan yang akan tampil ketika
kita ingin mencetak laporan pembangunan.
Gambar 4.19 Desain Laporan Pembangunan
Gambar
diatas
adalah
gambar
laporan pembangunan.
Setelah selesai
memasukkan tanggal awal dan akhir, kemudian pilih Print maka akan muncul tampilan laporan seperti gambar diatas.
http://digilib.mercubuana.ac.id/
92
t.
Pengumuman Gambar berikut adalah gambar yang muncul ketika Kepala Bendahara memilih
Pengumuman.
Gambar 4.20 Mock Up Pengumuman
Gambar diatas adalah gambar Mock Up pengumuman. Dalam mock up pengumuman, nomor pengumuman akan tercetak otomatis. Input data yang lain kemudian pilih kirim, maka SMS akan terkirim ke nomor telepon yang telah dipilih. Data terkirim atau tidak dapat dilihat pada kotak keluar.
http://digilib.mercubuana.ac.id/
93
u.
Cek Pembayaran Operasional Gambar berikut adalah gambar yang muncul ketika Orang tua mengecek
Pembayaran Operasional.
Gambar 4.21 Mock Up Cek Pembayaran Operasional
Gambar diatas adalah gambar Mock Up Format SMS cek transaksi operasional. Dalam mock up cek transaksi operasional, tulislah sesuai format kemudian kirim ke operator TU. SMS balasan otomatis akan diterima sesua gambar diatas.
http://digilib.mercubuana.ac.id/
94
v.
Cek Pembayaran Iuran Tahunan Gambar berikut adalah gambar yang muncul ketika Orang tua mengecek
Pembayaran Iuran Tahunan.
Gambar 4.22 Mock Up Cek Pembayaran Iuran Tahunan
Gambar diatas adalah gambar Mock Up Format SMS cek transaksi pembayaran iuran tahunan. Dalam mock up cek transaksi iuran tahunan, tulislah sesuai format kemudian kirim ke operator TU. SMS balasan otomatis akan diterima sesua gambar diatas.
http://digilib.mercubuana.ac.id/
95
w.
Cek Pembayaran Pembangunan Gambar berikut adalah gambar yang muncul ketika Orang tua mengecek
Pembayaran Pembangunan.
Gambar 4.23 Mock Up Cek Pembayaran Iuran Tahunan
Gambar diatas adalah gambar Mock Up Format SMS cek transaksi iuran tahun. Dalam mock up cek transaksi iuran tahunan, tulislah sesuai format kemudian kirim ke operator TU. SMS balasan otomatis akan diterima sesua gambar diatas.
http://digilib.mercubuana.ac.id/
96
x.
Tagihan Hutang Gambar berikut adalah Mock Up tagihan hutang melalui SMS yang diterima
orang tua.
Gambar 4.24 Mock Up SMS Tagihan Hutang
Gambar diatas adalah gambar Mock Up SMS tagihan hutang yang akan diterima orang tua siswa yang belum membayar tagihan hutang. Tagihan tersebut berfungsi untuk mengingatkan orang tua mengenai pembayaran.
http://digilib.mercubuana.ac.id/