Khái niệm roi trong php
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ướcBước 1Please start by way view the structure directory Constructor
Bước 2Chú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 VideoBướ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 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
Để 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 5Bâ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
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 6Trướ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
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 7Vui 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
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ó vào 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 8Please 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
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 9Cuố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 10Bướ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
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. |