ANALISA DAN PERANCANGAN SISTEM
3.4 Rancangan Interface
3.4.1 Outline Halaman Utama Website
HEADER
Caption bergerak (tulisan)
Animasi Gambar Bergerak FOOTER
Gambar 3.5. Rancangan Interface Halaman Utama Website
Pada rancangan interface halaman utama ini, terdapat rancangan untuk logo web, motto, rancangan menu-menu web, caption bergerak (berupa tulisan), slide foto, rancangan penjelasan tentang melakukan transaksi bila anda ingin membeli produk ini. Dan terdapat rancangan menu login member, serta animasi gambar bergerak.
Header footer itu sendiri merupakan sebuah perintah yang bisa digunakan untuk Menu Login Member ( Slide Foto ) Home Produk Keranjang Pembayaran Hubungi Forum Buku Tamu
Perintah sebelum melakukan transaksi, anda harus mendaftar dan login.
LOGO
3.4.2 Outline Menu Produk
HEADER
FOOTER
Gambar 3.6. Rancangan Interface Menu Produk
Rancangan interface menu produk ini, terdapat juga rancangan logo, motto, menu- menu web. Dirancangan menu produk terdapat kerangka interface untuk foto produk, nama barang, manfaat barang, harga barang, beli barang apabila ingin membeli produk tersebut, jumlah barang. Dan kerangka menu logout member, jumlah member.
Home Produk Keranjang Pembayaran Hubungi Forum Buku Tamu Menu Logout Member Jumlah Member Jumlah Barang PRODUK Shopping cart Halaman
Gambar Barang Harga Aksi Nama
barang dan Harga manfaat barang barang
Nama
barang dan Harga manfaat barang barang
Nama
barang dan Harga manfaat barang barang FOTO PRODUK FOTO PRODUK FOTO PRODUK Beli Beli Beli LOGO MOTTO
3.4.3 Outline Menu Keranjang
HEADER
Tambahan Barang
FOOTER
Gambar 3.7. Rancangan Interface Menu Keranjang
Rancangan menu keranjang ini, terdapat kerangka interface slide foto, tambahan barang apabila anda ingin menambakan pembelian produk makanan kesehatan, rincian produk yang telah dibeli, dan kerangka perintah untuk lanjutkan transaksi. Disetiap rancangan interface web ini terdapat kerangka logo, motto, menu-menu web, dan menu logout member serta jumlah member.
Home Produk Keranjang Pembayaran Hubungi Forum Buku Tamu
KERANJANG Menu Logout
Member Jumlah Member (Slide Foto)
Rincian produk yang telah dibeli
Lanjutkan Transaksi Beli LOGO
3.4.4 Outline Tampilan Pemesanan
HEADER
FOOTER
Gambar 3.8. Rancangan Interface Tampilan Pemesanan
Di setiap rancangan website penjualan makanan kesehatan ini ada kerangka logo, motto, menu-menu web, logout member, dan jumlah member. Pada rancangan tampilan pemesanan, terdapat kerangka interface form pemesanan bagi member yg membeli produk makanan kesehatan ini. Dan kerangka simpan untuk menyimpan data si pemesan. Home Produk Keranjang Pembayaran Hubungi Forum Buku Tamu Menu Logout Member Jumlah Member PEMESANAN
FORM PEMESANAN ( PEMBELI)
Simpan LOGO
3.4.5 Outline Tampilan Rincian
HEADER
FOOTER
Gambar 3.9. Rancangan Interface Tampilan Rincian
Pada rancangan interface tampilan rincian ini , terdapat kerangka rincian data barang, kode dan data pemesanan si pembeli yang telah disimpan. Dan juga kerangka konfirmasi. Home Produk Keranjang Pembayaran Hubungi Forum Buku Tamu LOGO MOTTO
RINCIAN Menu Logout
Member Jumlah Member Rincian data barang, kode dan data
pemesanan ( pembeli )
3.4.6 Outline Tampilan Konfirmasi
Gambar 3.10. Rancangan Interface Tampilan Konfirmasi
Tampilan konfirmasi ini, rancangan interfacenya terdapat kerangka slide foto, hal-hal yang perlu diperhatikan saat melakukan transaksi dan konfirmasi apabila anda sudah menyelesaikan langkah-langkah untuk pembelian produk makanan kesehatan ini.
HEADER
HAL-HAL YANG PERLU DIPERHATIKAN SAAT MELAKUKAN TRANSAKSI
FOOTER Home Produk Keranjang Pembayaran Hubungi Forum Buku Tamu LOGO MOTTO
KONFIRMASI Menu Logout
Member Jumlah Member
Konfirmasi ( Slide Foto )
3.4.7 Outline Menu Pembayaran
HEADER
SYARAT PEMBAYARAN DALAM BERTRANSAKSI
FOOTER
Gambar 3.11. Rancangan Interface Menu Pembayaran
Pada tampilan racangan menu pembayaran, terdapat kerangka interface slide foto dan syarat pembayaran dalam bertransaksi bila anda ingin membeli produk makanan kesehatan tersebut. Home Produk Keranjang Pembayaran Hubungi Forum Buku Tamu LOGO MOTTO
PEMBAYARAN Menu Logout
Member Jumlah Member (Slide Foto)
3.4.8 Outline Menu Hubungi
HEADER
INFO KONTAK YANG BISA DIHUBUNGI
FOOTER
Gambar 3.12. Rancangan Interface Menu Hubungi
Rancangan interface pada menu hubungi ini, terdapat kerangka info kontak yang bisa dihubungi bila anda mendapatkan kendala-kendala dalam pembelian produk atau anda ingin menanyakan lebih jelasnya lagi tentang produk makanan kesehatan ini.
Home Produk Keranjang Pembayaran Hubungi Forum Buku Tamu LOGO MOTTO
HUBUNGI KAMI Menu Logout
Member Jumlah Member
3.4.9 Outline Menu Forum
HEADER
Ttttt
FOOTER
Gambar 3.13. Rancangan Interface Menu Forum
Menu forum rancangan interface ini, terdapat kerangka forum topik, replay, posting
dan topik baru bila anda ingin berkonsultasi atau bertanya antar member, serta terdapat kerangka jumlah topik.
Home Produk Keranjang Pembayaran Hubungi Forum Buku Tamu LOGO MOTTO
FORUM Menu Logout
Member Jumlah Member Topik Replay Posting
Topik Baru
3.4.10 Outline Menu Buku Tamu
HEADER
FOOTER
Gambar 3.14. Rancangan Interface Menu Buku Tamu
Seperti menu-menu sebelumnya, rancangan interface menu buku tamu ini juga terdapat kerangka logo web, motto, menu logout member, jumlah member, menu- menu website penjualan makanan kesehatan, dan kerangka form untuk costumer bila ada kritik dan saran.
Home Produk Keranjang Pembayaran Hubungi Forum Buku Tamu Menu Logout Member Jumlah Member BUKU TAMU
Form untuk costumer bila ada kritik dan saran
LOGO
3.4.11 Outline Tampilan Login Admin
HEADER
FOOTER
Gambar 3.15. Rancangan Interface Tampilan Login Admin
Pada rancangan interface tampilan login admin ini, terdapat kerangka admin, menu
login admin.
3.4.12 Outline Tampilan Menu Admin
HEADER
ADMIN
Home Pemesanan Edit Produk Edit Profil Edit Member Edit Forum Edit Buku Tamu Logout
FOOTER
Gambar 3.16. Rancangan Interface Menu Admin
Rancangan interface pada menu admin, terdapat kerangka menu-menu admin seperti
home, pemesanan, edit produk, edit profil, edit member, edit forum, edit buku tamu, ADMIN
MENU LOGIN ADMIN