BAB IV RANCANGAN SISTEM DIUSULKAN

Transkripsi

1 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 Telp Siswa Telpsiswa Varchar Telp Orang Tua Telportu Varchar 15 69

2 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 4 Foreign key

3 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

4 72 Lanjutan Tabel 4.6 Spesifikasi File Transaksi Operasional 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 7. 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 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

5 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 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

6 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.

7 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.

8 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.

9 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.

10 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.

11 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.

12 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.

13 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.

14 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.

15 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.

16 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.

17 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.

18 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.

19 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.

20 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.

21 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.

22 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.

23 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.

24 92 t. Pengumuman Pengumuman. Gambar berikut adalah gambar yang muncul ketika Kepala Bendahara memilih 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.

25 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.

26 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.

27 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.

28 96 x. Tagihan Hutang orang tua. Gambar berikut adalah Mock Up tagihan hutang melalui SMS yang diterima 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.