Interface Design System Design

162

4.4.2 Interface Design

1. Menu Login

BANNER LOGO Tanggal Waktu LOGIN Image Username Password Login Reset Footer Gambar 4.59 Design Interface Menu Login Keterangan gambar : Menu login merupakan langkah awal bagi user untuk dapat masuk ke dalam sistem dengan mengisi username dan password terlebih dahulu. Jika username dan password benar maka akan tampil halaman Home, jika salah maka akan kembali mengisi username dan password pada halaman login.

2. Menu Home

BANNER LOGO Tanggal Waktu Home Footer Menu Menu Menu Logout Halaman Home Gambar 4.60 Design Interface Menu Home Keterangan gambar : Setelah user berhasil melakukan login maka langsung masuk ke dalaman halaman home. Menu home merupakan halaman utama pada aplikasi. 163 3. Menu Validasi BANNER LOGO Tanggal Waktu Footer Home Validasi Data deposan Logout Search No Nama Lengkap Jenis Kelamin Nama Ibu Kandung Jenis Deposito Alamat Jumlah Deposito Proses 1. 2. 3. 4. xxxxxx xxxxxxx xxxxxxx xxxxxxx xxxxxxxxxxxx xxxxxxxxxxxx xxxxxxxxxxxx xxxxxxxxxxxx Rp xxxxxxxxxx Rp xxxxxxxxxx Rp xxxxxxxxxx Rp xxxxxxxxxx validasi xxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xx bulan xx bulan xx bulan xx bulan validasi validasi validasi Gambar 4.61 Design Interface Menu Validasi Keterangan gambar : Menu validasi digunakan oleh customer_service untuk melakukan validasi data deposan yang telah melakukan pendaftaran secara online sebelumnya.

4. Menu Data Deposan

BANNER LOGO Tanggal Waktu Footer Home Validasi Data deposan Logout Search No Nama Lengkap Jenis Kelamin Nama Ibu Kandung Jenis Deposito Alamat Jumlah Deposito Action Ubah Hapus Cetak 1. 2. 3. 4. xxxxxx xxxxxxx xxxxxxx xxxxxxx xxxxxxxxxxxx xxxxxxxxxxxx xxxxxxxxxxxx xxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xx bulan xx bulan xx bulan xx bulan Ubah Hapus Cetak Ubah Hapus Cetak Ubah Hapus Cetak Rp xxxxxxxxxx Rp xxxxxxxxxx Rp xxxxxxxxxx Rp xxxxxxxxxx Gambar 4.62 Design Interface Menu Data Deposan Keterangan gambar : Menu Data Deposan digunakan oleh customer_service untuk memeriksa dan mengatur data deposan yang ada di BPRS Wakalumi. 164 5. Menu Penyetoran BANNER LOGO Tanggal Waktu Footer Home Penyetoran Data Nisbah Logout Search No Nomor Rekening Tgl. Setor Jangka Waktu Jatuh Tempo Jumlah Deposito Action Penyetoran 1. 2. 3. 4. dd-mm-yy dd-mm-yy dd-mm-yy dd-mm-yy dd-mm-yy dd-mm-yy dd-mm-yy dd-mm-yy xxxxxxxxxxxx xxxxxxxxxxxx xxxxxxxxxxxx xxxxxxxxxxxx xx bulan xx bulan xx bulan xx bulan Rp xxxxxxxxxx Rp xxxxxxxxxx Rp xxxxxxxxxx Rp xxxxxxxxxx Hitung Nisbah Pencairan Penyetoran Penyetoran Penyetoran xxxxxxxxxxxx xxxxxxxxxxxx xxxxxxxxxxxx xxxxxxxxxxxx Nama Gambar 4.63 Design Interface Menu Penyetoran Keterangan gambar : Menu Penyetoran digunakan oleh admin_deposito untuk melakukan validasi transaksi penyetoran setelah deposan menyerahkan setoran awal deposito kepada bagian teller . 6. Menu Data nisbah BANNER LOGO Tanggal Waktu Footer Home Penyetoran Data Nisbah Logout Search No Bulan Nisbah Nasabah Jangka Waktu Nisbah Bank EQ Rate Action 1. 2. 3. 4. xx xx xx xx xx xx xx xx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xx bulan xx bulan xx bulan xx bulan xx,xx xx,xx xx,xx xx,xx Hitung Nisbah Pencairan xxxx xxxx xxxx xxxx Tahun Ubah Hapus Ubah Hapus Ubah Hapus Ubah Hapus Tambah Data Nisbah Gambar 4.64 Design Interface Menu Data Nisbah Keterangan gambar : Menu Data Nisbah digunakan oleh admin_deposito untuk mengisi dan menambahkan data nisbah yang ada pada BPRS Wakalumi setiap bulannya. 165 7. Menu Hitung Nisbah BANNER LOGO Tanggal Waktu Footer Home Penyetoran Data Nisbah Logout Search No Periode Nisbah Nama Zakat PPh Action 1. 2. 3. 4. Rp xxxxxxx Rp xxxxxxx Rp xxxxxxx Rp xxxxxxx Rp xxxxxxx Rp xxxxxxx Rp xxxxxxx Rp xxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx xx xxxxxxxxx xx xxxxxxxxx xx xxxxxxxxx xx Rp xxxxxxx Rp xxxxxxx Rp xxxxxxx Rp xxxxxxx Hitung Nisbah Pencairan xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx Nomor Rekening Ubah Hapus Ubah Hapus Ubah Hapus Ubah Hapus Transaksi Nisbah Deposito Gambar 4.65 Design Interface Menu Hitung Nisbah Keterangan gambar : Menu Hitung Nisbah digunakan oleh admin_deposito untuk menghitung nisbah bagi hasil yang akan diperoleh oleh deposan setiap bulannya.

8. Menu Pencairan

BANNER LOGO Tanggal Waktu Footer Home Penyetoran Data Nisbah Logout Search No Nomor Rekening Tgl. Setor Jangka Waktu Jatuh Tempo Jumlah Deposito Action Penyetoran 1. 2. 3. 4. dd-mm-yy dd-mm-yy dd-mm-yy dd-mm-yy dd-mm-yy dd-mm-yy dd-mm-yy dd-mm-yy xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xx bulan xx bulan xx bulan xx bulan Rp xxxxxxxxxx Rp xxxxxxxxxx Rp xxxxxxxxxx Rp xxxxxxxxxx Hitung Nisbah Pencairan Penyetoran Penyetoran Penyetoran xxxxxxxxxxxx xxxxxxxxxxxx xxxxxxxxxxxx xxxxxxxxxxxx Nama Gambar 4.66 Design Interface Menu Pencairan Keterangan gambar : Menu Pencairan digunakan oleh admin_deposito untuk melakukan validasi transaksi pencairan pada saat deposan telah memasuki tanggal jatuh tempo. 166 9. Menu Laporan Deposan BANNER LOGO Tanggal Waktu Home Footer Laporan Deposan Laporan Nisbah Laporan Setor Laporan Cair Grafik dan Tabel Laporan Deposan Gambar 4.67 Design Interface Menu Laporan Deposan Keterangan gambar : KaDiv_operasional bertugas untuk melihat dan memeriksa laporan deposan yang ada pada BPRS Wakalumi dengan mengakses aplikasi setiap waktu. 10. Menu Laporan Nisbah BANNER LOGO Tanggal Waktu Home Footer Laporan Deposan Laporan Nisbah Laporan Setor Laporan Cair Grafik dan Tabel Laporan Nisbah Gambar 4.68 Design Interface Menu Laporan Nisbah Keterangan gambar : KaDiv_operasional bertugas untuk melihat dan memeriksa laporan nisbah yang ada pada BPRS Wakalumi dengan mengakses aplikasi setiap waktu. 167 11. Menu Laporan Penyetoran BANNER LOGO Tanggal Waktu Home Footer Laporan Deposan Laporan Nisbah Laporan Setor Laporan Cair Grafik dan Tabel Laporan Transaksi Penyetoran Gambar 4.69 Design Interface Menu Laporan Penyetoran Keterangan gambar : KaDiv_operasional bertugas untuk melihat dan memeriksa laporan penyetoran yang ada pada BPRS Wakalumi dengan mengakses aplikasi setiap waktu. 12. Menu Laporan Pencairan BANNER LOGO Tanggal Waktu Home Footer Laporan Deposan Laporan Nisbah Laporan Setor Laporan Cair Grafik dan Tabel Laporan Transaksi Pencairan Gambar 4.70 Design Interface Menu Laporan Pencairan Keterangan gambar : KaDiv_operasional bertugas untuk melihat dan memeriksa laporan pencairan yang ada pada BPRS Wakalumi dengan mengakses aplikasi setiap waktu. 168

4.5 Implementasi Sistem

Pada tahap implementasi ini terdapat beberapa aktivitas yang dilakukan. Aktivitas-aktivitas yang dimaksud yaitu: a. pemrograman b. pengujian c. Instalasi perangkat infrastruktur.

4.5.1 Pemrograman

Pada tahap pemrograman, penulis menggunakan bahasa pemrograman PHP Personal Home Page sebagai bahasa pemrograman yang membantu dalam proses manipulasi kegiatan yang ada dalam pembuatan aplikasi, sedangkan software yang digunakan dalam pembuatan aplikasi ini yaitu Xampp 1.6.2 sebagai web server local dalam komputer peneliti, MySQL My Structured Query Language yang berfungsi untuk penyimpanan data dari setiap perubahaan data kegiatan activity dan resource deposito, Adobe Dreamweaver CS 5 sebagai alat bantu perancangan aplikasi deposito, Browser Mozilla Fireforks versi 4.0 Merupakan aplikasi browser internet untuk menampilkan aplikasi dan menguji sistem dan Adobe Photoshop CS3 sebagai alat bantu pengeditan gambar. Kode program yang digunakan pada aplikasi terdapat pada lampiran.