ساخت سبد خرید با PHP و MySQL
امروزه با وجود CMS های آماده مانند وردپرس ساخت فروشگاه های اینترنتی و ساخت سبد خرید برای کاربران و وبمستران بسیار ساده شده است،اما شاید شما وب سایت خودتان را از صفر طراحی و توسعه داده باشید و نیاز داشته باشید تا بخش سبد خرید را به فروشگاه خود اضافه کنید.در این مقاله می خواهیم با نحوه ساخت سبد خرید با PHP و MySQL آشنا شویم.
ابتدا نگاهی به فایل های که قرار است توسعه دهیم می اندازیم
ساختار فایل های سبد خرید
- reset.css – شما میتوانید از این لینک ریست کنید.
- style.css – فایل CSSای که برای استایل دهی به HTML از آن استفاده خواهیم کرد.
- connection.php – فایلی که اتصال دیتابیس ما را ایجاد میکند.
- index.php – قالب سبد خرید ما.
- cart.php – فایلی که میتواند محصولاتمان را از سبد خرید تغییر دهد. (اضافه کردن و حذف کردن)
- products.php – صفحه لیست محصولات.
نوشتن کدهای HTML
با نوشتن کدهای HTML شروع میکنیم و سپس به آن استایل میدهیم. بنابراین index.php را باز کنید و کدهای زیر را کپی/پیست کنید.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="css/reset.css" /> <link rel="stylesheet" href="css/style.css" /> <title>Shopping cart</title> </head> <body> <div id="container"> <div id="main"> </div><!--end main--> <div id="sidebar"> </div><!--end sidebar--> </div><!--end container--> </body> </html>
همانطور که میبینید، صفحه ما دو ستون دارد: ستون اصلی و سایدبار. بیایید به سراغ فایل CSS برویم(در طول دوره رایگان آموزش Css با نحوه استفاده از کدهای و فایل های Css آشنا شده ایم). فایل style.css را باز کرده و کد زیر را بنویسید:
body { font-family: Verdana; font-size: 12px; color: #444; } #container { width: 700px; margin: 150px auto; background-color: #eee; overflow: hidden; /* Set overflow: hidden to clear the floats on #main and #sidebar */ padding: 15px; } #main { width: 490px; float: left; } #sidebar { width: 200px; float: left; }
بعد از انجام کارهای بالا نتیجه کار باید مانند تصویر زیر باشد
ساخت دیتابیس یا پایگاه داده برای سبد خرید
قبل از اینکه وارد بخش PHP/MySQL شویم، لازم است دیتابیس را بسازیم. بنابراین phpMyadmin را باز کرده و این مراحل را دنبال کنید:(در طول دوره آموزش صفر تا صد PHP می توانید کار با کدهای php و دیتابیس MySql را یادبگیرید)
به تب Privileges بروید، روی دکمه add new user کلیک کنید، و از تنظیمات زیر استفاده کنید: Username: tutorial; Host: localhost; Password: supersecretpassword; اکنون مطمئن شوید که Global privileges تنظیم شده باشد. سپس به مرحله بعد بروید.
یک دیتابیس جدید به نام tutorials بسازید.
یک جدول جدید به نام products ساخته و تعداد فیلدها را ۴ بگذارید. اکنون فیلدها را پر کنید: id_integer – مطمئن شوید که این فیلد روی INT تنظیم شده و PRIMARY باشد (همچنین آن را auto_increment کنید). name – از نوع VARCHAR با طول ۱۰۰ تنظیم کنید. description – از نوع VARCHAR و طول ۲۵۰. price – روی DECIMAL(2,6) تنظیم کنید.
جدول خود را با تعدادی محصولات نمونه پر کنید.
برای صرفهجویی در زمان، من جدول محصولاتم را اکسپورت کردهام بنابراین شما میتوانید به سادگی کوئری زیر را اجرا کنید:
CREATE TABLE IF NOT EXISTS `products` ( `id_product` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(100) NOT NULL, `description` varchar(250) NOT NULL, `price` decimal(6,2) NOT NULL, PRIMARY KEY (`id_product`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ; INSERT INTO `products` (`id_product`, `name`, `description`, `price`) VALUES (1, 'Product 1', 'Some random description', '15.00'), (2, 'Product 2', 'Some random description', '20.00'), (3, 'Product 3', 'Some random description', '50.00'), (4, 'Product 4', 'Some random description', '55.00'), (5, 'Product 5', 'Some random description', '54.00'), (6, 'Product 6', 'Some random description', '34.00');
قبل از اینکه به استخراج داده ها از دیتابیس بپردازیم، یک قالب برای لیست محصولات و سبد خرید در فایل index.php ایجاد خواهم کرد. بنابراین کد زیر را ابتدای فایل index.php خود اضافه کنید:
<?php session_start(); require("includes/connection.php"); if(isset($_GET['page'])){ $pages=array("products", "cart"); if(in_array($_GET['page'], $pages)) { $_page=$_GET['page']; }else{ $_page="products"; } }else{ $_page="products"; } ?>
- session_start() – ایم کد درواقع به ما اجازه میدهد از سشن ها استفاده کنیم (بسیار مهم است که session_start قبل از اینکه هر داده دیگری به مرورگر ارسال شود، نوشته شود).
- در خط دوم، فایل connection.php که اجازه اتصال به دیتابیس را میدهد اضافه کردیم (ما به این مورد یکبار نیاز خواهیم داشت).
- یک مسئله مهم : تفاوت بین include و require این است که اگراز require استفاده کنید و فایل پیدا نشود، اجرای اسکریپت به پایان خواهد رسید. اگر از “include” استفاده کنید، اسکریپت به کار خود ادامه خواهد داد.
- به جای کپی کردن تمام کدهای HTML (لینک به CSS، به JS) به ازای هرفایل در سایتتان، میتوانید آنها را به یک فایل واحد نسبت دهید. بنابراین ابتدا بررسی میکنم که یک متغیر GET به نام “page set” وجود دارد. اگر وجود نداشت، یک متغیر جدید به نام _pagesمیسازم. اگر متغیر GET به نام pages اول تنظیم شده باشد، میخواهم مطمئن شوم فایلی که میخواهم اضافه شود، یک صفحه معتبر است.
پیشنهاد شگفت انگیز کدفرند،دسترسی به تمامی دوره های آموزشی کدفرند تنها با ۶۹ هزار تومان
برای این کار، باید فایل را اضافه کنیم. این خط را به index.php و بین div با آیدی “main” اضافه کنید.
<?php require($_page.".php"); ?>
کدهای زیر تمام محتوای index.php ما است:
<?php session_start(); require("includes/connection.php"); if(isset($_GET['page'])){ $pages=array("products", "cart"); if(in_array($_GET['page'], $pages)) { $_page=$_GET['page']; }else{ $_page="products"; } }else{ $_page="products"; } ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="css/reset.css" /> <link rel="stylesheet" href="css/style.css" /> <title>Shopping Cart</title> </head> <body> <div id="container"> <div id="main"> <?php require($_page.".php"); ?> </div><!--end of main--> <div id="sidebar"> </div><!--end of sidebar--> </div><!--end container--> </body> </html>
در قدم بعدی نوبت به اتصال به دیتابیس میرسد.فایل connections.php را باز کرده و خطوط زیر را اضافه کنید:
<?php $server="localhost"; $user="tutorial"; $pass="supersecretpassword"; $db="tutorials"; // connect to mysql mysql_connect($server, $user, $pass) or die("Sorry, can't connect to the mysql."); // select the db mysql_select_db($db) or die("Sorry, can't select the database."); ?>
حالا زمان نوشتن قالب HTML برای صفحه محصولات است. بنابراین فایل آن را باز کرده خطوط زیر را بنویسید:
<h1>Product List</h1> <table> <tr> <th>Name</th> <th>Description</th> <th>Price</th> <th>Action</th> </tr> <tr> <td>Product 1</td> <td>Some random description</td> <td>15 $</th> <td><a href="#">Add to cart</a></td> </tr> <tr> <td>Product 2</td> <td>Some random description</td> <td>25 $</th> <td><a href="#">Add to cart</a></td> </tr> </table>
همانطور که میبینید، سبد خرید ما زیبایی چندانی ندارد. پس اجازه دهید با اضافه کردن این CSS اضافه به آن استایل بدهیم.
body { font-family: Verdana; font-size: 12px; color: #444; } a {color: #48577D; text-decoration: none;} a:hover {text-decoration: underline;} h1, h2 {margin-bottom: 15px} h1 {font-size: 18px;} h2 {font-size: 16px} #container { width: 700px; margin: 150px auto; background-color: #eee; padding:15px; overflow: hidden; } #main { width: 490px; float: left; } #main table { width: 480px; } #main table th { padding: 10px; background-color: #48577D; color: #fff; text-align: left; } #main table td { padding: 5px; } #main table tr { background-color: #d3dcf2; } #sidebar { width: 200px; float: left; }
قبل از اینکه محصولات را از دیتابیس استخراج کنیم، اجازه دهید ۲ سطر اخر جدول را از جدولمان پاک کنیم (فقط برای اینکه ببینیم جدولمان به چه شکل خواهد بود).بخش های زیر را پاک می کنیم:
<tr> <td>Product 1</td> <td>Some random description</td> <td>15 $</th> <td><a href="#">Add to cart</a></td> </tr> <tr> <td>Product 2</td> <td>Some random description</td> <td>25 $</th> <td><a href="#">Add to cart</a></td> </tr>
حالا در جایی که سطرهای جدول بودند، کد PHP زیر را بنویسید:
<?php $sql="SELECT * FROM products ORDER BY name ASC"; $query=mysql_query($sql); while ($row=mysql_fetch_array($query)) { ?> <tr> <td><?php echo $row['name'] ?></td> <td><?php echo $row['description'] ?></td> <td><?php echo $row['price'] ?>$</td> <td><a href="index.php?page=products&action=add&id=<?php echo $row['id_product'] ?>">Add to cart</a></td> </tr> <?php } ?>
- پس، ما اول از SELECT برای گرفتن محصولات استفاده کردیم، سپس داخل یک حلقه هر سطر از دیتابیس را پیمایش کرده و آن را در یک سطر از جدول چاپ کردیم.
- میتوانید ببینید که لینک ها به همان صفحه اشاره دارند (وقتی کاربر روی لینک محصول کلیک کنید، محصول به سبدخرید/سشن اضافه شده است). ما فقط بعضی متغیرهای اضافه مانند آیدی محصول را ارسال میکنیم.
با اضافه کردن کد زیر در بالای صفحه، لینک ساخت سبد خرید کار خواهد کرد:
<?php if(isset($_GET['action']) && $_GET['action']=="add"){ $id=intval($_GET['id']); if(isset($_SESSION['cart'][$id])){ $_SESSION['cart'][$id]['quantity']++; }else{ $sql_s="SELECT * FROM products WHERE id_product={$id}"; $query_s=mysql_query($sql_s); if(mysql_num_rows($query_s)!=0){ $row_s=mysql_fetch_array($query_s); $_SESSION['cart'][$row_s['id_product']]=array( "quantity" => 1, "price" => $row_s['price'] ); }else{ $message="This product id it's invalid!"; } } } ?>
- اگر متغیر GET به نام action تنظیم شده و مقدار آن ADD باشد، کد را اجرا خواهیم کرد.
- مطمئن میشویم آیدیای که از متغیر GET ارسال شده، عددی باشد.
- اگر آیدی محصول در SESSION سبدخرید باشد، تعداد را ۱ واحد افزایش میدهیم.
- اگر آیدی محصول در سشن نباشد، باید مطمئن شویم که آیدی ارسال شده از طریق متغیر GET در دیتابیس وجود داشته باشد. اگر بود، قیمت را برداشته و سشن آن را ایجاد میکنیم. اگر نبود، متغیری با نام message را تنظیم میکنیم که خطای ما را نگه دارد.
بگذارید بررسی کنیم که آیا متغیر message تنظیم شده است و آن را در صفحه چاپ کنیم (این کد را زیر H2 عنوان صفحه بنویسید):
<?php if(isset($message)){ echo "<h2>$message</h2>"; } ?>
اینجا شما صفحه products.php کامل شده را میبینید.
<?php if(isset($_GET['action']) && $_GET['action']=="add"){ $id=intval($_GET['id']); if(isset($_SESSION['cart'][$id])){ $_SESSION['cart'][$id]['quantity']++; }else{ $sql_s="SELECT * FROM products WHERE id_product={$id}"; $query_s=mysql_query($sql_s); if(mysql_num_rows($query_s)!=0){ $row_s=mysql_fetch_array($query_s); $_SESSION['cart'][$row_s['id_product']]=array( "quantity" => 1, "price" => $row_s['price'] ); }else{ $message="This product id it's invalid!"; } } } ?> <h1>Product List</h1> <?php if(isset($message)){ echo "<h2>$message</h2>"; } ?> <table> <tr> <th>Name</th> <th>Description</th> <th>Price</th> <th>Action</th> </tr> <?php $sql="SELECT * FROM products ORDER BY name ASC"; $query=mysql_query($sql); while ($row=mysql_fetch_array($query)) { ?> <tr> <td><?php echo $row['name'] ?></td> <td><?php echo $row['description'] ?></td> <td><?php echo $row['price'] ?>$</td> <td><a href="index.php?page=products&action=add&id=<?php echo $row['id_product'] ?>">Add to cart</a></td> </tr> <?php } ?> </table
بیایید به index.php برگردیم و سایدبار را بسازیم. کد زیر را اضافه کنید:
<h1>Cart</h1> <?php if(isset($_SESSION['cart'])){ $sql="SELECT * FROM products WHERE id_product IN ("; foreach($_SESSION['cart'] as $id => $value) { $sql.=$id.","; } $sql=substr($sql, 0, -1).") ORDER BY name ASC"; $query=mysql_query($sql); while($row=mysql_fetch_array($query)){ ?> <p><?php echo $row['name'] ?> x <?php echo $_SESSION['cart'][$row['id_product']]['quantity'] ?></p> <?php } ?> <hr /> <a href="index.php?page=cart">Go to cart</a> <?php }else{ echo "<p>Your Cart is empty. Please add some products.</p>"; } ?>
- ابتدا بررسی میکنیم که سشن سبد خرید موجود باشد. اگر نبود، یک پیام مبنی بر خالی بودن سبد خرید به کاربر نمایش میدهیم.
- بعد ما یک SELECT برای MySQL میسازیم، ولی فقط محصولاتی را انتخاب میکنیم که در سشن هم موجود باشند. برای انجام این کار، از تابع foreach استفاده میکنیم. بنابراین ما سشن را پیمایش کرده و آیدی محصولات را به SELECT اضافه میکنیم. بعد، از تابع substr استفاده کرده تا اخرین کاما را از SELECT حذف کنیم.
- در آخر داده را به مرورگر ارسال میکنیم.
نگاهی به تصاویر زیر بندازید:
از آنجا که index.php یک قالب برای تمام فایل ها است، سایدبار در cart.php نیز نمایش داده میشود.در آخر، cart.php را باز کرده و شروع به نوشتن کد زیر کنید:
<h1>View cart</h1> <a href="index.php?page=products">Go back to products page</a> <form method="post" action="index.php?page=cart"> <table> <tr> <th>Name</th> <th>Quantity</th> <th>Price</th> <th>Items Price</th> </tr> <?php $sql="SELECT * FROM products WHERE id_product IN ("; foreach($_SESSION['cart'] as $id => $value) { $sql.=$id.","; } $sql=substr($sql, 0, -1).") ORDER BY name ASC"; $query=mysql_query($sql); $totalprice=0; while($row=mysql_fetch_array($query)){ $subtotal=$_SESSION['cart'][$row['id_product']]['quantity']*$row['price']; $totalprice+=$subtotal; ?> <tr> <td><?php echo $row['name'] ?></td> <td><input type="text" name="quantity[<?php echo $row['id_product'] ?>]" size="5" value="<?php echo $_SESSION['cart'][$row['id_product']]['quantity'] ?>" /></td> <td><?php echo $row['price'] ?>$</td> <td><?php echo $_SESSION['cart'][$row['id_product']]['quantity']*$row['price'] ?>$</td> </tr> <?php } ?> <tr> <td colspan="4">Total Price: <?php echo $totalprice ?></td> </tr> </table> <br /> <button type="submit" name="submit">Update Cart</button> </form> <br /> <p>To remove an item, set it's quantity to 0. </p>
این کد شبیه به قسمت هایی از index.php و products.php است، بنابراین من قصد ندارم همه چیز را دوباره توضیح بدهم. باید توجه کنید که تعداد، به جای نمایش دادن در یک فرم، در یک جعبه ورودی نمایش داده شدهاند (پس ما میتوانیم تعداد را تغییر دهیم). همچنین جدول در تگ فرم قرار داده شده است. برای به دست آوردن مبلغ کل اقلام، تعداد کالای هر آیدی محصول (از سشن) را در قیمت آن ضرب کنید. این کار در هر حلقه انجام میشود.
توجه: ورودی یک آرایه است، کلید آیدی محصول است، و quantity مقدار تعداد است.
آخرین مرحله ای که باید انجام دهیم این است که فرم کار کند. بنابراین این کد را بالای صفحه cart.php اضافه کنید.
if(isset($_POST['submit'])){ foreach($_POST['quantity'] as $key => $val) { if($val==0) { unset($_SESSION['cart'][$key]); }else{ $_SESSION['cart'][$key]['quantity']=$val; } } }
- ابتدا بررسی میکنیم که فرم ارسال شده باشد. اگر ارسال شده بود و مقدار ورودی صفر بود، آن سشن را از بین میبریم.
- در عوض اگر مقدار ورودی هر عدد دیگری بود، تعداد را برابر با آن مقدار قرار میدهیم.
در زیر فایل cart.php کامل شده را می بینید.
<?php if(isset($_POST['submit'])){ foreach($_POST['quantity'] as $key => $val) { if($val==0) { unset($_SESSION['cart'][$key]); }else{ $_SESSION['cart'][$key]['quantity']=$val; } } } ?> <h1>View cart</h1> <a href="index.php?page=products">Go back to the products page.</a> <form method="post" action="index.php?page=cart"> <table> <tr> <th>Name</th> <th>Quantity</th> <th>Price</th> <th>Items Price</th> </tr> <?php $sql="SELECT * FROM products WHERE id_product IN ("; foreach($_SESSION['cart'] as $id => $value) { $sql.=$id.","; } $sql=substr($sql, 0, -1).") ORDER BY name ASC"; $query=mysql_query($sql); $totalprice=0; while($row=mysql_fetch_array($query)){ $subtotal=$_SESSION['cart'][$row['id_product']]['quantity']*$row['price']; $totalprice+=$subtotal; ?> <tr> <td><?php echo $row['name'] ?></td> <td><input type="text" name="quantity[<?php echo $row['id_product'] ?>]" size="5" value="<?php echo $_SESSION['cart'][$row['id_product']]['quantity'] ?>" /></td> <td><?php echo $row['price'] ?>$</td> <td><?php echo $_SESSION['cart'][$row['id_product']]['quantity']*$row['price'] ?>$</td> </tr> <?php } ?> <tr> <td colspan="4">Total Price: <?php echo $totalprice ?></td> </tr> </table> <br /> <button type="submit" name="submit">Update Cart</button> </form> <br /> <p>To remove an item set its quantity to 0. </p>
امیدوارم از این آموزش لذت برده باشید. اگر سوالی دارید می توانید در بخش نظرات مطرح کنید و یا اینکه برای یادگیری کامل و اصولی PHP و MySql از دوره های آموزش کدفرند استفاده کنید تا مفاهیم بالا برای شما کاملا قابل درک باشد.