Hướng dẫn class cart php
|
Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article) Trong video + bài hướng dẫn của tuần này, chúng tôi sẽ hướng dẫn bạn cách xây dựng giỏ hàng của riêng bạn bằng PHP và MySQL. Như bạn sẽ thấy, nó không quá khó như bạn nghĩ. Video Xem trước Bước 1Hãy bắt đầu bằng cách xem xét cấu trúc thư mục: Cấu trúc
Bước 2Chúng ta sẽ bắt đầu bằng cách viết code html và sau đó định phong cách cho nó. Vì vậy, hãy mở index.php và sao chép/dán code dưới đây vào:
Như bạn thấy, trang của chúng ta có hai cột: cột main và cột sidebar. Hãy chuyển sang CSS. Mở tập tin style.css và nhập code dưới đây vào:
body {
font-family: Verdana;
font-size: 12px;
color: #444;
}
#container {
width: 700px;
margin: 150px auto;
background-color: #eee;
overflow: hidden; /* Set overflow: hidden to clear the floats on #main and #sidebar */
padding: 15px;
}
#main {
width: 490px;
float: left;
}
#sidebar {
width: 200px;
float: left;
}Trang sản phẩm của chúng ta bây giờ sẽ trông giống như sau: Video Hướng dẫn Đầy đủBước 3Trướ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:
Để 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 4Trước khi chúng ta di chuyển đến phần trích xuất dữ liệu từ cơ sở dữ liệu, tôi sẽ tạo cho index.php của tôi một template cho danh sách sản phẩm và giỏ hàng. Do đó, hãy thêm code sau vào trên cùng của trang index.php của bạn:
Để thực hiện công việc này, chúng ta cần phải include tập tin; thêm dòng này vào index.php giữa div với id của "main": Đây là index.php hoàn chỉnh mà chúng ta có lúc này:
Hãy tạo kết nối đến MySQL. Mở connections.php và nhập vào như sau: Bước 5Bây giờ là lúc viết code cho trang sản phẩm. Vì vậy hãy mở nó và nhập vào như sau:
Hãy quan sát trang: Như bạn thấy, nó khá rối. Vì vậy, hãy định phong cách cho nó bằng cách thêm CSS này.
a {color: #48577D; text-decoration: none;}
a:hover {text-decoration: underline;}
h2, h2 {margin-bottom: 15px}
h2 {font-size: 18px;}
h2 {font-size: 16px}
#main table {
width: 480px;
}
#main table th {
padding: 10px;
background-color: #48577D;
color: #fff;
text-align: left;
}
#main table td {
padding: 5px;
}
#main table tr {
background-color: #d3dcf2;
}Được rồi: bây giờ hãy xem lại một lần nữa: Có vẻ tốt hơn nhiều, bạn có nghĩ vậy không? Dưới đây bạn có code hoàn chỉnh cho style.css:
body {
font-family: Verdana;
font-size: 12px;
color: #444;
}
a {color: #48577D; text-decoration: none;}
a:hover {text-decoration: underline;}
h2, h2 {margin-bottom: 15px}
h2 {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 6Trước khi trích xuất sản phẩm từ cơ sở dữ liệu, chúng ta hãy xoá bỏ 2 table row cuối cùng ra khỏi table của chúng ta (chúng ta chỉ sử dụng nó để xem table của chúng ta sẽ trông như thế nào thôi). Xoá cái này:
Tuyệt! Bây giờ ở nơi mà các table row được đặt, hãy nhập code PHP sau:
Nếu bạn di chuyển chuột qua một trong các liên kết Add to cart, bạn có thể thấy, ở cuối trang, id của sản phẩm được truyền vào. Bước 7Hãy làm cho liên kết đó hoạt động bằng cách thêm code sau đây vào trên cùng của trang:
1,
"price" => $row_s['price']
);
}else{
$message="This product id it's invalid!";
}
}
}
?>
Hãy kiểm tra xem biến message đó được thiết lập hay chưa và xuất nó vào trang (nhập code này dưới tiêu đề trang H1): $message"; } ?> Ở đây bạn có thể thấy trang products.php hoàn chỉnh.
1,
"price" => $row_s['price']
);
}else{
$message="This product id it's invalid!";
}
}
}
?>
Đây là thông báo lỗi nếu id của sản phẩm không hợp lệ Bước 8Hãy quay trở lại index.php và xây dựng sidebar. Thêm code sau đây:
Hãy xem những hình ảnh dưới đây: Vì index.php là một template cho tất cả các tập tin, nên sidebar cũng sẽ hiển thị trong cart.php. Thật tuyệt vời phải không?! Bước 9Cuối cùng, mở cart.php và bắt đầu bằng cách nhập code sau:
To remove an item, set it's quantity to 0. Code này tương tự như code từ index.php và products.php, vì vậy tôi sẽ không giải thích chúng nữa. Bạn nên chú ý rằng thay vì hiển thị số lượng trong một form, bây giờ nó được hiển thị trong một hộp input (để chúng ta có thể thay đổi số lượng). Ngoài ra cái table được bọc bằng thẻ form. Để có được tổng giá của các mặt hàng mà chúng ta nhân số lượng của id của sản phẩm cụ thể (từ session) với giá của nó. Việc này được hoàn thành trong mỗi vòng lặp. Lưu ý: đầu vào là một mảng, key là id của sản phẩm, và quantity là giá trị của số lượng. Bước 10Bước cuối cùng mà chúng ta cần làm là làm cho form hoạt động. Vì vậy, hãy thêm code này vào bên trên của trang cart.php.
if(isset($_POST['submit'])){
foreach($_POST['quantity'] as $key => $val) {
if($val==0) {
unset($_SESSION['cart'][$key]);
}else{
$_SESSION['cart'][$key]['quantity']=$val;
}
}
}
Đây là tập tin cart.php hoàn chỉnh
$val) {
if($val==0) {
unset($_SESSION['cart'][$key]);
}else{
$_SESSION['cart'][$key]['quantity']=$val;
}
}
}
?>
To remove an item set its quantity to 0. 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! |
