18. Tabel jasa Tabel ini berfungsi untuk menyimpan data ongkos kirim. Struktur
tabel ongkos kirim dijelaskan pada tabel 3.40.
Tabel 3.40 Tabel jasa
Nama Field Tipe Data
Panjang Kunci
id_jasa int
11 Primary Key
nama_jasa int
30 url
varchar 100
3.3 Perancangan Antar Muka
Interface atau antar muka merupakan tampilan dari suau program aplikasi
yang berperan sebagai media komunikasi yang digunakan sebagai sarana berdialog antara program dengan user. Sistem yang akan dibangun diharapkan
menyediakan interface yang mudah dipahami dan digunakan oleh user. Perancangan interface untuk aplikasi E-Commerce di Jebgos Accessories
terdiri dari perancangan tampilan dan perancangan pesan.
3.3.1 Perancangan Struktur Menu
Perancangan Struktur menu menggambarkan keterkaitan setiap menu yang bisa di akses oleh user yang digambarkan sebagai berikut:
1. Struktur Menu Pengunjung
Struktur menu pengunjung yang ada di e-commerce Jebgos Accessories dapat dilihat pada Gambar 3.19.
Produk Jebgos
Daftar Keranjang
Home Cari
Menu Aplikasi
Gambar 3.19 Struktur Menu Pengunjung
2. Struktur Menu Member
Struktur menu member yang ada di website E-Commerce Jebgos Accessories dapat dilihat pada Gambar 3.20.
Produk Jebgos
Data User Keranjang
Home Cari
Login
Logout
Profile Histori
Pembelian Ganti
Password
Gambar 3.20 Struktur Menu Member
2. Struktur Menu Petugas
Struktur menu petugas yang ada di website e-commerce Jebgos Accessories dapat dilihat pada Gambar 3.21.
Login
Transaksi Master
Logout Home
Laporan
Keranjang Pesanan
Provinsi Pengiriman
kota Pembayaran
Kategori Barang
Edit Tambah
Cari Hapus
Gambar 3.21 Struktur Menu Petugas
3. Struktur Menu Admin
Struktur menu operator yang ada di website e-commerce Jebgos Accessories dapat dilihat pada Gambar 3.22.
Edit Cari
Aktivasi Hapus
Tambah Cari
Data User Data
Pelanggan Login
Gambar 3.22 Struktur Menu Admin 3.3.2
Perancangan Antar Muka 3.3.2.1.1
Perancangan Antarmuka Pengunjung
Perancangan antarmuka untuk pengunjung dari aplikasi E-Commerce di Jebgos Accessories adalah sebagai berikut:
1. Perancangan antarmuka menu beranda
F02
Copyrigth © 2011 Jebgos Accessories
JEBGOS ACCESSORIES
Gambar
Beranda Produk Keranjang Jebgos Cari Daftar
Jepitan
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail Masukkan
Keranjang Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Lain-lain
· Klik tombol Beranda menuju F01
· Klik tombol Produk menuju F02
· Klik tombol Keranjang menuju F03
· Klik tombol Jebgos menuju F04
· Klik tombol Cari menuju F05
· Klik tombol Daftar menuju F06
· Klik tombol Jepitan menuju F07
· Klik tombol Bando menuju F07
· Klik tombol Bros menuju F07
· Klik Gambar Produk menuju F08
· Klik tombol Masukkan Keranjang menuju F03
· Klik tombol Detail menuju F08
Nama Layer : F02
Ukuran Layer : 800 pixel x 600 pixel
Font : Arial, Sans-serif, BankGothic Md BT
Background :Abu-Abu
Jepitan Bando
Bros
Kategori Masuk
E-mail Kata Kunci
Login
Isi Keranjang
Gambar 3.23 Perancangan Antarmuka Beranda
2. Perancangan Antarmuka Produk
F02
Copyrigth © 2011 Jebgos Accessories
JEBGOS ACCESSORIES
Gambar
Beranda Produk Keranjang Jebgos Cari Daftar
Jepitan
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail Masukkan
Keranjang Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Lain-lain
· Klik tombol Beranda menuju F01
· Klik tombol Produk menuju F02
· Klik tombol Keranjang menuju F03
· Klik tombol Jebgos menuju F04
· Klik tombol Cari menuju F05
· Klik tombol Daftar menuju F06
· Klik tombol Jepitan menuju F07
· Klik tombol Bando menuju F07
· Klik tombol Bros menuju F07
· Klik Gambar Produk menuju F08
· Klik tombol Masukkan Keranjang menuju F03
· Klik tombol Detail menuju F08
Nama Layer : F02
Ukuran Layer : 800 pixel x 600 pixel
Font : Arial, Sans-serif, BankGothic Md BT
Background : Abu-Abu
Jepitan Bando
Bros
Kategori Masuk
E-mail Kata Kunci
Login
Isi Keranjang
Gambar 3.24 Perancangan Antarmuka Cara Pemesanan
3. Perancangan Antarmuka Keranjang
F03
Copyrigth © 2011 Jebgos Accessories
JEBGOS ACCESSORIES
Gambar
Beranda Produk Keranjang Jebgos Cari Daftar
Nama Layer : F03
Ukuran Layer : 800 pixel x 600 pixel
Font : Arial, Sans-serif, BankGothic Md BT
Background : Abu-Abu
Jepitan Bando
Bros
Kategori Masuk
E-mail Kata Kunci
Masuk
Isi Keranjang Keranjang
Kode Barang Harga Disc Qty Subtotal
Hapus
Total Harga
Belanja Lagi Kosongkan Keranjang
Perbarui Keranjang SELESAI
· Klik tombol Beranda menuju F01
· Klik tombol Produk menuju F02
· Klik tombol Keranjang menuju F03
· Klik tombol Jebgos menuju F04
· Klik tombol Cari menuju F05
· Klik tombol Daftar menuju F06
· Klik tombol Jepitan menuju F07
· Klik tombol Bando menuju F07
· Klik tombol Bros menuju F07
· Klik tombol Belanja Lagi menuju F01
· Klik tombol Hapus untuk menghapus barang dari
keranjang · Klik tombol Kosongkan
Keranjang untuk mengosongkan
keranjang · Klik tombol SELESAI
menuju F11
Gambar 3.25 Perancangan Antarmuka Keranjang
Perancangan Antarmuka Tentang
F04
Copyrigth © 2011 Jebgos Accessories
JEBGOS ACCESSORIES
Gambar
Beranda Produk Keranjang Jebgos Cari Daftar
Nama Layer : F04
Ukuran Layer : 800 pixel x 600 pixel
Font : Arial, Sans-serif, BankGothic Md BT
Background : Abu-Abu
Jepitan Bando
Bros
Kategori Masuk
E-mail Kata Kunci
Masuk
Isi Keranjang
· Klik tombol Beranda menuju F01
· Klik tombol Produk menuju F02
· Klik tombol Keranjang menuju F03
· Klik tombol Jebgos menuju F04
· Klik tombol Cari menuju F05
· Klik tombol Daftar menuju F06
· Klik tombol Jepitan menuju F07
· Klik tombol Bando menuju F07
· Klik tombol Bros menuju F07
Jebgos
Tentang JEBGOS
Gambar 3.26 Perancangan Antar Muka tentang
4. Perancangan Antarmuka Cari
F05
Copyrigth © 2011 Jebgos Accessories
JEBGOS ACCESSORIES
Gambar
Beranda Produk Keranjang Jebgos Cari Daftar
Nama Layer : F05
Ukuran Layer : 800 pixel x 600 pixel
Font : Arial, Sans-serif, BankGothic Md BT
Background : Abu-Abu
Jepitan Bando
Bros
Kategori Masuk
E-mail Kata Kunci
Masuk
Isi Keranjang Cari Barang
Nama Barang
Cari berdasarkan Jepitan
Semua Bros
Bando
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
· Klik tombol Beranda menuju F01
· Klik tombol Produk menuju F02
· Klik tombol Keranjang menuju F03
· Klik tombol Jebgos menuju F04
· Klik tombol Cari menuju F05
· Klik tombol Daftar menuju F06
· Klik tombol Jepitan menuju F07
· Klik tombol Bando menuju F07
· Klik tombol Bros menuju F07
· Klik Gambar Produk Menuju F08
· Klik tombol Masukkan Keranjang menuju F03
· Klik tombol Detail menuju F08
· Klik tombol Cari untuk mencari barang
Gambar 3.27 Perancangan Antar Muka Cari
5. Perancangan Antarmuka Daftar
F06
Copyrigth © 2011 Jebgos Accessories
JEBGOS ACCESSORIES
Gambar
Beranda Produk Keranjang Jebgos Cari Daftar
Nama Layer : F06
Ukuran Layer : 800 pixel x 600 pixel
Font : Arial, Sans-serif, BankGothic Md BT
Background : Abu-Abu
· Klik tombol Beranda menuju F01
· Klik tombol Produk menuju F02
· Klik tombol Keranjang menuju F03
· Klik tombol Jebgos menuju F04
· Klik tombol Cari menuju F05
· Klik tombol Daftar menuju F06
· Klik tombol Jepitan menuju F07
· Klik tombol Bando menuju F07
· Klik tombol Bros menuju F07
· Klik tombol Daftar untuk mendaftar menjadi
anggota · Klik tombol Reset untuk
mereset isian Registrasi
E- Mail Password
Nama Alamat
Kode Pos Kota
No Telp Daftar
Reset
Jepitan Bando
Bros
Kategori Masuk
E-mail Kata Kunci
Masuk
Isi Keranjang
Gambar 3.28 Perancangan Antar Muka Daftar
6. Perancangan Antarmuka Kategori
F07
Copyrigth © 2011 Jebgos Accessories
JEBGOS ACCESSORIES
Gambar
Beranda Produk Keranjang Jebgos Cari Daftar
Nama Kategori · Klik tombol Beranda
menuju F01 · Klik tombol Produk
menuju F02 · Klik tombol Keranjang
menuju F03 · Klik tombol Jebgos
menuju F04 · Klik tombol Cari menuju
F05 · Klik tombol Daftar
menuju F06 · Klik tombol Jepitan
menuju F07 · Klik tombol Bando
menuju F07 · Klik tombol Bros menuju
F07 · Klik Gambar Produk
Menuju F08 · Klik tombol Masukkan
Keranjang menuju F03 · Klik tombol Detail
menuju F08
Nama Layer : F07
Ukuran Layer : 800 pixel x 600 pixel
Font : Arial, Sans-serif, BankGothic Md BT
Background : Abu-Abu
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk Jepitan
Bando Bros
Kategori Masuk
E-mail Kata Kunci
Masuk
Isi Keranjang
Gambar 3.29 Perancangan Antar Muka Kategori
7. Perancangan Antarmuka Detail Produk
F08
Copyrigth © 2011 Jebgos Accessories
JEBGOS ACCESSORIES
Gambar
Home Produk Keranjang Jebgos Cari Daftar
Nama Barang
· Klik tombol Home menuju F01
· Klik tombol Produk menuju F02
· Klik tombol Keranjang menuju F03
· Klik tombol Jebgos menuju F04
· Klik tombol Cari menuju F05
· Klik tombol Daftar menuju F06
· Klik tombol Jepitan menuju F07
· Klik tombol Bando menuju F07
· Klik tombol Bros menuju F07
· Klik tombol Masukkan Keranjang menuju F03
Nama Layer : F08
Ukuran Layer : 800 pixel x 600 pixel
Font : Arial, Sans-serif, BankGothic Md BT
Background : Abu-Abu
Masukkan Keranjang
Gambar Produk Keterangan Barang
Rating
Komentar
Jepitan Bando
Bros
Kategori Masuk
E-mail Kata Kunci
Masuk
Isi Keranjang
Gambar 3.30 Perancangan Antar Muka Detail Produk
8. Perancangan Antarmuka Checkout
F09
Copyrigth © 2011 Jebgos Accessories
JEBGOS ACCESSORIES
Gambar
Beranda Produk Keranjang Jebgos Cari Daftar
Nama Layer : F09
Ukuran Layer : 800 pixel x 600 pixel
Font : Arial, Sans-serif, BankGothic Md BT
Background : Abu-Abu
Jepitan Bando
Bros
Kategori Masuk
E-mail Kata Kunci
Masuk
Isi Keranjang
· Klik tombol Beranda menuju F01
· Klik tombol Produk menuju F02
· Klik tombol Keranjang menuju F03
· Klik tombol Jebgos menuju F04
· Klik tombol Cari menuju F05
· Klik tombol Daftar menuju F06
· Klik tombol Jepitan menuju F07
· Klik tombol Bando menuju F07
· Klik tombol Bros menuju F07
Maaf, Anda harus login atau daftar terlebih dahulu
untuk dapat melanjutkan proses belanja ini
Gambar 3.31 Perancangan Antar Muka Checkout
3.3.2.2 Perancangan Antarmuka Member
Perancangan antarmuka untuk member setelah login dari aplikasi E- Commerce di Jebgos Accessories adalah sebagai berikut:
1. Perancangan Antarmuka Menu Utama Beranda
F01
Copyrigth © 2011 Jebgos Accessories
JEBGOS ACCESSORIES
Gambar
Beranda Produk Keranjang Jebgos Cari Keluar
Baru
Banyak Dilihat · Klik tombol Beranda
menuju F01 · Klik tombol Produk
menuju F02 · Klik tombol Keranjang
menuju F03 · Klik tombol Jebgos
menuju F04 · Klik tombol Cari menuju
F05 · Klik tombol Keluar untuk
keluar · Klik tombol Profil menuju
F06 · Klik tombol Jepitan
menuju F07 · Klik tombol Bando
menuju F07 · Klik tombol Bros menuju
F07 · Klik Gambar Produk
menuju F08 · Klik tombol Masukkan
Keranjang menuju F03 · Klik tombol Detail
menuju F08
Nama Layer : F01
Ukuran Layer : 800 pixel x 600 pixel
Font : Arial, Sans-serif, BankGothic Md BT
Background : Abu-Abu
Jepitan Bando
Bros
Kategori Data Pengguna
Nama E-mail
Profil
Isi Keranjang Terlaris
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Gambar 3.32
Perancangan Antar Muka Menu Utama Beranda
2. Perancangan Antarmuka Produk
F02
Copyrigth © 2011 Jebgos Accessories
JEBGOS ACCESSORIES
Gambar
Beranda Produk Keranjang Jebgos Cari Keluar
Jepitan
Lain-lain · Klik tombol Beranda
menuju F01 · Klik tombol Produk
menuju F02 · Klik tombol Keranjang
menuju F03 · Klik tombol Jebgos
menuju F04 · Klik tombol Cari menuju
F05 · Klik tombol Keluar untuk
keluar · Klik tombol Profil menuju
F06 · Klik tombol Jepitan
menuju F07 · Klik tombol Bando
menuju F07 · Klik tombol Bros menuju
F07 · Klik Gambar Produk
menuju F08 · Klik tombol Masukkan
Keranjang menuju F03 · Klik tombol Detail
menuju F08
Nama Layer : F02
Ukuran Layer : 800 pixel x 600 pixel
Font : Arial, Sans-serif, BankGothic Md BT
Background : Abu-Abu
Jepitan Bando
Bros
Kategori Data Pengguna
Nama E-mail
Profil
Isi Keranjang
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Gambar 3.33 Perancangan Antar Muka Produk
3. Perancangan Antarmuka Keranjang
F03
Copyrigth © 2011 Jebgos Accessories
JEBGOS ACCESSORIES
Gambar
Beranda Produk Keranjang Jebgos Cari Keluar
Nama Layer : F03
Ukuran Layer : 800 pixel x 600 pixel
Font : Arial, Sans-serif, BankGothic Md BT
Background : Abu-Abu
Keranjang
Kode Barang Harga Disc Qty Subtotal
Hapus
Total Harga
Belanja Lagi Kosongkan Keranjang
Perbarui Keranjang SELESAI
· Klik tombol Beranda menuju F01
· Klik tombol Produk menuju F02
· Klik tombol Keranjang menuju F03
· Klik tombol Jebgos menuju F04
· Klik tombol Cari menuju F05
· Klik tombol Keluar untuk keluar
· Klik tombol Profil menuju F06
· Klik tombol Jepitan menuju F07
· Klik tombol Bando menuju F07
· Klik tombol Bros menuju F07
· Klik tombol Belanja Lagi menuju F01
· Klik tombol Hapus untuk menghapus barang dari
keranjang · Klik tombol Perbarui
Keranjang untuk mengubah data
keranjang · Klik tombol Kosongkan
Keranjang untuk mengosongkan
keranjang · Klik tombol SELESAI
menuju F11
Jepitan Bando
Bros
Kategori Data Pengguna
Nama E-mail
Profil
Isi Keranjang
Gambar 3.34 Perancangan Antar Muka Keranjang
4. Perancangan Antarmuka Tentang
F04
Copyrigth © 2011 Jebgos Accessories
JEBGOS ACCESSORIES
Gambar
Beranda Produk Keranjang Jebgos Cari Keluar
Nama Layer : F04
Ukuran Layer : 800 pixel x 600 pixel
Font : Arial, Sans-serif, BankGothic Md BT
Background : Abu-Abu
· Klik tombol Beranda menuju F01
· Klik tombol Produk menuju F02
· Klik tombol Keranjang menuju F03
· Klik tombol Jebgos menuju F04
· Klik tombol Cari menuju F05
· Klik tombol Keluar untuk keluar
· Klik tombol Profil menuju F06
· Klik tombol Jepitan menuju F07
· Klik tombol Bando menuju F07
· Klik tombol Bros menuju F07
Jepitan Bando
Bros
Kategori Data Pengguna
Nama E-mail
Profil
Isi Keranjang Jebgos
Tentang JEBGOS
Gambar 3.35 Perancangan Antar Muka Tentang
5. Perancangan Antarmuka Cari
F05
Copyrigth © 2011 Jebgos Accessories
JEBGOS ACCESSORIES
Gambar
Beranda Produk Keranjang Jebgos Cari Keluar
Nama Layer : F05
Ukuran Layer : 800 pixel x 600 pixel
Font : Arial, Sans-serif, BankGothic Md BT
Background : Abu-Abu
Cari Barang
Nama Barang
Cari berdasarkan Jepitan
Semua Bros
Bando
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
· Klik tombol Beranda menuju F01
· Klik tombol Produk menuju F02
· Klik tombol Keranjang menuju F03
· Klik tombol Jebgos menuju F04
· Klik tombol Cari menuju F05
· Klik tombol Keluar untuk keluar
· Klik tombol Daftar menuju F06
· Klik tombol Jepitan menuju F07
· Klik tombol Bando menuju F07
· Klik tombol Bros menuju F07
· Klik Gambar Produk Menuju F08
· Klik tombol Masukkan Keranjang menuju F03
· Klik tombol Detail menuju F08
· Klik tombol Cari untuk mencari barang
Jepitan Bando
Bros
Kategori Data Pengguna
Nama E-mail
Profil
Isi Keranjang
Gambar 3.36 Perancangan Antar Muka Cari
6. Perancangan Antarmuka My Menu
F06
Copyrigth © 2011 Jebgos Accessories
JEBGOS ACCESSORIES
Gambar
Beranda Produk Keranjang Jebgos Cari Keluar
Nama Layer : F06
Ukuran Layer : 800 pixel x 600 pixel
Font : Arial, Sans-serif, BankGothic Md BT
Background : Abu-Abu
· Klik tombol Beranda menuju F01
· Klik tombol Produk menuju F02
· Klik tombol Keranjang menuju F03
· Klik tombol Jebgos menuju F04
· Klik tombol Cari menuju F05
· Klik tombol Keluar untuk keluar
· Klik tombol Profil menuju F06
· Klik tombol Profil menuju F06
· Klik tombol Pembelian menuju F11
· Klik tombol Ganti Kata Kunci menuju F12
· Klik tombol Ubah menuju F13
Data Pengguna
E- Mail Nama
Alamat Kode Pos
Kota No Telp
Ubah
Profil Pembelian
Ganti Kata Kunci
Menu Saya Data Pengguna
Nama E-mail
Profil
Isi Keranjang
Gambar 3.37 Perancangan Antar Muka My Menu
7. Perancangan Antarmuka Kategori
F07
Copyrigth © 2011 Jebgos Accessories
JEBGOS ACCESSORIES
Gambar
Beranda Produk Keranjang Jebgos Cari Keluar
Nama Kategori · Klik tombol Beranda
menuju F01 · Klik tombol Produk
menuju F02 · Klik tombol Keranjang
menuju F03 · Klik tombol Jebgos
menuju F04 · Klik tombol Cari menuju
F05 · Klik tombol Keluar untuk
keluar · Klik tombol Jepitan
menuju F07 · Klik tombol Bando
menuju F07 · Klik tombol Bros menuju
F07 · Klik Gambar Produk
Menuju F08 · Klik tombol Masukkan
Keranjang menuju F03 · Klik tombol Detail
menuju F08
Nama Layer : F07
Ukuran Layer : 800 pixel x 600 pixel
Font : Arial, Sans-serif, BankGothic Md BT
Background : Abu-Abu
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk
Masukkan Keranjang
Detail
Gambar Produk Jepitan
Bando Bros
Kategori Data Pengguna
Nama E-mail
Profil
Isi Keranjang
Gambar 3.38 Perancangan Antar Muka Kategori
8. Perancangan Antarmuka Detail
F08
Copyrigth © 2011 Jebgos Accessories
JEBGOS ACCESSORIES
Gambar
Beranda Produk Keranjang Jebgos Cari Keluar
Nama Barang · Klik tombol Beranda
menuju F01 · Klik tombol Produk
menuju F02 · Klik tombol Keranjang
menuju F03 · Klik tombol Jebgos
menuju F04 · Klik tombol Cari menuju
F05 · Klik tombol Keluar untuk
keluar · Klik tombol Profil menuju
F06 · Klik tombol Jepitan
menuju F07 · Klik tombol Bando
menuju F07 · Klik tombol Bros menuju
F07 · Klik tombol Masukkan
Keranjang menuju F03
Nama Layer : F08
Ukuran Layer : 800 pixel x 600 pixel
Font : Arial, Sans-serif, BankGothic Md BT
Background : Abu-Abu
Masukkan Keranjang
Gambar Produk Keterangan Barang
Rating
Komentar
Jepitan Bando
Bros
Kategori Data Pengguna
Nama E-mail
Profil
Isi Keranjang
Gambar 3.39 Perancangan Antar Muka Detail
9. Perancangan Antarmuka PraCheckout
F09
Copyrigth © 2011 Jebgos Accessories
JEBGOS ACCESSORIES
Gambar
Beranda Produk Keranjang Jebgos Cari Keluar
Nama Layer : F09
Ukuran Layer : 800 pixel x 600 pixel
Font : Arial, Sans-serif, BankGothic Md BT
Background : Abu-Abu
· Klik tombol Beranda menuju F01
· Klik tombol Produk menuju F02
· Klik tombol Keranjang menuju F03
· Klik tombol Jebgos menuju F04
· Klik tombol Cari menuju F05
· Klik tombol Keluar untuk keluar
· Klik tombol Profil menuju F06
· Klik tombol Jepitan menuju F07
· Klik tombol Bando menuju F07
· Klik tombol Bros menuju F07
· Klik tombol Lanjut menuju F10
· Klik tombol Batal untuk membatalkan
· Klik tombol Reset untuk mengosongkan isian
Kode Barang Harga Disc Qty Subtotal Total Harga
Nama Alamat
Pembayaran
Paypal Transfer Bank
Masukan data pengiriman
Lanjut Reset
Batal Jepitan
Bando Bros
Kategori Data Pengguna
Nama E-mail
Profil
Isi Keranjang
Gambar 3.40 Perancangan Antar Muka PraCheckout
10. Perancangan Antarmuka Checkout
F10
Copyrigth © 2011 Jebgos Accessories
JEBGOS ACCESSORIES
Gambar
Beranda Produk Keranjang Jebgos Cari Keluar
Nama Layer : F10
Ukuran Layer : 800 pixel x 600 pixel
Font : Arial, Sans-serif, BankGothic Md BT
Background : Abu-Abu
Pesanan Anda telah kami proses, anda akan menerima e-mail konfirmasi pesanan.
Setelah Kami menerima pembayaran dari Anda produk akan langsung dikirim ke alamat anda.
Terima Kasih __________________________________________________________________
· Klik tombol Beranda menuju F01
· Klik tombol Produk menuju F02
· Klik tombol Keranjang menuju F03
· Klik tombol Jebgos menuju F04
· Klik tombol Cari menuju F05
· Klik tombol Keluar untuk keluar
· Klik tombol Profil menuju F06
· Klik tombol Jepitan menuju F07
· Klik tombol Bando menuju F07
· Klik tombol Bros menuju F07
Jepitan Bando
Bros
Kategori Data Pengguna
Nama E-mail
Profil
Isi Keranjang
Gambar 3.41 Perancangan Antar Muka Checkout
11. Perancangan Antarmuka History Pemesanan
F11
Copyrigth © 2011 Jebgos Accessories
JEBGOS ACCESSORIES
Gambar
Beranda Produk Keranjang Jebgos Cari Keluar
Nama Layer : F11
Ukuran Layer : 800 pixel x 600 pixel
Font : Arial, Sans-serif, BankGothic Md BT
Background : Abu-Abu
· Klik tombol Beranda menuju F01
· Klik tombol Produk menuju F02
· Klik tombol Keranjang menuju F03
· Klik tombol Jebgos menuju F04
· Klik tombol Cari menuju F05
· Klik tombol Keluar untuk keluar
· Klik tombol Profil menuju F06
· Klik tombol Pembelian menuju F11
· Klik tombol Ganti Kata Kunci menuju F12
· Klik tombol Ubah Profil menuju F13
· Klik tombol Bayar untuk menuju F14
· Klik tombol Detail untuk menuju F15
Pembelian
ID Pembelian Tanggal Beli
Status Bayar Status Kirim
Bayar Detail
Profil Pembelian
Ganti Kata Kunci
Menu Saya Data Pengguna
Nama E-mail
Profil
Isi Keranjang
Gambar 3.42 Perancangan Antar Muka History Pemesanan
12. Perancangan Antarmuka Ganti Password
F12
Copyrigth © 2011 Jebgos Accessories
JEBGOS ACCESSORIES
Gambar
Beranda Produk Keranjang Jebgos Cari Keluar
Nama Layer : F12
Ukuran Layer : 800 pixel x 600 pixel
Font : Arial, Sans-serif, BankGothic Md BT
Background : Abu-Abu
· Klik tombol Beranda menuju F01
· Klik tombol Produk menuju F02
· Klik tombol Keranjang menuju F03
· Klik tombol Jebgos menuju F04
· Klik tombol Cari menuju F05
· Klik tombol Keluar untuk keluar
· Klik tombol Profil menuju F06
· Klik tombol Pembelian menuju F11
· Klik tombol Ganti Kata Kunci menuju F12
· Klik tombol Ubah Profil menuju F13
· Klik tombol Simpan untuk mengubah
password · Klik tombol Reset untuk
mengembalikan nilai isian ke keadaan awal
Profil Pembelian
Ganti Kata Kunci
Menu Saya Data Pengguna
Nama E-mail
Profil
Isi Keranjang Ganti Password
Password Lama : Confirm Password Lama :
Password Baru : Confirm Password Baru :
Reset Simpan
Gambar 3.43 Perancangan Antar Muka Ganti Password
13. Perancangan Antarmuka Ubah Profile
F13
Copyrigth © 2011 Jebgos Accessories
JEBGOS ACCESSORIES
Gambar
Beranda Produk Keranjang Jebgos Cari Keluar
Nama Layer : F13
Ukuran Layer : 800 pixel x 600 pixel
Font : Arial, Sans-serif, BankGothic Md BT
Background : Abu-Abu
· Klik tombol Beranda menuju F01
· Klik tombol Produk menuju F02
· Klik tombol Keranjang menuju F03
· Klik tombol Jebgos menuju F04
· Klik tombol Cari menuju F05
· Klik tombol Keluar untuk keluar
· Klik tombol Profil menuju F06
· Klik tombol Pembelian menuju F11
· Klik tombol Ganti Kata Kunci menuju F12
· Klik tombol Ubah Profil menuju F13
· Klik tombol Simpan untuk mengubah data
profil · Klik tombol Reset untuk
mengembalikan nilai isian ke keadaan awal
Profil Pembelian
Ganti Kata Kunci
Menu Saya Data Pengguna
Nama E-mail
Profil
Isi Keranjang Ubah Data
Simpan Reset
Nama E-mail
Alamat Kode Pos
Kota No Telepon
Gambar 3.44 Perancangan Antar Muka Ubah Profile
14. Perancangan Antarmuka Bayar
F14
Copyrigth © 2011 Jebgos Accessories
JEBGOS ACCESSORIES
Gambar
Beranda Produk Keranjang Jebgos Cari Keluar
Nama Layer : F14
Ukuran Layer : 800 pixel x 600 pixel
Font : Arial, Sans-serif, BankGothic Md BT
Background : Abu-Abu
· Klik tombol Beranda menuju F01
· Klik tombol Produk menuju F02
· Klik tombol Keranjang menuju F03
· Klik tombol Jebgos menuju F04
· Klik tombol Cari menuju F05
· Klik tombol Keluar untuk keluar
· Klik tombol Profil menuju F06
· Klik tombol Pembelian menuju F11
· Klik tombol Ganti Kata Kunci menuju F12
· Klik tombol Ubah Profil menuju F13
· Klik tombol Bayar untuk menyimpan data
Profil Pembelian
Ganti Kata Kunci
Menu Saya Data Pengguna
Nama E-mail
Profil
Isi Keranjang Bayar Pesanan
Bayar Masukkan No Rekening
Masukkan No Transaksi
Gambar 3.45 Perancangan Antar Muka Bayar
15. Perancangan Antarmuka Detail Pesanan
F15
Copyrigth © 2011 Jebgos Accessories
JEBGOS ACCESSORIES
Gambar
Beranda Produk Keranjang Jebgos Cari Keluar
Nama Layer : F15
Ukuran Layer : 800 pixel x 600 pixel
Font : Arial, Sans-serif, BankGothic Md BT
Background : Abu-Abu
· Klik tombol Beranda menuju F01
· Klik tombol Produk menuju F02
· Klik tombol Keranjang menuju F03
· Klik tombol Jebgos menuju F04
· Klik tombol Cari menuju F05
· Klik tombol Keluar untuk keluar
· Klik tombol Profil menuju F06
· Klik tombol Pembelian menuju F11
· Klik tombol Ganti Kata Kunci menuju F12
· Klik tombol Ubah Profil menuju F13
Profil Pembelian
Ganti Kata Kunci
Menu Saya Data Pengguna
Nama E-mail
Profil
Isi Keranjang
Kode Barang Harga Disc Qty Subtotal Total Harga
Detail Pesanan
Gambar 3.46 Perancangan Antar Muka Detail Pesanan
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
Gambar 3.47 Perancangan Antar Muka 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
Gambar 3.49
Perancangan Antar Muka Pengolahan Data Barang
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
Logout Laporan
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
Logout Laporan
Barang
Data Master
Kategori Kota
Provinsi Jasa Pengiriman
Gambar 3.51 Perancangan Antar Muka Pengolahan Data Kategori
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
Hapus Edit
Tambah
Master Transaksi
Home Logout
Laporan
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 Logout
Laporan
Barang
Data Master
Kategori Kota
Provinsi Jasa Pengiriman
Gambar 3.53 Perancangan Antar Muka Pengolahan Data Provinsi
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 Logout
Laporan
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 Logout
Laporan
Pemesanan
Data Transaksi
Pembayaran Pengiriman
Retur
Gambar 3.55 Perancangan Antar Muka Pengolahan Data Pengiriman
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 Logout
Laporan
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 Logout
Laporan
Barang
Data Master
Kategori Kota
Provinsi Jasa Pengiriman
Gambar 3.57 Perancangan Antar Muka Tambah Barang
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
Logout Laporan
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 Logout
Laporan
Barang
Data Master
Kategori Kota
Provinsi Jasa Pengiriman
Paket Jasa Pengiriman
Pilih Jasa Harga
KabupatenKota Pilih Paket
Gambar 3.59 Perancangan Antar Muka Tambah Kota
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
Logout Laporan
Barang
Data Master
Kategori Kota
Provinsi Jasa Pengiriman
Gambar 3.60 Perancangan Antar Muka Tambah Provinsi 3.3.2.4
Perancangan 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 Edit
Keterangan Hapus
Tambah
Gambar 3.62 Perancangan Antar Muka Pengolahan Data Petugas
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
Petugas Admin
Gambar 3.64 Perancangan Antar Muka Tambah Petugas
3.3.3 Jaringan Semantik
