ایجاد سبد خرید با استفاده از PHPوjQuery

ایجاد سبد خرید با استفاده از PHPوjQuery

در این آموزش قصد داریم تا به شما نحوه ایجاد یک سبد خرید را بدهیم که محصولات شما در پایگاه داده MySQL ذخیره خواهند شد و با استفاده از PHP پردازش شده و نمایش داده خواهند شد.

برای مشاهده لینک وارد شود

 شما برای نمایش دمو برای کاربرانتان اطلاعات زیر را در پایگاه داده خود وارد کنید.ما در زیر تعدادی جدول تعریف کرده و چند محصول را در آنها قرار داده ایم.

--
-- Table structure for table `internet_shop`
--

CREATE TABLE IF NOT EXISTS `internet_shop` (
  `id` int(6) NOT NULL auto_increment,
  `img` varchar(32) collate utf8_unicode_ci NOT NULL default '',
  `name` varchar(64) collate utf8_unicode_ci NOT NULL default '',
  `description` text collate utf8_unicode_ci NOT NULL,
  `price` double NOT NULL default '0',
  PRIMARY KEY  (`id`),
  UNIQUE KEY `img` (`img`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=7 ;

--
-- Dumping data for table `internet_shop`
--

INSERT INTO `internet_shop` VALUES(1, 'iPod.png', 'آی پد', 'نسخه اصلی و عمومی', ۲۰۰);
INSERT INTO `internet_shop` VALUES(2, 'iMac.png', 'آی مک', 'کامپیوتر آی مک', ۱۲۰۰);
INSERT INTO `internet_shop` VALUES(3, 'iPhone.png', 'آیفون', 'جدیدترین آیفون', ۴۰۰);
INSERT INTO `internet_shop` VALUES(4, 'iPod-Shuffle.png', 'آی پد شافل', 'کوچکترین پلیر جهان', ۴۹);
INSERT INTO `internet_shop` VALUES(5, 'iPod-Nano.png', 'آی پد نانو', 'جدیدترین آی پد نانو', ۹۹);
INSERT INTO `internet_shop` VALUES(6, 'Apple-TV.png', 'تلویزیون  اپل', 'جدیدترین تلویزیون اپل', ۳۰۰);

خوب حالا به سراغ نوشتن ساختار کلی متن HTML می رویم.

<div id="main-container"> <!-- the main container element -->

<div class="tutorialzine">	<!-- some headings -->
<h1>سبد خرید</h1>
<h3>بهترین محصولات با بهترین قیمت</h3>
</div>

<div class="container">	<!-- the first section - products -->

<span class="top-label">
<span class="label-txt">محصولات</span>	<!-- section label -->
</span>

<div class="content-area">
<div class="content drag-desired">	<!-- assigning a common content class and an individually targeted drag-desired class -->

<?php
// php code that generates the products
?>

<div class="clear"></div>	<!-- clearing the floats -->
</div>
</div>

<div class="bottom-container-border">	<!-- bottom part of the section -->
</div>

</div>	<!-- closing the products section -->

<div class="container">	<!-- the second section - shopping cart -->

<span class="top-label">
<span class="label-txt">سبد خرید</span>	<!-- label for the section -->
</span>

<div class="content-area">
<div class="content drop-here">	<!-- content class, shared with the product section above, and the targeted drop-here class -->
<div id="cart-icon">
<img src="img/Shoppingcart_128x128.png" alt="shopping cart" class="pngfix" width="128" height="128" />	<!-- using the pngfix class -->
<img src="img/ajax_load_2.gif" alt="loading.." id="ajax-loader" width="16" height="16" />	<!-- the rotating gif - hidden by default and shown during ajax interactions -->
</div>

<form name="checkoutForm" method="post" action="order.php">	<!-- the form -->
<div id="item-list">	<!-- in this div we insert all the products in the shopping cart -->

</div>
</form>	<!-- closing the form -->

<div class="clear"></div>	<!-- clearing -->

<div id="total"></div>	<!-- the total price goes here -->
<div class="clear"></div>	<!-- clearing the floats -->

<a href="" onclick="document.forms.checkoutForm.submit(); return false;" class="button">پرداخت نهایی</a>	<!-- the submit button, hidden by default, notice the onclick attribute -->

</div>
</div>

<div class="bottom-container-border">	<!-- bottom part of the section -->
</div>

</div><!-- closing the main container -->

همانطور که در بالا مشاهده می کنید ما دو کار را انجام می دهیم:اول اینکه تمام محصولات را نمایش می دهیم و دوم عملیات مربوط به سبد خرید.

Untitled

محصولات توسط کدهای PHP بارگذاری اولیه میشوند  که کمی بعد در مورد آنها توضیح خواهیم داد.اما اول به سراغ استایل ها می رویم ولی به دلیل زیاد بودن آنها آنها را به دو بخش تقسیم می کنیم.

@font-face {
  font-family: 'BYekan';
    src: url('fonts/BYekan.eot');
    src: url('fonts/BYekan.eot?#iefix') format('embedded-opentype'),
         url('fonts/BYekan.woff') format('woff'),
         url('fonts/BYekan.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
body,h1,h2,h3,p,td,quote,small,form,input,ul,li,ol,label{
	margin:0px;
	padding:0px;
	font-family: "BYekan",'Droid Sans',Arial,Verdana,sans-serif;
}

body{
	color:#555555;
	font-size:13px;
	background-color:#282828;
  text-align: right;
  direction:rtl;
}

.clear{
	clear:both;
}

#main-container{
	width:700px;
	margin:20px auto;
}

.container{
	margin-bottom:40px;
}

.top-label{
	background:url(img/label_bg.png) no-repeat;
	display:inline-block;
	margin-left:20px;
	position:relative;
	margin-bottom:-15px;
}

.label-txt{
	background:url(img/label_bg.png) no-repeat top right;
	display:inline-block;
	font-size:10px;
	height:36px;
	margin-left:10px;
	padding:12px 15px 0 5px;
	text-transform:uppercase;
}

.content-area{
	background:url(img/container_top.png) no-repeat #fcfcfc;
	padding:15px 20px 0 20px;
}

.content{
	padding:10px;

}
.content1{
	padding:10px;
  position: relative;
} 
.drag-desired{

	padding:30px;
}

.bottom-container-border{
	background:url(img/container_bottom.png) no-repeat;
	height:14px;
}

.product{
	border:2px solid #F5F5F5;
	float:left;
	margin:15px;
	padding:10px;
}

.product img{
	cursor:move;
}

p.descr{
	padding:5px 0;
}

small{
	display:block;
	margin-top:4px;
}


.tooltip.fixed {
text-align: right;
}
.tooltip{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	display: none;

	background-color:#666666;
	border:1px solid #666666;
	color:#fcfcfc;

	padding:10px;
	
	-moz-border-radius:12px;
	-khtml-border-radius: 12px;
	-webkit-border-radius: 12px;
	border-radius:12px;
}

به کلاس tooltip توجه کنید.این کلاس به صورت خودکار توسط پلاگین simpletip ایجاد میشود ولی بصورت پیش فرض دارای استایل نمی باشد.ما خودمان به آن با استفاده از border-radius کمی شکل می بخشیم.

خوب حالا به بخش دوم کدها توجه کنید.

#cart-icon{
	width:128px;
	float:left;
	position:relative;
}

#ajax-loader{
	position:absolute;
	top:0px;
	left:0px;
	visibility:hidden;
}

#item-list{
	float:left;
	width:490px;
	margin-left:20px;
	padding-top:15px;
}

a.remove,a.remove:visited{
	color:red;
	font-size:10px;
	text-transform:uppercase;
}

#total{
	clear:both;
	float:right;
	font-size:10px;
	font-weight:bold;
	padding:10px 12px;
	text-transform:uppercase;
}

#item-list table{
	background-color:#F7F7F7;
	border:1px solid #EFEFEF;
	margin-top:5px;
	padding:4px;
}

a.button,a.button:visited{
	display:none;

	height:29px;
	width:136px;

	padding-top:15px;
	margin:0 auto;
	overflow:hidden;

	color:white;	
	font-size:12px;
	font-weight:bold;
	text-align:center;
	text-transform:uppercase;
	
	background:url(img/button.png) no-repeat center top;
}

a.button:hover{
	background-position:bottom;
	text-decoration:none;
}


a, a:visited {
	color:#00BBFF;
	text-decoration:none;
	outline:none;
}

a:hover{
	text-decoration:underline;
}

h1{
	font-size:28px;
	font-weight:bold;
}

h2{
	font-weight:normal;
	font-size:20px;
	
	color:#666666;
	text-indent:30px;
	margin:20px 0;
}

.tutorialzine h1{
	color:white;
	margin-bottom:10px;
	font-size:48px;
}

.tutorialzine h3{
	color:#F5F5F5;
	font-size:10px;
	font-weight:bold;
	margin-bottom:30px;
	text-transform:uppercase;
}

.tutorial-info{
	color:white;
	text-align:center;
	padding:10px;
	margin-top:-20px;
}
.content span {
position: absolute;
top: -10px;
right: 0;
font-size: 10px;
}

کدهای بالا به دلیل سادگی نیاز چندانی به توضیح ندارند.ما در بالا فقط استایل های مربوط به حرکت مکانما بر روی محصولات و استایل دکمه خرید و… را تنظیم کرده ایم.

فقط توضیح اینکه ما برای اینکه تنظیمات فوق در اینترنت اکسپلورر۶ هم جواب بدهد تکه کد زیر را به آن اضافه می کنیم.(البته مرورگر فوق دیگر از دور خارج شده است ولی به درخواست کاربران ما این بار تنظیمات مربوطه را قرار می دهیم.)

<!--[if lt IE 7]>
<style type="text/css">
	.pngfix { behavior: url(pngfix/iepngfix.htc);}	/* this is a special htc file that fixes the IE6 transparency issues */
	.tooltip{width:200px;};	/* provide a default width for the tooltips */
</style>
<![endif]-->

حالا نگاهی به بخش کدهای PHP می اندازیم.

 Untitled

ما کدهای PHP را در چند مرحله مینویسیم.ابتدا نگاهی به کد مربوط به بارگذاری محصولات می اندازیم.

$result = mysql_query("SELECT * FROM internet_shop");	// selecting all the products
while($row=mysql_fetch_assoc($result))
{
	echo '<div class="product"><img src="img/products/'.$row['img'].'" alt="'.htmlspecialchars($row['name']).'" width="128" height="128" class="pngfix" /></div>';
}

جای دیگری که ما از PHP استفاده کرده ایم tips.php است که تصویر نام هر فایل را به عنوان پارامتر دریافت می کند و بررسی می کند که آیا دارای تصویر است یا نه؟سپس خروجی ، توضیحات(tooltip) مربوط به هر تصویر را بصورت HTML نمایش می دهد.

define('INCLUDE_CHECK',1);
require "../connect.php";

if(!$_POST['img']) die("هیچ محصولی موجود نیست!");

$img=mysql_real_escape_string(end(explode('/',$_POST['img'])));

$row=mysql_fetch_assoc(mysql_query("SELECT * FROM internet_shop WHERE img='".$img."'"));

if(!$row) die("هیچ محصولی موجود نیست!");

echo '<strong>'.$row['name'].'</strong>
<p class="descr">'.$row['description'].'</p>
<strong>قیمت: ریال'.$row['price'].'</strong>
<small>برای پرداخت به سبد خرید خود اضافه نمایید.</small>';

ما همچنین از PHP برای برگرداندن اطلاعات ضروری محصولات انتخاب شده در سبد خرید استفاده خواهیم کرد.البته تفاوت دریافت اطلاعات در این است که ما آنها را بصورت JSON(اشیای جاوااسکریپت) دریافت می کنیم.

define('INCLUDE_CHECK',1);
require "../connect.php";

if(!$_POST['img']) die("هیچ محصولی موجود نیست!");

$img=mysql_real_escape_string(end(explode('/',$_POST['img'])));
$row=mysql_fetch_assoc(mysql_query("SELECT * FROM internet_shop WHERE img='".$img."'"));

echo '{status:1,id:'.$row['id'].',price:'.$row['price'].',txt:\'\
\
<table width="100%" id="table_'.$row['id'].'">\
<tr>\
<td width="60%">'.$row['name'].'</td>\
<td width="10%">$'.$row['price'].'</td>\
<td width="15%"><select name="'.$row['id'].'_cnt" id="'.$row['id'].'_cnt" onchange="change('.$row['id'].');">\
<option value="1">1</option>\
<option value="2">2</option>\
<option value="3">3</option></slect>\
\
</td>\
<td width="15%"><a href="#" onclick="remove('.$row['id'].');return false;" class="remove">حذف</a></td>\
</tr>\
</table>\'}';

خروجی اشیا عبارتند از وضعیت(status)،قیمت(price)،آی دی(id) و توضیحات( txt).این اطلاعات توسط تابع AJAX که کمی بعد توضیح خواهیم داد استفاده خواهند شد.

بخش آخری که ما از PHP استفاده خواهیم کرد مربوط به order.php خواهد بود که کار پردازش سفارشات را بر عهده دارد.در حال حاضر ،این فقط کار خروجی سفارشات را بر عهده دارد ولی شما میتوانید به آن فرم ایمیل،درگاه های پرداخت ویا هر چیز دیگری را که خواستید به آن اضافه نمایید.

<?php

define('INCLUDE_CHECK',1);
require "connect.php";

if(!$_POST)	// if there is no data submitted to the form
{
	if($_SERVER['HTTP_REFERER'])	// redirect
	header('Location : '.$_SERVER['HTTP_REFERER']);
	exit;	// and exit
}

?>

<!-- XHTML code.. -->

<?php

$cnt = array();
$products = array();

foreach($_POST as $key=>$value)
{
	$key=(int)str_replace('_cnt','',$key);
	$products[]=$key;	// store the product ids in an array
	$cnt[$key]=$value;	// create a key / value pair where for each product id there is a corresponding value being the number of products
 purchased}

$result = mysql_query("SELECT * FROM internet_shop WHERE id IN(".join($products,',').")");	// selecting all the products with the IN() function

if(!mysql_num_rows($result))	// no products found
{
	echo '<h1>خطایی در سفارش شما رخ داده است!</h1>';
}
else
{
	echo '<h1>سفارش های شما:</h1>';
	while($row=mysql_fetch_assoc($result))
	{
		echo '<h2>'.$cnt[$row['id']].' x '.$row['name'].'</h2>';
		$total+=$cnt[$row['id']]*$row['price'];
	}

	echo '<h1>مجموع: '.$total.'</h1>';
}

?>

خوب کدهای PHP به پایان رسیدند.حالا به سراغ بخش jQuery  میرویم.

Untitled

در ابتدای این بخش کتابخانه های ضروری مورد نیاز را وارد می کنیم.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="simpletip/jquery.simpletip-1.3.1.pack.js"></script> <!-- the jQuery simpletip plugin -->
<script type="text/javascript" src="script.js"></script> <!-- our script.js file -->

خوب حالا به سراغ کدهای اسکریپت می رویم.

var purchased=new Array();	//an array containing all the products we've purchased so far
var totalprice=0;	//the total price

$(document).ready(function(){

	$('.product').simpletip({	//using the simpletip plugin

		offset:[40,0],
		content:'<img style="margin:10px;" src="img/ajax_load.gif" alt="loading" />',	// default content
		onShow: function(){

			var param = this.getParent().find('img').attr('src');
			// fix for IE6
			if($.browser.msie && $.browser.version=='6.0')
			{
				param = this.getParent().find('img').attr('style').match(/src=\"([^\"]+)\"/);
				param = param[1];
			}

			// after the tooltip is shown, load the tips.php file and pass the image name as a parameter
			this.load('ajax/tips.php',{img:param});
		} 

	});

	$(".product img").draggable({	// enable all product images to be dragged

	containment: 'document',
	opacity: 0.6,
	revert: 'invalid',
	helper: 'clone',
	zIndex: 100

	});

	$("div.content.drop-here").droppable({	// convert the shopping cart to a droppable

			drop:
				function(e, ui)
				{
					var param = $(ui.draggable).attr('src');
					// IE6 fix
					if($.browser.msie && $.browser.version=='6.0')
					{
						param = $(ui.draggable).attr('style').match(/src=\"([^\"]+)\"/);
						param = param[1];
					}

					addlist(param);	// the special addlist function - see below
				}

	});

});

ایده اصلی در اینجا این است که ما از آدرس تصاویر به عنوان کلید منحصر به فرد برای ارسال به PHP استفاده خواهیم کرد.هر محصول در دیتابیس دارای یک فیلد نام است که ما را قادر می کند تا هر محصول را با تصویر آن پیدا کنیم.

این بخش از کد بعد از بارگذاری کامل صفحه اجرا خواهد شد پس ما مطمئن خواهیم بود که تمام عناصر صفحه به طور کامل بارگذاری شده اند.

در زیر بخش دوم کد رو مشاهده می کنید.

function addlist(param)
{
	// the addlist function ads a product to the shopping cart

	$.ajax({	// sending an ajax request to addtocart.php
	type: "POST",
	url: "ajax/addtocart.php",
	data: 'img='+encodeURIComponent(param),	// the product image as a parameter
	dataType: 'json',	// expecting json
	beforeSend: function(x){$('#ajax-loader').css('visibility','visible');},	// showing the loading gif
	success: function(msg){

		$('#ajax-loader').css('visibility','hidden');	// hiding the loading gif animation
		if(parseInt(msg.status)!=1)
		{
			return false;	// if there has been an error, return false
		}
		else
		{
			var check=false;
			var cnt = false;

			for(var i=0; i<purchased.length;i++)
			{
				if(purchased[i].id==msg.id)	// find if we have already bought this prduct
				{
					check=true;
					cnt=purchased[i].cnt;

					break;
				}
			}

			if(!cnt)	// if we haven't bought it yet, or we have removed it from the purchases, we insert it in the shopping cart
				$('#item-list').append(msg.txt);

			if(!check)	// if we haven't bought it yet, insert it in the purchased array
			{
				purchased.push({id:msg.id,cnt:1,price:msg.price});
			}

			else	// else if we've bought it
			{
				if(cnt>=3) return false;	// ۳ products of type max

				purchased[i].cnt++;
				$('#'+msg.id+'_cnt').val(purchased[i].cnt);	// update the select box
			}

			totalprice+=msg.price;	// recalculate the price
			update_total();	// update the total div

		}

		$('.tooltip').hide();	// hiding the tooltip (sometimes it stays on screen after the drag)

	}
	});
}

function findpos(id)	// a helper function that finds the position at which the product is inserted in the array, returns the position
{
	for(var i=0; i<purchased.length;i++)
	{
		if(purchased[i].id==id)
			return i;
	}

	return false;
}

function remove(id)	// remove a product from the shopping cart
{
	var i=findpos(id);	// find its position in the array

	totalprice-=purchased[i].price*purchased[i].cnt;	// recalculate the price
	purchased[i].cnt = 0;	// reset the counter

	$('#table_'+id).remove();	// remove it from the cart
	update_total();	// update the total price counter on the page
}

function change(id)	// evoked when we change the number of products via the select area
{
	var i=findpos(id);

	totalprice+=(parseInt($('#'+id+'_cnt').val())-purchased[i].cnt)*purchased[i].price;

	purchased[i].cnt=parseInt($('#'+id+'_cnt').val());
	update_total();
}

function update_total()	// function that updates the total price div on the page
{
	if(totalprice)
	{
		$('#total').html('مجموع: '+totalprice+' ریال');	// if we've bought somehitng, show the total price div and the purchase button
		$('a.button').css('display','block');
	}
	else	// hide them
	{
		$('#total').html('');
		$('a.button').hide();
	}
}

در کد بالا توضیح خاصی وجود ندارد.فقط اینکه ما از id برای اشاره به هر محصول استفاده کرده ایم.id یک شناسه منحصر به فرد است که توسط پایگاه داده هنگام اضافه کردن محصول به آن، بصورت خودکار به آن اختصاص داده میشود.

فقط به این نکته توجه کنید که ارسال اطلاعات به پایگاه داده بصورت ajax انجام میپذیرد .

پایان

+7
0


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی مدیر سایت

در اردیبهشت سالی از سال های خدا بدنیا آمدم.درس خواندم و مهندس شدم.ازآنجایی که علاقه شدیدی به برنامه نویسی و ترجمه وآموزش داشتم در راستای اهدافم این وبسایت رو راه اندازی کردم تا دین خود را به جامعه برنامه نویسی ادا کرده باشم.

۵ دیدگاه ها

  1. با سلام و تشکر
    من دنبال آموزش ساخت سبد خرید و پرداخت آنلاین با asp.net 2010میگردم خیلی جستجو کردم ولی نتیجه ای نتونستم بگیرم از دوستان راهنمایی می خواستم لطفا به ایمیلم پاسخ بدید

  2. remove این کار نمیکنه یه بار تست کنین مرسی

دیدگاه خود را برای redwoman بنویسید انصراف از پاسخ

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


− 3 = چهار

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>