NỘI DUNG
Trước khi thực hiện đề tài, tôi đã khảo sát một số trang web như noithatngocanh.com, moho.com.vn, và nhaxinh.com Số lượng trang web trong lĩnh vực nội thất tại Việt Nam rất phong phú và có nhiều tính năng tương đồng Theo đánh giá cá nhân, các trang web cung cấp sản phẩm nội thất hiện nay có đầy đủ chức năng, đáp ứng tốt nhu cầu cơ bản của khách hàng.
- Nội thất Ngọc Anh: http://noithatngocanh.com
+ Có giao diện đơn giản, đẹp mắt, dễ sử dụng
+ Phân loại hàng hoá theo danh mục rõ ràng
+ Có phần đánh giá sản phẩm giúp tăng độ tin cậy về chất lượng sản phẩm
Hình 1: Giao diện trang Nội thất Ngọc Anh
- MOHO: https://moho.com.vn
+ Giao diện chưa được đẹp mắt
+ Chưa có nhiều chương trình khuyễn mãi
+ Có mục đánh giá sản phẩm
KHẢO SÁT HIỆN TRẠNG
PHÂN TÍCH HIỆN TRẠNG
Trước khi thực hiện đề tài, tôi đã khảo sát một số trang web như noithatngocanh.com, moho.com.vn và nhaxinh.com Số lượng trang web trong lĩnh vực nội thất tại Việt Nam khá phong phú và có nhiều tính năng tương đồng Theo đánh giá cá nhân, các trang web cung cấp sản phẩm nội thất hiện nay đã có những chức năng hoàn chỉnh, đáp ứng cơ bản nhu cầu của khách hàng.
- Nội thất Ngọc Anh: http://noithatngocanh.com
+ Có giao diện đơn giản, đẹp mắt, dễ sử dụng
+ Phân loại hàng hoá theo danh mục rõ ràng
+ Có phần đánh giá sản phẩm giúp tăng độ tin cậy về chất lượng sản phẩm
Hình 1: Giao diện trang Nội thất Ngọc Anh
- MOHO: https://moho.com.vn
+ Giao diện chưa được đẹp mắt
+ Chưa có nhiều chương trình khuyễn mãi
+ Có mục đánh giá sản phẩm
Hình 2: Giao diện trang MOHO
- Nhà xinh: https://nhaxinh.com
+ Thiết kế đẹp mắt, dễ dàng tiếp cận, có đầy đủ các mặt hàng cần thiết
+ Có nhiều chương trình khuyến mãi
+ Có chat bot có thể trao đổi trực tiếp với nhân viên
+ Các hình thức thanh toán online còn hạn chế
Hình 3: Giao diện trang Nhà xinh
Dựa trên khảo sát và phân tích các website trên, em đã đề ra những điều mà cần tiếp thu học hỏi vào việc xây dựng website của mình:
- Cần thiết kế giao diện hiển thị sản phẩm trực quan, rõ ràng, chi tiết
- Tích hợp các cổng thanh toán online giúp quá trình thanh toán được thực hiện dễ dàng và nhanh chóng
PHÂN TÍCH YÊU CẦU
Dựa trên phân tích hiện trạng trong lĩnh vực xây dựng website bán đồ nội thất, tôi đã xác định các yêu cầu chức năng cần thiết để đảm bảo chất lượng và tạo ra những điểm mới cho dự án.
● Người dùng: Id, tên, email, mật khẩu, địa chỉ
● Sản phẩm: Id, tên, giá tiền, mô tả, hình ảnh, danh mục, số lượng sản phẩm
● Danh mục: Id, tên danh mục
● Đơn hàng: Thông tin người mua, địa chỉ, giỏ hàng, số lượng, giá, tổng giá, trạng thái đơn hàng, chi phí giao hàng
● Đánh giá: Người đánh giá, sản phẩm được đánh giá, nội dung đánh giá
● Tính tổng tiền khi mua sản phẩm
● Tính phí dịch vụ vận chuyển
MÔ HÌNH HÓA YÊU CẦU VÀ THIẾT KẾ CƠ SỞ DỮ LIỆU
BIỂU ĐỒ USE CASE (USE CASE DIAGRAM)
Hình 4: Use case tổng quát
Bảng 1: Mô tả Use case tổng quát Use Case Tổng Quát
Mô tả Các chức năng tổng quát của hệ thống
Tác nhân tương tác Khách vãng lai: là người chưa có tài khoản đăng nhập
Người dùng là những cá nhân đã đăng ký và có tài khoản để truy cập vào hệ thống Quản trị viên là những người đảm nhiệm các chức năng quản lý toàn bộ website, đảm bảo hoạt động diễn ra suôn sẻ Nhân viên là những người phụ trách quản lý đơn hàng và quy trình thanh toán, góp phần vào việc duy trì dịch vụ khách hàng hiệu quả.
Khách hàng cần có tài khoản và quản trị viên phải đăng nhập vào hệ thống để hiểu rõ ý nghĩa của các use case trong sơ đồ use case tổng quát.
(1) Đăng ký tài khoản: thực hiện việc đăng ký tài khoản cho khách hàng
(2) Tìm kiếm sản phẩm: khách hàng nhập tên sản phẩm, website trả về các sản phẩm tìm thấy
(3) Gửi đánh giá: khách hàng đánh giá sau khi mua sản phẩm
(4) Đăng nhập: đăng nhập vào hệ thống
(5) Chỉnh sửa thông tin cá nhân: chỉnh sửa thông tin người dùng và quản trị viên
(6) thêm sản phẩm giỏ hàng: thêm sản phẩm vào giỏ để chuẩn bị mua hàng
(7) Quản lý giỏ hàng: khách hàng có thể xoá sản phẩm ra khỏi giỏ, tăng giảm số lượng từng sản phẩm trong giỏ
(8) Đặt hàng: chọn các sản phẩm muốn mua trong giỏ hàng, điền thông tin giao hàng để đặt hàng
(9) Xem lịch sử mua hàng: xem lại các đơn hàng đã đặt, huỷ đơn hàng
(10) Quản lý tài khoản: quản lý tài khoản người dùng trong hệ thống
(11) Quản lý danh mục: thêm, xóa, sửa danh mục
(12) Quản lý sản phẩm: thêm, chỉnh sửa sản phẩm
(13) Quản lý đơn hàng: xem danh sách đơn hàng, tính phí giao
(14) Đăng xuất: đăng xuất khỏi hệ thống
2.1.2 Use case quản lý giỏ hàng
Hình 5: Use case quản lý giỏ hàng
Bảng 2: Mô tả Use case quản lý giỏ hàng Use Case quản lý giỏ hàng
Mô tả Cho phép khách hàng xoá sản phẩm ra khỏi giỏ, tăng giảm số lượng từng sản phẩm trong giỏ
Tác nhân tương tác Người dùng
Tiền điều kiện Người dùng phải đăng nhập thành công vào website Ý nghĩa các use case bên trong sơ đồ Use case quản lý giỏ hàng
(1) Thay đổi số lượng sản phẩm: Tăng hoặc giảm số lượng từng sản phẩm trong giỏ hàng
(2) Xoá sản phẩm: xoá sản phẩm ra khỏi giỏ hàng
Hình 6: Use case đặt hàng
Bảng 3: Mô tả Use case đặt hàng Use Case đặt hàng
Mô tả Cho phép người dùng thêm sản phẩm vào giỏ hàng
Tác nhân tương tác Người dùng
Tiền điều kiện Người dùng phải đăng nhập thành công vào website Ý nghĩa các use case bên trong sơ đồ Use case đặt hàng
(1) Chọn sản phẩm trong giỏ hàng: trong giỏ hàng có nhiều sản phẩm, khách hàng tick chọn những sản phẩm mình muốn mua
(2) Nhập thông tin giao hàng: Khách hàng nhập thông tin
10 về người nhận, địa chỉ, ghi chú
(3) Chọn phương thức thanh toán: Người dùng chọn một trong các phương thức: thanh toán tiền mặt khi nhận hàng, thanh toán qua VNPAY, thanh toán qua PayPal
2.1.4 Use case xem lịch sử mua hàng
Hình 7: Use case xem lịch sử mua hàng
Bảng 4: Mô tả Use case xem lịch sử mua hàng Use Case xem lịch sử mua hàng
Mô tả Cho phép người dùng xem lại các đơn hàng mình đã mụa
Tác nhân tương tác Người dùng
Tiền điều kiện Người dùng phải đăng nhập thành công vào website Ý nghĩa các use case bên trong sơ đồ Use case xem lịch sử mua hàng
Khách hàng có thể dễ dàng xem lại các đơn hàng đã đặt của mình, với các trạng thái rõ ràng như chờ xác nhận, đang giao, đã giao và đã huỷ.
(2) Huỷ đơn: khách hàng có thể huỷ đơn hàng chưa duyệt
2.1.5 Use case quản lý danh mục
Hình 8: Use case quản lý danh mục
Bảng 5: Mô tả Use case quản lý danh mục Use Case quản lý danh mục
Mô tả Cho phép quản trị viên quản lý các danh mục
Tác nhân tương tác Quản trị viên
Tiền điều kiện Quản trị viên đăng nhập thành công vào website Ý nghĩa các use case bên trong sơ đồ Use case quản lý danh mục
(1) Xem danh sách danh mục: hiển thị danh sách tất cả các danh mục
(2) Thêm danh mục mới: cho phép quản trị viên thêm mới một danh mục
(3) Chỉnh sửa danh mục: quản trị viên chỉnh sửa thông tin của danh mục đã có
2.1.6 Use case quản lý sản phẩm
Hình 9: Use case quản lý sản phẩm
Bảng 6: Mô tả Use case quản lý sản phẩm Use Case quản lý sản phẩm
Mô tả Cho phép quản trị viên quản lý các sản phẩm
Tác nhân tương tác Quản trị viên
Tiền điều kiện Quản trị viên đăng nhập thành công vào website Ý nghĩa các use case bên trong sơ đồ Use case quản lý sản phẩm
(1) Xem danh sách sản phẩm: Hiển thị tất cả sản phẩm đang kinh doanh
(2) Tìm kiếm sản phẩm: cho phép quản trị viên tìm kiếm sản phẩm theo tên
(3) Thêm mơi sản phẩm: quản trị viên thêm sản phẩm vào danh sách
(4) Quản lý ảnh sản phẩm: người quản trị thêm, xoá hình ảnh của sản phẩm
(5) Cập nhật sản phẩm: quản trị viên sửa đổi thông số, mô tả của sản phẩm
2.1.7 Use case quản lý đơn hàng
Hình 10: Use case quản lý đơn hàng
Bảng 7: Mô tả Use case quản lý đơn hàng Use Case quản lý đơn hàng
Mô tả Cho phép quản trị viên quản lý các đơn hàng
Tác nhân tương tác Quản trị viên
Tiền điều kiện Quản trị viên đăng nhập thành công vào website Ý nghĩa các use case bên trong sơ đồ Use case quản lý đơn hàng
(1) Xem danh sách đơn hàng:hiển thị danh sách các đơn hàng
(2) Cập nhật trạng thái: quản trị viên cập nhật trạng thái đơn hàng thành đã xác nhận hoặc đã giao
BIỂU ĐỒ TUẦN TỰ (SEQUENCE DIAGRAM)
2.2.1 Xem sản phẩm trong danh mục
Hình 11: Biểu đồ tuần tự: Xem sản phẩm trong danh mục 2.2.2 Xem chi tiết sản phẩm
Hình 12: Biểu đồ tuần tự: xem chi tiết sản phẩm
2.2.3 Thêm sản phẩm vào giỏ hàng
Hình 13: Biểu đồ tuần tự: thêm sản phẩm vào giỏ 2.2.4 Xem giỏ hàng
Hình 14: Biểu đồ tuần tự: Xem giỏ hàng
Hình 15: Biểu đồ tuần tự: Thanh toán qua PayPal 2.2.6 Thanh toán qua VNPAY
Hình 16: Biểu đồ tuần tự: Thanh toán qua VNPAY
2.2.7 Xem lịch sử mua hàng
Hình 17: Biểu đồ tuần tự: Xem lịch sử mua hàng 2.2.8 Xem chi tiết đơn hàng
Hình 18: Biểu đồ tuần tự: Xem chi tiết đơn hàng
Hình 18: Biểu đồ tuần tự: Thêm sản phẩm mới 2.2.10 Duyệt đơn hàng
Hình 19: Biểu đồ tuần tự: Duyệt đơn hàng
CƠ SỞ DỮ LIỆU
2.3.1 Hệ quản trị cơ sở dữ liệu
Hình 20: Logo Microsoft SQL Server
Microsoft SQL Server là phần mềm quản lý cơ sở dữ liệu quan hệ do Microsoft phát triển, hoạt động như một máy chủ cơ sở dữ liệu cho phép các ứng dụng lưu trữ và truy xuất dữ liệu Dữ liệu trên máy cài SQL Server được quản trị viên và lập trình viên truy cập thông qua câu lệnh SQL, hỗ trợ việc sử dụng và trao đổi với các máy client Ngôn ngữ SQL được mở rộng với T-SQL (Transact-SQL), cung cấp các tính năng mạnh mẽ cho việc định nghĩa, thêm mới, xoá bỏ và thay đổi bảng cũng như dữ liệu trong bảng.
Khi các hệ thống phần mềm phát triển, lượng dữ liệu sinh ra ngày càng lớn, dẫn đến nhu cầu truy cập dữ liệu tăng cao Điều này yêu cầu hệ quản trị phải xử lý một khối lượng cơ sở dữ liệu khổng lồ SQL Server được tối ưu hóa để đáp ứng nhu cầu này, đồng thời có khả năng tích hợp với nhiều máy chủ khác như Proxy Server, E-Commerce Server, và Microsoft Internet Information Server (IIS) Những ưu điểm của SQL Server giúp nâng cao hiệu suất và khả năng quản lý dữ liệu hiệu quả.
○ Có thể tạo nhiều cơ sở dữ liệu trên một máy
○ Hỗ trợ riêng biệt cho các môi trường development, test, production
○ Giảm thiểu các rủi ro bất ngờ trên cơ sở dữ liệu
○ Có nhiều quyền bảo mật tách biệt giúp lưu trữ dữ liệu an toàn
○ Duy trì máy chủ dự phòng
Hình 22: Tổng quan cơ sở dữ liệu
Bảng 8: Thiết kế cơ sở dữ liệu bảng Role
Bảng 9: Thiết kế cơ sở dữ liệu bảng User
Id int Mã tài khoản
RoleId int Quyền tài khoản
Name nvarchar(50) Tên người dùng
Email varchar(50) Gmail người dùng
Bảng 10: Thiết kế cơ sở dữ liệu bảng Product
Id int Mã sản phẩm
Name nvarchar(50) Tên sản phẩm
Description ntext Mô tả sản phẩm
Saled int Số lượng đã bán
Thumnail varchar(200) Đường dẫn hình ảnh sản phẩm
Status int Tình trạng sản phẩm
Bảng 11: Thiết kế cơ sở dữ liệu bảng Category
Id int Mã danh mục
Name nvarchar(50) Tên danh mục
Bảng 12: Thiết kế cơ sở dữ liệu bảng Cart
ID int Mã giỏ hàng
UserId int Mã khách hàng
ProductId int Mã sản phẩm
Quantity int Số lượng sản phẩm
Ticked bit Có chọn mua hay không
Bảng 13: Thiết kế cơ sở dữ liệu bảng ShipAddress
ID int Mã địa chỉ giao hàng
UserId int Mã người dùng
Street nvarchar(50) Số nhà, tên đường
Bảng 14: Thiết kế cơ sở dữ liệu bảng Order
ID int Mã đơn hàng
UserId int Mã người dùng đặt hàng
Time datetime Ngày đặt hàng
Payment Nvarchar(20) Hình thức thanh toán
ShipAddressId int Mã địa chỉ giao hàng
ShipFee int Phí giao hàng
TotalPrice int Giá đơn hàng
Status int Trạng thái đơn hàng
Bảng 15: Thiết kế cơ sở dữ liệu bảng OrderDetail
ID int Mã chi tiết đơn hàng
OrderId int Mã đơn hàng
ProductId int Mã sản phẩm
Quantity int Số lượng sản phẩm
Price int Giá sản phẩm tại thời điểm mua
Bảng 16: Thiết kế cơ sở dữ liệu bảng Image
ID int Mã hình ảnh
Path varchar(200) Đường dẫn hình ảnh sản phẩm
ProductId int Mã sản phẩm
Description ntext Mô tả hình ảnh
Bảng 17: Thiết kế cơ sở dữ liệu bảng Review
ID int Mã đánh giá
UserId nvarchar(50) Mã người dùng
ProductId varchar(15) Mã sản phẩm
Time varchar(20) Thời gian đánh giá
Content ntext Nội dung đánh giá
CÔNG NGHỆ
ASP.NET CORE
Hình 23: Logo ASP.NET Core
ASP.NET Core là một framework web của Microsoft, được xem là phiên bản cải tiến của ASP.NET Nó cho phép phát triển ứng dụng web không chỉ trên nền tảng Windows mà còn trên Linux và MacOS ASP.NET Core tích hợp MVC framework, kết hợp các tính năng của mô hình MVC và Web API, mang lại nhiều ưu điểm cho lập trình web Là một framework mã nguồn mở, ASP.NET Core thường xuyên được cập nhật để đáp ứng nhu cầu phát triển của cộng đồng người dùng.
- Một ứng dụng ASP.NET Core (kể cả các ứng dụng NET Core khác) đều chạy được trên nền tảng NET Framework và cả nền tảng NET Core
- Được tối ưu cho việc triển khai ứng dụng lên cloud thông qua các framework cần thiết
- Có Nuget Pakage cung cấp rất nhiều thư viện giúp việc xây dựng website trở nên dễ dàng và tối ưu hơn
- Code và giao diện được tách ra riêng biệt giúp dễ dàng bảo trì, nâng cấp về sau
- Chạy được trên nhiều nền tảng hệ điều hành
- Có thể tự host bằng Kestrel hoặc dùng host IIS
- Ứng dụng ngày càng nhỏ gọn, tiết kiệm rất nhiều thời gian, chi phí xây dựng, nâng cấp, bảo trì, lưu trữ,…
- Mở Visual Studio và chọn Create new project:
Hình 24: Tạo project ASP.NET
- Chọn ASP.NET Core Web App (Model - View - Controller):
Hình 25: Tạo project ASP.NET
- Đặt tên và chọn nơi lưu trữ:
Hình 26: Tạo project ASP.NET
- Chọn phiên bản NET, đề tài này sử dụng NET phiên bản 5.0:
Hình 27: Tạo project ASP.NET
- Một project sẽ được tạo thành công sẽ có cấu trúc như sau:
Hình 28: Tạo project ASP.NET
MÔ HÌNH MVC (MODEL – VIEW – CONTROLLER)
MVC, viết tắt của Model - View - Controller, là một mẫu kiến trúc phổ biến trong phát triển phần mềm, được áp dụng rộng rãi trong các loại ứng dụng như Web App, Desktop App và Mobile App.
Ngoài ASP.NET Core MVC, còn nhiều web framework khác cũng sử dụng mô hình này như: Django (Python), Rails (Ruby) hoặc Spring (Java)
Kiến trúc MVC phân chia ứng dụng thành ba thành phần độc lập, mỗi thành phần đảm nhận một trách nhiệm riêng Nhờ đó, việc phát triển và quản lý ứng dụng trở nên dễ dàng và hiệu quả hơn.
- Model: chứa các lớp lưu trữ dữ liệu của ứng dụng
- View: Chứa giao diện để hiển thị kết quả xử lý cho người dùng
- Controller: Tiếp nhận request, sử dụng model để xử lý, tính toán, truyền kết quả cho View để hiển thị
• Các thành phần MVC trong ứng dụng:
- Model: Các Controller sẽ khởi tạo đối tượng của các lớp này để xử lý
Hình 30: Các Models trong ứng dụng
- Controller: Nơi xử lý các request của người dùng:
Hình 31: Các Controller trong ứng dụng
Hình 32: Các Action xử lý trong một Controller
Trong cấu trúc dự án, các view hiển thị giao diện và tương tác với người dùng sẽ được tổ chức trong cùng một thư mục mang tên controller tương ứng.
Hình 33: Các view trong ứng dụng
ENTITY FRAMEWORK CORE DÙNG ĐỂ KẾT NỐI CƠ SỞ DỮ LIỆU
Entity Framework Core là một framework thuộc dạng Object Relational Mapping (ORM) Đây là một kỹ thuật ánh xạ cơ sở dữ liệu sang các objects OOP trong code C#
Do đó, lập trình viên có thể thao tác dễ dàng hơn với cơ sở dữ liệu vì không cần phải quan tâm nhiều đến các câu truy vấn
• Đặc điểm của Entity Framework Core:
- Là một framework mã nguồn mở
- Tốc độ nhanh hơn Entity Framework
Lập trình viên có thể làm việc hiệu quả với nhiều loại cơ sở dữ liệu như SQL Server, MySQL, Oracle và PostgreSQL bằng cách cài đặt provider tương ứng thông qua Nuget Package.
Có hai phương pháp chính trong Entity Framework Core là Database First và Code First Phương pháp Database First cho phép ánh xạ cơ sở dữ liệu hiện có thành các lớp C#, trong khi phương pháp Code First yêu cầu lập trình viên tạo các lớp C# trước, với mỗi lớp tương ứng với một bảng trong cơ sở dữ liệu Ngoài ra, các ràng buộc và mối quan hệ cũng được định nghĩa bằng ngôn ngữ C#, sau đó Entity Framework Core sẽ tạo ra cơ sở dữ liệu dựa trên các lớp này.
Dự án này sử dụng cách tiếp cận là Database First Thiết kế và cài đặt cở sở dữ liệu đã trình bày ở phần trước.
- Cài các package database provider để làm việc với SQL Server:
Hình 34: Cài Microsoft.EntityFrameworkCore.SqlServer
Hình 35: Cài Microsoft.EntityFrameworkCore.Tools
- Trong Package Manager Console, gõ lệnh theo cú pháp:
Scaffold-DbContext ""
Microsoft.EntityFrameworkCore.SqlServer -OutputDir
Hình 36: Lệnh kết nối cơ sở dữ liệu
Thư mục đã được tạo thành công, chứa các lớp tương ứng với các bảng, bao gồm lớp DbContext với cấu hình cho ràng buộc toàn vẹn và các mối quan hệ giữa các bảng.
Hình 37: Các class ánh xạ từ các bảng dưới database
CÁC TÍNH NĂNG CỦA WEBSITE
XÁC THỰC NGƯỜI DÙNG BẰNG COOKIES AUTHENTICATION
Cookies Authentication là phương pháp xác thực người dùng thông qua việc tạo phiên làm việc giữa client và server Mỗi khi client gửi yêu cầu, server sử dụng cookies để xác thực thông tin người dùng và cấp quyền truy cập cần thiết.
- Trình duyệt gửi user name, password lên server để đăng nhập
Máy chủ sẽ kiểm tra thông tin đăng nhập; nếu thông tin không chính xác, người dùng sẽ nhận thông báo đăng nhập không hợp lệ Ngược lại, nếu đăng nhập thành công, máy chủ sẽ tạo một cookie để lưu trữ thông tin người dùng và thiết lập một phiên làm việc giữa người dùng và máy chủ.
- Cookies đó sẽ được gửi kèm trong mỗi request của trình duyệt
- Server dùng cookies đó để xác thực lại xem người dùng có hợp lệ không
- Trong file Startup.cs, thêm phương thức AddAuthentication như sau:
- Trong phương thức configure, thêm app.UseAuthentication():
Hình 39: UseAuthentication trong phương thức Configure
- Khi đăng nhập thành công, tạo danh sách các claims để lưu trữ thông tin người dùng và đăng nhập bằng HttpContext.SignInAsync():
TÍNH PHÍ VẬN CHUYỂN BẰNG API CỦA GIAO HÀNG NHANH
Hình 41: Logo Giao Hàng Nhanh
Giao hành nhanh (GHN) là công ty giao nhận đầu tiên tại Việt Nam, được thành lập vào năm 2012, chuyên cung cấp dịch vụ giao hàng nhanh chóng, an toàn và hiệu quả cho cả người bán hàng và khách hàng.
Trong bài viết này, chúng tôi đã tích hợp các API để lấy địa chỉ khách hàng và tính toán phí vận chuyển, nhằm cung cấp mức phí hợp lý nhất cho khách hàng.
- Lấy mã tỉnh theo api: https://online-gateway.ghn.vn/shiip/public-api/master- data/province :
Hình 42: Lấy mã tỉnh theo API của GHN
Lấy mã quận/huyện thông qua API tại địa chỉ: https://online-gateway.ghn.vn/shiip/public-api/master-data/district Để thực hiện, cần truyền vào tham số là mã tỉnh của khách hàng đã được lấy trước đó.
Hình 43: Lấy mã quận/huyện theo API của GHN
To retrieve the ward or commune code, use the API available at: `https://online-gateway.ghn.vn/shiip/public-api/master-data/ward` The parameter to be passed is the district code that the customer has obtained previously.
Hình 44: Lấy mã phường/xã theo API của GHN
Tính phí vận chuyển thông qua API tại địa chỉ https://online-gateway.ghn.vn/shiip/public-api/v2/shipping-order/fee Để sử dụng, cần cung cấp các tham số như mã địa chỉ của người gửi, mã địa chỉ của người nhận và kích thước của hàng hóa.
Hình 45: Tính phí vận chuyển theo API của GHN
THANH TOÁN ONLINE QUA PAYPAL
- PayPal là dịch vụ thanh toán trực tuyến hỗ trợ người dùng gửi tiền, gửi tiền, thanh toán bằng nhiều loại tiền tệ
- PayPal hoạt động như một ví điện tử Người dùng có thể nạp tiền thông qua tài khoản ngân hàng hoặc các loại thẻ trả trước
Code cài đặt theo hướng dẫn của PayPal như sau:
Hình 47: Code thanh toán qua PayPal
Hình 48: Code thanh toán qua PayPal
THANH TOÁN ONLINE QUA VNPAY
- VNPAY là ví điện tử áp dụng các công nghệ tiên tiến hỗ trợ người dùng thanh toán trực tuyến
- VNPAY cung cấp đa dạng các dịch vụ thanh toán từ mua sắm, thanh toán tiền điện, nước,…
- VNPAY được đông đảo người dùng Việt Nam lựa chọn vì sự tiện lợi và trải nghiệm tuyệt vời
- VNPAY liên kết với rất nhiều ngân hàng tại Việt Nam như: Agribank, Sacombank, BIDV, Vietcombank,…
Hình 50: Tích hợp thanh toán VNPAY
- Cấu hình các tham số theo hướng dẫn của VNPAY:
Hình 51: Tích hợp thanh toán VNPAY
GỬI MAIL XÁC NHẬN ĐƠN HÀNG BẰNG SMTPCLIENT
- Thư viện của NET cung cấp class SmtpClient hỗ trợ người dùng gửi Email thông qua Simple Mail Transfer Protocol (còn gọi là giao thức SMTP)
- Lập trình viên cần cung cấp địa chỉ mail người gửi, địa chỉ mail người nhận, mật khẩu, nội dung mail để máy chủ SMTP thực hiện gửi mail
- Lớp MailMessage dùng để soạn thảo, cấu hình nội dung mail Việc gửi mail sẽ được thực hiện khi phương thức SendMailAsync() được gọi
- Phương thức SendMailGoogleSmtp() được cài đặt như sau:
Hình 52: Cấu hình gửi email
- Biên soạn nội dung mail và gọi phương thức SendMail để gửi:
Hình 53: Cấu hình gửi email
- Nội dung email nhận được như sau:
GIAO DIỆN
TRANG CHỦ
● Trang chủ là trang đầu tiên khi người dùng truy cập vào website
● Trang chủ gồm 3 thành phần chính
○ Danh sách danh mục hàng hóa
○ Danh sách sản phẩm bán chạy
Hình 55: Giao diện trang chủ
Hình 56: Giao diện trang chủ
TRANG ĐĂNG NHẬP
- Là nơi để người dùng nhập email, password để đăng nhập vào website
- Người dùng có tài khoản mới có thể đặt hàng
Hình 57: Giao diện đăng nhập
SẢN PHẨM TRONG DANH MỤC
- Trang này hiển thị các sản phẩm trong danh mục mà người dùng chọn
- Người dùng click vào sản phẩm để xem thông tin chi tiết
Hình 58: Trang sản phẩm trong danh mục
CHI TIẾT SẢN PHẨM
- Đây là nơi hiển thị thông tin của sản phẩm một cách chi tiết nhất
- Thông tin hiển thị bao gồm ảnh, tên sản phẩm, giá bán, mô tả, chất liệu, đánh giá
Hình 59: Giao diện chi tiết sản phẩm
Hình 60: Giao diện chi tiết sản phẩm
Hình 61: Giao diện chi tiết sản phẩm
GIỎ HÀNG
- Trang giỏ hàng hiển thị danh sách các sản phẩm và số lượng sản phẩm mà người dùng đã thêm
- Người dùng có thể cập nhật lại số lượng
- Người dùng có thể xoá sản phẩm khỏi giỏ hàng
Hình 62: Giao diện giỏ hàng
ĐẶT HÀNG
Trang này để người dùng nhập thông tin giao hàng và kiểm tra thông tin hoá đơn
Hình 63: Giao diện đặt hàng
THANH TOÁN QUA PAYPAL
Trang này để người dùng thanh toán online qua PayPal
Hình 64: Giao diện thanh toán qua PayPal
THANH TOÁN QUA VNPAY
Trang này để người dùng thanh toán online qua VNPAY
- Người dùng chọn phương thức thanh toán: quét mã QR, tài khoản ngân hàng, ví điện tử,… Đề tài này dùng phương thức thanh toán qua thẻ nội địa
- Sau đó người dùng nhập thông tin thẻ và mã OTP để thanh toán
Hình 65: Giao diện thanh toán qua VNPAY
Hình 66: Giao diện thanh toán qua VNPAY
LỊCH SỬ MUA HÀNG
- Trang lịch sử mua hàng hiển thị tất cả các đơn hàng mà người dùng đã đặt
- Đơn hàng có các trạng thái: chờ xác nhận, đang giao hàng, đã giao hàng.
Hình 67: Giao diện Lịch sử mua hàng
CHI TIẾT ĐƠN HÀNG
- Đây là nơi hiển thị chi tiết đơn hàng khách hàng đã đặt
- Khách hàng có thể theo dõi tình trạng đơn hàng
- Khách hàng có thể huỷ đơn hàng nếu đơn hàng ở trạng thái chờ xác nhận
- Khách hàng có thể đánh giá sản phẩm nếu đơn hàng ở trạng thái đã giao hàng
Hình 68: Giao diện Chi tiết đơn hàng
ĐÁNH GIÁ SẢN PHẨM
- Trang này để người dùng đánh giá chất lượng sản phẩm sau khi đã nhận hàng
- Khách hàng có thể bình chọn số sao từ 1 – 5 và nhập nội dung đánh giá
Hình 69: Giao diện Đánh giá sản phẩm
TRANG QUẢN TRỊ
- Đây là trang đầu tiên khi quản trị viên đăng nhập vào trang web
- Giao diện này gồm các số liệu thống kê như doanh số, doanh thu, số người dùng đăng ký, biểu đồ theo thời gian, các sản phẩm bán chạy
Hình 70: Giao diện trang quản trị
DANH SÁCH NGƯỜI DÙNG
- Đây là trang quản trị viên xem danh sách các khách hàng đã đăng ký tài khoản
Hình 71: Giao diện Danh sách người dùng
DANH SÁCH SẢN PHẨM
- Đây là trang quản trị viên xem danh sách các sản phẩm đang kinh doanh
Hình 72: Giao diện Danh sách Sản phẩm
CẬP NHẬT SẢN PHẨM
- Đây là trang quản trị viên cập nhật lại thông tin sản phẩm như tên, giá, tình trạng,
Hình 73: Giao diện Cập nhật sản phẩm
DANH SÁCH ĐƠN HÀNG
- Đây là trang quản trị viên xem danh sách các đơn hàng đã đặt
Hình 74: Giao diện Danh sách đơn hàng
DUYỆT ĐƠN HÀNG
- Đây là trang quản trị viên duyệt đơn hàng
- Trang hiển thị thông tin đơn hàng như sản phẩm, hình thức thanh toán, số tiền, địa chỉ nhận hàng
- Quản trị viên có thể xác nhận đơn hàng hoặc huỷ đơn hàng
Hình 75: Giao diện Duyệt đơn hàng
