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.