ANALISIS DAN PERANCANGAN SISTEM
III.3 Perancangan Arsitektur .1 Perancangan Antar Muka
2. Perancangan Antar Muka Member
Antar muka ini adalah antar muka Login (M01)
Cara Berbelanja | Cara Pembayaran | Cara Retur | Tentang Kami Home | Shopping Chart
BANNER Register | Sign In KATALOG PRODUK DISKON LAYANAN PEMBAYARAN CONTACT US FOOTER PELANGGAN BARU
Untuk mempercepat proses belanja dimasa mendatang plus mendapatkan sejumlah tawaran menarik lainnya, Anda akan ditawari opsi untuk menjadi anggota pada proses berikutnya.
Register
ANGGOTA
Silahkan log in bagi Anda yang telah menjadi anggota !
Login Email Password
Login Lupa password M01
Cara Berbelanja | Cara Pembayaran | Cara Retur | Tentang Kami
Navigasi : -Klik Home untuk menuju ke P01 -Klik Shopping Chart untuk menuju ke P03 -Klik Cara berbelanja untuk menuju ke P06 - klik Cara pembayaran untuk menuju ke P07 -Klik Cara retur untuk menuju ke P08 -Klik Tentang kami untuk menuju ke P09 -Klik detail produk untuk menuju ke P02 -Klik register untuk menuju ke P05 -Klik Sign In untuk menuju ke P04 -Klik register untuk menuju P05 -Klik login untuk menuju ke P03 -Klik lupa password untuk menuju ke M05 Gambar III.38 Perancangan antar muka Login
104
Antar muka ini adalah antar muka Lupa Password (M02)
Lupa Password
Email :
Pertanyaan : Pilih pertanyaan
Jawaban :
Kirim M02
Gambar III.39 Perancangan Antar Muka Lupa Password
Antar muka ini adalah antar muka Home member(M03)
Home | Shopping Chart
BANNER
Selamat datang, nama member | Sign out
Cara Berbelanja | Cara Pembayaran | Cara Retur | Tentang Kami| History
KATALOG PRODUK DISKON LAYANAN PEMBAYARAN CONTACT US FOOTER cari Gambar produk Nama produk Harga Detail Gambar produk Nama produk Harga Detail Gambar produk Nama produk Harga Detail Gambar produk Nama produk Harga Detail Gambar produk Nama produk Harga Detail Gambar produk Nama produk Harga Detail M03 Navigasi :
-Klik Home untuk menuju ke M03 -Klik Shopping Chart untuk menuju ke M09 -Klik Cara Berbelanja untuk menuju ke M04 -Klik Cara
pembayaran untuk menuju ke M05 -Klik Cara Retur untuk menuju ke M06 -Klik klik Tentang Kami untuk menuju ke M07
-Klik History untuk menuju ke M13 -Klik Sign Out untuk menuju P01 -Klik detail untuk menuju ke M08
Antar muka ini adalah antar muka Cara Berbelanja (M04)
Home | Shopping Chart
BANNER
Selamat datang, nama member | Sign Out
Cara Berbelanja | Cara Pembayaran | Cara Retur | Tentang Kami | History
KATALOG PRODUK DISKON LAYANAN PEMBAYARAN CONTACT US FOOTER
Tata Cara Berbelanja disitus Antz-shop.com
M04 Navigasi :
-Klik Home untuk menuju ke M03 -Klik Shopping Chart untuk menuju ke M09 -Klik Cara Berbelanja untuk menuju ke M04 -Klik Cara
pembayaran untuk menuju ke M05 -Klik Cara Retur untuk menuju ke M06 -Klik klik Tentang Kami untuk menuju ke M07
-Klik History untuk menuju ke M13 -Klik Sign Out untuk menuju P01
Gambar III.41 Perancangan Antar Muka Cara Berbelanja
Antar muka ini adalah antar muka Cara Pembayaran (M05)
Home | Shopping Chart
BANNER
Selamat datang, nama member | Sign Out
Cara Berbelanja | Cara Pembayaran | Cara Retur | Tentang Kami | History
KATALOG PRODUK DISKON LAYANAN PEMBAYARAN CONTACT US FOOTER
Tata Cara Pembayaran disitus Antz-shop.com
M05 Navigasi :
-Klik Home untuk menuju ke M03 -Klik Shopping Chart untuk menuju ke M09 -Klik Cara Berbelanja untuk menuju ke M04 -Klik Cara
pembayaran untuk menuju ke M05 -Klik Cara Retur untuk menuju ke M06 -Klik klik Tentang Kami untuk menuju ke M07
-Klik History untuk menuju ke M13 -Klik Sign Out untuk menuju P01
106
Antar muka ini adalah antar muka Cara Retur (M06)
Home | Shopping Chart
BANNER
Selamat datang, nama member | Sign Out
Cara Berbelanja | Cara Pembayaran | Cara Retur | Tentang Kami | History
KATALOG PRODUK DISKON LAYANAN PEMBAYARAN CONTACT US FOOTER
Tata Cara Retur disitus Antz-shop.com
M06 Navigasi :
-Klik Home untuk menuju ke M03 -Klik Shopping Chart untuk menuju ke M09 -Klik Cara Berbelanja untuk menuju ke M04 -Klik Cara
pembayaran untuk menuju ke M05 -Klik Cara Retur untuk menuju ke M06 -Klik klik Tentang Kami untuk menuju ke M07
-Klik History untuk menuju ke M13 -Klik Sign Out untuk menuju P01
Gambar III.43 Perancangan Antar Muka Cara Retur
Antar muka ini adalah antar muka Tentang Kami (M07)
Home | Shopping Chart
BANNER
Selamat datang, nama member | Sign Out
Cara Berbelanja | Cara Pembayaran | Cara Retur | Tentang Kami | History
KATALOG PRODUK DISKON LAYANAN PEMBAYARAN CONTACT US FOOTER Tentang Kami M07 Navigasi :
-Klik Home untuk menuju ke M03 -Klik Shopping Chart untuk menuju ke M09 -Klik Cara Berbelanja untuk menuju ke M04 -Klik Cara
pembayaran untuk menuju ke M05 -Klik Cara Retur untuk menuju ke M06 -Klik klik Tentang Kami untuk menuju ke M07
-Klik History untuk menuju ke M13 -Klik Sign Out untuk menuju P01
Antar muka ini adalah antar muka Detail Produk (M08)
Home | Shopping Chart
BANNER
Selamat datang, nama member | Sign Out
Cara Berbelanja | Cara Pembayaran | Cara Retur | Tentang Kami | History
KATALOG PRODUK DISKON LAYANAN PEMBAYARAN CONTACT US FOOTER Gambar produk Nama Produk Deskripsi Produk Ukuran Qty :
Add to chart Kembali
Ukuran Stok Berat (kg) Diskon (%) Harga
M08 Navigasi :
-Klik Home untuk menuju ke M03 -Klik Shopping Chart untuk menuju ke M09 -Klik Cara Berbelanja untuk menuju ke M04 -Klik Cara
pembayaran untuk menuju ke M05 -Klik Cara Retur untuk menuju ke M06 -Klik klik Tentang Kami untuk menuju ke M07
-Klik History untuk menuju ke M13 -Klik Sign Out untuk menuju P01 -Klik detail untuk menuju ke M08 -Klik kembali untuk menuju ke M03
Gambar III.45 Perancangan Antar Detail Produk
Antar muka ini adalah antar muka Shopping Cart (M09)
Home | Shopping Chart
BANNER
Selamat datang, nama member | Sign Out
Cara Berbelanja | Cara Pembayaran | Cara Retur | Tentang Kami | History
KATALOG PRODUK DISKON LAYANAN PEMBAYARAN CONTACT US FOOTER cari Aturan dan prosedur pada shopping chart
Produk Hapus Ukuran Berat(kg) Qty Diskon(%) Harga SubTotal Total Belanja Total Belanja Produk Hapus Ukuran Berat(kg) Qty Diskon(%) Harga SubTotal Jasa Pengiriman yang akan digunakan :
Pilih jasa pengiriman Pilih layanan cargo Pilih kota tujuan ongkos TOTAL BAYAR | Total Belanja lagi Lanjutkan
Ketentuan yang berlaku di shopping chart
M09 Navigasi :
-Klik Home untuk menuju ke M03 -Klik Shopping Chart untuk menuju ke M09 -Klik Cara Berbelanja untuk menuju ke M04 -Klik Cara
pembayaran untuk menuju ke M05 -Klik Cara Retur untuk menuju ke M06 -Klik klik Tentang Kami untuk menuju ke M07
-Klik History untuk menuju ke M13 -Klik Sign Out untuk menuju P01 -Klik detail untuk menuju ke M08 -Klik belanja lagi untuk menuju ke M03 -Klik Lanjutkan untuk menuju ke M10
108
Antar muka ini adalah antar muka Data Pengiriman (M10)
M10
Member Keranjang Belanja Belanja Anda : Total : Lihat Detail Belanja lihat Profil | Ganti Password | Lihat Transaksi | Logout
Selamat datang,....
Password Lama: Password Baru : Ulangi Password Baru : Ganti Password
Ganti Password
cari cari
Cari produk
BERANDA | PROFIL | BUKU TAMU | CARA BELANJA | KONTAK | ORDER MODELING Welcome To Benitashop BANNER Teks Produk Teks Produk Teks Produk Teks Produk Produk kami Media Pembayaran IMAGE Contact Live Navigasi :
1. Klik menu “beranda”
untuk menuju ke M01
2. Klik Menu “Buku tamu”
untuk menuju Ke M03
3. Klik menu “kontak”
untuk menuju ke M04
4. Klik menu “Lihat detail
belanja ” untuk menuju
ke M07
5. Klik link “order model”
untuk menuju ke M17
6. Klik link “lihat profil”
untuk menuju ke M09
7. Klik link “lihat transaksi”
untuk menuju ke M13
Gambar III.47 Perancangan Antar Muka Data pengiriman Antar muka ini adalah antar muka Total Pembayaran (M11)
Cara Berbelanja | Cara Pembayaran | Cara Retur | Tentang Kami Home | Shopping Chart
BANNER
Selamat datang, nama member | Sign Up
KATALOG PRODUK DISKON LAYANAN PEMBAYARAN CONTACT US FOOTER M11
Cara Berbelanja | Cara Pembayaran | Cara Retur | Tentang Kami | History TOTAL PEMBAYARAN à x,xx
DATA PENGIRIMAN Nama Penerima :
Alamat :
Provinsi : Provinsi Kota : Nama Kota No. Telepon : No. Telepon
Kembali Lanjutkan
Navigasi : -Klik Home untuk menuju ke M03 -Klik Shopping Chart untuk menuju ke M09 -Klik Cara Berbelanja untuk menuju ke M04 -Klik Cara pembayaran untuk menuju ke M05 -Klik Cara Retur untuk menuju ke M06 -Klik klik Tentang Kami untuk menuju ke M07
-Klik History untuk menuju ke M13 -Klik Sign Out untuk menuju P01 -Klik Kembali untuk menuju ke M10 -Klik Lanjutkan untuk menuju ke M12 Nama Penerima
Alamat
PRODUK UKURAN BERAT(Kg) QTY DISKON (%) HARGA SUBTOTAL PRODUK UKURAN BERAT(Kg) QTY DISKON (%) HARGA SUBTOTAL
TOTAL BELANJA TOTAL BELANJA
Jasa Pengiriman yang akan digunakan :
Nama Jasa Pengirimanà layanan yang dipilih à Kota Tujuan Ongkos kirim
TOTAL BAYAR TOTAL BAYAR
Antar muka ini adalah antar muka Selesai belanja (M12)
Cara Berbelanja | Cara Pembayaran | Cara Retur | Tentang Kami Home | Shopping Chart
BANNER
Selamat datang, nama member | Sign Up
KATALOG PRODUK DISKON LAYANAN PEMBAYARAN CONTACT US FOOTER M12
Cara Berbelanja | Cara Pembayaran | Cara Retur | Tentang Kami | History
Navigasi : -Klik Home untuk menuju ke M03 -Klik Shopping Chart untuk menuju ke M09 -Klik Cara Berbelanja untuk menuju ke M04 -Klik Cara pembayaran untuk menuju ke M05 -Klik Cara Retur untuk menuju ke M06 -Klik klik Tentang Kami untuk menuju ke M07
-Klik History untuk menuju ke M13 -Klik Sign Out untuk menuju P01
Selesai
Terima Kasih telah berbelanja dengan kami.
Data pesanan Anda telah berhasil dikirimkan. Sebuah email mengenai pesanan ini juga telah dikirimkan ke alamat email Anda.
Informasi Pembayaran No. Transaksi no transaksi Total Bayar total bayar
Silakan melakukan pembayaran via transfer Bank: BCA
Nomor Rekening : 139-2344-785 Atas Nama : Sri Mulyati BNI
Nomor Rekening : 010-8999-464 Atas Nama : Sri Mulyati Pembayaran menggunakan paypal » Syarat dan kodisi
1. Hanya pesanan yang telah melakukan pembayaran yang akan diproses untuk pengiriman.
2. Jika Anda memilih janis pembayaran dengan cara Trasfer bank, apabila Anda telah melakukan pembayaran silakan lakukan konfirmasi pembayaran.
3. Untuk melakukan kofirmasi pembayaran, Anda bisa langsung melakukan konfirmasi dari web kami atau hubungai customer kami.
Link ke Paypal
Gambar III.49 Perancangan Antar Muka Selesai Belanja Antar muka ini adalah antar muka History (M13)
Cara Berbelanja | Cara Pembayaran | Cara Retur | Tentang Kami Home | Shopping Chart
BANNER
Selamat datang, nama member | Sign Up
KATALOG PRODUK DISKON LAYANAN PEMBAYAR AN CONTACT US FOOTER M13
Cara Berbelanja | Cara Pembayaran | Cara Retur | Tentang Kami | History
Navigasi : -Klik Home untuk menuju ke M03 -Klik Shopping Chart untuk menuju ke M09 -Klik Cara Berbelanja untuk menuju ke M04 -Klik Cara pembayaran untuk menuju ke M05 -Klik Cara Retur untuk menuju ke M06 -Klik klik Tentang Kami untuk menuju ke M07
-Klik History untuk menuju ke M13 -Klik Sign Out untuk menuju P01 -Klik Detail untuk menuju ke M14 History Order
Halaman : 1,2, next
Order Tanggal Pesanan Tanggal Expired Status Pesanan Jumlah Bayar Aksi detail
110
Antar muka ini adalah antar muka Detail History (M14)
Cara Berbelanja | Cara Pembayaran | Cara Retur | Tentang Kami Home | Shopping Chart
BANNER
Selamat datang, nama member | Sign Up
KATALOG PRODUK DISKON LAYANAN PEMBAYAR AN CONTACT US FOOTER M14
Cara Berbelanja | Cara Pembayaran | Cara Retur | Tentang Kami | History
Navigasi : -Klik Home untuk menuju ke M03 -Klik Shopping Chart untuk menuju ke M09 -Klik Cara Berbelanja untuk menuju ke M04 -Klik Cara pembayaran untuk menuju ke M05 -Klik Cara Retur untuk menuju ke M06 -Klik klik Tentang Kami untuk menuju ke M07
-Klik History untuk menuju ke M13 -Klik Sign Out untuk menuju P01 -Klik Paypal untuk menuju ke website paypal -Klik Tansfer untuk menuju ke M15 -Klik Cash untuk menuju ke M16
DETAIL ORDER
Order : no.order Status : Status Order Tanggal Order : TanggalOrder Tanggal Expired : Tanggal Expired
PRODUK UKURAN BERAT(Kg) QTY DISKON HARGA SUBTOTAL PRODUK UKURAN BERAT(Kg) QTY DISKON HARGA SUBTOTAL Total Belanja Total belanja Ongkos Kirim Ongkos Kirim Total Bayar Total Bayar
DATA PENGIRIMAN__________________________________________________
Email : Email
Nama Penerima : Nama Penerima
Alamat : Alamat
Provinsi : Provinsi
Kota : Kota
Telepon : No. Telepon
JENIS LAYANAN PENGIRIMAN________________________________________ Tujuan Pengiriman : provinsi, kota tujuan
Jenis Layanan : Jenis layanan yang dipilih Harga Kirim/kg : ongkos kirim
Pembayaran Paypal PAYPAL
Transfer via kartu kredit/debet Transfer
Transfer via bank (setoran tunai di Bank) Cash
Gambar III.51 Perancangan Antar Muka Detail History Antar muka ini adalah antar muka Transfer via Debet (M15)
Transfer via Kartu Kredit/Debit
Id Order : No.Order Total Pembayaran : Rp.xxxx
*Tanggal Pembayaran : Tanggal kalender *Bank Tujuan : Pilih bank *Bank Asal :
*No. Rekening : *Atas Nama :
Kirim
*) Kata yang mengandung bintang(*) tidak boleh kosong
CLOSE X
M15 Navigasi :
-Klik Close untuk menuju ke M14
Antar muka ini adalah antar muka Transfer Via Bank (Cash) (M16)
Transfer via Bank (Cash) Id Order : No.Order Total Pembayaran : Rp.xxxx
*Tanggal Pembayaran : Tanggal kalender *Bank Tujuan : Pilih bank *Bank Asal :
*No. Transfer : *Atas Nama :
Kirim
*) Kata yang mengandung bintang(*) tidak boleh kosong
CLOSE X
M16 Navigasi :
-Klik Close untuk menuju ke M14
Gambar III.53 Perancangan Antar Transfer Via Bank