Selasa, 06 Juni 2017

Prototype Website E-Commerce

PROTOTYPE WEBSITE E-COMMERCE


TUGAS PENGANTAR WEB SCIENCE
Disusun sebagai Salah Satu Syarat Penilaian Tugas
Pengantar Web Science

Disusun oleh :

FAKHRI YUDA RABBANI
NPM : 52415455
Kelas : 2IA01

   





Dibimbing oleh Dosen :
ATIKA LARAS PARAMITA





UNIVERSITAS GUNADARMA
                                                                       2016/2017 

   Pada kali ini saya akan menceritakan tugas yang saya peroleh dari mata kuliah Pengantar Web Science. Nah, pada tugas kali ini, kelompok kami diberikan tugas untuk membuat sebuah rancangan atau prototype Website E-Commerce. Nama perusahaan yang kami buat adalah Pesancatering.com

   Pada tugas ini, saya membuat tampilan menu ketika menu makanan dipilih. Di dalamnya terdapat logo perusahaan, nama menu makanan dan keterangannya,  harga, tombol order, comment dan rating terhadap makanan tersebut.



   Di pojok kiri, saya letakkan logo dari perusahaan Pesancatering.com. Namun pembuatan Logo tersebut merupakan tugas dari rekan sekelompok saya. Pada tampilan diatas, terlihat sisi gelap yang di sisi kanan dan terang di sisi kiri. Saya melakukan gradiasi hitam dan putih dari kanan ke kiri pada layer baru, kemudian saya letakkan di atas gambar makanan tersebut. Kemudian saya set layer gradasinya menjadi Multiply. Tujuan saya membuat seperti itu, agar nama makanan dan keterangannya yang berwarna putih dapat terlihat pada bagian kanan.

   Pada bagian bawah kiri, terdapat comment dan rating yang diberikan para pengunjung website yang mungkin telah mencicipi makanan tersebut. Sedangkan pada bagian bawah kanan, terdapat rating secara keseluruhan terhadap makanan tersebut. Rating  diakumulasi dari bintang 1 sampai 5.


   Di bawah keterangan makanan, terdapat harga makanan dan tombol Order yang digunakan ketika kita hendak memesan makanan tersebut. Ketika melakukan order, maka akan muncul pop-up di tengah layar.

Berikut tampilan ketika tombol order di tekan :
   Ketika Pop up muncul di tengah, saya membuat tampilan di belakangnya terlihat buram. Saya membuat seperti itu agar user akan terfokus pada tampilan yang berada di tengah. user akan memasukkan jumlah yang dipesan dan melihat total biaya yang akan dibayarkan. Lalu user dapat memasukkan catatan singkat terhadap pesanannya, misalnya kita tidak ingin menggunakan cabai, MSG / micin, tidak terlalu manis, dan lainnya. Apabila sudah selesai, user dapat memasukkan pesanan ke dalam keranjang untuk diakumulasi dengan pesanan lainnya yang akan dibayarkan nanti.