ok, sampai ketemu lagi di tutorial Membuat Toko Online dengan Ajax Jquery kali ini pada bagian kedua. untuk bagian pertama bisa dilihat disini.

buka kembali file "index.php" yang sudah kita buat, kemudian cari bagian berikut.

<section>

             <div class='content'>

                          <!—disini tempat memasukkan gambar -->

               </div>

</section>

Hapus code.

<!—disini tempat memasukkan gambar -->

Kemudian ganti dengan code php untuk menampilkan semua gambarnya. (kita pakai looping biar irit coding )

<?php
$query=$kon->prepare("select * from produk order by harga_produk ");
$query->execute();
while($tampil=$query->fetch()){
echo "<div class='mainboximg'>";
echo "<div class='boximg'>";
echo "<img src='img/".$tampil['url_produk']."'>";
echo "</div>";
echo "<div class='ket'>";
echo "<b>".$tampil['nama_produk']."</b></br>";
echo "Rp. ".number_format($tampil['harga_produk'],0,",",".");
echo "</br>".substr($tampil['ket_produk'],0,35);
echo "<button onclick='adds(".$tampil['id_produk'].")' class='beli'>Beli</button>";
echo "</div>";
echo "</div>";
}
?>

oke sekarang interface sudah jadi, kurang lebih penampakannya seperti ini.

untuk HTML dan CSS tidak akan saya jelaskan karna saya anggap pembaca sudah paham tentang kedua bahasa pemrograman ini , jadi saya hanya akan menjelaskan  cara kerja PHP, Ajax dan Jquerynya saja.

lanjut. pada bagian tombol “Beli” apabila diklik, maka keranjang belanja akan berubah menjadi warna merah, sebagai tanda bahwa barang sudah berhasil ditambahkan,

Kemudian nominalnya akan tampil dan warna berubah jadi hijau lagi.

Bagaimana itu bekerja ? Nah disinilah ajax dan jquery memegang peran penting, didalam tombol “Beli” terdapat event onclick yang akan menjalankan  function “adds(id masing-masing produk)”.

echo "<button onclick='adds(".$tampil['id_produk'].")' class='beli'>Beli</button>";

id_produk ini berbeda-beda, kita mengambilnya dari database, pada file PHP diatas.

kemudian function “adds(id produk)”  terdapat di file “myjs.js”

Buat dulu file “myjs.js”

Kemudian ketikkan codingnya.

function adds(id){
		$.ajax({
			url : "mcart.php",
			data : "pid="+id+"&act=adds",
			success : function(){
				$('.b-pop-up').html('<img src="ajax-loader.gif">');
				$('.b-pop-up').load('cart.php');
				$('#tkrj').load('total.php');
				$('.krj').css("background-color","red"); 
				setTimeout(ijolagi,1000);
			}
		});
	}
function ijolagi(){
		$('.krj').css("background-color","#aaf200"); 
}

Penjelasan file  “myjs.js”.

$.ajax({})
memulai ajax jquery
url : "mcart.php",

Adalah file php yang akan memproses ajax jquery.

data : "pid="+id+"&act=add",

Adalah data yang akan dikirim.

success : function()

apabila data berhasil dikirim maka akan melakukan hal-hal berikut.

$('.b-pop-up').html('<img src="ajax-loader.gif">');

Menampilkan animasi loading, ini dipakai pada pop-up keranjang.

$('.b-pop-up').load('cart.php');

Menampilkan data keranjang yang telah diupdate

$('.krj').css("background-color","red");

Nah ini yang mengubah warna keranjang menjadi merah.

setTimeout(ijolagi,1000);

kemudian akan menjalankan function ijolagi() setelah satu detik, jadi backgroundnya berubah menjadi merah dalam waktu 1 detik.

Kemudian ini function ijolagi()
function ijolagi()

{

                $('.krj').css("background-color","#aaf200");

}
mengubah warna background ke semula

 
Ok. untuk part 2 cukup sampai disini. sampai ketemu di Part 3.

Part 3 [UPDATED]