قم بإنشاء عربة تسوق بالسحب & إسقاط باستخدام JqueryUI, بي أتش بي & التمهيد

بواسطة · سبتمبر 9, 2015





Hai All Ketemu lagi bersama Pria Tampan asli sunda, hehe, Tutorial kali ini seperti tutorial saya sebelumnya جعل عربة التسوق مع PHP,اياكس,مسج & التمهيد , kali ini saya akan mencoba dengan Drag & إسقاط باستخدام 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');
 
--
-- فهارس إلى عن على طاولات ملقاة
--
 
--
-- فهارس إلى عن على table `tbl_produk`
--
ALTER TABLE `tbl_produk`
  ADD PRIMARY مفتاح (`id`);
 
--
-- زيادة تلقائية إلى عن على طاولات ملقاة
--
 
--
-- زيادة تلقائية إلى عن على table `tbl_produk`
--
ALTER TABLE `tbl_produk`
  MODIFY `id` int(11) NOT NULL زيادة تلقائية,زيادة تلقائية=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:لا شيء;
			margin-right:300مقصف;
			حشوة:0مقصف;
			ارتفاع:100%;
		}
		.products في ال{
			عرض:في النسق;
			تطفو:اليسار;
			حافة:10مقصف;
		}
		.item{
			عرض:منع;
			text-decoration:لا شيء;
		}
		.item img{
			الحدود:1مقصف solid #333;
		}
		.item ص{
			حافة:0;
			font-weight:bold;
			text-align:مركز;
			اللون:#c3c3c3;
		}
		.cart{
			position:fixed;
			right:0;
			أعلى:0;
			عرض:300مقصف;
			ارتفاع:100%;
			خلفية:#ccc;
			حشوة:0مقصف 10مقصف;
		}
		h1{
			text-align:مركز;
			اللون:#555;
		}
		h2{
			position:absolute;
			font-size:16مقصف;
			اليسار:10مقصف;
			bottom:20مقصف;
			اللون:#555;
		}
		.total{
			حافة:0;
			text-align:right;
			padding-right:20مقصف;
		}
	</أسلوب>





Untuk koneksi nya seperti tutorial sebelumnya seperti ini :

<?بي أتش بي
$db_username        = 'جذر'; //Mysql username anda
$db_password        = "12345"; //MySql database password anda
$db_name            = 'shoping'; //MySql nama database anda
$db_host            = "مضيف محلي"; //MySql hostname atau IP anda
 
وظيفة convert_to_rupiah($angka)
	{إرجاع 'Rp. ".strrev(implode('.',str_split(strrev(strval($angka)),3)));}; // Setting Untuk Fungsi Rupiah 
 
$shipping_cost		= 9000; // Setting biaya pengiriman
$taxes				= مجموعة مصفوفة( //setting pajak pengiriman
							'Pajak :" => 2,
							);
 
$mysqli_conn = جديد mysqli($db_host, $db_username, $db_password,$db_name); //koneksi ke mysql
إذا ($mysqli_conn->connect_error) {//Output bila koneksi erorr
    ال('Error : (". $mysqli_conn->connect_errno .") ". $mysqli_conn->connect_error);
}

Sekarang kita buat shoping cart / keranjang belanja nya seperti ini :

<شعبة صف دراسي="list-group">
         <h4>Keranjang Belanja</h4>
        <div style="background:#fff">
        <table id="cartcontent">
            <thead>
                <tr>
                    <th field="name" عرض=140>Produk</th>
                    <th field="quantity" عرض=60 محاذاة="right">Qty</th>
                    <th field="price" عرض=60 محاذاة="right">Harga</th>
                </tr>
            </thead>
        </الطاولة>
        </شعبة>
        <ص صف دراسي="total">Total: Rp 0</ص>
        <h3>Drop Gambar Baju ke sini</h3>
</شعبة>

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 :

<?بي أتش بي
//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
 
في حين($صف = $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"><ص>{$صف["nama_produk"]}</ص><ص>Harga Rp {$صف["price_produk"]}</ص>
								  <img src="images/{$صف["image_produk"]}" alt="">
 
                                </h4>
                            <div class="caption">
 
                                <ص>{$صف["deskripsi_produk"]}</ص>
								</أ>
                            </شعبة>
                            <div class="ratings">
                                <p class="pull-right">18 reviews</ص>
                                <ص>
                                    <span class="glyphicon glyphicon-star"></امتداد>
                                    <span class="glyphicon glyphicon-star"></امتداد>
                                    <span class="glyphicon glyphicon-star"></امتداد>
                                    <span class="glyphicon glyphicon-star"></امتداد>
                                    <span class="glyphicon glyphicon-star-empty"></امتداد>
                                </ص>
                            </شعبة>
                        </شعبة>
						</شعبة>
 
 
EOT;
}
$products_list .= "</شعبة>";
صدى صوت $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"></النصي>
 
    <!-- Bootstrap Core JavaScript -->
    <النصي src="js/bootstrap.min.js"></النصي>
	<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></النصي>
	<النصي>
		أين البيانات = {"total":0,"rows":[]}; //variable data
		أين totalCost = 0;  //variable untuk total
 
		$(وظيفة(){
			$('#cartcontent').datagrid({    
				singleSelect:صحيح
			});
			$('.item').draggable({   // untuk drag
				revert:صحيح,
				proxy:'clone',  
				onStartDrag:وظيفة(){
					$(هذه).draggable('options').cursor = 'not-allowed';
					$(هذه).draggable('proxy').المغلق('z-index',10);
				},
				onStopDrag:وظيفة(){
					$(هذه).draggable('options').cursor='move'; 
				}
			});
			$('.list-group').droppable({   //untuk drop
				onDragEnter:وظيفة(e,source){
					$(source).draggable('options').cursor='auto';
				},
				onDragLeave:وظيفة(e,source){
					$(source).draggable('options').cursor='not-allowed';
				},
				onDrop:وظيفة(e,source){
					أين name = $(source).تجد('p:eq(0)").لغة البرمجة();
					أين price = $(source).تجد('p:eq(1)").لغة البرمجة();
					addProduct(name, parseFloat(price.split('Rp')[1]));
				}
			});
		});
 
		وظيفة addProduct(name,price){  // untuk add produk
			وظيفة add(){
				إلى عن على(أين أنا=0; أنا<البيانات.total; أنا++){
					أين صف = البيانات.rows[أنا];
					إذا (صف.name == name){
						صف.quantity += 1;
						إرجاع;
					}
				}
				البيانات.total += 1;
				البيانات.rows.push({
					name:name,
					quantity:1,
					price:price
				});
			}
			add();
			totalCost += price; 
			$('#cartcontent').datagrid('loadData', البيانات);
			$('div.list-group .total').لغة البرمجة('Total: Rp'+totalCost); //menghitung total
		}
	</النصي>

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

Membuat Shopping Cart Drag n Drop




DEMO تحميل

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

 

 

 

 

العلامات:

ربما يعجبك أيضا...

2 استجابات

  1. guest يقول:
    ديسمبر 5, 2015 في 4:42 صباحا

    hye, macam mana mahu mendapatkan total price dimasukkan didalam database ya?

    الرد

اترك رد

لن يتم نشر عنوان بريدك الإلكتروني. الحقول المطلوبة محددة *