Perancangan Antarmuka Operator Perancangan Antarmuka

Data Master Data Pemesanan Data Laporan Enter Text Halaman Depan Ganti Password Log Out Data Member Logo Toko Footer No Email Nama Alamat Telepon Status 1 febianderisgmail.com Deris Febian Bangbayang,12345,Bandung,Jawa Barat Tidak Aktif Search Navigasi : 1. Klik tombol halaman depan akan menuju ke tampilan C01 2. Klik tombol ganti password akan menuju ke tampilan B23 3. Klik tombol data master akan menuju tampilan B03 B04 Gambar 3.32 Antarmuka Operator B04 Data Master Data Pemesanan Data Laporan Enter Text Halaman Depan Ganti Password Log Out Data Provinsi Logo Toko Footer No Nama Provinsi Perintah 1 Jawa Barat Edit - Hapus Search 2 Jawa Tengah Edit - Hapus 3 Jawa Timur Edit - Hapus Tambah B05 Navigasi : 1. Klik tombol halaman depan akan menuju ke tampilan C01 2. Klik tombol ganti password akan menuju ke tampilan B23 3. Klik tombol data master akan menuju tampilan B03 4. Klik tombol tambah akan menuju tampilan B06 5. Klik tombol edit akan menuju B07 Gambar 3.33 Antarmuka Operator B05 Data Master Data Pemesanan Data Laporan Enter Text Halaman Depan Ganti Password Log Out Form Tambah Provinsi Logo Toko Footer Nama Provinsi Simpan Batal B06 Navigasi : 1. Klik tombol halaman depan akan menuju ke tampilan C01 2. Klik tombol ganti password akan menuju ke tampilan B23 3. Klik tombol data master akan menuju tampilan B03 4. Klik tombol simpan akan menuju from P 5. Klik tombol batal akan kembali ke halaman sebelumnya Gambar 3.34 Antarmuka Operator B01 Data Master Data Pemesanan Data Laporan Jawa Timur Halaman Depan Ganti Password Log Out Form Edit Provinsi Logo Toko Footer Nama Provinsi Simpan Batal B07 Navigasi : 1. Klik tombol halaman depan akan menuju ke tampilan C01 2. Klik tombol ganti password akan menuju ke tampilan B23 3. Klik tombol data master akan menuju tampilan B03 4. Klik tombol simpan akan menuju from P 5. Klik tombol batal akan kembali ke halaman sebelumnya Gambar 3.35 Antarmuka Operator B07 Data Master Data Pemesanan Data Laporan Enter Text Halaman Depan Ganti Password Log Out Data Kota Logo Toko Footer No Kota Nama Provinsi Perintah 1 Bandung Jawa Barat Edit - Hapus Search 2 Garut Jawa Barat Edit - Hapus Tambah B08 Navigasi : 1. Klik tombol halaman depan akan menuju ke tampilan C01 2. Klik tombol ganti password akan menuju ke tampilan B23 3. Klik tombol data master akan menuju tampilan B03 4. Klik tombol tambah akan menuju tampilan B09 5. Klik tombol edit akan menuju B10 Gambar 3.36 Antarmuka Operator B08 Data Master Data Pemesanan Data Laporan Halaman Depan Ganti Password Log Out Form Tambah Kota Logo Toko Footer Nama Kota Simpan Batal Nama Provinsi V Pilih Provinsi B09 Navigasi : 1. Klik tombol halaman depan akan menuju ke tampilan C01 2. Klik tombol ganti password akan menuju ke tampilan B23 3. Klik tombol data master akan menuju tampilan B03 4. Klik tombol simpan akan menuju from P 5. Klik tombol batal akan kembali ke halaman sebelumnya Gambar 3.37 Antarmuka Operator B09 Data Master Data Pemesanan Data Laporan Halaman Depan Ganti Password Log Out Form Edit Kota Logo Toko Footer Nama Kota Simpan Batal Nama Provinsi Jawa Barat Bandung B10 Navigasi : 1. Klik tombol halaman depan akan menuju ke tampilan C01 2. Klik tombol ganti password akan menuju ke tampilan B23 3. Klik tombol data master akan menuju tampilan B03 4. Klik tombol simpan akan menuju from P 5. Klik tombol batal akan kembali ke halaman sebelumnya Gambar 3.38 Antarmuka Operator B10 Data Master Data Pemesanan Data Laporan Enter Text Halaman Depan Ganti Password Log Out Data Warna Logo Toko Footer No Kota Perintah 1 Merah Edit - Hapus Search 2 Biru Edit - Hapus Tambah 3 Hitam Edit - Hapus B11 Navigasi : 1. Klik tombol halaman depan akan menuju ke tampilan C01 2. Klik tombol ganti password akan menuju ke tampilan B23 3. Klik tombol data master akan menuju tampilan B03 4. Klik tombol tambah akan menuju tampilan B11 5. Klik tombol edit akan menuju B12 Gambar 3.39 Antarmuka Operator B11 Data Master Data Pemesanan Data Laporan Enter Text Halaman Depan Ganti Password Log Out Form Tambah Warna Logo Toko Footer Nama Warna Simpan Batal B12 Navigasi : 1. Klik tombol halaman depan akan menuju ke tampilan C01 2. Klik tombol ganti password akan menuju ke tampilan B23 3. Klik tombol data master akan menuju tampilan B03 4. Klik tombol simpan akan menuju from P 5. Klik tombol batal akan kembali ke halaman sebelumnya Gambar 3.40 Antarmuka Operator B12 Data Master Data Pemesanan Data Laporan Merah Halaman Depan Ganti Password Log Out Form Edit Warna Logo Toko Footer Nama Warna Simpan Batal B13 Navigasi : 1. Klik tombol halaman depan akan menuju ke tampilan C01 2. Klik tombol ganti password akan menuju ke tampilan B23 3. Klik tombol data master akan menuju tampilan B03 4. Klik tombol simpan akan menuju from P 5. Klik tombol batal akan kembali ke halaman sebelumnya Gambar 3.41 Antarmuka Operator B13 Data Master Data Pemesanan Data Laporan Enter Text Halaman Depan Ganti Password Log Out Data Ukuran Logo Toko Footer No Kota Perintah 1 Small Edit - Hapus Search 2 Medium Edit - Hapus Tambah 3 Large Edit - Hapus B14 Navigasi : 1. Klik tombol halaman depan akan menuju ke tampilan C01 2. Klik tombol ganti password akan menuju ke tampilan B23 3. Klik tombol data master akan menuju tampilan B03 4. Klik tombol tambah akan menuju tampilan B15 5. Klik tombol edit akan menuju B16 Gambar 3.42 Antarmuka Operator B14 Data Master Data Pemesanan Data Laporan Enter Text Halaman Depan Ganti Password Log Out Form Tambah Ukuran Logo Toko Footer Nama Ukuran Simpan Batal B15 Navigasi : 1. Klik tombol halaman depan akan menuju ke tampilan C01 2. Klik tombol ganti password akan menuju ke tampilan B23 3. Klik tombol data master akan menuju tampilan B03 4. Klik tombol simpan akan menuju from P 5. Klik tombol batal akan kembali ke halaman sebelumnya Gambar 3.43 Antarmuka Operator B15 Data Master Data Pemesanan Data Laporan Small Halaman Depan Ganti Password Log Out Form Edit Ukuran Logo Toko Footer Nama Ukuran Simpan Batal B16 Navigasi : 1. Klik tombol halaman depan akan menuju ke tampilan C01 2. Klik tombol ganti password akan menuju ke tampilan B23 3. Klik tombol data master akan menuju tampilan B03 4. Klik tombol simpan akan menuju from P 5. Klik tombol batal akan kembali ke halaman sebelumnya Gambar 3.44 Antarmuka Operator B16 Data Master Data Pemesanan Data Laporan Enter Text Halaman Depan Ganti Password Log Out Data Kategori Logo Toko Footer No Prefix Kategori Nama Kategori Perintah 1 TPGRF Tipografi Edit - Hapus Search 2 TRBT Tribute Edit - Hapus Tambah B17 Navigasi : 1. Klik tombol halaman depan akan menuju ke tampilan C01 2. Klik tombol ganti password akan menuju ke tampilan B23 3. Klik tombol data master akan menuju tampilan B03 4. Klik tombol tambah akan menuju tampilan B18 5. Klik tombol edit akan menuju B19 Gambar 3.45 Antarmuka Operator B17 Data Master Data Pemesanan Data Laporan Halaman Depan Ganti Password Log Out Form Tambah Kategori Logo Toko Footer Nama Kategori Simpan Batal Prefix Kategori B18 Navigasi : 1. Klik tombol halaman depan akan menuju ke tampilan C01 2. Klik tombol ganti password akan menuju ke tampilan B23 3. Klik tombol data master akan menuju tampilan B03 4. Klik tombol simpan akan menuju from P 5. Klik tombol batal akan kembali ke halaman sebelumnya Gambar 3.46 Antarmuka Operator B18 Data Master Data Pemesanan Data Laporan Tribute TRBT Halaman Depan Ganti Password Log Out Form Edit Kategori Logo Toko Footer Nama Kategori Simpan Batal Prefix Kategori B19 Navigasi : 1. Klik tombol halaman depan akan menuju ke tampilan C01 2. Klik tombol ganti password akan menuju ke tampilan B23 3. Klik tombol data master akan menuju tampilan B03 4. Klik tombol simpan akan menuju from P 5. Klik tombol batal akan kembali ke halaman sebelumnya Gambar 3.47 Antarmuka Operator B19 Data Master Data Pemesanan Data Laporan Enter Text Halaman Depan Ganti Password Log Out Data Produk Logo Toko Footer No Kode Nama Produk Berat Produk Harga Produk Perintah 1 TPGRF-2 ihatemondays 400 Gram Rp. 75.000 Edit - Hapus Search Tambah 2 TPGRf-3 Luice 400 Gram Rp. 75.000 Edit - Hapus 3 TRBT-1 Soekarno 400 Gram Rp. 75.000 Edit - Hapus B20 Navigasi : 1. Klik tombol halaman depan akan menuju ke tampilan C01 2. Klik tombol ganti password akan menuju ke tampilan B23 3. Klik tombol data master akan menuju tampilan B03 4. Klik tombol tambah akan menuju tampilan B21 5. Klik tombol edit akan menuju B22 Gambar 3.48 Antarmuka Operator B20 Data Master Data Pemesanan Data Laporan Halaman Depan Ganti Password Log Out Form Tambah Produk Logo Toko Footer Nama Produk Simpan Batal Kategori Berat Produk .Gram Harga Produk Rp. Diskon V Pilih Kategori B21 Navigasi : 1. Klik tombol halaman depan akan menuju ke tampilan C01 2. Klik tombol ganti password akan menuju ke tampilan B23 3. Klik tombol data master akan menuju tampilan B03 4. Klik tombol simpan akan menuju from P 5. Klik tombol batal akan kembali ke halaman sebelumnya Gambar 3.49 Antarmuka Operator B21 Data Master Data Pemesanan Data Laporan Soekarno 400 75000 Halaman Depan Ganti Password Log Out Form Edit Produk Logo Toko Footer Nama Produk Simpan Batal Kategori Berat Produk .Gram Harga Produk Rp. Diskon V Tribute B22 Navigasi : 1. Klik tombol halaman depan akan menuju ke tampilan C01 2. Klik tombol ganti password akan menuju ke tampilan B23 3. Klik tombol data master akan menuju tampilan B03 4. Klik tombol simpan akan menuju from P 5. Klik tombol batal akan kembali ke halaman sebelumnya Gambar 3.50 Antarmuka Operator B22 Data Master Data Pemesanan Data Laporan Halaman Depan Ganti Password Log Out Logo Toko Footer B23 Form Ganti Password Simpan Batal Password Lama Password Baru Konfirmasi Password Navigasi : 1. Klik tombol halaman depan akan menuju ke tampilan C01 2. Klik tombol ganti password akan menuju ke tampilan B23 3. Klik tombol data master akan menuju tampilan B03 4. Klik tombol simpan akan menuju from P 5. Klik tombol batal akan kembali ke halaman sebelumnya Gambar 3.51 Antarmuka Operator B23 Data Master Data Pemesanan Data Laporan List Pemesanan Retur Halaman Depan Ganti Password Log Out Logo Toko Footer B24 Navigasi : 1. Klik tombol halaman depan akan menuju ke tampilan C01 2. Klik tombol ganti password akan menuju ke tampilan B23 3. Klik tombol data master akan menuju tampilan B03 4. Klik tombol data pemesanan akan menuju B25 5. Klik tombol retur akan menuju B26 Gambar 3.52 Antarmuka Operator B24 Data Master Data Pemesanan Data Laporan Enter Text Enter Text Enter Text Enter Text Enter Text Halaman Depan Ganti Password Log Out Logo Toko Footer B25 Navigasi : 1. Klik tombol halaman depan akan menuju ke tampilan C01 2. Klik tombol ganti password akan menuju ke tampilan B23 3. Klik tombol data master akan menuju tampilan B03 4. Klik tombol data pemesanan akan menuju B25 5. Klik tombol retur akan menuju B26 6. Klik tombol detail maka akan menuju B27 Data Pemesanan Baru No Tgl Pesan Tgl Expired No.Invoice Member Total Status Perintah 1 09-Juli-2011 11-Juli-2011 INVLD4U-7 Adi Rp. 82,500 Menunggu Pembayaran Detail Search Data Pemesanan Sedang Di Proses Search No No.Invoice Member Total Perintah 1 INVLD4U-7 Adi Rp. 82,500 Detail Data Pemesanan Sedang Di Kirim Search No No.Invoice Member Total Perintah Data Pemesanan Terkirim Search No No.Invoice Member Total Perintah Data Pemesanan Gagal Search No No.Invoice Member Total Perintah Gambar 3.53 Antarmuka Operator B25 Data Master Data Pemesanan Data Laporan Enter Text Halaman Depan Ganti Password Log Out Logo Toko Footer B26 Navigasi : 1. Klik tombol halaman depan akan menuju ke tampilan C01 2. Klik tombol ganti password akan menuju ke tampilan B23 3. Klik tombol data master akan menuju tampilan B03 4. Klik tombol data pemesanan akan menuju B25 5. Klik tombol retur akan menuju B26 6. Klik tombol detail maka akan menuju B28 Data Klaim Retur No Tgl Pesan No.Retur No.Invoice Member Status Perintah 1 09-Juli-2011 RTR-1 INVLD4U-7 Adi Menunggu Pembayaran Detail Search Gambar 3.54 Antarmuka Operator B26 B27 Navigasi : 1. Klik tombol x akan keluar dari detail pemesanan dan menuju ke halaman sebelumnya Detail Pemesanan INVLD4U-7 Info Member E-mail Member : febianderisgmail.com Nama Member : Deris Alamat : Jln hasanudin no 63 No Telpn : Info Tanggal Pemesanan Tgl pemesanan : 09-Juli-2011 Tgl pembayaran : Tgl dikirim : Tgl terkirim : Tgl expired : 11-Juli-2011 Tgl expired retur : Info Alamat Dan Jasa Kirim Nama penerima :Rani Provinsi : Jawa Barat Kota : Karawang Alamat : Jln. Pemuncak No.88 Kode pos : 17435 Jasa kirim : [OKE] Info Produk Produk Harga Jumlah Total INVLD4U-7 Rp.76,500 1 Rp.76,500 Sub Total Biaya Kirim Total Bayar Rp.76,500 Rp. 6,000 Rp.82,500 Gambar 3.55 Antarmuka Operator B27 B28 Navigasi : 1. Klik tombol x akan keluar dari detail pemesanan dan menuju ke halaman sebelumnya Detail Retur RTR-1 Alasan Retur Gambar 1 Gambar 2 Gambar 3.56 Antarmuka Operator B28 Data Master Data Pemesanan Data Laporan Laporan Stok Produk Laporan Penjualan Halaman Depan Ganti Password Log Out Logo Toko Footer B29 Navigasi : 1. Klik tombol halaman depan akan menuju ke tampilan C01 2. Klik tombol ganti password akan menuju ke tampilan B23 3. Klik tombol data master akan menuju tampilan B03 4. Klik tombollaporan stok produk akan menuju B30 5. Klik tombol laporan penjualan akan menuju B31 Gambar 3.57 Antarmuka Operator B29 Data Master Data Pemesanan Data Laporan Enter Text Pilih Status V Halaman Depan Ganti Password Log Out Logo Toko Footer B30 Navigasi : 1. Klik tombol halaman depan akan menuju ke tampilan C01 2. Klik tombol ganti password akan menuju ke tampilan B23 3. Klik tombol data master akan menuju tampilan B03 4. Klik tombol lihat akan menampilkan data laporan penjualan yang dibawah 5. klik tombol cetak akan mencetak hasil laporan yang di cari Data Stok Produk Nama Produk Ukuran Warna Stok HD-1 First Hoodie Small Abu Misty 3 Search Form Pencarian Lihat Cetak Gambar 3.58 Antarmuka Operator B30 Data Master Data Pemesanan Data Laporan Enter Text Pilih Status V Halaman Depan Ganti Password Log Out Logo Toko Footer B31 Navigasi : 1. Klik tombol halaman depan akan menuju ke tampilan C01 2. Klik tombol ganti password akan menuju ke tampilan B23 3. Klik tombol data master akan menuju tampilan B03 4. Klik tombol lihat akan menampilkan data laporan penjualan yang dibawah 5. klik tombol cetak akan mencetak hasil laporan yang di cari Data Laporan Penjualan No Tgl Pesan Tgl Expired No.Invoice Member Total Status 1 09-Juli-2011 11-Juli-2011 INVLD4U-7 Adi Rp. 82,500 Menunggu Pembayaran Search Form Pencarian Lihat Cetak Gambar 3.59 Antarmuka Operator B31

3. Perancangan Antarmuka Pengunjung

Logo Toko Bantuan Registrasi LogIn KERANJANG BELANJA Isi Keranjang 0 Item Banner Beranda Tentang Kami Produk Diskon Galeri Paket Pengiriman Hubungi Kami Kategori 01 Kategori 02 Kategori 03 Kategori 04 Kategori 05 Kategori 06 Produk Terlaris C01 Beranda Tentang Kami Cara Pemesanan Dan Cara Pembayaran Hubungi Kami Copyright 2011 Live Design 4 U Produk 01 Produk 02 Produk 03 Produk 04 Produk 05 Produk 06 ADD TO CHART DETAILS ADD TO CHART DETAILS ADD TO CHART DETAILS ADD TO CHART DETAILS ADD TO CHART DETAILS ADD TO CHART DETAILS Navigasi : 1. klik tombol registrasi untuk menuju C10 2. klik tombol login untuk menuju C11 3. klik tombol beranda untuk menuju C01 4. klik tombol tentang kami untuk menuju C02 5. klik tombol produk diskon untuk menuju C03 6. klik tombol galeri untuk menuju C04 7. klik tombol paket pengiriman untuk menuju C05 8. klik tombol hubungi kami untuk menuju C06 9. klik tombol cara pemesanan dan cara pembayaran untuk menuju C07 10. klik ADD TO CHART untuk menuju C08 11. klik tombol DETAILS untuk menuju C09 12. klik banner untuk menuju galeri Gambar 3.60 Antarmuka Pengunjung C01 Logo Toko Bantuan Registrasi LogIn KERANJANG BELANJA Isi Keranjang 0 Item Beranda Tentang Kami Produk Diskon Galeri Paket Pengiriman Hubungi Kami Kategori 01 Kategori 02 Kategori 03 Kategori 04 Kategori 05 Kategori 06 Produk Terlaris C02 Copyright 2011 Live Design 4 U Tentang Kami Beranda Tentang Kami Cara Pemesanan Dan Cara Pembayaran Hubungi Kami Navigasi : 1. klik tombol registrasi untuk menuju C10 2. klik tombol login untuk menuju C11 3. klik tombol beranda untuk menuju C01 4. klik tombol tentang kami untuk menuju C02 5. klik tombol produk diskon untuk menuju C03 6. klik tombol galeri untuk menuju C04 7. klik tombol paket pengiriman untuk menuju C05 8. klik tombol hubungi kami untuk menuju C06 9. klik tombol cara pemesanan dan cara pembayaran untuk menuju C07 Gambar 3.61 Antarmuka Pengunjung C02 Logo Toko Bantuan Registrasi LogIn KERANJANG BELANJA Isi Keranjang 0 Item Banner Beranda Tentang Kami Produk Diskon Galeri Paket Pengiriman Hubungi Kami Kategori 01 Kategori 02 Kategori 03 Kategori 04 Kategori 05 Kategori 06 Produk Terlaris C03 Copyright 2011 Live Design 4 U Produk Diskon Beranda Tentang Kami Cara Pemesanan Dan Cara Pembayaran Hubungi Kami Produk 01 Produk 02 Produk 03 Produk 04 Produk 05 Produk 06 ADD TO CHART BUY NOW ADD TO CHART BUY NOW ADD TO CHART BUY NOW ADD TO CHART BUY NOW ADD TO CHART BUY NOW ADD TO CHART BUY NOW Navigasi : 1. klik tombol registrasi untuk menuju C10 2. klik tombol login untuk menuju C11 3. klik tombol beranda untuk menuju C01 4. klik tombol tentang kami untuk menuju C02 5. klik tombol produk diskon untuk menuju C03 6. klik tombol galeri untuk menuju C04 7. klik tombol paket pengiriman untuk menuju C05 8. klik tombol hubungi kami untuk menuju C06 9. klik tombol cara pemesanan dan cara pembayaran untuk menuju C07 10. klik ADD TO CHART untuk menuju C08 11. klik tombol DETAILS untuk menuju C09 12. klik banner untuk menuju galeri Gambar 3.62 Antarmuka Pengunjung C03 Logo Toko Bantuan Registrasi LogIn KERANJANG BELANJA Isi Keranjang 0 Item Banner Beranda Tentang Kami Produk Diskon Galeri Paket Pengiriman Hubungi Kami Kategori 01 Kategori 02 Kategori 03 Kategori 04 Kategori 05 Kategori 06 Produk Terlaris C04 Copyright 2011 Live Design 4 U Galeri Beranda Tentang Kami Cara Pemesanan Dan Cara Pembayaran Hubungi Kami Navigasi : 1. klik tombol registrasi untuk menuju C10 2. klik tombol login untuk menuju C11 3. klik tombol beranda untuk menuju C01 4. klik tombol tentang kami untuk menuju C02 5. klik tombol produk diskon untuk menuju C03 6. klik tombol galeri untuk menuju C04 7. klik tombol paket pengiriman untuk menuju C05 8. klik tombol hubungi kami untuk menuju C06 9. klik tombol cara pemesanan dan cara pembayaran untuk menuju C07 Gambar 3.63 Antarmuka Pengunjung C04 Logo Toko Bantuan Registrasi LogIn KERANJANG BELANJA Isi Keranjang 0 Item Banner Beranda Tentang Kami Produk Diskon Galeri Paket Pengiriman Hubungi Kami Kategori 01 Kategori 02 Kategori 03 Kategori 04 Kategori 05 Kategori 06 Produk Terlaris C05 Copyright 2011 Live Design 4 U Paket Pengiriman Provinsi Kota Cek Beranda Tentang Kami Cara Pemesanan Dan Cara Pembayaran Hubungi Kami Navigasi : 1. klik tombol registrasi untuk menuju C10 2. klik tombol login untuk menuju C11 3. klik tombol beranda untuk menuju C01 4. klik tombol tentang kami untuk menuju C02 5. klik tombol produk diskon untuk menuju C03 6. klik tombol galeri untuk menuju C04 7. klik tombol paket pengiriman untuk menuju C05 8. klik tombol hubungi kami untuk menuju C06 9. klik tombol cara pemesanan dan cara pembayaran untuk menuju C07 10. klik cek untuk menuju C15 Gambar 3.64 Antarmuka Pengunjung C05 Logo Toko Bantuan Registrasi LogIn KERANJANG BELANJA Isi Keranjang 0 Item Beranda Tentang Kami Produk Diskon Galeri Paket Pengiriman Hubungi Kami Kategori 01 Kategori 02 Kategori 03 Kategori 04 Kategori 05 Kategori 06 Produk Terlaris C06 Copyright 2011 Live Design 4 U Hubungi Kami Beranda Tentang Kami Cara Pemesanan Dan Cara Pembayaran Hubungi Kami Navigasi : 1. klik tombol registrasi untuk menuju C10 2. klik tombol login untuk menuju C11 3. klik tombol beranda untuk menuju C01 4. klik tombol tentang kami untuk menuju C02 5. klik tombol produk diskon untuk menuju C03 6. klik tombol galeri untuk menuju C04 7. klik tombol paket pengiriman untuk menuju C05 8. klik tombol hubungi kami untuk menuju C06 9. klik tombol cara pemesanan dan cara pembayaran untuk menuju C07 Gambar 3.65 Antarmuka Pengunjung C06