C. Consumen to Business(C2B)
3.2. Perancangan Sistem
3.3.1. Perancangan Antarmuka
3.3.1.4. Perancangan Antarmuka Member
Dibawah ini adalah perancangan antarmuka untuk halaman member.
1. Tampilan Login
Ukuran Layar: 1280 x 800 Font : Tahoma, Arial, sans-serif Background : Biru
HEADER
Login Registrasi
Home About Us Contact Us Order Payment Retur
Login M01 Email Password Login Lupa Password Email Kirim Gambar
Klik Home maka akan menuju ke M02 Klik About Us maka akan menuju ke M03 Klik Contact Us maka akan menunggu ke M04
Klik Order maka akan menuju keM05 Klik payment maka akan menuju ke M06 Klik retur maka akan menuju ke M07 Klik Login maka akan menuju ke M02 Klik register maka akan menuju ke G08 Klik Kirim maka akan mengirimkan data password ke alamat email Jika pasword dan email tidak cocok akan muncul pesan PS-01
Gambar 3.92. Tampilan Login
2. Tampilan Home
Ukuran Layar: 1280 x 800
Font : Tahoma, Arial, sans-serif Background : Biru
HEADER
Login Registrasi
Home About Us Contact Us Order Payment Retur
Produk M02 Keranjang Belanja Kategori Produk Akun Saya Nama member Edit Profil Konfirmasi Pembayaran Ganti Password Tulis Testimonial
Klik Home maka akan menuju ke M02 Klik About Us maka akan menuju ke M03 Klik Contact Us maka akan menunggu ke M04
Klik Order maka akan menuju keM05 Klik payment maka akan menuju ke M06 Klik retur maka akan menuju ke M07 Klik Login maka akan menuju ke M02 Klik register maka akan menuju ke G08 Klik Kirim maka akan mengirimkan data password ke alamat email Klik edit profil maka akan menuju ke M15 Klik Konfirmasi Pembayaran maka menuju ke M18
Klik tulis testimonial maka akan menuju ke M17
Klik ganti password maka akan menuju ke M16
3. Tampilan About Us
Ukuran Layar: 1280 x 800
Font : Tahoma, Arial, sans-serif Background : Biru
HEADER
Login Registrasi
Home About Us Contact Us Order Payment Retur
Keranjang Belanja Kategori Produk Profil Perusahaan M03 Akun Saya Nama member Edit Profil Konfirmasi Pembayaran Ganti Password Tulis Testimonial
Klik Home maka akan menuju ke M02 Klik About Us maka akan menuju ke M03 Klik Contact Us maka akan menunggu ke M04
Klik Order maka akan menuju keM05 Klik payment maka akan menuju ke M06 Klik retur maka akan menuju ke M07 Klik Login maka akan menuju ke M02 Klik register maka akan menuju ke G08 Klik Kirim maka akan mengirimkan data password ke alamat email Klik edit profil maka akan menuju ke M15 Klik Konfirmasi Pembayaran maka menuju ke M18
Klik tulis testimonial maka akan menuju ke M17
Klik ganti password maka akan menuju ke M16
Gambar 3.94. Tampilan About Us
4. Tampilan Contact Us
Ukuran Layar: 1280 x 800
Font : Tahoma, Arial, sans-serif Background : Biru
HEADER
Login Registrasi
Home About Us Contact Us Order Payment Retur
Keranjang Belanja Hubungi Kami M04 Kategori Produk Akun Saya Nama member Edit Profil Konfirmasi Pembayaran Ganti Password Tulis Testimonial
Klik Home maka akan menuju ke M02 Klik About Us maka akan menuju ke M03 Klik Contact Us maka akan menunggu ke M04
Klik Order maka akan menuju keM05 Klik payment maka akan menuju ke M06 Klik retur maka akan menuju ke M07 Klik Login maka akan menuju ke M02 Klik register maka akan menuju ke G08 Klik Kirim maka akan mengirimkan data password ke alamat email Klik edit profil maka akan menuju ke M15 Klik Konfirmasi Pembayaran maka menuju ke M18
Klik tulis testimonial maka akan menuju ke M17
Klik ganti password maka akan menuju ke M16
5. Tampilan Order
Ukuran Layar: 1280 x 800
Font : Tahoma, Arial, sans-serif Background : Biru
HEADER
Login Registrasi
Home About Us Contact Us Order Payment Retur
Keranjang Belanja Cara Pemesanan M05 Kategori Produk Akun Saya Nama member Edit Profil Konfirmasi Pembayaran Ganti Password Tulis Testimonial
Klik Home maka akan menuju ke M02 Klik About Us maka akan menuju ke M03 Klik Contact Us maka akan menunggu ke M04
Klik Order maka akan menuju keM05 Klik payment maka akan menuju ke M06 Klik retur maka akan menuju ke M07 Klik Login maka akan menuju ke M02 Klik register maka akan menuju ke G08 Klik Kirim maka akan mengirimkan data password ke alamat email Klik edit profil maka akan menuju ke M15 Klik Konfirmasi Pembayaran maka menuju ke M18
Klik tulis testimonial maka akan menuju ke M17
Klik ganti password maka akan menuju ke M16
Gambar 3.96. Tampilan Order
6. Tampilan Payment
Ukuran Layar: 1280 x 800
Font : Tahoma, Arial, sans-serif Background : Biru
HEADER
Login Registrasi
Home About Us Contact Us Order Payment Retur
Keranjang Belanja Cara Pembayaran M06 Kategori Produk Akun Saya Nama member Edit Profil Konfirmasi Pembayaran Ganti Password Tulis Testimonial
Klik Home maka akan menuju ke M02 Klik About Us maka akan menuju ke M03 Klik Contact Us maka akan menunggu ke M04
Klik Order maka akan menuju keM05 Klik payment maka akan menuju ke M06 Klik retur maka akan menuju ke M07 Klik Login maka akan menuju ke M02 Klik register maka akan menuju ke G08 Klik Kirim maka akan mengirimkan data password ke alamat email Klik edit profil maka akan menuju ke M15 Klik Konfirmasi Pembayaran maka menuju ke M18
Klik tulis testimonial maka akan menuju ke M17
Klik ganti password maka akan menuju ke M16
7. Tampilan Retur
Ukuran Layar: 1280 x 800
Font : Tahoma, Arial, sans-serif Background : Biru
HEADER
Login Registrasi
Home About Us Contact Us Order Payment Retur
Keranjang Belanja Cara retur M07 Kategori Produk Akun Saya Nama member Edit Profil Konfirmasi Pembayaran Ganti Password Tulis Testimonial
Klik Home maka akan menuju ke M02 Klik About Us maka akan menuju ke M03 Klik Contact Us maka akan menunggu ke M04
Klik Order maka akan menuju keM05 Klik payment maka akan menuju ke M06 Klik retur maka akan menuju ke M07 Klik Login maka akan menuju ke M02 Klik register maka akan menuju ke G08 Klik Kirim maka akan mengirimkan data password ke alamat email Klik edit profil maka akan menuju ke M15 Klik Konfirmasi Pembayaran maka menuju ke M18
Klik tulis testimonial maka akan menuju ke M17
Klik ganti password maka akan menuju ke M16
Gambar 3.98. Tampilan Retur
8. Tampilan Detail Produk
Ukuran Layar: 1280 x 800
Font : Tahoma, Arial, sans-serif Background : Biru
HEADER
Login Registrasi
Home About Us Contact Us Order Payment Retur
Keranjang Belanja M08 Gambar Nama Produk Kategori : Berat : Diskon :
Ukuran Harga Stok
Pilih Ukuran Beli Rating Keterangan Produk Testimonial Kategori Produk Akun Saya Nama member Edit Profil Konfirmasi Pembayaran Ganti Password Tulis Testimonial
Klik Home maka akan menuju ke M02 Klik About Us maka akan menuju ke M03 Klik Contact Us maka akan menunggu ke M04
Klik Order maka akan menuju keM05 Klik payment maka akan menuju ke M06 Klik retur maka akan menuju ke M07 Klik Login maka akan menuju ke M02 Klik register maka akan menuju ke G08 Klik Kirim maka akan mengirimkan data password ke alamat email Klik edit profil maka akan menuju ke M15 Klik Konfirmasi Pembayaran maka menuju ke M18
Klik tulis testimonial maka akan menuju ke M17
Klik ganti password maka akan menuju ke M16
Klik beli maka akan menuju ke M09 Jika ukuran tidak d pilih akan muncul pesan PS-07
9. Tampilan Keranjang pesan
Ukuran Layar: 1280 x 800
Font : Tahoma, Arial, sans-serif Background : Biru
HEADER
Login Registrasi
Home About Us Contact Us Order Payment Retur M09
No Kategori Nama Produk Ukuran Stok Berat Jumlah Diskon Subtotal Hapus
Total Keterangan
Kembali Berbelanja Update Berbelanja Checkout
Klik Home maka akan menuju ke M02 Klik About Us maka akan menuju ke M03 Klik Contact Us maka akan menunggu ke M04
Klik Order maka akan menuju keM05 Klik payment maka akan menuju ke M06 Klik retur maka akan menuju ke M07 Klik Login maka akan menuju ke M02 Klik register maka akan menuju ke G08 Klik Kirim maka akan mengirimkan data password ke alamat email Klik edit profil maka akan menuju ke M15 Klik Konfirmasi Pembayaran maka menuju ke M18
Klik tulis testimonial maka akan menuju ke M17
Klik ganti password maka akan menuju ke M16
Klik kembali berbelanja maka akan menuju ke M08
Kik update berbelanja maka akan mengupdate keranjang belanja Klik checkout maka akan menuju ke M10
Gambar 3.100. Tampilan Keranjang pesan
10.Tampilan Pengisian Alamat
Ukuran Layar: 1280 x 800
Font : Tahoma, Arial, sans-serif Background : Biru
HEADER
Login Registrasi
Home About Us Contact Us Order Payment Retur M10 Nama Penerima Provinsi Kota Alamat Penerima Telepon Paket Kiriman Jenis Paket Pengiriman
Kembali Lanjutkan
Klik Home maka akan menuju ke M02 Klik About Us maka akan menuju ke M03 Klik Contact Us maka akan menunggu ke M04 Klik Order maka akan menuju keM05 Klik payment maka akan menuju ke M06 Klik retur maka akan menuju ke M07 Klik Login maka akan menuju ke M02 Klik register maka akan menuju ke G08 Klik Kirim maka akan mengirimkan data password ke alamat email Klik edit profil maka akan menuju ke M15 Klik Konfirmasi Pembayaran maka menuju ke M18
Klik tulis testimonial maka akan menuju ke M17
Klik ganti password maka akan menuju ke M16 Klik kembali maka akan menuju ke M09 Klik lanjutkan maka akann menuju ke M11 Jika pilihan tidak dipilih akan muncul pesan PS-19
Jika paket kiriman tidak di isi akan muncul pesan PS-21
Jika alamat kirim tidak di isi akan muncul pesan PS-22
Jika kota tidak dipilih akan muncul PS-23 Jika provinsi tidak dipilih akan muncul PS-24 Jika telepon tidak diisi akan muncul pesan PS-25
Jika kode pos tidak diisi akan muncul pesan PS-26
11.Tampilan Konfirmasi Alamat Pengiriman
Ukuran Layar: 1280 x 800
Font : Tahoma, Arial, sans-serif Background : Biru
HEADER
Login Registrasi
Home About Us Contact Us Order Payment Retur M11
No Kategori Nama Produk Ukuran Stok Berat Jumlah Diskon Subtotal Hapus
Total
Kembali
Berat Total 5 gram = 1 kg Biaya Pengiriman ( 8100 x Berat Total Total Pembayaran Alamat Penerima
Selesai
Klik Home maka akan menuju ke M02 Klik About Us maka akan menuju ke M03 Klik Contact Us maka akan menunggu ke M04
Klik Order maka akan menuju keM05 Klik payment maka akan menuju ke M06 Klik retur maka akan menuju ke M07 Klik Login maka akan menuju ke M02 Klik register maka akan menuju ke G08 Klik Kirim maka akan mengirimkan data password ke alamat email Klik edit profil maka akan menuju ke M15 Klik Konfirmasi Pembayaran maka menuju ke M18
Klik tulis testimonial maka akan menuju ke M17
Klik ganti password maka akan menuju ke M16
Klik kembali maka akan menuju ke M10 Klik selesai maka akan menuju ke M12
Gambar 3.102. Tampilan Konfirmasi Alamat Pengiriman
12.Tampilan Selesai Belanja
Ukuran Layar: 1280 x 800
Font : Tahoma, Arial, sans-serif Background : Biru
HEADER
Login Registrasi
Home About Us Contact Us Order Payment Retur M12 Keranjang Belanja Kategori Produk Akun Saya Nama member Edit Profil Konfirmasi Pembayaran Ganti Password Tulis Testimonial Selesai Belanja
Cetak/ unduh invoice Paypal
Pembayaran Transfer Bank
Bank Bank
Detail pemesanan
Klik Home maka akan menuju ke M02 Klik About Us maka akan menuju ke M03 Klik Contact Us maka akan menunggu ke M04
Klik Order maka akan menuju keM05 Klik payment maka akan menuju ke M06 Klik retur maka akan menuju ke M07 Klik Login maka akan menuju ke M02 Klik register maka akan menuju ke G08 Klik Kirim maka akan mengirimkan data password ke alamat email Klik edit profil maka akan menuju ke M15 Klik Konfirmasi Pembayaran maka menuju ke M18
Klik tulis testimonial maka akan menuju ke M17
Klik ganti password maka akan menuju ke M16
Klik cetak/unduh invoice akan mencetak invoice
Klik detail pemesanan maka akan menuju ke M13
13.Tampilan Detail Pemesanan
Ukuran Layar: 1280 x 800
Font : Tahoma, Arial, sans-serif Background : Biru
HEADER
Login Registrasi
Home About Us Contact Us Order Payment Retur M13 Keranjang Belanja Kategori Produk Akun Saya Nama member Edit Profil Konfirmasi Pembayaran Ganti Password Tulis Testimonial Detail Pemesanan Data Pemesanan Data Pembayaran Alamat Pengriman Data Produk
Paypal Konfirmasi via Transfer
Klik Home maka akan menuju ke M02 Klik About Us maka akan menuju ke M03 Klik Contact Us maka akan menunggu ke M04
Klik Order maka akan menuju keM05 Klik payment maka akan menuju ke M06 Klik retur maka akan menuju ke M07 Klik Login maka akan menuju ke M02 Klik register maka akan menuju ke G08 Klik Kirim maka akan mengirimkan data password ke alamat email Klik edit profil maka akan menuju ke M15 Klik Konfirmasi Pembayaran maka menuju ke M18
Klik tulis testimonial maka akan menuju ke M17
Klik ganti password maka akan menuju ke M16
Klik konfirmasi via transfer maka akan menuju ke M14
Gambar 3.104. Tampilan Detail Pemesanan
14.Tampilan Konfirmasi
Ukuran Layar: 1280 x 800
Font : Tahoma, Arial, sans-serif Background : Biru
HEADER
Login Registrasi
Home About Us Contact Us Order Payment Retur M14 Keranjang Belanja Kategori Produk Akun Saya Nama member Edit Profil Konfirmasi Pembayaran Ganti Password Tulis Testimonial Detail Pemesanan Konfirmasi No. Pemesanan Total Pembayaran Tanggal Bayar Bank Tujuan Bank Asal Atas Nama Jumlah Pembayaran
Klik Home maka akan menuju ke M02 Klik About Us maka akan menuju ke M03 Klik Contact Us maka akan menunggu ke M04
Klik Order maka akan menuju keM05 Klik payment maka akan menuju ke M06 Klik retur maka akan menuju ke M07 Klik Login maka akan menuju ke M02 Klik register maka akan menuju ke G08 Klik Kirim maka akan mengirimkan data password ke alamat email Klik edit profil maka akan menuju ke M15 Klik Konfirmasi Pembayaran maka menuju ke M18
Klik tulis testimonial maka akan menuju ke M17
Klik ganti password maka akan menuju ke M16
Klik konfirmasi maka akan mengupdate status pembayaran
Jika form tidak di isi akan muncul pesan PS-04
15.Tampilan Edit Profil Member
Ukuran Layar: 1280 x 800
Font : Tahoma, Arial, sans-serif Background : Biru
HEADER
Login Registrasi
Home About Us Contact Us Order Payment Retur M15 Keranjang Belanja Kategori Produk Akun Saya Nama member Edit Profil Konfirmasi Pembayaran Ganti Password Tulis Testimonial
Edit Data Akun Saya
Simpan Email Nama Lengkap Jenis Kelamin Provinsi Kota Alamat Kode Pos No. Telepon
Klik Home maka akan menuju ke M02 Klik About Us maka akan menuju ke M03 Klik Contact Us maka akan menunggu ke M04
Klik Order maka akan menuju keM05 Klik payment maka akan menuju ke M06 Klik retur maka akan menuju ke M07 Klik Login maka akan menuju ke M02 Klik register maka akan menuju ke G08 Klik Kirim maka akan mengirimkan data password ke alamat email Klik edit profil maka akan menuju ke M15 Klik Konfirmasi Pembayaran maka menuju ke M18
Klik tulis testimonial maka akan menuju ke M17
Klik ganti password maka akan menuju ke M16
Klik simpan maka data akan terupdate Jika Jika data tidak di isi akan muncul pesan PS-04
Jika pilihan tidak di pilih akan muncul pesan PS-05
Gambar 3.106. Tampilan Edit Profil Member
16.Tampilan Ganti Password
Ukuran Layar: 1280 x 800
Font : Tahoma, Arial, sans-serif Background : Biru
HEADER
Login Registrasi
Home About Us Contact Us Order Payment Retur M16 Keranjang Belanja Kategori Produk Akun Saya Nama member Edit Profil Konfirmasi Pembayaran Ganti Password Tulis Testimonial Ganti Password Simpan Password Lama Password Baru Ulangi Password Baru
Klik Home maka akan menuju ke M02 Klik About Us maka akan menuju ke M03 Klik Contact Us maka akan menunggu ke M04
Klik Order maka akan menuju keM05 Klik payment maka akan menuju ke M06 Klik retur maka akan menuju ke M07 Klik Login maka akan menuju ke M02 Klik register maka akan menuju ke G08 Klik Kirim maka akan mengirimkan data password ke alamat email Klik edit profil maka akan menuju ke M15 Klik Konfirmasi Pembayaran maka menuju ke M18
Klik tulis testimonial maka akan menuju ke M17
Klik ganti password maka akan menuju ke M16
Klik simpan maka data akan terupdate Jika data tidak diisi akan muncul pesan PS-04
Jika password tidak benar akan muncul pesan PS-17
17.Tampilan Tulis Testimonial
Ukuran Layar: 1280 x 800
Font : Tahoma, Arial, sans-serif Background : Biru
HEADER
Login Registrasi
Home About Us Contact Us Order Payment Retur M17 Keranjang Belanja Kategori Produk Akun Saya Nama member Edit Profil Konfirmasi Pembayaran Ganti Password Tulis Testimonial Tulis Testimonial Kirim
Klik Home maka akan menuju ke M02 Klik About Us maka akan menuju ke M03 Klik Contact Us maka akan menunggu ke M04
Klik Order maka akan menuju keM05 Klik payment maka akan menuju ke M06 Klik retur maka akan menuju ke M07 Klik Login maka akan menuju ke M02 Klik register maka akan menuju ke G08 Klik Kirim maka akan mengirimkan data password ke alamat email Klik edit profil maka akan menuju ke M15 Klik Konfirmasi Pembayaran maka menuju ke M18
Klik tulis testimonial maka akan menuju ke M17
Klik ganti password maka akan menuju ke M16
Klik kirim maka testimonial akan terkirim Jika data tidak diisi akan muncul pesan PS-04
Gambar 3.108. Tampilan Tulis Testimonial
18.Tampilan Konfirmasi Pembayaran
Ukuran Layar: 1280 x 800
Font : Tahoma, Arial, sans-serif Background : Biru
HEADER
Login Registrasi
Home About Us Contact Us Order Payment Retur M18 Keranjang Belanja Kategori Produk Akun Saya Nama member Edit Profil Konfirmasi Pembayaran Ganti Password Tulis Testimonial Konfirmasi Pembayaran No Tanggal Pesanan Status
Pesanan Status Bayar Aksi
Konfirmasi|Detail|Tracking
Klik Home maka akan menuju ke M02 Klik About Us maka akan menuju ke M03 Klik Contact Us maka akan menunggu ke M04
Klik Order maka akan menuju keM05 Klik payment maka akan menuju ke M06 Klik retur maka akan menuju ke M07 Klik Login maka akan menuju ke M02 Klik register maka akan menuju ke G08 Klik Kirim maka akan mengirimkan data password ke alamat email Klik edit profil maka akan menuju ke M15 Klik Konfirmasi Pembayaran maka menuju ke M18
Klik tulis testimonial maka akan menuju ke M17
Klik ganti password maka akan menuju ke M16
Klik konfirmasi maka akan menuju ke M13 Klik detail maka akan menuju ke M13 Klik tracking maka akan menuju ke halaman tracking jasa kirim
19.Perancangan Pesan
E-mail dan password tidak valid, coba lagi dengan menggunakan E-mail anda yang
lengkap PS-01
Format E-mail salah PS-02
Ulangi password tidak sama PS-03
Data harus diiisi Data harus dipilih Input captcha harus diisi
PS-04 PS-05 PS-06
Silahkan pilih ukuran PS-07
Silahkan Login jika sudah mempunyai account Silahkan Registrasi member jika belum
mempunyai account PS-08
Usename dan password tidak cocok PS-09
Pendaftaran sukses, silahkan cek emai untuk proses aktifasi account member UD CBL 91A PS-10
Stok tidak mencukupi PS-11
Data tidak ada PS-12
Jumlah pembayaran masih kurang PS-13
Yakin akan di hapus PS-14
OK Cancel
Data berhasil disimpan PS-15
Harus di isi
OK PS-16
Perubahan password gagal PS-17
Password tidak sama silahkan ulangi kembali PS-18
Harus dipilih
OK PS-19
Diupdate langsung dari Data Kurs Yahoo Finance
PS-20
Paket Kiriman Harus di isi
OK PS-21
Kode pos harus di isi
OK PS-26
Alamat kirim harus di isi
OK PS-22
Silahkan pilih kota terdekat
OK PS-23
Silahkan pilih provinsi
OK PS-24
Telepon harus di isi
OK PS-25
Gambar 3.110. Perancangan Pesan
3.3.2. Jaringan Semantik
Jaringan semantik menggambarkan keterhubungan navigasi menu dari satu halaman ke halaman lainnya. Jaringan semantik dari sistem ini adalah sebagai berikut: