Perancangan Struktur Menu Perancangan Antarmuka

125

3.1.7.1 Perancangan Struktur Menu

Berikut adalah perancangan struktur menu Aplikasi Penjualan Modem dan Elektronik di Toko Sentracom Berbasis Web : a. Struktur Menu Pengunjung Struktur menu pada aplikasi penjualan Modem dan Elektronik Berbasis Web untuk Pengunjung dapat dilihat pada gambar 3.39. Menu Utama Home Barang Hubungi Kami Daftar Barang Terlaris Barang Terbaru Barang Sering Dilihat Masuk Progam Aplikasi Penjualan Online Toko Sentracom Tentang Kami Barang Diskon Kategori Gambar 3.39 Struktur Menu Pengunjung b. Struktur Menu Member Struktur menu pada aplikasi penjualan Modem dan Elektronik Berbasis Web untuk Member dapat dilihat pada gambar 3.40. 126 Masuk Retur Barang Tentang Kami Hubungi Kami Barang Terlaris Barang Terbaru Barang Sering Dilihat Keluar Keranjang belanja Ubah Akun Lihat History Kategori Menu Utama Lupa Kata Kunci Progam Aplikasi Penjualan Online Toko Sentracom Barang Diskon Home Gambar 3.40 Struktur Menu Member c. Struktur Menu Super Admin Struktur menu pada aplikasi penjualan Modem dan Elektronik Berbasis Web untuk Super Admin dapat dilihat pada gambar 3.41 127 Masuk Menu Utama Lupa Kata Sandi Progam Aplikasi Penjualan Online Toko Sentracom Home Kelola Admin Ubah Akun Keluar Gambar 3.41 Struktur Menu Super Admin d. Struktur Menu Admin Struktur menu pada aplikasi penjualan Modem dan Elektronik Berbasis Web untuk Admin dapat dilihat pada gambar 3.42. 128 Kelola Data Laporan Kelola Data Transaksi Home Kelola Data Master Keluar Masuk Menu Utama Lupa Kata Sandi Progam Aplikasi Penjualan Online Toko Sentracom Kelola Rekening Kelola Barang Kelola Kategori Kelola Provinsi Kelola Member Kelola Ongkoskirim Kelola Jasa Pengiriman Kelola warna Laporan Harian Laporan Bulanan Ganti Akun Kota Detailbarang Jenis pengiriman Laporan Tahunan Retur Gambar 3.42 Struktur menu Admin 129

3.1.7.2 Perancangan Antarmuka

1. [F01] Rancangan Antar Muka Form Home Aplikasi Penjualan Modem dan Elektronik di Toko Sentracom Berbasis Web, dapat dilihat pada gambar 3.43 Email Password Masuk Masuk Lupa Password? Kategori Barang Terbaru Kunjungan Terbanyak Layanan Pelanggan Barang Terlaris List item List item List item List item Online Offline Pencarian Cari Keranjang Belanja Cart Informasi Pembayaran Rekening Bank : Paypal : No_acc Nama_acc No_acc Nama_acc No_acc Nama_acc Logo Logo Logo Logo Home Pendaftran Hubungi Kami Tentang Kami Prev 1 Next Header F01 NAVIGASI · Klik Home untuk menampilkan F01 · Klik Daftar untuk menampilkan F02 · Klik Hubungi Kami menampilkan F03 · Klik Tentang Kami untuk menampilkan 04 · Klik Lupa Password untuk menampilkan F05 · Klik Login untuk menampilkan F06 · Klik Detail untuk menampilkan F07 · Klik Detail untuk menampilkan F08 · Klik Masukan Keranjang Belanja untuk menampilkan F09 · Klik Lanjutkan untuk menampilkan F10 · Klik Link Lihat Hitory untuk menampilkan F11 · Klik Lihat Pemesanan menampilkan F12 · Klik Konfirmasi untuk menampilkan F13 Urut Detail Image Detail Image Detail Image Detail Image Detail Image Detail Image TIKI JNE Tracking System Logo Cek Keterangan : Ukuran : Default 1382 x 744 Font : arial,helvetica,sans-serif 12px Background : 808080; color:2f2f2f; Gambar 3.43 Rancangan Antar Muka Form Home 2. [F02] Rancangan Antar Muka Form Daftar Aplikasi Penjualan Modem dan Elektronik di Toko Sentracom Berbasis Web, dapat dilihat pada gambar 3.44 Email Password Masuk Masuk Lupa Password? Kategori Barang Terbaru Kunjungan Terbanyak Layanan Pelanggan Barang Terlaris List item List item List item List item Online Offline Pencarian Cari Keranjang Belanja Cart Informasi Pembayaran Rekening Bank : Paypal : No_acc Nama_acc No_acc Nama_acc No_acc Nama_acc Logo Logo Logo Logo Home Pendaftran Hubungi Kami Tentang Kami Header F01 NAVIGASI TIKI JNE Tracking System Logo Cek Buat Akun Baru Nama Lengkap Alamat Daftar Provinsi Kota Kodepos Telepon Email Code Password Confirm · Klik Home untuk menampilkan F01 · Klik Daftar untuk menampilkan F02 · Klik Hubungi Kami menampilkan F03 · Klik Tentang Kami untuk menampilkan 04 · Klik Lupa Password untuk menampilkan F05 · Klik Login untuk menampilkan F06 · Klik Detail untuk menampilkan F07 · Klik Masukan Keranjang Belanja untuk menampilkan F08 · Klik Lanjutkan untuk menampilkan F09 · Klik Link Lihat Hitory untuk menampilkan F10 · Klik Lihat Pemesanan menampilkan F11 · Klik Konfirmasi untuk menampilkan F12 Keterangan : Ukuran : Default 1382 x 744 Font : arial,helvetica,sans-serif 12px Background : 808080; color:2f2f2f; Gambar 3.44 Rancangan Antar Muka Form Daftar 130 3. [F03] Rancangan Antar Muka Form Hubungi Kami Aplikasi Penjualan Modem dan Elektronik di Toko Sentracom Berbasis Web, dapat dilihat pada gambar 3.45 Pencarian Cari Keranjang Belanja Cart Informasi Pembayaran Rekening Bank : Paypal : No_acc Nama_acc No_acc Nama_acc No_acc Nama_acc Logo Logo Logo Logo Home Pendaftran Hubungi Kami Tentang Kami Header F03 NAVIGASI Hubungi Kami Informasi Kontak Sentracom Pusat Penjualan Online Termurah Ruko Setrasari Mall II A7-8 Bandung 40163 Jawa Barat Indonesia icon Telp : +6222 2005121 Fax : Mail : sentracomgmail.com icon +6222 2005122 kirim Form Komentar : Nama Telepon Email Komentar · Klik Home untuk menampilkan F01 · Klik Daftar untuk menampilkan F02 · Klik Hubungi Kami menampilkan F03 · Klik Tentang Kami untuk menampilkan 04 · Klik Lupa Password untuk menampilkan F05 · Klik Login untuk menampilkan F06 · Klik Detail untuk menampilkan F07 · Klik Masukan Keranjang Belanja untuk menampilkan F08 · Klik Lanjutkan untuk menampilkan F09 · Klik Link Lihat Hitory untuk menampilkan F10 · Klik Lihat Pemesanan menampilkan F11 · Klik Konfirmasi untuk menampilkan F12 Keterangan : Ukuran : Default 1382 x 744 Font : arial,helvetica,sans-serif 12px Background : 808080; color:2f2f2f; Gambar 3.45 Rancangan Antar Muka Form Hubungi Kami 4. [F04] Rancangan Antar MukaForm Tentang KamiAplikasi Penjualan Modem dan Elektronik di Toko Sentracom Berbasis Web, dapat dilihat pada gambar 3.46 Email Password Masuk Masuk Lupa Password? Kategori Barang Terbaru Kunjungan Terbanyak Layanan Pelanggan Barang Terlaris List item List item List item List item Online Offline Pencarian Cari Keranjang Belanja Cart Informasi Pembayaran Rekening Bank : Paypal : No_acc Nama_acc No_acc Nama_acc No_acc Nama_acc Logo Logo Logo Logo Home Pendaftran Hubungi Kami Tentang Kami Header F04 NAVIGASI TIKI JNE Tracking System Logo Cek Tentang Kami PROFIL TOKO Gambar · Klik Home untuk menampilkan F01 · Klik Daftar untuk menampilkan F02 · Klik Hubungi Kami menampilkan F03 · Klik Tentang Kami untuk menampilkan 04 · Klik Lupa Password untuk menampilkan F05 · Klik Login untuk menampilkan F06 · Klik Detail untuk menampilkan F07 · Klik Masukan Keranjang Belanja untuk menampilkan F08 · Klik Lanjutkan untuk menampilkan F09 · Klik Link Lihat Hitory untuk menampilkan F10 · Klik Lihat Pemesanan menampilkan F11 · Klik Konfirmasi untuk menampilkan F12 Keterangan : Ukuran : Default 1382 x 744 Font : arial,helvetica,sans-serif 12px Background : 808080; color:2f2f2f; Gambar 3.46 Rancangan Antar Muka Form Tentang Kami 131 5. [F05] Rancangan Antar MukaForm Lupa PasswordAplikasi Penjualan Modem dan Elektronik di Toko Sentracom Berbasis Web, dapat dilihat pada gambar 3.47 Email Password Masuk Masuk Lupa Password? Kategori Barang Terbaru Kunjungan Terbanyak Layanan Pelanggan Barang Terlaris List item List item List item List item Online Offline Pencarian Cari Keranjang Belanja Cart Informasi Pembayaran Rekening Bank : Paypal : No_acc Nama_acc No_acc Nama_acc No_acc Nama_acc Logo Logo Logo Logo Home Pendaftran Hubungi Kami Tentang Kami Header F05 NAVIGASI TIKI JNE Tracking System Logo Cek Lupa Password · Klik Home untuk menampilkan F01 · Klik Daftar untuk menampilkan F02 · Klik Hubungi Kami menampilkan F03 · Klik Tentang Kami untuk menampilkan 04 · Klik Lupa Password untuk menampilkan F05 · Klik Login untuk menampilkan F06 · Klik Detail untuk menampilkan F07 · Klik Masukan Keranjang Belanja untuk menampilkan F08 · Klik Lanjutkan untuk menampilkan F09 · Klik Link Lihat Hitory untuk menampilkan F10 · Klik Lihat Pemesanan menampilkan F11 · Klik Konfirmasi untuk menampilkan F12 Email Kirim Email Keterangan : Ukuran : Default 1382 x 744 Font : arial,helvetica,sans-serif 12px Background : 808080; color:2f2f2f; Gambar 3.47 Rancangan Antar Muka Form Lupa Password 6. [F06] Rancangan Antar Muka Form Masuk Aplikasi Penjualan Modem dan Elektronik di Toko Sentracom Berbasis Web, dapat dilihat pada gambar 3.48 Kategori Barang Terbaru Kunjungan Terbanyak Layanan Pelanggan Barang Terlaris List item List item List item List item Online Offline Pencarian Cari Keranjang Belanja Cart Informasi Pembayaran Rekening Bank : Paypal : No_acc Nama_acc No_acc Nama_acc No_acc Nama_acc Logo Logo Logo Logo Home Pendaftran Hubungi Kami Tentang Kami Prev 1 Next Header F06 NAVIGASI Urut Detail Image Detail Image Detail Image Detail Image Detail Image Detail Image TIKI JNE Tracking System Logo Cek Nama Member Profil Menu Lihat History Keluar · Klik Home untuk menampilkan F01 · Klik Daftar untuk menampilkan F02 · Klik Hubungi Kami menampilkan F03 · Klik Tentang Kami untuk menampilkan 04 · Klik Lupa Password untuk menampilkan F05 · Klik Login untuk menampilkan F06 · Klik Detail untuk menampilkan F07 · Klik Masukan Keranjang Belanja untuk menampilkan F08 · Klik Lanjutkan untuk menampilkan F09 · Klik Link Lihat Hitory untuk menampilkan F10 · Klik Lihat Pemesanan menampilkan F11 · Klik Konfirmasi untuk menampilkan F12 Keterangan : Ukuran : Default 1382 x 744 Font : arial,helvetica,sans-serif 12px Background : 808080; color:2f2f2f; Gambar 3.48 Rancangan Antar Muka Masuk 132 7. [F07] Rancangan Antar MukaForm Lihat DetailbarangAplikasi Penjualan Modem dan Elektronik di Toko Sentracom Berbasis Web, dapat dilihat pada gambar 3.49 Kategori Barang Terbaru Kunjungan Terbanyak Layanan Pelanggan Barang Terlaris List item List item List item List item Online Offline Pencarian Cari Keranjang Belanja Cart Informasi Pembayaran Rekening Bank : Paypal : No_acc Nama_acc No_acc Nama_acc No_acc Nama_acc Logo Logo Logo Logo Home Pendaftran Hubungi Kami Tentang Kami Header F07 NAVIGASI Nama Barang Image TIKI JNE Tracking System Logo Cek Nama Member Profil Menu Lihat History Keluar · Klik Home untuk menampilkan F01 · Klik Daftar untuk menampilkan F02 · Klik Hubungi Kami menampilkan F03 · Klik Tentang Kami untuk menampilkan 04 · Klik Lupa Password untuk menampilkan F05 · Klik Login untuk menampilkan F06 · Klik Detail untuk menampilkan F07 · Klik Masukan Keranjang Belanja untuk menampilkan F08 · Klik Lanjutkan untuk menampilkan F09 · Klik Link Lihat Hitory untuk menampilkan F10 · Klik Lihat Pemesanan menampilkan F11 · Klik Konfirmasi untuk menampilkan F12 Detail Barang : Kode : Nama Barang : Harga : Berat : Stok Tersedia : Stok Warna : Deskripsi : Pilih Warna Masukan Keranjang Belanja Keterangan : Ukuran : Default 1382 x 744 Font : arial,helvetica,sans-serif 12px Background : 808080; color:2f2f2f; Gambar 3.49 Rancangan Antar Muka Form Detail Barang 8. [F08] Rancangan Antar MukaForm Keranjang BelanjaAplikasi Penjualan Modem dan Elektronik di Toko Sentracom Berbasis Web, dapat dilihat pada gambar 3.50 Kategori Barang Terbaru Kunjungan Terbanyak Layanan Pelanggan Barang Terlaris List item List item List item List item Online Offline Home Pendaftran Hubungi Kami Tentang Kami Header F08 NAVIGASI Keranjang Belanja TIKI JNE Tracking System Logo Cek Nama Member Profil Menu Lihat History Keluar · Klik Home untuk menampilkan F01 · Klik Daftar untuk menampilkan F02 · Klik Hubungi Kami menampilkan F03 · Klik Tentang Kami untuk menampilkan 04 · Klik Lupa Password untuk menampilkan F05 · Klik Login untuk menampilkan F06 · Klik Detail untuk menampilkan F07 · Klik Masukan Keranjang Belanja untuk menampilkan F08 · Klik Lanjutkan untuk menampilkan F09 · Klik Link Lihat Hitory untuk menampilkan F10 · Klik Lihat Pemesanan menampilkan F11 · Klik Konfirmasi untuk menampilkan F12 Pilih Lagi Pilih provinsi Harga Qty Subtotal Berat Nama Barang Hapus Update Lanjutkan Cek Harga Pengiriman Pilih kota Harga Cek Harga Keterangan : Ukuran : Default 1382 x 744 Font : arial,helvetica,sans-serif 12px Background : 808080; color:2f2f2f; Gambar 3.50 Rancangan Antar Muka Form keranjang Belanja 133 9. [F09] Rancangan Antar Muka Form Pengiriman Aplikasi Penjualan Modem dan Elektronik di Toko Sentracom Berbasis Web,dapat dilihat pada gambar 3.51 Kategori Barang Terbaru Kunjungan Terbanyak Layanan Pelanggan Barang Terlaris List item List item List item List item Online Offline Home Pendaftran Hubungi Kami Tentang Kami Header F09 NAVIGASI Invoice TIKI JNE Tracking System Logo Cek Nama Member Profil Menu Lihat History Keluar · Klik Home untuk menampilkan F01 · Klik Daftar untuk menampilkan F02 · Klik Hubungi Kami menampilkan F03 · Klik Tentang Kami untuk menampilkan 04 · Klik Lupa Password untuk menampilkan F05 · Klik Login untuk menampilkan F06 · Klik Detail untuk menampilkan F07 · Klik Masukan Keranjang Belanja untuk menampilkan F08 · Klik Lanjutkan untuk menampilkan F09 · Klik Link Lihat Hitory untuk menampilkan F10 · Klik Lihat Pemesanan menampilkan F11 · Klik Konfirmasi untuk menampilkan F12 Harga Qty Berat Nama Barang Subtotal Informasi Pengiriman Jasa Pengiriman TIKI Jenis Pengiriman Reguler ONS Checkout Sendiri Alamat Lain Nama Lengkap Alamat Provinsi Kota Kodepos Email telepon Keterangan : Ukuran : Default 1382 x 744 Font : arial,helvetica,sans-serif 12px Background : 808080; color:2f2f2f; Gambar 3.51 Rancangan Antar Muka Pengiriman 10. [F10] Rancangan Antar Muka Form Informasi Invoice Aplikasi Penjualan Modem dan Elektronik di Toko Sentracom Berbasis, dapat dilihat pada gambar 3.52 Kategori Barang Terbaru Kunjungan Terbanyak Layanan Pelanggan Barang Terlaris List item List item List item List item Online Offline Home Pendaftran Hubungi Kami Tentang Kami Header F10 NAVIGASI Informasi Pemesanan TIKI JNE Tracking System Logo Cek Nama Member Profil Menu Lihat History Keluar · Klik Home untuk menampilkan F01 · Klik Daftar untuk menampilkan F02 · Klik Hubungi Kami menampilkan F03 · Klik Tentang Kami untuk menampilkan 04 · Klik Lupa Password untuk menampilkan F05 · Klik Login untuk menampilkan F06 · Klik Detail untuk menampilkan F07 · Klik Masukan Keranjang Belanja untuk menampilkan F08 · Klik Lanjutkan untuk menampilkan F09 · Klik Link Lihat Hitory untuk menampilkan F10 · Klik Lihat Pemesanan menampilkan F11 · Klik Konfirmasi untuk menampilkan F12 No invoice Nama Lengkap Alamat Provinsi Kota Kodepos Email telepon Harga Qty Berat Nama Barang Subtotal Keterangan : Ukuran : Default 1382 x 744 Font : arial,helvetica,sans-serif 12px Background : 808080; color:2f2f2f; Gambar 3.52 Rancangan Antar Muka Form Informasi Invoice 134 11. [F11] Rancangan Antar MukaForm HistoryAplikasi Penjualan Modem dan Elektronik di Toko Sentracom Berbasis Web, dapat dilihat pada gambar 3.53 Kategori Barang Terbaru Kunjungan Terbanyak Layanan Pelanggan Barang Terlaris List item List item List item List item Online Offline Home Pendaftran Hubungi Kami Tentang Kami Header F10 NAVIGASI History TIKI JNE Tracking System Logo Cek Nama Member Profil Menu Lihat History Keluar · Klik Home untuk menampilkan F01 · Klik Daftar untuk menampilkan F02 · Klik Hubungi Kami menampilkan F03 · Klik Tentang Kami untuk menampilkan 04 · Klik Lupa Password untuk menampilkan F05 · Klik Login untuk menampilkan F06 · Klik Detail untuk menampilkan F07 · Klik Masukan Keranjang Belanja untuk menampilkan F08 · Klik Lanjutkan untuk menampilkan F09 · Klik Link Lihat Hitory untuk menampilkan F10 · Klik Lihat Pemesanan menampilkan F11 · Klik Konfirmasi untuk menampilkan F12 Total Harga Status No transaksi Tanggal Lihat Detail Keterangan : Ukuran : Default 1382 x 744 Font : arial,helvetica,sans-serif 12px Background : 808080; color:2f2f2f; Gambar 3.53 Rancangan Antar Muka Form History 12. [F12] Rancangan Antar MukaForm PembayaranAplikasi Penjualan Modem dan Elektronik di Toko Sentracom Berbasis Web,dapat dilihat pada gambar 3.54 Kategori Barang Terbaru Kunjungan Terbanyak Layanan Pelanggan Barang Terlaris List item List item List item List item Online Offline Home Pendaftran Hubungi Kami Tentang Kami Header F10 NAVIGASI No Transaksi TIKI JNE Tracking System Logo Cek Nama Member Profil Menu Lihat History Keluar · Klik Home untuk menampilkan F01 · Klik Daftar untuk menampilkan F02 · Klik Hubungi Kami menampilkan F03 · Klik Tentang Kami untuk menampilkan 04 · Klik Lupa Password untuk menampilkan F05 · Klik Login untuk menampilkan F06 · Klik Detail untuk menampilkan F07 · Klik Masukan Keranjang Belanja untuk menampilkan F08 · Klik Lanjutkan untuk menampilkan F09 · Klik Link Lihat Hitory untuk menampilkan F10 · Klik Lihat Pemesanan menampilkan F11 · Klik Konfirmasi untuk menampilkan F12 Nama Lengkap Alamat Provinsi Kota Kodepos Email telepon Total Harga Status No Tanggal Total Batalkan Konfirmasi Paypal BANK Keterangan : Ukuran : Default 1382 x 744 Font : arial,helvetica,sans-serif 12px Background : 808080; color:2f2f2f; Gambar 3.54 Rancangan Antar Muka Form Konfirmasi 135 13. [A01] Rancangan Antar MukaForm Login AdminAplikasi Penjualan Modem dan Elektronik di Toko Sentracom Berbasis Web, dapat dilihat pada gambar 3.55 Header A01 Username Password : : Lupa Password? Login Navigasi : Klik Login Untuk Menuju Form A2 Gambar 3.55 Rancangan Antar Muka Form Masuk Admin 14. [FA02] Rancangan Antar MukaForm Pengolahan DataAplikasi Penjualan Modem dan Elektronik di Toko Sentracom Berbasis Web, dapat dilihat pada gambar 3.56 Header A02 Selamat Datang Navigasi : Klik Kelola Administrator Untuk Menuju Form A03 Klik Kelola Kategori Untuk Menju Form A04 Klik Kelola Barang Untuk Menuju Form A05 Klik Kelola Rekening Untuk Menuju Form A06 Klik Kelola Provinsi Untuk Menuju Form A07 Klik Kelola Hubungi Untuk Menuju Form A08 Klik Kelola Ongkoskirim Untuk Menuju Form A09 Klik Kelola Member Untuk Menuju Form A010 Klik Kelola Jasa Pengiriman Untuk Menuju Form A11 Klik Kelola Warna Untuk Menuju Form A12 Klik Kelola Data Tansaksi Untuk Menuju Form A13 Klik Laporan Penjualan Harian Untuk Menuju Form A14 Klik Laporan Penjualan Bulanan Untuk Menuju Form A15 Klik Laporan Penjualan Tahunan Untuk Menuju Form A16 Klik Logout Untuk Menuju Form Login Kelola Data Master Home · Kelola Administrator · Kelola Kategori · Kelola Barang · Kelola Rekening · Kelola Provinsi · Kelola Hubungi · Kelola Ongkoskirim · Kelola Member · Kelola Jasa Pengiriman · Kelola Warna Kelola Data Laporan · Laporan Penjualan Harian · Laporan Penjualan Bulanan · Laporan Penjualan Tahunan Keluar Kelola Data Transaksi Gambar 3.56 Rancangan Antar Muka Form Pengolahan Data 136

3.1.7.3 Perancangan Pesan