BAB II TINJAUAN PUSTAKA
3.3 Perancangan Arsitektur
3.3.1 Perancangan antar muka
yang berperan sebagai media komunikasi yang digunakan sebagai sarana
berdialog antara program dengan user. Sistem yang akan dibangun diharapkan
menyediakan interface yang mudah dipahami dan digunakan oleh user
Perancangan interface untuk aplikasi E-Commerce pada ShiverWear Clothing
adalah sebagai berikut :
1. Antar muka pengunjung
a. Tampilan awal (animasi)
P00
Nama Perusahaan ‘click here’
• Klik link ‘click here’ menuju keform P01
ANIMASI FLASH DAN LOGO PERUSAHAAN
Gambar 3.15. Tampilan awal (animasi)
b. Form home pengunjung
Gambar 3.15. Form home pengunjung
Keterangan:
Ukuran layar : Dinamis(Default 1280x800) Type/ukuran font : Helvetica 10px
Warna latar : #000000, #F8C055,# 7EB610
P01
• Klik link home menuju keform P01
• Klik registrasi member menuju keform P02
• Klik link katalog menuju keform P03
• Klik link profil menuju keform P05
• Klik link kontak menuju keform P06
• Klik link teks kategori menuju keform P03
• Klik tombol simpan menuju keform P02
• Klik tombol reset menuju keform P02
B A N N E R
Home Registrasi Member Katalog Profil Kontak
Login Member Username Password Teks Shoping cart Kategori barang Teks kategori Teks kategori Teks kategori Teks kategori Selamat Datang Koleksi diskon image
Gambar 3.16. Form Halaman Pengunjung
c. Form registrasi member
Gambar 3.17. Form registrasi member
P02
Klik link home menuju keform P01
Klik registrasi member menuju keform P02
Klik link katalog menuju keform P03
Klik link profil menuju keform P05
Klik link kontak menuju keform P06
Klik link teks kategori menuju keform P03
Klik tombol simpan menuju keform P02
Klik tombol reset menuju keform P02
Keterangan:
Ukuran layar : Dinamis(Default 1280x800) Type/ukuran font : Helvetica 10px
Warna latar : #000000,#F8C055,#7EB610
B A N N E R Home Kontak Login Member Registrasi member Kategori barang Teks kategori
Home Registrasi member katalog Profil Logout @ Copyright Free n Style Fashion
Registrasi member Katalog Profil
Teks Shopping cart image Teks kategori Teks kategori Teks kategori
Form Registrasi Member Username Password Login Nama lengkap Alamat Kota Provinsi Telepon Negara Password Username Konfirmasi password Email Simpan Reset Keterangan:
Ukuran layar : Dinamis(Default 1280x800) Type/ukuran font : Helvetica 10px
Warna latar : #000000, #F8C055,# 7EB610
d. Form view barang
Gambar 3.18. Form view barang
P03
Klik link home menuju keform P01
Klik registrasi member menuju keform P02
Klik link katalog menuju keform P03
Klik link profil menuju keform P05
Klik link kontak menuju keform P06
Klik link teks kategori menuju keform P03
Klik link detail menuju ke form P04
Klik tombol cari menuju keform P03
K Keterangan:
Ukuran layar : Dinamis(Default 1280x800) Type/ukuran font : Helvetica 10px
Warna latar : #000000,#F8C055,#7EB610
B A N N E R Home Kontak Login Member Registrasi member Kategori barang Teks kategori
Home Registrasi member katalog Profil Logout @ Copyright Free n Style Fashion
Registrasi member Katalog Profil
Teks Shopping cart image Teks kategori Teks kategori Teks kategori
Koleksi Free n Style Fashion
image Teks Data barang
Detail
image image Teks Data barang Teks Data barang Detail Detail Username Password Login
Cari koleksi barang
Kategori Harga Detail
e. Form Barang
Gambar 3.19. Form barang
P04
Klik link home menuju keform P01
Klik registrasi member menuju keform P02
Klik link katalog menuju keform P03
Klik link profil menuju keform P05
Klik link kontak menuju keform P06
Klik link teks kategori menuju keform P03
Klik image cart menuju ke P04
Keterangan:
Ukuran layar : Dinamis(Default 1280x800) Type/ukuran font : Helvetica 10px
Warna latar : #000000,#F8C055,#7EB610
B A N N E R Home Kontak Login Member Registrasi member Kategori barang Teks kategori
Home Registrasi member katalog Profil Logout @ Copyright Free n Style Fashion
Registrasi member Katalog Profil
Teks Shopping cart image Teks kategori Teks kategori Teks kategori
Form Detail Barang Username
Password
Login
image
Teks detail barang
Image cart
Gambar 3.20. Form profil
P05
Klik link home menuju keform P01
Klik registrasi member menuju keform P02
Klik link katalog menuju keform P03
Klik link profil menuju keform P05
Klik link kontak menuju keform P06
Klik link teks kategori menuju keform P03
Keterangan:
Ukuran layar : Dinamis(Default 1280x800) Type/ukuran font : Helvetica 10px
Warna latar : #000000,#F8C055,#7EB610
B A N N E R Home Kontak Login Member Registrasi member Kategori barang Teks kategori
Home Registrasi member katalog Profil Logout @ Copyright Free n Style Fashion
Registrasi member Katalog Profil
Teks Shopping cart image Teks kategori Teks kategori Teks kategori Profil Perusahaan Username Password Login
Gambar 3.21. Form kontak
P06
Klik link home menuju keform P01
Klik registrasi member menuju keform P02
Klik link katalog menuju keform P03
Klik link profil menuju keform P05
Klik link kontak menuju keform P06
Klik link teks kategori menuju keform P03
Klik kirim pesan menuju ke P06
Keterangan:
Ukuran layar : Dinamis(Default 1280x800) Type/ukuran font : Helvetica 10px
Warna latar : #000000,#F8C055,#7EB610
B A N N E R Home Login Member Registrasi member Kategori barang Teks kategori
Home Registrasi member katalog Profil Logout @ Copyright Free n Style Fashion
Registrasi member Katalog Profil
Teks Shopping cart image Teks kategori Teks kategori Teks kategori Kontak Username Password Login Email anda: Judul pesan: Verifikasi: KODE Pesan: Kirim pesan Kontak
a. Formhome sebelum login
Gambar 3.15. Form home pengunjung
Gambar 3.22. Form Home sebelum login
C01
Keterangan:
Ukuran layar : Dinamis(Default 1280x800) Type/ukuran font : Helvetica 10px
Warna latar : #000000, #F8C055,# 7EB610
• Klik link home menuju keform C01
• Klik registrasi member menuju keform C03
• Klik link katalog menuju keform C09
• Klik link profil menuju keform C06
• Klik link teks kategori menuju keform C09
• Klik link detail menuju keform C10
B A N N E R
Home Registrasi Member Katalog Profil Kontak
Login Member Username Password Teks Shoping cart Kategori barang Teks kategori Teks kategori Teks kategori Teks kategori Selamat Datang Koleksi diskon image
Gambar 3.23. Form home sesudah login
C02
Klik link home menuju keform C01
Klik link katalog menuju keform C09
Klik link profil menuju keform C06
Klik link kontak menuju keform C07
Klik link cara pemesanan menuju ke form C08
Klik link shopping cart menuju ke form C11
Klik link history menuju ke form C16
Klik link logout menuju ke form C01
Klik link ubah profil menuju ke form C04
Klik link ubah password menuju ke form C05
Klik link teks kategori menuju keform C09
Klik link detail menuju keform C10
B A N N E R
Home Katalog Profil Kontak Cara pemesanan Shopping car t History Logout Selamat datang
Teks profil admin
Ubah Password
Kategori barang Teks kategori
@ Copyright Free n Style Fashion Teks Shopping cart image Teks kategori Teks kategori Teks kategori image
Teks Selamat Datang
Koleksi Terbaru image Teks Data barang Detail image image image image image Teks Data barang Teks Data barang Detail Detail Teks Data barang Teks Data barang Teks Data barang
Detail Detail Detail
Home Katalog Profil Kontak Cara memesan Shopping cart History Logout Ubah Profil
Keterangan:
Ukuran layar : Dinamis(Default 1280x800) Type/ukuran font : Helvetica 10px
Warna latar : #000000,#F8C055,#7EB610
Gambar 3.24. Form registrasi
C03
Klik link home menuju keform C01
Klik registrasi member menuju keform C03
Klik link katalog menuju keform C09
Klik link profil menuju keform C06
Klik link shopping cart menuju keform C07
Klik link teks kategori menuju keform C09
Klik tombol simpan menuju ke form C03
Klik tombol reset menuju ke form C03 B A N N E R Home Logout Login Member Registrasi member Kategori barang Teks kategori
Home Registrasi member katalog Profil Logout @ Copyright Free n Style Fashion
Registrasi member Katalog Profil
Teks Shopping cart image Teks kategori Teks kategori Teks kategori
Form Registrasi Member Username Password Login Nama lengkap Alamat Kota Provinsi Telepon Negara Password Username Konfirmasi password Email Simpan Reset Keterangan:
Ukuran layar : Dinamis(Default 1280x800) Type/ukuran font : Helvetica 10px
Gambar 3.25. Form ubah profil
C04
Klik link home menuju keform C01
Klik link katalog menuju keform C09
Klik link profil menuju keform C06
Klik link kontak menuju keform C07
Klik link cara pemesanan menuju ke form C08
Klik link shopping cart menuju ke form C11
Klik link history menuju ke form C16
Klik link logout menuju ke form C01
Klik link ubah profil menuju ke form C04
Klik link ubah password menuju ke form C05
Klik link teks kategori menuju keform C09
Klik link simpan menuju keform C04
klik tombol batal menuju keform C04
B A N N E R
Home Katalog Profil Kontak Cara pemesanan Shopping car t History Logout
Selamat datang
Teks profil costumer
Ubah Password
Kategori barang Teks kategori
@ Copyright Free n Style Fashion Teks Shopping cart image Teks kategori Teks kategori Teks kategori
Form Ubah Profil
Home Katalog Profil Kontak Cara memesan Shopping cart History Logout Ubah Profile Nama lengkap Alamat Kota Provinsi Negara Telepon Email Simpan Batal Keterangan:
Ukuran layar : Dinamis(Default 1280x800) Type/ukuran font : Helvetica 10px
Gambar 3.26. Form ubah password
C05
Klik link home menuju keform C01
Klik link katalog menuju keform C09
Klik link profil menuju keform C06
Klik link kontak menuju keform C07
Klik link cara pemesanan menuju ke form C08
Klik link shopping cart menuju ke form C11
Klik link history menuju ke form C16
Klik link logout menuju ke form C01
Klik link ubah profil menuju ke form C04
Klik link ubah password menuju ke form C05
Klik link teks kategori menuju keform C09
Klik link simpan menuju keform C05
Klik tommbol reset menuju keform C05 B A N N E R
Home Katalog Profil Kontak Cara pemesanan Shopping car t History Logout
Selamat datang
Teks profil costumer
Ubah Password
Kategori barang Teks kategori
@ Copyright Free n Style Fashion Teks Shopping cart image Teks kategori Teks kategori Teks kategori
Form Ubah Profil
Home Katalog Profil Kontak Cara memesan Shopping cart History Logout Ubah Profile Password Password baru Konfirmasi Password Simpan Batal Keterangan:
Ukuran layar : Dinamis(Default 1280x800) Type/ukuran font : Helvetica 10px
Gambar 3.27. Form profil perusahaan
C06
Klik link home menuju keform C01
Klik link katalog menuju keform C09
Klik link profil menuju keform C06
Klik link kontak menuju keform C07
Klik link cara pemesanan menuju ke form C08
Klik link shopping cart menuju ke form C11
Klik link history menuju ke form C16
Klik link logout menuju ke form C01
Klik link ubah profil menuju ke form C04
Klik link ubah password menuju ke form C05
Klik link teks kategori menuju keform C09
B A N N E R
Home Katalog Profil Kontak Cara pemesanan Shopping car t History Logout
Selamat datang
Teks profil costumer
Ubah Password
Kategori barang Teks kategori
@ Copyright Free n Style Fashion Teks Shopping cart image Teks kategori Teks kategori Teks kategori Profil Perusahaan
Home Katalog Profil Kontak Cara memesan Shopping cart History Logout Teks profil Perusahaan
Ubah Profile
Keterangan:
Ukuran layar : Dinamis(Default 1280x800) Type/ukuran font : Helvetica 10px
Gambar 3.28. Form kontak
C07
Klik link home menuju keform C01
Klik link katalog menuju keform C09
Klik link profil menuju keform C06
Klik link kontak menuju keform C07
Klik link cara pemesanan menuju ke form C08
Klik link shopping cart menuju ke form C11
Klik link history menuju ke form C16
Klik link logout menuju ke form C01
Klik link ubah profil menuju ke form C04
Klik link ubah password menuju ke form C05
Klik link teks kategori menuju keform C09
Klik tombol kirim pesan menuju keform C07
B A N N E R
Home Katalog Profil Kontak Cara pemesanan Shopping car t History Logout
Selamat datang
Teks profil costumer
Ubah Password
Kategori barang Teks kategori
@ Copyright Free n Style Fashion Teks Shopping cart image Teks kategori Teks kategori Teks kategori Kontak
Home Katalog Profil Kontak Cara memesan Shopping cart History Logout Email anda : Judul Pesan : Verifikasi : KODE Pesan : Kirim pesan Ubah Profil Keterangan:
Ukuran layar : Dinamis(Default 1280x800) Type/ukuran font : Helvetica 10px
Gambar 3.29. Form cara pemesanan
C08
Klik link home menuju keform C01
Klik link katalog menuju keform C09
Klik link profil menuju keform C06
Klik link kontak menuju keform C07
Klik link cara pemesanan menuju ke form C08
Klik link shopping cart menuju ke form C11
Klik link history menuju ke form C16
Klik link logout menuju ke form C01
Klik link ubah profil menuju ke form C04
Klik link ubah password menuju ke form C05
Klik link teks kategori menuju keform C09
B A N N E R
Home Katalog Profil Kontak Cara pemesanan Shopping car t History Logout Selamat datang
Teks profil costumer
Ubah Password
Kategori barang Teks kategori
@ Copyright Free n Style Fashion Teks Shopping cart image Teks kategori Teks kategori Teks kategori Cara pemesanan
Home Katalog Profil Kontak Cara memesan Shopping cart History Logout Teks Cara Pemesanan
Ubah Profil
K Keterangan:
Ukuran layar : Dinamis(Default 1280x800) Type/ukuran font : Helvetica 10px
Gambar 3.30. Form katalog
C09
Klik link home menuju keform C01
Klik link katalog menuju keform C09
Klik link profil menuju keform C06
Klik link kontak menuju keform C07
Klik link cara pemesanan menuju ke form C08
Klik link shopping cart menuju ke form C11
Klik link history menuju ke form C16
Klik link logout menuju ke form C01
Klik link ubah profil menuju ke form C04
Klik link ubah password menuju ke form C05
Klik link teks kategori menuju keform C09
Klik link detail menuju keform C10
Klik tombol cari menuju keform C09
B A N N E R
Home Katalog Profil Kontak Cara pemesanan Shopping car t History Logout Selamat datang
Teks profil admin
Ubah Password
Kategori barang Teks kategori
@ Copyright Free n Style Fashion Teks Shopping cart image Teks kategori Teks kategori Teks kategori
Koleksi Free n Style Fashion
image Teks Data barang
Detail
image image Teks Data barang Teks
Data barang
Detail Detail
Home Katalog Profil Kontak Cara memesan Shopping cart History Logout Cari koleksi barang
Kategori Harga Detail Cari Ubah Profil K Keterangan:
Ukuran layar : Dinamis(Default 1280x800) Type/ukuran font : Helvetica 10px
Gambar 3.31. Form view barang
k. Formshopping cart
C10
Klik link home menuju keform C01
Klik link katalog menuju keform C09
Klik link profil menuju keform C06
Klik link kontak menuju keform C07
Klik link cara pemesanan menuju ke form C08
Klik link shopping cart menuju ke form C11
Klik link history menuju ke form C16
Klik link logout menuju ke form C01
Klik link ubah profil menuju ke form C04
Klik link ubah password menuju ke form C05
Klik link teks kategori menuju keform C09
Klik image cart menuju keform C11
B A N N E R
Home Katalog Profil Kontak Cara pemesanan Shopping car t History Logout
Selamat datang
Teks profil costumer
Ubah Password
Kategori barang Teks kategori
@ Copyright Free n Style Fashion Teks Shopping cart image Teks kategori Teks kategori Teks kategori Detail Barang
Home Katalog Profil Kontak Cara memesan Shopping cart History Logout image
Teks Detail Barang
Image cart Ubah Profil
K Keterangan:
Ukuran layar : Dinamis(Default 1280x800) Type/ukuran font : Helvetica 10px
Gambar 3.32. Form shoppingcart
l. Form pengiriman
C11
Klik link home menuju keform C01
Klik link katalog menuju keform C09
Klik link profil menuju keform C06
Klik link kontak menuju keform C07
Klik link cara pemesanan menuju ke form C08
Klik link shopping cart menuju ke form C11
Klik link history menuju ke form C16
Klik link logout menuju ke form C01
Klik link ubah profil menuju ke form C04
Klik link ubah password menuju ke form C05
Klik link teks kategori menuju keform C09
Klik tombol hapus menuju keform C11
Klik tombol update menuju keform C11
Klik image bayar menuju keform C12
Klik link kembali kekatalog menuju keform C09 B A N N E R
Home Katalog Profil Kontak Cara pemesanan Shopping car t History Logout
Selamat datang
Teks profil costumer
Ubah Password
Kategori barang Teks kategori
@ Copyright Free n Style Fashion Teks Shopping cart image Teks kategori Teks kategori Teks kategori Shopping Cart
Home Katalog Profil Kontak Cara memesan Shopping cart History Logout Ubah Profile
Silahkan cek jumlahnya
id gambar warna Ukuran Harga Jumlah Diskon Total Proses
Hapus subtotal Update teks [Kembali kekatalog] Bayar K Keterangan:
Ukuran layar : Dinamis(Default 1280x800) Type/ukuran font : Helvetica 10px
C12
Klik link home menuju keform C01
Klik link katalog menuju keform C09
Klik link profil menuju keform C06
Klik link kontak menuju keform C07
Klik link cara pemesanan menuju ke form C08
Klik link shopping cart menuju ke form C11
Klik link history menuju ke form C16
Klik link logout menuju ke form C01
Klik link ubah profil menuju ke form C04
Klik link ubah password menuju ke form C05
Klik link teks kategori menuju keform C09
Klik tombol lanjutkan menuju keform C13
Klik tombol batal menuju keform C12
B A N N E R
Home Katalog Profil Kontak Cara pemesanan Shopping car t History Logout
Selamat datang
Teks profil costumer
Ubah Password
Kategori barang Teks kategori
@ Copyright Free n Style Fashion Teks Shopping cart image Teks kategori Teks kategori Teks kategori Form Bayar
Home Katalog Profil Kontak Cara pemesanan Shopping cart History Logout Ubah Profile Nama kirim Alamat kirim Kota kirim Lanjutkan Batal Keterangan:
Ukuran layar : Dinamis(Default 1280x800) Type/ukuran font : Helvetica 10px
Gambar 3.34. Form konfirmasi
C13
Klik link home menuju keform C01
Klik link katalog menuju keform C09
Klik link profil menuju keform C06
Klik link kontak menuju keform C07
Klik link cara pemesanan menuju ke form C08
Klik link shopping cart menuju ke form C11
Klik link history menuju ke form C16
Klik link logout menuju ke form C01
Klik link ubah profil menuju ke form C04
Klik link ubah password menuju ke form C05
Klik link teks kategori menuju keform C09
Klik link cara pembayaran menuju keform C14
Klik tombol checkout menuju keform C15
Klik link kembali kekatalog menuju keform C09 B A N N E R
Home Katalog Profil Kontak Cara pemesanan Shopping car t History Logout
Selamat datang
Teks profil costumer
Ubah Password
Kategori barang Teks kategori
@ Copyright Free n Style Fashion Teks Shopping cart image Teks kategori Teks kategori Teks kategori Konfirmasi Pembayaran
Home Katalog Profil Kontak Cara pemesanan Shopping cart History Logout Ubah Profile
Konfirmasi Pembayaran
id gambar warna ukuran Harga Jumlah Diskon Berat Total
Sub Total : Ongkos kirim : Total : teks Cara pembayaran Check out [Kembali ke katalog] Keterangan:
Ukuran layar : Dinamis(Default 1280x800) Type/ukuran font : Helvetica 10px
Gambar 3.35. Form cara pembayaran
C14
Klik link home menuju keform C01
Klik link katalog menuju keform C09
Klik link profil menuju keform C06
Klik link kontak menuju keform C07
Klik link cara pemesanan menuju ke form C08
Klik link shopping cart menuju ke form C11
Klik link history menuju ke form C16
Klik link logout menuju ke form C01
Klik link ubah profil menuju ke form C04
Klik link ubah password menuju ke form C05
Klik link teks kategori menuju keform C09
B A N N E R
Home Katalog Profil Kontak Cara pemesanan Shopping car t History Logout
Selamat datang
Teks profil costumer
Ubah Password
Kategori barang Teks kategori
@ Copyright Free n Style Fashion Teks Shopping cart image Teks kategori Teks kategori Teks kategori Cara Pembayaran
Home Katalog Profil Kontak Cara Pemesanan Shopping cart History Logout Teks Cara Pembayaran
Ubah Profil
Keterangan:
Ukuran layar : Dinamis(Default 1280x800) Type/ukuran font : Helvetica 10px
Gambar 3.36. Form terima kasih
p. Form history C15
Klik link home menuju keform C01 Klik link katalog menuju keform
C09
Klik link profil menuju keform C06 Klik link kontak menuju keform
C07
Klik link cara pemesanan menuju ke form C08
Klik link shopping cart menuju ke form C11
Klik link history menuju ke form C16
Klik link logout menuju ke form C01
Klik link ubah profil menuju ke form C04
Klik link ubah password menuju ke form C05
Klik link teks kategori menuju keform C09
B A N N E R
Home Katalog Profil Kontak Cara pemesanan Shopping car t History Logout
Selamat datang
Teks profil costumer
Ubah Password
Kategori barang Teks kategori
@ Copyright Free n Style Fashion Teks Shopping cart image Teks kategori Teks kategori Teks kategori
Home Katalog Profil Kontak Cara pemesanan Shopping cart History Logout Ubah Profile
Terima kasih detail pesanan anda telah dikirimkan ke email “alamat email”
Keterangan:
Ukuran layar : Dinamis(Default 1280x800) Type/ukuran font : Helvetica 10px
Gambar 3.37 Form history
C16
Klik link home menuju keform C01
Klik link katalog menuju keform C09
Klik link profil menuju keform C06
Klik link kontak menuju keform C07
Klik link cara pemesanan menuju ke form C08
Klik link shopping cart menuju ke form C11
Klik link history menuju ke form C16
Klik link logout menuju ke form C01
Klik link ubah profil menuju ke form C04
Klik link ubah password menuju ke form C05
Klik link teks kategori menuju keform C09
Klik tombol detail menuju keform C17
B A N N E R
Home Katalog Profil Kontak Cara pemesanan Shopping car t History Logout
Selamat datang
Teks profil costumer
Ubah Password
Kategori barang Teks kategori
@ Copyright Free n Style Fashion Teks Shopping cart image Teks kategori Teks kategori Teks kategori History
Home Katalog Profil Kontak Cara memesan Shopping cart History Logout No Id_pesanan Tgl pesan Tgl akhir bayarTotal bayarTgl akhir bayar Status pesanan Tgl bayar
Ubah profil
Keterangan:
Ukuran layar : Dinamis(Default 1280x800) Type/ukuran font : Helvetica 10px