Tạo ứng dụng giỏ hàng hay Shopping Cart luôn luôn là một phần quan trọng nhất đối với người làm web. Với sự phát triển như vũ bão của thương mại điện tử, thì ngày càng có nhiều website bán hàng với đủ thể loại xuất hiện. Thực tế thì khi xây dựng một website bán hàng, các bạn không cần phải tự lập trình gì nhiều, vì có rất nhiều mã nguồn mở hỗ trợ việc xây dựng một cửa hàng online như Magento, CS Cart, Presstashop….. Nhưng làm gì thì làm, nếu các bạn có thể tự xây dựng cho mình một giỏ hàng riêng, thì vừa có thể nâng cao khả năng lập trình, vừa có thể hiểu rõ hơn về cơ chế mà một website bán hàng cần có.
Hôm nay, trong bài viết này, mình sẽ cùng các bạn từng bước tạo một giỏ hàng đơn giản bằng PHP. Và qua bài viết này, các bạn có thể tự phát triển nâng cao hơn để có một giỏ hàng như ý cho chính website của mình.
Đầu tiên, các bạn cần tạo 4 file sau đây cho giỏ hàng (shopping cart) của mình :
1. Config.php (kết nối cơ sở dữ liệu)
2. Index.php (trang hiển thị danh sách sản phẩm từ database)
3. Cart_update.php (cập nhật giỏ hàng)
4. View_cart.php (xem tổng quan giỏ hàng trước khi thanh toán)
Okie, thế là xong, và bây giờ chúng ta sẽ tiến hành từng bước.
Bước 1 : Tạo cơ sở dữ liệu
Trước hết, chúng ta cần có một dữ liệu lưu thông tin sản phẩm như tên sản phẩm, hình ảnh sản phẩm đó… như đoạn sql sau :
CREATE TABLE IF NOT EXISTS `products` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`product_code` varchar(60) NOT NULL,
`product_name` varchar(60) NOT NULL,
`product_desc` tinytext NOT NULL,
`product_img_name` varchar(60) NOT NULL,
`price` decimal(10,2) NOT NULL,
PRIMARY KEY (`id`),
UNIQUE KEY `product_code` (`product_code`)
) AUTO_INCREMENT=1 ;
Nếu các bạn không biết dùng câu lệnh sql để tạo, thì có thể vào PhpMyAdmin để tạo theo cấu trúc sql bên trên. Khi tạo bảng (table) xong, các bạn có thể chèn thêm danh sách các sản phẩm vào table như hình minh họa sau :
Bước 2 : kết nối cơ sở dữ liệu
Một khi chúng ta đã có dữ liệu lưu trữ thông tin sản phẩm, chúng ta sẽ tiến hành kết nối với dữ liệu để hiện thị sản phẩm ra màn hình. Các bạn mở file config.php ra và copy đoạn code sau vào bên trong nó :
<?php
$currency = '$'; // đơn vị tiền tệ
$db_username = 'root'; // user name
$db_password = '';// password
$db_name = 'demo'; // tên cơ sở dữ liệu
$db_host = 'localhost';
$mysqli = new mysqli($db_host, $db_username, $db_password,$db_name);
?>
Các bạn nhớ thay đổi giá trị theo các ghi chú mà mình ghi bên cạnh nhé.
Bước 3 : Hiển thị thông tin sản phẩm và giỏ hàng
Bây giờ là lúc mà chúng ta sẽ hiển thị danh sách các sản phẩm cần bán,. Vì chúng ta sẽ sử dụng session để lưu tạm thông tin giỏ hàng, nên việc đầu tiên cần làm là chúng ta phải kích hoạt session . Mở file index.php ra và copy đoạn code sau dán vào nó :
<?php
session_start();
include_once("config.php");
?>
Trang index.php này sẽ hiển thị 2 nội dung, nội dung thứ 1 sẽ liệt kê các sản phẩm (nằm ở giữa) và nội dung thứ 2 hiển thị giỏ hảng (nằm bên phải kế bên).
Liệt kê sản phẩm
Các bạn copy đoạn code sau và dán nó vào tiếp trong file index.php để hiển thị các sản phầm từ database :
<div class="products">
<?php
//current URL of the Page. cart_update.php redirects back to this URL
$current_url = base64_encode("http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']);
$results = $mysqli->query("SELECT * FROM products ORDER BY id ASC");
if ($results) {
//output results from database
while($obj = $results->fetch_object())
{
echo '<div class="product">';
echo '<form method="post" action="cart_update.php">';
echo '<div class="product-thumb"><img src="images/'.$obj->product_img_name.'"></div>';
echo '<div class="product-content"><h3>'.$obj->product_name.'</h3>';
echo '<div class="product-desc">'.$obj->product_desc.'</div>';
echo '<div class="product-info">Price '.$currency.$obj->price.' <button class="add_to_cart">Add To Cart</button></div>';
echo '</div>';
echo '<input type="hidden" name="product_code" value="'.$obj->product_code.'" />';
echo '<input type="hidden" name="type" value="add" />';
echo '<input type="hidden" name="return_url" value="'.$current_url.'" />';
echo '</form>';
echo '</div>';
}
}
?>
</div>
Thông tin giỏ hàng :
Sau đó copy đoạn code sau và dán tiếp vào file index.php để hiển thị giỏ hàng :
<div class="shopping-cart">
<h2>Your Shopping Cart</h2>
<?php
if(isset($_SESSION["products"]))
{
$total = 0;
echo '<ol>';
foreach ($_SESSION["products"] as $cart_itm)
{
echo '<li class="cart-itm">';
echo '<span class="remove-itm"><a href="cart_update.php?removep='.$cart_itm["code"].'&return_url='.$current_url.'">×</a></span>';
echo '<h3>'.$cart_itm["name"].'</h3>';
echo '<div class="p-code">P code : '.$cart_itm["code"].'</div>';
echo '<div class="p-qty">Qty : '.$cart_itm["qty"].'</div>';
echo '<div class="p-price">Price :'.$currency.$cart_itm["price"].'</div>';
echo '</li>';
$subtotal = ($cart_itm["price"]*$cart_itm["qty"]);
$total = ($total + $subtotal);
}
echo '</ol>';
echo '<span class="check-out-txt"><strong>Total : '.$currency.$total.'</strong> <a href="view_cart.php">Check-out!</a></span>';
echo '<span class="empty-cart"><a href="cart_update.php?emptycart=1&return_url='.$current_url.'">Empty Cart</a></span>';
}else{
echo 'Your Cart is empty';
}
?>
</div>
Bước 4 : Cập nhật giỏ hàng
Giỏ hàng sẽ có chức năng là thêm và xóa sản phẩm khi đưa vào giỏ. Khi các bạn click vào nút “Add to Cart“, form sẽ gửi một giá trị hidden là mã sản phẩm (product code) với số lượng (quantity) đến file Cart_update.php thông qua phương thức POST. Chúng ta sẽ sử dụng những thông tin được gửi đến này để lấy thông tin sản phẩm từ database. Các bạn copy đoạn code bên dưới và dán vào file Cart_update.php. Mỗi một câu lệnh có để ghi chú, các bạn có thể xem những dòng ghi chú này để hiểu rõ code hơn.
<?php
session_start(); //start session
include_once("config.php"); //include config file
//empty cart by distroying current session
if(isset($_GET["emptycart"]) && $_GET["emptycart"]==1)
{
$return_url = base64_decode($_GET["return_url"]); //return url
session_destroy();
header('Location:'.$return_url);
}
//add item in shopping cart
if(isset($_POST["type"]) && $_POST["type"]=='add')
{
$product_code = filter_var($_POST["product_code"], FILTER_SANITIZE_STRING); //product code
$product_qty = filter_var($_POST["product_qty"], FILTER_SANITIZE_NUMBER_INT); //product code
$return_url = base64_decode($_POST["return_url"]); //return url
//limit quantity for single product
if($product_qty > 10){
die('<div align="center">This demo does not allowed more than 10 quantity!<br /><a href="http://sanwebe.com/assets/paypal-shopping-cart-integration/">Back To Products</a>.</div>');
}
//MySqli query - get details of item from db using product code
$results = $mysqli->query("SELECT product_name,price FROM products WHERE product_code='$product_code' LIMIT 1");
$obj = $results->fetch_object();
if ($results) { //we have the product info
//prepare array for the session variable
$new_product = array(array('name'=>$obj->product_name, 'code'=>$product_code, 'qty'=>$product_qty, 'price'=>$obj->price));
if(isset($_SESSION["products"])) //if we have the session
{
$found = false; //set found item to false
foreach ($_SESSION["products"] as $cart_itm) //loop through session array
{
if($cart_itm["code"] == $product_code){ //the item exist in array
$product[] = array('name'=>$cart_itm["name"], 'code'=>$cart_itm["code"], 'qty'=>$product_qty, 'price'=>$cart_itm["price"]);
$found = true;
}else{
//item doesn't exist in the list, just retrive old info and prepare array for session var
$product[] = array('name'=>$cart_itm["name"], 'code'=>$cart_itm["code"], 'qty'=>$cart_itm["qty"], 'price'=>$cart_itm["price"]);
}
}
if($found == false) //we didn't find item in array
{
//add new user item in array
$_SESSION["products"] = array_merge($product, $new_product);
}else{
//found user item in array list, and increased the quantity
$_SESSION["products"] = $product;
}
}else{
//create a new session var if does not exist
$_SESSION["products"] = $new_product;
}
}
//redirect back to original page
header('Location:'.$return_url);
}
//remove item from shopping cart
if(isset($_GET["removep"]) && isset($_GET["return_url"]) && isset($_SESSION["products"]))
{
$product_code = $_GET["removep"]; //get the product code to remove
$return_url = base64_decode($_GET["return_url"]); //get return url
foreach ($_SESSION["products"] as $cart_itm) //loop through session array var
{
if($cart_itm["code"]!=$product_code){ //item does,t exist in the list
$product[] = array('name'=>$cart_itm["name"], 'code'=>$cart_itm["code"], 'qty'=>$cart_itm["qty"], 'price'=>$cart_itm["price"]);
}
//create a new product list for cart
$_SESSION["products"] = $product;
}
//redirect back to original page
header('Location:'.$return_url);
}
Bước 5 : Xem tổng quan giỏ hàng
Bây giờ chúng ta sẽ liệt kê tất cả các sản phẩm có trong giỏ hàng, với số lượng, giá tiền, và tổng tiền sẽ phải thanh toán trước khi tiến hành ” đặt mua “. Nếu các bạn muốn nâng cao, ở phần này các bạn có thể chèn thêm tiền thuế, phí giao hàng… Các bạn copy đoạn code sau vào fileView_cart.php.
<?php
session_start();
include_once("config.php");
if(isset($_SESSION["products"]))
{
$total = 0;
echo '<form method="post" action="PAYMENT-GATEWAY">';
echo '<ul>';
$cart_items = 0;
foreach ($_SESSION["products"] as $cart_itm)
{
$product_code = $cart_itm["code"];
$results = $mysqli->query("SELECT product_name,product_desc, price FROM products WHERE product_code='$product_code' LIMIT 1");
$obj = $results->fetch_object();
echo '<li class="cart-itm">';
echo '<span class="remove-itm"><a href="cart_update.php?removep='.$cart_itm["code"].'&return_url='.$current_url.'">×</a></span>';
echo '<div class="p-price">'.$currency.$obj->price.'</div>';
echo '<div class="product-info">';
echo '<h3>'.$obj->product_name.' (Code :'.$product_code.')</h3> ';
echo '<div class="p-qty">Qty : '.$cart_itm["qty"].'</div>';
echo '<div>'.$obj->product_desc.'</div>';
echo '</div>';
echo '</li>';
$subtotal = ($cart_itm["price"]*$cart_itm["qty"]);
$total = ($total + $subtotal);
echo '<input type="hidden" name="item_name['.$cart_items.']" value="'.$obj->product_name.'" />';
echo '<input type="hidden" name="item_code['.$cart_items.']" value="'.$product_code.'" />';
echo '<input type="hidden" name="item_desc['.$cart_items.']" value="'.$obj->product_desc.'" />';
echo '<input type="hidden" name="item_qty['.$cart_items.']" value="'.$cart_itm["qty"].'" />';
$cart_items ++;
}
echo '</ul>';
echo '<span class="check-out-txt">';
echo '<strong>Total : '.$currency.$total.'</strong> ';
echo '</span>';
echo '</form>';
}else{
echo 'Your Cart is empty';
}
?>
Thế là xong rồi đó các bạn, để có một giỏ hàng đúng nghĩa thì còn có rất nhiều vấn đề và chi tiết cần thêm vào, tuy nhiên , các bạn cần nắm vững những bước căn bản như trong bài học này rồi sau đó mới có thể nâng cao lên theo ý mình muốn.