• Tidak ada hasil yang ditemukan

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

N/A
N/A
Protected

Academic year: 2017

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

Copied!
37
0
0

Teks penuh

(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.

Menu

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

(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

(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)){ ?>

<div class="produk">

<table width="500" border="1">

<tr>

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

(6)

4.1.5

Tampilan Material

Berikut ini adalah tampilan Material

pada Material.php

Gambar 4.6 Tampilan

page

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

(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.

Page

Produk yang dapat di

-update

oleh admin untuk

menambahkan produk baru, meng-

edit

detail

produk

ataupun harga setiap produk.

2.

Page

Kategori berisikan

form

kategori yang dapat

di-update

oleh admin dengan menambahkan kategori lain.

3.

Menu

Logout

untuk admin jika ingin keluar dari sistem

admin.

4.

Page

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

Page

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

(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 ");

(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>

<table class="TableCart">

<tr><th>No</th>

<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[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

<div class="produk">

<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>

<br class="clearfloat" />

<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>

<div class="KetProd">

<table width="600" border="1"><tr>

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

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

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

</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

(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 !');

(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 />

(30)
[image:30.516.86.442.80.539.2]
(31)

Structure Database menggunakan php MYSQL :

1.

Tabel

Category

2.

Tabel

Comment Partner

3.

Tabel

Comment

Primajaya

[image:31.516.85.436.176.611.2]
(32)

5.

Tabel Keranjang

6.

Tabel Material

7.

Tabel member atau

customers

[image:32.516.87.434.143.635.2]
(33)

9.

Tabel

order product

[image:33.516.86.433.140.539.2]
(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

page

About

Menampilkan akses

ke halaman About

OK

3

Form

management

Partner

Memilih

page

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

page

material

Menampilkan akses

ke halaman material

OK

8

Form

management

product

Memilih

page

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

category

pada admin.

Mengisik

an nama

kategori

yang

akan

ditambah

kan.

Menampilkan akses

halaman

update

category

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.

Gambar

Gambar 4.1 tampilan Home
Gambar 4.2 Tampilan page about.php
Gambar 4.3 Tampilan page partner.php
Gambar 4.4 tampilan product.php
+7

Referensi

Dokumen terkait

Tampilan Halaman Tentang Kami berisi tentang Visi dan Misi Distro Happy Sunday .Tampilan ini sama pada tampilan halaman member dan Admin.. Gambar 4.2 Tampilan Halaman

Pada tampilan ini menggambarkan tentang contoh animasi patahan tanah, berisi gambar tanah yang bergeser kebawah disertai petunjuk geseran,di bagian pojok kiri atas

Dalam halaman Akun produk yang dipilih berhasil diseleksi berikut detail yang harus dibayarkan oleh user... User menunggu hingga status telah dikonfirmasi

Cara menampilkan widget : pilih menu tampilan &gt; widget &gt; tarik widget kategori produk ke kolom primary sidebar (pada website akan tampil di kolom sebelah kiri) &gt;

Pada bagian sebelah kiri terdapat 10 tab menu, yaitu : Pendaftaran, Data Peserta, Data Keluarga, Data Ahliwaris, Data Pensiun, Data Bekas Pegawai, Data Jatuh Tempo Pensiun,

Pada halaman Cara Pembelian dijelaskan mengenai kontak dari instansi terkait beserta Terms &amp; Conditions yang menjadi aturan dari instansi terkait... Page

Produk yang dicantumkan merupakan produk yang ready untuk saat ini, jadi masih perlu dikembangkan lagi bisa menggunakan panel admin untuk login admin dari web terkait

Start Menu Utama Play Menu Peta Petunjuk Tampilan Petunjuk Stop Keluar ya tidak tidak ya Pilih Kategori Provinsi Tampilan Provinsi yang dipilih Kategori Budaya Kategori