Nama Tabel : Tabel kategori

a. Nama Tabel : Tabel matauang

b. Primary Key : kode c. Jumlah Field : 2 d. Foreign Key :- e. Keterangan : Tabel berisi data kurs Table III.28 Tabel Matauang Nama Field Tipe Data Ukuran Keterangan kode varchar 3 Primary Key kurs double - Nilai kurs Id_admin Int - Foreign key reference ke tabel admin field id_admin 17. File Kategori

a. Nama Tabel : Tabel kategori

b. Primary Key : id_kategori c. Jumlah Field : 2 d. Foreign Key :- e. Keterangan : Tabel berisi data kategori Table III.29 Tabel Kategori Nama Field Tipe Data Ukuran Keterangan Id_kategori int - Primary Key Nama_kategori Varchar 50 Nama kategori Id_admin Int - Foreign key reference ke tabel admin field id_admin III.5.2 Perancangan Arsitektur Setelah melakukan perancangan data pada sistem yang dibangun, maka dilakukanlah perancangan arsitektur. Perancangan arsitektur yang telah dibuat meliputi beberapa perancangan diantaranya perancangan struktur menu, spesifikasi antarmuka, perancangan keluaran dan jaringan semantik. III.5.3 Perancangan Struktur Menu Struktur menu dirancang sesuai dengan level pengguna sistem. Berikut ini adalah struktur menu pada Toko Yella Perdana : 1. Struktur Menu Pengunjung home Registrasi member profil Cara pemesanan, pembayaran dan retur Hubungi kami Semua produk Lupa password merk tracking Gambar III.24 Struktur Menu Pengunjung 2. Struktur menu member keranjang history logout Edit akun home login profil Cara pemesanan dan pembayaran Hubungi kami Semua produk merk Gambar III.25 Struktur Menu Member 3. Struktur Menu operator login Manajemen produk Manajemen kota Manajemen merk Manajemen Orders home logout Manajemen member Manajemen hubungi Manajemen kategori pengiriman Manajemen provinsi Manajemen ongkir Manajemen retur Manajemen jasa pengiriman Gambar III.26 Struktur Menu Operator 4. Struktur Menu Admin login Manajemen admin laporan home logout Gambar III.27 Struktur Menu Admin III.5.3.1 Perancangan Antar Muka Spesifikasi antar muka merupakan suatu bentuk tampilan dari program yang akan dibuat untuk kebutuhan interface dengan user. Spesifikasi antarmuka terdiri dari Perancangan tampilan menu, tampilan form, tampilan pesan, keluaran dan jaringan semantik. III.5.3.2 Perancangan Antarmuka Pengunjung

1. Perancangan Antarmuka Menu Utama Beranda

Berikut dapat dilihat perancangan antar muka menu utama Beranda dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.28 dibawah ini : A01 Klik link home menuju ke A01 Klik link semua produk menuju ke A02 Klik link cara pembelian, pembayaran dan retur menuju ke A04 Klik link profil menuju ke A03 Klik link hubungi kami menuju ke A05 Klik link daftar baru menuju ke A 06 Klik link lupa password menuju ke A 07 Klik link view produk menuju ke A 08 Keterangan : Ukuran Layar : Dinamis Default 1366x 768 Type ukuran Font : Times New Roman 10px Footer 2012 Yella Perdana Gambar Nama barang Ket: - Selengkapnya.. View Produk Harga Rp. Beli Produk Terbaru Selamat Datang Kami memberikan kenyamanan, kemudahan, dan keamanan..... Stok: Gambar Nama barang Ket: - Selengkapnya.. View Produk Harga Rp. Beli Stok: Gambar Nama barang Ket: - Selengkapnya.. View Produk Harga Rp. Beli Stok: Gambar Nama barang Ket: - Selengkapnya.. View Produk Harga Rp. Beli Stok: Keranjang Belanja Banyak Dilihat Nama Barang Terlaku Social Network 0 item produk Gambar Nama Barang Facebook Twitter Gambar Header Logo Beranda Semua produk Cara pembelian, Pembayaran Retur Profil Hubungi Kami Cari Login Username Password Login Jika belum menjadi member silakan Registrasi Member Lupa Password Customer Service Tracking JNE No resi: Cek status Yahoo gambar Merk Teks Merk Teks Merk Kategori Teks Kategori Teks Kategori Gambar III.28 Perancangan Antarmuka Menu Utama Home 2. Perancangan Antarmuka Menu Semua Produk Berikut dapat dilihat perancangan antarmuka menu semua produk dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.29 dibawah ini: Klik link home menuju ke A01 Klik link semua produk menuju ke A02 Klik link cara pembelian, pembayaran dan retur menuju ke A04 Klik link profil menuju ke A03 Klik link hubungi kami menuju ke A05 Klik link daftar baru menuju ke A 06 Klik link lupa password menuju ke A 07 Klik link view produk menuju ke A 08 Keterangan : Ukuran Layar : Dinamis Default 1366x 768 Type ukuran Font : Times New Roman 10px Footer 2012 Yella Perdana Gambar Nama barang Ket: - Selengkapnya.. View Produk Harga Rp. Beli Produk Terbaru Stok: Gambar Nama barang Ket: - Selengkapnya.. View Produk Harga Rp. Beli Stok: Gambar Nama barang Ket: - Selengkapnya.. View Produk Harga Rp. Beli Stok: Gambar Nama barang Ket: - Selengkapnya.. View Produk Harga Rp. Beli Stok: Keranjang Belanja Banyak Dilihat Nama Barang Terlaku Social Network 0 item produk Gambar Nama Barang Facebook Twitter Gambar Header Logo BerandaSemua produk Cara pembelian, Pembayaran Retur Profil Hubungi Kami Cari First| Previous | 1 2 Next | Last Total produk : A02 Login Username Password Login Jika belum menjadi member silakan Registrasi Member Lupa Password Customer Service Tracking JNE No resi: Cek status Yahoo gambar Merk Teks Merk Teks Merk Kategori Teks Kategori Teks Kategori Gambar III.29 Perancangan Antarmuka Menu Semua Produk 3. Perancangan Antarmuka Menu Profil. Berikut dapat dilihat perancangan antarmuka menu profil dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.30 dibawah ini: Klik link home menuju ke A01 Klik link semua produk menuju ke A02 Klik link cara pembelian, pembayaran dan retur menuju ke A04 Klik link profil menuju ke A03 Klik link hubungi kami menuju ke A05 Klik link daftar baru menuju ke A 06 Klik link lupa password menuju ke A 07 Klik link view produk menuju ke A 08 Keterangan : Ukuran Layar : Dinamis Default 1366x 768 Type ukuran Font : Times New Roman 10px A03 Footer 2012 Yella Perdana Profil Toko Keranjang Belanja Banyak Dilihat Nama Barang Terlaku Social Network 0 item produk Gambar Nama Barang Facebook Twitter Gambar Header Logo Beranda Semua produk Cara pembelian, Pembayaran Retur Profil Hubungi Kami Cari Haiii... Selamat datang di Profil Toko Yella Perdana Login Username Password Login Jika belum menjadi member silakan Registrasi Member Lupa Password Customer Service Tracking JNE No resi: Cek status Yahoo gambar Merk Teks Merk Teks Merk Kategori Teks Kategori Teks Kategori Gambar III.30 Perancangan Antarmuka Menu Profil 4. Perancangan Antarmuka Menu Cara Pembelian, Pembayaran dan Retur. Berikut dapat dilihat perancangan antarmuka menu cara pembelian, pembayaran dan retur dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.31 dibawah ini: Klik link home menuju ke A01 Klik link semua produk menuju ke A02 Klik link cara pembelian, pembayaran dan retur menuju ke A04 Klik link profil menuju ke A03 Klik link hubungi kami menuju ke A05 Klik link daftar baru menuju ke A 06 Klik link lupa password menuju ke A 07 Klik link view produk menuju ke A 08 Keterangan : Ukuran Layar : Dinamis Default 1366x 768 Type ukuran Font : Times New Roman 10px A04 Footer 2012 Yella Perdana Cara Pembelian Keranjang Belanja Banyak Dilihat Nama Barang Terlaku Social Network 0 item produk Gambar Nama Barang Facebook Twitter Gambar Header Logo BerandaSemua produk Cara pembelian, Pembayaran Retur Profil Hubungi Kami Cari PROSEDUR PEMESANAN DI TOKO YELLA PERDANA PROSEDUR RETUR DI TOKO YELLA PERDANA PENGEMBALIAN PENUKARAN BARANG Untuk melakukan pemesanan,.... Login Username Password Login Jika belum menjadi member silakan Registrasi Member Lupa Password Customer Service Tracking JNE No resi: Cek status Yahoo gambar Merk Teks Merk Teks Merk Kategori Teks Kategori Teks Kategori Gambar 3.31 Perancangan Antarmuka Menu Cara Pembelian, Pembayaran dan Retur 5. Perancangan Antarmuka Menu Hubungi Kami Berikut dapat dilihat perancangan antarmuka menu about us dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.32 dibawah ini: Klik link home menuju ke A01 Klik link semua produk menuju ke A02 Klik link cara pembelian, pembayaran dan retur menuju ke A04 Klik link profil menuju ke A03 Klik link hubungi kami menuju ke A05 Klik link daftar baru menuju ke A 06 Klik link lupa password menuju ke A 07 Klik link view produk menuju ke A 08 Keterangan : Ukuran Layar : Dinamis Default 1366x 768 Type ukuran Font : Times New Roman 10px A05 Footer 2012 Yella Perdana Hubungi Kami Keranjang Belanja Banyak Dilihat Nama Barang Terlaku Social Network 0 item produk Gambar Nama Barang Facebook Twitter Gambar Header Logo Beranda Semua produk Cara pembelian, Pembayaran Retur Profil Hubungi Kami Cari Untuk menanyakan mengenai pesanan atau mengenai produk Silahkan kirim pesan Subjek : Nama : Email : Pesan : Masukan Pesan Batal Login Username Password Login Jika belum menjadi member silakan Registrasi Member Lupa Password Customer Service Tracking JNE No resi: Cek status Yahoo gambar Merk Teks Merk Teks Merk Kategori Teks Kategori Teks Kategori Gambar III.32 Perancangan Antarmuka Menu Hubungi Kami 6. Perancangan Antarmuka Lupa Password Berikut dapat dilihat perancangan antarmuka lupa password dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.33. Klik link home menuju ke A01 Klik link semua produk menuju ke A02 Klik link cara pembelian, pembayaran dan retur menuju ke A04 Klik link profil menuju ke A03 Klik link hubungi kami menuju ke A05 Klik link daftar baru menuju ke A 06 Klik link lupa password menuju ke A 07 Klik link view produk menuju ke A 08 Keterangan : Ukuran Layar : Dinamis Default 1366x 768 Type ukuran Font : Times New Roman 10px A07 Footer 2012 Yella Perdana Lupa Password Keranjang Belanja Banyak Dilihat Nama Barang Terlaku Social Network 0 item produk Gambar Nama Barang Facebook Twitter Gambar Header Logo Beranda Semua produk Cara pembelian, Pembayaran Retur Profil Hubungi Kami Cari Masukan Username Anda : Masukan Email Anda : Proses Login Username Password Login Jika belum menjadi member silakan Registrasi Member Lupa Password Customer Service Tracking JNE No resi: Cek status Yahoo gambar Merk Teks Merk Teks Merk Kategori Teks Kategori Teks Kategori Gambar III.33 Perancangan Antarmuka Lupa Password 7. Perancangan Antarmuka Detail Produk Berikut dapat dilihat perancangan antarmuka detail produk dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.34. Klik link home menuju ke A01 Klik link semua produk menuju ke A02 Klik link cara pembelian, pembayaran dan retur menuju ke A04 Klik link profil menuju ke A03 Klik link hubungi kami menuju ke A05 Klik link daftar baru menuju ke A 06 Klik link lupa password menuju ke A 07 Klik link view produk menuju ke A 08 Keterangan : Ukuran Layar : Dinamis Default 1366x 768 Type ukuran Font : Times New Roman 10px A08 Footer 2012 Yella Perdana Detail Produk Keranjang Belanja Banyak Dilihat Nama Barang Terlaku Social Network 0 item produk Gambar Nama Barang Facebook Twitter Gambar Header Logo Beranda Semua produk Cara pembelian, Pembayaran Retur Profil Hubungi Kami Cari Gambar View Full Size Image Nama Produk : Harga : Rp.0000 Deskripsi : Stok : Beli Login Username Password Login Jika belum menjadi member silakan Registrasi Member Lupa Password Customer Service Tracking JNE No resi: Cek status Yahoo gambar Merk Teks Merk Teks Merk Kategori Teks Kategori Teks Kategori Gambar III.34 Perancangan Antarmuka Detail Produk 8. Perancangan Antarmuka Keranjang Berikut dapat dilihat perancangan antarmuka keranjang dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.35. Klik link home menuju ke A01 Klik link semua produk menuju ke A02 Klik link cara pembelian, pembayaran dan retur menuju ke A04 Klik link profil menuju ke A03 Klik link hubungi kami menuju ke A05 Klik link daftar baru menuju ke A 06 Klik link lupa password menuju ke A 07 Klik link view produk menuju ke A 08 Keterangan : Ukuran Layar : Dinamis Default 1366x 768 Type ukuran Font : Times New Roman 10px A09 Klik link Keranjang belanja menuju ke A 09 Footer 2012 Yella Perdana Keranjang Belanja Keranjang Belanja Banyak Dilihat Nama Barang Terlaku Social Network 1 barang Gambar Nama Barang Facebook Twitter Gambar Header Logo BerandaSemua produk Cara pembelian, Pembayaran Retur Profil Hubungi Kami Cari No Nama Produk Jumlah Berat Sub Total Harga Satuan Hapus Belanja Check Out Hapus Login Username Password Login Jika belum menjadi member silakan Registrasi Member Lupa Password Customer Service Tracking JNE No resi: Cek status Yahoo gambar Merk Teks Merk Teks Merk Kategori Teks Kategori Teks Kategori Gambar III.35 Perancangan Antarmuka Keranjang III.5.3.3 Perancangan Antarmuka Member 1. Perancangan Antarmuka Pendaftaran Member Baru Berikut dapat dilihat perancangan antar pendaftaran member baru dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.36 dibawah ini : Klik link home menuju ke A01 Klik link semua produk menuju ke A02 Klik link cara pembelian, pembayaran dan retur menuju ke A04 Klik link profil menuju ke A03 Klik link hubungi kami menuju ke A05 Klik link daftar baru menuju ke A 06 Klik link lupa password menuju ke A 07 Klik link view produk menuju ke A 08 Keterangan : Ukuran Layar : Dinamis Default 1366x 768 Type ukuran Font : Times New Roman 10px A06 Footer 2012 Yella Perdana Pendaftaran Member Baru Keranjang Belanja Banyak Dilihat Nama Barang Terlaku Social Network 0 item produk Gambar Nama Barang Facebook Twitter Gambar Header Logo Beranda Semua produk Cara pembelian, Pembayaran Retur Profil Hubungi Kami Cari Username : Email : Password : Ulangi Password : Nama : Alamat : Telepon : Provinsi : Kota : Kode Pos : Daftar Batal Login Username Password Login Jika belum menjadi member silakan Registrasi Member Lupa Password Customer Service Tracking JNE No resi: Cek status Yahoo gambar Merk Teks Merk Teks Merk Kategori Teks Kategori Teks Kategori Gambar III.36 Perancangan Antarmuka Pendaftaran Member Baru 2. Perancangan Antarmuka Home sebelum Login Berikut dapat dilihat perancangan antarmuka home sebelum masuk login dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.37. Klik link home menuju ke A01 Klik link semua produk menuju ke A02 Klik link cara pembelian, pembayaran dan retur menuju ke A04 Klik link profil menuju ke A03 Klik link hubungi kami menuju ke A05 Klik link daftar baru menuju ke A 06 Klik link lupa password menuju ke A 07 Klik link view produk menuju ke A 08 Keterangan : Ukuran Layar : Dinamis Default 1366x 768 Type ukuran Font : Times New Roman 10px Footer 2012 Yella Perdana Gambar Nama barang Ket: - Selengkapnya.. View Produk Harga Rp. Beli Produk Terbaru Stok: Gambar Nama barang Ket: - Selengkapnya.. View Produk Harga Rp. Beli Stok: Gambar Nama barang Ket: - Selengkapnya.. View Produk Harga Rp. Beli Stok: Gambar Nama barang Ket: - Selengkapnya.. View Produk Harga Rp. Beli Stok: Keranjang Belanja Banyak Dilihat Nama Barang Terlaku Social Network 0 item produk Gambar Nama Barang Facebook Twitter Gambar Header Logo BerandaSemua produk Cara pembelian, Pembayaran Retur Profil Hubungi Kami Cari First| Previous | 1 2 Next | Last Total produk : A02 Login Username Password Login Jika belum menjadi member silakan Registrasi Member Lupa Password Customer Service Tracking JNE No resi: Cek status Yahoo gambar Merk Teks Merk Teks Merk Kategori Teks Kategori Teks Kategori Gambar III.37 Perancangan Antarmuka Home sebelum Login 3. Perancangan Antarmuka Home sesudah Login Berikut dapat dilihat perancangan antarmuka home sesudah login dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.38. Klik link home menuju ke A15 Klik link semua produk menuju ke A16 Klik link cara pembelian, pembayaran dan retur menuju ke A18 Klik link profil menuju ke A17 Klik link hubungi kami menuju ke A05 Klik link view produk menuju ke A19 Keterangan : Ukuran Layar : Dinamis Default 1366x 768 Type ukuran Font : Times New Roman 10px A15 Footer 2012 Yella Perdana Gambar Nama barang Ket: - Selengkapnya.. View Produk Harga Rp. Beli Produk Terbaru Stok: Gambar Nama barang Ket: - Selengkapnya.. View Produk Harga Rp. Beli Stok: Gambar Nama barang Ket: - Selengkapnya.. View Produk Harga Rp. Beli Stok: Gambar Nama barang Ket: - Selengkapnya.. View Produk Harga Rp. Beli Stok: Keranjang Belanja Banyak Dilihat Nama Barang Terlaku Social Network 0 item produk Gambar Nama Barang Facebook Twitter Gambar Header Logo BerandaSemua produk Cara pembelian, Pembayaran Retur Profil Hubungi Kami Cari First| Previous | 1 2 Next | Last Total produk : Klik link beli menuju ke A20 Login Kategori Customer Service gambar Tracking JNE No resi: Teks Kategori Teks Kategori Cek status Yahoo Home Edit Account Ganti Password My Account My Order Keranjang Belanja Lihat History Pemesanan Log Out Merk Teks Merk Teks Merk Gambar III.38 Perancangan Antarmuka Home sesudah Login 4. Perancangan Antarmuka Menu Semua Produk Berikut dapat dilihat perancangan antarmuka memu semua produk dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.39. Klik link home menuju ke A15 Klik link semua produk menuju ke A16 Klik link cara pembelian, pembayaran dan retur menuju ke A18 Klik link profil menuju ke A17 Klik link hubungi kami menuju ke A05 Klik link view produk menuju ke A19 Keterangan : Ukuran Layar : Dinamis Default 1366x 768 Type ukuran Font : Times New Roman 10px A16 Klik link beli menuju ke A20 Footer 2012 Yella Perdana Gambar Nama barang Ket: - Selengkapnya.. View Produk Harga Rp. Beli Semua Produk Stok: Gambar Nama barang Ket: - Selengkapnya.. View Produk Harga Rp. Beli Stok: Gambar Nama barang Ket: - Selengkapnya.. View Produk Harga Rp. Beli Stok: Gambar Nama barang Ket: - Selengkapnya.. View Produk Harga Rp. Beli Stok: Keranjang Belanja Banyak Dilihat Nama Barang Terlaku Social Network 0 item produk Gambar Nama Barang Facebook Twitter Gambar Header Logo Beranda Semua produk Cara pembelian, Pembayaran Retur Profil Hubungi Kami Cari First| Previous | 1 2 Next | Last Total produk : Login Kategori Customer Service gambar Tracking JNE No resi: Teks Kategori Teks Kategori Cek status Yahoo Home Edit Account Ganti Password My Account My Order Keranjang Belanja Lihat History Pemesanan Log Out Merk Teks Merk Teks Merk Gambar III.39 Perancangan Antarmuka Menu Semua Produk 5. Perancangan Antarmuka Menu Cara Pembelian, Pembayaran dan Retur Berikut dapat dilihat perancangan antarmuka menu profil dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.40. Klik link home menuju ke A15 Klik link semua produk menuju ke A16 Klik link cara pembelian, pembayaran dan retur menuju ke A18 Klik link profil menuju ke A17 Klik link hubungi kami menuju ke A05 Klik link view produk menuju ke A19 Keterangan : Ukuran Layar : Dinamis Default 1366x 768 Type ukuran Font : Times New Roman 10px A18 Klik link beli menuju ke A20 Footer 2012 Yella Perdana Keranjang Belanja Banyak Dilihat Nama Barang Terlaku Social Network 0 item produk Gambar Nama Barang Facebook Twitter Gambar Header Logo Beranda Semua produk Cara pembelian, Pembayaran Retur Profil Hubungi Kami Cari Cara Pembelian PROSEDUR PEMESANAN DI TOKO YELLA PERDANA PROSEDUR RETUR DI TOKO YELLA PERDANA PENGEMBALIAN PENUKARAN BARANG Untuk melakukan pemesanan,.... Login Kategori Customer Service gambar Tracking JNE No resi: Teks Kategori Teks Kategori Cek status Yahoo Home Edit Account Ganti Password My Account My Order Keranjang Belanja Lihat History Pemesanan Log Out Merk Teks Merk Teks Merk Gambar III.40 Perancangan Antarmuka Menu Cara Pembelian, Pembayaran dan retur 6. Perancanngan Antarmuka Profil Berikut dapat dilihat perancangan antarmuka profil dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.41. Klik link home menuju ke A15 Klik link semua produk menuju ke A16 Klik link cara pembelian, pembayaran dan retur menuju ke A18 Klik link profil menuju ke A17 Klik link hubungi kami menuju ke A05 Klik link view produk menuju ke A19 Keterangan : Ukuran Layar : Dinamis Default 1366x 768 Type ukuran Font : Times New Roman 10px A17 Klik link beli menuju ke A20 Footer 2012 Yella Perdana Keranjang Belanja Banyak Dilihat Nama Barang Terlaku Social Network 0 item produk Gambar Nama Barang Facebook Twitter Gambar Header Logo Beranda Semua produk Cara pembelian, Pembayaran Retur Profil Hubungi Kami Cari Profil Toko Hai.... Selamat Datang... Login Kategori Customer Service gambar Tracking JNE No resi: Teks Kategori Teks Kategori Cek status Yahoo Home Edit Account Ganti Password My Account My Order Keranjang Belanja Lihat History Pemesanan Log Out Merk Teks Merk Teks Merk Gambar III.41 Perancangan Antarmuka Profil 7. Perancangan Antarmuka Keranjang Berikut dapat dilihat perancangan antarmuka keranjang dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.42. Keterangan : Ukuran Layar : Dinamis Default 1366x 768 Type ukuran Font : Times New Roman 10px A20 Footer 2012 Yella Perdana Keranjang Belanja Keranjang Belanja Banyak Dilihat Nama Barang Terlaku Social Network 1 barang Gambar Nama Barang Facebook Twitter Gambar Header Logo Beranda Semua produk Cara pembelian, Pembayaran Retur Profil Hubungi Kami Cari No Nama Produk Jumlah Berat Sub Total Harga Satuan Hapus Belanja Check Out Hapus Klik link home menuju ke A15 Klik link semua produk menuju ke A16 Klik link cara pembelian, pembayaran dan retur menuju ke A18 Klik link profil menuju ke A17 Klik link view produk menuju ke A19 Klik link Keranjang belanja menuju ke A20 Klik link History pemesanan menuju ke A21 Login Kategori Customer Service gambar Tracking JNE No resi: Teks Kategori Teks Kategori Cek status Yahoo Home Edit Account Ganti Password My Account My Order Keranjang Belanja Lihat History Pemesanan Log Out Merk Teks Merk Teks Merk Gambar III.42 Perancangan Antarmuka Keranjang 8. Perancangan History Pemesanan Berikut dapat dilihat perancangan antarmuka history pemesanan dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.43. Keterangan : Ukuran Layar : Dinamis Default 1366x 768 Type ukuran Font : Times New Roman 10px A21 Klik link home menuju ke A15 Klik link semua produk menuju ke A16 Klik link cara pembelian, pembayaran dan retur menuju ke A18 Klik link profil menuju ke A17 Klik link view produk menuju ke A19 Klik link Keranjang belanja menuju ke A20 Klik link History pemesanan menuju ke A21 Footer 2012 Yella Perdana Keranjang Belanja Keranjang Belanja Banyak Dilihat Nama Barang Terlaku Social Network 0 item produk Gambar Nama Barang Facebook Twitter Gambar Header Logo Beranda Semua produk Cara pembelian, Pembayaran Retur Profil Hubungi Kami Cari Detail Order No Nama Produk Jumlah Berat Sub Total Harga Satuan Kembali Login Kategori Customer Service gambar Tracking JNE No resi: Teks Kategori Teks Kategori Cek status Yahoo Home Edit Account Ganti Password My Account My Order Keranjang Belanja Lihat History Pemesanan Log Out Merk Teks Merk Teks Merk Gambar III.43 Perancangan Antarmuka History Pemesanan Detail III.5.3.4 Perancangan Antarmuka Operator 1. Perancangan Antarmuka Login Berikut dapat dilihat perancangan antarmuka login operator dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.44. Username Password Login Lupa password Header Footer Silahkan Login Terlebih Dahulu Klik link login menuju B02 Klik Lupa password menuju C09 Keterangan : Ukuran Layar : Dinamis Default 1366x768 Type ukuran Font : Times New Roman 10px B01 Gambar Gambar III.44 Perancangan Antarmuka Login 2. Perancangan Lupa Password Berikut dapat dilihat perancangan antarmuka lupa password dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.45. Proses Header Footer Masukan Username Anda Klik proses akan mengirimkan password ke email Keterangan : Ukuran Layar : Dinamis Default 1366x768 Type ukuran Font : Times New Roman 10px C09 Masukan Email Anda Gambar III.45 Perancangan Antarmuka Lupa Password 3. Perancangan Antarmuka Home Operator Berikut dapat dilihat perancangan antarmuka home operator dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.46. Footer operator, selamat datang Apa yang akan anda lakukan hari ini? Klik home menuju B02 Klik detail menuju B03 Klik ubah status menuju B04 Klik Logout menuju B01 Klik Manajemen Produk menuju B05 Klik manajemen merk menuju B08 Klik warna menuju B11 Klik manahemen bank menuju B14 Klik kurs menuju B17 Klik manajemen jasa pengiriman menuju B18 Klik manajemen KP menuju B21 Klik manajemen member menuju B24 Klik manajemen kota menuju B27 Klik manajemen provinsi menuju B30 Klik manajemenongkir menuju B33 Klik manajemen hubungi menuju B36 Klik bakcup menuju B37 Klik restore menuju B38 Klik transaksi semua pesanan menuju B39 Klik dibayar menuju B40 Klik dikirm menuju B41 Klik diterima menuju B42 Klik manajemen retur menuju B43 Klik detail retur menuju B44 Klik ubah status menuju B45 Keterangan : Ukuran Layar : Dinamis Default 1366x768 Type ukuran Font : Times New Roman 10px B02 Header Anda login Sebagai Operator Home Pengolahan Data Master Transaksi Logout 10 Orde Terkahir Id Order Nama Member Status Order Tanggal Order Aksi Detail Daftar ID Order Daftar Nama Member Daftar Status Order Daftar Tanggal Order Ubah Status Gambar III.46 Perancangan Antarmuka Home Operator 4. Perancangan Antarmuka Home Aksi-Detail Berikut dapat dilihat perancangan antarmuka home aksi-detail dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.47. Footer Klik home menuju B02 Klik detail menuju B03 Klik ubah status menuju B04 Klik Logout menuju B01 Klik Manajemen Produk menuju B05 Klik manajemen merk menuju B08 Klik warna menuju B11 Klik manahemen bank menuju B14 Klik kurs menuju B17 Klik manajemen jasa pengiriman menuju B18 Klik manajemen KP menuju B21 Klik manajemen member menuju B24 Klik manajemen kota menuju B27 Klik manajemen provinsi menuju B30 Klik manajemenongkir menuju B33 Klik manajemen hubungi menuju B36 Klik bakcup menuju B37 Klik restore menuju B38 Klik transaksi semua pesanan menuju B39 Klik dibayar menuju B40 Klik dikirm menuju B41 Klik diterima menuju B42 Klik manajemen retur menuju B43 Klik detail retur menuju B44 Klik ubah status menuju B45 Keterangan : Ukuran Layar : Dinamis Default 1366x768 Type ukuran Font : Times New Roman 10px B03 Header Anda login Sebagai Operator Home Pengolahan Data Master Transaksi Logout Detail Order No Nama Produk Jumlah Berat Harga Satuan Sub Total Gambar III.47 Perancangan Antarmuka Home Aksi-Detail 5. Perancangan Antarmuka Aksi Ubah-Status Berikut dapat dilihat perancangan antarmuka aksi ubah-status dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.48. Footer Klik home menuju B02 Klik detail menuju B03 Klik ubah status menuju B04 Klik Logout menuju B01 Klik Manajemen Produk menuju B05 Klik manajemen merk menuju B08 Klik warna menuju B11 Klik manahemen bank menuju B14 Klik kurs menuju B17 Klik manajemen jasa pengiriman menuju B18 Klik manajemen KP menuju B21 Klik manajemen member menuju B24 Klik manajemen kota menuju B27 Klik manajemen provinsi menuju B30 Klik manajemenongkir menuju B33 Klik manajemen hubungi menuju B36 Klik bakcup menuju B37 Klik restore menuju B38 Klik transaksi semua pesanan menuju B39 Klik dibayar menuju B40 Klik dikirm menuju B41 Klik diterima menuju B42 Klik manajemen retur menuju B43 Klik detail retur menuju B44 Klik ubah status menuju B45 Keterangan : Ukuran Layar : Dinamis Default 1366x768 Type ukuran Font : Times New Roman 10px B04 Header Anda login Sebagai Operator Home Pengolahan Data Master Transaksi Logout Manajemen Pesanan Id Order Nama Member Status Order Tanggal Order Simpan Kembali Gambar III.48 Perancangan Antarmuka Transaksi 6. Perancangan Antarmuka Menu Managemen Produk Berikut dapat dilihat perancangan antarmuka Managemen Produk operator dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.49. Footer Klik home menuju B02 Klik detail menuju B03 Klik ubah status menuju B04 Klik Logout menuju B01 Klik Manajemen Produk menuju B05 Klik manajemen merk menuju B08 Klik warna menuju B11 Klik manahemen bank menuju B14 Klik kurs menuju B17 Klik manajemen jasa pengiriman menuju B18 Klik manajemen KP menuju B21 Klik manajemen member menuju B24 Klik manajemen kota menuju B27 Klik manajemen provinsi menuju B30 Klik manajemenongkir menuju B33 Klik manajemen hubungi menuju B36 Klik bakcup menuju B37 Klik restore menuju B38 Klik transaksi semua pesanan menuju B39 Klik dibayar menuju B40 Klik dikirm menuju B41 Klik diterima menuju B42 Klik manajemen retur menuju B43 Klik detail retur menuju B44 Klik ubah status menuju B45 Keterangan : Ukuran Layar : Dinamis Default 1366x768 Type ukuran Font : Times New Roman 10px B05 Header Anda login Sebagai Operator Home Pengolahan Data Master Transaksi Logout List Barang Cari Barang : Cari Tambah Kembali No Gambar Nama Harga Stok Tanggal Last Update Aksi Gambar III.49 Perancangan Antarmuka Managemen Produk 7. Perancangan Antarmuka Tambah Produk Berikut dapat dilihat perancangan antarmuka tambah produk dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.50. Footer Klik home menuju B02 Klik detail menuju B03 Klik ubah status menuju B04 Klik Logout menuju B01 Klik Manajemen Produk menuju B05 Klik manajemen merk menuju B08 Klik warna menuju B11 Klik manahemen bank menuju B14 Klik kurs menuju B17 Klik manajemen jasa pengiriman menuju B18 Klik manajemen KP menuju B21 Klik manajemen member menuju B24 Klik manajemen kota menuju B27 Klik manajemen provinsi menuju B30 Klik manajemenongkir menuju B33 Klik manajemen hubungi menuju B36 Klik bakcup menuju B37 Klik restore menuju B38 Klik transaksi semua pesanan menuju B39 Klik dibayar menuju B40 Klik dikirm menuju B41 Klik diterima menuju B42 Klik manajemen retur menuju B43 Klik detail retur menuju B44 Klik ubah status menuju B45 Keterangan : Ukuran Layar : Dinamis Default 1366x768 Type ukuran Font : Times New Roman 10px B06 Header Anda login Sebagai Operator Home Pengolahan Data Master Transaksi Logout Form Tambah Barang Simpan Batal Gambar : Nama Produk : Harga : Kategori : Merk : Deskripsi : Berat : Kg Stok : Proses Gambar III.50 Perancangan Antarmuka Tambah Produk 8. Perancangan Antarmuka Edit Produk Berikut dapat dilihat perancangan antarmuka edit produk dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.51. Footer Klik home menuju B02 Klik detail menuju B03 Klik ubah status menuju B04 Klik Logout menuju B01 Klik Manajemen Produk menuju B05 Klik manajemen merk menuju B08 Klik warna menuju B11 Klik manahemen bank menuju B14 Klik kurs menuju B17 Klik manajemen jasa pengiriman menuju B18 Klik manajemen KP menuju B21 Klik manajemen member menuju B24 Klik manajemen kota menuju B27 Klik manajemen provinsi menuju B30 Klik manajemenongkir menuju B33 Klik manajemen hubungi menuju B36 Klik bakcup menuju B37 Klik restore menuju B38 Klik transaksi semua pesanan menuju B39 Klik dibayar menuju B40 Klik dikirm menuju B41 Klik diterima menuju B42 Klik manajemen retur menuju B43 Klik detail retur menuju B44 Klik ubah status menuju B45 Keterangan : Ukuran Layar : Dinamis Default 1366x768 Type ukuran Font : Times New Roman 10px B06 Header Anda login Sebagai Operator Home Pengolahan Data Master Transaksi Logout Form Edit Barang Simpan Batal Gambar : Nama Produk : Harga : Kategori : Merk : Deskripsi : Berat : Kg Stok : Proses Gambar III.51 Perancangan Antarmuka Edit Produk 9. Perancangan Antarmuka Menu Managemen Merk Berikut dapat dilihat perancangan antarmuka Managemen Merk dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.52. Footer Klik home menuju B02 Klik detail menuju B03 Klik ubah status menuju B04 Klik Logout menuju B01 Klik Manajemen Produk menuju B05 Klik manajemen merk menuju B08 Klik warna menuju B11 Klik manahemen bank menuju B14 Klik kurs menuju B17 Klik manajemen jasa pengiriman menuju B18 Klik manajemen KP menuju B21 Klik manajemen member menuju B24 Klik manajemen kota menuju B27 Klik manajemen provinsi menuju B30 Klik manajemenongkir menuju B33 Klik manajemen hubungi menuju B36 Klik bakcup menuju B37 Klik restore menuju B38 Klik transaksi semua pesanan menuju B39 Klik dibayar menuju B40 Klik dikirm menuju B41 Klik diterima menuju B42 Klik manajemen retur menuju B43 Klik detail retur menuju B44 Klik ubah status menuju B45 Keterangan : Ukuran Layar : Dinamis Default 1366x768 Type ukuran Font : Times New Roman 10px B08 Header Anda login Sebagai Operator Home Pengolahan Data Master Transaksi Logout List Merk Cari Merk Cari Tambah Kembali No Merk Aksi Total Merk : Buah Gambar III.52 Perancangan Antarmuka Managemen Merk 10. Perancangan Antarmuka Tambah Merk Berikut dapat dilihat perancangan antarmuka tambah merkdari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.53. Footer Klik home menuju B02 Klik detail menuju B03 Klik ubah status menuju B04 Klik Logout menuju B01 Klik Manajemen Produk menuju B05 Klik manajemen merk menuju B08 Klik warna menuju B11 Klik manahemen bank menuju B14 Klik kurs menuju B17 Klik manajemen jasa pengiriman menuju B18 Klik manajemen KP menuju B21 Klik manajemen member menuju B24 Klik manajemen kota menuju B27 Klik manajemen provinsi menuju B30 Klik manajemenongkir menuju B33 Klik manajemen hubungi menuju B36 Klik bakcup menuju B37 Klik restore menuju B38 Klik transaksi semua pesanan menuju B39 Klik dibayar menuju B40 Klik dikirm menuju B41 Klik diterima menuju B42 Klik manajemen retur menuju B43 Klik detail retur menuju B44 Klik ubah status menuju B45 Keterangan : Ukuran Layar : Dinamis Default 1366x768 Type ukuran Font : Times New Roman 10px B06 Header Anda login Sebagai Operator Home Pengolahan Data Master Transaksi Logout Form Tambah Merk Simpan Batal Nama Merk : Gambar III.53 Perancangan Antarmuka Tambah Merk 11. Perancangan Antarmuka Edit Merk Berikut dapat dilihat perancangan antarmuka edit merk dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.54. Footer Klik home menuju B02 Klik detail menuju B03 Klik ubah status menuju B04 Klik Logout menuju B01 Klik Manajemen Produk menuju B05 Klik manajemen merk menuju B08 Klik warna menuju B11 Klik manahemen bank menuju B14 Klik kurs menuju B17 Klik manajemen jasa pengiriman menuju B18 Klik manajemen KP menuju B21 Klik manajemen member menuju B24 Klik manajemen kota menuju B27 Klik manajemen provinsi menuju B30 Klik manajemenongkir menuju B33 Klik manajemen hubungi menuju B36 Klik bakcup menuju B37 Klik restore menuju B38 Klik transaksi semua pesanan menuju B39 Klik dibayar menuju B40 Klik dikirm menuju B41 Klik diterima menuju B42 Klik manajemen retur menuju B43 Klik detail retur menuju B44 Klik ubah status menuju B45 Keterangan : Ukuran Layar : Dinamis Default 1366x768 Type ukuran Font : Times New Roman 10px B10 Header Anda login Sebagai Operator Home Pengolahan Data Master Transaksi Logout Form Edit Merk Simpan Batal Nama Merk : Gambar III.54 Perancangan Antarmuka Edit Merk 12. Perancangan Antarmuka Manajemen Kategori Berikut dapat dilihat perancangan antarmuka manajemen kategori dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.55. Footer Klik home menuju B02 Klik detail menuju B03 Klik ubah status menuju B04 Klik Logout menuju B01 Klik Manajemen Produk menuju B05 Klik manajemen merk menuju B08 Klik warna menuju B11 Klik manahemen bank menuju B14 Klik kurs menuju B17 Klik manajemen jasa pengiriman menuju B18 Klik manajemen KP menuju B21 Klik manajemen member menuju B24 Klik manajemen kota menuju B27 Klik manajemen provinsi menuju B30 Klik manajemenongkir menuju B33 Klik manajemen hubungi menuju B36 Klik bakcup menuju B37 Klik restore menuju B38 Klik transaksi semua pesanan menuju B39 Klik dibayar menuju B40 Klik dikirm menuju B41 Klik diterima menuju B42 Klik manajemen retur menuju B43 Klik detail retur menuju B44 Klik ubah status menuju B45 Keterangan : Ukuran Layar : Dinamis Default 1366x768 Type ukuran Font : Times New Roman 10px B46 Header Anda login Sebagai Operator Home Pengolahan Data Master Transaksi Logout List Kategori Cari Merk Cari Tambah Kembali Total Kategori : Buah No Kategori Aksi Gambar III.55 Perancangan Antarmuka Managemen Kategori 13. Perancangan Antarmuka Tambah Kategori Berikut dapat dilihat perancangan antarmuka tambah kategori dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.56. Footer Klik home menuju B02 Klik detail menuju B03 Klik ubah status menuju B04 Klik Logout menuju B01 Klik Manajemen Produk menuju B05 Klik manajemen merk menuju B08 Klik warna menuju B11 Klik manahemen bank menuju B14 Klik kurs menuju B17 Klik manajemen jasa pengiriman menuju B18 Klik manajemen KP menuju B21 Klik manajemen member menuju B24 Klik manajemen kota menuju B27 Klik manajemen provinsi menuju B30 Klik manajemenongkir menuju B33 Klik manajemen hubungi menuju B36 Klik bakcup menuju B37 Klik restore menuju B38 Klik transaksi semua pesanan menuju B39 Klik dibayar menuju B40 Klik dikirm menuju B41 Klik diterima menuju B42 Klik manajemen retur menuju B43 Klik detail retur menuju B44 Klik ubah status menuju B45 Keterangan : Ukuran Layar : Dinamis Default 1366x768 Type ukuran Font : Times New Roman 10px B47 Header Anda login Sebagai Operator Home Pengolahan Data Master Transaksi Logout Form Tambah Kategori Simpan Batal Nama Kategori : Gambar III.56 Perancangan Antarmuka Tambah Kategori 14. Perancangan Antarmuka Edit Kategori Berikut dapat dilihat perancangan antarmuka edit kategori dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.57. Footer Klik home menuju B02 Klik detail menuju B03 Klik ubah status menuju B04 Klik Logout menuju B01 Klik Manajemen Produk menuju B05 Klik manajemen merk menuju B08 Klik warna menuju B11 Klik manahemen bank menuju B14 Klik kurs menuju B17 Klik manajemen jasa pengiriman menuju B18 Klik manajemen KP menuju B21 Klik manajemen member menuju B24 Klik manajemen kota menuju B27 Klik manajemen provinsi menuju B30 Klik manajemenongkir menuju B33 Klik manajemen hubungi menuju B36 Klik bakcup menuju B37 Klik restore menuju B38 Klik transaksi semua pesanan menuju B39 Klik dibayar menuju B40 Klik dikirm menuju B41 Klik diterima menuju B42 Klik manajemen retur menuju B43 Klik detail retur menuju B44 Klik ubah status menuju B45 Keterangan : Ukuran Layar : Dinamis Default 1366x768 Type ukuran Font : Times New Roman 10px B48 Header Anda login Sebagai Operator Home Pengolahan Data Master Transaksi Logout Form Edit Kategoi Simpan Batal Nama Kategori : Gambar III.57 Perancangan Antarmuka Edit Kategori 15. Perancangan Antarmuka Manajemen Bank Berikut dapat dilihat perancangan antarmuka manajemen bank dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.58. Footer Klik home menuju B02 Klik detail menuju B03 Klik ubah status menuju B04 Klik Logout menuju B01 Klik Manajemen Produk menuju B05 Klik manajemen merk menuju B08 Klik warna menuju B11 Klik manahemen bank menuju B14 Klik kurs menuju B17 Klik manajemen jasa pengiriman menuju B18 Klik manajemen KP menuju B21 Klik manajemen member menuju B24 Klik manajemen kota menuju B27 Klik manajemen provinsi menuju B30 Klik manajemenongkir menuju B33 Klik manajemen hubungi menuju B36 Klik bakcup menuju B37 Klik restore menuju B38 Klik transaksi semua pesanan menuju B39 Klik dibayar menuju B40 Klik dikirm menuju B41 Klik diterima menuju B42 Klik manajemen retur menuju B43 Klik detail retur menuju B44 Klik ubah status menuju B45 Keterangan : Ukuran Layar : Dinamis Default 1366x768 Type ukuran Font : Times New Roman 10px B14 Header Anda login Sebagai Operator Home Pengolahan Data Master Transaksi Logout List Bank Cari Merk Cari Tambah Kembali Total Bank : Buah No Nama Bank Aksi Gambar III.58 Perancangan Antarmuka Manajemen Bank 16. Perancangan Antarmuka Tambah Bank Berikut dapat dilihat perancangan antarmuka Tambah bank dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.59. Footer Klik home menuju B02 Klik detail menuju B03 Klik ubah status menuju B04 Klik Logout menuju B01 Klik Manajemen Produk menuju B05 Klik manajemen merk menuju B08 Klik warna menuju B11 Klik manahemen bank menuju B14 Klik kurs menuju B17 Klik manajemen jasa pengiriman menuju B18 Klik manajemen KP menuju B21 Klik manajemen member menuju B24 Klik manajemen kota menuju B27 Klik manajemen provinsi menuju B30 Klik manajemenongkir menuju B33 Klik manajemen hubungi menuju B36 Klik bakcup menuju B37 Klik restore menuju B38 Klik transaksi semua pesanan menuju B39 Klik dibayar menuju B40 Klik dikirm menuju B41 Klik diterima menuju B42 Klik manajemen retur menuju B43 Klik detail retur menuju B44 Klik ubah status menuju B45 Keterangan : Ukuran Layar : Dinamis Default 1366x768 Type ukuran Font : Times New Roman 10px B15 Header Anda login Sebagai Operator Home Pengolahan Data Master Transaksi Logout Form Tambah Bank Simpan Batal Nama Bank : Gambar III.59 Perancangan Antarmuka Tamah Bank 17. Perancangan Antarmuka Edit Bank Berikut dapat dilihat perancangan antarmuka edit kategori dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.60. Footer Klik home menuju B02 Klik detail menuju B03 Klik ubah status menuju B04 Klik Logout menuju B01 Klik Manajemen Produk menuju B05 Klik manajemen merk menuju B08 Klik warna menuju B11 Klik manahemen bank menuju B14 Klik kurs menuju B17 Klik manajemen jasa pengiriman menuju B18 Klik manajemen KP menuju B21 Klik manajemen member menuju B24 Klik manajemen kota menuju B27 Klik manajemen provinsi menuju B30 Klik manajemenongkir menuju B33 Klik manajemen hubungi menuju B36 Klik bakcup menuju B37 Klik restore menuju B38 Klik transaksi semua pesanan menuju B39 Klik dibayar menuju B40 Klik dikirm menuju B41 Klik diterima menuju B42 Klik manajemen retur menuju B43 Klik detail retur menuju B44 Klik ubah status menuju B45 Keterangan : Ukuran Layar : Dinamis Default 1366x768 Type ukuran Font : Times New Roman 10px B16 Header Anda login Sebagai Operator Home Pengolahan Data Master Transaksi Logout Form Edit Bank Simpan Batal Nama Bank : Gambar III.60 Perancangan Antarmuka Edit Bank 18. Perancangan Antarmuka Kurs Berikut dapat dilihat perancangan antarmuka kurs dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.61. header footer Klik kembali menuju B02 Klik home menuju B02 Klik detail menuju B03 Klik masukan menuju B02 Klik Logout menuju B01 Klik Manajemen Produk menuju B05 Klik manajemen merk menuju B08 Klik warna menuju B11 Klik manahemen bank menuju B14 Klik kurs menuju B17 Klik manajemen jasa pengiriman menuju B18 Klik manajemen KP menuju B21 Klik manajemen member menuju B24 Klik manajemen kota menuju B27 Klik manajemen provinsi menuju B30 Klik manajemenongkir menuju B33 Klik manajemen hubungi menuju B36 Klik bakcup menuju B37 Klik restore menuju B38 Klik transaksi semua pesanan menuju B39 Klik dibayar menuju B40 Klik dikirm menuju B41 Klik diterima menuju B42 Klik manajemen retur menuju B43 Klik detail retur menuju B44 Klik ubah status menuju B45 Keterangan : Ukuran Layar : Dinamis Default 1366x768 Type ukuran Font : Times New Roman 10px B17 Home Pengolahan Data Master Logout Transaksi Kurs yang sedang dipakai Form Tambah kurs Rp. Masukan kurs saat ini Rp. Http:www.bni.co.id Masukan Kembali Gambar III.61 Perancangan Antarmuka Kurs 19. Perancangan Antarmuka Manajemen Jasa Pengiriman Berikut dapat dilihat perancangan antarmuka manajemen jasa pengiriman dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.62. Footer Klik home menuju B02 Klik detail menuju B03 Klik ubah status menuju B04 Klik Logout menuju B01 Klik Manajemen Produk menuju B05 Klik manajemen merk menuju B08 Klik warna menuju B11 Klik manahemen bank menuju B14 Klik kurs menuju B17 Klik manajemen jasa pengiriman menuju B18 Klik manajemen KP menuju B21 Klik manajemen member menuju B24 Klik manajemen kota menuju B27 Klik manajemen provinsi menuju B30 Klik manajemenongkir menuju B33 Klik manajemen hubungi menuju B36 Klik bakcup menuju B37 Klik restore menuju B38 Klik transaksi semua pesanan menuju B39 Klik dibayar menuju B40 Klik dikirm menuju B41 Klik diterima menuju B42 Klik manajemen retur menuju B43 Klik detail retur menuju B44 Klik ubah status menuju B45 Keterangan : Ukuran Layar : Dinamis Default 1366x768 Type ukuran Font : Times New Roman 10px B18 Header Anda login Sebagai Operator Home Pengolahan Data Master Transaksi Logout List Jasa Pengiriman Cari Jasa Pengiriman Cari Tambah Kembali Total Jasa Pengiriman : Buah No Nama Jasa Pengiriman Aksi Gambar III.62 Perancangan Antarmuka Manajemen Jasa Pengiriman

20. Perancangan Antarmuka Tambah Jasa Pengiriman

Berikut dapat dilihat perancangan antarmuka tambah jasa pengiriman dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.63. Footer Klik home menuju B02 Klik detail menuju B03 Klik ubah status menuju B04 Klik Logout menuju B01 Klik Manajemen Produk menuju B05 Klik manajemen merk menuju B08 Klik warna menuju B11 Klik manahemen bank menuju B14 Klik kurs menuju B17 Klik manajemen jasa pengiriman menuju B18 Klik manajemen KP menuju B21 Klik manajemen member menuju B24 Klik manajemen kota menuju B27 Klik manajemen provinsi menuju B30 Klik manajemenongkir menuju B33 Klik manajemen hubungi menuju B36 Klik bakcup menuju B37 Klik restore menuju B38 Klik transaksi semua pesanan menuju B39 Klik dibayar menuju B40 Klik dikirm menuju B41 Klik diterima menuju B42 Klik manajemen retur menuju B43 Klik detail retur menuju B44 Klik ubah status menuju B45 Keterangan : Ukuran Layar : Dinamis Default 1366x768 Type ukuran Font : Times New Roman 10px B19 Header Anda login Sebagai Operator Home Pengolahan Data Master Transaksi Logout Form Tambah Jasa Pengiriman Simpan Batal Nama Jasa Pengiriman : Gambar III.63 Perancangan Antarmuka Tambah Jasa Pengiriman 21. Perancangan Antarmuka Edit Jasa Pengiriman Berikut dapat dilihat perancangan antarmuka edit jasa pengiriman dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.64. Footer Klik home menuju B02 Klik detail menuju B03 Klik ubah status menuju B04 Klik Logout menuju B01 Klik Manajemen Produk menuju B05 Klik manajemen merk menuju B08 Klik warna menuju B11 Klik manahemen bank menuju B14 Klik kurs menuju B17 Klik manajemen jasa pengiriman menuju B18 Klik manajemen KP menuju B21 Klik manajemen member menuju B24 Klik manajemen kota menuju B27 Klik manajemen provinsi menuju B30 Klik manajemenongkir menuju B33 Klik manajemen hubungi menuju B36 Klik bakcup menuju B37 Klik restore menuju B38 Klik transaksi semua pesanan menuju B39 Klik dibayar menuju B40 Klik dikirm menuju B41 Klik diterima menuju B42 Klik manajemen retur menuju B43 Klik detail retur menuju B44 Klik ubah status menuju B45 Keterangan : Ukuran Layar : Dinamis Default 1366x768 Type ukuran Font : Times New Roman 10px B20 Header Anda login Sebagai Operator Home Pengolahan Data Master Transaksi Logout Form Edit Jasa Pengiriman Simpan Batal Nama Jasa Pengiriman : Gambar III.64 Perancangan Antarmuka Edit Jasa Pengiriman 22. Perancangan Antarmuka Manajemen Kategori Pengiriman Berikut dapat dilihat perancangan antarmuka manajemen kategori pengiriman dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.65. Footer Klik home menuju B02 Klik detail menuju B03 Klik ubah status menuju B04 Klik Logout menuju B01 Klik Manajemen Produk menuju B05 Klik manajemen merk menuju B08 Klik warna menuju B11 Klik manahemen bank menuju B14 Klik kurs menuju B17 Klik manajemen jasa pengiriman menuju B18 Klik manajemen KP menuju B21 Klik manajemen member menuju B24 Klik manajemen kota menuju B27 Klik manajemen provinsi menuju B30 Klik manajemenongkir menuju B33 Klik manajemen hubungi menuju B36 Klik bakcup menuju B37 Klik restore menuju B38 Klik transaksi semua pesanan menuju B39 Klik dibayar menuju B40 Klik dikirm menuju B41 Klik diterima menuju B42 Klik manajemen retur menuju B43 Klik detail retur menuju B44 Klik ubah status menuju B45 Keterangan : Ukuran Layar : Dinamis Default 1366x768 Type ukuran Font : Times New Roman 10px B21 Header Anda login Sebagai Operator Home Pengolahan Data Master Transaksi Logout List Jasa Kategori Pengiriman Cari Tambah Kembali Total Kategori Pengiriman : Buah No Nama Jasa Pengiriman Nama Kategori Pengiriman Aksi Gambar III.65 Perancangan Antarmuka Manajemen Kategori Pengiriman

23. Perancangan Antarmuka Tambah Kategori Pengiriman

Berikut dapat dilihat perancangan antarmuka tambah kategori pengiriman dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.66. Header Footer Klik batal menuju B21 Klik home menuju B02 Klik detail menuju B03 Klik simpan menuju B21 Klik Logout menuju B01 Klik Manajemen Produk menuju B05 Klik manajemen merk menuju B08 Klik warna menuju B11 Klik manahemen bank menuju B14 Klik kurs menuju B17 Klik manajemen jasa pengiriman menuju B18 Klik manajemen KP menuju B21 Klik manajemen member menuju B24 Klik manajemen kota menuju B27 Klik manajemen provinsi menuju B30 Klik manajemenongkir menuju B33 Klik manajemen hubungi menuju B36 Klik bakcup menuju B37 Klik restore menuju B38 Klik transaksi semua pesanan menuju B39 Klik dibayar menuju B40 Klik dikirm menuju B41 Klik diterima menuju B42 Klik manajemen retur menuju B43 Klik detail retur menuju B44 Klik ubah status menuju B45 Keterangan : Ukuran Layar : Dinamis Default 1366x768 Type ukuran Font : Times New Roman 10px B22 Home Pengolahan Data Master Logout Simpan Batal Transaksi Nama jasa pengiriman Form Tambah Kategori Pengiriman Nama kategori pengiriman Gambar III.66 Perancangan Antarmuka Tambah Kategori Pengiriman 24. Perancangan Antarmuka Edit Kategori Pengiriman Berikut dapat dilihat perancangan antarmuka edit kategori pengiriman dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.67. Header Footer Klik batal menuju B21 Klik home menuju B02 Klik detail menuju B03 Klik simpan menuju B21 Klik Logout menuju B01 Klik Manajemen Produk menuju B05 Klik manajemen merk menuju B08 Klik warna menuju B11 Klik manahemen bank menuju B14 Klik kurs menuju B17 Klik manajemen jasa pengiriman menuju B18 Klik manajemen KP menuju B21 Klik manajemen member menuju B24 Klik manajemen kota menuju B27 Klik manajemen provinsi menuju B30 Klik manajemenongkir menuju B33 Klik manajemen hubungi menuju B36 Klik bakcup menuju B37 Klik restore menuju B38 Klik transaksi semua pesanan menuju B39 Klik dibayar menuju B40 Klik dikirm menuju B41 Klik diterima menuju B42 Klik manajemen retur menuju B43 Klik detail retur menuju B44 Klik ubah status menuju B45 Keterangan : Ukuran Layar : Dinamis Default 1366x768 Type ukuran Font : Times New Roman 10px B23 Home Pengolahan Data Master Logout Simpan Batal Transaksi Nama Jasa Pengiriman Form Edit Kategori Pengiriman Nama Kategori Pengiriman Gambar III.67 Perancangan Antarmuka Edit Kategori Pengiriman 25. Perancangan Antarmuka Tampil Member Berikut dapat dilihat perancangan antarmuka Tampil member dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.68. header footer Total member : buah Klik kembali menuju B02 Klik home menuju B02 Klik detail menuju B03 Klik edit menuju B26 Klik tambah menuju B25 Klik Logout menuju B01 Klik Manajemen Produk menuju B05 Klik manajemen merk menuju B08 Klik warna menuju B11 Klik manahemen bank menuju B14 Klik kurs menuju B17 Klik manajemen jasa pengiriman menuju B18 Klik manajemen KP menuju B21 Klik manajemen member menuju B24 Klik manajemen kota menuju B27 Klik manajemen provinsi menuju B30 Klik manajemenongkir menuju B33 Klik manajemen hubungi menuju B36 Klik bakcup menuju B37 Klik restore menuju B38 Klik transaksi semua pesanan menuju B39 Klik dibayar menuju B40 Klik dikirm menuju B41 Klik diterima menuju B42 Klik manajemen retur menuju B43 Klik detail retur menuju B44 Klik ubah status menuju B45 Keterangan : Ukuran Layar : Dinamis Default 1366x768 Type ukuran Font : Times New Roman 10px B24 Home Pengolahan Data Master Logout Tambah Cari gambar Kembali List Member No Nama Member Email Tgl reg Aksi Status Blok edit Gambar III.68 Perancangan Antarmuka Tampil Member

26. Perancangan Antarmuka Manajemen Kota

Berikut dapat dilihat perancangan antarmuka manajemen kota dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.69. header footer Total kota: buah Klik kembali menuju B02 Klik home menuju B02 Klik detail menuju B03 Klik ubah menuju B29 Klik tambah menuju B28 Klik Logout menuju B01 Klik Manajemen Produk menuju B05 Klik manajemen merk menuju B08 Klik warna menuju B11 Klik manahemen bank menuju B14 Klik kurs menuju B17 Klik manajemen jasa pengiriman menuju B18 Klik manajemen KP menuju B21 Klik manajemen member menuju B24 Klik manajemen kota menuju B27 Klik manajemen provinsi menuju B30 Klik manajemenongkir menuju B33 Klik manajemen hubungi menuju B36 Klik bakcup menuju B37 Klik restore menuju B38 Klik transaksi semua pesanan menuju B39 Klik dibayar menuju B40 Klik dikirm menuju B41 Klik diterima menuju B42 Klik manajemen retur menuju B43 Klik detail retur menuju B44 Klik ubah status menuju B45 Keterangan : Ukuran Layar : Dinamis Default 1366x768 Type ukuran Font : Times New Roman 10px B27 Home Pengolahan Data Master Logout Tambah Cari gambar Kembali List kota No Nama kota Aksi Transaksi Ubah Hapus Gambar III.69 Perancangan Antarmuka Manajemen Kota 27. Perancangan Antarmuka Tambah Kota Berikut dapat dilihat perancangan antarmuka tambah kota dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.70. header footer Klik batal menuju B27 Klik home menuju B02 Klik detail menuju B03 Klik simpan menuju B27 Klik Logout menuju B01 Klik Manajemen Produk menuju B05 Klik manajemen merk menuju B08 Klik warna menuju B11 Klik manahemen bank menuju B14 Klik kurs menuju B17 Klik manajemen jasa pengiriman menuju B18 Klik manajemen KP menuju B21 Klik manajemen member menuju B24 Klik manajemen kota menuju B27 Klik manajemen provinsi menuju B30 Klik manajemenongkir menuju B33 Klik manajemen hubungi menuju B36 Klik bakcup menuju B37 Klik restore menuju B38 Klik transaksi semua pesanan menuju B39 Klik dibayar menuju B40 Klik dikirm menuju B41 Klik diterima menuju B42 Klik manajemen retur menuju B43 Klik detail retur menuju B44 Klik ubah status menuju B45 Keterangan : Ukuran Layar : Dinamis Default 1366x768 Type ukuran Font : Times New Roman 10px B28 Home Pengolahan Data Master Logout Simpan Batal Transaksi Nama kota Form Tambah kota Pilih Provinsi Gambar III.70 Perancangan Antarmuka Tambah Kota 28. Perancangan Antarmuka Edit Kota Berikut dapat dilihat perancangan antarmuka edit kota dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.71. header footer Klik batal menuju B27 Klik home menuju B02 Klik detail menuju B03 Klik simpan menuju B27 Klik Logout menuju B01 Klik Manajemen Produk menuju B05 Klik manajemen merk menuju B08 Klik warna menuju B11 Klik manahemen bank menuju B14 Klik kurs menuju B17 Klik manajemen jasa pengiriman menuju B18 Klik manajemen KP menuju B21 Klik manajemen member menuju B24 Klik manajemen kota menuju B27 Klik manajemen provinsi menuju B30 Klik manajemenongkir menuju B33 Klik manajemen hubungi menuju B36 Klik bakcup menuju B37 Klik restore menuju B38 Klik transaksi semua pesanan menuju B39 Klik dibayar menuju B40 Klik dikirm menuju B41 Klik diterima menuju B42 Klik manajemen retur menuju B43 Klik detail retur menuju B44 Klik ubah status menuju B45 Keterangan : Ukuran Layar : Dinamis Default 1366x768 Type ukuran Font : Times New Roman 10px B29 Home Pengolahan Data Master Logout Simpan Batal Transaksi Nama kota Form edit kota Gambar III.71 Perancangan Antarmuka Edit Kota

29. Perancangan Antarmuka Manajemen Provinsi

Berikut dapat dilihat perancangan antarmuka manajemen provinsi dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.72. header footer Total provinsi: buah Klik kembali menuju B02 Klik home menuju B02 Klik detail menuju B03 Klik ubah menuju B32 Klik tambah menuju B31 Klik Logout menuju B01 Klik Manajemen Produk menuju B05 Klik manajemen merk menuju B08 Klik warna menuju B11 Klik manahemen bank menuju B14 Klik kurs menuju B17 Klik manajemen jasa pengiriman menuju B18 Klik manajemen KP menuju B21 Klik manajemen member menuju B24 Klik manajemen kota menuju B27 Klik manajemen provinsi menuju B30 Klik manajemenongkir menuju B33 Klik manajemen hubungi menuju B36 Klik bakcup menuju B37 Klik restore menuju B38 Klik transaksi semua pesanan menuju B39 Klik dibayar menuju B40 Klik dikirm menuju B41 Klik diterima menuju B42 Klik manajemen retur menuju B43 Klik detail retur menuju B44 Klik ubah status menuju B45 Keterangan : Ukuran Layar : Dinamis Default 1366x768 Type ukuran Font : Times New Roman 10px B30 Home Pengolahan Data Master Logout Tambah Cari gambar Kembali List provinsi No Nama provinsi Aksi Transaksi Ubah Hapus Gambar III.72 Perancangan Antarmuka Manajemen Provinsi 30. Perancangan Antarmuka Tambah Provinsi Berikut dapat dilihat perancangan antarmuka tambah provinsi dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.73. header footer Klik batal menuju B30 Klik home menuju B02 Klik detail menuju B03 Klik simpan menuju B30 Klik Logout menuju B01 Klik Manajemen Produk menuju B05 Klik manajemen merk menuju B08 Klik warna menuju B11 Klik manahemen bank menuju B14 Klik kurs menuju B17 Klik manajemen jasa pengiriman menuju B18 Klik manajemen KP menuju B21 Klik manajemen member menuju B24 Klik manajemen kota menuju B27 Klik manajemen provinsi menuju B30 Klik manajemenongkir menuju B33 Klik manajemen hubungi menuju B36 Klik bakcup menuju B37 Klik restore menuju B38 Klik transaksi semua pesanan menuju B39 Klik dibayar menuju B40 Klik dikirm menuju B41 Klik diterima menuju B42 Klik manajemen retur menuju B43 Klik detail retur menuju B44 Klik ubah status menuju B45 Keterangan : Ukuran Layar : Dinamis Default 1366x768 Type ukuran Font : Times New Roman 10px B31 Home Pengolahan Data Master Logout Simpan Batal Transaksi Nama provinsi Form Tambah provinsi Gambar III.73 Perancangan Antarmuka Tambah Provinsi 31. Perancangan Antarmuka Edit Provinsi Berikut dapat dilihat perancangan antarmuka edit provinsi dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.74. header footer Klik batal menuju B30 Klik home menuju B02 Klik detail menuju B03 Klik simpan menuju B30 Klik Logout menuju B01 Klik Manajemen Produk menuju B05 Klik manajemen merk menuju B08 Klik warna menuju B11 Klik manahemen bank menuju B14 Klik kurs menuju B17 Klik manajemen jasa pengiriman menuju B18 Klik manajemen KP menuju B21 Klik manajemen member menuju B24 Klik manajemen kota menuju B27 Klik manajemen provinsi menuju B30 Klik manajemenongkir menuju B33 Klik manajemen hubungi menuju B36 Klik bakcup menuju B37 Klik restore menuju B38 Klik transaksi semua pesanan menuju B39 Klik dibayar menuju B40 Klik dikirm menuju B41 Klik diterima menuju B42 Klik manajemen retur menuju B43 Klik detail retur menuju B44 Klik ubah status menuju B45 Keterangan : Ukuran Layar : Dinamis Default 1366x768 Type ukuran Font : Times New Roman 10px B32 Home Pengolahan Data Master Logout Simpan Batal Transaksi Nama provinsi Form Tambah provinsi Gambar III.74 Perancangan Antarmuka Edit Provinsi

32. Perancangan Antarmuka Manajemen Ongkos Kirim

Berikut dapat dilihat perancangan antarmuka manajemen ongkos kirim dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.75. header footer Total ongkir : buah Klik kembali menuju B02 Klik home menuju B02 Klik detail menuju B03 Klik ubah menuju B35 Klik tambah menuju B34 Klik Logout menuju B01 Klik Manajemen Produk menuju B05 Klik manajemen merk menuju B08 Klik warna menuju B11 Klik manahemen bank menuju B14 Klik kurs menuju B17 Klik manajemen jasa pengiriman menuju B18 Klik manajemen KP menuju B21 Klik manajemen member menuju B24 Klik manajemen kota menuju B27 Klik manajemen provinsi menuju B30 Klik manajemenongkir menuju B33 Klik manajemen hubungi menuju B36 Klik bakcup menuju B37 Klik restore menuju B38 Klik transaksi semua pesanan menuju B39 Klik dibayar menuju B40 Klik dikirm menuju B41 Klik diterima menuju B42 Klik manajemen retur menuju B43 Klik detail retur menuju B44 Klik ubah status menuju B45 Keterangan : Ukuran Layar : Dinamis Default 1366x768 Type ukuran Font : Times New Roman 10px B33 Home Pengolahan Data Master Logout Tambah Cari gambar Kembali List ongkos kirim No Kategori pengiriman Aksi Transaksi Ubah Hapus Kota Tujuan tarif Gambar III.75. Perancangan Antarmuka Manajemen Ongkos Kirim 33. Perancangan Antarmuka Tambah Ongkos Kirim Berikut dapat dilihat perancangan antarmuka tambah ongkos kirim dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.76. header footer Klik batal menuju B33 Klik home menuju B02 Klik detail menuju B03 Klik simpan menuju B33 Klik Logout menuju B01 Klik Manajemen Produk menuju B05 Klik manajemen merk menuju B08 Klik warna menuju B11 Klik manahemen bank menuju B14 Klik kurs menuju B17 Klik manajemen jasa pengiriman menuju B18 Klik manajemen KP menuju B21 Klik manajemen member menuju B24 Klik manajemen kota menuju B27 Klik manajemen provinsi menuju B30 Klik manajemenongkir menuju B33 Klik manajemen hubungi menuju B36 Klik bakcup menuju B37 Klik restore menuju B38 Klik transaksi semua pesanan menuju B39 Klik dibayar menuju B40 Klik dikirm menuju B41 Klik diterima menuju B42 Klik manajemen retur menuju B43 Klik detail retur menuju B44 Klik ubah status menuju B45 Keterangan : Ukuran Layar : Dinamis Default 1366x768 Type ukuran Font : Times New Roman 10px B34 Home Pengolahan Data Master Logout Simpan Batal Transaksi Kategori pengiriman Form Tambah ongkir provinsi Kota Tarif Gambar III.76 Perancangan Antarmuka Tambah Ongkos Kirim 34. Perancangan Antarmuka Edit Ongkos Kirim Berikut dapat dilihat perancangan antarmuka edit ongkos kirim dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.77 header footer Klik batal menuju B33 Klik home menuju B02 Klik detail menuju B03 Klik simpan menuju B33 Klik Logout menuju B01 Klik Manajemen Produk menuju B05 Klik manajemen merk menuju B08 Klik warna menuju B11 Klik manahemen bank menuju B14 Klik kurs menuju B17 Klik manajemen jasa pengiriman menuju B18 Klik manajemen KP menuju B21 Klik manajemen member menuju B24 Klik manajemen kota menuju B27 Klik manajemen provinsi menuju B30 Klik manajemenongkir menuju B33 Klik manajemen hubungi menuju B36 Klik bakcup menuju B37 Klik restore menuju B38 Klik transaksi semua pesanan menuju B39 Klik dibayar menuju B40 Klik dikirm menuju B41 Klik diterima menuju B42 Klik manajemen retur menuju B43 Klik detail retur menuju B44 Klik ubah status menuju B45 Keterangan : Ukuran Layar : Dinamis Default 1366x768 Type ukuran Font : Times New Roman 10px B35 Home Pengolahan Data Master Logout Simpan Batal Transaksi Kategori pengiriman Form edit ongkir Kota Tarif Gambar III.77 Perancangan Antarmuka Edit Ongkos Kirim

35. Perancangan Antarmuka Manajemen Hubungi

Berikut dapat dilihat perancangan antarmuka manajemen hubungi dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.78. header footer Total hubungi : buah Klik kembali menuju B02 Klik home menuju B02 Klik detail menuju B03 Klik ubah menuju B35 Klik Logout menuju B01 Klik Manajemen Produk menuju B05 Klik manajemen merk menuju B08 Klik warna menuju B11 Klik manahemen bank menuju B14 Klik kurs menuju B17 Klik manajemen jasa pengiriman menuju B18 Klik manajemen KP menuju B21 Klik manajemen member menuju B24 Klik manajemen kota menuju B27 Klik manajemen provinsi menuju B30 Klik manajemenongkir menuju B33 Klik manajemen hubungi menuju B36 Klik bakcup menuju B37 Klik restore menuju B38 Klik transaksi semua pesanan menuju B39 Klik dibayar menuju B40 Klik dikirm menuju B41 Klik diterima menuju B42 Klik manajemen retur menuju B43 Klik detail retur menuju B44 Klik ubah status menuju B45 Keterangan : Ukuran Layar : Dinamis Default 1366x768 Type ukuran Font : Times New Roman 10px B36 Home Pengolahan Data Master Logout Cari gambar Kembali List pesan No email Aksi Transaksi Hapus subjek pesan nama Tgl Gambar III.78 Perancangan Antarmuka Manajemen Hubungi 36. Perancangan Antarmuka Backup Berikut dapat dilihat perancangan antarmuka backup dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.79. header footer Klik home menuju B02 Klik ubah menuju B35 Klik Logout menuju B01 Klik Manajemen Produk menuju B05 Klik manajemen merk menuju B08 Klik warna menuju B11 Klik manahemen bank menuju B14 Klik kurs menuju B17 Klik manajemen jasa pengiriman menuju B18 Klik manajemen Kategori Pengiriman menuju B21 Klik manajemen member menuju B24 Klik manajemen kota menuju B27 Klik manajemen provinsi menuju B30 Klik manajemenongkir menuju B33 Klik manajemen hubungi menuju B36 Klik bakcup menuju B37 Klik restore menuju B38 Klik transaksi semua pesanan menuju B39 Klik dibayar menuju B40 Klik dikirm menuju B41 Klik diterima menuju B42 Klik manajemen retur menuju B43 Klik detail retur menuju B44 Klik ubah status menuju B45 Keterangan : Ukuran Layar : Dinamis Default 1366x768 Type ukuran Font : Times New Roman 10px B37 Home Pengolahan Data Master Logout Cari gambar Backup database Transaksi Proses bakcup database Gambar III.79 Perancangan Antarmuka Backup 37. Perancangan Antarmuka Restore Berikut dapat dilihat perancangan antarmuka restore dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.83. header footer Klik home menuju B02 Klik ubah menuju B35 Klik Logout menuju B01 Klik Manajemen Produk menuju B05 Klik manajemen merk menuju B08 Klik warna menuju B11 Klik manahemen bank menuju B14 Klik kurs menuju B17 Klik manajemen jasa pengiriman menuju B18 Klik manajemen Kategori Pengiriman menuju B21 Klik manajemen member menuju B24 Klik manajemen kota menuju B27 Klik manajemen provinsi menuju B30 Klik manajemenongkir menuju B33 Klik manajemen hubungi menuju B36 Klik bakcup menuju B37 Klik restore menuju B38 Klik transaksi semua pesanan menuju B39 Klik dibayar menuju B40 Klik dikirm menuju B41 Klik diterima menuju B42 Klik manajemen retur menuju B43 Klik detail retur menuju B44 Klik ubah status menuju B45 Keterangan : Ukuran Layar : Dinamis Default 1366x768 Type ukuran Font : Times New Roman 10px B38 Home Pengolahan Data Master Logout Cari gambar restore database Transaksi restore database File backup database .sql browse Gambar III.80 Perancangan Antarmuka Restore

38. Perancangan Antarmuka Manajemen Orders-Semua Pesanan

Berikut dapat dilihat perancangan antarmuka manajemen orders-semua pesanan dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.81. header footer Total order : buah Klik home menuju B02 Klik ubah status menuju B35 Klik detail menuju B35 Klik Logout menuju B01 Klik Manajemen Produk menuju B05 Klik manajemen merk menuju B08 Klik warna menuju B11 Klik manahemen bank menuju B14 Klik kurs menuju B17 Klik manajemen jasa pengiriman menuju B18 Klik manajemen Kategori Pengiriman menuju B21 Klik manajemen member menuju B24 Klik manajemen kota menuju B27 Klik manajemen provinsi menuju B30 Klik manajemenongkir menuju B33 Klik manajemen hubungi menuju B36 Klik bakcup menuju B37 Klik restore menuju B38 Klik transaksi semua pesanan menuju B39 Klik dibayar menuju B40 Klik dikirm menuju B41 Klik diterima menuju B42 Klik manajemen retur menuju B43 Klik detail retur menuju B44 Klik ubah status menuju B45 Keterangan : Ukuran Layar : Dinamis Default 1366x768 Type ukuran Font : Times New Roman 10px B39 Home Pengolahan Data Master Logout Cari gambar Kembali Manajemen pesanan No Status order Aksi Transaksi detail Ubah status Tgl order tarif Id order Nama member Cari order berdasarkan Gambar III.81 Perancangan Manajemen Orders-Semua Pesanan 39. Perancangan Antarmuka Manajemen Orders-Semua Dibayar Berikut dapat dilihat perancangan antarmuka manajemen orders-semua dibayar dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.82. header footer Total order : buah Klik home menuju B02 Klik ubah status menuju B35 Klik detail menuju B35 Klik Logout menuju B01 Klik Manajemen Produk menuju B05 Klik manajemen merk menuju B08 Klik warna menuju B11 Klik manahemen bank menuju B14 Klik kurs menuju B17 Klik manajemen jasa pengiriman menuju B18 Klik manajemen Kategori Pengiriman menuju B21 Klik manajemen member menuju B24 Klik manajemen kota menuju B27 Klik manajemen provinsi menuju B30 Klik manajemenongkir menuju B33 Klik manajemen hubungi menuju B36 Klik bakcup menuju B37 Klik restore menuju B38 Klik transaksi semua pesanan menuju B39 Klik dibayar menuju B40 Klik dikirm menuju B41 Klik diterima menuju B42 Klik manajemen retur menuju B43 Klik detail retur menuju B44 Klik ubah status menuju B45 Keterangan : Ukuran Layar : Dinamis Default 1366x768 Type ukuran Font : Times New Roman 10px B40 Home Pengolahan Data Master Logout Tambah Cari gambar Kembali Manajemen pesanan No Status order Aksi Transaksi detail Ubah status Tgl order tarif Id order Nama member Cari order berdasarkan Gambar III.82 Perancangan Manajemen Orders-Semua Dibayar 40. Perancangan Antarmuka Manajemen Orders-Semua Dikirim Berikut dapat dilihat perancangan antarmuka manajemen orders-semua dikirim dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.83. header footer Total order : buah Klik home menuju B02 Klik ubah status menuju B35 Klik detail menuju B35 Klik Logout menuju B01 Klik Manajemen Produk menuju B05 Klik manajemen merk menuju B08 Klik warna menuju B11 Klik manahemen bank menuju B14 Klik kurs menuju B17 Klik manajemen jasa pengiriman menuju B18 Klik manajemen Kategori Pengiriman menuju B21 Klik manajemen member menuju B24 Klik manajemen kota menuju B27 Klik manajemen provinsi menuju B30 Klik manajemenongkir menuju B33 Klik manajemen hubungi menuju B36 Klik bakcup menuju B37 Klik restore menuju B38 Klik transaksi semua pesanan menuju B39 Klik dibayar menuju B40 Klik dikirm menuju B41 Klik diterima menuju B42 Klik manajemen retur menuju B43 Klik detail retur menuju B44 Klik ubah status menuju B45 Keterangan : Ukuran Layar : Dinamis Default 1366x768 Type ukuran Font : Times New Roman 10px B41 Home Pengolahan Data Master Logout Tambah Cari gambar Kembali Manajemen pesanan No Status order Aksi Transaksi detail Ubah status Tgl order tarif Id order Nama member Cari order berdasarkan Gambar III.83 Perancangan Manajemen Orders-Semua Dikirim

41. Perancangan Antarmuka Manajemen Orders-Pesanan Diterima

Berikut dapat dilihat perancangan antarmuka manajemen orders-pesanan diterima dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.84. header footer Total order : buah Klik home menuju B02 Klik ubah status menuju B35 Klik detail menuju B35 Klik Logout menuju B01 Klik Manajemen Produk menuju B05 Klik manajemen merk menuju B08 Klik warna menuju B11 Klik manahemen bank menuju B14 Klik kurs menuju B17 Klik manajemen jasa pengiriman menuju B18 Klik manajemen Kategori Pengiriman menuju B21 Klik manajemen member menuju B24 Klik manajemen kota menuju B27 Klik manajemen provinsi menuju B30 Klik manajemenongkir menuju B33 Klik manajemen hubungi menuju B36 Klik bakcup menuju B37 Klik restore menuju B38 Klik transaksi semua pesanan menuju B39 Klik dibayar menuju B40 Klik dikirm menuju B41 Klik diterima menuju B42 Klik manajemen retur menuju B43 Klik detail retur menuju B44 Klik ubah status menuju B45 Keterangan : Ukuran Layar : Dinamis Default 1366x768 Type ukuran Font : Times New Roman 10px B41 Home Pengolahan Data Master Logout Tambah Cari gambar Kembali Manajemen pesanan No Status order Aksi Transaksi detail Ubah status Tgl order tarif Id order Nama member Cari order berdasarkan Gambar III.84 Perancangan Manajemen Orders-Pesanan Diterima 42. Perancangan Antarmuka Manajemen Retur Berikut dapat dilihat perancangan antarmuka manajemen retur dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.85 header footer Total retur : buah Klik kembali menuju B02 Klik home menuju B02 Klik detail menuju B44 Klik ubah status menuju B45 Klik Logout menuju B01 Klik Manajemen Produk menuju B05 Klik manajemen merk menuju B08 Klik warna menuju B11 Klik manahemen bank menuju B14 Klik kurs menuju B17 Klik manajemen jasa pengiriman menuju B18 Klik manajemen KP menuju B21 Klik manajemen member menuju B24 Klik manajemen kota menuju B27 Klik manajemen provinsi menuju B30 Klik manajemenongkir menuju B33 Klik manajemen hubungi menuju B36 Klik bakcup menuju B37 Klik restore menuju B38 Klik transaksi semua pesanan menuju B39 Klik dibayar menuju B40 Klik dikirm menuju B41 Klik diterima menuju B42 Klik manajemen retur menuju B43 Klik detail retur menuju B44 Klik ubah status menuju B45 Keterangan : Ukuran Layar : Dinamis Default 1366x768 Type ukuran Font : Times New Roman 10px B43 Home Pengolahan Data Master Logout Tambah Cari gambar Kembali Manajemen pesanan No Aksi Transaksi detail Ubah status Tgl retur No resi Id order Status retur Cari order berdasarkan Gambar III.85 Perancangan Manajemen Retur 43. Perancangan Antarmuka Detail Retur Berikut dapat dilihat perancangan antarmuka detail retur dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.86. header footer Klik kembali menuju B44 Klik home menuju B02 Klik detail menuju B44 Klik Logout menuju B01 Klik Manajemen Produk menuju B05 Klik manajemen merk menuju B08 Klik warna menuju B11 Klik manahemen bank menuju B14 Klik kurs menuju B17 Klik manajemen jasa pengiriman menuju B18 Klik manajemen KP menuju B21 Klik manajemen member menuju B24 Klik manajemen kota menuju B27 Klik manajemen provinsi menuju B30 Klik manajemenongkir menuju B33 Klik manajemen hubungi menuju B36 Klik bakcup menuju B37 Klik restore menuju B38 Klik transaksi semua pesanan menuju B39 Klik dibayar menuju B40 Klik dikirm menuju B41 Klik diterima menuju B42 Klik manajemen retur menuju B43 Klik detail retur menuju B44 Klik ubah status menuju B45 Keterangan : Ukuran Layar : Dinamis Default 1366x768 Type ukuran Font : Times New Roman 10px B44 Home Pengolahan Data Master Logout Cari gambar Kembali Manajemen pesanan No Transaksi alasan Nama produk jumlah Cari order berdasarkan Gambar III.86 Perancangan Antarmuka Detail Retur

44. Perancangan Antarmuka Ubah Status

Berikut dapat dilihat perancangan antarmuka ubah status dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.87. header footer Klik kembali menuju B43 Klik simpan menuju B43 Klik home menuju B02 Klik Logout menuju B01 Klik Manajemen Produk menuju B05 Klik manajemen merk menuju B08 Klik warna menuju B11 Klik manahemen bank menuju B14 Klik kurs menuju B17 Klik manajemen jasa pengiriman menuju B18 Klik manajemen KP menuju B21 Klik manajemen member menuju B24 Klik manajemen kota menuju B27 Klik manajemen provinsi menuju B30 Klik manajemenongkir menuju B33 Klik manajemen hubungi menuju B36 Klik bakcup menuju B37 Klik restore menuju B38 Klik transaksi semua pesanan menuju B39 Klik dibayar menuju B40 Klik dikirm menuju B41 Klik diterima menuju B42 Klik manajemen retur menuju B43 Klik detail retur menuju B44 Klik ubah status menuju B45 Keterangan : Ukuran Layar : Dinamis Default 1366x768 Type ukuran Font : Times New Roman 10px B45 Home Pengolahan Data Master Logout Simpan kembali Transaksi Id retur Ubah Status Retur Status retur Tgl retur No res pengiriman Gambar III.87 Perancangan Antarmuka Ubah Status III.5.3.5 Perancangan Antarmuka Admin 1. Perancangan Antarmuka Login Berikut dapat dilihat perancangan antarmuka login admin dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.88. username password login Lupa password header gambar footer Silahkan Login Terlebih Dahulu Klik link login menuju C02 Klik Lupa password menuju C09 Keterangan : Ukuran Layar : Dinamis Default 1366x768 Type ukuran Font : Times New Roman 10px C01 Gambar III.88 Perancangan Antarmuka Login 2. Perancangan Antarmuka Home Admin Berikut dapat dilihat perancangan antarmuka home admin dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.89. header footer Superadmin, selamat datang Apa yang akan anda lakukan hari ini? Klik home menuju C02 Klik home aksi-detail menuju C03 Klik Manajemen User menuju C04 Klik Laporan Stok menuju C05 Klik Laporan Stok-Proses menuju C06 Klik Laporan Penjualan menuju C07 Klik Laporan Penjualan-Proses menuju C08 Klik logout menuju C02 Keterangan : Ukuran Layar : Dinamis Default 1366x768 Type ukuran Font : Times New Roman 10px C02 Home Pengolahan Data Master Logout 10 Orde Terkahir Id Order Nama Member Status Order Tanggal Order Aksi Detail Daftar ID Order Daftar Nama Member Daftar Status Order Daftar Tanggal Order Gambar III.89 Perancangan Antarmuka Home Admin 3. Perancangan Antarmuka Aksi-Detail Berikut dapat dilihat perancangan antarmuka aksi-detail dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.90. header Isi Detail Order footer Detail Order Klik home menuju C02 Klik home aksi-detail menuju C03 Klik Manajemen User menuju C04 Klik Laporan Stok menuju C05 Klik Laporan Stok-Proses menuju C06 Klik Laporan Penjualan menuju C07 Klik Laporan Penjualan-Proses menuju C08 Klik kembali menuju C02 Klik logout menuju C02 Keterangan : Ukuran Layar : Dinamis Default 1366x768 Type ukuran Font : Times New Roman 10px C03 Home Pengolahan Data Master Logout Kembali Gambar III.90 Perancangan Antarmuka Aksi-Detail 4. Perancangan Antarmuka Manajemen Operator Berikut dapat dilihat perancangan antarmuka manajemen operator dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.91. header footer Total admin : buah Klik home menuju C02 Klik home aksi-detail menuju C03 Klik Manajemen User menuju C04 Klik Laporan Stok menuju C05 Klik Laporan Stok-Proses menuju C06 Klik Laporan Penjualan menuju C07 Klik Laporan Penjualan-Proses menuju C08 Klik kembali menuju C02 Klik logout menuju C02 Keterangan : Ukuran Layar : Dinamis Default 1366x768 Type ukuran Font : Times New Roman 10px C04 Home Pengolahan Data Master Logout Tambah Cari gambar Kembali List Admin No Nama Admin Username Email Level Aksi Password ubah hapus Gambar III.91 Perancangan Antarmuka Manajemen Operator 5. Perancangan Antarmuka Laporan Stok Berikut dapat dilihat perancangan antarmuka laporan stok dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.92. header footer Klik home menuju C02 Klik home aksi-detail menuju C03 Klik Manajemen User menuju C04 Klik Laporan Stok menuju C05 Klik Laporan Stok-Proses menuju C06 Klik Laporan Penjualan menuju C07 Klik Laporan Penjualan-Proses menuju C08 Klik Proses menuju C06 Klik logout menuju C02 Keterangan : Ukuran Layar : Dinamis Default 1366x768 Type ukuran Font : Times New Roman 10px C05 Home Pengolahan Data Master Logout Laporan Stok Barang Dari Tanggal Sampai Proses Gambar III.92 Perancangan Antarmuka Laporan Stok 6. Perancangan Antarmuka Laporan Stok-proses Berikut dapat dilihat perancangan antarmuka laporan stok-proses dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.93. header footer Klik home menuju C02 Klik home aksi-detail menuju C03 Klik Manajemen User menuju C04 Klik Laporan Stok menuju C05 Klik Laporan Stok-Proses menuju C06 Klik Laporan Penjualan menuju C07 Klik Laporan Penjualan-Proses menuju C08 Klik Proses menuju C06 Klik logout menuju C02 Keterangan : Ukuran Layar : Dinamis Default 1366x768 Type ukuran Font : Times New Roman 10px C06 Home Pengolahan Data Master Logout Laporan Stok Barang No Nama ID Stok Tanggal Masuk Harga Total Produk = buah Total Stok = buah Gambar III.93 Perancangan Antarmuka Laporan Stok-proses 7. Perancangan Antarmuka Laporan Penjualan Berikut dapat dilihat perancangan antarmuka laporan penjualan dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.94. header footer Klik home menuju C02 Klik home aksi-detail menuju C03 Klik Manajemen User menuju C04 Klik Laporan Stok menuju C05 Klik Laporan Stok-Proses menuju C06 Klik Laporan Penjualan menuju C07 Klik Laporan Penjualan-Proses menuju C08 Klik Proses menuju C08 Klik logout menuju C02 Keterangan : Ukuran Layar : Dinamis Default 1366x768 Type ukuran Font : Times New Roman 10px C07 Home Pengolahan Data Master Logout Laporan Penjualan Dari Tanggal Sampai Proses Status Order : --Pilih status -- Gambar III.94 Perancangan Antarmuka Laporan Penjualan 8. Perancangan Antarmuka Laporan Penjualan Proses Berikut dapat dilihat perancangan antarmuka laporan penjualan proses dari pembangunan aplikasi e-commerce di toko Yella Perdana yang tercantum pada gambar III.95. header footer Klik home menuju C02 Klik home aksi-detail menuju C03 Klik Manajemen User menuju C04 Klik Laporan Stok menuju C05 Klik Laporan Stok-Proses menuju C06 Klik Laporan Penjualan menuju C07 Klik Laporan Penjualan-Proses menuju C08 Klik Proses menuju C08 Klik logout menuju C02 Keterangan : Ukuran Layar : Dinamis Default 1366x768 Type ukuran Font : Times New Roman 10px C08 Home Pengolahan Data Master Logout Laporan Penjualan No Faktur Nama Produk Total Bayar Tanggal Order Jumlah Jumlah Pesanan yang : Buah Gambar III.95 Perancangan Antarmuka Laporan Penjualan III.5.3.6 Perancangan Pesan Perancangan pesan merupakan pesan-pesan yang akan ditampilkan di sistem ketika sistem digunakan. Pesan yang ada di aplikasi ini adalah sebagai berikut : OK Username atau password salah, silahkan coba lagi M01 OK Maaf, Username Telah Digunakan M02 OK Maaf, Username Telah Digunakan M03 OK Aktivasi account telah dikirim kan ke email Anda, Silahkan cek email Anda M04 OK Anda tidak punya akses terhadap halaman ini M05 OK Maaf, admin yang Anda coba masukan sudah ada di sistem M06 OK admin sudah tersimpan M07 OK Apakah Anda benar-benar akan menghapus ? M08 OK bank sudah tersimpan M09 OK Barang Sudah Tersimpan M10 OK Jasa pengiriman sudah tersimpan M11 OK Kategori pengiriman sudah tersimpan M12 OK Maaf, jasa pengiriman yang Anda coba masukan sudah ada di sistem M13 OK Maaf, kota yang Anda coba masukan sudah ada di sistem M14 OK kota sudah tersimpan M15 OK Maaf, member yang Anda coba masukan sudah ada di sistem M16 OK Member Sudah Tersimpan M17 OK Maaf, merk yang Anda coba masukan sudah ada di sistem M18 OK merk sudah tersimpan M19 OK Maaf, ongkir yang Anda coba masukan sudah ada di sistem M20 OK ongkir Sudah Tersimpan M21 Gambar III.96 Perancangan Pesan III.5.3.7 Jaringan Sismatik 1. Jaringan semantik pengunjung A01 A02 A03 A04 A05 A06 A07 A08 M01,M04,M09 M01, M02,M03,M04,M05,M06,M07 ,M08,M09,M10.M11 ,M12,M13,M14 M04,M09 Gambar III.97 Semantik Pengunjung 2. Jaringan semantic member A01 A06 A11 A02 A03 A04 A09 A12 A13 A14 M01, M02,M03,M04,M05,M06,M07 ,M08,M09,M10.M11 ,M12,M13,M14 A05 M04,M09 Gambar III.98 semantik member 3. Jaringan semantic operator B01 B02 B03 B18 B05 B08 B17 B27 B11 B14 B21 B24 B19 B06 B09 B12 B15 B22 B25 B30 B33 B37 B38 B07 B10 B13 B16 B20 B23 B26 B29 B28 B32 B31 B35 B34 M01 M03,M04 M03,M04 M05,M06 M07,M08 M09,M10 M10,M11 M10,M11 M12,M13 M14,M15 M19,M20 M14,M16 M06,M07 M06,M07 M06,M07 M06,M07 M06,M07 M06,M07 M06,M07 M02,M05 M14,13 M05,M15 Gambar III.99 semantik operator 4. Jaringan semantic pemilik Admin C01 C02 C04 C05 C03 M01, M02,M03,M04,M05,M09,M10 .M11 Gambar III.100 semantik Admin III.5.3.8 Perancangan Prosedural Algoritma Sebagai langkah terakhir dalam perancangan yaitu merancang prosedural yang akan diimplementasikan ke dalam sistem. Prosedur ini akan digunakan sebagai algoritma dasar dalam mengkodekan prosedur yang ada. Adapun perancangan prosedural untuk pembangunan aplikasi e-commerce yang akan dibangun adalah sebagai berikut :

a. Prosedur Login