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 1
Hãy bắt đầu bằng cách xem xét cấu trúc thư mục:
Cấu trúc
- reset.css - bạn có thể lấy css reset từ liên kết này
- style.css - tập tin css mà chúng ta sẽ sử dụng để định phong cách cho code HTML của chúng ta
- connection.php - tập tin này sẽ tạo kết nối tới cơ sở dữ liệu của chúng ta
- index.php - template cho giỏ hàng của chúng ta
- cart.php - tập tin nơi chúng ta sẽ có thể thay đổi các sản phẩm của chúng ta từ giỏ hàng [thêm, xóa]
- products.php - trang liệt kê các sản phẩm
Bước 2
Chúng ta sẽ bắt đầu bằng cách viết code html và sau đó định phong cách cho nó. Vì vậy, hãy mở index.php và sao chép/dán code dưới đây vào:
Shopping cart
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 3
Trước khi chúng ta chuyển sang phần PHP/MySQL, chúng ta cần phải tạo cơ sở dữ liệu. Do đó hãy mở phpMyadmin và làm theo các bước sau:
- Vào tab Privileges, nhấp vào nút add new user, và sử dụng các thiết lập sau: Username: tutorial; Host: localhost; Password: supersecretpassword ;. Bây giờ đảm bảo rằng các quyền Global được thiết lập; Sau đó chuyển sang bước tiếp theo.
- Tạo một cơ sở dữ liệu mới được gọi là tutorials.
- Tạo một bảng mới gọi là products và thiết lập số lượng trường thành 4. Bây giờ điền vào các trường đó, vì vậy bạn có: id_integer - đảm bảo nó được thiết lập thành INT và đánh dấu nó như PRIMARY [đồng thời thiết lập nó thành auto_increment]; name - chọn kiểu VARCHAR với chiều dài 100; description - VARCHAR với chiều dài 250; price - đảm bảo rằng nó được thiết lập thành DECIMAL[2,6]
- Điền vào bảng dữ liệu của bạn bằng một số sản phẩm mẫu
Để tiết kiệm thời gian, tôi đã xuất các sản phẩm của tôi để bạn chỉ cần chạy truy vấn sau đây:
CREATE TABLE IF NOT EXISTS `products` [ `id_product` int[11] NOT NULL AUTO_INCREMENT, `name` varchar[100] NOT NULL, `description` varchar[250] NOT NULL, `price` decimal[6,2] NOT NULL, PRIMARY KEY [`id_product`] ] ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ; INSERT INTO `products` [`id_product`, `name`, `description`, `price`] VALUES [1, 'Product 1', 'Some random description', '15.00'], [2, 'Product 2', 'Some random description', '20.00'], [3, 'Product 3', 'Some random description', '50.00'], [4, 'Product 4', 'Some random description', '55.00'], [5, 'Product 5', 'Some random description', '54.00'], [6, 'Product 6', 'Some random description', '34.00'];
Bước 4
Trước khi chúng ta di chuyển đến phần trích xuất dữ liệu từ cơ sở dữ liệu, tôi sẽ tạo cho index.php của tôi một template cho danh sách sản phẩm và giỏ hàng. Do đó, hãy thêm code sau vào trên cùng của trang index.php của bạn:
- session_start[] - nó sẽ được sử dụng sau này; nó sẽ cho phép chúng ta thật sự sử dụng các session [điều quan trọng là session_start được viết trước khi bất kỳ dữ liệu nào khác được gửi tới trình duyệt].
- Trong dòng thứ hai, chúng ta include connection.php để xác lập kết nối với cơ sở dữ liệu [chúng ta sẽ giải quyết điều này trong giây lát nữa]. Một điều nữa: sự khác biệt giữa include và require là nếu bạn sử dụng require và tập tin không được tìm thấy, việc thực thi script sẽ kết thúc. Nếu bạn sử dụng "include", script sẽ tiếp tục thực thi.
- Thay vì sao chép toàn bộ code html [liên kết đến css, đến js] cho từng tập tin trong trang web của bạn, bạn có thể gom chúng thành một tập tin có liên quan. Vì vậy, trước tiên, tôi kiểm tra xem có một biến GET được gọi là "page set" hay không. Nếu không, tôi tạo một biến mới gọi là _pages. Nếu biến GET được gọi là pages đã được thiết lập trước, tôi muốn đảm bảo rằng tập tin mà tôi sẽ include là một trang hợp lệ.
Để thực hiện công việc này, chúng ta cần phải include tập tin; thêm dòng này vào index.php giữa div với id của "main":
Đây là index.php hoàn chỉnh mà chúng ta có lúc này:
Shopping Cart
Hãy tạo kết nối đến MySQL. Mở connections.php và nhập vào như sau: