3. Struktur Menu Admin
3.3.2.3 Perancangan Antarmuka Petugas
Perancangan antarmuka untuk petugas dari aplikasi E-Commerce di Jebgos Accessories adalah sebagai berikut:
1. Perancangan Antarmuka Login
P01
Copyrigth © 2011 Jebgos Accessories
· Klik tombol Login menuju P02
Nama Layer : P01
Ukuran Layer : 800 pixel x 600 pixel
Font : Arial, Sans-serif, BankGothic Md BT Background : Abu-Abu
Login Username
Password
Login
2. Perancangan Antarmuka Home
P02
Copyrigth © 2011 Jebgos Accessories
Master
· Klik tombol Home menuju P02 · Klik tombol Master
menuju P03 · Klik tombol Transaksi
menuju P04 · Klik Gambar Master
menuju P03 · Klik Gambar Master
menuju P04 · Klik tombol Logout untuk
keluar menuju P01
Nama Layer : P02
Ukuran Layer : 800 pixel x 600 pixel
Font : Arial, Sans-serif, BankGothic Md BT Background : Putih Transaksi Home Logout Menu Petugas Master Gambar Master Taransaksi Gambar Transaksi Penjelasan Penjelasan JEBGOS ACCESSORIES Laporan
Gambar 3.48 Perancangan Antar Muka Home 3. Perancangan Antarmuka Pengolahan Data Barang
P03
Copyrigth © 2011 Jebgos Accessories
Master
· Klik tombol Home menuju P02 · Klik tombol Master
menuju P03 · Klik tombol Transaksi
menuju P04 · Klik tombol Logout untuk
keluar menuju P01 · Klik tombol Barang
menuju P03 · Klik tombol Kategori
menuju P05 · Klik tombol Kota menuju
P06
· Klik tombol Provinsi menuju P07 · Klik tombol Jasa
Pengiriman menuju P16 · Klik tombol Cari untuk
mencari data
Nama Layer : P03
Ukuran Layer : 800 pixel x 600 pixel
Font : Arial, Sans-serif, BankGothic Md BT Background : Putih Transaksi Home Logout JEBGOS ACCESSORIES Cari Barang Cari ID
Barang Nama Harga Detail
Katego ri
Stok Detail Edit Hapus
Laporan Barang Data Master Kategori Kota Provinsi Jasa Pengiriman
4. Perancangan Antarmuka Pengolahan Data Pesanan
P04
Copyrigth © 2011 Jebgos Accessories
· Klik tombol Home menuju P02 · Klik tombol Master
menuju P03 · Klik tombol Transaksi
menuju P04 · Klik tombol Logout untuk
keluar menuju P01 · Klik tombol Pemesanan
menuju P04 · Klik tombol Pengiriman
menuju P09 · Klik tombol Retur
menuju P10 · Klik tombol Detail
menuju P10 · Klik tombol Kirim menuju
P11
· Klik tombol Cari untuk mencari data
Nama Layer : P04
Ukuran Layer : 800 pixel x 600 pixel
Font : Arial, Sans-serif, BankGothic Md BT Background : Putih JEBGOS ACCESSORIES Cari Pesanan Cari ID
Pesan Nama Alamat Total Bayar Status Bayar Tanggal Beli Status Kirim Detail Kirim Master Transaksi
Home Laporan Logout
Pemesanan
Data Transaksi
Pembayaran Pengiriman Retur
Gambar 3.50 Perancangan Antar Muka Pengolahan Data Pesanan 5. Perancangan Antarmuka Pengolahan Data Kategori
P05
Copyrigth © 2011 Jebgos Accessories
· Klik tombol Home menuju P02 · Klik tombol Master
menuju P03 · Klik tombol Transaksi
menuju P04 · Klik tombol Logout untuk
keluar menuju P01 · Klik tombol Barang
menuju P03 · Klik tombol Kategori
menuju P05 · Klik tombol Kota menuju
P06
· Klik tombol Provinsi menuju P07 · Klik tombol Jasa
Pengiriman menuju P16 · Klik tombol Cari untuk
mencari data
Nama Layer : P05
Ukuran Layer : 800 pixel x 600 pixel
Font : Arial, Sans-serif, BankGothic Md BT Background : Putih JEBGOS ACCESSORIES Cari Kategori Cari ID
Barang Nama Kategori Edit
Master Transaksi
Home Laporan Logout
Barang Data Master Kategori Kota Provinsi Jasa Pengiriman
6. Perancangan Antarmuka Pengolahan Data Kota
P06
Copyrigth © 2011 Jebgos Accessories
· Klik tombol Home menuju P02 · Klik tombol Master
menuju P03 · Klik tombol Transaksi
menuju P04 · Klik tombol Logout untuk
keluar menuju P01 · Klik tombol Barang
menuju P03 · Klik tombol Kategori
menuju P05 · Klik tombol Kota menuju
P06
· Klik tombol Provinsi menuju P07 · Klik tombol Jasa
Pengiriman menuju P16 · Klik tombol Cari untuk
mencari data
Nama Layer : P06
Ukuran Layer : 800 pixel x 600 pixel
Font : Arial, Sans-serif, BankGothic Md BT Background : Putih JEBGOS ACCESSORIES Cari Kota Nama Kota
Nama Nama Paket Ongkos Edit Hapus
Tambah
Master Transaksi
Home Laporan Logout
Barang Data Master Kategori Kota Provinsi Jasa Pengiriman
Gambar 3.52 Perancangan Antar Muka Pengolahan Data Kota 7. Perancangan Antarmuka Pengolahan Data Provinsi
P07
Copyrigth © 2011 Jebgos Accessories
· Klik tombol Home menuju P02 · Klik tombol Master
menuju P03 · Klik tombol Transaksi
menuju P04 · Klik tombol Logout untuk
keluar menuju P01 · Klik tombol Barang
menuju P03 · Klik tombol Kategori
menuju P05 · Klik tombol Kota menuju
P06
· Klik tombol Provinsi menuju P07 · Klik tombol Jasa
Pengiriman menuju P16 · Klik tombol Cari untuk
mencari data
Nama Layer : P07
Ukuran Layer : 800 pixel x 600 pixel
Font : Arial, Sans-serif, BankGothic Md BT Background : Putih JEBGOS ACCESSORIES Cari Provinsi Nama Provinsi
ID Provinsi Nama Edit
Tambah
Master Transaksi
Home Laporan Logout
Barang Data Master Kategori Kota Provinsi Jasa Pengiriman
8. Perancangan Antarmuka Pengolahan Data Pembayaran
P08
Copyrigth © 2011 Jebgos Accessories
· Klik tombol Home menuju P02 · Klik tombol Master
menuju P03 · Klik tombol Transaksi
menuju P04 · Klik tombol Logout untuk
keluar menuju P01 · Klik tombol Pemesanan
menuju P04 · Klik tombol Pengiriman
menuju P09 · Klik tombol Retur
menuju P10
Nama Layer : P08
Ukuran Layer : 800 pixel x 600 pixel
Font : Arial, Sans-serif, BankGothic Md BT Background : Putih
JEBGOS ACCESSORIES
Pembayaran Tanggal Bayar ID
Pesan Nama No Rekening Status Total Bayar
Status Kirim Validasi
Master Transaksi
Home Laporan Logout
Pemesanan Data Transaksi
Pembayaran Pengiriman Retur
Gambar 3.54 Perancangan Antar Muka Pengolahan Data Pembayaran 9. Perancangan Antarmuka Pengolahan Data Pengiriman
P09
Copyrigth © 2011 Jebgos Accessories
· Klik tombol Home menuju P02 · Klik tombol Master
menuju P03 · Klik tombol Transaksi
menuju P04 · Klik tombol Logout untuk
keluar menuju P01 · Klik tombol Pemesanan
menuju P04 · Klik tombol Pengiriman
menuju P09 · Klik tombol Retur
menuju P10 · Klik Proses Menuju P11
Nama Layer : P09
Ukuran Layer : 800 pixel x 600 pixel
Font : Arial, Sans-serif, BankGothic Md BT Background : Putih JEBGOS ACCESSORIES Pengiriman ID Pesan No
Resi Penerima Alamat
Penerima Barang Tanggal Kirim Tanggal Terima Status Proses Kirim Proses Master Transaksi
Home Laporan Logout
Pemesanan Data Transaksi
Pembayaran Pengiriman Retur
10. Perancangan Antarmuka Pengolahan Data Retur
P10
Copyrigth © 2011 Jebgos Accessories
· Klik tombol Home menuju P02 · Klik tombol Master
menuju P03 · Klik tombol Transaksi
menuju P04 · Klik tombol Logout untuk
keluar menuju P01 · Klik tombol Pemesanan
menuju P04 · Klik tombol Pengiriman
menuju P09 · Klik tombol Retur
menuju P10
Nama Layer : P10
Ukuran Layer : 800 pixel x 600 pixel
Font : Arial, Sans-serif, BankGothic Md BT Background : Putih JEBGOS ACCESSORIES Retur Barang ID Pesan No Resi Nama Alamat Tanggal Beli Tanggal
Retur Status Detail
Master Transaksi
Home Laporan Logout
Barang Data Master Kategori Kota Provinsi Jasa Pengiriman
Gambar 3.56 Perancangan Antar Muka Pengolahan Data Retur 11. Perancangan Antarmuka Tambah Barang
P12
Copyrigth © 2011 Jebgos Accessories
· Klik tombol Home menuju P02 · Klik tombol Master
menuju P03 · Klik tombol Transaksi
menuju P04 · Klik tombol Logout untuk
keluar menuju P01 · Klik tombol Barang
menuju P03 · Klik tombol Kategori
menuju P05 · Klik tombol Kota menuju
P06
· Klik tombol Provinsi menuju P07 · Klik tombol Jasa
Pengiriman menuju P16 · Klik tombol Choose File
untuk memasukkan gambar · Klik tombol Tambah
untuk menyimpan data · Klik tombol Kembali
untuk kembali ke halaman sebelumnya
Nama Layer : P12
Ukuran Layer : 800 pixel x 600 pixel
Font : Arial, Sans-serif, BankGothic Md BT Background : Putih JEBGOS ACCESSORIES Tambah Barang Tambah Kategori Nama Harga Kembali Detail No.telepon No.telepon No.telepon
Choose File No file Chosen %
/ lusin KG
Master Transaksi
Home Laporan Logout
Barang Data Master Kategori Kota Provinsi Jasa Pengiriman
12. Perancangan Antarmuka Tambah Kategori
P13
Copyrigth © 2011 Jebgos Accessories
· Klik tombol Home menuju P02 · Klik tombol Master
menuju P03 · Klik tombol Transaksi
menuju P04 · Klik tombol Logout untuk
keluar menuju P01 · Klik tombol Barang
menuju P03 · Klik tombol Kategori
menuju P05 · Klik tombol Kota menuju
P06
· Klik tombol Provinsi menuju P07 · Klik tombol Jasa
Pengiriman menuju P16 · Klik tombol Choose File
untuk memasukkan gambar · Klik tombol Tambah
untuk menyimpan data · Klik tombol Kembali
untuk kembali ke halaman sebelumnya
Nama Layer : P13
Ukuran Layer : 800 pixel x 600 pixel
Font : Arial, Sans-serif, BankGothic Md BT Background : Putih JEBGOS ACCESSORIES Tambah Kategori Tambah ID Kategori Nama Kembali Master Transaksi
Home Laporan Logout
Barang Data Master Kategori Kota Provinsi Jasa Pengiriman
Gambar 3.58 Perancangan Antar Muka Tambah Kategori 13. Perancangan Antarmuka Tambah Kota
P14
Copyrigth © 2011 Jebgos Accessories
· Klik tombol Home menuju P02 · Klik tombol Master
menuju P03 · Klik tombol Transaksi
menuju P04 · Klik tombol Logout untuk
keluar menuju P01 · Klik tombol Barang
menuju P03 · Klik tombol Kategori
menuju P05 · Klik tombol Kota menuju
P06
· Klik tombol Provinsi menuju P07 · Klik tombol Jasa
Pengiriman menuju P16 · Klik tombol Tambah
untuk menyimpan data · Klik tombol Kembali
untuk kembali ke halaman sebelumnya
Nama Layer : P14
Ukuran Layer : 800 pixel x 600 pixel
Font : Arial, Sans-serif, BankGothic Md BT Background : Putih JEBGOS ACCESSORIES Tambah Kota Tambah Nama Provinsi Kembali Kota Kabupaten Master Transaksi
Home Laporan Logout
Barang Data Master Kategori Kota Provinsi Jasa Pengiriman Paket
Jasa Pengiriman Pilih Jasa
Harga Kabupaten/Kota
Pilih Paket
14. Perancangan Antarmuka Tambah Provinsi
P15
Copyrigth © 2011 Jebgos Accessories
· Klik tombol Home menuju P02 · Klik tombol Master
menuju P03 · Klik tombol Transaksi
menuju P04 · Klik tombol Logout untuk
keluar menuju P01 · Klik tombol Barang
menuju P03 · Klik tombol Kategori
menuju P05 · Klik tombol Kota menuju
P06
· Klik tombol Provinsi menuju P07 · Klik tombol Jasa
Pengiriman menuju P16 · Klik tombol Tambah
untuk menyimpan data · Klik tombol Kembali
untuk kembali ke halaman sebelumnya
Nama Layer : P15
Ukuran Layer : 800 pixel x 600 pixel
Font : Arial, Sans-serif, BankGothic Md BT Background : Putih JEBGOS ACCESSORIES Kota Provinsi Tambah Kota Tambah ID Provinsi Nama Kembali Master Transaksi
Home Laporan Logout
Barang Data Master Kategori Kota Provinsi Jasa Pengiriman
Gambar 3.60 Perancangan Antar Muka Tambah Provinsi 3.3.2.4Perancangan Antarmuka Admin
Perancangan antarmuka untuk admin dari aplikasi E-Commerce di Jebgos Accessories adalah sebagai berikut:
1. Perancangan Antarmuka Login
A01
Copyrigth © 2011 Jebgos Accessories
· Klik tombol Login menuju A02
Nama Layer : A01
Ukuran Layer : 800 pixel x 600 pixel
Font : Arial, Sans-serif, BankGothic Md BT Background : Abu-abu
Login Username
Password
Login
Gambar 3.61 Perancangan Antar Muka Login 2. Perancangan Antarmuka Pengolahan Data Petugas
A01
Copyrigth © 2011 Jebgos Accessories
JEBGOS
ACCESSORIES Home
· Klik tombol Petugas menuju A02 · Klik tombol Ganti
Password menuju A03 · Klik tombol Tambah
menuju A04
Nama Layer : A02
Ukuran Layer : 800 pixel x 600 pixel
Font : Arial, Sans-serif, BankGothic Md BT Background : Abu-abu Logout Petugas Data Petugas Ganti Paswword Cari Petugas Cari
Username Email Alamat Telepon Keterangan Edit Hapus
Tambah
3. Perancangan Antarmuka Ganti Password
A03
Copyrigth © 2011 Jebgos Accessories
JEBGOS
ACCESSORIES Home
· Klik tombol Petugas menuju A02 · Klik tombol Ganti
Password menuju A03 · Klik tombol Ganti untuk
mengganti data password · Klik tombol Reset untuk
mengembalikan nilai masukan
Nama Layer : A03
Ukuran Layer : 800 pixel x 600 pixel
Font : Arial, Sans-serif, BankGothic Md BT Background : Abu-abu Logout Petugas Data Petugas Ganti Paswword Ganti paswword Ganti Password Lama
Confirm Password Lama Password Baru Confirm Password Baru
Reset
Gambar 3.63 Perancangan Antar Muka Ganti Password 4. Perancangan Antarmuka Tambah Petugas
A04
Copyrigth © 2011 Jebgos Accessories
JEBGOS
ACCESSORIES Home
· Klik tombol Petugas menuju A02 · Klik tombol Ganti
Password menuju A03 · Klik tombol Ganti untuk
mengganti data petugas · Klik tombol Reset untuk mengembalikan nilai masukan
Nama Layer : A04
Ukuran Layer : 800 pixel x 600 pixel
Font : Arial, Sans-serif, BankGothic Md BT Background : Abu-abu Logout Petugas Data Petugas Ganti Paswword Petugas Ganti Username Password Nama Petugas E-mail Reset Alamat No.telepon
Keterangan Admin Petugas