search

Làm cách nào để thêm số lượng sản phẩm trong php?

Ngày đăng: 28/11/2022
Trả lời: 0
Lượt xem: 40

Trong hướng dẫn này, chúng ta sẽ tạo một hệ thống giỏ hàng với PHP và MySQL. Hệ thống giỏ hàng sẽ cho phép khách truy cập trang web của chúng tôi duyệt tìm sản phẩm, thêm sản phẩm vào giỏ hàng và đặt hàng

Show

Chúng tôi sẽ sử dụng giao diện PDO để truy cập cơ sở dữ liệu MySQL của chúng tôi bằng PHP vì nó sẽ giúp chúng tôi tương tác với cơ sở dữ liệu và thao tác với các bảng dễ dàng hơn nhiều

Hệ thống giỏ hàng chúng tôi sẽ tạo sẽ chứa 4 sản phẩm. Những sản phẩm này về cơ bản chỉ là tiện ích/phụ kiện mà chúng tôi sẽ sử dụng làm ví dụ cho hướng dẫn này. Bạn có thể thêm các sản phẩm của riêng mình sau trong phần hướng dẫn

Gói Nâng cao bao gồm các tính năng bổ sung và liên kết tải xuống mã nguồn

nội dung

  1. Bắt đầu
    1. trình diễn
    2. Yêu cầu
    3. Bạn sẽ học được gì trong Hướng dẫn này
    4. Cấu trúc & Thiết lập Tệp
  2. Tạo cơ sở dữ liệu và thiết lập bảng
  3. Thiết kế hệ thống giỏ hàng bằng CSS
  4. Tạo tệp chức năng
  5. Tạo tệp chỉ mục
    1. Kết nối với cơ sở dữ liệu MySQL
    2. Định tuyến cơ bản
  6. Tạo Trang chủ
    1. Nhận 4 sản phẩm từ cơ sở dữ liệu
    2. Tạo mẫu Trang chủ
  7. Tạo trang sản phẩm
    1. Nhận sản phẩm từ cơ sở dữ liệu với phân trang
    2. Lấy tổng số sản phẩm
    3. Tạo mẫu sản phẩm
  8. Tạo trang sản phẩm
    1. Nhận sản phẩm từ cơ sở dữ liệu với yêu cầu GET
    2. Tạo mẫu sản phẩm
  9. Tạo trang giỏ hàng
    1. Thêm sản phẩm vào giỏ hàng
    2. Xóa sản phẩm khỏi giỏ hàng
    3. Cập nhật số lượng sản phẩm
    4. Xử lý đơn đặt hàng
    5. Nhận sản phẩm trong giỏ hàng và chọn từ cơ sở dữ liệu
    6. Tạo mẫu giỏ hàng
  10. Tạo trang đặt hàng
    1. Tạo mẫu đặt hàng

1. Bắt đầu

Có một vài bước chúng ta cần thực hiện trước khi tạo hệ thống giỏ hàng của mình. Chúng tôi cần thiết lập môi trường máy chủ web của mình (nếu bạn chưa có) và đảm bảo rằng chúng tôi đã bật các tiện ích mở rộng cần thiết

1. 1. trình diễn

Dưới đây bạn sẽ tìm thấy các liên kết đến các bản trình diễn giỏ hàng. Bản demo hướng dẫn là những gì chúng ta sẽ tạo. Advanced demo là gói bạn có thể mua ở cuối bài. Điều này bao gồm nhiều tính năng hơn và liên kết tải xuống mã nguồn

  • bản demo hướng dẫn
  • Bản trình diễn nâng cao

1. 2. Yêu cầu

  • Nếu bạn chưa thiết lập máy chủ web cục bộ, bạn nên tải xuống và cài đặt XAMPP
  • Đảm bảo tiện ích mở rộng PDO được bật (tiện ích mở rộng này phải được bao gồm và bật theo mặc định)

1. 3. Bạn sẽ học được gì trong Hướng dẫn này

  • Thiết kế mẫu — Thiết kế trang chủ, trang sản phẩm, trang sản phẩm, trang giỏ hàng và trang đặt hàng bằng HTML5 và CSS3, đồng thời tìm hiểu cách triển khai hệ thống tạo khuôn mẫu PHP bằng HTML
  • Yêu cầu GET và POST — Tạo biểu mẫu HTML và xử lý yêu cầu dữ liệu bằng PHP
  • Các truy vấn SQL đã chuẩn bị — Cách chuẩn bị các truy vấn SQL để ngăn chặn SQL injection
  • Xác thực cơ bản — Xác thực dữ liệu biểu mẫu được gửi đến máy chủ
  • Quản lý phiên — Khởi tạo phiên và lưu trữ các sản phẩm trong giỏ hàng

1. 4. Cấu trúc & Thiết lập Tệp

Bây giờ chúng tôi có thể khởi động máy chủ web của mình và tạo các tệp và thư mục mà chúng tôi sẽ sử dụng cho hệ thống giỏ hàng của mình

  • Mở Bảng điều khiển XAMPP
  • Bên cạnh mô-đun Apache, nhấp vào Bắt đầu
  • Bên cạnh mô-đun MySQL, nhấp vào Bắt đầu
  • Điều hướng đến thư mục cài đặt XAMPPs (C. \xampp)
  • Mở thư mục htdocs
  • Tạo các thư mục và tệp sau

Cấu trúc tệp

\-- giỏ hàng
. -- chức năng. php
. -- mục lục. php
. -- Trang Chủ. php
. -- Mỹ phẩm. php
. -- sản phẩm. php
. -- xe đẩy. php
. -- đặt hàng. php
. -- Phong cách. css
\-- hình ảnh
. -- hình ảnh đặc trưng. jpg
. -- Máy ảnh. jpg
. -- tai nghe. jpg
. -- cái ví. jpg
. -- đồng hồ. jpg

Mỗi tệp/thư mục sẽ chứa các mục sau

  • chức năng. php — Tệp này sẽ chứa tất cả các chức năng chúng tôi cần cho hệ thống giỏ hàng của mình (tiêu đề mẫu, chân trang mẫu và chức năng kết nối cơ sở dữ liệu)
  • mục lục. php — Tệp này sẽ chứa mẫu chính (đầu trang, chân trang, v.v.) và định tuyến cơ bản để chúng tôi có thể bao gồm các trang bên dưới
  • Trang Chủ. php — Tệp này sẽ là trang chủ chứa hình ảnh nổi bật và 4 sản phẩm được thêm gần đây
  • Mỹ phẩm. php — Tệp này sẽ hiển thị tất cả các sản phẩm có phân trang cơ bản
  • sản phẩm. php — Tệp này sẽ hiển thị một sản phẩm (tùy thuộc vào yêu cầu GET) và sẽ chứa một biểu mẫu cho phép khách hàng thay đổi số lượng và thêm sản phẩm vào giỏ hàng
  • xe đẩy. php — Trang giỏ hàng sẽ điền tất cả các sản phẩm đã được thêm vào giỏ hàng, cùng với số lượng, tổng giá và tổng giá
  • đặt hàng. php — Một thông báo cơ bản sẽ được hiển thị cho người dùng khi họ đặt hàng
  • Phong cách. css — Biểu định kiểu (CSS3) chúng tôi sẽ sử dụng cho trang web giỏ hàng của mình
  • imgs — Thư mục sẽ chứa tất cả hình ảnh cho hệ thống giỏ hàng của chúng tôi (hình ảnh nổi bật, hình ảnh sản phẩm, v.v.). Bạn có thể tải xuống các hình ảnh ví dụ bằng cách nhấp vào tên tệp trong vùng chứa cấu trúc tệp

2. Tạo cơ sở dữ liệu và thiết lập bảng

Đối với phần này, bạn sẽ cần truy cập cơ sở dữ liệu MySQL của mình, bằng cách sử dụng phpMyAdmin hoặc ứng dụng quản lý cơ sở dữ liệu MySQL ưa thích của bạn

Nếu bạn đang sử dụng phpMyAdmin, hãy làm theo các hướng dẫn sau

  • Điều hướng đến http. //localhost/phpmyadmin/
  • Nhấp vào tab Cơ sở dữ liệu ở trên cùng
  • Trong phần Tạo cơ sở dữ liệu, nhập shoppingcart vào hộp văn bản
  • Chọn utf8_General_ci làm đối chiếu (UTF-8 là mã hóa mặc định trong HTML5)
  • Nhấp vào Tạo

Vui lòng sử dụng tên cơ sở dữ liệu của riêng bạn hoặc sử dụng shoppingcart làm tên cơ sở dữ liệu

Bây giờ chúng ta có thể tiến hành tạo bảng sản phẩm. Chúng tôi sẽ sử dụng bảng này để lưu trữ tất cả các sản phẩm của mình, cùng với các cột tên sản phẩm, mô tả, hình ảnh, giá, giá RRP, số lượng và ngày thêm vào. Chúng ta sẽ truy xuất các sản phẩm này sau trong phần hướng dẫn với PHP

Nhấp vào cơ sở dữ liệu trên bảng điều khiển bên trái (giỏ hàng) và thực hiện câu lệnh SQL sau

SQL Sao chép

CREATE TABLE IF NOT EXISTS `products` (
	`id` int(11) NOT NULL AUTO_INCREMENT,
	`name` varchar(200) NOT NULL,
	`desc` text NOT NULL,
	`price` decimal(7,2) NOT NULL,
	`rrp` decimal(7,2) NOT NULL DEFAULT '0.00',
	`quantity` int(11) NOT NULL,
	`img` text NOT NULL,
	`date_added` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,
	PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;

INSERT INTO `products` (`id`, `name`, `desc`, `price`, `rrp`, `quantity`, `img`, `date_added`) VALUES
(1, 'Smart Watch', '
Unique watch made with stainless steel, ideal for those that prefer interative watches.
\r\n
Features
\r\n
    \r\n
  • Powered by Android with built-in apps.
    • \r\n
  • Adjustable to fit most.
    • \r\n
  • Long battery life, continuous wear for up to 2 days.
    • \r\n
  • Lightweight design, comfort on your wrist.
    • \r\n
', '29.99', '0.00', 10, 'watch.jpg', '2019-03-13 17:55:22'),
(2, 'Wallet', '', '14.99', '19.99', 34, 'wallet.jpg', '2019-03-13 18:52:49'),
(3, 'Headphones', '', '19.99', '0.00', 23, 'headphones.jpg', '2019-03-13 18:47:56'),
(4, 'Digital Camera', '', '69.99', '0.00', 7, 'camera.jpg', '2019-03-13 17:42:04');

Trên phpMyAdmin, cái này sẽ giống như

http. //localhost/phpmyadmin/

Làm cách nào để thêm số lượng sản phẩm trong php?

Đoạn mã câu lệnh SQL trên sẽ tạo bảng sản phẩm với các cột sau

  • id — ID duy nhất cho sản phẩm, ID này sẽ tự động tăng lên
  • name — Tên của sản phẩm
  • desc — Mô tả sản phẩm
  • price — Giá của sản phẩm
  • rrp — Giá bán lẻ, nếu bạn muốn một sản phẩm được bán, bạn đặt giá trị cao hơn giá
  • date_add — Ngày sản phẩm được thêm vào, chúng tôi sẽ sử dụng ngày này để phân loại sản phẩm

Câu lệnh SQL cũng sẽ chèn 4 sản phẩm ví dụ mà chúng ta có thể sử dụng cho mục đích thử nghiệm. Bạn có thể thay đổi/xóa chúng sau này trong hướng dẫn khi chúng tôi triển khai mã

3. Thiết kế hệ thống giỏ hàng bằng CSS

Thay vì sử dụng một thư viện chẳng hạn như Bootstrap, tôi đã quyết định tạo ra một thiết kế rõ ràng, sắc nét và hiện đại với CSS3 thuần túy

Gói Nâng cao bao gồm tệp SCSS và mã CSS thiết kế đáp ứng. Bạn có thể dễ dàng thay đổi bảng màu, phông chữ, kích thước nội dung, v.v. với SCSS

chỉnh sửa phong cách. css và thêm đoạn mã sau

CSS Bản sao

* {
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
html {
	height: 100%;
}
body {
	position: relative;
	min-height: 100%;
	color: #555555;
	background-color: #FFFFFF;
	margin: 0;
	padding-bottom: 100px; /* Same height as footer */
}
h1, h2, h3, h4, h5 {
	color: #394352;
}
.content-wrapper {
	width: 1050px;
	margin: 0 auto;
}
header {
	border-bottom: 1px solid #EEEEEE;
}
header .content-wrapper {
	display: flex;
}
header h1 {
	display: flex;
	flex-grow: 1;
	flex-basis: 0;
	font-size: 20px;
	margin: 0;
	padding: 24px 0;
}
header nav {
	display: flex;
	flex-grow: 1;
	flex-basis: 0;
	justify-content: center;
	align-items: center;
}
header nav a {
	text-decoration: none;
	color: #555555;
	padding: 10px 10px;
	margin: 0 10px;
}
header nav a:hover {
	border-bottom: 1px solid #aaa;
}
header .link-icons {
	display: flex;
	flex-grow: 1;
	flex-basis: 0;
	justify-content: flex-end;
	align-items: center;
	position: relative;
}
header .link-icons a {
	text-decoration: none;
	color: #394352;
	padding: 0 10px;
}
header .link-icons a:hover {
	color: #4e5c70;
}
header .link-icons a i {
	font-size: 18px;
}
header .link-icons a span {
	display: inline-block;
	text-align: center;
	background-color: #63748e;
	border-radius: 50%;
	color: #FFFFFF;
	font-size: 12px;
	line-height: 16px;
	width: 16px;
	height: 16px;
	font-weight: bold;
	position: absolute;
	top: 22px;
	right: 0;
}
main .featured {
	display: flex;
	flex-direction: column;
	background-image: url(imgs/featured-image.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	height: 500px;
	align-items: center;
	justify-content: center;
	text-align: center;
}
main .featured h2 {
	display: inline-block;
	margin: 0;
	width: 1050px;
	font-family: Rockwell, Courier Bold, Courier, Georgia, Times, Times New Roman, serif;
	font-size: 68px;
	color: #FFFFFF;
	padding-bottom: 10px;
}
main .featured p {
	display: inline-block;
	margin: 0;
	width: 1050px;
	font-size: 24px;
	color: #FFFFFF;
}
main .recentlyadded h2 {
	display: block;
	font-weight: normal;
	margin: 0;
	padding: 40px 0;
	font-size: 24px;
	text-align: center;
	width: 100%;
	border-bottom: 1px solid #EEEEEE;
}
main .recentlyadded .products, main .products .products-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	padding: 40px 0 0 0;
}
main .recentlyadded .products .product, main .products .products-wrapper .product {
	display: block;
	overflow: hidden;
	text-decoration: none;
	width: 25%;
	padding-bottom: 60px;
}
main .recentlyadded .products .product img, main .products .products-wrapper .product img {
	transform: scale(1);
	transition: transform 1s;
}
main .recentlyadded .products .product .name, main .products .products-wrapper .product .name {
	display: block;
	color: #555555;
	padding: 20px 0 2px 0;
}
main .recentlyadded .products .product .price, main .products .products-wrapper .product .price {
	display: block;
	color: #999999;
}
main .recentlyadded .products .product .rrp, main .products .products-wrapper .product .rrp {
	color: #BBBBBB;
	text-decoration: line-through;
}
main .recentlyadded .products .product:hover img, main .products .products-wrapper .product:hover img {
	transform: scale(1.05);
	transition: transform 1s;
}
main .recentlyadded .products .product:hover .name, main .products .products-wrapper .product:hover .name {
	text-decoration: underline;
}
main > .product {
	display: flex;
	padding: 40px 0;
}
main > .product > div {
	padding-left: 15px;
}
main > .product h1 {
	font-size: 34px;
	font-weight: normal;
	margin: 0;
	padding: 20px 0 10px 0;
}
main > .product .price {
	display: block;
	font-size: 22px;
	color: #999999;
}
main > .product .rrp {
	color: #BBBBBB;
	text-decoration: line-through;
	font-size: 22px;
	padding-left: 5px;
}
main > .product form {
	display: flex;
	flex-flow: column;
	margin: 40px 0;
}
main > .product form input[type="number"] {
	width: 400px;
	padding: 10px;
	margin-bottom: 15px;
	border: 1px solid #ccc;
	color: #555555;
	border-radius: 5px;
}
main > .product form input[type="submit"] {
	background: #4e5c70;
	border: 0;
	color: #FFFFFF;
	width: 400px;
	padding: 12px 0;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: bold;
	border-radius: 5px;
	cursor: pointer;
}
main > .product form input[type="submit"]:hover {
	background: #434f61;
}
main > .products h1 {
	display: block;
	font-weight: normal;
	margin: 0;
	padding: 40px 0;
	font-size: 24px;
	text-align: center;
	width: 100%;
}
main > .products .buttons {
	text-align: right;
	padding-bottom: 40px;
}
main > .products .buttons a {
	display: inline-block;
	text-decoration: none;
	margin-left: 5px;
	padding: 12px 20px;
	border: 0;
	background: #4e5c70;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: bold;
	border-radius: 5px;
}
main > .products .buttons a:hover {
	background: #434f61;
}
main .cart h1 {
	display: block;
	font-weight: normal;
	margin: 0;
	padding: 40px 0;
	font-size: 24px;
	text-align: center;
	width: 100%;
}
main .cart table {
	width: 100%;
}
main .cart table thead td {
	padding: 30px 0;
	border-bottom: 1px solid #EEEEEE;
}
main .cart table thead td:last-child {
	text-align: right;
}
main .cart table tbody td {
	padding: 20px 0;
	border-bottom: 1px solid #EEEEEE;
}
main .cart table tbody td:last-child {
	text-align: right;
}
main .cart table .img {
	width: 80px;
}
main .cart table .remove {
	color: #777777;
	font-size: 12px;
	padding-top: 3px;
}
main .cart table .remove:hover {
	text-decoration: underline;
}
main .cart table .price {
	color: #999999;
}
main .cart table a {
	text-decoration: none;
	color: #555555;
}
main .cart table input[type="number"] {
	width: 68px;
	padding: 10px;
	border: 1px solid #ccc;
	color: #555555;
	border-radius: 5px;
}
main .cart .subtotal {
	text-align: right;
	padding: 40px 0;
}
main .cart .subtotal .text {
	padding-right: 40px;
	font-size: 18px;
}
main .cart .subtotal .price {
	font-size: 18px;
	color: #999999;
}
main .cart .buttons {
	text-align: right;
	padding-bottom: 40px;
}
main .cart .buttons input[type="submit"] {
	margin-left: 5px;
	padding: 12px 20px;
	border: 0;
	background: #4e5c70;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: bold;
	cursor: pointer;
	border-radius: 5px;
}
main .cart .buttons input[type="submit"]:hover {
	background: #434f61;
}
main .placeorder h1 {
	display: block;
	font-weight: normal;
	margin: 0;
	padding: 40px 0;
	font-size: 24px;
	text-align: center;
	width: 100%;
}
main .placeorder p {
	text-align: center;
}
footer {
	position: absolute;
	bottom: 0;
	border-top: 1px solid #EEEEEE;
	padding: 20px 0;
	width: 100%;
}

Đây sẽ là biểu định kiểu chúng tôi sẽ sử dụng cho hệ thống giỏ hàng

4. Tạo tệp chức năng

Chức năng. tệp php sẽ chứa tất cả các chức năng chúng tôi sẽ sử dụng trong hệ thống giỏ hàng của mình, bao gồm tiêu đề mẫu, chân trang mẫu và các chức năng kết nối cơ sở dữ liệu

Chỉnh sửa các chức năng. php và thêm vào như sau

PHP Bản sao



	
		
		$title
		
		
	
	
        

            

                
Shopping Cart System

                
                

                    
						
					
                

            

        

        

EOT;
}
// Template footer
function template_footer() {
$year = date('Y');
echo <<
        

            

                
© $year, Shopping Cart System

            

        

    

EOT;
}
?>

Các chức năng này sẽ giúp chúng tôi kết nối với cơ sở dữ liệu và định dạng các trang của chúng tôi dễ dàng hơn nhiều. Chúng tôi sẽ đưa tệp này vào phần lớn các tệp PHP của chúng tôi. Thay vì viết lặp đi lặp lại cùng một mã mẫu, chúng ta có thể dễ dàng thực thi tên hàm. Chúng tôi cũng có thể thay đổi bố cục của hệ thống giỏ hàng của mình mà không cần chỉnh sửa từng tệp

Chúng tôi đang sử dụng Font Awesome (thư viện biểu tượng miễn phí) cho các biểu tượng phông chữ của mình. CDN biểu định kiểu được bao gồm trong phần đầu HTML (chức năng tiêu đề mẫu)

5. Tạo tệp chỉ mục

chỉ mục. tệp php về cơ bản sẽ là tệp chính của chúng tôi để truy cập tất cả các trang của chúng tôi. Chúng tôi sẽ thiết lập định tuyến cơ bản và sử dụng các yêu cầu GET để xác định trang nào

5. 1. Kết nối với cơ sở dữ liệu MySQL

Chỉnh sửa chỉ mục. php và thêm vào như sau

PHP Bản sao

Đầu tiên chúng ta tạo phiên với hàm session_start. Cùng với đó, chúng tôi có thể lưu trữ các sản phẩm được thêm vào giỏ hàng, sau đó, tập lệnh sẽ kết nối với MySQL bằng chức năng kết nối cơ sở dữ liệu mà chúng tôi đã tạo trước đó, trong các chức năng. tập tin php

Ghi chú. Cập nhật các biến kết nối cơ sở dữ liệu nếu bạn không thể kết nối với MySQL

5. 2. Định tuyến cơ bản

Thêm vào sau

PHP Bản sao

// Page is set to home (home.php) by default, so when the visitor visits that will be the page they see.
$page = isset($_GET['page']) && file_exists($_GET['page'] . '.php') ? $_GET['page'] : 'home';
// Include and show the requested page
include $page . '.php';
?>

Phương pháp định tuyến cơ bản được sử dụng ở trên kiểm tra xem biến yêu cầu GET ($_GET['page']) có tồn tại không. Nếu không, trang mặc định sẽ được đặt thành trang chủ, trong khi nếu nó tồn tại, nó sẽ là trang được yêu cầu

Ví dụ: nếu chúng tôi muốn truy cập trang sản phẩm, chúng tôi có thể điều hướng đến http. // localhost/giỏ hàng/chỉ mục. php?page=products

Nếu bạn điều hướng đến chỉ mục. php trong trình duyệt của bạn, trang sẽ xuất hiện trống, đó là do chúng tôi chưa chỉnh sửa trang chủ. tập tin php chưa

6. Tạo Trang chủ

Trang chủ sẽ là trang đầu tiên mà khách hàng của chúng tôi sẽ nhìn thấy. Đối với trang này, chúng tôi có thể thêm một hình ảnh và văn bản nổi bật, cùng với danh sách 4 sản phẩm được thêm gần đây

6. 1. Nhận 4 sản phẩm từ cơ sở dữ liệu

sửa nhà. php và thêm vào như sau

PHP Bản sao

prepare('SELECT * FROM products ORDER BY date_added DESC LIMIT 4');
$stmt->execute();
$recently_added_products = $stmt->fetchAll(PDO::FETCH_ASSOC);
?>

Đoạn mã trên sẽ thực thi một truy vấn SQL sẽ truy xuất bốn sản phẩm được thêm gần đây nhất từ ​​​​cơ sở dữ liệu của chúng tôi. Tất cả những gì chúng ta phải làm với truy vấn này là sắp xếp theo cột date_added và giới hạn số lượng là 4, khá đơn giản phải không?

6. 2. Tạo mẫu Trang chủ

Thêm vào sau thẻ đóng PHP

PHP Bản sao





    
Gadgets

    
Essential gadgets for everyday use





    
Recently Added Products

    

        
        
            ">
            
            
                $
                 0): ?>
                $

Điều này sẽ tạo cho chúng tôi một mẫu trang chủ cơ bản. Đoạn mã trên sẽ lặp lại biến mảng $recently_added_products và điền chúng cho phù hợp. Giá RRP sẽ được bao gồm nhưng chỉ khi giá trị lớn hơn 0

Nếu bạn muốn sử dụng đơn vị tiền tệ của riêng mình, bạn có thể thay đổi mã thực thể $. Bạn có thể tìm thấy danh sách ở đây

Ghi chú. tất cả các hình ảnh sản phẩm được đặt trong thư mục img. Bạn sẽ cần tải xuống hình ảnh của các sản phẩm đó nếu bạn đang sử dụng các sản phẩm mẫu mà chúng tôi đã tạo trước đây. Bạn có thể tải chúng trong phần Cấu trúc tệp

Nếu chúng tôi điều hướng đến http. // localhost/giỏ hàng/chỉ mục. php, nó sẽ giống như sau

http. // localhost/giỏ hàng/chỉ mục. php

Làm cách nào để thêm số lượng sản phẩm trong php?

Bạn cũng có thể truy cập trang chủ bằng cách chỉ định tham số trang (http. // localhost/giỏ hàng/chỉ mục. php?page=home). Điều này có thể là do định tuyến cơ bản mà chúng tôi đã triển khai trước đó

7. Tạo trang sản phẩm

Trang sản phẩm sẽ là nơi khách hàng của chúng tôi sẽ duyệt qua tất cả các sản phẩm của chúng tôi. Chúng tôi sẽ giới hạn số lượng sản phẩm hiển thị trên mỗi trang và thêm phân trang cho phép khách hàng điều hướng giữa các trang

7. 1. Nhận sản phẩm từ cơ sở dữ liệu với phân trang

Chỉnh sửa các sản phẩm. php và thêm vào như sau

PHP Bản sao

prepare('SELECT * FROM products ORDER BY date_added DESC LIMIT ?,?');
// bindValue will allow us to use integer in the SQL statement, we need to use for LIMIT
$stmt->bindValue(1, ($current_page - 1) * $num_products_on_each_page, PDO::PARAM_INT);
$stmt->bindValue(2, $num_products_on_each_page, PDO::PARAM_INT);
$stmt->execute();
// Fetch the products from the database and return the result as an Array
$products = $stmt->fetchAll(PDO::FETCH_ASSOC);

Việc cập nhật biến $num_products_on_each_page sẽ giới hạn số lượng sản phẩm hiển thị trên mỗi trang

Để xác định khách hàng đang truy cập trang nào, chúng ta có thể sử dụng yêu cầu GET, trong URL, yêu cầu này sẽ xuất hiện dưới dạng chỉ mục. php?page=products&p=1, v.v. và trong tập lệnh PHP của chúng tôi, tham số p chúng tôi có thể truy xuất bằng biến $_GET['p']. Giả sử yêu cầu hợp lệ, mã sẽ thực thi một truy vấn sẽ truy xuất các sản phẩm giới hạn từ cơ sở dữ liệu của chúng tôi

Ghi chú. Chúng tôi đang thực hiện các truy vấn bằng cách sử dụng câu lệnh đã chuẩn bị. Các câu lệnh đã chuẩn bị sẽ ngăn chặn hoàn toàn việc tiêm SQL. Bạn nên chuẩn bị các câu lệnh với các yêu cầu GET và POST

7. 2. Lấy tổng số sản phẩm

Thêm vào sau

PHP Bản sao

________số 8

Đoạn mã trên sẽ lấy tổng số sản phẩm trong bảng sản phẩm của chúng tôi. Khách hàng sẽ có thể xem tổng số sản phẩm ở đầu trang sản phẩm

7. 3. Tạo mẫu sản phẩm

Thêm vào sau thẻ đóng PHP

PHP Bản sao





    
Products

    
 Products

    

        
        
            ">
            
            
                $
                 0): ?>
                $
                
            
        
        
    

    

         1): ?>
        Prev
        
         ($current_page * $num_products_on_each_page) - $num_products_on_each_page + count($products)): ?>
        Next

Bạn có nhớ những sản phẩm được thêm gần đây mà chúng tôi đã tạo cho trang chủ không?

Các nút Tiếp theo và Trước đó sẽ chỉ hiển thị với người dùng nếu tổng số lượng sản phẩm lớn hơn biến $num_products_on_each_page

Nếu chúng tôi điều hướng đến http. // localhost/giỏ hàng/chỉ mục. php?page=products nó sẽ giống như sau

http. // localhost/giỏ hàng/chỉ mục. php?page=products

Làm cách nào để thêm số lượng sản phẩm trong php?

Về cơ bản, đó là tất cả những gì chúng ta cần làm cho trang sản phẩm, các tính năng bổ sung như phân loại sản phẩm có sẵn trong gói Nâng cao

8. Tạo trang sản phẩm

Trang sản phẩm sẽ hiển thị tất cả các chi tiết cho một sản phẩm cụ thể, được xác định bởi biến ID yêu cầu GET. Khách hàng có thể xem giá, hình ảnh, mô tả. Khách hàng sẽ có thể thay đổi số lượng và thêm vào giỏ hàng chỉ bằng một nút bấm

8. 1. Nhận sản phẩm từ cơ sở dữ liệu với yêu cầu GET

chỉnh sửa sản phẩm. php và thêm vào như sau

PHP Bản sao

* {
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
html {
	height: 100%;
}
body {
	position: relative;
	min-height: 100%;
	color: #555555;
	background-color: #FFFFFF;
	margin: 0;
	padding-bottom: 100px; /* Same height as footer */
}
h1, h2, h3, h4, h5 {
	color: #394352;
}
.content-wrapper {
	width: 1050px;
	margin: 0 auto;
}
header {
	border-bottom: 1px solid #EEEEEE;
}
header .content-wrapper {
	display: flex;
}
header h1 {
	display: flex;
	flex-grow: 1;
	flex-basis: 0;
	font-size: 20px;
	margin: 0;
	padding: 24px 0;
}
header nav {
	display: flex;
	flex-grow: 1;
	flex-basis: 0;
	justify-content: center;
	align-items: center;
}
header nav a {
	text-decoration: none;
	color: #555555;
	padding: 10px 10px;
	margin: 0 10px;
}
header nav a:hover {
	border-bottom: 1px solid #aaa;
}
header .link-icons {
	display: flex;
	flex-grow: 1;
	flex-basis: 0;
	justify-content: flex-end;
	align-items: center;
	position: relative;
}
header .link-icons a {
	text-decoration: none;
	color: #394352;
	padding: 0 10px;
}
header .link-icons a:hover {
	color: #4e5c70;
}
header .link-icons a i {
	font-size: 18px;
}
header .link-icons a span {
	display: inline-block;
	text-align: center;
	background-color: #63748e;
	border-radius: 50%;
	color: #FFFFFF;
	font-size: 12px;
	line-height: 16px;
	width: 16px;
	height: 16px;
	font-weight: bold;
	position: absolute;
	top: 22px;
	right: 0;
}
main .featured {
	display: flex;
	flex-direction: column;
	background-image: url(imgs/featured-image.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	height: 500px;
	align-items: center;
	justify-content: center;
	text-align: center;
}
main .featured h2 {
	display: inline-block;
	margin: 0;
	width: 1050px;
	font-family: Rockwell, Courier Bold, Courier, Georgia, Times, Times New Roman, serif;
	font-size: 68px;
	color: #FFFFFF;
	padding-bottom: 10px;
}
main .featured p {
	display: inline-block;
	margin: 0;
	width: 1050px;
	font-size: 24px;
	color: #FFFFFF;
}
main .recentlyadded h2 {
	display: block;
	font-weight: normal;
	margin: 0;
	padding: 40px 0;
	font-size: 24px;
	text-align: center;
	width: 100%;
	border-bottom: 1px solid #EEEEEE;
}
main .recentlyadded .products, main .products .products-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	padding: 40px 0 0 0;
}
main .recentlyadded .products .product, main .products .products-wrapper .product {
	display: block;
	overflow: hidden;
	text-decoration: none;
	width: 25%;
	padding-bottom: 60px;
}
main .recentlyadded .products .product img, main .products .products-wrapper .product img {
	transform: scale(1);
	transition: transform 1s;
}
main .recentlyadded .products .product .name, main .products .products-wrapper .product .name {
	display: block;
	color: #555555;
	padding: 20px 0 2px 0;
}
main .recentlyadded .products .product .price, main .products .products-wrapper .product .price {
	display: block;
	color: #999999;
}
main .recentlyadded .products .product .rrp, main .products .products-wrapper .product .rrp {
	color: #BBBBBB;
	text-decoration: line-through;
}
main .recentlyadded .products .product:hover img, main .products .products-wrapper .product:hover img {
	transform: scale(1.05);
	transition: transform 1s;
}
main .recentlyadded .products .product:hover .name, main .products .products-wrapper .product:hover .name {
	text-decoration: underline;
}
main > .product {
	display: flex;
	padding: 40px 0;
}
main > .product > div {
	padding-left: 15px;
}
main > .product h1 {
	font-size: 34px;
	font-weight: normal;
	margin: 0;
	padding: 20px 0 10px 0;
}
main > .product .price {
	display: block;
	font-size: 22px;
	color: #999999;
}
main > .product .rrp {
	color: #BBBBBB;
	text-decoration: line-through;
	font-size: 22px;
	padding-left: 5px;
}
main > .product form {
	display: flex;
	flex-flow: column;
	margin: 40px 0;
}
main > .product form input[type="number"] {
	width: 400px;
	padding: 10px;
	margin-bottom: 15px;
	border: 1px solid #ccc;
	color: #555555;
	border-radius: 5px;
}
main > .product form input[type="submit"] {
	background: #4e5c70;
	border: 0;
	color: #FFFFFF;
	width: 400px;
	padding: 12px 0;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: bold;
	border-radius: 5px;
	cursor: pointer;
}
main > .product form input[type="submit"]:hover {
	background: #434f61;
}
main > .products h1 {
	display: block;
	font-weight: normal;
	margin: 0;
	padding: 40px 0;
	font-size: 24px;
	text-align: center;
	width: 100%;
}
main > .products .buttons {
	text-align: right;
	padding-bottom: 40px;
}
main > .products .buttons a {
	display: inline-block;
	text-decoration: none;
	margin-left: 5px;
	padding: 12px 20px;
	border: 0;
	background: #4e5c70;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: bold;
	border-radius: 5px;
}
main > .products .buttons a:hover {
	background: #434f61;
}
main .cart h1 {
	display: block;
	font-weight: normal;
	margin: 0;
	padding: 40px 0;
	font-size: 24px;
	text-align: center;
	width: 100%;
}
main .cart table {
	width: 100%;
}
main .cart table thead td {
	padding: 30px 0;
	border-bottom: 1px solid #EEEEEE;
}
main .cart table thead td:last-child {
	text-align: right;
}
main .cart table tbody td {
	padding: 20px 0;
	border-bottom: 1px solid #EEEEEE;
}
main .cart table tbody td:last-child {
	text-align: right;
}
main .cart table .img {
	width: 80px;
}
main .cart table .remove {
	color: #777777;
	font-size: 12px;
	padding-top: 3px;
}
main .cart table .remove:hover {
	text-decoration: underline;
}
main .cart table .price {
	color: #999999;
}
main .cart table a {
	text-decoration: none;
	color: #555555;
}
main .cart table input[type="number"] {
	width: 68px;
	padding: 10px;
	border: 1px solid #ccc;
	color: #555555;
	border-radius: 5px;
}
main .cart .subtotal {
	text-align: right;
	padding: 40px 0;
}
main .cart .subtotal .text {
	padding-right: 40px;
	font-size: 18px;
}
main .cart .subtotal .price {
	font-size: 18px;
	color: #999999;
}
main .cart .buttons {
	text-align: right;
	padding-bottom: 40px;
}
main .cart .buttons input[type="submit"] {
	margin-left: 5px;
	padding: 12px 20px;
	border: 0;
	background: #4e5c70;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: bold;
	cursor: pointer;
	border-radius: 5px;
}
main .cart .buttons input[type="submit"]:hover {
	background: #434f61;
}
main .placeorder h1 {
	display: block;
	font-weight: normal;
	margin: 0;
	padding: 40px 0;
	font-size: 24px;
	text-align: center;
	width: 100%;
}
main .placeorder p {
	text-align: center;
}
footer {
	position: absolute;
	bottom: 0;
	border-top: 1px solid #EEEEEE;
	padding: 20px 0;
	width: 100%;
}
0

Đoạn mã trên sẽ kiểm tra xem biến id được yêu cầu (yêu cầu GET) có tồn tại không. Nếu được chỉ định, mã sẽ tiến hành truy xuất sản phẩm từ bảng sản phẩm trong cơ sở dữ liệu của chúng tôi

Nếu sản phẩm không tồn tại trong cơ sở dữ liệu, mã sẽ xuất ra một lỗi đơn giản, hàm exit() sẽ ngăn việc thực thi tập lệnh tiếp theo và hiển thị lỗi

8. 2. Tạo mẫu sản phẩm

Thêm vào sau thẻ đóng PHP

PHP Bản sao

* {
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
html {
	height: 100%;
}
body {
	position: relative;
	min-height: 100%;
	color: #555555;
	background-color: #FFFFFF;
	margin: 0;
	padding-bottom: 100px; /* Same height as footer */
}
h1, h2, h3, h4, h5 {
	color: #394352;
}
.content-wrapper {
	width: 1050px;
	margin: 0 auto;
}
header {
	border-bottom: 1px solid #EEEEEE;
}
header .content-wrapper {
	display: flex;
}
header h1 {
	display: flex;
	flex-grow: 1;
	flex-basis: 0;
	font-size: 20px;
	margin: 0;
	padding: 24px 0;
}
header nav {
	display: flex;
	flex-grow: 1;
	flex-basis: 0;
	justify-content: center;
	align-items: center;
}
header nav a {
	text-decoration: none;
	color: #555555;
	padding: 10px 10px;
	margin: 0 10px;
}
header nav a:hover {
	border-bottom: 1px solid #aaa;
}
header .link-icons {
	display: flex;
	flex-grow: 1;
	flex-basis: 0;
	justify-content: flex-end;
	align-items: center;
	position: relative;
}
header .link-icons a {
	text-decoration: none;
	color: #394352;
	padding: 0 10px;
}
header .link-icons a:hover {
	color: #4e5c70;
}
header .link-icons a i {
	font-size: 18px;
}
header .link-icons a span {
	display: inline-block;
	text-align: center;
	background-color: #63748e;
	border-radius: 50%;
	color: #FFFFFF;
	font-size: 12px;
	line-height: 16px;
	width: 16px;
	height: 16px;
	font-weight: bold;
	position: absolute;
	top: 22px;
	right: 0;
}
main .featured {
	display: flex;
	flex-direction: column;
	background-image: url(imgs/featured-image.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	height: 500px;
	align-items: center;
	justify-content: center;
	text-align: center;
}
main .featured h2 {
	display: inline-block;
	margin: 0;
	width: 1050px;
	font-family: Rockwell, Courier Bold, Courier, Georgia, Times, Times New Roman, serif;
	font-size: 68px;
	color: #FFFFFF;
	padding-bottom: 10px;
}
main .featured p {
	display: inline-block;
	margin: 0;
	width: 1050px;
	font-size: 24px;
	color: #FFFFFF;
}
main .recentlyadded h2 {
	display: block;
	font-weight: normal;
	margin: 0;
	padding: 40px 0;
	font-size: 24px;
	text-align: center;
	width: 100%;
	border-bottom: 1px solid #EEEEEE;
}
main .recentlyadded .products, main .products .products-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	padding: 40px 0 0 0;
}
main .recentlyadded .products .product, main .products .products-wrapper .product {
	display: block;
	overflow: hidden;
	text-decoration: none;
	width: 25%;
	padding-bottom: 60px;
}
main .recentlyadded .products .product img, main .products .products-wrapper .product img {
	transform: scale(1);
	transition: transform 1s;
}
main .recentlyadded .products .product .name, main .products .products-wrapper .product .name {
	display: block;
	color: #555555;
	padding: 20px 0 2px 0;
}
main .recentlyadded .products .product .price, main .products .products-wrapper .product .price {
	display: block;
	color: #999999;
}
main .recentlyadded .products .product .rrp, main .products .products-wrapper .product .rrp {
	color: #BBBBBB;
	text-decoration: line-through;
}
main .recentlyadded .products .product:hover img, main .products .products-wrapper .product:hover img {
	transform: scale(1.05);
	transition: transform 1s;
}
main .recentlyadded .products .product:hover .name, main .products .products-wrapper .product:hover .name {
	text-decoration: underline;
}
main > .product {
	display: flex;
	padding: 40px 0;
}
main > .product > div {
	padding-left: 15px;
}
main > .product h1 {
	font-size: 34px;
	font-weight: normal;
	margin: 0;
	padding: 20px 0 10px 0;
}
main > .product .price {
	display: block;
	font-size: 22px;
	color: #999999;
}
main > .product .rrp {
	color: #BBBBBB;
	text-decoration: line-through;
	font-size: 22px;
	padding-left: 5px;
}
main > .product form {
	display: flex;
	flex-flow: column;
	margin: 40px 0;
}
main > .product form input[type="number"] {
	width: 400px;
	padding: 10px;
	margin-bottom: 15px;
	border: 1px solid #ccc;
	color: #555555;
	border-radius: 5px;
}
main > .product form input[type="submit"] {
	background: #4e5c70;
	border: 0;
	color: #FFFFFF;
	width: 400px;
	padding: 12px 0;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: bold;
	border-radius: 5px;
	cursor: pointer;
}
main > .product form input[type="submit"]:hover {
	background: #434f61;
}
main > .products h1 {
	display: block;
	font-weight: normal;
	margin: 0;
	padding: 40px 0;
	font-size: 24px;
	text-align: center;
	width: 100%;
}
main > .products .buttons {
	text-align: right;
	padding-bottom: 40px;
}
main > .products .buttons a {
	display: inline-block;
	text-decoration: none;
	margin-left: 5px;
	padding: 12px 20px;
	border: 0;
	background: #4e5c70;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: bold;
	border-radius: 5px;
}
main > .products .buttons a:hover {
	background: #434f61;
}
main .cart h1 {
	display: block;
	font-weight: normal;
	margin: 0;
	padding: 40px 0;
	font-size: 24px;
	text-align: center;
	width: 100%;
}
main .cart table {
	width: 100%;
}
main .cart table thead td {
	padding: 30px 0;
	border-bottom: 1px solid #EEEEEE;
}
main .cart table thead td:last-child {
	text-align: right;
}
main .cart table tbody td {
	padding: 20px 0;
	border-bottom: 1px solid #EEEEEE;
}
main .cart table tbody td:last-child {
	text-align: right;
}
main .cart table .img {
	width: 80px;
}
main .cart table .remove {
	color: #777777;
	font-size: 12px;
	padding-top: 3px;
}
main .cart table .remove:hover {
	text-decoration: underline;
}
main .cart table .price {
	color: #999999;
}
main .cart table a {
	text-decoration: none;
	color: #555555;
}
main .cart table input[type="number"] {
	width: 68px;
	padding: 10px;
	border: 1px solid #ccc;
	color: #555555;
	border-radius: 5px;
}
main .cart .subtotal {
	text-align: right;
	padding: 40px 0;
}
main .cart .subtotal .text {
	padding-right: 40px;
	font-size: 18px;
}
main .cart .subtotal .price {
	font-size: 18px;
	color: #999999;
}
main .cart .buttons {
	text-align: right;
	padding-bottom: 40px;
}
main .cart .buttons input[type="submit"] {
	margin-left: 5px;
	padding: 12px 20px;
	border: 0;
	background: #4e5c70;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: bold;
	cursor: pointer;
	border-radius: 5px;
}
main .cart .buttons input[type="submit"]:hover {
	background: #434f61;
}
main .placeorder h1 {
	display: block;
	font-weight: normal;
	margin: 0;
	padding: 40px 0;
	font-size: 24px;
	text-align: center;
	width: 100%;
}
main .placeorder p {
	text-align: center;
}
footer {
	position: absolute;
	bottom: 0;
	border-top: 1px solid #EEEEEE;
	padding: 20px 0;
	width: 100%;
}
1

Mẫu chúng tôi sẽ sử dụng cho trang sản phẩm. Biểu mẫu được tạo và thuộc tính hành động được đặt thành trang giỏ hàng (chỉ mục. php?page=cart) cùng với phương thức được đặt để đăng. Trang giỏ hàng (cart. php) sẽ thêm sản phẩm vào giỏ hàng

Với trường mẫu số lượng, chúng ta có thể đặt giá trị tối đa, giá trị này được đặt thành số lượng của sản phẩm (lấy từ bảng sản phẩm). ID sản phẩm cũng được thêm vào biểu mẫu, vì điều này giúp chúng tôi biết khách hàng đã thêm sản phẩm nào

Chúng tôi không cần bao gồm tên, mô tả, v.v. của sản phẩm vì chúng tôi có thể lấy dữ liệu đó từ bảng sản phẩm trong cơ sở dữ liệu của mình bằng ID sản phẩm

Nếu chúng tôi điều hướng đến http. // localhost/giỏ hàng/chỉ mục. php?page=product&id=1 nó sẽ giống như sau

http. // localhost/giỏ hàng/chỉ mục. php?page=product&id=1

Làm cách nào để thêm số lượng sản phẩm trong php?

Nếu bạn thay đổi thông số id trong URL thành 2, nó sẽ hiển thị cho chúng tôi một sản phẩm khác

9. Tạo trang giỏ hàng

Trang giỏ hàng là nơi khách hàng có thể xem danh sách các sản phẩm của họ được thêm vào giỏ hàng. Họ sẽ có khả năng xóa sản phẩm và cập nhật số lượng

9. 1. Thêm sản phẩm vào giỏ hàng

Chỉnh sửa giỏ hàng. php và thêm vào như sau

PHP Bản sao

* {
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
html {
	height: 100%;
}
body {
	position: relative;
	min-height: 100%;
	color: #555555;
	background-color: #FFFFFF;
	margin: 0;
	padding-bottom: 100px; /* Same height as footer */
}
h1, h2, h3, h4, h5 {
	color: #394352;
}
.content-wrapper {
	width: 1050px;
	margin: 0 auto;
}
header {
	border-bottom: 1px solid #EEEEEE;
}
header .content-wrapper {
	display: flex;
}
header h1 {
	display: flex;
	flex-grow: 1;
	flex-basis: 0;
	font-size: 20px;
	margin: 0;
	padding: 24px 0;
}
header nav {
	display: flex;
	flex-grow: 1;
	flex-basis: 0;
	justify-content: center;
	align-items: center;
}
header nav a {
	text-decoration: none;
	color: #555555;
	padding: 10px 10px;
	margin: 0 10px;
}
header nav a:hover {
	border-bottom: 1px solid #aaa;
}
header .link-icons {
	display: flex;
	flex-grow: 1;
	flex-basis: 0;
	justify-content: flex-end;
	align-items: center;
	position: relative;
}
header .link-icons a {
	text-decoration: none;
	color: #394352;
	padding: 0 10px;
}
header .link-icons a:hover {
	color: #4e5c70;
}
header .link-icons a i {
	font-size: 18px;
}
header .link-icons a span {
	display: inline-block;
	text-align: center;
	background-color: #63748e;
	border-radius: 50%;
	color: #FFFFFF;
	font-size: 12px;
	line-height: 16px;
	width: 16px;
	height: 16px;
	font-weight: bold;
	position: absolute;
	top: 22px;
	right: 0;
}
main .featured {
	display: flex;
	flex-direction: column;
	background-image: url(imgs/featured-image.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	height: 500px;
	align-items: center;
	justify-content: center;
	text-align: center;
}
main .featured h2 {
	display: inline-block;
	margin: 0;
	width: 1050px;
	font-family: Rockwell, Courier Bold, Courier, Georgia, Times, Times New Roman, serif;
	font-size: 68px;
	color: #FFFFFF;
	padding-bottom: 10px;
}
main .featured p {
	display: inline-block;
	margin: 0;
	width: 1050px;
	font-size: 24px;
	color: #FFFFFF;
}
main .recentlyadded h2 {
	display: block;
	font-weight: normal;
	margin: 0;
	padding: 40px 0;
	font-size: 24px;
	text-align: center;
	width: 100%;
	border-bottom: 1px solid #EEEEEE;
}
main .recentlyadded .products, main .products .products-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	padding: 40px 0 0 0;
}
main .recentlyadded .products .product, main .products .products-wrapper .product {
	display: block;
	overflow: hidden;
	text-decoration: none;
	width: 25%;
	padding-bottom: 60px;
}
main .recentlyadded .products .product img, main .products .products-wrapper .product img {
	transform: scale(1);
	transition: transform 1s;
}
main .recentlyadded .products .product .name, main .products .products-wrapper .product .name {
	display: block;
	color: #555555;
	padding: 20px 0 2px 0;
}
main .recentlyadded .products .product .price, main .products .products-wrapper .product .price {
	display: block;
	color: #999999;
}
main .recentlyadded .products .product .rrp, main .products .products-wrapper .product .rrp {
	color: #BBBBBB;
	text-decoration: line-through;
}
main .recentlyadded .products .product:hover img, main .products .products-wrapper .product:hover img {
	transform: scale(1.05);
	transition: transform 1s;
}
main .recentlyadded .products .product:hover .name, main .products .products-wrapper .product:hover .name {
	text-decoration: underline;
}
main > .product {
	display: flex;
	padding: 40px 0;
}
main > .product > div {
	padding-left: 15px;
}
main > .product h1 {
	font-size: 34px;
	font-weight: normal;
	margin: 0;
	padding: 20px 0 10px 0;
}
main > .product .price {
	display: block;
	font-size: 22px;
	color: #999999;
}
main > .product .rrp {
	color: #BBBBBB;
	text-decoration: line-through;
	font-size: 22px;
	padding-left: 5px;
}
main > .product form {
	display: flex;
	flex-flow: column;
	margin: 40px 0;
}
main > .product form input[type="number"] {
	width: 400px;
	padding: 10px;
	margin-bottom: 15px;
	border: 1px solid #ccc;
	color: #555555;
	border-radius: 5px;
}
main > .product form input[type="submit"] {
	background: #4e5c70;
	border: 0;
	color: #FFFFFF;
	width: 400px;
	padding: 12px 0;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: bold;
	border-radius: 5px;
	cursor: pointer;
}
main > .product form input[type="submit"]:hover {
	background: #434f61;
}
main > .products h1 {
	display: block;
	font-weight: normal;
	margin: 0;
	padding: 40px 0;
	font-size: 24px;
	text-align: center;
	width: 100%;
}
main > .products .buttons {
	text-align: right;
	padding-bottom: 40px;
}
main > .products .buttons a {
	display: inline-block;
	text-decoration: none;
	margin-left: 5px;
	padding: 12px 20px;
	border: 0;
	background: #4e5c70;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: bold;
	border-radius: 5px;
}
main > .products .buttons a:hover {
	background: #434f61;
}
main .cart h1 {
	display: block;
	font-weight: normal;
	margin: 0;
	padding: 40px 0;
	font-size: 24px;
	text-align: center;
	width: 100%;
}
main .cart table {
	width: 100%;
}
main .cart table thead td {
	padding: 30px 0;
	border-bottom: 1px solid #EEEEEE;
}
main .cart table thead td:last-child {
	text-align: right;
}
main .cart table tbody td {
	padding: 20px 0;
	border-bottom: 1px solid #EEEEEE;
}
main .cart table tbody td:last-child {
	text-align: right;
}
main .cart table .img {
	width: 80px;
}
main .cart table .remove {
	color: #777777;
	font-size: 12px;
	padding-top: 3px;
}
main .cart table .remove:hover {
	text-decoration: underline;
}
main .cart table .price {
	color: #999999;
}
main .cart table a {
	text-decoration: none;
	color: #555555;
}
main .cart table input[type="number"] {
	width: 68px;
	padding: 10px;
	border: 1px solid #ccc;
	color: #555555;
	border-radius: 5px;
}
main .cart .subtotal {
	text-align: right;
	padding: 40px 0;
}
main .cart .subtotal .text {
	padding-right: 40px;
	font-size: 18px;
}
main .cart .subtotal .price {
	font-size: 18px;
	color: #999999;
}
main .cart .buttons {
	text-align: right;
	padding-bottom: 40px;
}
main .cart .buttons input[type="submit"] {
	margin-left: 5px;
	padding: 12px 20px;
	border: 0;
	background: #4e5c70;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: bold;
	cursor: pointer;
	border-radius: 5px;
}
main .cart .buttons input[type="submit"]:hover {
	background: #434f61;
}
main .placeorder h1 {
	display: block;
	font-weight: normal;
	margin: 0;
	padding: 40px 0;
	font-size: 24px;
	text-align: center;
	width: 100%;
}
main .placeorder p {
	text-align: center;
}
footer {
	position: absolute;
	bottom: 0;
	border-top: 1px solid #EEEEEE;
	padding: 20px 0;
	width: 100%;
}
2

Trong đoạn mã trên, chúng tôi sử dụng các biến phiên PHP. Chúng ta có thể sử dụng các phiên PHP để ghi nhớ các sản phẩm trong giỏ hàng, ví dụ: khi khách hàng điều hướng đến một trang khác, v.v., giỏ hàng sẽ vẫn chứa các sản phẩm được thêm trước đó cho đến khi phiên hết hạn

Đoạn mã trên sẽ kiểm tra xem một sản phẩm đã được thêm vào giỏ hàng chưa. Nếu bạn quay lại sản phẩm. php bạn có thể thấy rằng chúng tôi đã tạo một biểu mẫu HTML. Chúng tôi đang kiểm tra các giá trị biểu mẫu đó, nếu sản phẩm tồn tại, hãy tiến hành xác minh sản phẩm bằng cách chọn sản phẩm đó từ bảng sản phẩm trong cơ sở dữ liệu của chúng tôi. Chúng tôi không muốn khách hàng thao túng hệ thống và thêm các sản phẩm không tồn tại

Biến phiên giỏ hàng sẽ là một mảng sản phẩm được liên kết và với mảng này, chúng ta có thể thêm nhiều sản phẩm vào giỏ hàng. Khóa mảng sẽ là ID sản phẩm và giá trị sẽ là số lượng. Nếu một sản phẩm đã tồn tại trong giỏ hàng, tất cả những gì chúng ta phải làm là cập nhật số lượng

9. 2. Xóa sản phẩm khỏi giỏ hàng

Thêm vào sau

PHP Bản sao

* {
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
html {
	height: 100%;
}
body {
	position: relative;
	min-height: 100%;
	color: #555555;
	background-color: #FFFFFF;
	margin: 0;
	padding-bottom: 100px; /* Same height as footer */
}
h1, h2, h3, h4, h5 {
	color: #394352;
}
.content-wrapper {
	width: 1050px;
	margin: 0 auto;
}
header {
	border-bottom: 1px solid #EEEEEE;
}
header .content-wrapper {
	display: flex;
}
header h1 {
	display: flex;
	flex-grow: 1;
	flex-basis: 0;
	font-size: 20px;
	margin: 0;
	padding: 24px 0;
}
header nav {
	display: flex;
	flex-grow: 1;
	flex-basis: 0;
	justify-content: center;
	align-items: center;
}
header nav a {
	text-decoration: none;
	color: #555555;
	padding: 10px 10px;
	margin: 0 10px;
}
header nav a:hover {
	border-bottom: 1px solid #aaa;
}
header .link-icons {
	display: flex;
	flex-grow: 1;
	flex-basis: 0;
	justify-content: flex-end;
	align-items: center;
	position: relative;
}
header .link-icons a {
	text-decoration: none;
	color: #394352;
	padding: 0 10px;
}
header .link-icons a:hover {
	color: #4e5c70;
}
header .link-icons a i {
	font-size: 18px;
}
header .link-icons a span {
	display: inline-block;
	text-align: center;
	background-color: #63748e;
	border-radius: 50%;
	color: #FFFFFF;
	font-size: 12px;
	line-height: 16px;
	width: 16px;
	height: 16px;
	font-weight: bold;
	position: absolute;
	top: 22px;
	right: 0;
}
main .featured {
	display: flex;
	flex-direction: column;
	background-image: url(imgs/featured-image.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	height: 500px;
	align-items: center;
	justify-content: center;
	text-align: center;
}
main .featured h2 {
	display: inline-block;
	margin: 0;
	width: 1050px;
	font-family: Rockwell, Courier Bold, Courier, Georgia, Times, Times New Roman, serif;
	font-size: 68px;
	color: #FFFFFF;
	padding-bottom: 10px;
}
main .featured p {
	display: inline-block;
	margin: 0;
	width: 1050px;
	font-size: 24px;
	color: #FFFFFF;
}
main .recentlyadded h2 {
	display: block;
	font-weight: normal;
	margin: 0;
	padding: 40px 0;
	font-size: 24px;
	text-align: center;
	width: 100%;
	border-bottom: 1px solid #EEEEEE;
}
main .recentlyadded .products, main .products .products-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	padding: 40px 0 0 0;
}
main .recentlyadded .products .product, main .products .products-wrapper .product {
	display: block;
	overflow: hidden;
	text-decoration: none;
	width: 25%;
	padding-bottom: 60px;
}
main .recentlyadded .products .product img, main .products .products-wrapper .product img {
	transform: scale(1);
	transition: transform 1s;
}
main .recentlyadded .products .product .name, main .products .products-wrapper .product .name {
	display: block;
	color: #555555;
	padding: 20px 0 2px 0;
}
main .recentlyadded .products .product .price, main .products .products-wrapper .product .price {
	display: block;
	color: #999999;
}
main .recentlyadded .products .product .rrp, main .products .products-wrapper .product .rrp {
	color: #BBBBBB;
	text-decoration: line-through;
}
main .recentlyadded .products .product:hover img, main .products .products-wrapper .product:hover img {
	transform: scale(1.05);
	transition: transform 1s;
}
main .recentlyadded .products .product:hover .name, main .products .products-wrapper .product:hover .name {
	text-decoration: underline;
}
main > .product {
	display: flex;
	padding: 40px 0;
}
main > .product > div {
	padding-left: 15px;
}
main > .product h1 {
	font-size: 34px;
	font-weight: normal;
	margin: 0;
	padding: 20px 0 10px 0;
}
main > .product .price {
	display: block;
	font-size: 22px;
	color: #999999;
}
main > .product .rrp {
	color: #BBBBBB;
	text-decoration: line-through;
	font-size: 22px;
	padding-left: 5px;
}
main > .product form {
	display: flex;
	flex-flow: column;
	margin: 40px 0;
}
main > .product form input[type="number"] {
	width: 400px;
	padding: 10px;
	margin-bottom: 15px;
	border: 1px solid #ccc;
	color: #555555;
	border-radius: 5px;
}
main > .product form input[type="submit"] {
	background: #4e5c70;
	border: 0;
	color: #FFFFFF;
	width: 400px;
	padding: 12px 0;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: bold;
	border-radius: 5px;
	cursor: pointer;
}
main > .product form input[type="submit"]:hover {
	background: #434f61;
}
main > .products h1 {
	display: block;
	font-weight: normal;
	margin: 0;
	padding: 40px 0;
	font-size: 24px;
	text-align: center;
	width: 100%;
}
main > .products .buttons {
	text-align: right;
	padding-bottom: 40px;
}
main > .products .buttons a {
	display: inline-block;
	text-decoration: none;
	margin-left: 5px;
	padding: 12px 20px;
	border: 0;
	background: #4e5c70;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: bold;
	border-radius: 5px;
}
main > .products .buttons a:hover {
	background: #434f61;
}
main .cart h1 {
	display: block;
	font-weight: normal;
	margin: 0;
	padding: 40px 0;
	font-size: 24px;
	text-align: center;
	width: 100%;
}
main .cart table {
	width: 100%;
}
main .cart table thead td {
	padding: 30px 0;
	border-bottom: 1px solid #EEEEEE;
}
main .cart table thead td:last-child {
	text-align: right;
}
main .cart table tbody td {
	padding: 20px 0;
	border-bottom: 1px solid #EEEEEE;
}
main .cart table tbody td:last-child {
	text-align: right;
}
main .cart table .img {
	width: 80px;
}
main .cart table .remove {
	color: #777777;
	font-size: 12px;
	padding-top: 3px;
}
main .cart table .remove:hover {
	text-decoration: underline;
}
main .cart table .price {
	color: #999999;
}
main .cart table a {
	text-decoration: none;
	color: #555555;
}
main .cart table input[type="number"] {
	width: 68px;
	padding: 10px;
	border: 1px solid #ccc;
	color: #555555;
	border-radius: 5px;
}
main .cart .subtotal {
	text-align: right;
	padding: 40px 0;
}
main .cart .subtotal .text {
	padding-right: 40px;
	font-size: 18px;
}
main .cart .subtotal .price {
	font-size: 18px;
	color: #999999;
}
main .cart .buttons {
	text-align: right;
	padding-bottom: 40px;
}
main .cart .buttons input[type="submit"] {
	margin-left: 5px;
	padding: 12px 20px;
	border: 0;
	background: #4e5c70;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: bold;
	cursor: pointer;
	border-radius: 5px;
}
main .cart .buttons input[type="submit"]:hover {
	background: #434f61;
}
main .placeorder h1 {
	display: block;
	font-weight: normal;
	margin: 0;
	padding: 40px 0;
	font-size: 24px;
	text-align: center;
	width: 100%;
}
main .placeorder p {
	text-align: center;
}
footer {
	position: absolute;
	bottom: 0;
	border-top: 1px solid #EEEEEE;
	padding: 20px 0;
	width: 100%;
}
3

Trên trang giỏ hàng, khách hàng sẽ có khả năng xóa sản phẩm khỏi giỏ hàng. Khi nút được nhấp, chúng tôi có thể sử dụng yêu cầu GET để xác định sản phẩm nào cần xóa, ví dụ: nếu chúng tôi có sản phẩm có ID 1, URL sau sẽ xóa sản phẩm đó khỏi giỏ hàng. http. // localhost/giỏ hàng/chỉ mục. php?page=cart&remove=1

9. 3. Cập nhật số lượng sản phẩm

Thêm vào sau

PHP Bản sao

* {
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
html {
	height: 100%;
}
body {
	position: relative;
	min-height: 100%;
	color: #555555;
	background-color: #FFFFFF;
	margin: 0;
	padding-bottom: 100px; /* Same height as footer */
}
h1, h2, h3, h4, h5 {
	color: #394352;
}
.content-wrapper {
	width: 1050px;
	margin: 0 auto;
}
header {
	border-bottom: 1px solid #EEEEEE;
}
header .content-wrapper {
	display: flex;
}
header h1 {
	display: flex;
	flex-grow: 1;
	flex-basis: 0;
	font-size: 20px;
	margin: 0;
	padding: 24px 0;
}
header nav {
	display: flex;
	flex-grow: 1;
	flex-basis: 0;
	justify-content: center;
	align-items: center;
}
header nav a {
	text-decoration: none;
	color: #555555;
	padding: 10px 10px;
	margin: 0 10px;
}
header nav a:hover {
	border-bottom: 1px solid #aaa;
}
header .link-icons {
	display: flex;
	flex-grow: 1;
	flex-basis: 0;
	justify-content: flex-end;
	align-items: center;
	position: relative;
}
header .link-icons a {
	text-decoration: none;
	color: #394352;
	padding: 0 10px;
}
header .link-icons a:hover {
	color: #4e5c70;
}
header .link-icons a i {
	font-size: 18px;
}
header .link-icons a span {
	display: inline-block;
	text-align: center;
	background-color: #63748e;
	border-radius: 50%;
	color: #FFFFFF;
	font-size: 12px;
	line-height: 16px;
	width: 16px;
	height: 16px;
	font-weight: bold;
	position: absolute;
	top: 22px;
	right: 0;
}
main .featured {
	display: flex;
	flex-direction: column;
	background-image: url(imgs/featured-image.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	height: 500px;
	align-items: center;
	justify-content: center;
	text-align: center;
}
main .featured h2 {
	display: inline-block;
	margin: 0;
	width: 1050px;
	font-family: Rockwell, Courier Bold, Courier, Georgia, Times, Times New Roman, serif;
	font-size: 68px;
	color: #FFFFFF;
	padding-bottom: 10px;
}
main .featured p {
	display: inline-block;
	margin: 0;
	width: 1050px;
	font-size: 24px;
	color: #FFFFFF;
}
main .recentlyadded h2 {
	display: block;
	font-weight: normal;
	margin: 0;
	padding: 40px 0;
	font-size: 24px;
	text-align: center;
	width: 100%;
	border-bottom: 1px solid #EEEEEE;
}
main .recentlyadded .products, main .products .products-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	padding: 40px 0 0 0;
}
main .recentlyadded .products .product, main .products .products-wrapper .product {
	display: block;
	overflow: hidden;
	text-decoration: none;
	width: 25%;
	padding-bottom: 60px;
}
main .recentlyadded .products .product img, main .products .products-wrapper .product img {
	transform: scale(1);
	transition: transform 1s;
}
main .recentlyadded .products .product .name, main .products .products-wrapper .product .name {
	display: block;
	color: #555555;
	padding: 20px 0 2px 0;
}
main .recentlyadded .products .product .price, main .products .products-wrapper .product .price {
	display: block;
	color: #999999;
}
main .recentlyadded .products .product .rrp, main .products .products-wrapper .product .rrp {
	color: #BBBBBB;
	text-decoration: line-through;
}
main .recentlyadded .products .product:hover img, main .products .products-wrapper .product:hover img {
	transform: scale(1.05);
	transition: transform 1s;
}
main .recentlyadded .products .product:hover .name, main .products .products-wrapper .product:hover .name {
	text-decoration: underline;
}
main > .product {
	display: flex;
	padding: 40px 0;
}
main > .product > div {
	padding-left: 15px;
}
main > .product h1 {
	font-size: 34px;
	font-weight: normal;
	margin: 0;
	padding: 20px 0 10px 0;
}
main > .product .price {
	display: block;
	font-size: 22px;
	color: #999999;
}
main > .product .rrp {
	color: #BBBBBB;
	text-decoration: line-through;
	font-size: 22px;
	padding-left: 5px;
}
main > .product form {
	display: flex;
	flex-flow: column;
	margin: 40px 0;
}
main > .product form input[type="number"] {
	width: 400px;
	padding: 10px;
	margin-bottom: 15px;
	border: 1px solid #ccc;
	color: #555555;
	border-radius: 5px;
}
main > .product form input[type="submit"] {
	background: #4e5c70;
	border: 0;
	color: #FFFFFF;
	width: 400px;
	padding: 12px 0;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: bold;
	border-radius: 5px;
	cursor: pointer;
}
main > .product form input[type="submit"]:hover {
	background: #434f61;
}
main > .products h1 {
	display: block;
	font-weight: normal;
	margin: 0;
	padding: 40px 0;
	font-size: 24px;
	text-align: center;
	width: 100%;
}
main > .products .buttons {
	text-align: right;
	padding-bottom: 40px;
}
main > .products .buttons a {
	display: inline-block;
	text-decoration: none;
	margin-left: 5px;
	padding: 12px 20px;
	border: 0;
	background: #4e5c70;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: bold;
	border-radius: 5px;
}
main > .products .buttons a:hover {
	background: #434f61;
}
main .cart h1 {
	display: block;
	font-weight: normal;
	margin: 0;
	padding: 40px 0;
	font-size: 24px;
	text-align: center;
	width: 100%;
}
main .cart table {
	width: 100%;
}
main .cart table thead td {
	padding: 30px 0;
	border-bottom: 1px solid #EEEEEE;
}
main .cart table thead td:last-child {
	text-align: right;
}
main .cart table tbody td {
	padding: 20px 0;
	border-bottom: 1px solid #EEEEEE;
}
main .cart table tbody td:last-child {
	text-align: right;
}
main .cart table .img {
	width: 80px;
}
main .cart table .remove {
	color: #777777;
	font-size: 12px;
	padding-top: 3px;
}
main .cart table .remove:hover {
	text-decoration: underline;
}
main .cart table .price {
	color: #999999;
}
main .cart table a {
	text-decoration: none;
	color: #555555;
}
main .cart table input[type="number"] {
	width: 68px;
	padding: 10px;
	border: 1px solid #ccc;
	color: #555555;
	border-radius: 5px;
}
main .cart .subtotal {
	text-align: right;
	padding: 40px 0;
}
main .cart .subtotal .text {
	padding-right: 40px;
	font-size: 18px;
}
main .cart .subtotal .price {
	font-size: 18px;
	color: #999999;
}
main .cart .buttons {
	text-align: right;
	padding-bottom: 40px;
}
main .cart .buttons input[type="submit"] {
	margin-left: 5px;
	padding: 12px 20px;
	border: 0;
	background: #4e5c70;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: bold;
	cursor: pointer;
	border-radius: 5px;
}
main .cart .buttons input[type="submit"]:hover {
	background: #434f61;
}
main .placeorder h1 {
	display: block;
	font-weight: normal;
	margin: 0;
	padding: 40px 0;
	font-size: 24px;
	text-align: center;
	width: 100%;
}
main .placeorder p {
	text-align: center;
}
footer {
	position: absolute;
	bottom: 0;
	border-top: 1px solid #EEEEEE;
	padding: 20px 0;
	width: 100%;
}
4

Đoạn mã trên sẽ lặp lại các sản phẩm trong giỏ hàng và cập nhật số lượng. Khách hàng sẽ có khả năng thay đổi số lượng trên trang giỏ hàng. Nút Cập nhật có tên cập nhật, vì đây là cách mã sẽ biết khi nào cần cập nhật số lượng bằng yêu cầu POST

9. 4. Xử lý đơn đặt hàng

Thêm vào sau

PHP Bản sao

* {
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
html {
	height: 100%;
}
body {
	position: relative;
	min-height: 100%;
	color: #555555;
	background-color: #FFFFFF;
	margin: 0;
	padding-bottom: 100px; /* Same height as footer */
}
h1, h2, h3, h4, h5 {
	color: #394352;
}
.content-wrapper {
	width: 1050px;
	margin: 0 auto;
}
header {
	border-bottom: 1px solid #EEEEEE;
}
header .content-wrapper {
	display: flex;
}
header h1 {
	display: flex;
	flex-grow: 1;
	flex-basis: 0;
	font-size: 20px;
	margin: 0;
	padding: 24px 0;
}
header nav {
	display: flex;
	flex-grow: 1;
	flex-basis: 0;
	justify-content: center;
	align-items: center;
}
header nav a {
	text-decoration: none;
	color: #555555;
	padding: 10px 10px;
	margin: 0 10px;
}
header nav a:hover {
	border-bottom: 1px solid #aaa;
}
header .link-icons {
	display: flex;
	flex-grow: 1;
	flex-basis: 0;
	justify-content: flex-end;
	align-items: center;
	position: relative;
}
header .link-icons a {
	text-decoration: none;
	color: #394352;
	padding: 0 10px;
}
header .link-icons a:hover {
	color: #4e5c70;
}
header .link-icons a i {
	font-size: 18px;
}
header .link-icons a span {
	display: inline-block;
	text-align: center;
	background-color: #63748e;
	border-radius: 50%;
	color: #FFFFFF;
	font-size: 12px;
	line-height: 16px;
	width: 16px;
	height: 16px;
	font-weight: bold;
	position: absolute;
	top: 22px;
	right: 0;
}
main .featured {
	display: flex;
	flex-direction: column;
	background-image: url(imgs/featured-image.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	height: 500px;
	align-items: center;
	justify-content: center;
	text-align: center;
}
main .featured h2 {
	display: inline-block;
	margin: 0;
	width: 1050px;
	font-family: Rockwell, Courier Bold, Courier, Georgia, Times, Times New Roman, serif;
	font-size: 68px;
	color: #FFFFFF;
	padding-bottom: 10px;
}
main .featured p {
	display: inline-block;
	margin: 0;
	width: 1050px;
	font-size: 24px;
	color: #FFFFFF;
}
main .recentlyadded h2 {
	display: block;
	font-weight: normal;
	margin: 0;
	padding: 40px 0;
	font-size: 24px;
	text-align: center;
	width: 100%;
	border-bottom: 1px solid #EEEEEE;
}
main .recentlyadded .products, main .products .products-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	padding: 40px 0 0 0;
}
main .recentlyadded .products .product, main .products .products-wrapper .product {
	display: block;
	overflow: hidden;
	text-decoration: none;
	width: 25%;
	padding-bottom: 60px;
}
main .recentlyadded .products .product img, main .products .products-wrapper .product img {
	transform: scale(1);
	transition: transform 1s;
}
main .recentlyadded .products .product .name, main .products .products-wrapper .product .name {
	display: block;
	color: #555555;
	padding: 20px 0 2px 0;
}
main .recentlyadded .products .product .price, main .products .products-wrapper .product .price {
	display: block;
	color: #999999;
}
main .recentlyadded .products .product .rrp, main .products .products-wrapper .product .rrp {
	color: #BBBBBB;
	text-decoration: line-through;
}
main .recentlyadded .products .product:hover img, main .products .products-wrapper .product:hover img {
	transform: scale(1.05);
	transition: transform 1s;
}
main .recentlyadded .products .product:hover .name, main .products .products-wrapper .product:hover .name {
	text-decoration: underline;
}
main > .product {
	display: flex;
	padding: 40px 0;
}
main > .product > div {
	padding-left: 15px;
}
main > .product h1 {
	font-size: 34px;
	font-weight: normal;
	margin: 0;
	padding: 20px 0 10px 0;
}
main > .product .price {
	display: block;
	font-size: 22px;
	color: #999999;
}
main > .product .rrp {
	color: #BBBBBB;
	text-decoration: line-through;
	font-size: 22px;
	padding-left: 5px;
}
main > .product form {
	display: flex;
	flex-flow: column;
	margin: 40px 0;
}
main > .product form input[type="number"] {
	width: 400px;
	padding: 10px;
	margin-bottom: 15px;
	border: 1px solid #ccc;
	color: #555555;
	border-radius: 5px;
}
main > .product form input[type="submit"] {
	background: #4e5c70;
	border: 0;
	color: #FFFFFF;
	width: 400px;
	padding: 12px 0;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: bold;
	border-radius: 5px;
	cursor: pointer;
}
main > .product form input[type="submit"]:hover {
	background: #434f61;
}
main > .products h1 {
	display: block;
	font-weight: normal;
	margin: 0;
	padding: 40px 0;
	font-size: 24px;
	text-align: center;
	width: 100%;
}
main > .products .buttons {
	text-align: right;
	padding-bottom: 40px;
}
main > .products .buttons a {
	display: inline-block;
	text-decoration: none;
	margin-left: 5px;
	padding: 12px 20px;
	border: 0;
	background: #4e5c70;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: bold;
	border-radius: 5px;
}
main > .products .buttons a:hover {
	background: #434f61;
}
main .cart h1 {
	display: block;
	font-weight: normal;
	margin: 0;
	padding: 40px 0;
	font-size: 24px;
	text-align: center;
	width: 100%;
}
main .cart table {
	width: 100%;
}
main .cart table thead td {
	padding: 30px 0;
	border-bottom: 1px solid #EEEEEE;
}
main .cart table thead td:last-child {
	text-align: right;
}
main .cart table tbody td {
	padding: 20px 0;
	border-bottom: 1px solid #EEEEEE;
}
main .cart table tbody td:last-child {
	text-align: right;
}
main .cart table .img {
	width: 80px;
}
main .cart table .remove {
	color: #777777;
	font-size: 12px;
	padding-top: 3px;
}
main .cart table .remove:hover {
	text-decoration: underline;
}
main .cart table .price {
	color: #999999;
}
main .cart table a {
	text-decoration: none;
	color: #555555;
}
main .cart table input[type="number"] {
	width: 68px;
	padding: 10px;
	border: 1px solid #ccc;
	color: #555555;
	border-radius: 5px;
}
main .cart .subtotal {
	text-align: right;
	padding: 40px 0;
}
main .cart .subtotal .text {
	padding-right: 40px;
	font-size: 18px;
}
main .cart .subtotal .price {
	font-size: 18px;
	color: #999999;
}
main .cart .buttons {
	text-align: right;
	padding-bottom: 40px;
}
main .cart .buttons input[type="submit"] {
	margin-left: 5px;
	padding: 12px 20px;
	border: 0;
	background: #4e5c70;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: bold;
	cursor: pointer;
	border-radius: 5px;
}
main .cart .buttons input[type="submit"]:hover {
	background: #434f61;
}
main .placeorder h1 {
	display: block;
	font-weight: normal;
	margin: 0;
	padding: 40px 0;
	font-size: 24px;
	text-align: center;
	width: 100%;
}
main .placeorder p {
	text-align: center;
}
footer {
	position: absolute;
	bottom: 0;
	border-top: 1px solid #EEEEEE;
	padding: 20px 0;
	width: 100%;
}
5

Điều này sẽ chuyển hướng người dùng đến trang đặt hàng nếu họ nhấp vào nút Đặt hàng

9. 5. Nhận sản phẩm trong giỏ hàng và chọn từ cơ sở dữ liệu

Thêm vào sau

PHP Bản sao

* {
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
html {
	height: 100%;
}
body {
	position: relative;
	min-height: 100%;
	color: #555555;
	background-color: #FFFFFF;
	margin: 0;
	padding-bottom: 100px; /* Same height as footer */
}
h1, h2, h3, h4, h5 {
	color: #394352;
}
.content-wrapper {
	width: 1050px;
	margin: 0 auto;
}
header {
	border-bottom: 1px solid #EEEEEE;
}
header .content-wrapper {
	display: flex;
}
header h1 {
	display: flex;
	flex-grow: 1;
	flex-basis: 0;
	font-size: 20px;
	margin: 0;
	padding: 24px 0;
}
header nav {
	display: flex;
	flex-grow: 1;
	flex-basis: 0;
	justify-content: center;
	align-items: center;
}
header nav a {
	text-decoration: none;
	color: #555555;
	padding: 10px 10px;
	margin: 0 10px;
}
header nav a:hover {
	border-bottom: 1px solid #aaa;
}
header .link-icons {
	display: flex;
	flex-grow: 1;
	flex-basis: 0;
	justify-content: flex-end;
	align-items: center;
	position: relative;
}
header .link-icons a {
	text-decoration: none;
	color: #394352;
	padding: 0 10px;
}
header .link-icons a:hover {
	color: #4e5c70;
}
header .link-icons a i {
	font-size: 18px;
}
header .link-icons a span {
	display: inline-block;
	text-align: center;
	background-color: #63748e;
	border-radius: 50%;
	color: #FFFFFF;
	font-size: 12px;
	line-height: 16px;
	width: 16px;
	height: 16px;
	font-weight: bold;
	position: absolute;
	top: 22px;
	right: 0;
}
main .featured {
	display: flex;
	flex-direction: column;
	background-image: url(imgs/featured-image.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	height: 500px;
	align-items: center;
	justify-content: center;
	text-align: center;
}
main .featured h2 {
	display: inline-block;
	margin: 0;
	width: 1050px;
	font-family: Rockwell, Courier Bold, Courier, Georgia, Times, Times New Roman, serif;
	font-size: 68px;
	color: #FFFFFF;
	padding-bottom: 10px;
}
main .featured p {
	display: inline-block;
	margin: 0;
	width: 1050px;
	font-size: 24px;
	color: #FFFFFF;
}
main .recentlyadded h2 {
	display: block;
	font-weight: normal;
	margin: 0;
	padding: 40px 0;
	font-size: 24px;
	text-align: center;
	width: 100%;
	border-bottom: 1px solid #EEEEEE;
}
main .recentlyadded .products, main .products .products-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	padding: 40px 0 0 0;
}
main .recentlyadded .products .product, main .products .products-wrapper .product {
	display: block;
	overflow: hidden;
	text-decoration: none;
	width: 25%;
	padding-bottom: 60px;
}
main .recentlyadded .products .product img, main .products .products-wrapper .product img {
	transform: scale(1);
	transition: transform 1s;
}
main .recentlyadded .products .product .name, main .products .products-wrapper .product .name {
	display: block;
	color: #555555;
	padding: 20px 0 2px 0;
}
main .recentlyadded .products .product .price, main .products .products-wrapper .product .price {
	display: block;
	color: #999999;
}
main .recentlyadded .products .product .rrp, main .products .products-wrapper .product .rrp {
	color: #BBBBBB;
	text-decoration: line-through;
}
main .recentlyadded .products .product:hover img, main .products .products-wrapper .product:hover img {
	transform: scale(1.05);
	transition: transform 1s;
}
main .recentlyadded .products .product:hover .name, main .products .products-wrapper .product:hover .name {
	text-decoration: underline;
}
main > .product {
	display: flex;
	padding: 40px 0;
}
main > .product > div {
	padding-left: 15px;
}
main > .product h1 {
	font-size: 34px;
	font-weight: normal;
	margin: 0;
	padding: 20px 0 10px 0;
}
main > .product .price {
	display: block;
	font-size: 22px;
	color: #999999;
}
main > .product .rrp {
	color: #BBBBBB;
	text-decoration: line-through;
	font-size: 22px;
	padding-left: 5px;
}
main > .product form {
	display: flex;
	flex-flow: column;
	margin: 40px 0;
}
main > .product form input[type="number"] {
	width: 400px;
	padding: 10px;
	margin-bottom: 15px;
	border: 1px solid #ccc;
	color: #555555;
	border-radius: 5px;
}
main > .product form input[type="submit"] {
	background: #4e5c70;
	border: 0;
	color: #FFFFFF;
	width: 400px;
	padding: 12px 0;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: bold;
	border-radius: 5px;
	cursor: pointer;
}
main > .product form input[type="submit"]:hover {
	background: #434f61;
}
main > .products h1 {
	display: block;
	font-weight: normal;
	margin: 0;
	padding: 40px 0;
	font-size: 24px;
	text-align: center;
	width: 100%;
}
main > .products .buttons {
	text-align: right;
	padding-bottom: 40px;
}
main > .products .buttons a {
	display: inline-block;
	text-decoration: none;
	margin-left: 5px;
	padding: 12px 20px;
	border: 0;
	background: #4e5c70;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: bold;
	border-radius: 5px;
}
main > .products .buttons a:hover {
	background: #434f61;
}
main .cart h1 {
	display: block;
	font-weight: normal;
	margin: 0;
	padding: 40px 0;
	font-size: 24px;
	text-align: center;
	width: 100%;
}
main .cart table {
	width: 100%;
}
main .cart table thead td {
	padding: 30px 0;
	border-bottom: 1px solid #EEEEEE;
}
main .cart table thead td:last-child {
	text-align: right;
}
main .cart table tbody td {
	padding: 20px 0;
	border-bottom: 1px solid #EEEEEE;
}
main .cart table tbody td:last-child {
	text-align: right;
}
main .cart table .img {
	width: 80px;
}
main .cart table .remove {
	color: #777777;
	font-size: 12px;
	padding-top: 3px;
}
main .cart table .remove:hover {
	text-decoration: underline;
}
main .cart table .price {
	color: #999999;
}
main .cart table a {
	text-decoration: none;
	color: #555555;
}
main .cart table input[type="number"] {
	width: 68px;
	padding: 10px;
	border: 1px solid #ccc;
	color: #555555;
	border-radius: 5px;
}
main .cart .subtotal {
	text-align: right;
	padding: 40px 0;
}
main .cart .subtotal .text {
	padding-right: 40px;
	font-size: 18px;
}
main .cart .subtotal .price {
	font-size: 18px;
	color: #999999;
}
main .cart .buttons {
	text-align: right;
	padding-bottom: 40px;
}
main .cart .buttons input[type="submit"] {
	margin-left: 5px;
	padding: 12px 20px;
	border: 0;
	background: #4e5c70;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: bold;
	cursor: pointer;
	border-radius: 5px;
}
main .cart .buttons input[type="submit"]:hover {
	background: #434f61;
}
main .placeorder h1 {
	display: block;
	font-weight: normal;
	margin: 0;
	padding: 40px 0;
	font-size: 24px;
	text-align: center;
	width: 100%;
}
main .placeorder p {
	text-align: center;
}
footer {
	position: absolute;
	bottom: 0;
	border-top: 1px solid #EEEEEE;
	padding: 20px 0;
	width: 100%;
}
6

Nếu có sản phẩm trong giỏ hàng, hãy truy xuất những sản phẩm đó từ bảng sản phẩm của chúng tôi, cùng với tên cột sau. tên sản phẩm, mô tả, hình ảnh và giá, như trước đây chúng tôi không lưu trữ thông tin này trong biến phiên của chúng tôi

Chúng tôi cũng tính tổng phụ bằng cách lặp lại các sản phẩm và nhân giá với số lượng

9. 6. Tạo mẫu giỏ hàng

Thêm bên dưới thẻ đóng PHP

PHP Bản sao

* {
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
html {
	height: 100%;
}
body {
	position: relative;
	min-height: 100%;
	color: #555555;
	background-color: #FFFFFF;
	margin: 0;
	padding-bottom: 100px; /* Same height as footer */
}
h1, h2, h3, h4, h5 {
	color: #394352;
}
.content-wrapper {
	width: 1050px;
	margin: 0 auto;
}
header {
	border-bottom: 1px solid #EEEEEE;
}
header .content-wrapper {
	display: flex;
}
header h1 {
	display: flex;
	flex-grow: 1;
	flex-basis: 0;
	font-size: 20px;
	margin: 0;
	padding: 24px 0;
}
header nav {
	display: flex;
	flex-grow: 1;
	flex-basis: 0;
	justify-content: center;
	align-items: center;
}
header nav a {
	text-decoration: none;
	color: #555555;
	padding: 10px 10px;
	margin: 0 10px;
}
header nav a:hover {
	border-bottom: 1px solid #aaa;
}
header .link-icons {
	display: flex;
	flex-grow: 1;
	flex-basis: 0;
	justify-content: flex-end;
	align-items: center;
	position: relative;
}
header .link-icons a {
	text-decoration: none;
	color: #394352;
	padding: 0 10px;
}
header .link-icons a:hover {
	color: #4e5c70;
}
header .link-icons a i {
	font-size: 18px;
}
header .link-icons a span {
	display: inline-block;
	text-align: center;
	background-color: #63748e;
	border-radius: 50%;
	color: #FFFFFF;
	font-size: 12px;
	line-height: 16px;
	width: 16px;
	height: 16px;
	font-weight: bold;
	position: absolute;
	top: 22px;
	right: 0;
}
main .featured {
	display: flex;
	flex-direction: column;
	background-image: url(imgs/featured-image.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	height: 500px;
	align-items: center;
	justify-content: center;
	text-align: center;
}
main .featured h2 {
	display: inline-block;
	margin: 0;
	width: 1050px;
	font-family: Rockwell, Courier Bold, Courier, Georgia, Times, Times New Roman, serif;
	font-size: 68px;
	color: #FFFFFF;
	padding-bottom: 10px;
}
main .featured p {
	display: inline-block;
	margin: 0;
	width: 1050px;
	font-size: 24px;
	color: #FFFFFF;
}
main .recentlyadded h2 {
	display: block;
	font-weight: normal;
	margin: 0;
	padding: 40px 0;
	font-size: 24px;
	text-align: center;
	width: 100%;
	border-bottom: 1px solid #EEEEEE;
}
main .recentlyadded .products, main .products .products-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	padding: 40px 0 0 0;
}
main .recentlyadded .products .product, main .products .products-wrapper .product {
	display: block;
	overflow: hidden;
	text-decoration: none;
	width: 25%;
	padding-bottom: 60px;
}
main .recentlyadded .products .product img, main .products .products-wrapper .product img {
	transform: scale(1);
	transition: transform 1s;
}
main .recentlyadded .products .product .name, main .products .products-wrapper .product .name {
	display: block;
	color: #555555;
	padding: 20px 0 2px 0;
}
main .recentlyadded .products .product .price, main .products .products-wrapper .product .price {
	display: block;
	color: #999999;
}
main .recentlyadded .products .product .rrp, main .products .products-wrapper .product .rrp {
	color: #BBBBBB;
	text-decoration: line-through;
}
main .recentlyadded .products .product:hover img, main .products .products-wrapper .product:hover img {
	transform: scale(1.05);
	transition: transform 1s;
}
main .recentlyadded .products .product:hover .name, main .products .products-wrapper .product:hover .name {
	text-decoration: underline;
}
main > .product {
	display: flex;
	padding: 40px 0;
}
main > .product > div {
	padding-left: 15px;
}
main > .product h1 {
	font-size: 34px;
	font-weight: normal;
	margin: 0;
	padding: 20px 0 10px 0;
}
main > .product .price {
	display: block;
	font-size: 22px;
	color: #999999;
}
main > .product .rrp {
	color: #BBBBBB;
	text-decoration: line-through;
	font-size: 22px;
	padding-left: 5px;
}
main > .product form {
	display: flex;
	flex-flow: column;
	margin: 40px 0;
}
main > .product form input[type="number"] {
	width: 400px;
	padding: 10px;
	margin-bottom: 15px;
	border: 1px solid #ccc;
	color: #555555;
	border-radius: 5px;
}
main > .product form input[type="submit"] {
	background: #4e5c70;
	border: 0;
	color: #FFFFFF;
	width: 400px;
	padding: 12px 0;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: bold;
	border-radius: 5px;
	cursor: pointer;
}
main > .product form input[type="submit"]:hover {
	background: #434f61;
}
main > .products h1 {
	display: block;
	font-weight: normal;
	margin: 0;
	padding: 40px 0;
	font-size: 24px;
	text-align: center;
	width: 100%;
}
main > .products .buttons {
	text-align: right;
	padding-bottom: 40px;
}
main > .products .buttons a {
	display: inline-block;
	text-decoration: none;
	margin-left: 5px;
	padding: 12px 20px;
	border: 0;
	background: #4e5c70;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: bold;
	border-radius: 5px;
}
main > .products .buttons a:hover {
	background: #434f61;
}
main .cart h1 {
	display: block;
	font-weight: normal;
	margin: 0;
	padding: 40px 0;
	font-size: 24px;
	text-align: center;
	width: 100%;
}
main .cart table {
	width: 100%;
}
main .cart table thead td {
	padding: 30px 0;
	border-bottom: 1px solid #EEEEEE;
}
main .cart table thead td:last-child {
	text-align: right;
}
main .cart table tbody td {
	padding: 20px 0;
	border-bottom: 1px solid #EEEEEE;
}
main .cart table tbody td:last-child {
	text-align: right;
}
main .cart table .img {
	width: 80px;
}
main .cart table .remove {
	color: #777777;
	font-size: 12px;
	padding-top: 3px;
}
main .cart table .remove:hover {
	text-decoration: underline;
}
main .cart table .price {
	color: #999999;
}
main .cart table a {
	text-decoration: none;
	color: #555555;
}
main .cart table input[type="number"] {
	width: 68px;
	padding: 10px;
	border: 1px solid #ccc;
	color: #555555;
	border-radius: 5px;
}
main .cart .subtotal {
	text-align: right;
	padding: 40px 0;
}
main .cart .subtotal .text {
	padding-right: 40px;
	font-size: 18px;
}
main .cart .subtotal .price {
	font-size: 18px;
	color: #999999;
}
main .cart .buttons {
	text-align: right;
	padding-bottom: 40px;
}
main .cart .buttons input[type="submit"] {
	margin-left: 5px;
	padding: 12px 20px;
	border: 0;
	background: #4e5c70;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: bold;
	cursor: pointer;
	border-radius: 5px;
}
main .cart .buttons input[type="submit"]:hover {
	background: #434f61;
}
main .placeorder h1 {
	display: block;
	font-weight: normal;
	margin: 0;
	padding: 40px 0;
	font-size: 24px;
	text-align: center;
	width: 100%;
}
main .placeorder p {
	text-align: center;
}
footer {
	position: absolute;
	bottom: 0;
	border-top: 1px solid #EEEEEE;
	padding: 20px 0;
	width: 100%;
}
7

Đó là tất cả những gì chúng ta cần làm cho trang giỏ hàng. Giờ đây, khách hàng có thể xóa sản phẩm và cập nhật số lượng

Nếu bạn thêm một vài sản phẩm vào giỏ hàng và điều hướng đến http. // localhost/giỏ hàng/chỉ mục. php?page=cart, nó sẽ giống như sau

http. // localhost/giỏ hàng/chỉ mục. php?page=giỏ hàng

Làm cách nào để thêm số lượng sản phẩm trong php?

Để hiển thị số lượng trong tiêu đề, bạn cần chỉnh sửa các chức năng. php và thêm phần sau vào chức năng tiêu đề mẫu

PHP Bản sao

* {
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
html {
	height: 100%;
}
body {
	position: relative;
	min-height: 100%;
	color: #555555;
	background-color: #FFFFFF;
	margin: 0;
	padding-bottom: 100px; /* Same height as footer */
}
h1, h2, h3, h4, h5 {
	color: #394352;
}
.content-wrapper {
	width: 1050px;
	margin: 0 auto;
}
header {
	border-bottom: 1px solid #EEEEEE;
}
header .content-wrapper {
	display: flex;
}
header h1 {
	display: flex;
	flex-grow: 1;
	flex-basis: 0;
	font-size: 20px;
	margin: 0;
	padding: 24px 0;
}
header nav {
	display: flex;
	flex-grow: 1;
	flex-basis: 0;
	justify-content: center;
	align-items: center;
}
header nav a {
	text-decoration: none;
	color: #555555;
	padding: 10px 10px;
	margin: 0 10px;
}
header nav a:hover {
	border-bottom: 1px solid #aaa;
}
header .link-icons {
	display: flex;
	flex-grow: 1;
	flex-basis: 0;
	justify-content: flex-end;
	align-items: center;
	position: relative;
}
header .link-icons a {
	text-decoration: none;
	color: #394352;
	padding: 0 10px;
}
header .link-icons a:hover {
	color: #4e5c70;
}
header .link-icons a i {
	font-size: 18px;
}
header .link-icons a span {
	display: inline-block;
	text-align: center;
	background-color: #63748e;
	border-radius: 50%;
	color: #FFFFFF;
	font-size: 12px;
	line-height: 16px;
	width: 16px;
	height: 16px;
	font-weight: bold;
	position: absolute;
	top: 22px;
	right: 0;
}
main .featured {
	display: flex;
	flex-direction: column;
	background-image: url(imgs/featured-image.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	height: 500px;
	align-items: center;
	justify-content: center;
	text-align: center;
}
main .featured h2 {
	display: inline-block;
	margin: 0;
	width: 1050px;
	font-family: Rockwell, Courier Bold, Courier, Georgia, Times, Times New Roman, serif;
	font-size: 68px;
	color: #FFFFFF;
	padding-bottom: 10px;
}
main .featured p {
	display: inline-block;
	margin: 0;
	width: 1050px;
	font-size: 24px;
	color: #FFFFFF;
}
main .recentlyadded h2 {
	display: block;
	font-weight: normal;
	margin: 0;
	padding: 40px 0;
	font-size: 24px;
	text-align: center;
	width: 100%;
	border-bottom: 1px solid #EEEEEE;
}
main .recentlyadded .products, main .products .products-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	padding: 40px 0 0 0;
}
main .recentlyadded .products .product, main .products .products-wrapper .product {
	display: block;
	overflow: hidden;
	text-decoration: none;
	width: 25%;
	padding-bottom: 60px;
}
main .recentlyadded .products .product img, main .products .products-wrapper .product img {
	transform: scale(1);
	transition: transform 1s;
}
main .recentlyadded .products .product .name, main .products .products-wrapper .product .name {
	display: block;
	color: #555555;
	padding: 20px 0 2px 0;
}
main .recentlyadded .products .product .price, main .products .products-wrapper .product .price {
	display: block;
	color: #999999;
}
main .recentlyadded .products .product .rrp, main .products .products-wrapper .product .rrp {
	color: #BBBBBB;
	text-decoration: line-through;
}
main .recentlyadded .products .product:hover img, main .products .products-wrapper .product:hover img {
	transform: scale(1.05);
	transition: transform 1s;
}
main .recentlyadded .products .product:hover .name, main .products .products-wrapper .product:hover .name {
	text-decoration: underline;
}
main > .product {
	display: flex;
	padding: 40px 0;
}
main > .product > div {
	padding-left: 15px;
}
main > .product h1 {
	font-size: 34px;
	font-weight: normal;
	margin: 0;
	padding: 20px 0 10px 0;
}
main > .product .price {
	display: block;
	font-size: 22px;
	color: #999999;
}
main > .product .rrp {
	color: #BBBBBB;
	text-decoration: line-through;
	font-size: 22px;
	padding-left: 5px;
}
main > .product form {
	display: flex;
	flex-flow: column;
	margin: 40px 0;
}
main > .product form input[type="number"] {
	width: 400px;
	padding: 10px;
	margin-bottom: 15px;
	border: 1px solid #ccc;
	color: #555555;
	border-radius: 5px;
}
main > .product form input[type="submit"] {
	background: #4e5c70;
	border: 0;
	color: #FFFFFF;
	width: 400px;
	padding: 12px 0;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: bold;
	border-radius: 5px;
	cursor: pointer;
}
main > .product form input[type="submit"]:hover {
	background: #434f61;
}
main > .products h1 {
	display: block;
	font-weight: normal;
	margin: 0;
	padding: 40px 0;
	font-size: 24px;
	text-align: center;
	width: 100%;
}
main > .products .buttons {
	text-align: right;
	padding-bottom: 40px;
}
main > .products .buttons a {
	display: inline-block;
	text-decoration: none;
	margin-left: 5px;
	padding: 12px 20px;
	border: 0;
	background: #4e5c70;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: bold;
	border-radius: 5px;
}
main > .products .buttons a:hover {
	background: #434f61;
}
main .cart h1 {
	display: block;
	font-weight: normal;
	margin: 0;
	padding: 40px 0;
	font-size: 24px;
	text-align: center;
	width: 100%;
}
main .cart table {
	width: 100%;
}
main .cart table thead td {
	padding: 30px 0;
	border-bottom: 1px solid #EEEEEE;
}
main .cart table thead td:last-child {
	text-align: right;
}
main .cart table tbody td {
	padding: 20px 0;
	border-bottom: 1px solid #EEEEEE;
}
main .cart table tbody td:last-child {
	text-align: right;
}
main .cart table .img {
	width: 80px;
}
main .cart table .remove {
	color: #777777;
	font-size: 12px;
	padding-top: 3px;
}
main .cart table .remove:hover {
	text-decoration: underline;
}
main .cart table .price {
	color: #999999;
}
main .cart table a {
	text-decoration: none;
	color: #555555;
}
main .cart table input[type="number"] {
	width: 68px;
	padding: 10px;
	border: 1px solid #ccc;
	color: #555555;
	border-radius: 5px;
}
main .cart .subtotal {
	text-align: right;
	padding: 40px 0;
}
main .cart .subtotal .text {
	padding-right: 40px;
	font-size: 18px;
}
main .cart .subtotal .price {
	font-size: 18px;
	color: #999999;
}
main .cart .buttons {
	text-align: right;
	padding-bottom: 40px;
}
main .cart .buttons input[type="submit"] {
	margin-left: 5px;
	padding: 12px 20px;
	border: 0;
	background: #4e5c70;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: bold;
	cursor: pointer;
	border-radius: 5px;
}
main .cart .buttons input[type="submit"]:hover {
	background: #434f61;
}
main .placeorder h1 {
	display: block;
	font-weight: normal;
	margin: 0;
	padding: 40px 0;
	font-size: 24px;
	text-align: center;
	width: 100%;
}
main .placeorder p {
	text-align: center;
}
footer {
	position: absolute;
	bottom: 0;
	border-top: 1px solid #EEEEEE;
	padding: 20px 0;
	width: 100%;
}
8

Tìm thấy

* {
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
html {
	height: 100%;
}
body {
	position: relative;
	min-height: 100%;
	color: #555555;
	background-color: #FFFFFF;
	margin: 0;
	padding-bottom: 100px; /* Same height as footer */
}
h1, h2, h3, h4, h5 {
	color: #394352;
}
.content-wrapper {
	width: 1050px;
	margin: 0 auto;
}
header {
	border-bottom: 1px solid #EEEEEE;
}
header .content-wrapper {
	display: flex;
}
header h1 {
	display: flex;
	flex-grow: 1;
	flex-basis: 0;
	font-size: 20px;
	margin: 0;
	padding: 24px 0;
}
header nav {
	display: flex;
	flex-grow: 1;
	flex-basis: 0;
	justify-content: center;
	align-items: center;
}
header nav a {
	text-decoration: none;
	color: #555555;
	padding: 10px 10px;
	margin: 0 10px;
}
header nav a:hover {
	border-bottom: 1px solid #aaa;
}
header .link-icons {
	display: flex;
	flex-grow: 1;
	flex-basis: 0;
	justify-content: flex-end;
	align-items: center;
	position: relative;
}
header .link-icons a {
	text-decoration: none;
	color: #394352;
	padding: 0 10px;
}
header .link-icons a:hover {
	color: #4e5c70;
}
header .link-icons a i {
	font-size: 18px;
}
header .link-icons a span {
	display: inline-block;
	text-align: center;
	background-color: #63748e;
	border-radius: 50%;
	color: #FFFFFF;
	font-size: 12px;
	line-height: 16px;
	width: 16px;
	height: 16px;
	font-weight: bold;
	position: absolute;
	top: 22px;
	right: 0;
}
main .featured {
	display: flex;
	flex-direction: column;
	background-image: url(imgs/featured-image.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	height: 500px;
	align-items: center;
	justify-content: center;
	text-align: center;
}
main .featured h2 {
	display: inline-block;
	margin: 0;
	width: 1050px;
	font-family: Rockwell, Courier Bold, Courier, Georgia, Times, Times New Roman, serif;
	font-size: 68px;
	color: #FFFFFF;
	padding-bottom: 10px;
}
main .featured p {
	display: inline-block;
	margin: 0;
	width: 1050px;
	font-size: 24px;
	color: #FFFFFF;
}
main .recentlyadded h2 {
	display: block;
	font-weight: normal;
	margin: 0;
	padding: 40px 0;
	font-size: 24px;
	text-align: center;
	width: 100%;
	border-bottom: 1px solid #EEEEEE;
}
main .recentlyadded .products, main .products .products-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	padding: 40px 0 0 0;
}
main .recentlyadded .products .product, main .products .products-wrapper .product {
	display: block;
	overflow: hidden;
	text-decoration: none;
	width: 25%;
	padding-bottom: 60px;
}
main .recentlyadded .products .product img, main .products .products-wrapper .product img {
	transform: scale(1);
	transition: transform 1s;
}
main .recentlyadded .products .product .name, main .products .products-wrapper .product .name {
	display: block;
	color: #555555;
	padding: 20px 0 2px 0;
}
main .recentlyadded .products .product .price, main .products .products-wrapper .product .price {
	display: block;
	color: #999999;
}
main .recentlyadded .products .product .rrp, main .products .products-wrapper .product .rrp {
	color: #BBBBBB;
	text-decoration: line-through;
}
main .recentlyadded .products .product:hover img, main .products .products-wrapper .product:hover img {
	transform: scale(1.05);
	transition: transform 1s;
}
main .recentlyadded .products .product:hover .name, main .products .products-wrapper .product:hover .name {
	text-decoration: underline;
}
main > .product {
	display: flex;
	padding: 40px 0;
}
main > .product > div {
	padding-left: 15px;
}
main > .product h1 {
	font-size: 34px;
	font-weight: normal;
	margin: 0;
	padding: 20px 0 10px 0;
}
main > .product .price {
	display: block;
	font-size: 22px;
	color: #999999;
}
main > .product .rrp {
	color: #BBBBBB;
	text-decoration: line-through;
	font-size: 22px;
	padding-left: 5px;
}
main > .product form {
	display: flex;
	flex-flow: column;
	margin: 40px 0;
}
main > .product form input[type="number"] {
	width: 400px;
	padding: 10px;
	margin-bottom: 15px;
	border: 1px solid #ccc;
	color: #555555;
	border-radius: 5px;
}
main > .product form input[type="submit"] {
	background: #4e5c70;
	border: 0;
	color: #FFFFFF;
	width: 400px;
	padding: 12px 0;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: bold;
	border-radius: 5px;
	cursor: pointer;
}
main > .product form input[type="submit"]:hover {
	background: #434f61;
}
main > .products h1 {
	display: block;
	font-weight: normal;
	margin: 0;
	padding: 40px 0;
	font-size: 24px;
	text-align: center;
	width: 100%;
}
main > .products .buttons {
	text-align: right;
	padding-bottom: 40px;
}
main > .products .buttons a {
	display: inline-block;
	text-decoration: none;
	margin-left: 5px;
	padding: 12px 20px;
	border: 0;
	background: #4e5c70;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: bold;
	border-radius: 5px;
}
main > .products .buttons a:hover {
	background: #434f61;
}
main .cart h1 {
	display: block;
	font-weight: normal;
	margin: 0;
	padding: 40px 0;
	font-size: 24px;
	text-align: center;
	width: 100%;
}
main .cart table {
	width: 100%;
}
main .cart table thead td {
	padding: 30px 0;
	border-bottom: 1px solid #EEEEEE;
}
main .cart table thead td:last-child {
	text-align: right;
}
main .cart table tbody td {
	padding: 20px 0;
	border-bottom: 1px solid #EEEEEE;
}
main .cart table tbody td:last-child {
	text-align: right;
}
main .cart table .img {
	width: 80px;
}
main .cart table .remove {
	color: #777777;
	font-size: 12px;
	padding-top: 3px;
}
main .cart table .remove:hover {
	text-decoration: underline;
}
main .cart table .price {
	color: #999999;
}
main .cart table a {
	text-decoration: none;
	color: #555555;
}
main .cart table input[type="number"] {
	width: 68px;
	padding: 10px;
	border: 1px solid #ccc;
	color: #555555;
	border-radius: 5px;
}
main .cart .subtotal {
	text-align: right;
	padding: 40px 0;
}
main .cart .subtotal .text {
	padding-right: 40px;
	font-size: 18px;
}
main .cart .subtotal .price {
	font-size: 18px;
	color: #999999;
}
main .cart .buttons {
	text-align: right;
	padding-bottom: 40px;
}
main .cart .buttons input[type="submit"] {
	margin-left: 5px;
	padding: 12px 20px;
	border: 0;
	background: #4e5c70;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: bold;
	cursor: pointer;
	border-radius: 5px;
}
main .cart .buttons input[type="submit"]:hover {
	background: #434f61;
}
main .placeorder h1 {
	display: block;
	font-weight: normal;
	margin: 0;
	padding: 40px 0;
	font-size: 24px;
	text-align: center;
	width: 100%;
}
main .placeorder p {
	text-align: center;
}
footer {
	position: absolute;
	bottom: 0;
	border-top: 1px solid #EEEEEE;
	padding: 20px 0;
	width: 100%;
}
9

Thêm vào sau

PHP Bản sao



	
		
		$title
		
		
	
	
        

            

                
Shopping Cart System

                
                

                    
						
					
                

            

        

        

EOT;
}
// Template footer
function template_footer() {
$year = date('Y');
echo <<
        

            

                
© $year, Shopping Cart System

            

        

    

EOT;
}
?>
0

Và bây giờ khách hàng sẽ luôn biết họ có bao nhiêu sản phẩm trong giỏ hàng của mình, vì điều này sẽ xuất hiện trên mọi trang

Làm cách nào để thêm số lượng sản phẩm trong php?

10. Tạo trang đặt hàng

Trang này sẽ cho khách hàng biết rằng họ đã đặt hàng. Khách hàng phải có sản phẩm trong giỏ hàng và đã nhấp vào nút Đặt hàng trên trang giỏ hàng

10. 1. Tạo mẫu đặt hàng địa điểm

Chỉnh sửa đơn đặt hàng. php và thêm vào như sau

PHP Bản sao



	
		
		$title
		
		
	
	
        

            

                
Shopping Cart System

                
                

                    
						
					
                

            

        

        

EOT;
}
// Template footer
function template_footer() {
$year = date('Y');
echo <<
        

            

                
© $year, Shopping Cart System

            

        

    

EOT;
}
?>
1

Và bây giờ nếu chúng tôi thêm một sản phẩm vào giỏ hàng của mình và nhấp vào nút Đặt hàng, chúng tôi sẽ thấy như sau

http. //máy chủ cục bộ/chỉ mục. php?page=placeorder

Làm cách nào để thêm số lượng sản phẩm trong php?

Vui lòng thay đổi thông báo đặt hàng, v.v.

Sự kết luận

Xin chúc mừng. Bạn đã tạo thành công hệ thống giỏ hàng với PHP và MySQL. Tiếp theo là gì? . PayPal cung cấp API của riêng họ cho các nhà phát triển mà bạn có thể tận dụng. Ngoài ra, hãy xem hướng dẫn Cách tích hợp PayPal với PHP và MySQL của chúng tôi

Hãy nhớ rằng đây chỉ là hệ thống giỏ hàng cơ bản để bạn làm việc, do đó tôi không khuyên bạn nên triển khai hệ thống cho sản xuất cho đến khi bạn đã thực hiện một số lượng thay đổi và bổ sung hợp lý. Tôi khuyên bạn nên thêm xử lý lỗi, phương thức thanh toán và xác thực của riêng mình

Nếu bạn thích hướng dẫn này, đừng quên nhấn nút chia sẻ và để lại nhận xét vì nó sẽ giúp chúng tôi tạo ra nhiều nội dung hơn trong tương lai

Nếu bạn muốn hỗ trợ chúng tôi, hãy xem xét việc mua hệ thống giỏ mua hàng nâng cao bên dưới vì nó sẽ giúp chúng tôi tạo ra nhiều hướng dẫn hơn và duy trì hoạt động của trang web của chúng tôi. Gói nâng cao bao gồm mã cải tiến và nhiều tính năng hơn

Nâng cao

$ 35. 00

xem thêm chi tiết

Mã nguồn

Tệp SQL cơ sở dữ liệu

Trang giỏ hàng

Trang Sản phẩm & Sản phẩm

Trang đặt hàng

Trang thanh toán

Trang tài khoản của tôi

Cập nhật tính năng số lượng

Tính năng tạo tài khoản

Tính năng giao dịch

Tích hợp PayPal

Tích hợp sọc

Tích hợp thương mại Coinbase

bảng quản trị

Tùy chọn sản phẩm, danh mục, hình ảnh & giảm giá

Tải xuống kỹ thuật số

Tính năng vận chuyển

Tính năng tìm kiếm & sắp xếp

Tính năng giỏ hàng trống

Thiết kế đáp ứng (thân thiện với thiết bị di động)

Tệp SCSS

Mã nhận xét

Cập nhật và hỗ trợ miễn phí

Hướng dẫn sử dụng

Thêm. Mã nguồn hướng dẫn

Thêm. Mã nguồn cơ bản

PayPal Tải xuống Stripe Tải xuống CryptoDownload

Doanh thu

Gói (Tiết kiệm 53%)

$ 119. 00

255. 00

xem thêm chi tiết

Hệ thống đăng nhập và đăng ký an toàn

Hệ thống giỏ hàng

Ứng dụng CRUD

Hệ thống bán vé

Hệ thống thư viện

Hệ thống lịch sự kiện

Hệ thống thăm dò ý kiến ​​và bỏ phiếu

Hệ thống bình luận

Đánh giá hệ thống

Mâu liên hệ

Hệ thống trò chuyện hỗ trợ trực tiếp

Bản tin & Hệ thống gửi thư

Truy cập vào các tập lệnh trong tương lai

PayPal Tải xuống Stripe Tải xuống CryptoDownload

về tác giả

Làm cách nào để thêm số lượng sản phẩm trong php?

David Adams

Nhà phát triển trang web nhiệt tình, tôi đã thiết kế và phát triển các ứng dụng web trong hơn 10 năm, tôi tận hưởng sự sáng tạo mà tôi đưa vào các dự án của mình và tận hưởng những gì người khác mang đến cho trang web tuyệt vời. Mục tiêu của tôi là giúp những người mới tìm hiểu cách sử dụng web

programming php

Bài Viết Liên Quan

Ý nghĩa của header from top là gì năm 2024
Ý nghĩa của header from top là gì năm 2024

mẹo hay Hỏi Đáp Là gì Top List Top Header la gì Footer la gì
Tự học tiếng anh như thế nào hiệu quả năm 2024
Tự học tiếng anh như thế nào hiệu quả năm 2024

mẹo hay Hỏi Đáp Thế nào Học Tốt Học Tiếng anh Học tiếng Anh
Cơ thể con người năm hiến máu bao nhiêu lần năm 2024
Cơ thể con người năm hiến máu bao nhiêu lần năm 2024

bao nhieu Hỏi Đáp Bao nhiêu Khỏe Đẹp Cơ thể
Tuổi đinh mão xây nhà năm nào tốt năm 2024
Tuổi đinh mão xây nhà năm nào tốt năm 2024

mẹo hay Xây Đựng Xây Nhà
Khoán chi đến sản phẩm cuối cùng là gì năm 2024
Khoán chi đến sản phẩm cuối cùng là gì năm 2024

là ai Hỏi Đáp Là gì
Các yếu tố cấu thành văn hóa tổ chức năm 2024
Các yếu tố cấu thành văn hóa tổ chức năm 2024

mẹo hay
Thế nào là số vô tỉ cho ví dụ năm 2024
Thế nào là số vô tỉ cho ví dụ năm 2024

mẹo hay Hỏi Đáp Thế nào Ví dụ
Quà trung thu tiếng anh là gì năm 2024
Quà trung thu tiếng anh là gì năm 2024

là ai Hỏi Đáp Là gì Học Tốt Tiếng anh Mid-Autumn gift
Đẻ mổ tối đa được bao nhiêu lần năm 2024
Đẻ mổ tối đa được bao nhiêu lần năm 2024

bao nhieu Hỏi Đáp Bao nhiêu
Thiết kế quán trà sữa bao nhiêu tiền năm 2024
Thiết kế quán trà sữa bao nhiêu tiền năm 2024

bao nhieu Hỏi Đáp Bao nhiêu Món Ngon Trà sữa
Top nước hoa hồng se khít lỗ chân lông năm 2024
Top nước hoa hồng se khít lỗ chân lông năm 2024

mẹo hay Top List Top
Lỗi nồi chiên không dầu philips tiếng kêu rất to năm 2024
Lỗi nồi chiên không dầu philips tiếng kêu rất to năm 2024

mẹo hay
Daylight is coming like a rentless milkman upstairs là gì năm 2024
Daylight is coming like a rentless milkman upstairs là gì năm 2024

là ai Hỏi Đáp Là gì
Đặt cọc mua đất bao nhiêu phần trăm năm 2024
Đặt cọc mua đất bao nhiêu phần trăm năm 2024

bao nhieu Hỏi Đáp Bao nhiêu
Vở bài tập toán lớp 5 trang 51 52 năm 2024
Vở bài tập toán lớp 5 trang 51 52 năm 2024

mẹo hay Khỏe Đẹp Bài tập
Ngôn ngữ chính của singapore là gì năm 2024
Ngôn ngữ chính của singapore là gì năm 2024

là ai Hỏi Đáp Là gì
Văn mẫu lớp 8 bài viết số 1 đề 2 năm 2024
Văn mẫu lớp 8 bài viết số 1 đề 2 năm 2024

mẹo hay Soạn văn 8
Nhẫn tỳ hưu bạc giá bao nhiêu năm 2024
Nhẫn tỳ hưu bạc giá bao nhiêu năm 2024

bao nhieu Hỏi Đáp Bao nhiêu Cryto Giá
Luân đôn là thủ đô của nước nào năm 2024
Luân đôn là thủ đô của nước nào năm 2024

mẹo hay London là gì
Dáng đứng việt nam sáng tác năm bao nhiêu năm 2024
Dáng đứng việt nam sáng tác năm bao nhiêu năm 2024

bao nhieu Hỏi Đáp Bao nhiêu

Quảng Cáo

Có thể bạn quan tâm

Cầu gỗ lim huế bao nhiêu tiền năm 2024
1 tháng trước . bởi YieldingSwimmer
Cân bằng sinh học là gì cho ví dụ năm 2024
1 tháng trước . bởi UmbilicalProceeding
Tổng hợp kiến thức toán ôn thi đại học năm 2024
1 tháng trước . bởi ImpossibleEquation
Đề kiểm tra toán lớp 3 tuần 3 năm 2024
1 tháng trước . bởi FundamentalistTemplate
Cây dù che nắng giá bao nhiêu năm 2024
1 tháng trước . bởi TraditionalPhrasing
Quy trình ứng dụng cntt trong kiểm tra đánh giá năm 2024
1 tháng trước . bởi AdrenalProjection
Bài 94 trang 46 sách giáo khoa toán lớp 6 năm 2024
1 tháng trước . bởi SurplusInactivity
Khắc phục lỗi thẻ nhớ không cho coppy dữ liệu năm 2024
1 tháng trước . bởi FlattenedSaturday
Cách thanh toán bảo hiểm xã hội 1 lần năm 2024
1 tháng trước . bởi OutlyingDishonesty
Lỗi màn hình xanh unexpected kernel mode trap năm 2024
1 tháng trước . bởi AlmightyFraud

Toplist được quan tâm

#1
Top 7 sự tích hồ gươm - ngữ văn lớp 6 2023
5 tháng trước
#2
Top 7 gdcd 6 bài 1 kết nối tri thức 2023
5 tháng trước
#3
Top 7 ý nghĩa của xây dựng gia đình văn hóa 2023
5 tháng trước
#4
Top 6 mẫu hợp đồng mượn đất làm nhà xưởng 2023
5 tháng trước
#5
Top 3 tổng tài biến thái tôi yêu anh tập 27 2023
5 tháng trước
#6
Top 6 kết thực phim mỹ nhân vô lệ 2023
5 tháng trước
#7
Top 9 trong những câu thơ sau câu nào sử dụng thành ngữ 2023
5 tháng trước
#8
Top 8 đề tài và chủ de của tác phẩm tắt đèn 2023
5 tháng trước
#9
Top 5 tiểu sử của thầy thích pháp hòa 2023
5 tháng trước

Quảng cáo

Xem Nhiều

Top nước hoa hồng se khít lỗ chân lông năm 2024
1 tuần trước
Đặt cọc mua đất bao nhiêu phần trăm năm 2024
1 tuần trước
Thế nào là số vô tỉ cho ví dụ năm 2024
6 ngày trước
Đẻ mổ tối đa được bao nhiêu lần năm 2024
1 tuần trước
Tự học tiếng anh như thế nào hiệu quả năm 2024
1 ngày trước
Thiết kế quán trà sữa bao nhiêu tiền năm 2024
1 tuần trước
Tuổi đinh mão xây nhà năm nào tốt năm 2024
2 ngày trước
Khoán chi đến sản phẩm cuối cùng là gì năm 2024
3 ngày trước
Họ tiếng nhật của bạn là gì năm 2024
13 giờ trước
Lỗi nồi chiên không dầu philips tiếng kêu rất to năm 2024
1 tuần trước

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

DMCA.com Protection Status
Bản quyền © 2021 Học Tốt Inc.