Membuat Shopping Cart Dengan PHP,Ajax,JQuery & Bootstrap

by portgastea · September 5, 2015

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 :

Source code

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

Source code

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

Kita buat script nya seperti dibawah ini :

Source code

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

Source code

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

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

Source code

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 :

Source code

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

Source code

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

Source code

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

Script nya seperti dibawah ini :

Source code

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

Tags: Ajax jquery JQuery & Bootstrap Membuat keranjang belanja dengan PHP Membuat Shopping Cart Dengan Ajax Membuat Shopping Cart Dengan PHP Membuat toko online php tutorial tutorial Membuat Shopping Cart Dengan PHP

rulz says:

September 5, 2015 at 9:29 am

sering sering share kek gini gan 😀

Reply
- portgastea says:
  
  September 5, 2015 at 9:50 am
  
  Ok gan. Thanks dah berkunjung
  
  Reply
abans says:

September 5, 2015 at 10:56 am

Makasih gan.. Ilmunya… Lumayan nambah pengetahuan…

Reply
- portgastea says:
  
  September 5, 2015 at 12:06 pm
  
  Ok gan, Thanks Juga dah berkunjung
  
  Reply
felix says:

September 5, 2015 at 12:38 pm

matur nuwun gan.. izin sedot

Reply
- portgastea says:
  
  September 6, 2015 at 3:41 am
  
  silahkan
  
  Reply
fajar says:

September 11, 2015 at 2:50 pm

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

Reply
- portgastea says:
  
  September 14, 2015 at 1:30 am
  
  Silahkan, Amin
  
  Reply
Chalil Akbar says:

March 15, 2016 at 9:40 pm

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

Reply
- portgastea says:
  
  March 17, 2016 at 5:58 am
  
  Ok sama-sama gan, terima kasih telah berkunjung
  
  Reply
Langgeng says:

March 22, 2016 at 1:01 pm

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

Reply
- portgastea says:
  
  March 22, 2016 at 11:48 pm
  
  Dibuat aja satu produk lagi dengan produk yang sama tapi ukuran or qty nya berbeda
  
  Reply
Yudha Pratama says:

July 26, 2016 at 9:04 am

ok gan, mau di coba

Reply
donny says:

July 26, 2017 at 12:13 am

terima kasih banyak

Reply
- portgastea says:
  
  July 28, 2017 at 8:05 am
  
  ok sama2 mas bro
  
  Reply

Membuat Shopping Cart Dengan PHP,Ajax,JQuery & Bootstrap

You may also like...

15 Responses

Leave a Reply Cancel reply

Artikel Terbaru

Categories

Archives

Membuat Shopping Cart Dengan PHP,Ajax,JQuery & Bootstrap

You may also like...

Crop Images Sederhana dengan Jquery & PHP

Membuat Shoping Cart dengan Drag & Drop mengunakan JqueryUI, PHP & Bootstrap

Cara Mendapatkan Google API key dan Google oAuth 2.0 client ID

15 Responses

Leave a Reply Cancel reply

Post Popular

Artikel Terbaru

Categories

Archives