Perancangan Antarmuka Pengunjung dan Member

4 Perancangan Antarmuka Menu Kontak T04 Header Pencarian Home Keranjang Belanja Facebook Footer Produk Register Kontak About Image Produk diskon Coustemer Service MANDIRI PAYPAL Tracking JNE Pembyaran · Klik Home meuju T01 · Klik Produk menuju T02 · Klik Register menuju T03 · Klik Kontak menuju T04 · Klik About menuju T05 · Klik Cara pembayarant menuju T06 · Klik Syarat Kondisi menuju T07 Ukuran layar : default 1017 x 800 px Font size : Arial Cara pembayaran Syarat Konisi Menu kategori Twitter Login Hubungi Kami Captcha Kirim Nama Email Komentar Kode Captcha Gambar 3.30 Perancangan Antarmuka Menu Kontak 5 Perancangan Antarmuka Menu About T05 Header Pencarian Home Keranjang Belanja Facebook Footer Produk Register Kontak About Image Produk diskon Coustemer Service MANDIRI PAYPAL Tracking JNE Pembyaran · Klik Home meuju T01 · Klik Produk menuju T02 · Klik Register menuju T03 · Klik Kontak menuju T04 · Klik About menuju T05 · Klik Cara pembayarant menuju T06 · Klik Syarat Kondisi menuju T07 Ukuran layar : default 1017 x 800 px Font size : Arial Cara pembayaran Syarat Konisi Menu kategori Twitter Login Tentang Yafie Clothing Gambar 3.31 Perancangan Antarmuka Menu About 6 Perancangan Antarmuka Menu Cara Pembayaran T06 Header Pencarian Home Keranjang Belanja Facebook Footer Produk Register Kontak About MANDIRI Paypal Cara Pembayaran Image Produk diskon Coustemer Service MANDIRI PAYPAL Tracking JNE Pembyaran · Klik Home meuju T01 · Klik Produk menuju T02 · Klik Register menuju T03 · Klik Kontak menuju T04 · Klik About menuju T05 · Klik Cara pembayarant menuju T06 · Klik Syarat Kondisi menuju T07 Ukuran layar : default 1017 x 800 px Font size : Arial Cara pembayaran Syarat Konisi Menu kategori Twitter Login Gambar 3.32 Perancangan Antarmuka Menu Cara Pembayaran 7 Perancangan Antarmuka Menu Syarat Kondisi T07 Header Pencarian Home Keranjang Belanja Facebook Footer Produk Register Kontak About Syarat Kondisi Image Produk diskon Coustemer Service MANDIRI PAYPAL Tracking JNE Pembyaran · Klik Home meuju T01 · Klik Produk menuju T02 · Klik Register menuju T03 · Klik Kontak menuju T04 · Klik About menuju T05 · Klik Cara pembayarant menuju T06 · Klik Syarat Kondisi menuju T07 Ukuran layar : default 1017 x 800 px Font size : Arial Cara pembayaran Syarat Konisi Menu kategori Twitter Login Gambar 3.33 Perancangan Antarmuka Menu Syarat Kondisi 8 Perancangan Antarmuka Home Member T08 Header Pencarian Home Keranjang Belanja Facebook Footer Produk History retur Member Kontak Image Produk diskon Coustemer Service Tracking JNE · Klik Home meuju T01 · Klik Produk menuju T02 · Klik Register menuju T03 · Klik Kontak menuju T04 · Klik About menuju T05 · Klik Cara pembayarant menuju T06 · Klik Syarat Kondisi menuju T07 Ukuran layar : default 1017 x 800 px Font size : Arial Cara pembayaran Syarat Konisi Twitter Retur About Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Tampilan produk terbaru Menu Member Imag e Imag e Imag e Imag e Gambar 3.34 Perancangan Antarmuka Home Member 9 Perancangan Antarmuka Detail Produk T09 Header Pencarian Home Keranjang Belanja Facebook Footer Produk History retur Member Kontak Image Produk diskon Coustemer Service Tracking JNE · Klik Home meuju T01 · Klik Produk menuju T02 · Klik Register menuju T03 · Klik Kontak menuju T04 · Klik About menuju T05 · Klik Cara pembayarant menuju T06 · Klik Syarat Kondisi menuju T07 Ukuran layar : default 1017 x 800 px Font size : Arial Cara pembayaran Syarat Konisi Twitter Retur About Image Beli Id Produk Kategori Harga Diskon Ukuran Stok Qty F T Image Image Image Produk Sejenisnya Menu Member Imag e Imag e Imag e Imag e Gambar 3.35 Perancangan Antarmuka Detail Produk 10 Perancangan Antarmuka Edit Profil T10 Header Pencarian Home Keranjang Belanja Facebook Footer Produk History retur Member Kontak Image Produk diskon Coustemer Service Tracking JNE · Klik Home meuju T01 · Klik Produk menuju T02 · Klik Register menuju T03 · Klik Kontak menuju T04 · Klik About menuju T05 · Klik Cara pembayarant menuju T06 · Klik Syarat Kondisi menuju T07 Ukuran layar : default 1017 x 800 px Font size : Arial Cara pembayaran Syarat Konisi Twitter Retur About Simpan Ubah Data Member Nama Provinsi Kota Alamat Email Telepon Batal Kode Pos Konfirmasi Password Baru Password Baru Password Lama Menu Member Imag e Imag e Imag e Imag e Gambar 3.36 perancangan Antarmuka Edit Profil 11 Perancangan Antarmuka Menu Data History Pembelian T11 Header Pencarian Home Keranjang Belanja Facebook Footer Produk History retur Member Kontak Image Produk diskon Coustemer Service Tracking JNE · Klik Home meuju T01 · Klik Produk menuju T02 · Klik Register menuju T03 · Klik Kontak menuju T04 · Klik About menuju T05 · Klik Cara pembayarant menuju T06 · Klik Syarat Kondisi menuju T07 Ukuran layar : default 1017 x 800 px Font size : Arial Cara pembayaran Syarat Konisi Twitter Retur About History Pembelian Id_pembelian Tanggal Total bayar Status Detail Menu Member Ima ge Ima ge Ima ge Ima ge Gambar 3.37 perancangan Antarmuka Menu Data History Pembelian 12 Perancangan Antarmuka Menu Keranjang Belanja T12 Header Pencarian Home Keranjang Belanja Facebook Footer Produk History retur Member Kontak Image Produk diskon Coustemer Service Tracking JNE · Klik Home meuju T01 · Klik Produk menuju T02 · Klik Register menuju T03 · Klik Kontak menuju T04 · Klik About menuju T05 · Klik Cara pembayarant menuju T06 · Klik Syarat Kondisi menuju T07 Ukuran layar : default 1017 x 800 px Font size : Arial Cara pembayaran Syarat Konisi Twitter Retur About Kerangjang Belanja ID | Nama | Size | Harga | Diskon | DiskonRp | Berat | QTY | Total | Action | Subtotal Belanja Lagi Checkout Menu Member Ima ge Ima ge Ima ge Ima ge Gambar 3.38 perancangan Antarmuka Menu Keranjang Belanja 13 Perancangan Antarmuka Form Pengiriman T13 Header Pencarian Home Keranjang Belanja Facebook Footer Produk History retur Member Kontak Image Produk diskon Coustemer Service Tracking JNE · Klik Home meuju T01 · Klik Produk menuju T02 · Klik Register menuju T03 · Klik Kontak menuju T04 · Klik About menuju T05 · Klik Cara pembayarant menuju T06 · Klik Syarat Kondisi menuju T07 Ukuran layar : default 1017 x 800 px Font size : Arial Cara pembayaran Syarat Konisi Twitter Retur About Form Pengiriman Menu Member Ima ge Ima ge Ima ge Ima ge Gunakan Data akun Tulis Baru Nama Penerima Alamat No Telepon Kodepos Provinsi Kota Jasa Pengiriman Jenis Pengiriman OK text Gambar 3.39 Perancangan Antarmuka Form Pengiriman 14 Perancangan Antarmuka Form Pembayaran T14 Header Pencarian Home Keranjang Belanja Facebook Footer Produk History retur Member Kontak Image Produk diskon Coustemer Service Tracking JNE · Klik Home meuju T01 · Klik Produk menuju T02 · Klik Register menuju T03 · Klik Kontak menuju T04 · Klik About menuju T05 · Klik Cara pembayarant menuju T06 · Klik Syarat Kondisi menuju T07 Ukuran layar : default 1017 x 800 px Font size : Arial Cara pembayaran Syarat Konisi Twitter Retur About Form Pembayaran ID Pembelian : Member : E-Mail : Alamat : Detail Pengiriman Menu Member Ima ge Ima ge Ima ge Ima ge Id produk | Nama | Size | Harga | Diskon | DiskonRp. | Berat | QTY | Total Selesai Batal Gambar 3.40 perancangan Antarmuka Form Pembayaran 15 Perancangan Antarmuka Form LoginAdmin Footer Retur Buku Tamu Ukuran layar : default 1017 x 800 px Font size : Arial · Klik home menuju T12 · Klik data master, produk mnuju T13 · Tambah produk menuju T14 · Edit produk menuju T15 · Detail produk menuju T16 · Tambah detail produk menuju T17 · Transaksi menuju T18 · Berita menuju T19 · Kontak menuju T20 · Laporan Produk menuju T21 · Laporan Transaksi menuju T22 A01 Username Password Login Administrator Gambar 3.41 Perancangan Antarmuka Form Login Admin 16 Perancangan Antarmuka Home Admin T17 Halaman Admin Header Home Footer Data master Transaski Retur Buku Tamu Laporan Logout Ukuran layar : default 1017 x 800 px Font size : Arial · Klik home menuju T12 · Klik data master, produk mnuju T13 · Tambah produk menuju T14 · Edit produk menuju T15 · Detail produk menuju T16 · Tambah detail produk menuju T17 · Transaksi menuju T18 · Berita menuju T19 · Kontak menuju T20 · Laporan Produk menuju T21 · Laporan Transaksi menuju T22 A02 Back Up Restore Gambar 3.42 Perancangan Antarmuka Home Admin 17 Perancangan Antarmuka Menu Data Master T17 Selamat datang admin Header Admin Footer Kategori Produk Member Provinsi Ongkos Kirim kembali Ukuran layar : default 1017 x 800 px Font size : Arial · Klik home menuju T12 · Klik data master, produk mnuju T13 · Tambah produk menuju T14 · Edit produk menuju T15 · Detail produk menuju T16 · Tambah detail produk menuju T17 · Transaksi menuju T18 · Berita menuju T19 · Kontak menuju T20 · Laporan Produk menuju T21 · Laporan Transaksi menuju T22 A03 Kota Jasa Kirim Gambar 3.43 Perancangan Antarmuka Menu Data Master 18 Perancangan Antarmuka Menu Transaksi T17 Header Admin Footer Data Master transaksi Retur Buku Tamu Laporan Logout Ukuran layar : default 1017 x 800 px Font size : Arial · Klik home menuju T12 · Klik data master, produk mnuju T13 · Tambah produk menuju T14 · Edit produk menuju T15 · Detail produk menuju T16 · Tambah detail produk menuju T17 · Transaksi menuju T18 · Berita menuju T19 · Kontak menuju T20 · Laporan Produk menuju T21 · Laporan Transaksi menuju T22 A04 Backup Restore Manajemen Transaksi Pembelian No. | ID Pembelian | Tanggal Beli | Id Member | Nama Member | Alamat Pengiriman | Jenis Pembayaran | Total Bayar | Status | Pilihan Gambar 3.44 Perancangan Antarmuka Menu Transaksi 19 Perancangan Antarmuka Menu Kategori T17 Header Admin Footer Kategori Produk Member Provinsi Ongkos Kirim kembali Ukuran layar : default 1017 x 800 px Font size : Arial · Klik home menuju T12 · Klik data master, produk mnuju T13 · Tambah produk menuju T14 · Edit produk menuju T15 · Detail produk menuju T16 · Tambah detail produk menuju T17 · Transaksi menuju T18 · Berita menuju T19 · Kontak menuju T20 · Laporan Produk menuju T21 · Laporan Transaksi menuju T22 A05 Kota Jasa Kirim No. | Nama Kategori | Pilihan Tambah Kategori Gambar 3.45 Perancangan Antarmuka Menu Kategori 20 Perancangan Antarmuka Menu Manajemen Produk Header Admin Footer Kategori Produk Member Provinsi Ongkos Kirim kembali Ukuran layar : default 1017 x 800 px Font size : Arial · Klik home menuju T12 · Klik data master, produk mnuju T13 · Tambah produk menuju T14 · Edit produk menuju T15 · Detail produk menuju T16 · Tambah detail produk menuju T17 · Transaksi menuju T18 · Berita menuju T19 · Kontak menuju T20 · Laporan Produk menuju T21 · Laporan Transaksi menuju T22 A06 Kota Jasa Kirim No. | Id Produk | Nama Produk | Harga | Kategori | Pilihan Tambah Produk Gambar Pencarian Cari Gambar 3.46 Perancangan Antarmuka Menu Manajemen Produk 21 Perancangan Antarmuka Menu Manajemen Member Header Admin Footer Kategori Produk Member Provinsi Ongkos Kirim kembali Ukuran layar : default 1017 x 800 px Font size : Arial · Klik home menuju T12 · Klik data master, produk mnuju T13 · Tambah produk menuju T14 · Edit produk menuju T15 · Detail produk menuju T16 · Tambah detail produk menuju T17 · Transaksi menuju T18 · Berita menuju T19 · Kontak menuju T20 · Laporan Produk menuju T21 · Laporan Transaksi menuju T22 A07 Kota Jasa Kirim No. | Nama | Kota | Telepon | Email | Status | Pilihan Tambah Member Gambar 3.47 Perancangan Antarmuka Menu Kategori 22 Perancangan Antarmuka Menu Manajemen Provinsi Header Admin Footer Kategori Produk Member Provinsi Ongkos Kirim kembali Ukuran layar : default 1017 x 800 px Font size : Arial · Klik home menuju T12 · Klik data master, produk mnuju T13 · Tambah produk menuju T14 · Edit produk menuju T15 · Detail produk menuju T16 · Tambah detail produk menuju T17 · Transaksi menuju T18 · Berita menuju T19 · Kontak menuju T20 · Laporan Produk menuju T21 · Laporan Transaksi menuju T22 A08 Kota Jasa Kirim No. | Provinsi | Pilihan Tambah Provinsi Pencarian Cari Manajemen Provinsi Gambar 3.48 Perancangan Antarmuka Menu Manajemen Produk 23 Perancangan Antarmuka Menu Manajemen Kota Header Admin Footer Kategori Produk Member Provinsi Ongkos Kirim kembali Ukuran layar : default 1017 x 800 px Font size : Arial · Klik home menuju T12 · Klik data master, produk mnuju T13 · Tambah produk menuju T14 · Edit produk menuju T15 · Detail produk menuju T16 · Tambah detail produk menuju T17 · Transaksi menuju T18 · Berita menuju T19 · Kontak menuju T20 · Laporan Produk menuju T21 · Laporan Transaksi menuju T22 A09 Kota Jasa Kirim No. | Kota | Provinsi | Pilihan Tambah Kota Pencarian Cari Manajemen Kota Gambar 3.49 Perancangan Antarmuka Menu Manajemen Kota 24 Perancangan Antarmuka Menu Manajemen Jasa Kirim Header Admin Footer Kategori Produk Member Provinsi Ongkos Kirim kembali Ukuran layar : default 1017 x 800 px Font size : Arial · Klik home menuju T12 · Klik data master, produk mnuju T13 · Tambah produk menuju T14 · Edit produk menuju T15 · Detail produk menuju T16 · Tambah detail produk menuju T17 · Transaksi menuju T18 · Berita menuju T19 · Kontak menuju T20 · Laporan Produk menuju T21 · Laporan Transaksi menuju T22 A10 Kota Jasa Kirim No. Nama Jasa Kirim | Deskripsi | Pilihan Tambah Jasa Kirim Manajemen Jasa Kirim Gambar 3.50 Perancangan Antarmuka Menu Manajemen Jasa Kirim 25 Perancangan Antarmuka Menu Manajemen Ongkos Kirim Header Admin Footer Kategori Produk Member Provinsi Ongkos Kirim kembali Ukuran layar : default 1017 x 800 px Font size : Arial · Klik home menuju T12 · Klik data master, produk mnuju T13 · Tambah produk menuju T14 · Edit produk menuju T15 · Detail produk menuju T16 · Tambah detail produk menuju T17 · Transaksi menuju T18 · Berita menuju T19 · Kontak menuju T20 · Laporan Produk menuju T21 · Laporan Transaksi menuju T22 A11 Kota Jasa Kirim No. | Kota | Provinsi | Pengiriman | Ongkos Kirim | Pilihan Tambah Ongkos Kirim Manajemen Ongkos Kirim Pencarian Cari Gambar 3.51 Perancangan Antarmuka Menu Manajemen Ongkos Kirim 26 Perancangan Antarmuka Menu Retur T17 Header Admin Footer Data Master transaksi Retur Buku Tamu Laporan Logout Ukuran layar : default 1017 x 800 px Font size : Arial · Klik home menuju T12 · Klik data master, produk mnuju T13 · Tambah produk menuju T14 · Edit produk menuju T15 · Detail produk menuju T16 · Tambah detail produk menuju T17 · Transaksi menuju T18 · Berita menuju T19 · Kontak menuju T20 · Laporan Produk menuju T21 · Laporan Transaksi menuju T22 A12 Backup Restore Retur Pembelian No. | ID Retur | ID Pembelian | ID Member | TGL KIRIM | No Resi Kirim | TGL Retur | No Resi Retur | Status | Pilihan Gambar 3.52 Perancangan Antarmuka Menu Retur 27 Perancangan Antarmuka Menu Buku Tamu T17 Header Admin Footer Data Master transaksi Retur Buku Tamu Laporan Logout Ukuran layar : default 1017 x 800 px Font size : Arial · Klik home menuju T12 · Klik data master, produk mnuju T13 · Tambah produk menuju T14 · Edit produk menuju T15 · Detail produk menuju T16 · Tambah detail produk menuju T17 · Transaksi menuju T18 · Berita menuju T19 · Kontak menuju T20 · Laporan Produk menuju T21 · Laporan Transaksi menuju T22 A13 Backup Restore Manajemen Buku Tamu No. | Nama | Email | Tanggal | Pilihan Gambar 3.53 Perancangan Antarmuka Menu Retur 28 Perancangan Antarmuka Menu Backup T17 Header Admin Footer Data Master transaksi Retur Buku Tamu Laporan Logout Ukuran layar : default 1017 x 800 px Font size : Arial · Klik home menuju T12 · Klik data master, produk mnuju T13 · Tambah produk menuju T14 · Edit produk menuju T15 · Detail produk menuju T16 · Tambah detail produk menuju T17 · Transaksi menuju T18 · Berita menuju T19 · Kontak menuju T20 · Laporan Produk menuju T21 · Laporan Transaksi menuju T22 A14 Backup Restore Backup Database Gambar Produk File System Klik Untuk Memulai Backup Database Backup Database Klik Untuk Memulai Backup Gambar Produk Backup Gambar Klik Untuk Memulai Backup File System Backup File System Gambar 3.54 Perancangan Antarmuka Menu Backup 29 Perancangan Antarmuka Menu Restore T17 Header Admin Footer Data Master transaksi Retur Buku Tamu Laporan Logout Ukuran layar : default 1017 x 800 px Font size : Arial · Klik home menuju T12 · Klik data master, produk mnuju T13 · Tambah produk menuju T14 · Edit produk menuju T15 · Detail produk menuju T16 · Tambah detail produk menuju T17 · Transaksi menuju T18 · Berita menuju T19 · Kontak menuju T20 · Laporan Produk menuju T21 · Laporan Transaksi menuju T22 A15 Backup Restore Restore Database Gambar Produk File System Klik Untuk Memulai Restore Database Restore Database Klik Untuk Memulai Restore Gambar Produk Restore Gambar Klik Untuk Memulai Restore File System Restore File System Gambar 3.55 Perancangan Antarmuka Menu Restore 30 Perancangan Antarmuka Menu Laporan T17 Header Admin Footer Data Master transaksi Retur Buku Tamu Laporan Logout Ukuran layar : default 1017 x 800 px Font size : Arial · Klik home menuju T12 · Klik data master, produk mnuju T13 · Tambah produk menuju T14 · Edit produk menuju T15 · Detail produk menuju T16 · Tambah detail produk menuju T17 · Transaksi menuju T18 · Berita menuju T19 · Kontak menuju T20 · Laporan Produk menuju T21 · Laporan Transaksi menuju T22 A16 Backup Restore Laporan Produk Penjualan Retur Barang Gambar 3.56 Perancangan Antarmuka Menu Laporan

2. Perancangan Pesan

Pada gambar dibawah ini merupakan perancangan pesan yang terdapat pada aplikasi e-commerce di toko Yafie Clothing. Adapun tampilan pesan yang ada adalah sebagai berikut :

1. Pesan Kesalahan Login Member

Maaf, Akun Tidak Ditemukan Masukan Email dan password dengan benar M01 Gambar 3.57 Perancangan Antarmuka Pesan Kesalahan Login Member

2. Pesan Kesalahan Ketika Proses Pendaftaran Belum Lengkap

Nama Harus Diisi Alamat Harus Diisi Telp Harus Diisi Angka Email Harus Diisi Password Harus Lebih Dari 5 Karakter Kodepos Harus Diisi Angka Kode Captcha Salah M02 Gambar 3.58 Perancangan Antarmuka Pesan Proses Pendaftaran

3.3.3 Jaringan Semantik 1. Jaringan Semantik Pengunjung

T01 T02 T07 T06 T05 T03 T04 M 1 M 2 Gambar 3.59 Jaringan Semantik Pengunjung

2. Jaringan Semantik Member

T08 T02 T04 T09 T06 T05 T12 T13 T14 T07 T10 T11 T14 Gambar 3.60 Jaringan Semantik Member

3. Jaringan Semantik Admin

A02 A03 A08 A07 A11 A09 A12 A13 A14 A04 A15 A16 A01 A06 A10 A05 Gambar 3.61 Jaringan Semantik Admin