1.

Presentation model

Dalam UWE juga terdapat presentation model yang

merupakan penggembaran dari tata letak dari sebuah sistem

yang dibangun. Berikut presentation model yang telah

dibuat.

Gambar 22. Presentation model

Presentation model di atas merupakan presentasi dari

halama awal website, dimana pada halaman awal website

ini terdapat Top menu, User chart, serta informasi barang.

1.1.1.1 Tahap Konstruksi

Berikut adalah potongan program yang terdapat dalam sistem

penjualan online.
1. Kode menampilkan produk pada sistem.

35
Kode ini dibuat untuk memberikan layanan pada user untuk

melihat produk yang ada pada sistem.

....

elseif ($_GET[module]=='semuaproduk'){

// Tampilkan berapa item yang sudah

dimasukkan ke Keranjang Belanja

require_once "item.php";

// Tampilkan semua produk

echo "<span class=judul>&#187;

<b>Produk</b></span><br /><br />";

$p = new Paging2;

$batas = 8;

$posisi = $p->cariPosisi($batas);

$sql=mysql_query("SELECT * FROM produk

ORDER BY id_produk DESC LIMIT $posisi,

$batas");

while($r=mysql_fetch_array($sql)){

$harga =

number_format($r[harga],0,",",".");

echo "<table><tr><td><span

class=judul><a href=produk-

$r[id_produk]-

$r[produk_seo].html>$r[nama_produk]</a><

/span><br />";

// Apabila ada gambar dalam produk,

tampilkan

if ($r[gambar]!=''){echo "<span

class=image><img

36
 src='foto_produk/small_$r[gambar]'

border=0></span>";

.....

2. Melihat detail produk

......

elseif ($_GET[module]=='detailproduk'){

Tampilkan detail produk berdasarkan

produk yang dipilih

.....

$detail=mysql_query("SELECT * FROM

produk,kategori WHERE

kategori.id_kategori=produk.id_kategor

AND

id_produk='$_GET[id]'");

$d = mysql_fetch_array($detail);

$tgl = tgl_indo($d[tanggal]);

$deskripsi = nl2br($d[deskripsi]);

// Apabila ada gambar dalam berita,

tampilkan

if ($d[gambar]!=''){

echo "<span class=image><img

src='foto_produk/$d[gambar]'

border=0></span>";

37
 echo "$deskripsi <br />Rp.

<b>$harga</b> (stok: $d[stok])<br

/><br />

<a href=aksi.php?

module=keranjang&act=tambah&id=$d[id_p

roduk]><img src='images/beli.jpg'

border=0></a><br />";

........

3. Melakukan pembelian

Berikut potongan kode yang terdapat dalam sistem saat user

melakukan pembelian.

.....

$module=$_GET[module];

$act=$_GET[act];

if ($module=='keranjang' AND

$act=='tambah'){

$sid = session_id();

$sql2 = mysql_query("SELECT stok FROM

produk

WHERE

id_produk='$_GET[id]'");

$r=mysql_fetch_array($sql2);

//Memeriksa apakah stok masih tersedia

dalam database

if ($r[stok] == 0){

echo "stok habis";

38
 }

else{

sebelum melakukan pemesanan maka sistem

akan melakukan pencarian pada tabel

keranjang.

........

$sql = mysql_query("SELECT id_produk

FROM orders_temp WHERE

id_produk='$_GET[id]' AND

id_session='$sid'");

$isikeranjang=mysql_num_rows($sql);

if ($isikeranjang==0){

......

kemudian sistem akan memasukkan pilihan

kedalam table

.......

mysql_query("INSERT INTO orders_temp

(id_produk, jumlah, id_session,

tgl_order_temp, jam_order_temp) VALUES

('$_GET[id]', 1, '$sid',

'$tgl_sekarang', '$jam_sekarang')");

} else {

// melihat jumlah isi keranjang

mysql_query("UPDATE orders_temp SET

jumlah = jumlah + 1 WHERE id_session

='$sid' AND id_produk='$_GET[id]'");

deleteAbandonedCart();

39
 header('Location:keranjang-

belanja.html');

........

4. Selesai membeli

Kode untuk menyimpan transaksi yang telah dilakukan

.....

elseif

($_GET[module]=='simpantransaksi'){

$kar1=strstr($_POST[email], "@");

$kar2=strstr($_POST[email], ".");

if (empty($_POST[nama]) ||

empty($_POST[alamat]) ||

empty($_POST[telpon]) ||

empty($_POST[email]) ||

empty($_POST[kota])){

echo "Data yang Anda isikan belum

lengkap<br />

<a href='selesai-

belanja.html'><b>Ulangi Lagi</b>";

elseif (!ereg("[a-z|A-

Z]","$_POST[nama]")){

echo "Nama tidak boleh diisi dengan

angka atau simbol.<br />

<a href=javascript:history.go(-

1)><b>Ulangi Lagi</b></a>";

40
 }

elseif (strlen($kar1)==0 OR

strlen($kar2)==0){

echo "Alamat email Anda tidak valid,

mungkin kurang tanda titik (.) atau

tanda @.<br />

<a href=javascript:history.go(-

1)><b>Ulangi Lagi</b></a>";

else{

......

5. Mengisi form konfirmasi pembelian.

1.1.2 Peluncuran

Pada tahap peluncuran ini merupakan tahap dimana sistem yang telah
dibangun diimplementasikan. Pada sistem yang telah dibangun ini
diimplementasikan dengan cara di upload pada server internet. Dengan
nama domain www.hndesain.com berikut adalah tampilan awal halaman
website.

41
 Gambar 23. Halaman awal website

Dalam merancang halaman awal website ini mengacu pada

kerangka desain interface pada gambar 13, yakni terdapat header,

left content, right content serta footer. Sedangkan untuk

mendesain isi pada halaman tersebut digunakan acuan gambar 22

yakni presentation model yang telah dibuat sebelumnya.

Dimana pada presentation model jelas terlihat apa saja isi dari

satu halaman web yakni terdapat top menu , user chart, informasi

mengenai barang yang diletakkan pada left content, informasi

tentang detail produk yang diletakkan pada right content serta

pada footer terdapat review produk dll.

Mengacu pada navigation model yang menjelaskan tentang

navigasi dari struktur hypertext yang ada pada sistem, dimana

42
pada diagram tersebut terdapat salah satu alur yang berasal dari

main menu mengarah pada berbagai pilihan antara lain

a. Konfirmasi transfer

Pada menu konfirmasi transfer disisipkan jquery user

interface contact menu, dimana informasi tentang transfer

pelanggan yang akan langsung mengarah pada email admin.

b. Produk

Berdasarkan content model 2 pada gambar 19, dapat diketahui

bahwa class produk dapat diakses pada menu kategori serta

menu best seller. Menu tersebut terdapat pada halaman utama

website dapat dilihat pada gambar 23.

Selain itu berdasarkan navigation model setelah <<navigation

class>> produk alur akan mengarah pada beberapa jalur

antara lain :

1. Best seller

Pada menu best seller ini akan menunjukkan produk apa

saja yang paling sering dibeli. Berikut capture gambar

dari menu best seller.

43
 Gambar 24. Menu best seller

2. Latest produk

Selain mengarah pada menu best seller alur pada

navigation juga mengarah pada menu latest produk.

Menu latest produk ini menunjukkan produk terbaru

dari website.

Gambar 25. Menu latest produk

44
3. Beli

Selanjutnya setelah menu produk alur juga mengarah

pada menu beli. Disini user dapat melakukan pembelian,

dengan menekan tombol beli yang ada pada setiap

produk yang tampil. Contoh gambar tombol beli ada

pada gambar 25.

Gambar 26. Menu beli

Setelah user menglakukan klik pada tombol yang ada

maka alur sistem akan mengarah pada lanjut belanja

atau selesai belanja.

a. Lanjut belanja

Pada menu lanjut belanja berdasarkan navigation

model tanda panah akan kembalu ke menu utama

hal ini menandakan bahwa sistem akan kembali

ke menu utama agar user dapat memilih produk

yang akan dibeli selanjutnya.

45
 b. Selesai belanja

Pada menu selesai belanja maka user akan

disediakan form untuk mengisi data diri. Berikut

capture form data pembeli.

Gambar 27. Form data pembeli

Pada form ini user wajib mengisikan data,

apabila salah satu data tidak diisi maka

pembelian tidak dapat dilanjutkan.

Selanjutnya setelah form diisi maka user akan

mendapatkan id_pembelian serta informasi biaya

yang harus dibayarkan.

c. Review produk

Pada menu review ini akan menunjukkan review tentang

beberapa produk yang ada.

Penerapan Jquery user interface ini digunakan pada sistem dalam

menu profil. Berikut capture dari menu profil.

46
 Gambar 28. Menu profil

1.1.3 Evaluasi pelanggan

Pada evaluasi ini telah dilakukan percobaan pada pelanggan secara

langsung dan dihasilkan beberapa pernyataan dari pelanggan tersebut.

47