halo teman-teman ketemu lagi, masih ditutorial Membuat Toko Online dengan Ajax Jquery kali ini dibagian 4 [Part 4], tutorial kali ini merupakan sambungan dari tutorial sebelumnya.

ok sampai ditahap ini kita sudah membuat beberapa file dari tutorial2 sebelumnya. berikut daftar file yang telah kita buat.

• index.php
• style.css
• kon.php
• mcart.php
• myjs.js
• total.php
  
  

bagi yang baru mulai, silahkan liat tutorial2 sebelumnya.

pada bagian ini kita akan membuat file "cart.php"
cart.php ini berfungsi sebagai keranjang besar yang bisa melihat daftar barang belanjaan yang ada dikeranjang, kemudian tersedia opsi untuk menambah, mengurangi, dan menghapus barang belanjaan, disini kita menggunakan ajax, dan keranjangnya sendiri kita tampilkan dengan berupa pop-up modal. jadi apabila Tombol "Lihat Keranjang" diklik maka akan menampilkan pop-up modal keranjang besar.

untuk membuat pop-up seperti diatas, pertama kita buka kembali file "myjs.js"
kemudian tambahkan code berikut untuk menampilkan pop-up modal keranjangnya.

$(document).ready(function(){
	$('.bangkit').click(function(){
		$('.overlay').fadeIn('slow');
		$('.pop-up').fadeIn('slow');
	});
	        $('.tutup').click(function(){
		$('.pop-up').fadeOut(2000);
		$('.overlay').fadeOut(2000);
	});
});

penjelasan pembuatan pop-up modal seperti contoh diatas, bisa dilihat di tutorial saya yang ini, (kalo Not Found berarti belum diapprove, do'akan semoga cepat-cepat diapprove ya hehe).

ok pembuatan pop-up sudah, sekarang langsung saja ke pembuatan keranjang besar.
buka kembali file "index.php"
cari bagian.

<div class='b-pop-up'>

            <!—disini tempat load cart.php -->

</div>

hapus

<!—disini tempat load cart.php -->,

ganti dengan code jquery berikut.

<script>
$(document).ready(function(){
	$('.b-pop-up').load('cart.php');
});
</script>

code diatas adalah ajax jquery untuk mengambil file "cart.php"
kemudian kita buat file "cart.php"nya. dan ketikan code berikut.

<?php
session_start();
include "kon.php";
		$total_harga=0;
		$jumlah_semua_brg=null;
		$jumlah_per_brg=null;
		$no=1;
		$sub_total=null;
		echo "<table bgcolor='#aaf200' cellspacing='0' class='tbl'>";
		if(isset($_SESSION['cart']) and count($_SESSION['cart']) != 0){
			echo"<tr align='center'><td>No</td><td width='120px'>Nama Barang </td><td width='70px'>Harga</td><td>Jumlah</td><td>Sub Total</td><td>Opsi</td></tr>";
			foreach($_SESSION['cart'] as $index => $value){
				$kon;
				$query=$kon->prepare("select id_produk,nama_produk,harga_produk from produk where id_produk=:id");
				$query->BindParam(":id",$index);
				$query->execute();
				$tampil=$query->fetch();
				$warna=($no%2==0) ? "#dce4cc" : "#b4c09c";
				$jumlah_per_brg=$value;
				$sub_total=$tampil['harga_produk'] * $value;
				echo "<tr bgcolor='".$warna."'><td>".$no."</td><td>".$tampil['nama_produk']."</td><td>Rp.".number_format($tampil['harga_produk'],0,",",".")."</td><td>".$value."</td><td>".number_format($sub_total,0,",",".")."</td>
				<td>
				<a href='#' onclick='adds(".$tampil['id_produk'].")'> [+] </a>
				<a href='#' onclick='less(".$tampil['id_produk'].")'> [-] </a>
				<a href='#' onclick='kill(".$tampil['id_produk'].")'> [x] </a>
				</td></tr>";
				$jumlah_semua_brg+=$value;
				$total_harga+=$sub_total;
			$no++;
			}
			echo "<tr><td colspan='3'>Total </td><td>".$jumlah_semua_brg."</td><td> Rp.".number_format($total_harga,0,",",".")."</td><td></td></tr>";
		}else{
		echo "<tr><td colspan='3'> Tidak ada barang di keranjang ! </td><td></td><td> Silahkan Belanja dulu !</td><td></td></tr>";
		}
		echo "</table>";
?>

Penjelasan. File “cart.php”

$total_harga=0;
$jumlah_semua_brg=null;
$jumlah_per_brg=null;
$sub_total=null;

untuk penjelasan statement-statement diatas, Sama seperti penjelasan pada file “total.php” pada tutorial 3.

$no=1;

digunakan untuk memberi nomor urut pada tabel dengan menggunakan looping foreach.

if(isset($_SESSION['cart']) and count($_SESSION['cart']) != 0)
echo"<tr align='center'><td>No</td><td width='120px'>Nama Barang </td><td width='70px'>Harga</td><td>Jumlah</td><td>Sub Total</td><td>Opsi</td></tr>";
  foreach($_SESSION['cart'] as $index => $value)

penjelasan code diatas sama dengan penjelasan pada file “mcart.php” pada tutorial 3, bedanya. disini kita juga menampilkan jumlah, harga dan sub total barang  yang ada dikeranjang kemudian memasukkannya kedalam tabel

$warna=($no%2==0) ? "#dce4cc" : "#b4c09c";

dan ini untuk warna latar tabel, jadi apabila no urutnya ganjil maka warnanya "#b4c09c" dan jika genap maka warnanya #dce4cc"
hasilnya

$query=$kon->prepare("select id_produk,nama_produk,harga_produk from produk where id_produk=:id");

Disini kita akan menampilkan nama produk, harga,dan jumlahnya dengan mengambil dari database,

echo "<tr bgcolor='".$warna."'><td>".$no."</td><td>".$tampil['nama_produk']."</td><td>Rp.".number_format($tampil['harga_produk'],0,",",".")."</td><td>".$value."</td><td>".number_format($sub_total,0,",",".")."</td>

kemudian hasil dari databse kita tampilkan didalam tabel.

<a href='#' onclick='adds(".$tampil['id_produk'].")'> [+] </a>
//function adds untuk menambah barang
<a href='#' onclick='less(".$tampil['id_produk'].")'> [-] </a>
//function less untuk menambah barang
<a href='#' onclick='kill(".$tampil['id_produk'].")'> [x] </a>

//function kill untuk menghapus barang

nah disini  event onclick agar user bisa menambah, mengurangi, dan menghapus daftar belanjaanya.

Berikut tampilannya.

ok. part 4 cukup sampai disini, ditutorial selanjutnya kita akan membuat function pada event2 onclick diatas.

keep stay.

Part 5 (The Last) [UPDATED]