BAB 3 ANALISIS DAN PERANCANGAN
3.3 Perancangan Arsitektur
3.3.2 Perancangan Antarmuka
3.3.2.1 Perancangan Antarmuka Pemilik
Halaman Login
Perancangan antarmuka halaman login Pemilik dapat dilihat pada Gambar 3.46.
No Form : F01
· Klik tombol Login
untuk masuk F02
· Klik tombol Lupa
Password ? Untuk masuk F03
Ukuran Form : Menyesuaikan resolusi monitor (liquid layout) Warna Background : Abu-abu
Jenis Font : Arial Ukuran Font : 12, 14 LOGIN ADMIN Email Password Login Lupa Password?
Halaman Lupa Password
Perancangan antarmuka halaman lupa password Pemilik dapat dilihat pada Gambar 3.47.
No Form : F03
· Klik tombol Send
untuk mereset password
· Klik tombol Kembali ke
login Untuk masuk F01
Ukuran Form : Menyesuaikan resolusi monitor (liquid layout) Warna Background : Abu-abu
Jenis Font : Arial Ukuran Font : 12, 14
Lupa Password
Alamat Email
Send
Kembali ke login
Halaman Beranda
Perancangan antarmuka halaman beranda Pemilik dapat dilihat pada Gambar 3.48.
No Form : F02
· Klik tombol Beranda
untuk ke F02
· Klik tombol Data
Admin untuk ke F04
· Klik tombol Laporan
Penjualan untuk ke laporan penjualan (F05), laporan per-Tanggal (F09), laporan per-Bulan (F10)
· Klik tombol Laporan
Produk untuk ke laporan produk (F06), laporan per-Tanggal (F11), laporan per-Bulan (F12)
· Klik tombol Ubah
profil untuk ke F07
· Klik tombol Ubah
Password untuk ke F08
· Klik tombol Logout
untuk ke F01
Ukuran Form : Menyesuaikan resolusi monitor (liquid layout) Warna Background : Abu-abu
Jenis Font : Arial Ukuran Font : 12, 14
Footer
Beranda Data Admin Laporan Penjualan
Nama User Ubah Profil Ubah Password Logout
Nama Toko
Logo Laporan Produk
BERANDA
Halaman Pengolahan Data Admin
Perancangan antarmuka halaman pengolahan data admin dapat dilihat pada Gambar 3.49.
No Form : F04
· Klik tombol Beranda
untuk ke F02
· Klik tombol Data
Admin untuk ke F04
· Klik tombol Laporan
Penjualan untuk ke laporan penjualan (F05), laporan per-Tanggal (F09), laporan per-Bulan (F10)
· Klik tombol Laporan
Produk untuk ke laporan produk (F06), laporan per-Tanggal (F11), laporan per-Bulan (F12)
· Klik tombol Ubah
profil untuk ke F07
· Klik tombol Ubah
Password untuk ke F08
· Klik tombol Logout
untuk ke F01
Ukuran Form : Menyesuaikan resolusi monitor (liquid layout) Warna Background : Abu-abu
Jenis Font : Arial Ukuran Font : 12, 14
Footer
Beranda Data Admin Laporan Penjualan
Nama User Ubah Profil Ubah Password Logout
Nama Toko
Logo Laporan Produk
Data Admin
Id Admin Email Admin Nama Admin Hak Akses Option
Ubah Hapus
Tambah Nama Cari
Halaman Pengolahan Laporan Penjualan
Perancangan antarmuka halaman pengolahan laporan penjualan dapat dilihat pada Gambar 3.50.
No Form : F05
· Klik tombol Beranda
untuk ke F02
· Klik tombol Data
Admin untuk ke F04
· Klik tombol Laporan
Penjualan untuk ke laporan penjualan (F05), laporan per-Tanggal (F09), laporan per-Bulan (F10)
· Klik tombol Laporan
Produk untuk ke laporan produk (F06), laporan per-Tanggal (F11), laporan per-Bulan (F12)
· Klik tombol Ubah
profil untuk ke F07
· Klik tombol Ubah
Password untuk ke F08
· Klik tombol Logout
untuk ke F01
Ukuran Form : Menyesuaikan resolusi monitor (liquid layout) Warna Background : Abu-abu
Jenis Font : Arial Ukuran Font : 12, 14
Footer
Beranda Data Admin Laporan Penjualan
Nama User Ubah Profil Ubah Password Logout
Nama Toko
Logo Laporan Produk
Laporan Penjualan Cetak Laporan Id pemesanan Nama Member Tgl Pemesanan Status
pemesanan Total Bayar
Halaman Pengolahan Laporan Produk
Perancangan antarmuka halaman pengolahan laporan produk dapat dilihat pada Gambar 3.51.
No Form : F06
· Klik tombol Beranda
untuk ke F02
· Klik tombol Data
Admin untuk ke F04
· Klik tombol Laporan
Penjualan untuk ke laporan penjualan (F05), laporan per-Tanggal (F09), laporan per-Bulan (F10)
· Klik tombol Laporan
Produk untuk ke laporan produk (F06), laporan per-Tanggal (F11), laporan per-Bulan (F12)
· Klik tombol Ubah
profil untuk ke F07
· Klik tombol Ubah
Password untuk ke F08
· Klik tombol Logout
untuk ke F01
Ukuran Form : Menyesuaikan resolusi monitor (liquid layout) Warna Background : Abu-abu
Jenis Font : Arial Ukuran Font : 12, 14
Footer
Beranda Data Admin Laporan Penjualan
Nama User Ubah Profil Ubah Password Logout
Nama Toko
Logo Laporan Produk
Laporan Produk
Cetak Laporan Nama
Produk Kategori Warna
Produk Terjual
Merk Harga Stok
Tersisa
Jumlah
Halaman Ubah Profil
Perancangan antarmuka halaman ubah profil admin dapat dilihat pada Gambar 3.52.
No Form : F07
· Klik tombol Beranda
untuk ke F02
· Klik tombol Data
Admin untuk ke F04
· Klik tombol Laporan
Penjualan untuk ke laporan penjualan (F05), laporan per-Tanggal (F09), laporan per-Bulan (F10)
· Klik tombol Laporan
Produk untuk ke laporan produk (F06), laporan per-Tanggal (F11), laporan per-Bulan (F12)
· Klik tombol Ubah
profil untuk ke F07
· Klik tombol Ubah
Password untuk ke F08
· Klik tombol Logout
untuk ke F01
Ukuran Form : Menyesuaikan resolusi monitor (liquid layout) Warna Background : Abu-abu
Jenis Font : Arial Ukuran Font : 12, 14
Footer
Beranda Data Admin Laporan Penjualan
Nama User Ubah Profil Ubah Password Logout
Nama Toko
Logo Laporan Produk
Ubah Profil Simpan Nama : Email : pemilik [email protected]
Halaman Ubah Password
Perancangan antarmuka halaman ubah password pemilik dapat dilihat pada Gambar 3.53.
No Form : F08
· Klik tombol Beranda
untuk ke F02
· Klik tombol Data
Admin untuk ke F04
· Klik tombol Laporan
Penjualan untuk ke laporan penjualan (F05), laporan per-Tanggal (F09), laporan per-Bulan (F10)
· Klik tombol Laporan
Produk untuk ke laporan produk (F06), laporan per-Tanggal (F11), laporan per-Bulan (F12)
· Klik tombol Ubah
profil untuk ke F07
· Klik tombol Ubah
Password untuk ke F08
· Klik tombol Logout
untuk ke F01
Ukuran Form : Menyesuaikan resolusi monitor (liquid layout) Warna Background : Abu-abu
Jenis Font : Arial Ukuran Font : 12, 14
Footer
Beranda Data Admin Laporan Penjualan
Nama User Ubah Profil Ubah Password Logout
Nama Toko
Logo Laporan Produk
Ubah Password
Simpan
Password Lama : Password Baru : Ulang Password :
Halaman Laporan Penjualan Per-Tanggal
Perancangan antarmuka halaman laporan penjualan per-tanggal dapat dilihat pada Gambar 3.54.
No Form : F09
· Klik tombol Beranda
untuk ke F02
· Klik tombol Data
Admin untuk ke F04
· Klik tombol Laporan
Penjualan untuk ke laporan penjualan (F05), laporan per-Tanggal (F09), laporan per-Bulan (F10)
· Klik tombol Laporan
Produk untuk ke laporan produk (F06), laporan per-Tanggal (F11), laporan per-Bulan (F12)
· Klik tombol Ubah
profil untuk ke F07
· Klik tombol Ubah
Password untuk ke F08
· Klik tombol Logout
untuk ke F01
Ukuran Form : Menyesuaikan resolusi monitor (liquid layout) Warna Background : Abu-abu
Jenis Font : Arial Ukuran Font : 12, 14
Footer
Beranda Data Admin Laporan Penjualan
Nama User Ubah Profil Ubah Password Logout
Nama Toko
Logo Laporan Produk
Laporan Penjualan Per-Tanggal
Cetak Laporan Id pemesanan Nama Member Tgl Pemesanan Status
pemesanan Total Bayar
Penjualan dari
tanggal s/d tanggal
Halaman Laporan Penjualan Per-Bulan
Perancangan antarmuka halaman laporan penjualan per-bulan dapat dilihat pada Gambar 3.55.
No Form : F10
· Klik tombol Beranda
untuk ke F02
· Klik tombol Data
Admin untuk ke F04
· Klik tombol Laporan
Penjualan untuk ke laporan penjualan (F05), laporan per-Tanggal (F09), laporan per-Bulan (F10)
· Klik tombol Laporan
Produk untuk ke laporan produk (F06), laporan per-Tanggal (F11), laporan per-Bulan (F12)
· Klik tombol Ubah
profil untuk ke F07
· Klik tombol Ubah
Password untuk ke F08
· Klik tombol Logout
untuk ke F01
Ukuran Form : Menyesuaikan resolusi monitor (liquid layout) Warna Background : Abu-abu
Jenis Font : Arial Ukuran Font : 12, 14
Footer
Beranda Data Admin Laporan Penjualan
Nama User Ubah Profil Ubah Password Logout
Nama Toko
Logo Laporan Produk
Laporan Penjualan Per-Bulan
Cetak Laporan Id pemesanan Nama Member Tgl Pemesanan Status
pemesanan Total Bayar
Penjualan Bulan Bulan Tahun
Halaman Laporan Produk Per-Tanggal
Perancangan antarmuka halaman laporan produk per-tanggal dapat dilihat pada Gambar 3.56.
No Form : F11
· Klik tombol Beranda
untuk ke F02
· Klik tombol Data
Admin untuk ke F04
· Klik tombol Laporan
Penjualan untuk ke laporan penjualan (F05), laporan per-Tanggal (F09), laporan per-Bulan (F10)
· Klik tombol Laporan
Produk untuk ke laporan produk (F06), laporan per-Tanggal (F11), laporan per-Bulan (F12)
· Klik tombol Ubah
profil untuk ke F07
· Klik tombol Ubah
Password untuk ke F08
· Klik tombol Logout
untuk ke F01
Ukuran Form : Menyesuaikan resolusi monitor (liquid layout) Warna Background : Abu-abu
Jenis Font : Arial Ukuran Font : 12, 14
Footer
Beranda Data Admin Laporan Penjualan
Nama User Ubah Profil Ubah Password Logout
Nama Toko
Logo Laporan Produk
Laporan Produk Per-Tanggal
Nama
Produk Kategori Warna
Produk Terjual
Merk Harga Stok
Tersisa
Jumlah
Cetak Laporan
Penjualan dari
tanggal s/d tanggal
Halaman Laporan Produk Per-Bulan
Perancangan antarmuka halaman laporan produk per-bulan dapat dilihat pada Gambar 3.57.
No Form : F12
· Klik tombol Beranda
untuk ke F02
· Klik tombol Data
Admin untuk ke F04
· Klik tombol Laporan
Penjualan untuk ke laporan penjualan (F05), laporan per-Tanggal (F09), laporan per-Bulan (F10)
· Klik tombol Laporan
Produk untuk ke laporan produk (F06), laporan per-Tanggal (F11), laporan per-Bulan (F12)
· Klik tombol Ubah
profil untuk ke F07
· Klik tombol Ubah
Password untuk ke F08
· Klik tombol Logout
untuk ke F01
Ukuran Form : Menyesuaikan resolusi monitor (liquid layout) Warna Background : Abu-abu
Jenis Font : Arial Ukuran Font : 12, 14
Footer
Beranda Data Admin Laporan Penjualan
Nama User Ubah Profil Ubah Password Logout
Nama Toko
Logo Laporan Produk
Laporan Produk Per-Bulan
Nama
Produk Kategori Warna
Produk Terjual
Merk Harga Stok
Tersisa
Jumlah
Cetak Laporan
Penjualan Bulan Bulan Tahun
Halaman Tambah Data Admin
Perancangan antarmuka halaman tambah data admin dapat dilihat pada Gambar 3.58.
No Form : F13
· Klik tombol Beranda
untuk ke F02
· Klik tombol Data
Admin untuk ke F04
· Klik tombol Laporan
Penjualan untuk ke laporan penjualan (F05), laporan per-Tanggal (F09), laporan per-Bulan (F10)
· Klik tombol Laporan
Produk untuk ke laporan produk (F06), laporan per-Tanggal (F11), laporan per-Bulan (F12)
· Klik tombol Ubah
profil untuk ke F07
· Klik tombol Ubah
Password untuk ke F08
· Klik tombol Logout
untuk ke F01
Ukuran Form : Menyesuaikan resolusi monitor (liquid layout) Warna Background : Abu-abu
Jenis Font : Arial Ukuran Font : 12, 14
Footer
Beranda Data Admin Laporan Penjualan
Nama User Ubah Profil Ubah Password Logout
Nama Toko
Logo Laporan Produk
Tambah Data Admin
Simpan Ulangi Password : Kembali Pilih Jabatan Email : Password : Nama : Hak Ases :
Halaman Ubah Data Admin
Perancangan antarmuka halaman ubah data admin dapat dilihat pada Gambar 3.59.
No Form : F14
· Klik tombol Beranda
untuk ke F02
· Klik tombol Data
Admin untuk ke F04
· Klik tombol Laporan
Penjualan untuk ke laporan penjualan (F05), laporan per-Tanggal (F09), laporan per-Bulan (F10)
· Klik tombol Laporan
Produk untuk ke laporan produk (F06), laporan per-Tanggal (F11), laporan per-Bulan (F12)
· Klik tombol Ubah
profil untuk ke F07
· Klik tombol Ubah
Password untuk ke F08
· Klik tombol Logout
untuk ke F01
Ukuran Form : Menyesuaikan resolusi monitor (liquid layout) Warna Background : Abu-abu
Jenis Font : Arial Ukuran Font : 12, 14
Footer
Beranda Data Admin Laporan Penjualan
Nama User Ubah Profil Ubah Password Logout
Nama Toko
Logo Laporan Produk
Edit Data Admin
Simpan Kembali Pilih Jabatan Email : Nama : Hak Ases :