Yêu cầu dự án Language Used : PHP 5.62 (Developed in Core PHP) Database : My SQL User Interface Design : HTML, AJAX,JQUERY,JAVASCRIPT Web Browser : Mozilla, Google Chrome, IE8,OPERA Software : XAMPP Server Thương mại điện tử có nghĩa là bất kỳ giao dịch nào qua internet.
Trong tiếp thị trực tuyến, giỏ hàng là một phần của phần mềm thương mại điện tử trên máy chủ web cho phép khách truy cập vào trang web trên Internet để chọn các mặt hàng để mua hàng cuối cùng, tương tự như thuật ngữ tiếng Anh Mỹ “giỏ hàng”. Trong tiếng Anh Anh, nó thường được gọi là giỏ mua sắm, hầu như chỉ được rút gọn trên các trang web thành "giỏ".
Phần mềm cho phép khách hàng mua sắm trực tuyến tích lũy danh sách các mặt hàng cần mua, được mô tả một cách ẩn dụ là “đặt các mặt hàng vào giỏ hàng” hoặc “thêm vào giỏ hàng”. Khi thanh toán, phần mềm thường tính tổng số tiền cho đơn đặt hàng, bao gồm phí vận chuyển và xử lý (tức là bưu phí và đóng gói) và các loại thuế liên quan, nếu có. Đặc điểm của dự án - Đăng ký người dùng
- Hệ thống đăng nhập người dùng
- Đổi mật khẩu
- Quên mật khẩu
- Hệ thống quản lý hồ sơ.
- Giỏ hàng
- Danh sách yêu thích
- lịch sử đơn hàng
- Các tính năng của quản trị viên
Quản lý sản phẩm (Thêm, Cập nhật, Xóa) - Hệ thống quản lý đơn hàng
- Quản lý người dùng
- Tạo danh mục / danh mục phụ và nhiều hơn nữa
- Cách chạy Dự án này
Tải xuống dự án và giải nén tệp. - Tạo cơ sở dữ liệu "mua sắm".
- Nhập tệp cơ sở dữ liệu (Cơ sở dữ liệu sẽ có sẵn trong gói)
- Liên kết cho dự án: http: // localhost / shopping
- Liên kết cho Bảng điều khiển quản trị: http: // localhost / shopping / admin
Cách chạy Dự án Hệ thống Shopping cartUsername: [email protected]
Password : Test@123
For Admin :
User Name: admin
Password: Test@123Link tải tại đâyTTham khảo thêm Sourcecode Code xử lý giỏ hàng để thực hiện các chức năng liên quan đến mua hàng của khách. Như chọn, thêm, xóa sản phẩm, lưu đơn hàng vào database…. A. Tổ chức database để lưu đơn hàngBạn sẽ cần ít nhất hai table trong database để lưu thông tin: -Table thứ nhất lưu thông tin đơn hàng, đặt tên donhang luôn nhé. Table sẽ gồm ít nhất các column như sau: – Table thứ hai dùng để lưu chi tiết các đơn hàng, tức lưu các sản phẩm mua trong các đơn hàng B. Thực hiện chức năng hiện giỏ hàngGiỏ hàng là nơi hiện thông tin các sản phẩm user đã chọn để mua. Có nút Thanh toán, Tổng tiền, nút Bỏ sản phẩm (không mua nữa)… Tùy nhu cầu website, có khi tính thêm phí shipping, thuế VAT… 1. Route vào chức năng hiện giỏ hàngTrong file site/controllers/home.php, code để thêm chức năng hiện giỏ hàng: 2. Tạo view giỏ hàng1. Tạo site/views/cartview.php
2. Lấy code bootstrap : Vào https://getbootstrap.com/ => nhắp Docs => Components => Card cuộn xuống mục có header footer => Copy 3. Paste vào file cartview.php
4. Sửa text:
– Sửa Featured thành SẢN PHẨM BẠN ĐÃ CHỌN
– Xóa 3 tag h5, p, a bên trong div card-body rồi code bên trong card-body như sau: <div class="d-flex">
<div class="p-2 border">STT</div>
<div class="p-2 border col-4 ">TênSP</div>
<div class="p-2 border col-3 border text-center">Số lượng</div>
<div class="p-2 border col-2 border text-end">Tiền</div>
<div class="p-2 border flex-grow-1 text-end">Bỏ</div>
</div>
Tham khảo kết quả nhé: Xem thử http://localhost/banhang/site/?act=cartview sẽ thấy card hiện ra, chữ canh giữa và padding trong card-body còn khá lớn. Chỉnh nữa nhé 5. Bổ sung p-0 vào div card-body và xóa text-center thay bằng col-10 m-auto (cho độ rộng nhỏ lại và canh giữa) cho đẹp 6. Thay chữ Số lượng thành code: (đọc code thử nhé) <div class="input-group">
<span class="input-group-text btn btn-danger" onclick="this.parentNode.querySelector('input[type=number]').stepDown()"> - </span>
<input type="number" value="1" class="form-control text-center" min="1" max="100">
<span class="input-group-text btn btn-success" onclick="this.parentNode.querySelector('input[type=number]').stepUp()"> + </span>
</div>7. Dùng bootstrap icon thay cho chữ Bỏ : – Ở đầu view cardview.php, nhúng bootstrap icon <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
– Xóa chữ Bỏ và thay bằng code (đọc code thử nhé) <a href="#" class="btn btn-default ">
<i class="bi bi-trash"></i>
</a>
(Xem hướng dẫn bootstrap icon tại : https://icons.getbootstrap.com/ ) Xem thử kết quả: 3. Hiện sản phẩm – Trong hàm cartview của controller home, khai báo biến session giohang như sau : ( Giả định user đã chọn ba sản phẩm có id là 1, 2 và 7) $_SESSION['giohang'] = [
1 =>['TenDT'=>'OPPO A93','Amount'=>3, 'Gia'=>7300000],
2 => ['TenDT'=>'Vsmart Aris','Amount'=>4, 'Gia'=>6300000],
7 => ['TenDT'=>'Realme 7 Pro','Amount'=>5, 'Gia'=>8300000]
] ;– Trong views/cartview.php, lặp qua biến session giỏ hàng để hiện sản phẩm Xem kết quả: Mời bạn thực hiện: cho hiện STT tăng dần và định dạng tiền thành dạng tiền tệ như hình trên nhé, không làm thì thôi 🙂 C. Thực hiện hành động trên giỏ hàng: thêm, xóa…1.Thêm sản phẩm vào giỏ hàng– Trong site/controllers/home.php. code hàm cart function cart(){
//Tiếp nhậtn biến id (mã sản phẩm) và what (để biết thêm/xóa sp)
$id = $_GET['id']; settype($id, "int");
$what ="add"; if(isset($_GET['what'])) $what = $_GET['what'];
if ($what=="add"){
if (isset($_SESSION['giohang'])==false) $_SESSION['giohang']=[]; //tạo mảng rổng nếu chưa có
$spFromDB = $this->model->detail($id); //if ($spFromDB==null) ...
$spInCart = $_SESSION['giohang'][$id]; //['TenDT'=>'A','Amount'=>2]
if ($spInCart!=null) $soluong=$spInCart['Amount']+1;
else $soluong = 1;
$_SESSION['giohang'][$id]=[
'TenDT'=>$spFromDB['TenDT'],
'Gia'=>$spFromDB['Gia'],
'Amount' =>$soluong
];
echo "<pre>"; print_r($_SESSION['giohang']);
}//if what=="add"
$viewFile = "views/cartview.php";
require_once "layout.php";
}//function cart– Test: Xem thử nhiều lần các địa chỉ sau, sẽ thấy thông tin thêm vào giỏ hàng http://localhost/banhang/site/?act=cart&what=add&id=1
http://localhost/banhang/site/?act=cart&what=add&id=2
http://localhost/banhang/site/?act=cart&what=add&id=3
2. Xóa sản phẩm đã có trong giỏ hàngCode tiếp trong hàm cart ở trên sau đoạn if ($what==”add”) if ($what=="remove"){
unset($_SESSION['giohang'][$id]);
echo "<pre>"; print_r($_SESSION['giohang']);
}//$what=="remove"
– Test: Xem thử nhiều lần các địa chỉ sau, sẽ thấy thông tin bọ xóa khỏi giỏ hàng http://localhost/banhang/site/?act=cart&what=remove&id=1
http://localhost/banhang/site/?act=cart&what=remove&id=2
http://localhost/banhang/site/?act=cart&what=remove&id=3ử
3. Xử lý sau khi thêm/xóa sản phẩm trong giỏ hàngSau khi thêm xóa sản phẩm (trong mục 1 và 2 ở trên) , dòng lệnh echo “<pre>”; print_r($_SESSION[‘giohang’]); chỉ để hiện biến giohang trong session để test. Tùy nhu cầu mà bạn có thể bỏ dòng lệnh này, hoặc chuyển hướng đến trang khác. Thường thì sẽ chuyển đến trang hiện giỏ hàng, do đó dòng lệnh trên bạn sửa lại như sau: header("location: ". SITE_URL."?act=cartview");
Cuộn lên trong hàm cartview của controller home, xóa đoạn code trước đây đã gán cho $_SESSION[‘giohang’]: <div class="input-group">
<span class="input-group-text btn btn-danger" onclick="this.parentNode.querySelector('input[type=number]').stepDown()"> - </span>
<input type="number" value="1" class="form-control text-center" min="1" max="100">
<span class="input-group-text btn btn-success" onclick="this.parentNode.querySelector('input[type=number]').stepUp()"> + </span>
</div>0– Test: Xem thử nhiều lần các địa chỉ sau, sẽ thấy chuyển hướng đến trang xem giỏ hàng mỗi lần request: http://localhost/banhang/site/?act=cart&what=add&id=1
http://localhost/banhang/site/?act=cart&what=add&id=2
http://localhost/banhang/site/?act=cart&what=add&id=3
D. Tạo liên kết để người dùng chủ động thêm xóa sản phẩm1. Tạo liên kêt thêm sản phẩm vào giỏ hàngTrong website bán hàng, tại những nơi hiện sản phẩm, bạn phải có liên kết để user nhắp chọn sản phẩm (để mua). Cụ thể trong các view hiện sản phẩm như home. detail, sản phẩm mới , sản phẩm nổi bật, sản phẩm theo loại…cần có link để user nhắp chọn. Có thể tạo link như sau: mở file views/home.php rồi xóa button Chọn , thay bằng code: <div class="input-group">
<span class="input-group-text btn btn-danger" onclick="this.parentNode.querySelector('input[type=number]').stepDown()"> - </span>
<input type="number" value="1" class="form-control text-center" min="1" max="100">
<span class="input-group-text btn btn-success" onclick="this.parentNode.querySelector('input[type=number]').stepUp()"> + </span>
</div>2Chú ý: Nếu vẫn muốn dùng button thì bạn có thể viết trong sự kiện onclick của để dẫn user sang trang thêm sản phẩm cũng được. Bạn tự viết nhé 2. Tạo liên kêt xóa sản phẩm trong giỏ hàngKhi giỏ hàng hiện ra, bạn phải cho user xóa sản phẩm không còn dự định mua.
Mở file views/cartview.php và code cho tag a chứa icon bi-trash Test: Xem thử trang giỏ hàng, nhắp các icon trash, phải thấy sản phẩm được xóa khỏi giỏ hàng. E. Các tính băng bổ sung cho giỏ hàngKhi hiện giỏ hàng , bạn không chỉ hiện các sản phẩm mà user đã chọn, mà cần thêm các nút/link tính năng sau: 1. Nút Thanh toán để dẫn user đến trang thanh toán. 2 Nút Tiếp tục mua hàng để dẫn suer về trang sản phẩm (hoặc trang trước). 3. Nút Xóa giỏ hàng để xóa toàn bộ sản phẩm trong giỏ hàng. 4. Tính tổng tiền 5. Các thông tin khác: tiền thuế, tiền shipping (nếu có) Sau đây là code gợi ý cho 3 nút , bạn có thể đặt ở vị trí text 2 days ago hoặc ở đâu tùy ý trong cartview.php. <div class="input-group">
<span class="input-group-text btn btn-danger" onclick="this.parentNode.querySelector('input[type=number]').stepDown()"> - </span>
<input type="number" value="1" class="form-control text-center" min="1" max="100">
<span class="input-group-text btn btn-success" onclick="this.parentNode.querySelector('input[type=number]').stepUp()"> + </span>
</div>3Mời bạn thực hiện: tính tổng tiền các sản phẩm và hiện ra trang giỏ hàng nhé F. Tạo trang thanh toánTrang thanh toán hiện ra form để người mua điền thông tin của người mua và người nhận, phương thức thanh toán, phương thức giao hàng… 1. Route vào chức năng thanh toánTrong site/controllers/home.php, code để thêm chức năng thanh toán 2. Tạo view thanh toána. Tạo file site/views/thanhtoan.php b. Nhập text: TRANG THANH TOÁN rồi test thử trong trình duyệt http://localhost/banhang/site/?act=thanhtoan , nếu thấy text mới nhập là OK c. Code hiện form thanh toán: Form phải có method là post, action trỏ lên chức năng luudonhang (sẽ tạo sau) form trỏ lên chức năng lưu đơn hàng để lưu đon hàng vào databased. Trong form, code hiện thông tin người nhận <div class="input-group">
<span class="input-group-text btn btn-danger" onclick="this.parentNode.querySelector('input[type=number]').stepDown()"> - </span>
<input type="number" value="1" class="form-control text-center" min="1" max="100">
<span class="input-group-text btn btn-success" onclick="this.parentNode.querySelector('input[type=number]').stepUp()"> + </span>
</div>4Xem thử nhé e. Code hiện phương thức thanh toán và giao hàng <div class="input-group">
<span class="input-group-text btn btn-danger" onclick="this.parentNode.querySelector('input[type=number]').stepDown()"> - </span>
<input type="number" value="1" class="form-control text-center" min="1" max="100">
<span class="input-group-text btn btn-success" onclick="this.parentNode.querySelector('input[type=number]').stepUp()"> + </span>
</div>5f. Thêm code cho nút Đặt hàng <div class="input-group">
<span class="input-group-text btn btn-danger" onclick="this.parentNode.querySelector('input[type=number]').stepDown()"> - </span>
<input type="number" value="1" class="form-control text-center" min="1" max="100">
<span class="input-group-text btn btn-success" onclick="this.parentNode.querySelector('input[type=number]').stepUp()"> + </span>
</div>6Xem thử, kết quả như sau: Mời bạn thực hiện: ở trong form trên, mới chỉ có field họ tên và email. Bạn hãy thêm Địa chỉ người nhận, Điện thoại người nhận, Ghi chú nhé. Định dạng thêm cho đẹp Nhập thử vào form rồi nhắp nút Mua hàng, nếu được dẫn đến trang http://localhost/banhang/site/?act=luudonhang là chỉnh xác. Tiếp theo sẽ thực hiện chức năng lưu đơn hàng. G. Lưu đơn hàng và giỏ hàng vào database1. Route vào chức năng lưu đơn hàngTrong site/controllers/home.php, code để thêm chức năng lưu đơn hàng 2. Code trong hàm luudonhang<div class="input-group">
<span class="input-group-text btn btn-danger" onclick="this.parentNode.querySelector('input[type=number]').stepDown()"> - </span>
<input type="number" value="1" class="form-control text-center" min="1" max="100">
<span class="input-group-text btn btn-success" onclick="this.parentNode.querySelector('input[type=number]').stepUp()"> + </span>
</div>7Code trong model<div class="input-group">
<span class="input-group-text btn btn-danger" onclick="this.parentNode.querySelector('input[type=number]').stepDown()"> - </span>
<input type="number" value="1" class="form-control text-center" min="1" max="100">
<span class="input-group-text btn btn-success" onclick="this.parentNode.querySelector('input[type=number]').stepUp()"> + </span>
</div>8Test bằng cách nhắp nút mua hàng, dữ liệu sẽ được lưu trong 2 table donhang và donangchitiet. Còn vì sao trong 2 hàm của model, lúc thì cập nhật, lúc là insert. rồi trước khi chèn vào table donhangchitet, lại phải delete trước chi vậy? Câu trả lời dành cho bạn nhé. 🙂 Mời bạn thực hiện : khi lưu đơn hàng, lưu cả phương thức than toán và phương thức giao hàng nhé. Trước khi lưu, hãy bổ sung vào table donhang 2 field mới là PhuongThucThanhToan và PhuongThucGiaoHang nhé. | 
