Institutional Repository | Satya Wacana Christian University: Membangun Website E-Commerce di Toko Primajaya Aluminium Salatiga T0 562011010 BAB IV

(1)

26

4.1 Hasil Karya atau Implementasi

4.1.1 Tampilan awal

website

(

Home

)

Berikut ini adalah tampilan awal

website

pada index.php

Gambar 4.1 tampilan

Home

Pada tampilan awal atau

home

pada

website

ini berisi

beberapa informasi sebagai berikut :

1. login

admin

(2)

3. Daftar produk bagi pengunjung.

4. Daftar harga

5. Form comment

bagi pengunjung.

4.1.2 Tampilan

About

Berikut ini adalah tampilan

page About

pada About.php

Gambar 4.2 Tampilan

page about.php

Dalam tampilan ini berisi informasi mengenai Toko

Primajaya Aluminium Salatiga, yaitu sebagai berikut :

1. Contact person

Primajaya Aluminium

2. Email Primajaya Aluminium

3. Blogs

Primajaya Aluminium

4. Sistem pekerjaan beserta sistem pembayaran.

5. Daftar produk bagi pengunjung.

(3)

4.1.3 Tampilan

Partner

Berikut ini adalah tampilan

page Pa rtner

pada partner.php

Gambar 4.3 Tampilan

page partner.php

Pada tampilan ini berisi beberapa informasi mengenai

partner

kerja Toko Primajaya Aluminium Salatiga dan disisi

sebelah kanan ada daftar produk.

(4)

4.1.4 Tampilan

Product

Berikut ini adalah tampilan

product

pada

Product.php

Gambar 4.4 tampilan

product.php

(5)

Pada tampilan ini berisi seluruh produk Primajaya

Aluminium sesuai dengan kategori produk yang ada, pada

sisi sebelah kiri terdapat menu kategori produk, jika

pelanggan memilih atau meng-

click

salah satu kategori

tersebut, maka akan muncul gambar atau foto sesuai dengan

kategori yang dipilih beserta detail produk dan harga produk.

Kode Program 1. Kode program untuk

menampilkan semua

produk berupa gambar, harga dan detail produk.

<?php

$prod = $_GET['id'];

$cat = $_GET['cat'];

if($cat){

$sql = mysql_query("SELECT * FROM category WHERE id = '$cat'");

$jdl = mysql_fetch_array($sql);

echo "<h1 class='Judul'>Kategori $jdl[category]</h1>";

$sql2 = mysql_query("SELECT * FROM product WHERE id_category='$cat'");

while($t = mysql_fetch_array($sql2)){ ?>

<tr>

<th scope="row"><img title="<?php echo $t['product_name']; ?>" class="FotoProduk"

src="foto/<?php echo $t['image']; ?>" width="150px" height="200px" /><br /></th>

(6)

4.1.5 Tampilan Material

Berikut ini adalah tampilan Material

pada Material.php

Gambar 4.6 Tampilan

material.php

<td><?php echo $t['deskripsi']; ?><br /><div

class="">Rp.<?php echo $t['price']; ?> </div><br /></td>

</tr>

</table>

</a>

(7)

Pada tampilan ini hanya berisi beberapa gambar material

yang digunakan untuk pembuatan produk di Toko Primajaya

Aluminium Salatiga dan beberapa kategori produk.

4.1.6 Tampilan Menu

Login

Admin

Berikut ini adalah tampilan

login admin

pada admin.php

Gambar 4.7 Tampilan

login admin

Pada tampilan ini, admin harus mengisikan

username

dan

password,

setelah selesai mengisikan kemudian klik

button

login

, selanjutnya akan masuk ke

home

admin.

(8)

Kode Program 2. Kode program untuk

masuk pada

Login

Admin

<?php

include('koneksi.php');

//tangkap data dari form login

$username = $_POST["id_user"];

$password = $_POST["password"];

//untuk mencegah sql injection

//kita gunakan mysql_real_escape_string

$username = mysql_real_escape_string($id_user);

$password = mysql_real_escape_string($password);

//cek data yang dikirim, apakah kosong atau tidak

if (empty($id_user) && empty($password)) {

//kalau username dan password kosong

header("location:index.php?error=1");

break;

} else if (empty($id_user)) {

//kalau username saja yang kosong

header("location:index.php?error=2");

break;

} else if (empty($password)) {

//kalau password saja yang kosong

//redirect ke halaman index

header("location:index.php?error=3");

break;

(9)

4.1.7 Tampilan

Home

Admin

Gambar 4.8 tampilan

Home

admin

Pada tampilan

Home Login

pada Admin ini berisikan :

$q = mysql_query("select * from user where

id_user='$id_user' and password='$password'");

if (mysql_num_rows($q) == 1) {

//kalau username dan password sudah terdaftar di database

header('location:admin.php');

} else {

//kalau username ataupun password tidak terdaftar di database

header('location:index.php?error=4');

}

(10)

1. Produk yang dapat di

-update

oleh admin untuk

menambahkan produk baru, meng-

edit

detail

produk

ataupun harga setiap produk.

2. Kategori berisikan

form

kategori yang dapat

di-update

oleh admin dengan menambahkan kategori lain.

3. Logout

untuk admin jika ingin keluar dari sistem

admin.

4. Laporan berisikan beberapa nama-nama pembeli

beserta laporan penjualan barang yang dibeli oleh

customers

dilengkapi dengan tanggal pembelian, berikut

kode program untuk mengatur tanggal pembelian :

Kode Program 3. Kode program untuk

mengatur tanggal

pembelian pada

Laporan pada Admin.

<?php

$seminggu =

array("Minggu","Senin","Selasa","Rabu","Kamis","Jumat ","Sabtu");

$hari = date("w");

$hari_ini = $seminggu[$hari];

$tgl_sekarang = date("Ymd");

$thn_sekarang = date("Y");

$jam_sekarang = date("H:i:s");

$nama_bln=array(1=> "Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus",

"September", "Oktober", "November", "Desember");

(11)

4.1.8 Tampilan Produk Admin

Gambar 4.9 tampilan produk admin

Jika admin ingin menambahkan beberapa produk baru

kedalam

website

, kllik

button

“Tambah Produk Baru” akan

ganti tampilan seperti gambar 4.10.

Kemudian jika admin ingin menghapus atau meng-

edit

produk yang sudah ada, admin tinggal mengklik tulisan biru

“edit” atau “hapus” yang terletak disebelah kanan kolom

harga.

(12)

Gambar 4.10 tampilan tambah produk baru

Kode Program 4. Kode program untuk

menyimpan

kedatabase dari

updating

admin (aksi.php)

<?php

session_start();

error_reporting(0);

include "koneksi.php";

include "tanggal.php";

$mod=$_GET[mod];

$act=$_GET[act];

// Menghapus data

if (isset($mod) AND $act=='hapus'){

mysql_query("DELETE FROM ".$mod." WHERE id ='$_GET[id]'");

header('location:admin.php?mod='.$mod);

(13)

//Add Category

elseif ($mod=='category' AND $act=='input'){

$insert = mysql_query("INSERT INTO category (id,category) VALUES ('','$_POST[nama_kategori]')");

if($insert == FALSE){

echo "<p>Kategori gagal ditambahkan, alesannya:".(mysql_error())."</p>";

}

header('location:admin.php?mod='.$mod);

}

//Category Update

elseif ($mod=='category' AND $act=='update'){

$update = mysql_query("UPDATE category SET category = '$_POST[nama_kategori]' WHERE id = '$_POST[id]'");

if($update ==FALSE){

echo "<p>Update gagal dilakukan karena:".(mysql_error())."</p>";

}

header('location:admin.php?mod='.$mod);

}

//Add Product

elseif ($mod=='product' AND $act=='input'){

$lokasi_file = $_FILES['fgambar']['tmp_name'];

$tipe_file = $_FILES['fgambar']['type'];

$nama_file = $_FILES['fgambar']['name'];

(14)

$insert = mysql_query("INSERT INTO product

(product_name,price,image, id_category, deskripsi)

VALUES ('$_POST[product_name]', '$_POST[price]', '$nama_file','$_POST[cat]', '$_POST[deskripsi]')"); header('location:admin.php?mod='.$mod);

}

//Product Update

elseif ($mod=='product' AND $act=='update'){

$lokasi_file = $_FILES['fgambar']['tmp_name'];

$tipe_file =

$_FILES['fgambar']['type'];

$nama_file =

$_FILES['fgambar']['name'];

//If the image doesnt change

if (empty($lokasi_file)){

mysql_query("UPDATE product SET product_name = '$_POST[product_name]',

price = '$_POST[price]',

id_category = '$_POST[cat]',

deskripsi = '$_POST[deskripsi]'

WHERE id = '$_POST[id]'");

}

else {

move_uploaded_file($lokasi_file,"../foto/$nama_file ");

mysql_query("UPDATE product SET product_name= '$_POST[product_name]',

(15)

4.1.9 Tampilan Kategori Admin

Gambar 4.10 tampilan kategori admin

Jika di kllik

button

“Tambah” akan ganti tampilan seperti

berikut :

price = '$_POST[price]',

image = '$nama_file',

id_category = '$_POST[cat]', deskripsi = '$_POST[deskripsi]'

WHERE id = '$_POST[id]'");}

header('location:admin.php?mod='.$mod);

}

(16)

Gambar 4.11 tampilan tambah kategori

Kode Program 5. Kode program untuk

menyimpan

penambahan kategori kedatabase (aksi.php)

//Add Category

elseif ($mod=='category' AND $act=='input'){

$insert = mysql_query("INSERT INTO category (id,category) VALUES ('','$_POST[nama_kategori]')");

if($insert == FALSE){

echo "<p>Kategori gagal ditambahkan, alesannya:".(mysql_error())."</p>";

}

header('location:admin.php?mod='.$mod);

(17)

4.1.10 Tampilan Laporan Admin

Gambar 4.12 tampilan laporan admin

Kode Program 6. Kode program untuk

menampilkan

Laporan pada Admin (laporan.php)

<?php

$sid = session_id();

$sql = mysql_query("SELECT * FROM order_product, product WHERE order_product.id_product=product.id");

<h1 class="Judul">Laporan</h1>

<th>Nama Produk</th>

(18)

<th>Alamat Pemesan</th>

<th>Telepon</th>

<th>Jumlah</th>

<th>Tanggal</th>

</tr>

<?php

$no = 1;

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

echo"<tr><td>$no</td>

<td>$r[product_name]</td>

<td>$r[address]</td>

<td>$r[phone]</td>

<td><center>$r[jumlah]</center></td>

<td>$r[tanggal]</td>

</tr>";

$no++;

} ?>

(19)

Jika anda ingin keluar dari sistem administrator, klik link

“logout” maka akan mun

cul konfirmasi seperti berikut ini :

Gambar 4.13 tampilan keluar sistem admin

Kode Program 7. Kode program untuk

keluar dari sistem

admin.

<?php

session_start();

session_destroy();

echo "<script>window.alert('Berhasil keluar dari sistem administrator');

window.location=('../index.php')</script>";

(20)

4.1.11 Tampilan

Login

Customers

Gambar 4.14 tampilan

login customers

Dengan mengisikan nama

user

dan

password

,

maka

customers

akan masuk kehalaman

home

customers

. Jika nama

user

dan

pa ssword

yang anda

masukkan salah maka page akan me-

reload

(21)

4.1.12 Tampilan

Home Customers

Gambar 4.15 tampilan

home

customers

Kode Program 8. Kode program untuk memunculkan nama

customers

<?php

$member_id=$_SESSION['member_id'];

$result=mysql_query("select * from members where member_id='$member_id'")or die(mysql_error);

$row=mysql_fetch_array($result); $FirstName=$row['FirstName'];

$LastName=$row['LastName'];

echo $FirstName." ".$LastName;

(22)

4.1.13 Tampilan Produk

Customers

Gambar 4.16 tampilan produk

customers

Kode Program 9. Kode program untuk memunculkan setiap

kategori produk yang dipilih seperti terlihat pada gambar

4.16

<a href="product.php?id=<?php echo $t['id']; ?>"> <img title="<?php echo $t['product_name']; ?>" class="FotoProduk" src="foto/<?php echo $t['image']; ?>" width="180px" height="150px" /></a>

<a class="pesanprod" href="input.php?input=add&id=<?php echo $t['id']; ?>"><input name="" type="button"

(23)

4.1.14 Tampilan

Detail

Produk pada

Customers

Gambar 4.17 tampilan

detail

produk pada

customers

<a class="detprod" href="product.php?id=<?php echo $t['id']; ?>"><input name="" type="button"

value="Detail" /></a>

</div>

(24)

Kode Program 10. Kode program untuk menampilkan detail

setiap produk yang dipilih. Seperti pada gambar 4.17.

<?php

$sql = mysql_query("SELECT * FROM product WHERE id='$prod'");

$d = mysql_fetch_array($sql);

<h1 class="Judul">Produk <?php echo $d['product_name']; ?></h1>

<th scope="row"><img class="GambarKetProd"

src="foto/<?php echo $d['image']; ?>" width="300px" height="200px" /><br/></th>

</tr>

</table>

</div>

<a class="haha" href="javascript:history.go(-1)">Kembali</a> | <a class="haha"

href="input.php?input=add&id=<?php echo $d['id']; ?>">Beli</a>

(25)

4.1.15 Tampilan

Cart

Pembelian pada

Customers

Gambar 4.18 tampilan

ca rt

pembelian

Pada tampilan cart pembelian customers ini, customers

dapat membeli atau menambahkan order kedalam trolly yang

sudah ada, kemudian untuk tahap pembayaran, customers

tinggal langsung masuk ketahap selanjutnya.

(26)

Kode Program 11. Kode program untuk menampilkan dan

menyimpan pesanan

Jika trolly anda dalam keadaan kosong, klik link “hapus”

maka akan muncul konfirmasi seperti berikut ini :

Gambar 4.19 konfirmasi pesanan kosong

<?php

include "koneksi.php";

$sid = session_id();

$sql = mysql_query("SELECT * FROM keranjang");

$row = mysql_num_rows($sql);

$jml = mysql_fetch_array($sql);

echo "<span class='KetCart'>$row item</span>";

(27)

Kode Program 12. Kode program untuk menjumlah pesanan

dan konfirmasi pesanan nol.

<?php

$sid = session_id();

$no = 1;

$sql = mysql_query("SELECT * FROM keranjang, product WHERE id_session='$sid' AND

keranjang.id_product=product.id");

$hitung = mysql_num_rows($sql);

if ($hitung < 1){

echo"<script>window.alert('Trolly Anda Kosong !');

window.location=('indexmember.php')</script>"; } else { while($tian=mysql_fetch_array($sql)){ echo"<tr><td>$no</td> <td><img width=50 src=foto/$tian[image]></td> <td>$tian[product_name]</td> <td>$tian[qty]</td> <td>$tian[price]</td> <td><a href=input.php?input=delete&id=$tian[id_keranjang]>Hapus</ a></td></tr>";$no++; } } ?>

(28)

4.1.16 Tampilan Konfirmasi Pemesanan pada

Customers

Gambar 4.20 tampilan konfirmasi pesanan

Dalam tampilan konfirmasi tersebut diatas pada gambar 4.20,

setelah selesai melakukan pesanan makan akan muncul

keterangan mengenai identitas kelengkapan

customers.

Jika anda telah selesai melakukan pemesanan barang, klik

button

“pesan” maka akan muncul konfirmasi seperti berikut

(29)

Kode Program 13. Kode program untuk menjumlah pesanan

dan konfirmasi pesanan nol.

<?php

$member_id=$_SESSION['member_id'];

$result=mysql_query("select * from members where member_id='$member_id'")or die(mysql_error);

$row=mysql_fetch_array($result);

$FirstName=$row['FirstName'];

$LastName=$row['LastName'];

$email=$row['email'];

$address=$row['address'];

$phone=$row['telp'];

echo $FirstName." ".$LastName;

echo '/';

echo $email;

echo '/';

echo $address;

echo '/';

echo $phone;

?><br />

<a class="tocart" href="cart.php">Trolly Anda :</a> <?php include "cart2.php"; ?><br />

(30)

(31)

Structure Database menggunakan php MYSQL :

1. Tabel

2. Tabel

Comment Partner

3. Tabel

Comment

Primajaya

(32)

5. Tabel Keranjang

6. Tabel Material

7. Tabel member atau

customers

(33)

9. Tabel

order product

(34)

4.2 Hasil Pengujian

Berikut adalah tabel pengujian

website

Toko Primajaya

Aluminium Salatiga sebagai berikut :

NO

Fungsi yang

diuji

Cara

pengujia

n

Hasil yang

diharapkan

Hasil

pengujia

n

1 Form

management

Home

Memilih

halaman

utama

atau

Home

Menampilkn

akses

halaman

home dan

akses sebagai Admin

dan Customers.

OK

2 Form

management

About

Memilih

About

Menampilkan akses

ke halaman About

OK

3 Form

management

Partner

Memilih

Partner

Menampilkan akses

ke halaman Partner

OK

4 Form

management

detail

Memilih

detail

produk

yang

diinginka

n

Menampilkan akses

halaman detail

OK

5 Form

management

cart

Memilih

produk

yang

dibeli

Menampilkan akses

halaman cart

OK

6 Form

management

Mengkon

firmasi

Menampilkan akses

halaman konfirmasi

(35)

konfirmasi

pembelian

pembelia

n

pembelian

7 Form

management

material

Memilih

material

Menampilkan akses

ke halaman material

OK

8 Form

management

product

Memilih

product

Menampilkan akses

ke halaman product

OK

9 Form

management

comment

Mengisik

an

form

comment

Menampilkan akses

halaman comment

OK

10 Form

management

customers

Mengisik

an

usernam

e

dan

password

Menampilkan akses

halaman customers

OK

11 Form

management

admin

Mengisik

an

usernam

e

dan

password

Menampilkan akses

halaman admin

OK

15 Form

management

update

product

pada

admin.

Mengisik

an nama

produk,

jenis

kategori,

harga

produk,

foto

produk.

Menampilkan akses

halaman

update

product

dan

mengupdate database

produk.

(36)

16 Form

management

update

pada admin.

Mengisik

an nama

kategori

yang

akan

ditambah

kan.

Menampilkan akses

halaman

update

dan

mengupdate database

kategori.

(37)

4.3 Analisis

Website e-commerce

ini dapat diakses oleh

Customers

Toko Primajaya Aluminium sebagai pelanggan yang dapat

melakukan pemesanan produk, Admin Toko Primajaya

Aluminium sebagai

user

pengelola data produk, dan juga

seluruh masyarkat umum sebagai pengunjung

website

yang

dapat melihat informasi-informasi mengenai

profile

Toko

Primajaya Aluminium.

Dengan adanya

website

ini diharapkan Toko Primajaya

Aluminium lebih dikenal oleh masyarakat luas dan

memberikan pelayanan yang maksimal bagi pengunjung

ataupun

customers

.

(1)

5. Tabel Keranjang

6. Tabel Material

7. Tabel member atau customers

(2)

9. Tabel order product

(3)

4.2 Hasil Pengujian

Berikut adalah tabel pengujian

website

Toko Primajaya

Aluminium Salatiga sebagai berikut :

NO Fungsi yang diuji Cara pengujia n Hasil yang diharapkan Hasil pengujia n

1 Form

management Home Memilih halaman utama atau Home

Menampilkn akses halaman home dan akses sebagai Admin dan Customers.

2 Form

management About

Memilih page About

Menampilkan akses ke halaman About

3 Form

management Partner

Memilih page Partner

Menampilkan akses ke halaman Partner

4 Form

management detail Memilih detail produk yang diinginka n

Menampilkan akses halaman detail

5 Form

management cart Memilih produk yang dibeli

Menampilkan akses halaman cart

6 Form

management

Mengkon firmasi

Menampilkan akses halaman konfirmasi

(4)

konfirmasi pembelian

pembelia n

pembelian

7 Form

management material

Memilih page material

Menampilkan akses ke halaman material

8 Form

management product

Memilih page product

Menampilkan akses ke halaman product

9 Form

management comment

Mengisik an form comment

Menampilkan akses halaman comment

10 Form

management customers Mengisik an usernam e dan password

Menampilkan akses halaman customers

11 Form

management admin Mengisik an usernam e dan password

Menampilkan akses halaman admin

15 Form

management update product pada admin.

Mengisik an nama produk, jenis kategori, harga produk, foto produk.

Menampilkan akses halaman update

product dan

mengupdate database produk.

(5)

16 Form management update category pada admin.

Mengisik an nama kategori yang akan ditambah kan.

Menampilkan akses halaman update

category dan

mengupdate database kategori.

(6)