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

---

Video Xem trước

---

Bước 1

Please start by way view the structure directory

Constructor

• cài lại. css - you could get css reset from this link
• Phong cách. css - tập tin css mà chúng tôi sẽ sử dụng để định phong cách cho mã HTML của chúng tôi
• sự liên quan. php - tập tin này sẽ tạo kết nối tới cơ sở dữ liệu của chúng ta
• mục lục. php - template cho giỏ hàng của chúng tôi
• xe đẩy. php - file nơi chúng ta sẽ có thể thay đổi các sản phẩm của chúng ta từ thùng hàng (thêm, xóa)
• Mỹ phẩm. php - trang liệt kê các sản phẩm

---

Bước 2

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

Như bạn thấy, trang của chúng ta có hai cột. cột chính và cột bên. Please transfer to CSS. Open file style. css và nhập mã dưới đây vào

 
	 
body { 
	font-family: Verdana; 
	font-size: 12px; 
	color: #444; 
} 
 
 
#container { 
	width: 700px; 
	margin: 150px auto; 
	background-color: #eee; 
	overflow: hidden; /* Set overflow: hidden to clear the floats on #main and #sidebar */ 
	padding: 15px; 
} 
 
	#main { 
		width: 490px; 
		float: left; 
	} 
 
	#sidebar { 
		width: 200px; 
		float: left; 
	}

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

---

Full Guide Video

---

Bước 3

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

1. Vào tab Đặc quyền, nhấp vào nút thêm người dùng mới và sử dụng các thiết lập sau. tên tài khoản. hướng dẫn; . máy chủ cục bộ; . mật khẩu siêu bí mật;. Bây giờ chắc chắn rằng các quyền Toàn cầu được thiết lập;
2. Tạo một cơ sở dữ liệu mới được gọi là hướng dẫn
3. Tạo một bảng mới gọi là sản phẩm và thiết lập số lượng trường thành 4. Bây giờ hãy điền vào các trường đó, vì vậy bạn có. id_integer - chắc chắn rằng nó được thiết lập thành INT và đánh dấu nó là CHÍNH (đồng thời thiết lập nó thành auto_increment);
4. Điền vào bảng dữ liệu của bạn bằng một số mẫu sản phẩm

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

 
CREATE TABLE IF NOT EXISTS `products` ( 
  `id_product` int(11) NOT NULL AUTO_INCREMENT, 
  `name` varchar(100) NOT NULL, 
  `description` varchar(250) NOT NULL, 
  `price` decimal(6,2) NOT NULL, 
  PRIMARY KEY (`id_product`) 
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ; 
 
INSERT INTO `products` (`id_product`, `name`, `description`, `price`) VALUES 
(1, 'Product 1', 'Some random description', '15.00'), 
(2, 'Product 2', 'Some random description', '20.00'), 
(3, 'Product 3', 'Some random description', '50.00'), 
(4, 'Product 4', 'Some random description', '55.00'), 
(5, 'Product 5', 'Some random description', '54.00'), 
(6, 'Product 6', 'Some random description', '34.00');

---

Bước 4

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

1. session_start() - it will be used after this;
2. Trong dòng thứ hai, chúng ta bao gồm kết nối. php để xác nhận kết nối với cơ sở dữ liệu (chúng ta sẽ giải quyết vấn đề này trong vài giây nữa). Một điều nữa. sự khác biệt giữa bao gồm và yêu cầu là nếu bạn sử dụng yêu cầu và tập tin không được tìm thấy, việc thực thi kịch bản sẽ kết thúc. Nếu bạn sử dụng "bao gồm", tập lệnh sẽ tiếp tục thực thi
3. Thay vì sao chép toàn bộ mã html (liên kết đến css, đến js) cho từng tệp trong trang web của bạn, bạn có thể gom chúng thành một tệp có liên quan. Vì vậy, trước tiên, tôi kiểm tra xem có một biến GET được gọi là "bộ trang" hay không. Nếu không, tôi tạo một biến mới gọi là _pages. Nếu biến GET được gọi là các trang đã được thiết lập trước đó, tôi muốn đảm bảo rằng tập tin mà tôi sẽ đưa vào là một trang hợp lệ

Để thực hiện công việc này, chúng ta cần phải bao gồm các tập tin; . php between div with id of "main"

This is index. hoàn chỉnh php mà chúng ta có lúc này

Please create to MySQL connection. Mở kết nối. php and input as after.

---

Bước 5

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

 
Product List
 
	
 
	    
 
	        
Name
 
	        
Description
 
	        
Price
 
	        
Action
 
	    
 
	    
 
	        
Product 1
 
	        
Some random description
 
	        
15 $ 
	        
Add to cart
 
	    
 
	     
 
	        
Product 2
 
	        
Some random description
 
	        
25 $ 
	        
Add to cart
 
	    
 
	

Please quan sát trang

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

________số 8

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

Có vẻ tốt hơn nhiều, bạn có nghĩ vậy không? . css

 
body { 
	font-family: Verdana; 
	font-size: 12px; 
	color: #444; 
} 
 
a {color: #48577D; text-decoration: none;} 
 
a:hover {text-decoration: underline;} 
 
h1, h2 {margin-bottom: 15px} 
 
h1 {font-size: 18px;} 
h2 {font-size: 16px} 
 
#container { 
	width: 700px; 
	margin: 150px auto; 
	background-color: #eee; 
	padding:15px; 
	overflow: hidden; 
} 
 
	#main { 
		width: 490px; 
		float: left; 
	} 
	 
		#main table { 
			width: 480px; 
		} 
		 
			#main table th { 
				padding: 10px; 
				background-color: #48577D; 
				color: #fff; 
				text-align: left; 
			} 
			 
			#main table td { 
				padding: 5px; 
			} 
			 
			#main table tr { 
				background-color: #d3dcf2; 
			} 
	 
	#sidebar { 
		width: 200px; 
		float: left; 
	}

---

Bước 6

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

 
	 
body { 
	font-family: Verdana; 
	font-size: 12px; 
	color: #444; 
} 
 
 
#container { 
	width: 700px; 
	margin: 150px auto; 
	background-color: #eee; 
	overflow: hidden; /* Set overflow: hidden to clear the floats on #main and #sidebar */ 
	padding: 15px; 
} 
 
	#main { 
		width: 490px; 
		float: left; 
	} 
 
	#sidebar { 
		width: 200px; 
		float: left; 
	}

0

Tuyệt. Bây giờ ở nơi mà các hàng của bảng đã được đặt, hãy nhập mã PHP sau

 
	 
body { 
	font-family: Verdana; 
	font-size: 12px; 
	color: #444; 
} 
 
 
#container { 
	width: 700px; 
	margin: 150px auto; 
	background-color: #eee; 
	overflow: hidden; /* Set overflow: hidden to clear the floats on #main and #sidebar */ 
	padding: 15px; 
} 
 
	#main { 
		width: 490px; 
		float: left; 
	} 
 
	#sidebar { 
		width: 200px; 
		float: left; 
	}

1

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

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

---

Bước 7

Vui lòng thực hiện liên kết đó hoạt động bằng cách thêm mã sau đây vào cùng trang

 
	 
body { 
	font-family: Verdana; 
	font-size: 12px; 
	color: #444; 
} 
 
 
#container { 
	width: 700px; 
	margin: 150px auto; 
	background-color: #eee; 
	overflow: hidden; /* Set overflow: hidden to clear the floats on #main and #sidebar */ 
	padding: 15px; 
} 
 
	#main { 
		width: 490px; 
		float: left; 
	} 
 
	#sidebar { 
		width: 200px; 
		float: left; 
	}

2

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

Vui lòng kiểm tra xem biến thông báo đã được thiết lập hay chưa và xuất nó ra trang (nhập mã này theo tiêu đề trang H1)

 
	 
body { 
	font-family: Verdana; 
	font-size: 12px; 
	color: #444; 
} 
 
 
#container { 
	width: 700px; 
	margin: 150px auto; 
	background-color: #eee; 
	overflow: hidden; /* Set overflow: hidden to clear the floats on #main and #sidebar */ 
	padding: 15px; 
} 
 
	#main { 
		width: 490px; 
		float: left; 
	} 
 
	#sidebar { 
		width: 200px; 
		float: left; 
	}

3

Ở đây bạn có thể xem các sản phẩm trang. hoàn chỉnh php

 
	 
body { 
	font-family: Verdana; 
	font-size: 12px; 
	color: #444; 
} 
 
 
#container { 
	width: 700px; 
	margin: 150px auto; 
	background-color: #eee; 
	overflow: hidden; /* Set overflow: hidden to clear the floats on #main and #sidebar */ 
	padding: 15px; 
} 
 
	#main { 
		width: 490px; 
		float: left; 
	} 
 
	#sidebar { 
		width: 200px; 
		float: left; 
	}

4

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

---

Bước 8

Please quay back index. php and build sidebar. Add code after here

 
	 
body { 
	font-family: Verdana; 
	font-size: 12px; 
	color: #444; 
} 
 
 
#container { 
	width: 700px; 
	margin: 150px auto; 
	background-color: #eee; 
	overflow: hidden; /* Set overflow: hidden to clear the floats on #main and #sidebar */ 
	padding: 15px; 
} 
 
	#main { 
		width: 490px; 
		float: left; 
	} 
 
	#sidebar { 
		width: 200px; 
		float: left; 
	}

5

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

Vui lòng xem những hình ảnh dưới đây

Vì chỉ số. php là một mẫu cho tất cả các tập tin, nên sidebar cũng sẽ hiển thị trong giỏ hàng. php. Thật tuyệt phải không?

---

Bước 9

Cuối cùng, mở giỏ hàng. php và bắt đầu bằng cách nhập mã sau

 
	 
body { 
	font-family: Verdana; 
	font-size: 12px; 
	color: #444; 
} 
 
 
#container { 
	width: 700px; 
	margin: 150px auto; 
	background-color: #eee; 
	overflow: hidden; /* Set overflow: hidden to clear the floats on #main and #sidebar */ 
	padding: 15px; 
} 
 
	#main { 
		width: 490px; 
		float: left; 
	} 
 
	#sidebar { 
		width: 200px; 
		float: left; 
	}

6

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

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

---

Bước 10

Bước cuối cùng mà chúng ta cần làm là làm cho hình thức hoạt động. Vì vậy, hãy thêm mã này vào bên trên giỏ hàng của trang. php

 
	 
body { 
	font-family: Verdana; 
	font-size: 12px; 
	color: #444; 
} 
 
 
#container { 
	width: 700px; 
	margin: 150px auto; 
	background-color: #eee; 
	overflow: hidden; /* Set overflow: hidden to clear the floats on #main and #sidebar */ 
	padding: 15px; 
} 
 
	#main { 
		width: 490px; 
		float: left; 
	} 
 
	#sidebar { 
		width: 200px; 
		float: left; 
	}

7

1. Trước tiên, chúng ta kiểm tra xem biểu mẫu đã được gửi hay chưa. Nếu nó đã được gửi và giá trị của đầu vào là 0, chúng tôi sẽ bỏ đặt phiên đó
2. Nếu giá trị là bất kỳ giá trị nào khác, thì chúng tôi sẽ thiết lập số lượng lặt vặt thành giá trị đó

This is the file cart. hoàn chỉnh php

 
	 
body { 
	font-family: Verdana; 
	font-size: 12px; 
	color: #444; 
} 
 
 
#container { 
	width: 700px; 
	margin: 150px auto; 
	background-color: #eee; 
	overflow: hidden; /* Set overflow: hidden to clear the floats on #main and #sidebar */ 
	padding: 15px; 
} 
 
	#main { 
		width: 490px; 
		float: left; 
	} 
 
	#sidebar { 
		width: 200px; 
		float: left; 
	}

8

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