Membuat Shopping Cart Dengan PHP,Ajax,JQuery & Bootstrap


Hai All ketemu lagi bersama saya Portgastea Pria tampan asli sunda hehe… tutorial kali ini adalah Membuat Shopping Cart Dengan PHP,Ajax,JQuery & Bootstrap, begitu banyak Toko Online di jaman sekarang ini ,  Toko online saat ini sudah mulai berkembang pesat di Indonesia oleh karena itu Tutorial kali ini kita akan membahasa tentang Membuat Shopping Cart pada Toko Online. 

Ok langsung saja kita buat database & tabel baru seperti dibawah ini :

-- phpMyAdmin SQL Dump
-- version 4.3.11
-- http://www.phpmyadmin.net
--
-- Host: 127.0.0.1
-- Generation Time: 05 Sep 2015 pada 09.06
-- Versi Server: 5.6.24
-- PHP Version: 5.6.8
 
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";
 
 
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;
 
--
-- Database: `shoping`
--
 
-- --------------------------------------------------------
 
--
-- Struktur dari tabel `tbl_produk`
--
 
CREATE TABLE IF NOT EXISTS `tbl_produk` (
  `id` int(11) NOT NULL,
  `nama_produk` varchar(60) NOT NULL,
  `deskripsi_produk` text NOT NULL,
  `code_produk` varchar(60) NOT NULL,
  `image_produk` varchar(60) NOT NULL,
  `price_produk` decimal(10,0) NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=latin1;
 
--
-- Dumping data untuk tabel `tbl_produk`
--
 
INSERT INTO `tbl_produk` (`id`, `nama_produk`, `deskripsi_produk`, `code_produk`, `image_produk`, `price_produk`) VALUES
(1, 'Baju 1', '-------', 'B190', 'tshirt-1.jpg', '100000'),
(2, 'Baju 2', '-----', 'B191', 'tshirt-2.jpg', '200000'),
(3, 'Baju 3', '-----', 'B192', 'tshirt-3.jpg', '3000000'),
(4, 'Baju 4', '-----', 'B192', 'tshirt-4.jpg', '300000');
 
--
-- Indexes for dumped tables
--
 
--
-- Indexes for table `tbl_produk`
--
ALTER TABLE `tbl_produk`
  ADD PRIMARY KEY (`id`);
 
--
-- AUTO_INCREMENT for dumped tables
--
 
--
-- AUTO_INCREMENT for table `tbl_produk`
--
ALTER TABLE `tbl_produk`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=5;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Sekarang kita buat file koneksi ke database dengan nama config.inc.php seperti script dibawah ini atau bisa anda copy paste script nya.

<?php
$db_username        = 'root'; //Mysql username anda
$db_password        = '12345'; //MySql database password anda (sesuaikan dengan username & password localhost anda)
$db_name            = 'shoping'; //MySql nama database anda
$db_host            = 'localhost'; //MySql hostname atau IP anda
 
function convert_to_rupiah($angka)
	{return 'Rp. '.strrev(implode('.',str_split(strrev(strval($angka)),3)));}; // Setting Untuk Fungsi Rupiah 
 
$shipping_cost		= 9000; // Setting biaya pengiriman
$taxes			= array( //setting pajak pengiriman
			  'Pajak :' => 2,
			  );
 
$mysqli_conn = new mysqli($db_host, $db_username, $db_password,$db_name); //koneksi ke mysql
if ($mysqli_conn->connect_error) {//Output bila koneksi erorr
    die('Error : ('. $mysqli_conn->connect_errno .') '. $mysqli_conn->connect_error);
}

 

Setelah selesai mari kita buat list produk seperti dibawah ini

list produk

Kita buat script nya seperti dibawah ini :

<?php
//List produk dari database
$results = $mysqli_conn->query("SELECT nama_produk, deskripsi_produk, code_produk, image_produk, price_produk FROM tbl_produk");
 
$products_list =  '<ul class="products-wrp">';
$fn = 'convert_to_rupiah'; // mengambil fungsi rupiah
 
while($row = $results->fetch_assoc()) {
$products_list .= <<<EOT
<li>
<form class="form-item">
<h4>{$row["nama_produk"]}</h4>
<div><img src="images/{$row["image_produk"]}"></div>
<div>Harga :{$fn($row["price_produk"])}<div>
<div class="item-box">
    <div>
	Warna :
    <select name="product_color">
    <option value="Merah">Merah</option>
    <option value="Biru">Biru</option>
    <option value="Kuning">Kuning</option>
    </select>
	</div>
 
	<div>
    Qty :
    <select name="product_qty">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    </select>
	</div>
 
	<div>
    Ukuran :
    <select name="product_size">
	<option value="M">M</option>
    <option value="XL">XL</option>
    <option value="XXL">XLL</option>
    </select>
	</div>
 
    <input name="product_code" type="hidden" value="{$row["code_produk"]}">
    <button type="submit">BELI</button>
</div>
</form>
</li>
EOT;
 
}
$products_list .= '</ul></div>';
 
echo $products_list;
?>

Karena kita akan mengakses variabel sesi, kita perlu menyertakan session_start ()  dan (“config.inc.php”) diatas nya seperti ini :

<?php
session_start(); 
include("config.inc.php"); 
?>

Sekarang kita buat css untuk keranjang belanja nya supaya lebih menarik seperti dibawah ini berinama style.css

body {
	background-color: #F9F9F9;
	font-family: Georgia, "Times New Roman", Times, serif;
}
ul.products-wrp {
	list-style: none;
	padding: 0;
	max-width: 650px;
	margin-left: auto;
	margin-right: auto;  
	color: #777;  
	text-align: center;
}
ul.products-wrp li{
	display: inline-block;
	border: 1px solid #ECECEC;
	margin: 5px;
	background: #fff;
	text-align: center;
}
ul.products-wrp li h4{
	margin: 0;
	padding: 15px 5px 5px 5px;
	text-align: center;
	border-bottom: 1px solid #FAFAFA;
}
ul.products-wrp li .item-box{
	border: 1px solid #EAEAEA;
	background: #F9F9F9;
	margin: 10px;
	padding: 1px;
	text-align: left;
}
ul.products-wrp li .item-box div{
	margin-bottom:5px;
}
ul.products-wrp li .item-box button{
	margin-left: 5px;
	background: #FA1C5F;
	border: none;
	padding: 3px 8px 3px 8px;
	color: #fff;
}
ul.products-wrp li .item-box button[disabled=disabled]{
	background: #FC84A8;
}
 
.cart-box {
	display: block;
	width: 50px;
	background: rgba(219, 0, 33, 1) url(../images/cart-icon.png) no-repeat 20px 5px;
	padding: 4px 8px 4px 8px;
	border-radius: 30px;
	color: #fff;
	font-family: Arial;
	font-size: 16px;
	text-decoration: none;
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.32);
	margin-right: auto;
	margin-left: auto;
	font-weight: bold;
}
.cart-box:hover{
	background: #FA1C5F url(../images/cart-icon.png) no-repeat 20px 5px;
}
.shopping-cart-box{ 
	position: absolute;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
	max-width: 450px;
	color: #FFD5D5;
	background: #FA1C5F;
	border-radius: 4px;
	padding: 10px;
	font: small Verdana, Geneva, sans-serif;  
	margin-top: 10px;
	display:none;
}
.shopping-cart-box a{
	color: #FFD5D5;
	text-decoration:none;
}
.shopping-cart-box:after {
	content: '';
	position: absolute;
	bottom: 100%;
	left: 50%;
	margin-left: -8px;
	width: 0; height: 0;
	border-bottom: 8px solid rgba(255, 0, 97, 1);
	border-right: 8px solid transparent;
	border-left: 8px solid transparent;
}
.shopping-cart-box ul.cart-products-loaded{
	margin: 0;
	padding: 0;
	list-style: none;
}
.shopping-cart-box .close-shopping-cart-box{
  float: right;
}
#shopping-cart-results ul.cart-products-loaded li{
	background: #ED0C50;
	margin-bottom: 1px;
	padding: 6px 4px 6px 10px;
}
.shopping-cart-box .remove-item{
	float:right;
	text-decoration:none;
}
.shopping-cart-box .cart-products-total{
	font-weight: bold;
	text-align: right;
	padding: 5px 0px 0px 5px;
}
.shopping-cart-box h3{
	margin: 0;
	padding: 0px 0px 5px 0px;
}
 
ul.view-cart {
  width: 600px;
  margin-left: auto;
  margin-right: auto;
  background: #fff;
  padding: 15px 15px 15px 25px;
  list-style: none;
}
 
ul.view-cart {
  width: 600px;
  margin-left: auto;
  margin-right: auto;
  background: #fff;
  padding: 15px 15px 15px 25px;
  list-style: none;
  border: 1px solid #ECECEC;
  border-radius: 4px;
}
ul.view-cart li span{
    float: right;
}
ul.view-cart li.view-cart-total{
  border-top: 1px solid #ddd;
  padding-top: 5px;
  margin-top: 5px;
  text-align: right;
}
hr{
	border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

sekarang kita buat keranjang belanja nya seperti ini :

<a href="#" class="cart-box" id="cart-info" title="View Cart">
<?php 
if(isset($_SESSION["products"])){
echo count($_SESSION["products"]); 
}else{
echo 0; 
}
?>

Setelah semua pengaturan & tampilan selesai, kita akan menggunakan jQuery untuk menangkap nilai dari barang-barang ini, yang akan kita gunakan untuk memperbarui keranjang belanja. Script nya seperti dibawah ini :

<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function(){	
		$(".form-item").submit(function(e){
			var form_data = $(this).serialize();
			var button_content = $(this).find('button[type=submit]');
			button_content.html('Adding...'); //Loading button text 
 
			$.ajax({ //request ajax ke cart_process.php
				url: "cart_process.php",
				type: "POST",
				dataType:"json", 
				data: form_data
			}).done(function(data){ //Jika Ajax berhasil
				$("#cart-info").html(data.items); //total items di cart-info element
				button_content.html('BELI'); //
				alert("Item telah dimasukan ke keranjang belanja anda"); 
				if($(".shopping-cart-box").css("display") == "block"){
					$(".cart-box").trigger( "click" ); 
				}
			})
			e.preventDefault();
		});
 
	//menampilkan item ke keranjang belanja
	$( ".cart-box").click(function(e) { 
		e.preventDefault(); 
		$(".shopping-cart-box").fadeIn(); 
		$("#shopping-cart-results").html('<img src="images/ajax-loader.gif">'); //menampilkan loading gambar
		$("#shopping-cart-results" ).load( "cart_process.php", {"load_cart":"1"}); //membuat permintaan ajax menggunakan dengan jQuery Load() & update
	});
 
	//keluar keranjang belanja
	$( ".close-shopping-cart-box").click(function(e){ //fungsi klik pengguna pada keranjang belanja
		e.preventDefault(); 
		$(".shopping-cart-box").fadeOut(); //keluar keranjang belanka
	});
 
	//Menghapus item dari keranjang
	$("#shopping-cart-results").on('click', 'a.remove-item', function(e) {
		e.preventDefault(); 
		var pcode = $(this).attr("data-code"); //mendapatkan get produk
		$(this).parent().fadeOut(); //menghapus elemen item dari kotak
		$.getJSON( "cart_process.php", {"remove_code":pcode} , function(data){ //mendapatkan Harga Barang dari Server
			$("#cart-info").html(data.items); //update Menjullahkan item pada cart-info
			$(".cart-box").trigger( "click" ); //trigger click on cart-box to untuk memperbarui daftar item
		});
	});
 
});
</script>

Sekarang kita buat file cart_process.php untuk checkout nya seperti dibawah ini :

<?php
session_start(); //start session
include_once("config.inc.php"); //include config file
 
############# Memasuk produk baru ke keranjang belanja #########################
if(isset($_POST["product_code"]))
{
	foreach($_POST as $key => $value){
		$new_product[$key] = filter_var($value, FILTER_SANITIZE_STRING); 
	}
 
	$statement = $mysqli_conn->prepare("SELECT nama_produk, price_produk FROM tbl_produk WHERE code_produk=? LIMIT 1");
	$statement->bind_param('s', $new_product['product_code']);
	$statement->execute();
	$statement->bind_result($product_name, $product_price);
 
 
	while($statement->fetch()){ 
		$new_product["product_name"] = $product_name; 
		$new_product["product_price"] = $product_price;  
 
		if(isset($_SESSION["products"])){  
			if(isset($_SESSION["products"][$new_product['product_code']])) 
			{
				unset($_SESSION["products"][$new_product['product_code']]); 
			}			
		}
 
		$_SESSION["products"][$new_product['product_code']] = $new_product;	
	}
 
 	$total_items = count($_SESSION["products"]); //
	die(json_encode(array('items'=>$total_items)));
 
}
 
################## List Produk yang ada di keranjang belanja ###################
if(isset($_POST["load_cart"]) && $_POST["load_cart"]==1)
{
 
	if(isset($_SESSION["products"]) && count($_SESSION["products"])>0){ 
		$cart_box = '<ul class="cart-products-loaded">';
		$total = 0;
		foreach($_SESSION["products"] as $product){ 
 
 
			$product_name = $product["product_name"]; 
			$product_price = $product["product_price"];
			$product_code = $product["product_code"];
			$product_qty = $product["product_qty"];
			$product_color = $product["product_color"];
			$product_size = $product["product_size"];
 
			$cart_box .=  "<li> $product_name (Qty : $product_qty | $product_color  | $product_size ) &mdash; ".convert_to_rupiah($product_price * $product_qty). " <a href=\"#\" class=\"remove-item\" data-code=\"$product_code\">&times;</a></li>";
			$subtotal = ($product_price * $product_qty);
			$total = ($total + $subtotal);
		}
		$cart_box .= "</ul>";
		$cart_box .= '<div class="cart-products-total">Total : '.convert_to_rupiah($total).' <u><a href="view_cart.php" title="Review Cart dan Check-Out">Check-out</a></u></div>';
		die($cart_box); 
	}else{
		die("Keranjang Belanja Anda Kosong"); 
	}
}
 
################# Menghapus Item dari Keranjang Belanja ################
if(isset($_GET["remove_code"]) && isset($_SESSION["products"]))
{
	$product_code   = filter_var($_GET["remove_code"], FILTER_SANITIZE_STRING);
 
	if(isset($_SESSION["products"][$product_code]))
	{
		unset($_SESSION["products"][$product_code]);
	}
 
 	$total_items = count($_SESSION["products"]);
	die(json_encode(array('items'=>$total_items)));
}

Setelah selesai kita buat review keranjang belanja nya seperti dibawah ini

review

Script nya seperti dibawah ini :

<?php
if(isset($_SESSION["products"]) && count($_SESSION["products"])>0){
	$total 			= 0;
	$list_tax 		= '';
	$cart_box 		= '<ul class="view-cart">';
 
	foreach($_SESSION["products"] as $product){ //Cetak setiap item, kuantitas dan harga.
		$product_name = $product["product_name"];
		$product_qty = $product["product_qty"];
		$product_price = $product["product_price"];
		$product_code = $product["product_code"];
		$product_color = $product["product_color"];
		$product_size = $product["product_size"];
 
		$item_price 	= convert_to_rupiah($product_price * $product_qty);  // Harga x qty = Total harga barang
 
		$cart_box 		.=  "<li> $product_code &ndash;  $product_name (Qty : $product_qty | $product_color | $product_size) <span> $item_price </span></li>";
 
		$subtotal 		= ($product_price * $product_qty); //Multiply  kuantitas * harga
		$total 			= ($total + $subtotal); //Add up to total harga
	}
 
	$grand_total = $total + $shipping_cost; //Menjumlahkan total
 
	foreach($taxes as $key => $value){ //menghitung semua pajak dalam array
			$tax_amount 	= round($total * ($value / 100));
			$tax_item[$key] = $tax_amount;
			$grand_total 	= $grand_total + $tax_amount; 
	}
 
	foreach($tax_item as $key => $value){ //List Pajak
		$list_tax .= $key. ' '. convert_to_rupiah($value).'<br />';
	}
 
	$shipping_cost = ($shipping_cost)?'Biaya Pengiriman: '.convert_to_rupiah($shipping_cost).'<br />':'';
 
	//Menampilkan pajak, biaya pengiriman & Total Belanja
	$cart_box .= "<li class=\"view-cart-total\">$shipping_cost  $list_tax <hr>Total Belanja Anda : ".convert_to_rupiah($grand_total)."</li>";    
	$cart_box .= "</ul>";
 
	echo $cart_box;
}else{
	echo "Keranjang beranda anda Kosong";
}
?>

Nah selesai deh, mudah bukan ??? bagi yang lihat demo nya bica lihat di sini DEMO untuk download script nya bisa lihat download di sini DOWNLOAD .

Sekian Tutorial kali ini moga bermanfaat. Happy coding & Programing .

You may also like...

15 Responses

  1. rulz says:

    sering sering share kek gini gan 😀

  2. abans says:

    Makasih gan.. Ilmunya… Lumayan nambah pengetahuan…

  3. felix says:

    matur nuwun gan.. izin sedot

  4. fajar says:

    mas izin download ya untuk belajar ,
    Terima kasih mas ,semoga berkah ilmunya 😀

  5. Chalil Akbar says:

    Makasih udah share gan . Terima kasih sangat membantu saya dalam belajar web terutama shopping cart. Sukses selalu admin

  6. Langgeng says:

    mantap gan, mau tanya gan, semisal untuk beli produk yang sama namun ukurannya or qtynya beda gmana ya ? soalnya setiap di produk yang sama selalu ketiban dengan warna atau qty yang baru

  7. ok gan, mau di coba

  8. donny says:

    terima kasih banyak

Leave a Reply

Your email address will not be published.