Membuat Shoping Cart dengan Drag & Drop mengunakan JqueryUI, PHP & Bootstrap
Hai All Ketemu lagi bersama Pria Tampan asli sunda, hehe, Tutorial kali ini seperti tutorial saya sebelumnya Maak een winkelwagentje met PHP,Ajax,JQuery & Bootstrap , kali ini saya akan mencoba dengan Drag & Drop mengunakan JqueryUI,
Ok langsung saja kita buat database & tabelnya seperti tutorial saya sebelumnya
-- 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 */;
Setelah buat database, maka kita masukan css di dalam head seperti ini
<link rel=”stylesheet” type=”text/css” href=”http://www.jeasyui.com/easyui/themes/default/easyui.css”>
Abis itu kita masukan css seperti dibawah ini
<style type="text/css">
.products{
list-style:none;
margin-right:300px;
padding:0px;
height:100%;
}
.products li{
display:inline;
float:left;
margin:10px;
}
.item{
display:block;
text-decoration:none;
}
.item img{
border:1px solid #333;
}
.item p{
margin:0;
font-weight:bold;
text-align:center;
color:#c3c3c3;
}
.cart{
position:fixed;
right:0;
top:0;
width:300px;
height:100%;
background:#ccc;
padding:0px 10px;
}
h1{
text-align:center;
color:#555;
}
h2{
position:absolute;
font-size:16px;
left:10px;
bottom:20px;
color:#555;
}
.total{
margin:0;
text-align:right;
padding-right:20px;
}
</style>Untuk koneksi nya seperti tutorial sebelumnya seperti ini :
<?php
$db_username = 'root'; //Mysql username anda
$db_password = '12345'; //MySql database password 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);
}Sekarang kita buat shoping cart / keranjang belanja nya seperti ini :
<div class="list-group">
<h4>Keranjang Belanja</h4>
<div style="background:#fff">
<table id="cartcontent">
<thead>
<tr>
<th field="name" width=140>Produk</th>
<th field="quantity" width=60 align="right">Qty</th>
<th field="price" width=60 align="right">Harga</th>
</tr>
</thead>
</table>
</div>
<p class="total">Total: Rp 0</p>
<h3>Drop Gambar Baju ke sini</h3>
</div>Setelah shoping Cart / Keranjang Belanja sudah selesai maka kita buat untuk menampilkan datanya & mengambil dari database yang sebelumnya 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 = '<div align="center">';
$fn = 'convert_to_rupiah'; // mengambil fungsi rupiah
while($row = $results->fetch_assoc()) {
$products_list .= <<<EOT
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<h4><a href="#" class="item"><p>{$row["nama_produk"]}</p><p>Harga Rp {$row["price_produk"]}</p>
<img src="images/{$row["image_produk"]}" alt="">
</h4>
<div class="caption">
<p>{$row["deskripsi_produk"]}</p>
</a>
</div>
<div class="ratings">
<p class="pull-right">18 reviews</p>
<p>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
</p>
</div>
</div>
</div>
EOT;
}
$products_list .= '</div>';
echo $products_list;
?>Menampilkan produk udah, shoping cart / keranjang belanja nya sudah, sekarang kita buat jquery nya untuk melakakukan drag & drop, add produk & menghitung jumlah produk yang kita pilih seperti dibawah ini,
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script>
var data = {"total":0,"rows":[]}; //variable data
var totalCost = 0; //variable untuk total
$(function(){
$('#cartcontent').datagrid({
singleSelect:true
});
$('.item').draggable({ // untuk drag
revert:true,
proxy:'clone',
onStartDrag:function(){
$(this).draggable('options').cursor = 'not-allowed';
$(this).draggable('proxy').css('z-index',10);
},
onStopDrag:function(){
$(this).draggable('options').cursor='move';
}
});
$('.list-group').droppable({ //untuk drop
onDragEnter:function(e,source){
$(source).draggable('options').cursor='auto';
},
onDragLeave:function(e,source){
$(source).draggable('options').cursor='not-allowed';
},
onDrop:function(e,source){
var name = $(source).find('p:eq(0)').html();
var price = $(source).find('p:eq(1)').html();
addProduct(name, parseFloat(price.split('Rp')[1]));
}
});
});
function addProduct(name,price){ // untuk add produk
function add(){
for(var i=0; i<data.total; i++){
var row = data.rows[i];
if (row.name == name){
row.quantity += 1;
return;
}
}
data.total += 1;
data.rows.push({
name:name,
quantity:1,
price:price
});
}
add();
totalCost += price;
$('#cartcontent').datagrid('loadData', data);
$('div.list-group .total').html('Total: Rp'+totalCost); //menghitung total
}
</script>Nah selesai deh, jalankan di localhost coba tarik gambar gambar dan masukan ke dalam kotak kantong belanja jika sudah selesai maka harga produk, jumlah & total nya ada di kotak kantong belanja. seperti dibawah ini
Nah mudah bukan ??? Sekian tutorial dari saya moga bermanfaat, Selalu terngiang di dalam telinga saya apa yang di ucapkan Ustad Tatang Sutarma “Sampaikanlah walau hanya sebaris code <?php echo “Hello Word”?>”
hye, macam mana mahu mendapatkan total price dimasukkan didalam database ya?
Tinggal dibuat insert aja di php nya