Bài viết này sẽ hướng dẫn bạn sử dụng Cookies để tạo các trang liên quan đến bán hàng hoặc có thể áp dụng để làm những công việc tương tự như mượn sách, … product.php, cart.php, remove_product.php, checkout.php, process_order.php,…
Các trang trong danh sách trên có một số mục đích cụ thể:
- product.php: Trang này thường hiển thị danh sách các sản phẩm có sẵn để mua. Đây có thể là trang chính của cửa hàng trực tuyến, nơi người dùng có thể xem thông tin về sản phẩm, bao gồm hình ảnh, mô tả và giá cả, và thêm chúng vào giỏ hàng.
- cart.php: Trang giỏ hàng hiển thị các sản phẩm mà người dùng đã thêm vào giỏ hàng của họ. Thông thường, nó sẽ hiển thị thông tin chi tiết về từng sản phẩm, bao gồm cả số lượng và giá cả. Người dùng thường có thể thay đổi số lượng hoặc loại bỏ sản phẩm khỏi giỏ hàng từ trang này.
- add_to_cart.php: Trang này thực hiện chức năng thêm sản phẩm vào giỏ hàng. Khi người dùng nhấn nút “Thêm vào giỏ hàng” trên trang sản phẩm, yêu cầu sẽ được gửi đến trang này để thêm sản phẩm vào giỏ hàng.
- remove_product.php: Trang này xử lý yêu cầu của người dùng để loại bỏ một sản phẩm khỏi giỏ hàng. Thông thường, khi người dùng nhấp vào một nút “Xóa” trên trang giỏ hàng, một yêu cầu sẽ được gửi đến trang này để xử lý và cập nhật lại giỏ hàng.
- checkout.php: Trang thanh toán là nơi người dùng cung cấp thông tin thanh toán và gửi đơn hàng. Thông thường, trang này sẽ yêu cầu người dùng nhập thông tin cá nhân như địa chỉ giao hàng và phương thức thanh toán.
- process_order.php: Trang này xử lý đơn hàng sau khi người dùng đã nhấn nút “Hoàn tất đơn hàng” trên trang thanh toán. Nó có thể bao gồm việc xác nhận đơn hàng, gửi email xác nhận cho người dùng, cập nhật cơ sở dữ liệu về đơn hàng và xóa các mục trong giỏ hàng sau khi đơn hàng đã được xử lý thành công.
Tạo trang sản phẩm products.php như sau:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Danh sách sản phẩm</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Danh sách sản phẩm</h1> <a href="./cart.php">Xem giỏ hàng</a>
<?php
// Danh sách sản phẩm
$products = array(
array(
'id' => 'product1',
'name' => 'Sản phẩm 1',
'price' => 100000,
'image' => 'product1.jpg'
),
array(
'id' => 'product2',
'name' => 'Sản phẩm 2',
'price' => 150000,
'image' => 'product2.jpg'
),
array(
'id' => 'product3',
'name' => 'Sản phẩm 3',
'price' => 200000,
'image' => 'product3.jpg'
)
);
// Hiển thị danh sách sản phẩm
foreach($products as $product) {
echo "<div class='product'>";
echo "<img src='" . $product['image'] . "' alt='" . $product['name'] . "' width='100'>";
echo "<div class='product-info'>";
echo "<h2>" . $product['name'] . "</h2>";
echo "<p>Giá: " . number_format($product['price']) . " VND</p>";
echo "<a href='add_to_cart.php?product=" . $product['id'] . "' class='btn'>Thêm vào giỏ hàng</a>";
echo "</div>";
echo "</div>";
}
?>
</div>
</body>
</html>
Dựa vào code này, bạn có thể áp dụng để lấy dữ liệu từ Database của mình để hiển thị ra trang sản phẩm.
Hình ảnh sau khi tạo xong trang sản phẩm có thể như sau:
Tạo trang giỏ hàng cart.php như sau:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Giỏ hàng</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Giỏ hàng</h1>
<table>
<tr>
<th>Sản phẩm</th>
<th>Số lượng</th>
<th>Thao tác</th>
</tr>
<?php
// Kiểm tra xem cookie giỏ hàng đã tồn tại chưa
if(isset($_COOKIE['cart'])) {
// Lấy thông tin giỏ hàng từ cookie và chuyển về mảng
$cart = json_decode($_COOKIE['cart'], true);
// Hiển thị sản phẩm trong giỏ hàng
foreach($cart as $productId => $quantity) {
echo "<tr>";
echo "<td>Sản phẩm $productId</td>";
echo "<td>$quantity</td>";
echo "<td><a href='remove_product.php?product=$productId' class='btn'>Xóa</a></td>";
echo "</tr>";
}
} else {
echo "<tr><td colspan='3'>Giỏ hàng trống</td></tr>";
}
?>
</table>
<br>
<a href="checkout.php" class="btn">Thanh toán</a>
</div>
</body>
</html>
Hình ảnh sau khi tạo xong trang giỏ hàng có thể như sau:
Tạo trang thêm sản phẩm vào giỏ hàng add_to_cart.php như sau:
<?php
// Kiểm tra xem sản phẩm được chọn đã tồn tại không
if(isset($_GET['product'])) {
$productId = $_GET['product'];
// Kiểm tra xem cookie giỏ hàng đã tồn tại chưa
if(isset($_COOKIE['cart'])) {
// Lấy thông tin giỏ hàng từ cookie và chuyển về mảng
$cart = json_decode($_COOKIE['cart'], true);
} else {
// Nếu cookie giỏ hàng chưa tồn tại, tạo một mảng rỗng
$cart = array();
}
// Kiểm tra xem sản phẩm đã tồn tại trong giỏ hàng chưa
if(array_key_exists($productId, $cart)) {
// Nếu sản phẩm đã tồn tại, tăng số lượng lên 1
$cart[$productId]++;
} else {
// Nếu sản phẩm chưa tồn tại, thêm mới vào giỏ hàng với số lượng là 1
$cart[$productId] = 1;
}
// Lưu thông tin giỏ hàng vào cookie
setcookie('cart', json_encode($cart), time() + (86400 * 30), '/');
// Chuyển hướng người dùng trở lại trang sản phẩm sau khi thêm vào giỏ hàng
header('Location: products.php');
exit;
} else {
// Nếu không có sản phẩm được chọn, chuyển hướng người dùng trở lại trang sản phẩm
header('Location: products.php');
exit;
}
?>
Tạo trang để gỡ bỏ sản phẩm ra khỏi giỏ hàng remove_product.php như sau:
<?php
// Kiểm tra xem sản phẩm được chọn để xóa đã tồn tại không
if(isset($_GET['product'])) {
$productId = $_GET['product'];
// Kiểm tra xem cookie giỏ hàng đã tồn tại chưa
if(isset($_COOKIE['cart'])) {
// Lấy thông tin giỏ hàng từ cookie và chuyển về mảng
$cart = json_decode($_COOKIE['cart'], true);
// Kiểm tra xem sản phẩm tồn tại trong giỏ hàng không
if(array_key_exists($productId, $cart)) {
// Nếu sản phẩm tồn tại, xóa khỏi giỏ hàng
unset($cart[$productId]);
// Lưu thông tin giỏ hàng mới vào cookie
setcookie('cart', json_encode($cart), time() + (86400 * 30), '/');
// Chuyển hướng người dùng trở lại trang giỏ hàng
header('Location: cart.php');
exit;
}
}
}
// Nếu không có sản phẩm được chọn hoặc sản phẩm không tồn tại trong giỏ hàng, chuyển hướng người dùng trở lại trang giỏ hàng
header('Location: cart.php');
exit;
?>
Tạo trang tổng hợp sản phẩm đã chọn và điền thông tin checkout.php như sau:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="check.css">
<title>Thanh toán</title>
</head>
<body>
<div class="container">
<h1>Thanh toán</h1>
<table>
<tr>
<th>Sản phẩm</th>
<th>Số lượng</th>
</tr>
<?php
// Kiểm tra xem cookie giỏ hàng đã tồn tại chưa
if(isset($_COOKIE['cart'])) {
// Lấy thông tin giỏ hàng từ cookie và chuyển về mảng
$cart = json_decode($_COOKIE['cart'], true);
// Hiển thị sản phẩm trong giỏ hàng
foreach($cart as $productId => $quantity) {
echo "<tr>";
echo "<td>Sản phẩm $productId</td>";
echo "<td>$quantity</td>";
echo "</tr>";
}
} else {
echo "<tr><td colspan='2'>Giỏ hàng trống</td></tr>";
}
?>
</table>
<br>
<form action="process_order.php" method="post">
<label for="payment_method">Chọn phương thức thanh toán:</label>
<select name="payment_method" id="payment_method">
<option value="cash">Thanh toán khi nhận hàng</option>
<option value="credit_card">Thanh toán bằng thẻ tín dụng</option>
<option value="paypal">Thanh toán qua PayPal</option>
</select>
<br><br>
<!-- Thêm các ô điền -->
<label for="full_name">Họ và tên:</label>
<input type="text" id="full_name" name="full_name">
<br><br>
<label for="phone_number">Số điện thoại:</label>
<input type="text" id="phone_number" name="phone_number">
<br><br>
<label for="address">Địa chỉ:</label>
<textarea id="address" name="address"></textarea>
<br><br>
<input type="submit" value="Hoàn tất đơn hàng" class="btn">
</form>
</div>
</body>
</html>
Dựa vào code này, bạn có thể tùy chỉnh những dữ liệu muốn khách hàng cung cấp để hỗ trợ tốt nhất cho bạn và khách hàng
Hình ảnh sau khi tạo xong trang thông tin này có thể như sau:
Tạo trang xử lý thông tin sau khi khách hàng chọn và cung cấp thông tin process_order.php như sau:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="process.css">
<title>Xử lý đơn hàng</title>
</head>
<body>
<?php
// Kiểm tra xem cookie giỏ hàng đã tồn tại chưa
if(isset($_COOKIE['cart'])) {
// Lấy thông tin giỏ hàng từ cookie và chuyển về mảng
$cart = json_decode($_COOKIE['cart'], true);
// Kiểm tra xem giỏ hàng có sản phẩm không
if(!empty($cart)) {
// Xử lý thanh toán
$totalPrice = calculateTotalPrice($cart);
// Gửi xác nhận đơn hàng
sendConfirmation($cart, $totalPrice);
// Xóa cookie giỏ hàng sau khi thanh toán thành công
setcookie('cart', '', time() - 3600, '/');
// Hiển thị thông báo đơn hàng đã được xử lý thành công
echo "<div class='container'>";
echo "<h1>Đơn hàng của bạn đã được xử lý thành công!</h1>";
echo "<p>Tổng số tiền: " . number_format($totalPrice) . " VND</p>";
echo "</div>";
} else {
echo "<div class='container'>";
echo "<h1>Giỏ hàng của bạn trống!</h1>";
echo "</div>";
}
} else {
echo "<div class='container'>";
echo "<h1>Không tìm thấy thông tin giỏ hàng!</h1>";
echo "</div>";
}
// Hàm tính tổng số tiền của đơn hàng
function calculateTotalPrice($cart) {
$totalPrice = 0;
// Danh sách giá của các sản phẩm
$productPrices = array(
'product1' => 100000,
'product2' => 150000,
'product3' => 200000
);
// Tính tổng số tiền dựa trên giá của sản phẩm và số lượng
foreach($cart as $productId => $quantity) {
if(array_key_exists($productId, $productPrices)) {
$totalPrice += $productPrices[$productId] * $quantity;
}
}
return $totalPrice;
}
// Hàm gửi xác nhận đơn hàng
function sendConfirmation($cart, $totalPrice) {
// Code để gửi email xác nhận đơn hàng nếu có
// Trong ví dụ này, chúng ta chỉ in ra thông tin đơn hàng
echo "<div class='container'>";
echo "<h2>Thông tin xác nhận đơn hàng:</h2>";
echo "<ul>";
foreach($cart as $productId => $quantity) {
echo "<li>Sản phẩm $productId: $quantity</li>";
}
echo "</ul>";
echo "<p>Tổng số tiền: " . number_format($totalPrice) . " VND</p>";
// Thêm thông tin mới vào đây
if(isset($_POST['full_name']) && isset($_POST['phone_number']) && isset($_POST['address'])) {
$full_name = $_POST['full_name'];
$phone_number = $_POST['phone_number'];
$address = $_POST['address'];
echo "<p>Họ và tên: $full_name</p>";
echo "<p>Số điện thoại: $phone_number</p>";
echo "<p>Địa chỉ: $address</p>";
}
echo "</div>";
}
?>
</body>
</html>Dựa vào code này, bạn có thể tùy chỉnh thông tin muốn hiển thị ra cho khách hàng hoặc gửi thông tin cho khách hàng.
Hình ảnh thông báo này có thể như sau:
Style css của các trang này như sau:
/* Nội dung của file style.css */
body {font-family: Arial, sans-serif;}
.container {max-width: 800px;margin: 0 auto;padding: 20px;}
h1 {text-align: center;}
.product {border: 1px solid #ddd;padding: 10px;margin-bottom: 20px;overflow: auto;}
.product img {float: left;margin-right: 20px;}
.product-info {float: left;width: calc(100% - 100px);}
.product-info h2 {margin-top: 0;}
.product-info p {margin-bottom: 10px;}
.btn {background-color: #4CAF50;color: white;padding: 10px 20px;
text-align: center;text-decoration: none;display: inline-block;border-radius: 4px;}
.btn:hover {background-color: #45a049;}
table {width: 100%;border-collapse: collapse;}
th, td {border: 1px solid #ddd;padding: 8px;text-align: left;}
th {background-color: #f2f2f2;}
/* Nội dung của file check.css */
label {display: block;margin-bottom: 5px;}
input[type="text"],textarea {width: 100%;padding: 8px;margin-bottom: 10px;
border: 1px solid #ccc;border-radius: 4px;box-sizing: border-box;}
select {width: 100%;padding: 8px;margin-bottom: 10px;
border: 1px solid #ccc;border-radius: 4px;box-sizing: border-box;}
input[type="submit"] {background-color: #4CAF50;color: white;padding: 12px 20px;
border: none;border-radius: 4px;cursor: pointer;float: right;}
input[type="submit"]:hover {background-color: #45a049;}
.btn {background-color: #4CAF50;color: white;padding: 12px 20px;
border: none;border-radius: 4px;cursor: pointer;}
.btn:hover {background-color: #45a049;}
/* Nội dung của file process.css */
.container {width: 50%;margin: 20px auto;padding: 20px;
background-color: #f9f9f9;border-radius: 5px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}
.container h1 {font-size: 24px;color: #333;}
.container p {font-size: 16px;color: #666;}
.container ul {list-style-type: none;padding: 0;}
.container ul li {font-size: 16px;color: #666;margin-bottom: 5px;}
.container ul li:last-child {margin-bottom: 0;}Nhận định về sử dụng Cookies trong việc tạo trang bán hàng
Sử dụng cookies trong việc tạo trang bán hàng có thể mang lại một số lợi ích quan trọng:
- Lưu trữ thông tin giỏ hàng: Cookies có thể được sử dụng để lưu trữ thông tin về sản phẩm mà người dùng đã thêm vào giỏ hàng của họ. Điều này giúp người dùng có thể duyệt các trang khác nhau trên trang web mà không bị mất giỏ hàng của họ.
- Tiện lợi cho người dùng: Bằng cách lưu trữ thông tin giỏ hàng trong cookies, người dùng có thể dễ dàng quay lại trang web và tiếp tục mua sắm mà không cần phải thêm lại các mục vào giỏ hàng từ đầu.
- Tùy chỉnh trải nghiệm người dùng: Cookies có thể được sử dụng để lưu trữ các cài đặt cá nhân của người dùng, như ngôn ngữ ưa thích, địa chỉ giao hàng, hoặc phương thức thanh toán được ưa chuộng. Điều này giúp cá nhân hóa trải nghiệm mua sắm cho mỗi người dùng.
Tuy nhiên, cũng cần lưu ý một số điểm cần cân nhắc:
- Bảo mật: Thông tin được lưu trữ trong cookies có thể bị tiết lộ nếu không được mã hóa hoặc bảo vệ đúng cách. Do đó, cần áp dụng các biện pháp bảo mật để đảm bảo an toàn cho dữ liệu người dùng.
- Quyền riêng tư: Việc sử dụng cookies có thể liên quan đến vấn đề quyền riêng tư của người dùng. Cần cung cấp thông tin rõ ràng và cơ hội cho người dùng từ chối việc sử dụng cookies nếu họ muốn.
- Hiệu suất: Sử dụng cookies quá nhiều có thể ảnh hưởng đến hiệu suất của trang web, đặc biệt là khi có quá nhiều dữ liệu được lưu trữ trong cookies và truyền qua lại giữa máy chủ và trình duyệt.
Tóm lại, việc sử dụng cookies trong việc tạo trang bán hàng có thể mang lại nhiều lợi ích, nhưng cần được thực hiện một cách cẩn thận và có chiến lược để đảm bảo bảo mật và tôn trọng quyền riêng tư của người dùng.