• Tidak ada hasil yang ditemukan

Perancangan Antar Muka Member

BAB V KESIMPULAN DAN SARAN

ANALISIS DAN PERANCANGAN SISTEM

2. Perancangan Antar Muka Member

Antar muka ini adalah antar muka home (M01)

BERANDA | PROFIL | BUKU TAMU | CARA BELANJA | KONTAK | ORDER MODELING

M01

BANNER

Member Keranjang Belanja Email Password

Login

Anda lupa password?klik disini Jika anda belum mendaftar silahkan daftar

Belanja Anda : Total :

Lihat Detail Belanja

Nama model Image Harga Beli| Details >> Teks Produk Teks Produk Teks Produk Teks Produk Produk kami Media Pembayaran IMAGE cari cari Cari produk Contact Live Welcome To Benitashop Nama Model Image Harga Beli| Details >> Nama Model Image Harga Beli| Details >> Nama Model Image Harga Beli| Details >> Nama Model Image Harga Beli| Details >> Nama Model Image Harga Beli| Details >> Nama Model Image Harga Beli| Details >> Nama Model Image Harga Beli| Details >> Nama Produk Nama Produk Navigasi :

1. Klik menu “profil” untuk

menuju ke M02 2. Klik Menu “Buku Tamu”

untuk menuju Ke M03 3. Klik menu “Contact”

untuk menuju ke M04 4. Klik menu “Lihat detail

belanja ” untuk menuju ke

M07

5. Klik link detail untuk

menuju ke M06

6. Klik menu “order model”

untuk menuju ke M17 7. Klik link “produk kami”

untuk menuju ke M05

Antar muka ini adalah antar muka profile (M02)

M02

Member Keranjang Belanja

Lihat Profil | Ganti Password | Lihat Transaksi | Logout

Belanja Anda : Total :

Lihat Detail Belanja

Profile

Selamat datang,....

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 detail untuk

menuju ke M06

6. Klik menu “order model”

untuk menuju ke M17 7. Klik link “lihat profil”

untuk menuju ke M09 8. Klik link “Ganti

password” untuk menuju

ke M10

9. Klik link “lihat transaksi”

untuk menuju ke M14 10. Klik link “produk kami”

untuk menuju ke M05

Gambar 3.32 Perancangan Antar Muka Profil

Antar muka ini adalah antar muka buku tamu (M03)

M03

Member Keranjang Belanja Belanja Anda : Total :

Lihat Detail Belanja Lihat Profil | Ganti Password | Lihat Transaksi | Logout

Selamat datang,.... Buku Tamu email Subjek Pesan/komentar Kirim Pesan/ Komentar 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 Kembali Ke Beranda Navigasi :

1. Klik menu “beranda” untuk

menuju ke M01 2. Klik Menu “profil” untuk

menuju Ke M02 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 “Ganti password”

untuk menuju ke M10 8. Klik link “lihat transaksi”

untuk menuju ke M13 9. Klik link “produk kami”

untuk menuju ke M05

Antar muka ini adalah antar muka Kontak (M04)

M04

Member Keranjang Belanja Belanja Anda : Total :

Lihat Detail Belanja Lihat Profil | Ganti Password | Lihat Transaksi | Logout

Selamat datang,....

KONTAK KAMI

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 “Profil” untuk

menuju ke M02 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 “Ganti password”

untuk menuju ke M10 8. Klik link “lihat transaksi”

untuk menuju ke M13 9. Klik link “produk kami”

untuk menuju ke M05

Gambar 3.34 Perancangan Antar Muka Kontak

Antar muka ini adalah antar muka Produk Kami (M05)

M05

Keranjang Belanja Belanja Anda : Total :

Lihat Detail Belanja

Nama Produk Image Harga Beli | Details >> Nama Produk Image Harga Beli| Details >> Nama Produk Image Harga Beli | Details >> Nama Produk Image Harga Beli | Details >> Nama Produk Image Harga Beli | Details >> Nama Produk Image Harga Beli | Details >> Member

Lihat Profil | Ganti Password | Lihat Transaksi | Logout Selamat datang,....

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 detail untuk

menuju ke M06 6. Klik link “order model”

untuk menuju ke M17 7. Klik link “lihat profil”

untuk menuju ke M09 8. Klik link “Ganti password”

untuk menuju ke M10 9. Klik link “lihat transaksi”

untuk menuju ke M13

Antar muka ini adalah antar muka detail produk (M06)

M06

Member Keranjang Belanja Belanja Anda : Total :

Lihat Detail Belanja

Nama Produk

+Add To Cart | Back Image

Nama Produk : Tipe Produk : Kategori Produk : Ukuran : Jenis Model Produk : Harga :

Lihat Profil | Ganti Password | Lihat Transaksi | Logout Selamat datang,....

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 “Ganti

password” untuk menuju

ke M10 8. Klik link “lihat

transaksi” untuk menuju

ke M13

Gambar 3.36 Perancangan Antar Muka Detail Produk

Antar muka ini adalah antar muka Lihat detail belanja (M07)

M07

Member Keranjang Belanja Belanja Anda : Total :

Lihat Detail Belanja

Kategori Produk Model Produk Harga Satuan Qty Jumlah Aksi Aksi Aksi Aksi Total Belanja Anda : Total

Lanjutkan Pembelian Lihat Profil | Ganti Password | Lihat Transaksi | Logout

Selamat datang,....

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 “Ganti

password” untuk menuju

ke M10 8. Klik link “lihat

transaksi” untuk menuju

ke M13

Antar muka ini adalah antar muka Lupa Password (M08)

M08

Member Keranjang Belanja Email Password

Login

Anda lupa password?klik disini Jika anda belum mendaftar silahkan daftar

Belanja Anda : Total :

Lihat Detail Belanja

Masukan email anda : Lupa Password

CEK EMAIL

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 detail untuk

menuju ke M06 6. Klik link “order model”

untuk menuju ke M17 7. Klik link “lihat profil”

untuk menuju ke M09 8. Klik link “Ganti

password” untuk menuju

ke M10

9. Klik link “lihat transaksi”

untuk menuju ke M13

Gambar 3.38 Perancangan Antar Muka Lupa Password

Antar muka ini adalah antar muka lihat profil (M09)

M09

Member Keranjang Belanja Belanja Anda : Total :

Lihat Detail Belanja Lihat Profil | Ganti Password | Lihat Transaksi | Logout

Selamat datang,.... Alamat : Provinsi : Kota : Telp/ Hp : Kode Pos : Profil anda Email account : Nama Depan : Nama Belakang :

Edit Nama depan Edit nama belakang

Edit alamat Edit provinsi Edit Kota Edit telp/ Hp

Edit Kode pos 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 “Ganti

password” untuk menuju

ke M10

7. Klik link “lihat transaksi”

untuk menuju ke M13

Antar muka ini adalah antar muka ganti password (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 3.40 Perancangan Antar Muka Ganti Password

Antar muka ini adalah antar muka pengiriman (M11)

M11

Member Keranjang Belanja Belanja Anda : Total :

Lihat Detail Belanja Lihat Profil | Ganti Password | Lihat Transaksi | Logout

Selamat datang,....

Pengiriman Ditujuakan Kepada ?

Nama Penerima : (*) Alamat Penerima : (*)

Pilih Kota : (*) nO. Telp Penerima : (*) Kode Pos : (*) Submit cari cari Cari produk Kembali

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 “home” untuk

menuju ke M01 2. Klik Menu “Buku Tamu”

untuk menuju Ke M03

3. Klik menu “Contact”

untuk menuju ke M04 4. Klik menu “Lihat detail

belanja ” untuk menuju

ke M07

5. Klik link “pesan model”

untuk menuju ke M17 6. Klik link “lihat profil”

untuk menuju ke M09 7. Klik link “Ganti

password” untuk menuju

ke M10

8. Klik link “lihat transaksi”

untuk menuju ke M13 9. Klik tombol” submit“

untuk menuju ke M12

Antar muka ini adalah antar muka detail transaksi (M12)

M12

Member Keranjang Belanja Belanja Anda : Total :

Lihat Detail Belanja Lihat Profil | Ganti Password | Lihat Transaksi | Logout

Selamat datang,....

BENITA ONLINE SHOP TRANSAKSI ANDA

No Transaksi : Tanggal transaksi : Kode barang Nama Barang Harga satuan Qty Sub Total Kode barang Nama Barang Harga satuan Qty Sub Total Kode barang Nama Barang Harga satuan Qty Sub Total

Nama Peneriam

Alamat

penerima kota Kode pos Telp Media Pembayaran Biaya Pengiriman Status pengiriman Nama Peneriam Alamat

penerima kota Kode pos Telp Media Pembayaran Biaya Pengiriman Status pengiriman Lihat Transaksi>> 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 “Ganti password”

untuk menuju ke M10 8. Klik link “lihat transaksi”

untuk menuju ke M13

Gambar 3.42 Perancangan Antar Muka Detail Transaksi

Antar muka ini adalah antar muka lihat transaksi (M13)

M13

Member Keranjang Belanja Belanja Anda : Total :

Lihat Detail Belanja lihat Profil | Ganti Password | Lihat Transaksi | Logout

Selamat datang,....

No.Transaksi Tgl_transaksi Status Aksi Detail Detail Jenis_transaksi 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

Tampilkan Data Berdasarkan Jenis Transaksi Tampilkan Data Berdasarkan Status Pembayaran

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 detail untuk

menuju ke M06 6. Klik link “order model”

untuk menuju ke M17 7. Klik link “lihat profil”

untuk menuju ke M09

8. Klik link “Ganti

password” untuk menuju

ke M10

9. Klik aksi bayar untuk

menuju ke M14

10. Klik aksi detail untuk

menuju ke M15

Antar muka ini adalah antar muka Konfirmasi Pembayaran (M14)

M14

Member Keranjang Belanja Belanja Anda : Total :

Lihat Detail Belanja lihat Profil | Ganti Password | Lihat Transaksi | Logout

Selamat datang,.... Pembayaran Tanggal : No. Rekening : Atas Nama : Nominal Pembayaran : Submit Nomer Transaksi

Pilih Media Pembayaran

Total Pembayaran : Rp.

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 “Ganti

password” untuk

menuju ke M10

Gambar 3.44 Perancangan Antar Muka Konfirmasi pembayaran

Antar muka ini adalah antar muka detail transaksi (M15)

M15

Member Keranjang Belanja Belanja Anda : Total :

Lihat Detail Belanja lihat Profil | Ganti Password | Lihat Transaksi | Logout

Selamat datang,....

No.Transaksi Tgl_transaksi Status Aksi Detail Detail Jenis_transaksi

Total Pembayaran : Rp. RINCIAN BELANJA - NO. TRANSAKSI :

Kode barang Nama Barang Harga satuan Qty Sub Total Kode barang Nama Barang Harga satuan Qty Sub Total Kode barang Nama Barang Harga satuan Qty Sub Total

Nama Peneriam

Alamat

penerima kota Kode pos Telp Media Pembayaran Biaya Pengiriman Status pengiriman Total Pembelian Barang total

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

Tampilkan Data Berdasarkan Jenis Transaksi Tampilkan Data Berdasarkan Status Pembayaran

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 M7 6. Klik link “lihat profil”

untuk menuju ke M09 7. Klik link “Ganti

password” untuk menuju

ke M10

Antar muka ini adalah antar muka pertanyaan lupa password (M16)

M16

Member Keranjang Belanja Email Password

Login

Anda lupa password?klik disini Jika anda belum mendaftar silahkan daftar

Belanja Anda : Total : Lihat Detail Belanja

Lupa Password SUBMIT Pertanyaan Anda : Jawaban : 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 “Ganti

password” untuk

menuju ke M10

Gambar 3.46 Perancangan Antar Muka Pertanyaan Lupa Password

Antar muka ini adalah antar muka pesan model (M17)

M17

Member Keranjang Belanja Belanja Anda : Total :

Lihat Detail Belanja lihat Profil | Ganti Password | Lihat Transaksi | Logout

Selamat datang,....

cari cari

Cari produk Silahkan uoload desain anda

Pengiriman ditujukan kepada Unggah gambar Qty Permintaan tgl, selesai Pilih ukuran : Unggah gambar Nama Penerima : (*) Alamat Penerima : (*) Pilih Kota : (*) nO. Telp Penerima : (*) Kode Pos : (*)

Submit Kembali

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 “lihat

profil” untuk menuju

ke M09 6. Klik link “Ganti

password” untuk

menuju ke M10

Antar muka ini adalah antar muka konfirmasi persetujuan desain (M18)

M18

Member Keranjang Belanja Belanja Anda : Total : Lihat Detail Belanja lihat Profil | Ganti Password | Lihat Transaksi | Logout

Selamat datang,....

cari cari

Cari produk Rincian pemesanan desain anda

Pengiriman ditujukan kepada

SETUJU TIDAK SETUJU

Image

No. transaksi : Ukuran :

Permintaan tanggal selesai : Qty : Harga Satuan : Sub total : Image Nama penerima : Alamat penerima : Kota : Kodepos: Telp : Biaya pengiriman :

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 “Ganti

password” untuk

menuju ke M10

Gambar 3.48 Perancangan Antar Muka Konfirmasi Persetujuan Disain

Antar muka ini adalah antar muka cara belanja (M19)

M19

Member Keranjang Belanja Belanja Anda : Total :

Lihat Detail Belanja Lihat Profil | Ganti Password | Lihat Transaksi | Logout

Selamat datang,....

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 Cara Berbelanja 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 “Ganti

password” untuk

menuju ke M10

Dokumen terkait