Perancangan Tampilan User GUI 1.Perancangan Tampilan Halaman LogIn

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