Rancangan Interface Penjualan Makanan Kesehatan Menggunakan Website Internet E-commerce

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 memberikanmenambah catatan kaki footer dan catatan kepala header. Menu Login Member Slide Foto Home Produk Keranjang Pembayaran Hubungi Forum Buku Tamu Perintah sebelum melakukan transaksi, anda harus mendaftar dan login. LOGO MOTTO Universitas Sumatera Utara

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 Universitas Sumatera Utara

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 MOTTO Universitas Sumatera Utara

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 MOTTO Universitas Sumatera Utara

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 Konfirmasi Universitas Sumatera Utara

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 Universitas Sumatera Utara

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 Universitas Sumatera Utara

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 Universitas Sumatera Utara

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 Jumlah Topik Universitas Sumatera Utara

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 MOTTO Universitas Sumatera Utara

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, dan kerangka menu logout admin. ADMIN MENU LOGIN ADMIN Universitas Sumatera Utara

3.5 Flowchart Program