4.3.3.8 Perancangan Tampilan User GUI 1.Perancangan Tampilan Halaman LogIn
Halaman ini merupakan halaman awal sebelum user masuk kehalaman aplikasi, user harus memasukan username dan password terlebih dahulu jika
username dan password yang dimasukan benar maka user tersebut dapat masuk dan mengakses aplikasi tersebut.
Gambar 4.33 Halaman LogIn
2.Perancangan Tampilan Halaman Awal Input Data user
Ini merupakan halaman input data user, pada halaman ini user dapat melakukan proses seperti input, update dan delete data user. halaman ini hanya
dapat diakses oleh bagian Back Office saja.
Gambar 4.34 Halaman awal Input data User
3.Perancangan Tampilan Form Input Data user
Halaman ini berisikan form penginputan data-data user, si user setelah memasukan semua data yang diminta secara lengkap kemudian menyimpannya
yang menghasilkan data username baru.
Gambar 4.35 Halaman From Input data user
4.Perancangan Tampilan Form Edit Data user
Halaman ini berisikan form untuk mengubah data-data user, ketika ada kesalahan ataupun perubahan pada data user maka segera diperbaiki
menggunakan form edit data user ini.
Gambar 4.36 Halaman From edit data user
5.Perancangan Tampilan Halaman Awal Input Data Modul
Ini merupakan halaman input data modul, pada halaman ini user dapat melakukan proses seperti input, update dan delete data modul. halaman ini hanya
dapat diakses oleh bagian Back Office saja.
Gambar 4.37 Perancangan Tampilan Halaman Awal Input Data Modul
6.Perancangan Tampilan Form Input Data Modul
Halaman ini berisikan form penginputan data-data modul, si user harus memasukan data-data seperti nama modul, Link, memilih tipe publish, aktif dan
status. setelah memasukan semua data yang diminta secara lengkap
Gambar 4.38 Perancangan tampilan form input data modul
7.Perancangan Tampilan Form Edit Data Modul
Halaman ini berisikan form untuk mengubah data-data modul, berbeda fungsi nya dengan Form input data modul, fungsi dari form edit data modul ini
sendiri berfungsi untuk melakukan perubahan data-data modul ketika ada kesalahan pada saat proses penginputan ataupun perubahan yang diinginkan pada
data modul maka segera diperbaiki menggunakan form edit data modul ini.
Gambar 4.39 Perancangan tampilan form edit data modul
8.Perancangan Halaman Awal Input Data Kartu
Halaman ini merupakan halaman input data kartu perdana shar’e, pada
halaman ini user dapat melakukan proses seperti input, update dan delete data kartu perdana shar’e tersebut. halaman ini hanya dapat diakses oleh bagian Back
Office saja.
Gambar 4.40 Perancangan halaman awal input data kartu
9.Perancangan Form Input Data Kartu
Halaman ini berisikan form penginputan data-data kartu, si user harus memasukan data-data seperti kode cabang, jenis kartu dan nomer rekening.
setelah memasukan semua data yang diminta secara lengkap kemudian menyimpannya kedalam database kartu.
Gambar 4.41 Perancangan form input data kartu
10.Perancangan Form Edit Data Kartu
Halaman ini berisikan form untuk mengubah data-data kartu, ketika ada kesalahan pada saat penginputan maka segera diperbaiki menggunakan form edit
data kartu ini.
Gambar 4.42 Perancangan form edit data kartu
11.Perancangan Halaman Awal View Data Kartu
Pada halaman ini user dapat melihat stok data kartu perdana shar’e yang
ada selain itu user juga dapat melakukan pencetakan data kartu.
Gambar 4.43 Perancangan tampilan halaman view data kartu
12.Perancangan Laporan Data Kartu
Ini merupakan bentuk laporan data kartu perdana shar’e pada Bank Muamalat cabang Puri Indah Jakarta barat, yang berisikan no, id_kartu,
kode_cabang, jenis_kartu, no_rekening. laporan ini dibuat oleh bagian Back Office yang kemudian diserahkan kepada Manajer Bank.
Gambar 4.44 Perancangan Laporan data kartu
13.Perancangan Halaman Agenda
Halaman ini merupakan halaman input data Agenda, seperti misalnya agenda pada saat ingin melakukan promosi keluar perusahaan atau kegiatan open
table, agenda presentasi kepada calon nasabah, dicatat pada halaman ini. pada halaman ini terdapat fungsi seperti tambah agenda, ubah agenda dan hapus
agenda. halaman ini dapat diakses oleh bagian Marketing.
Gambar 4.45 Perancangan Halaman Agenda
14.Perancangan Halaman Form Input Agenda
Halaman ini berisikan form penginputan data-data Agenda, si user harus memasukan data-data seperti tema, isi agenda, tempat, tgl_mulai dan tgl_selesai.
setelah memasukan semua data yang diminta secara lengkap kemudian menyimpannya kedalam database Agenda.
Gambar 4.46 Perancangan Halaman Form Input Agenda
15.Perancangan Halaman Awal Input Data Pembelian
Halaman ini merupakan halaman input data Pembelian, pada halaman ini terdapat fungsi seperti tambah pembelian, ubah pembelian dan hapus pembelian.
halaman ini dapat diakses oleh bagian Marketing.
Gambar 4.47 Perancangan halaman awal input data pembelian
16. Perancangan Form Input Data Pembelian