Lampiran 1. Prosedur Sistem E-Cocotrade

(1)

84

LAMPIRAN

(2)

85 Lampiran 1. Prosedur Sistem E-Cocotrade

A. Pembuatan desain layout

1. Buat layout menggunakan CSS 2. Buat nama website

3. Atur warna background homepage, jenis tulisan, ukuran tulisan 4. Masukkan gambar logo serta nama perusahaan

B. Pembuatan Menu utama dan submenu

1. Masukkan lima menu utama dan 6 submenu beserta link yang akan dituju 2. Masukkan menu pencarian produk secara cepat di bagian kanan halaman 3. Masukkan Sign In dan Sign Out customer

C. Pembuatan Menu “Home”

1. Masukkan deskripsi tentang PT. Cocotrade Indonesia di Indonesia 2. Masukkan gabungan gambar produk-produk kulit yang dijual

D. Pembuatan Menu “Product”

1. Masukkan tabel dan juga atribut nomer, nama produk, spesifikasi, stok, harga dan gambar produk 2. Masukkan ‘product chart’ (gambar keranjang bertuliskan ‘buy’), agar customer dapat melakukan pembelian secara langsung

3. Lakukan paging (pembuatan halaman) agar tampilan menjadi rapi

E. Pembuatan Menu “Payment”

1. Buat tata cara pembayaran

2. Buat pemilihan metode pembayaran

3. Buat daftar daerah dan negara pengiriman serta biaya dan lama waktu pengiriman

F. Pembuatan Menu “Contact”

1. Buat formulir isian untuk mengontak admin

2. Buat contact person perusahaan, meliputi alamat dan nomor kontak

G. Pembuatan Menu “Customer services”

1. Buat forum diskusi

2. Buat menu add topic yang dapat mengakomodir customer untuk membuka topik diskusi baru 3. Buat menu reply yang memfasilitasi customer menanggapi topik yang sudah ada

H. Pembuatan menu pencarian produk secara cepat yang diklasifikasikan ke dalam lima jenis produk

1. Buat link menu untuk tampilan masing-masing lima jenis produk (Food, Baverage, Organic, Personal Care, dan Others)

2. Langkah selanjutnya sama seperti pembuatan menu product

I. Pembuatan Menu “Sign Up”

1. Buat formulir registrasi yang berisi data personal berupa nama, tanggal lahir, jenis kelamin, alamta email, telepon, dan alamat lengkap

(3)

86

J. Pembuatan Menu “Sign In”

1. Buat formulir login yang berisi email dan username 2. Buat link logout

K. Pembuatan Link “Radar Chart”

1. Buat tampilan radar chart menggunakan modul radar chart

2. Tambahkan penjelasan radar chart berbentuk kalimat dan rating bintang

L. Pembuatan Menu “Recommended”

1. Buat database cluster yang berasal dari database transaksi dan database rating 2. Iterasi database cluster sampai matriks akhir sama dengan matriks sebelumnya 3. Buat List Box untuk memilih kelompok cluster

4. Tampilkan produk hasil clustering berdasarkan kelompok yang dipilih

M. Pembuatan Link “Give Rate”

1. Buat tampilan bintang menggunakan Adobe Photoshop

2. Buat tampilan radio button yang dihubungkan ke tampilan bintang menggunakan CSS

N. Pembuatan menu Delivery cost (untuk admin)

1. Buat data nilai ongkos kirim untuk 944 daerah dan negara tujuan

2. Buat menu delete dan juga update untuk menghapus dan memperbarui data ongkos kirim

O. Pembuatan menu Update product (untuk admin)

1. Buat data tampilan produk, seperti dalam membuat menu product

2. Tambah menu delete dan update untuk menghapus dan memperbarui data-data produk

P. Pembuatan menu Transaction (untuk admin)

1. Masukkan data – data transaksi meliputi data customer, total harga pembelian, tujuan pengiriman, dan metode pembayaran

2. Buat status pemesanan, yang dapat diubah – ubah oleh admin, agar customer dapat memantau kondisi pesannnya

Q. Pembuatan menu Profit and graph (untuk admin)

1. Buat data pilihan bulan dan tahun untuk memilih waktu tampilan profit

2. Buat penghitungan nilai untung atau rugi dengan cara mengalikan biaya produksi/pembelian barang dengan stok barang dan menguranginya dengan hasil perkalian antara nilai penjualan barang dengan barang yang terjual

(4)

87 Lampiran 2. Rincian Coding Halaman Utama E-Cocotrade (home.php)

<? session_start(); $si=$_SESSION['user']; extract($_GET); extract($_POST); $_SESSION["x"]=NULL; ?> <html> <head>

(5)

88

.orange1 { font-family: verdana; font-size: 10px; font-weight: bold; color: #FF8A00; text-decoration: underline; } .a { color: #A57E57; } .z { font-size: 20px; } .green1 { font-size: 20px; } .Z { font-size: 20px; } a {

font-family: Comic Sans MS, cursive; font-size: 8px; color: #5BA225; } a:link { text-decoration: none; } a:visited { text-decoration: none; color: #5BA225; } a:hover { text-decoration: none; color: #aa7b51; } a:active { text-decoration: none; color: #5BA225; } .f .d {

font-family: Comic Sans MS, cursive; }

.f strong {

font-family: Comic Sans MS, cursive; }

body,td,th {

font-family: Verdana, Geneva, sans-serif; }

h1,h2,h3,h4,h5,h6 {

body {

background-color: #A0D8F9; }

.f {

font-family: Georgia, Times New Roman, Times, serif; }

(6)

89

.gede { font-family: Verdana, Geneva, sans-serif; font-size: 14px;

}

.green2 { font-family: Verdana, Geneva, sans-serif; font-size: 9px; color: #5BA225; text-decoration: underline; border: none; font-weight: normal; } --> </style> <script type="text/javascript"> <!-- function MM_swapImgRestore() { //v3.0

var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; }

function MM_preloadImages() { //v3.0

var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} }

function MM_findObj(n, d) { //v4.01

var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x;

}

function MM_swapImage() { //v3.0

var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} }

//--> </script> </head>

<body leftmargin=0 topmargin=0 marginwidth=0 marginheight=0

onLoad="MM_preloadImages('images/product2.jpg','images/payment2.jpg','images/contact2.jpg','ima ges/cs2.jpg')">

<tr>

(7)

90

</tr> <tr>

<td><img src="images/b0.jpg" border="0"

usemap="#Map8"><img src="images/home2.jpg" width="87" height="50"><a href="product.php" onMouseOut="MM_swapImgRestore()"

onMouseOver="MM_swapImage('product','','images/product2.jpg',1)"><img

src="images/product.jpg" name="product" width="88" height="50" border="0"></a><a href="paymentmethod.php" onMouseOut="MM_swapImgRestore()"

onMouseOver="MM_swapImage('payment','','images/payment2.jpg',1)"><img

src="images/payment.jpg" name="payment" width="88" height="50" border="0"></a><a href="contact.php" onMouseOut="MM_swapImgRestore()"

onMouseOver="MM_swapImage('contact','','images/contact2.jpg',1)"><img src="images/contact.jpg" name="contact" width="88" height="50" border="0"></a><a href="support.php"

onMouseOut="MM_swapImgRestore()"

onMouseOver="MM_swapImage('cs','','images/cs2.jpg',1)"><img src="images/cs.jpg" name="cs" width="88" height="50" border="0"></a><img src="images/b6.jpg"></td>

</tr> <tr> <td bgcolor="#8BC53D"><img src="images/logo.jpg"></td> </tr> </table> </td>

<tr>

<td align="center" height="45" bgcolor="#8BC53D"><p> <span class="d">Use email as username to Log in</span> </p></td>

</tr> <tr>

<tr>

<tr>

<td colspan="2" align="center" valign="top" class="gede" style="text-decoration:none; color: #8BC53D;"><a href="signup.php" class="gede">sign up</a> ||

<span class="gede" style="text-decoration:none; color: #8BC53D;"> <? if($si==NULL)

{

(8)

91

</span> <a href="signin.php" class="gede">sign in</a> <? } else echo("<a href=logout.php class=gede>logout</a>"); ?></td> </tr> <tr>

<td width="51" class="green2" style="text-decoration:none" align="right"><strong>Email  </strong></td>

</tr> </table></td> </tr>

<tr>

<tr>

<td width="71" class="green2" style="text-decoration:none" align="right"><strong>Password  </strong></td>

</tr> <tr>

<tr>

(9)

92

<? include"tanggal.php";?> </marquee></strong></b></p> </td> </tr> <tr>

<tr>

<tr>

<tr>

<tr>

<tr>

<td><a href="product.php?ind=1" onMouseOut="MM_swapImgRestore()"

onMouseOver="MM_swapImage('food','','images/food2.jpg',1)"><img src="images/food.jpg" name="food" width="190" height="25" border="0"></a></td>

</tr> <tr>

onMouseOver="MM_swapImage('baverage','','images/baverage2.jpg',1)"><img

src="images/baverage.jpg" name="baverage" width="190" height="25" border="0"></a></td> </tr>

<tr>

onMouseOver="MM_swapImage('organic','','images/organic2.jpg',1)"><img

src="images/organic.jpg" name="organic" width="190" height="25" border="0"></a></td> </tr>

(10)

93

</tr> <tr>

onMouseOver="MM_swapImage('others','','images/others2.jpg',1)"><img src="images/others.jpg" name="others" width="190" height="25" border="0"></a></td>

</tr> <tr>

<td><a href="productcluster.php?re=1" onMouseOut="MM_swapImgRestore()"

onMouseOver="MM_swapImage('recommended','','images/recommended2.jpg',1)"><img src="images/recommended.jpg" name="recommended" width="190" height="25" border="0"></a></td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr>

(11)

94

<tr>

<tr>

<tr>

<tr>

<td height="212" valign="top"><style type="text/css"> <!--

body,td,th {

font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;

font-weight: bold; }

-->

</style>

</form>  </td> </tr>

<tr>

<area shape="rect" coords="7,12,66,32" href="home.php"> <area shape="rect" coords="87,11,151,30"

href="product.php">

(12)

95

</tr> </table></td> </tr> </table></td> </tr> </table></td> </tr> </table></td> </tr> </table></td>

<tr>

</table>

</body> </html>

(13)

96 Lampiran 3. Panduan Pemakaian Program Simulasi Website PT. Cocotrade

Indonesia

Menu Customer A. Link Sign Up

Sign Up adalah proses pendaftaran/registrasi customer baru. Registrasi dapat dilakukan dengan langkah-langkah sebagai berikut :

a. Melalui link menu Sign Up yang terdapat di samping kiri pengguna di atas form Sign In dan seelah link Sign In

b. Customer diminta mengisi beberapa data (yang diberi tanda * berarti wajib untuk diisi)

B. Link Sign In

Setelah mengisi form registrasi, berarti customer telah terdaftar sebagai customer tetap, dan apabila ingin melakukan pemesanan produk, harus melalukan login, dengan memasukkan alamat email dan password. Setelah selesai bertransaksi, customer diharuskan melakukan logout.

C. Menu Home

Merupakan deskripsi dari PT. Cocotrade Indonesia sebagai perusahaan penjualan (trading) Agroindustri Kelapa di Indonesia yang berorientasi ekspor dan menjual berbagai produk turunan kelapa.

D. Menu Product

Terdiri dari 5 submenu, yaitu Food, Beverage, Organic, Personal Care, dan Others. Menu ini memperlihatkan 97 jenis produk turunan kelapa yang diklasifikasikan sesuai dengan judul submenu. Berikut langkah-langkah untuk melakukan pemesanan produk :

a. Setelah melakukan Sign In, customer dapat membeli produk, dengan menekan link Buy yang bergambar keranjang, kemudian akan muncul daftar barang yang dibeli beserta jumlah, gambar dan harga, di bawah list produk tersebut

b. Jumlah barang yang dibeli sesuai dengan berapa kali menekan tombol Buy

c. Jika ingin membatalkan pemesanan, bisa menekan cancel, yang bergambar tanda silang d. Setelah pemilihan produk selesai, klik tombol check out

e. Kemudian customer melakukan pemilihan jenis pembayaran dan juga tujuan pengiriman f. Setelah itu akan muncul daftar invoice, dan dapat langsung dicetak.

E. Menu Payment

Menu ini berisi cara-cara dan tahapan metode pembayaran dalam melakukan transaksi. Terdapat dua metode pembayaran, yaitu dengan menggunakan fasilitas Credit Card atau Paypal.

F. Menu Contact

Menu ini dapat diisi oleh customer dan juga calon customer (belum mengisi form registrasi) untuk berkomunikasi dengan perusahaan. Customer dipersilahkan untuk mengisi nama, alamat email, no telepon, topik yang ingin ditanyakan, dan isi pertanyaan.

(14)

97

G. Menu Customer Services

Pada menu ini, customer dapat saling berdiskusi dalam sebuah forum antar customer dengan customer lain.

a. Jika ingin memulai judul topik yang baru, klik menu add topic. Lalu masukkan Judul topik dan konten (isi) nya, kemudian klik tombol submit.

b. Jika ingin me-reply / menjawab atau menanggapai isi topik yang sudah ada, klik di link judul topik, kemudian masukkan jawaban, atau tanggapan dan klik submit, maka akan tertera identitas / nama customer serta tanggal penulisan.

H. Link Give Rate

Pada menu ini, baik customer atau calon customer dapat memeberikan penilaian, seperti polling berbentuk rating bintang (1-5 bintang). Pengguna hanya cukup menggeser dan mngklik jumlah bintang yang ingin dipilih berdasarkan nilai yang ingin dimasukkan. Setelah di submit , maka data tersebut sudah masuk ke dalam database rating untu acuan dalam pembuatan radar chart dan rekomendasi dari perhitungan clustering.

I. Link Radar Chart

Pada menu ini, baik customer atau calon customer dapat melihat grafik berupa radar yang menyerupai bentuk jaring laba-laba guna mendapatkan perbandingan nilai rating dari kriteria design, brand, price, amount, product reliability, dan stock on hand. Radar chart tersebut dapat menjadi rekomendasi bagi customer sebelum melakukan transaksi.

J. Menu Recommended

Pada menu ini, baik customer atau calon customer dapat melihat produk rekomendasi dengan cara memiilih kelompok (cluster) produk. Terdapat tiga pilihan yaitu High Recommended, Medim Recommended, dan Low Recommended.

Menu Administrator 1. Delivery Cost

Menu ini menyediakan fasilitas untuk mengedit data tujuan pengiriman beserta biaya dan juga lama waktu pengiriman. Langkah yang ditempuh adalah :

a. Jiak ingin mengedit data yang sudah ada, klik menu edit yang ditandai dengan gambar pensil, kemudian edit data-datanya

b. Jika ingin menghapus data tujaun yang sudah ada, klik menu delete yang ditandai dengan gambar silang

c. Jiak ingin menambahkan tujuan pengiriman yang baru, klik add destination, kemudian masukkan data-data yang dibutuhkan,.

2. Transaction

Menu ini menyajikan daftar transaksi yang dilakukan oleh customer, yang berisi nama

customer, tujaun pengirirman, produk yang dibeli, total pembelian, dan metode pembayaran yang digunakan. Dalam hal ini, admin dapat meng-update status pesanan / pengiriman agar dapat dilihat oleh customer. Langkah- langkahnya antara lain :

(15)

98

b. Link pertama adalah pending, lalu jika sudah dalam proses mengirim, klik link pending tersebut, maka akan berubah menjadi link on process

c. Jika barang sudah tiba, maka link on process, dapat diubah menjadi link delivered.

3. Update Product

Menu ini merupakan fasilitas bagi admin utnuk mengi data terbaru mengenai produk yang ditawarkan, meliputi data spek, stok serta harga produk.

Langkah-langkahnya adalah :

a. Klik menu Update yang ditanda dengan gambar pensil, lalu lakukan pengupdate-an atau pengeditam informasi

b. Jika ingin menghapus produk, klik menu Delete yang ditandai dengan gambar silang, maka otomatis, produk akan terhapus dari list/daftar produk yang ditawarkan kepada customer.

4. Sales Profit and Sales Graph

Menu ini dibuat untuk membantu admin dalam menghitung profit (keuntungan) atau loss (kerugian) penjulaan per item produk per bulannya dan juga untuk melihat grafik penjualan per tahun . Langkah-langkah yang ditempuh antara lain :

a. Pilih bulan dan tahun berapa yang ingin dilihat informasi penjualannya, lalu klik tombol show b. Secara otomatis akan keluar data perhitungan profit atau loss per item produknya.

c. Lalu untuk melihat grafik penjualnnya, klik link Sales Graph, di pojok kiri tampilan form d. Kemudian pilih tahun yang akan dilihat data penjualannya. Klik tombol show