آموزش ساخت صفحه سبد خرید محصولات در فروشگاه اینترنتی با php‌

ر این قسمت به سراغ ساخت فایل cart.php می رویم. در واقع این صفحه برای تایید خرید شماست. برای این منظور مراحل زیر را با هم دیگر انجام می دهیم.

مراحل ایجاد صفحه نمایش محصولات موجود در سبد خرید (تایید خرید)

مرحله اول: باید از فایل index.php یک save as بگیرید و نام آن را به cart.php تغییر دهید. تصاویر زیر را نگاه کنید.

save as کردن از فایل index

ایجاد فایل cart

مرحله دوم: حالا توابع gerPro() ، getCatPro() و getBrandPro() را حذف نمایید. به تصویر زیر نگاه کنید.

حدف کردن توابع اضافی از فایل cart در صفحه نمایش سد خرید

مرحله سوم: حالا باید لینک تایید خرید را در فایل Shopping_Cart.php درست کنیم. بنابراین فایل Shopping_Cart.php را با استفاده از Notepad++ باز کنید و کد زیر را در آن پیدا کنید.

<span><a href="#" >تایید خرید !</a></span>

آن را پاک کنید و کدهای زیر را در به جای آن قرار دهید.

<span><a href="cart.php" >تایید خرید !</a></span>

حالا به آدرس http://localhost/ecommerce/ بروید و در کادر بالا سمت چپ بر روی لینک "تایید خرید" فشار دهید.

صفحه index

حالا به صفحه زیر می روید که هیچ چیزی در آن تعریف نشده است.

صفحه بدست آمده از کلیک بر روی تایید خرید

سپس باید فایل cart.php را با استفاده از Notepad++ باز کرده و کدهای زیر را در آن پیدا کنید.

<div class="cleaner_with_height">&nbsp;</div>
										
		<?php

		?>
						
<div class="cleaner_with_height">&nbsp;</div>

حالا آنها را پاک کنید و کدهای زیر را به جای آنها قرار دهید.

<div class="cleaner_with_height">&nbsp;</div>

<form action="cart.php" method="post" enctype="multipart/form-data">
	
	<table align="center" width="100%" bgcolor="#be457c" style="border-collapse: collapse;">
	
		<tr align="center" style="border: 1px solid black;" >
		
			<td colspan="5" style="border: 1px solid black;text-align:center;background:#440522;" >
				<h2>**** محصولاتی که تا اکنون شما خریده اید ****</h2>
			</td>
		
		</tr>

	
		<tr  style="border: 1px solid black;" >
			<th colspan="2" style="border: 1px solid black;padding: 15px;text-align:right;">محصول</th>			
			<th style="border: 1px solid black;padding: 15px;text-align:right;">تعداد</th>			
			<th style="border: 1px solid black;padding: 15px;text-align:right;">قیمت</th>			
			<th style="border: 1px solid black;padding: 15px;text-align:right;">حذف</th>
		</tr>
	</table>

</form>


<div class="cleaner_with_height">&nbsp;</div>

این کدها در واقع نشان دهنده یک جدول html است، که درون یک تگ form قرار دارد و اقداماتی که کاربر می تواند انجام دهد را شامل می شود.

با استفاده از این فرم دستورات کاربر (مشتری) دریافت می شود. من در مورد ساخت جدول در html و ایجاد فرم توضیح نمی دهم، چون، کاملا ساده می باشد و ضمنا من در قسمت های قبل توضیحات کوتاهی در موردشان به شما داده ام.

تصویر صفحه ی cart.php را در زیر مشاهده می نمایید:

تصویر صفحه ی cart وقتی که جدول محصول ساخته شده است.

همانطور که در تصویر بالا ملاحظه می کنید، یک جدول با 4 ستون ایجاد شده که اگر به کدهای نوشته شده دقت کرده باشید، این جدول درون یک فرم قرار دارد. ولی هیچ چیزی در این جدول هنوز درج نشده است. گام بعدی ما، باعث می شود که آیتم هایی به این جدول اضافه شود که این آیتم ها همان محصولاتی هستند که مشتری درون سبد خرید خود قرار داده است.

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

<div class="cleaner_with_height">&nbsp;</div>

<form action="cart.php" method="post" enctype="multipart/form-data">
	
	<table align="center" width="100%" bgcolor="#be457c" style="border-collapse: collapse;">
	
		<tr align="center" style="border: 1px solid black;" >
		
			<td colspan="5" style="border: 1px solid black;text-align:center;background:#440522;" >
				<h2>**** محصولاتی که تا اکنون شما خریده اید ****</h2>
			</td>
		
		</tr>

	
		<tr  style="border: 1px solid black;" >
			<th colspan="2" style="border: 1px solid black;padding: 15px;text-align:right;">محصول</th>			
			<th style="border: 1px solid black;padding: 15px;text-align:right;">تعداد</th>			
			<th style="border: 1px solid black;padding: 15px;text-align:right;">قیمت</th>			
			<th style="border: 1px solid black;padding: 15px;text-align:right;">حذف</th>
		</tr>
	</table>

</form>


<div class="cleaner_with_height">&nbsp;</div>

و آنها را پاک کنید و به جای آنها کد های زیر را قرار دهید.

<div class="cleaner_with_height">&nbsp;</div>
 
	<form action="cart.php" method="post" enctype="multipart/form-data">
		
		<table align="center" width="100%" bgcolor="#be457c" style="border-collapse: collapse;">
		
			<tr align="center" style="border: 1px solid black;" >
			
				<td colspan="5" style="border: 1px solid black;text-align:center;background:#440522;" >
					<h2>**** محصولاتی که تا اکنون شما خریده اید ****</h2>
				</td>
			
			</tr>
 
		
			<tr  style="border: 1px solid black;" >
				<th colspan="2" style="border: 1px solid black;padding: 15px;text-align:right;">محصول</th>			
				<th style="border: 1px solid black;padding: 15px;text-align:right;">تعداد</th>			
				<th style="border: 1px solid black;padding: 15px;text-align:right;">قیمت</th>			
				<th style="border: 1px solid black;padding: 15px;text-align:right;">حذف</th>
			</tr>
			
			<?php
				$total	=	0;
				
				global $con;
				<span style="background-color: #ff0000;" data-mce-style="background-color: #ff0000;">
				//creating or using cookie 
				if(isset($_COOKIE["ipUserEcommerce"]))
				{
					$ip	= $_COOKIE["ipUserEcommerce"];
				}else{
					$ip=getIp();
					setcookie('ipUserEcommerce',$ip,time()+1206900);
				}
				</span>
				$sel_price	=	"select * from cart where ip_add='$ip'";
				
				$run_price	=	@mysqli_query($con,"SET NAMES SET utf8");
				
				$run_price	=	@mysqli_query($con,"SET CHARACTER SET utf8");
				
				$run_price	=	@mysqli_query($con,$sel_price);
				
				while($p_price 	=	@mysqli_fetch_array($run_price))
				
				{
				
					$pro_id	=	$p_price['p_id'];
					
					$pro_price	=	"select * from products where product_id='$pro_id'";
					
					$run_pro_price	=	@mysqli_query($con,$pro_price);
					
					while($pp_price	=	@mysqli_fetch_array($run_pro_price))
					
					{
						$product_price	=	array($pp_price['product_price']); 
					
						$product_title	=	$pp_price['product_title'];
						
						$product_image	=	$pp_price['product_image'];
						
						$single_price	=	$pp_price['product_price'];
						
						$values = array_sum($product_price);
						
						$total	+=	$values;	
			       ?>
 
			<tr align="center" style="border: 1px solid black;" >
				
				<td style="padding: 15px;">
					<?php echo $product_title ?>
				</td>
				
				<td style="padding: 15px;">
					<img src="Admin_area/<?php echo $product_image ?>" width="60" height="45" >
				</td>
				
				<td style="padding: 15px;">
					<input type='text' size='4' name='qty'>
				</td>
 
				<td style="padding: 15px;">
					<?php  echo $single_price ?>
				</td>
				
				<td style="padding: 15px;">
					<input type="checkbox" name="remove[]" />
				</td>
			
			</tr>
			
			<?php
			
					}
			
				}
			
			?>
 
			<tr align="left" style="border:1px solid black;" >
			
				<td colspan="4" style="padding: 15px;">
					<b>جمع کل:</b>
				</td>
				
				<td style="padding: 15px;">
					<b><?php echo $total." تومان "; ?></b>
				</td>
			
			</tr>
 
		</table>
 
	</form>		
						
<div class="cleaner_with_height">&nbsp;</div>

بعد از نوشتن کدهای بالا، باید تصویر صفحه ی cart.php به صورت زیر باشد. به قسمت هایی که با فلش زرد رنگ مشخص شده، دقت کنید.

صفحه cart با نمایش محصولا و قیمت هر کدام از آنها

بعد از دیدن تصویر بالا می رویم سراغ شرح آنچه در کدها انجام دادیم. به قسمتی از کد بالا دقت کنید که من برای شما در زیر آورده ام.

$total	=	0;

در اینجا یک متغییر تحت عنوان $total داریم که باید با مقدار صفر ، مقدار دهی اولیه شود و در نهایت باید قیمت کل محصولاتی را که مشتری می خرد، نشان دهد.

حالا بعد از $total، متغییرهای زیر را در کد مشاهده می نمایید.

				global $con;
				<span style="background-color: #ff0000;" data-mce-style="background-color: #ff0000;">
				//creating or using cookie 
				if(isset($_COOKIE["ipUserEcommerce"]))
				{
					$ip	= $_COOKIE["ipUserEcommerce"];
				}else{
					$ip=getIp();
					setcookie('ipUserEcommerce',$ip,time()+1206900);
				}</span>
				
				$sel_price	=	"select * from cart where ip_add='$ip'";
				
				$run_price	=	@mysqli_query($con,"SET NAMES SET utf8");
				
				$run_price	=	@mysqli_query($con,"SET CHARACTER SET utf8");
				
				$run_price	=	@mysqli_query($con,$sel_price);

متغییر $con که برای ارتباط با پایگاه داده است.

متغییر $ip برای شناسایی مشتری از طریق ip است. اما در اینجا به خاطر اینکه ممکن است ip مشتری به هر دلیلی تغییر کند ip را به مدت 2 هفته در یک آرایه فوق سراسری کوکی به صورت زیر ذخیره می کنیم:

$_COOKIE["ipUserEcommerce"]

اینکار باعث می شود که متغییر $ip از تغییرات احتمالی ip مشتری، مصون بماند. برای درک بهتر cookie به مقاله ی "معرفی آرایه های فوق سراسری session و cookie در PHP" مراجعه نمایید.

متغییر $sel_price نیز یک دستور sql می باشد که می گوید از جدول داده ایی cart هر چه این مشتری انتخاب کرده را جدا کن (دقت کنید من مفهوم را بیان می کنم).

توجه کنید که $run_price دستور sql را در پایگاه داده اجرا می کند.

بعد از متغییرها به کد زیر می رسیم:

while($p_price 	=	@mysqli_fetch_array($run_price))
				
				{
				
					$pro_id	=	$p_price['p_id'];
					
					$pro_price	=	"select * from products where product_id='$pro_id'";
					
					$run_pro_price	=	@mysqli_query($con,$pro_price);

در اینجا ما ابتدا با استفاده از حلقه while، خروجی دستور $run_price را به صورت جزئی، مورد بررسی قرار می دهیم.

متغییر $pro_id برای ما id های محصولاتی را که مشتری خریده در می آورد و در خودش ذخیره می کند.

متغییر $pro_price نیز باز هم یک دستور sql می باشد که با توجه به متغییر $pro_id هر کدام از محصولات (رکوردهای جدول products) که فیلد product_id که با متغییر $pro_id یکی باشد را به عنوان خروجی، باز می گرداند.

متغییر $run_pro_price هم این دستور را در پایگاه داده اعمال می کند.

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

طبق چیزی که ما به عنوان جدول داده ایی products تعریف کرده ایم، هر رکورد از جدول داده ایی products شامل فیلدهایی همچون نام محصول، آی دی محصول، قیمت محصول، مدل محصول، دسته محصول، برند محصول ، توضیحات محصول، عکس محصول و کلمات کلیدی محصول می باشد. حالا به کد زیر دقت کنید.

while($pp_price	=	@mysqli_fetch_array($run_pro_price))
    {
    $product_price	=	array($pp_price['product_price']); 
    $product_title	=	$pp_price['product_title'];
    $product_image	=	$pp_price['product_image'];
    $single_price	=	$pp_price['product_price'];
    $values = array_sum($product_price);
	   $total	+=	$values;

حالا از طریق حلقه while شروع می کنیم و مشخصاتی را که نیاز داریم (اسم محصول، تصویر محصول ، قیمت محصول) را به دست می آوریم. متغییر $product_price که در واقع یک آرایه می باشد که قیمت محصولات را در آن ذخیره می کنیم. آرایه ایی که از حقه while پدید می آیید.

همانطور که در تصویر بالا ملاحظه می کنید تعداد تکرار حلقه برای من 7 است (دقت کنید که اندیس آرایه ها همواره از 0 شروع می شود)

بنابراین قیمت 7 محصول را در آرایه ذخیره کرده ام. دوستان عزیزم در صورتیکه درباره آرایه ها اطلاعاتی ندارید لطفا زیر را حتما مطالعه بفرمایید:

آموزش مقدماتی تا پیشرفته آرایه ها در PHP

همانطور که ملاحظه می کنید متغییر $product_title که نام محصول را برای ما در خود ذخیره می کند و متغییر $product_image که از طریق آن تصویر محصول را به نمایش در می آوریم. اما متغییر $single_price که قیمت به صورت تکی را در آن قرار می دهیم و در ادامه بهتر آن را درک می کنید.

تابع array_sum()

اما کد زیر را ببینید

$values = array_sum($product_price);

من در این کد از تابع array_sum() استفاده کرده ام. کار این تابع این است که مجموع مقادیر یک آرایه را باز می گرداند. مجموع قیمت محصولات را در متغییر $values ذخیره می کنیم و آنگاه آن را با متغییر $total جمع می کنیم.

سایر کدهایی که مشاهده می نمایید ، ترکیبی از کدهای html و متغییرهایی است که توضیح دادم. من در انتها کل کدهایی فایل cart.php را تا این مرحله برای شما قرار می دهم بنابراین در نهایت فایل cart.php شما باید دارای کدهای زیر باشد.

<!-- start of Header -->
	<?php	include('includes/Header.php');	?>
<!-- end of Header -->
 
<!---- Start Online Shopping Cart ----> 
<?php	include('includes/Shopping_Cart.php');	?>
<!---- end Online Shopping Cart ---->
	
<!-- start of content -->   
    <div id="templatemo_content">
 
	<!-- start of left ocntent -->
				<div id="templatemo_content_left">
					<h1>به سایت جهانگیر پچکم دات کام خوش آمدید </h1>
					<p>امروزه با افزایش روز افزون تولیدکنندگان مطرح داخلی و خارجی  انواع لوازم، قدرت انتخاب مشتری به شدت بالا رفته است. اما با توجه به اینکه هیچ فروشگاهی به طور فیزیکی، گنجایش تمامی این محصولات را نداشته و نیز هیچ فروشنده‌ای اطلاعات کاملی از تمامی محصولات موجود در فروشگاه خود ندارد و حتی در صورت داشتن تمامی اطلاعات، توضیح تک تک آنها، نیازمند صرف انرژی و زمان بسیار زیادی خواهد بود، جهانگیر پچکم دات کام بر آن شد تا یک مرجع جامع و کامل تخصصی ارزیابی، مشاوره و فروش محصولات  تولید داخل و خارج کشور را بصورت یک فروشگاه اینترنتی در اختیار عموم مردم ایران قرار دهد.</p>
<div class="cleaner_with_height">&nbsp;</div>
 
	<form action="cart.php" method="post" enctype="multipart/form-data">
		
		<table align="center" width="100%" bgcolor="#be457c" style="border-collapse: collapse;">
		
			<tr align="center" style="border: 1px solid black;" >
			
				<td colspan="5" style="border: 1px solid black;text-align:center;background:#440522;" >
					<h2>**** محصولاتی که تا اکنون شما خریده اید ****</h2>
				</td>
			
			</tr>
 
		
			<tr  style="border: 1px solid black;" >
				<th colspan="2" style="border: 1px solid black;padding: 15px;text-align:right;">محصول</th>			
				<th style="border: 1px solid black;padding: 15px;text-align:right;">تعداد</th>			
				<th style="border: 1px solid black;padding: 15px;text-align:right;">قیمت</th>			
				<th style="border: 1px solid black;padding: 15px;text-align:right;">حذف</th>
			</tr>
			
			<?php
				$total	=	0;
				
				global $con;
				
				<span style="background-color: #ff0000;" data-mce-style="background-color: #ff0000;">
				//creating or using cookie 
				if(isset($_COOKIE["ipUserEcommerce"]))
				{
					$ip	= $_COOKIE["ipUserEcommerce"];
				}else{
					$ip=getIp();
					setcookie('ipUserEcommerce',$ip,time()+1206900);
				}</span>
				
				$sel_price	=	"select * from cart where ip_add='$ip'";
				
				$run_price	=	@mysqli_query($con,"SET NAMES SET utf8");
				
				$run_price	=	@mysqli_query($con,"SET CHARACTER SET utf8");
				
				$run_price	=	@mysqli_query($con,$sel_price);
				
				while($p_price 	=	@mysqli_fetch_array($run_price))
				
				{
				
					$pro_id	=	$p_price['p_id'];
					
					$pro_price	=	"select * from products where product_id='$pro_id'";
					
					$run_pro_price	=	@mysqli_query($con,$pro_price);
					
					while($pp_price	=	@mysqli_fetch_array($run_pro_price))
					
					{
						$product_price	=	array($pp_price['product_price']); 
					
						$product_title	=	$pp_price['product_title'];
						
						$product_image	=	$pp_price['product_image'];
						
						$single_price	=	$pp_price['product_price'];
						
						$values = array_sum($product_price);
						
						$total	+=	$values;	
			       ?>
 
			<tr align="center" style="border: 1px solid black;" >
				
				<td style="padding: 15px;">
					<?php echo $product_title ?>
				</td>
				
				<td style="padding: 15px;">
					<img src="Admin_area/<?php echo $product_image ?>" width="60" height="45" >
				</td>
				
				<td style="padding: 15px;">
					<input type='text' size='4' name='qty'>
				</td>
 
				<td style="padding: 15px;">
					<?php  echo $single_price ?>
				</td>
				
				<td style="padding: 15px;">
					<input type="checkbox" name="remove[]" />
				</td>
			
			</tr>
			
			<?php
			
					}
			
				}
			
			?>
 
			<tr align="left" style="border:1px solid black;" >
			
				<td colspan="4" style="padding: 15px;">
					<b>جمع کل:</b>
				</td>
				
				<td style="padding: 15px;">
					<b><?php echo $total." تومان "; ?></b>
				</td>
			
			</tr>
 
		</table>
 
	</form>		
						
<div class="cleaner_with_height">&nbsp;</div>
				</div>
    <!-- end of left content  -->
        
<!-- start of right content -->
	<?php	include('includes/Right_Sidebar.php');	?>
<!-- end of right content -->
    <div class="cleaner">&nbsp;</div>
</div>
 <!-- end of content -->
 
<!-- start of footer -->
	<?php include('includes/Footer.php');	?>
<!-- end of footer -->

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

دیدگاه‌های شما (2 دیدگاه)

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

حسین

23 اسفند 1399

آقا عااااااااااااااااااالی من سبد خریدمو با یکی 2 بار خوندن مطالب شما پیاده سازی کردم تشکر

shams

04 مهر 1397

سلام آقای پچکم,خسته نباشید,واقعا آموزش هاتون عالیه, من قسمتهایی از پروژم که مشکل داشت حل شد, فقط وقتی در قسمتی که میخواهم از یک محصول چند عدد اضافه کنم مشکل دارم, ممنون میشم راهنمایی کنید

جهانگیر پچکم

سلام به شما، در مورد اضافه کردن تعداد بیشتری از یک محصول خاص به سبد خرید مشتری ( مثلا شما به عنوان یک مشتری قصد دارید از محصول دوربین 1 به تعداد 5 عدد خریداری بکنید) من در قسمت های بعدی به طور کامل توضیح داده ام. حتما مطالعه بفرمایید، چون توی قسمت های آینده، خیلی مسائل مهمی مطرح شده. انشاالله موفق باشید.