Xây dựng Tính năng Giỏ hàng Với PHP và MySQL (2024)

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Trong video + bài hướng dẫn của tuần này, chúng tôi sẽ hướng dẫn bạn cách xây dựng giỏ hàng của riêng bạn bằng PHP và MySQL. Như bạn sẽ thấy, nó không quá khó như bạn nghĩ.

Video Xem trước

Xây dựng Tính năng Giỏ hàng Với PHP và MySQL (1)

Bước 1

Hãy bắt đầu bằng cách xem xét cấu trúc thư mục:

Xây dựng Tính năng Giỏ hàng Với PHP và MySQL (2)

Xây dựng Tính năng Giỏ hàng Với PHP và MySQL (3)

Cấu trúc

reset.css - bạn có thể lấy css reset từ liên kết này
style.css - tập tin css mà chúng ta sẽ sử dụng để định phong cách cho code HTML của chúng ta
connection.php - tập tin này sẽ tạo kết nối tới cơ sở dữ liệu của chúng ta
index.php - template cho giỏ hàng của chúng ta
cart.php - tập tin nơi chúng ta sẽ có thể thay đổi các sản phẩm của chúng ta từ giỏ hàng (thêm, xóa)
products.php - trang liệt kê các sản phẩm

Bước 2

Chúng ta sẽ bắt đầu bằng cách viết code html và sau đó định phong cách cho nó. Vì vậy, hãy mở index.php và sao chép/dán code dưới đây vào:

 <!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>

Như bạn thấy, trang của chúng ta có hai cột: cột main và cột sidebar. Hãy chuyển sang CSS. Mở tập tin style.css và nhập code dưới đây vào:

 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; }

Trang sản phẩm của chúng ta bây giờ sẽ trông giống như sau:

Xây dựng Tính năng Giỏ hàng Với PHP và MySQL (5)

Xây dựng Tính năng Giỏ hàng Với PHP và MySQL (6)

Video Hướng dẫn Đầy đủ

Xây dựng Tính năng Giỏ hàng Với PHP và MySQL (8)

Bước 3

Trước khi chúng ta chuyển sang phần PHP/MySQL, chúng ta cần phải tạo cơ sở dữ liệu. Do đó hãy mở phpMyadmin và làm theo các bước sau:

Vào tab Privileges, nhấp vào nút add new user, và sử dụng các thiết lập sau: Username: tutorial; Host: localhost; Password: supersecretpassword ;. Bây giờ đảm bảo rằng các quyền Global được thiết lập; Sau đó chuyển sang bước tiếp theo.
Tạo một cơ sở dữ liệu mới được gọi là tutorials.
Tạo một bảng mới gọi là products và thiết lập số lượng trường thành 4. Bây giờ điền vào các trường đó, vì vậy bạn có: id_integer - đảm bảo nó được thiết lập thành INT và đánh dấu nó như PRIMARY (đồng thời thiết lập nó thành auto_increment); name - chọn kiểu VARCHAR với chiều dài 100; description - VARCHAR với chiều dài 250; price - đảm bảo rằng nó được thiết lập thành DECIMAL(2,6)
Điền vào bảng dữ liệu của bạn bằng một số sản phẩm mẫu

Để tiết kiệm thời gian, tôi đã xuất các sản phẩm của tôi để bạn chỉ cần chạy truy vấn sau đây:

 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');

Xây dựng Tính năng Giỏ hàng Với PHP và MySQL (9)

Xây dựng Tính năng Giỏ hàng Với PHP và MySQL (10)

Xây dựng Tính năng Giỏ hàng Với PHP và MySQL (12)

Xây dựng Tính năng Giỏ hàng Với PHP và MySQL (13)

Xây dựng Tính năng Giỏ hàng Với PHP và MySQL (15)

Xây dựng Tính năng Giỏ hàng Với PHP và MySQL (16)

Bước 4

Trước khi chúng ta di chuyển đến phần trích xuất dữ liệu từ cơ sở dữ liệu, tôi sẽ tạo cho index.php của tôi một template cho danh sách sản phẩm và giỏ hàng. Do đó, hãy thêm code sau vào trên cùng của trang index.php của bạn:

 <?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() - nó sẽ được sử dụng sau này; nó sẽ cho phép chúng ta thật sự sử dụng các session (điều quan trọng là session_start được viết trước khi bất kỳ dữ liệu nào khác được gửi tới trình duyệt).
Trong dòng thứ hai, chúng ta include connection.php để xác lập kết nối với cơ sở dữ liệu (chúng ta sẽ giải quyết điều này trong giây lát nữa). Một điều nữa: sự khác biệt giữa include và require là nếu bạn sử dụng require và tập tin không được tìm thấy, việc thực thi script sẽ kết thúc. Nếu bạn sử dụng "include", script sẽ tiếp tục thực thi.
Thay vì sao chép toàn bộ code html (liên kết đến css, đến js) cho từng tập tin trong trang web của bạn, bạn có thể gom chúng thành một tập tin có liên quan. Vì vậy, trước tiên, tôi kiểm tra xem có một biến GET được gọi là "page set" hay không. Nếu không, tôi tạo một biến mới gọi là _pages. Nếu biến GET được gọi là pages đã được thiết lập trước, tôi muốn đảm bảo rằng tập tin mà tôi sẽ include là một trang hợp lệ.

Để thực hiện công việc này, chúng ta cần phải include tập tin; thêm dòng này vào index.php giữa div với id của "main":

 <?php require($_page.".php"); ?>

Đây là index.php hoàn chỉnh mà chúng ta có lúc này:

 <?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>

Xây dựng Tính năng Giỏ hàng Với PHP và MySQL (18)

Xây dựng Tính năng Giỏ hàng Với PHP và MySQL (19)

Hãy tạo kết nối đến MySQL. Mở connections.php và nhập vào như sau:

 <?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."); ?>

Bước 5

Bây giờ là lúc viết code cho trang sản phẩm. Vì vậy hãy mở nó và nhập vào như sau:

 <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>

Hãy quan sát trang:

Xây dựng Tính năng Giỏ hàng Với PHP và MySQL (21)

Xây dựng Tính năng Giỏ hàng Với PHP và MySQL (22)

Như bạn thấy, nó khá rối. Vì vậy, hãy định phong cách cho nó bằng cách thêm CSS này.

 a {color: #48577D; text-decoration: none;} a:hover {text-decoration: underline;} h1, h2 {margin-bottom: 15px} h1 {font-size: 18px;} h2 {font-size: 16px} #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; }

Được rồi: bây giờ hãy xem lại một lần nữa:

Xây dựng Tính năng Giỏ hàng Với PHP và MySQL (24)

Xây dựng Tính năng Giỏ hàng Với PHP và MySQL (25)

Có vẻ tốt hơn nhiều, bạn có nghĩ vậy không? Dưới đây bạn có code hoàn chỉnh cho style.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; }

Bước 6

Trước khi trích xuất sản phẩm từ cơ sở dữ liệu, chúng ta hãy xoá bỏ 2 table row cuối cùng ra khỏi table của chúng ta (chúng ta chỉ sử dụng nó để xem table của chúng ta sẽ trông như thế nào thôi). Xoá cái này:

 <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>

Tuyệt! Bây giờ ở nơi mà các table row được đặt, hãy nhập code PHP sau:

 <?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 } ?>

Như vậy, trước tiên chúng ta sử dụng SELECT để truy vấn sản phẩm, sau đó chúng ta lặp qua mỗi hàng từ cơ sở dữ liệu và xuất nó lên trang trong một table row.
Bạn có thể thấy rằng các liên kết đến cùng một trang (khi người dùng nhấp vào liên kết sản phẩm thì nó được thêm vào giỏ hàng/session). Chúng ta chỉ cần truyền vào một số biến phụ như id của sản phẩm.

Nếu bạn di chuyển chuột qua một trong các liên kết Add to cart, bạn có thể thấy, ở cuối trang, id của sản phẩm được truyền vào.

Xây dựng Tính năng Giỏ hàng Với PHP và MySQL (27)

Bước 7

Hãy làm cho liên kết đó hoạt động bằng cách thêm code sau đây vào trên cùng của trang:

 <?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!"; } } } ?>

Nếu biến GET được gọi là action đã được thiết lập và nó có giá trị ADD, thì chúng ta sẽ thực thi đoạn code.
Chúng ta đảm bảo rằng id được truyền qua biến GET là một số nguyên
Nếu id của sản phẩm nằm trong SESSION, chúng ta chỉ cần tăng số lượng của nó lên 1
Nếu id không có ở trong session, chúng ta cần phải chắc chắn rằng id truyền qua biến GET tồn tại trong cơ sở dữ liệu. Nếu có, chúng ta lấy giá bán và tạo ra session của nó. Nếu không, chúng ta sẽ thiết lập một biến được gọi là message sẽ chứa thông báo lỗi của chúng ta.

Hãy kiểm tra xem biến message đó được thiết lập hay chưa và xuất nó vào trang (nhập code này dưới tiêu đề trang H1):

 <?php if(isset($message)){ echo "<h2>$message</h2>"; } ?>

Ở đây bạn có thể thấy trang products.php hoàn chỉnh.

 <?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>

Đây là thông báo lỗi nếu id của sản phẩm không hợp lệ

Xây dựng Tính năng Giỏ hàng Với PHP và MySQL (28)

Xây dựng Tính năng Giỏ hàng Với PHP và MySQL (29)

Bước 8

Hãy quay trở lại index.php và xây dựng sidebar. Thêm code sau đây:

 <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>"; } ?>

Đầu tiên chúng ta kiểm tra session giỏ hàng đã được thiết lập hay chưa. Nếu không, chúng ta sẽ hiển thị thông báo, cảnh báo người dùng rằng giỏ hàng trống.
Tiếp theo chúng ta tạo một lệnh SELECT trong mysql, nhưng đồng thời chúng ta chỉ lựa chọn các sản phẩm tồn tại trong session. Để thực hiện việc này, chúng ta sử dụng hàm foreach. Do đó, chúng ta sẽ lặp qua session và thêm id sản phẩm vào SELECT. Tiếp theo, chúng ta sử dụng hàm substr để loại bỏ dấu phẩy cuối cùng khỏi SELECT.
Cuối cùng, chúng ta xuất dữ liệu lên trình duyệt.

Hãy xem những hình ảnh dưới đây:

Xây dựng Tính năng Giỏ hàng Với PHP và MySQL (31)

Xây dựng Tính năng Giỏ hàng Với PHP và MySQL (32)

Xây dựng Tính năng Giỏ hàng Với PHP và MySQL (34)

Xây dựng Tính năng Giỏ hàng Với PHP và MySQL (35)

Vì index.php là một template cho tất cả các tập tin, nên sidebar cũng sẽ hiển thị trong cart.php. Thật tuyệt vời phải không?!

Bước 9

Cuối cùng, mở cart.php và bắt đầu bằng cách nhập code sau:

 <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>

Code này tương tự như code từ index.php và products.php, vì vậy tôi sẽ không giải thích chúng nữa. Bạn nên chú ý rằng thay vì hiển thị số lượng trong một form, bây giờ nó được hiển thị trong một hộp input (để chúng ta có thể thay đổi số lượng). Ngoài ra cái table được bọc bằng thẻ form. Để có được tổng giá của các mặt hàng mà chúng ta nhân số lượng của id của sản phẩm cụ thể (từ session) với giá của nó. Việc này được hoàn thành trong mỗi vòng lặp.

Lưu ý: đầu vào là một mảng, key là id của sản phẩm, và quantity là giá trị của số lượng.

Xây dựng Tính năng Giỏ hàng Với PHP và MySQL (37)

Xây dựng Tính năng Giỏ hàng Với PHP và MySQL (38)

Bước 10

Bước cuối cùng mà chúng ta cần làm là làm cho form hoạt động. Vì vậy, hãy thêm code này vào bên trên của trang 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; } } }

Trước tiên, chúng ta kiểm tra xem form đã được submit hay chưa. Nếu nó đã được submit và giá trị của input là 0, chúng ta sẽ unset session đó.
Nếu giá trị là bất kỳ giá trị nào khác, thì chúng ta sẽ thiết lạp quantity thànhgiá trị đó.

Đây là tập tin cart.php hoàn chỉnh

 <?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>

Xây dựng Tính năng Giỏ hàng Với PHP và MySQL (40)

Xây dựng Tính năng Giỏ hàng Với PHP và MySQL (41)

Tôi hy vọng bạn thích hướng dẫn này. Nếu bạn có bất kỳ câu hỏi nào, hãy xem hướng dẫn sâu hơn bằng video!