CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự do – Hạnh Phúc ******* PHIẾU NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN Họ và tên sinh viên: Nguyễn Ngọc Gia Minh MSSV: 19110090 Ngành: Công nghệ
Trang 1THÀNH PHỐ HỒ CHÍ MINH
BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT
ĐỒ ÁN TỐT NGHIỆP NGÀNH CÔNG NGHỆ THÔNG TIN
Tp Hồ Chí Minh, tháng 6/2023 TÌM HIỂU NET, REACT VÀ VẬN DỤNG XÂY DỰNG HỆ THỐNG NHẬP HÀNG TRUNG QUỐC – VIỆT NAM NGUYỄN NGỌC GIA MINH GVHD: ThS HOÀNG CÔNG TRÌNH SVTH :
S K L 0 1 0 9 3 3
Trang 2TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH
KHOA ĐÀO TẠO CHẤT LƯỢNG CAO
-
ĐỒ ÁN TỐT NGHIỆP
Tp Hồ Chí Minh, tháng 06 năm 2023
TÌM HIỂU NET, REACT VÀ VẬN DỤNG XÂY DỰNG HỆ THỐNG NHẬP HÀNG
TRUNG QUỐC – VIỆT NAM
Trang 3CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM
Độc lập – Tự do – Hạnh Phúc
***
Tp Hồ Chí Minh, ngày…tháng…năm 2023
NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP
Họ và tên sinh viên: Nguyễn Ngọc Gia Minh MSSV: 19110090
Ngành: Công nghệ thông tin Lớp: 19110CLST4
Giảng viên hướng dẫn: Hoàng Công Trình ĐT: 0908240179
Ngày nhận đề tài: 08/02/2023 Ngày nộp đề tài: 21/05/2023
1 Tên đề tài: Tìm hiểu Net, React và vận dụng xây dựng hệ thống website nhập hàng Trung Quốc – Việt Nam
2 Nội dung thực hiện đề tài:
− Khách hàng sẽ có các chức năng quản lý đơn hàng, số dư tài khoản, khiếu nại
− Nhân viên sẽ bao gồm các nghiệp vụ liên quan đến cấu hình hệ thống, quản lý tài khoản trong hệ thống, nghiệp vụ của đơn hàng, nghiệp vụ kiểm hàng và nghiệp
vụ kế toán
3 Sản phẩm: mã nguồn của hệ thống nhập hàng Trung Quốc – Việt Nam
TRƯỜNG NGÀNH GIẢNG VIÊN HƯỚNG DẪN
Trang 4CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM
Độc lập – Tự do – Hạnh Phúc
*******
PHIẾU NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN
Họ và tên sinh viên: Nguyễn Ngọc Gia Minh MSSV: 19110090
Ngành: Công nghệ thông tin
Tên đề tài: Tìm hiểu Net, React và vận dụng xây dựng hệ thống website nhập hàng Trung Quốc – Việt Nam
Họ và tên Giảng viên hướng dẫn: Hoàng Công Trình
NHẬN XÉT:
1 Về nội dung đề tài & khối lượng thực hiện:
2 Ưu điểm:
3 Khuyết điểm:
4 Đề nghị cho bảo vệ hay không?
5 Đánh giá loại:
6 Điểm: (Bằng chữ: ………)
Tp Hồ Chí Minh, ngày tháng năm 2023
Giảng viên hướng dẫn
(Ký & ghi rõ họ tên)
Trang 5CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM
Độc lập – Tự do – Hạnh Phúc
*******
PHIẾU NHẬN XÉT CỦA GIẢNG VIÊN PHẢN BIỆN
Họ và tên sinh viên: Nguyễn Ngọc Gia Minh MSSV: 19110090
Ngành: Công nghệ thông tin
Tên đề tài: Tìm hiểu Net, React và vận dụng xây dựng hệ thống website nhập hàng Trung Quốc – Việt Nam
Họ và tên Giảng viên phản biện:
NHẬN XÉT: 1 Về nội dung đề tài & khối lượng thực hiện:
2 Ưu điểm:
3 Khuyết điểm:
4 Đề nghị cho bảo vệ hay không?
5 Đánh giá loại:
6 Điểm: (Bằng chữ: ……… )
Tp Hồ Chí Minh, ngày tháng năm 2023
Giảng viên phản biện
(Ký & ghi rõ họ tên)
Trang 6LỜI CẢM ƠN
Trong quá trình thực hiện đề tài, nhóm đã nhận được sự hướng dẫn và hỗ trợ tận tình của Thạc sĩ Hoàng Công Trình, một trong những giảng viên tâm huyết và có kinh nghiệm của Khoa Công nghệ thông tin Nhóm xin gửi lời cảm ơn chân thành đến thầy
vì đã giúp đỡ nhóm hoàn thành đề tài tốt nghiệp này
Nhóm cũng xin gửi lời cảm ơn chân thành đến quý thầy cô Khoa Đào tạo Chất lượng cao, Khoa Công nghệ thông tin và các bạn cùng ngành đã có những đóng góp, góp ý tích cực để nhóm hoàn thiện dự án một cách tốt nhất Những đóng góp, ý kiến của mọi người nhóm sẽ ghi nhớ và đem làm hành trang trên con đường sự nghiệp sắp tới
Tuy nhiên, do trình độ và thời gian có hạn, sản phẩm mà nhóm trình bày vẫn chưa đầy đủ chức năng và có thể còn tồn tại một số hạn chế Nhóm xin chân thành xin lỗi và mong nhận được sự góp ý, đóng góp xây dựng của mọi người để nhóm có thể tiếp tục hoàn thiện sản phẩm của mình
Một lần nữa, nhóm xin chân thành cảm ơn
Trang 7LỜI MỞ ĐẦU
Hiện nay, nhu cầu nhập hàng từ Trung Quốc về Việt Nam ngày càng tăng cao, đây là do sản phẩm từ Trung Quốc thường có giá thành rẻ và đa dạng về chủng loại, phù hợp với nhu cầu của các tiểu thương ở Việt Nam Ngoài ra, sự phát triển của công nghệ
và thương mại điện tử đã giúp cho việc nhập hàng từ Trung Quốc về Việt Nam trở nên
dễ dàng hơn bao giờ hết
Tuy nhiên, cũng có một số hạn chế và vấn đề với các hệ thống nhập hàng Trung Quốc - Việt Nam hiện nay trên thị trường Một trong những vấn đề là việc quản lý hàng hóa và giao nhận chưa được hiệu quả, dẫn đến tình trạng hàng hóa bị mất, hư hỏng hoặc chậm giao đến tay người tiêu dùng Ngoài ra, cũng có nhiều trường hợp hàng hóa nhập
về không đạt chất lượng, không đúng với mô tả hoặc bị giả mạo
Vì vậy, để giải quyết các vấn đề trên và đáp ứng nhu cầu ngày càng tăng cao của thị trường, các hệ thống nhập hàng từ Trung Quốc - Việt Nam nên nhóm đã ứng dụng các công nghệ hiện đại như NET 6.0, React xây dựng hệ thống website theo mô hình
Single Page Application, SQL Server thiết kế cơ sở dữ liệu để thực hiện đề tài “Tìm
hiểu Net, React và vận dụng xây dựng hệ thống website nhập hàng Trung Quốc – Việt Nam” nhằm tăng cường tính hiệu quả và độ chính xác trong quản lý hàng hóa và
giao nhận
Trang 8MỤC LỤC
NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP ii
PHIẾU NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN iii
PHIẾU NHẬN XÉT CỦA GIẢNG VIÊN PHẢN BIỆN iv
LỜI CẢM ƠN v
LỜI MỞ ĐẦU vi
MỤC LỤC vii
DANH MỤC CÁC BẢNG BIỂU xi
DANH MỤC CÁC HÌNH ẢNH xvi
Chương 1 TỔNG QUAN 1
1.1 Tính cấp thiết của đề tài 1
1.2 Mục đích của đề tài 1
1.3 Cách tiếp cận và phương pháp nghiên cứu 2
1.3.1 Đối tượng nguyên cứu 2
1.3.2 Phạm vi nghiên cứu 2
1.4 Kết quả dự kiến đạt được 3
Chương 2 CƠ SỞ LÝ THUYẾT 4
2.1 .NET 6 4
2.1.1 Giới thiệu 4
2.1.2 Back-end 4
2.2 React 5
2.2.1 Giới thiệu 5
2.2.2 Front-end 5
2.3 Hệ quản trị cơ sở dữ liệu SQL Server 7
2.3.1 Giới thiệu 7
Chương 3 KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 8
Trang 93.1 Khảo sát hiện trạng 8
3.1.1 Hệ thống nhaphangtrung.vn 8
3.2 Xác định yêu cầu 23
3.2.1 Các yêu cầu chức năng 24
3.2.2 Các yêu phi chức năng 28
Chương 4 THIẾT KẾ HỆ THỐNG 29
4.1 Lược đồ Usecase và đặc tả Usecase 29
4.1.1 Lược đồ Usecase 29
4.1.2 Đặc tả Usecase 30
4.2 Lược đồ lớp 85
4.3 Mô tả dữ liệu 86
Chương 5 THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ 106
5.1 Giao diện trang chủ 106
5.1.1 Giao diện trang chủ 106
5.1.2 Giao diện đăng nhập 107
5.1.3 Giao diện đăng ký 107
5.1.4 Giao diện quên mật khẩu 108
5.1.5 Giao diện chuyên mục 109
5.1.6 Giao diện bài viết 109
5.2 Giao diện khách hàng 110
5.2.1 Giao diện điều khiển 110
5.2.2 Giao diện danh sách đơn hàng 111
5.2.3 Giao diện tạo đơn hàng 112
5.2.4 Giao diện chi tiết đơn hàng 113
5.2.5 Giao diện lịch sử giao dịch 113
5.2.6 Giao diện nạp tiền 114
Trang 105.2.7 Giao diện rút tiền 115
5.2.8 Giao diện tracking mã vận đơn 115
5.2.9 Giao diện danh sách mã vận đơn 116
5.2.10 Giao diện tạo khiếu nại 116
5.2.11 Giao diện thông tin người dùng 117
5.3 Giao diện nhân viên 118
5.3.1 Giao diện thống kê doanh thu 118
5.3.2 Giao diện thống kê lợi nhuận 118
5.3.3 Giao diện thống kê nạp rút tiền 119
5.3.4 Giao diện cấu hình hệ thống 120
5.3.5 Giao diện cấu hình phí người dùng 120
5.3.6 Giao diện cấu hình phí mua hàng 121
5.3.7 Giao diện cấu hình phí vận chuyển 121
5.3.8 Giao diện cấu hình phí kiểm hàng 123
5.3.9 Giao diện cấu hình phí kho và phương thức vận chuyển 123
5.3.10 Giao diện cấu hình phí ngân hàng 124
5.3.11 Giao diện danh sách tài khoản 124
5.3.12 Giao diện danh sách hoa hồng 125
5.3.13 Giao diện danh sách đơn hàng 125
5.3.14 Giao diện tạo đơn hộ khách 126
5.3.15 Giao diện danh sách khiếu nại 126
5.3.16 Giao diện chi tiết đơn hàng 127
5.3.17 Giao diện kiểm hàng kho Trung Quốc 128
5.3.18 Giao diện kiểm hàng kho Việt Nam 129
5.3.19 Giao diện xuất kho 129
5.3.20 Giao diện chi tiết xuất kho 130
Trang 115.3.21 Giao diện chi tiết thanh toán xuất kho 130
5.3.22 Giao diện nạp tiền cho khách 131
5.3.23 Giao diện rút tiền cho khách 131
5.3.24 Giao diện danh sách yêu cầu nạp 132
5.3.25 Giao diện danh sách yêu cầu rút 132
5.3.26 Giao diện nội dung trang chủ 133
5.3.27 Giao diện danh sách chuyên mục 133
5.3.28 Giao diện tạo chuyên mục 134
5.3.29 Giao diện cập nhật chuyên mục 134
5.3.30 Giao diện danh sách bài viết 135
5.3.31 Giao diện tạo bài viết 135
5.3.32 Giao diện cập nhật bài viết 136
Chương 6 CÀI ĐẶT VÀ KIỂM THỬ 137
6.1 Cài đặt 137
6.2 Kiểm thử 137
Chương 7 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 149
7.1 Kết quả đạt được 149
7.2 Hạn chế 149
7.3 Hướng phát triển 149
TÀI LIỆU THAM KHẢO 151
Trang 12DANH MỤC CÁC BẢNG BIỂU
Bảng 3 1 Các chức năng của hệ thống 25
Bảng 4 1 Đặc tả usecase đăng ký 30
Bảng 4 2 Đặc tả usecase đăng nhập 31
Bảng 4 3 Đặc tả usecase đăng xuất 32
Bảng 4 4 Đặc tả usecase quên mật khẩu 33
Bảng 4 5 Đặc tả usecase Thay đổi thông tin tài khoản 34
Bảng 4 6 Đặc tả usecase Yêu cầu nạp tiền 35
Bảng 4 7 Đặc tả usecase Yêu cầu rút tiền 36
Bảng 4 8 Đặc tả usecase Yêu cầu mua hộ 37
Bảng 4 9 Đặc tả usecase Đặt cọc đơn hàng 38
Bảng 4 10 Đặc tả usecase Thanh toán đơn hàng 39
Bảng 4 11 Đặc tả usecase Khiếu nại đơn hàng 40
Bảng 4 12 Đặc tả usecase Cập nhật cấu hình hệ thống 41
Bảng 4 13 Đặc tả usecase Cấu hình phí người dùng 42
Bảng 4 14 Đặc tả usecase Cấu hình phí mua hàng 43
Bảng 4 15 Đặc tả usecase Thêm phí cân nặng 44
Bảng 4 16 Đặc tả usecase Cập nhật phí cân nặng 45
Bảng 4 17 Đặc tả usecase Xóa phí cân nặng 46
Bảng 4 18 Đặc tả usecase cập nhật cấu hình phí kiểm đếm 47
Bảng 4 19 Đặc tả usecase Thêm phí thể tích 48
Bảng 4 20 Đặc tả usecase Cập nhật phí thể tích 49
Bảng 4 21 Đặc tả usecase Xóa phí thể tích 50
Bảng 4 22 Đặc tả usecase Thêm kho 51
Bảng 4 23 Đặc tả usecase Cập nhật kho 52
Bảng 4 24 Đặc tả usecase ẩn kho 54
Bảng 4 25 Đặc tả usecase Thêm phương thức vận chuyển 55
Bảng 4 26 Đặc tả usecase Cập nhật phương thức vận chuyển 56
Bảng 4 27 Đặc tả usecase xóa phương thức vận chuyển 57
Bảng 4 28 Đặc tả usecase Thêm ngân hàng 58
Bảng 4 29 Đặc tả usecase Cập nhật ngân hàng 59
Trang 13Bảng 4 31 Đặc tả usecase Cập nhật tài khoản 61
Bảng 4 32 Đặc tả usecase Thanh toán hoa hồng 62
Bảng 4 33 Đặc tả usecase Cập nhật đơn hàng 63
Bảng 4 34 Đặc tả usecase Cập nhật khiếu nại 64
Bảng 4 35 Đặc tả usecase Tạo bao hàng 65
Bảng 4 36 Đặc tả usecase Cập nhật mã vận đơn 66
Bảng 4 37 Đặc tả usecase Xuất kho 67
Bảng 4 38 Đặc tả usecase Thanh toán xuất kho 68
Bảng 4 39 Đặc tả usecase Cập nhật bao hàng 69
Bảng 4 40 Đặc tả usecase Gán mã vận đơn cho đơn hàng 70
Bảng 4 41 Đặc tả usecase Duyệt yêu cầu nạp tiền 71
Bảng 4 42 Đặc tả usecase Hủy yêu cầu nạp tiền 72
Bảng 4 43 Đặc tả usecase Duyệt yêu cầu nạp tiền 73
Bảng 4 44 Đặc tả usecase Hủy yêu cầu rút tiền 74
Bảng 4 45 Đặc tả usecase menu header trang chủ 75
Bảng 4 46 Đặc tả usecase Cập nhật menu header trang chủ 76
Bảng 4 47 Đặc tả usecase Xóa menu header trang chủ 77
Bảng 4 48 Đặc tả usecase Cập nhật quyền lợi khách hàng trang chủ 78
Bảng 4 49 Đặc tả usecase Cập nhật bước đăng ký trang chủ 79
Bảng 4 50 Đặc tả usecase chuyên mục 80
Bảng 4 51 Đặc tả usecase Cập nhật chuyên mục 81
Bảng 4 52 Đặc tả usecase Thêm bài viết 82
Bảng 4 53 Đặc tả usecase Cập nhật bài viết 83
Bảng 4 54 Bảng AdminSendUserWallet 86
Bảng 4 55 Bảng Bank 86
Bảng 4 56 Bảng BigPackage 87
Bảng 4 57 Bảng Complain 87
Bảng 4 58 Bảng Configurations 88
Bảng 4 59 Bảng CustomerBenefit 89
Bảng 4 60 Bảng EmailConfigurations 89
Bảng 4 61 Bảng FeeBuyPro 90
Bảng 4 62 Bảng FeeCheckProduct 90
Trang 14Bảng 4 63 Bảng FeeSupport 91
Bảng 4 64 Bảng HistoryOrderChange 91
Bảng 4 65 Bảng HistoryPayWallet 91
Bảng 4 66 Bảng MainOrder 92
Bảng 4 67 Bảng MainOrderCode 94
Bảng 4 68 Bảng Menu 94
Bảng 4 69 Bảng Notification 95
Bảng 4 70 Bảng NotificationTemplate 95
Bảng 4 71 Bảng Order 96
Bảng 4 72 Bảng OutStockSession 96
Bảng 4 73 Bảng OutStockSessionPackage 97
Bảng 4 74 Bảng Page 97
Bảng 4 75 Bảng PageType 98
Bảng 4 76 Bảng ShippingTypeToWarehouse 98
Bảng 4 77 Bảng SmallPackage 99
Bảng 4 78 Bảng StaffIncome 100
Bảng 4 79 Bảng Step 100
Bảng 4 80 Bảng UserGroup 101
Bảng 4 81 Bảng UserInGroup 101
Bảng 4 82 Bảng UserLevel 102
Bảng 4 83 Bảng Users 102
Bảng 4 84 Bảng VolumeFee 103
Bảng 4 85 Bảng WarehouseFee 104
Bảng 4 86 Bảng Warehouse 104
Bảng 4 87 Bảng WarehouseFrom 105
Bảng 4 88 Bảng Withdraw 105
Bảng 5 1 Mô tả giao diện trang chủ 106
Bảng 5 2 Mô tả giao diện đăng nhập 107
Bảng 5 3 Mô tả giao diện đăng ký 108
Bảng 5 4 Mô tả giao diện quên mật khẩu 108
Bảng 5 5 Mô tả giao diện chuyên mục 109
Bảng 5 6 Mô tả giao diện bài viết 109
Trang 15Bảng 5 7 Mô tả giao diện điều khiển 110
Bảng 5 8 Mô tả giao diện danh sách đơn hàng 111
Bảng 5 9 Mô tả giao diện tạo đơn hàng 112
Bảng 5 10 Mô tả giao diện chi tiết đơn hàng 113
Bảng 5 11 Mô tả giao diện lịch sử giao dịch 114
Bảng 5 12 Mô tả giao diện nạp tiền 114
Bảng 5 13 Mô tả giao diện rút tiền 115
Bảng 5 14 Mô tả giao diện tracking mã vận đơn 116
Bảng 5 15 Mô tả giao diện danh sách mã vận đơn 116
Bảng 5 16 Mô tả giao diện tạo khiếu nại 117
Bảng 5 17 Mô tả giao diện thông tin người dùng 117
Bảng 5 18 Mô tả giao diện thống kê doanh thu 118
Bảng 5 19 Mô tả giao diện thống kê doanh thu 119
Bảng 5 20 Mô tả giao diện thống kê nạp rút tiền 119
Bảng 5 21 Mô tả giao diện cấu hình hệ thống 120
Bảng 5 22 Mô tả giao diện cấu hình người dùng 120
Bảng 5 23 Mô tả giao diện cấu hình mua hàng 121
Bảng 5 24 Mô tả giao diện cấu hình vận chuyển 121
Bảng 5 25 Mô tả giao diện thêm vận chuyển 122
Bảng 5 26 Mô tả giao diện cập nhật vận chuyển 122
Bảng 5 27 Mô tả giao diện cấu hình kiểm hàng 123
Bảng 5 28 Mô tả giao diện cấu hình kho và phương thức vận chuyển 123
Bảng 5 29 Mô tả giao diện cấu hình ngân hàng 124
Bảng 5 30 Mô tả giao diện danh sách tài khoản 124
Bảng 5 31 Mô tả giao diện danh sách hoa hồng 125
Bảng 5 32 Mô tả giao diện danh sách đơn hàng 125
Bảng 5 33 Mô tả giao diện tạo đơn hộ khách 126
Bảng 5 34 Mô tả giao diện danh sách khiếu nại 126
Bảng 5 35 Mô tả giao diện chi tiết đơn hàng 128
Bảng 5 36 Mô tả giao diện kiểm hàng kho Trung Quốc 128
Bảng 5 37 Mô tả giao diện kiểm hàng kho Việt Nam 129
Bảng 5 38 Mô tả giao diện xuất kho 129
Trang 16Bảng 5 39 Mô tả giao diện chi tiết xuất kho 130
Bảng 5 40 Mô tả giao diện chi tiết thanh toán xuất kho 130
Bảng 5 41 Mô tả giao diện nạp tiền cho khách 131
Bảng 5 42 Mô tả giao diện rút tiền cho khách 131
Bảng 5 43 Mô tả giao diện danh sách yêu cầu nạp 132
Bảng 5 44 Mô tả giao diện danh sách yêu cầu rút 132
Bảng 5 45 Mô tả giao diện nội dung trang chủ 133
Bảng 5 46 Mô tả giao diện danh sách chuyên mục 133
Bảng 5 47 Mô tả giao diện tạo chuyên mục 134
Bảng 5 48 Mô tả giao diện cập nhật chuyên mục 134
Bảng 5 49 Mô tả giao diện danh sách bài viết 135
Bảng 5 50 Mô tả giao diện tạo bài viết 135
Bảng 5 51 Mô tả giao diện cập nhật bài viết 136
Bảng 6 1 Kiểm thử 137
Trang 17
DANH MỤC CÁC HÌNH ẢNH
Hình 3 1 Công cụ đặt hàng nhaphangtrung.vn 8
Hình 3 2 Giao diện thanh tìm kiếm nhaphangtrung.vn 9
Hình 3 3 Thông báo yêu cầu đăng nhập công cụ đặt hàng nhaphangtrung.vn 9
Hình 3 4 Giao diện giỏ hàng của hệ thống nhaphangtrung.vn 10
Hình 3 5 Giao diện đặt hàng của hệ thống nhaphangtrung.vn 10
Hình 3 6 Giao diện đặt hàng của hệ thống nhaphangtrung.vn 11
Hình 3 7 Giao diện chi tiết đơn hàng hệ thống nhaphangtrung.vn 12
Hình 3 8 Giao diện nạp tiền hệ thống nhaphangtrung.vn 12
Hình 3 9 Giao diện lịch sử giao dịch hệ thống nhaphangtrung.vn 13
Hình 3 10 Giao diện danh sách khiếu nại hệ thống nhaphangtrung.vn 13
Hình 3 11 Giao diện tracking hệ thống nhaphangtrung.vn 14
Hình 3 12 Giao diện tài khoản hệ thống nhaphangtrung.vn 14
Hình 3 13 Giao diện trang điều khiển hệ thống nhaphangtrung.vn 15
Hình 3 14 Giao cấu hình hệ thống nhaphangtrung.vn 15
Hình 3 15 Giao cấu hình phí đơn hàng hệ thống nhaphangtrung.vn 16
Hình 3 16 Giao diện cấu hình ngân hàng hệ thống nhaphangtrung.vn 16
Hình 3 17 Giao diện danh sách nhân viên hệ thống nhaphangtrung.vn 17
Hình 3 18 Giao diện danh sách khách hàng hệ thống nhaphangtrung.vn 17
Hình 3 19 Giao diện danh sách đơn hàng hệ thống nhaphangtrung.vn 18
Hình 3 20 Giao diện chi tiết đơn hàng hệ thống nhaphangtrung.vn 18
Hình 3 21 Giao diện kiểm hàng Trung Quốc hệ thống nhaphangtrung.vn 19
Hình 3 22 Giao diện phiên làm việc kho Việt Nam hệ thống nhaphangtrung.vn 19
Hình 3 23 Giao diện xuất kho hệ thống nhaphangtrung.vn 20
Hình 3 24 Giao diện chi tiết thanh toán xuất kho hệ thống nhaphangtrung.vn 20
Hình 3 25 Giao diện nạp tiền cá nhân hệ thống nhaphangtrung.vn 21
Hình 3 26 Giao diện lịch sử nạp tiền hệ thống nhaphangtrung.vn 21
Hình 3 27 Giao diện lịch sử rút tiền hệ thống nhaphangtrung.vn 21
Hình 3 28 Các thống kê của hệ thống nhaphangtrung.vn 22
Hình 3 29 Danh sách chuyên mục của hệ thống nhaphangtrung.vn 22
Hình 3 30 Danh sách bài viết của hệ thống nhaphangtrung.vn 23
Hình 3 31 Cấu hình trang chủ của hệ thống nhaphangtrung.vn 23
Trang 18Hình 3 32 Lược đồ chức năng 24
Hình 4 1 Lược đồ Usecase 29
Hình 4 2 Lược đồ tuần tự chức năng đăng ký 31
Hình 4 3 Lược đồ tuần tự chức năng đăng nhập 32
Hình 4 4 Lược đồ tuần tự chức năng đăng xuất 33
Hình 4 5 Lược đồ tuần tự chức năng quên mật khẩu 34
Hình 4 6 Lược đồ tuần tự chức năng thay đổi thông tin tài khoản 35
Hình 4 7 Lược đồ tuần tự chức năng yêu cầu nạp tiền 36
Hình 4 8 Lược đồ tuần tự chức năng yêu cầu rút tiền 37
Hình 4 9 Lược đồ tuần tự chức năng yêu cầu mua hộ 38
Hình 4 10 Lược đồ tuần tự chức năng đặt cọc đơn hàng 39
Hình 4 11 Lược đồ tuần tự chức năng thanh toán đơn hàng 40
Hình 4 12 Lược đồ tuần tự chức năng khiếu nại đơn hàng 41
Hình 4 13 Lược đồ tuần tự chức năng cập nhật cấu hình hệ thống 42
Hình 4 14 Lược đồ tuần tự chức năng cập nhật cấu hình phí người dùng 43
Hình 4 15 Lược đồ tuần tự chức năng cập nhật cấu hình phí mua hàng 44
Hình 4 16 Lược đồ tuần tự chức năng thêm phí cân nặng 45
Hình 4 17 Lược đồ tuần tự chức năng cập nhật phí cân nặng 46
Hình 4 18 Lược đồ tuần tự chức năng xóa phí cân nặng 47
Hình 4 19 Lược đồ tuần tự chức năng cập nhật cấu hình phí kiểm đếm 48
Hình 4 20 Lược đồ tuần tự chức năng thêm phí thể tích 49
Hình 4 21 Lược đồ tuần tự chức năng cập nhật phí thể tích 50
Hình 4 22 Lược đồ tuần tự chức năng xóa phí thể tích 51
Hình 4 23 Lược đồ tuần tự chức năng thêm kho Trung Quốc 52
Hình 4 24 Lược đồ tuần tự chức năng thêm kho Việt Nam 52
Hình 4 25 Lược đồ tuần tự chức năng cập nhật kho Trung Quốc 53
Hình 4 26 Lược đồ tuần tự chức năng cập nhật kho Việt Nam 53
Hình 4 27 Lược đồ tuần tự chức năng ẩn kho Trung Quốc 54
Hình 4 28 Lược đồ tuần tự chức năng ẩn kho Việt Nam 55
Hình 4 29 Lược đồ tuần tự chức năng thêm phương thức vận chuyển 56
Hình 4 30 Lược đồ tuần tự chức năng cập nhật phương thức vận chuyển 57
Hình 4 31 Lược đồ tuần tự chức năng xóa phương thức vận chuyển 58
Trang 19Hình 4 32 Lược đồ tuần tự chức năng thêm ngân hàng 59
Hình 4 33 Lược đồ tuần tự chức năng cập nhật ngân hàng 60
Hình 4 34 Lược đồ tuần tự chức năng thêm tài khoản 61
Hình 4 35 Lược đồ tuần tự chức năng cập nhật tài khoản 62
Hình 4 36 Lược đồ tuần tự chức năng thanh toán hoa hồng 63
Hình 4 37 Lược đồ tuần tự chức năng cập nhật đơn hàng 64
Hình 4 38 Lược đồ tuần tự chức năng cập nhật khiếu nại 65
Hình 4 39 Lược đồ tuần tự chức năng tạo bao hàng 66
Hình 4 40 Lược đồ tuần tự chức năng cập nhật mã vận đơn 67
Hình 4 41 Lược đồ tuần tự chức năng xuất kho 68
Hình 4 42 Lược đồ tuần tự chức năng thanh toán xuất kho xuất kho 69
Hình 4 43 Lược đồ tuần tự chức năng cập nhật bao hàng 70
Hình 4 44 Lược đồ tuần tự chức năng gán mã vận đơn cho đơn hàng 71
Hình 4 45 Lược đồ tuần tự chức năng duyệt yêu cầu nạp tiền 72
Hình 4 46 Lược đồ tuần tự chức năng hủy yêu cầu nạp tiền 73
Hình 4 47 Lược đồ tuần tự chức năng duyệt yêu cầu rút tiền 74
Hình 4 48 Lược đồ tuần tự chức năng hủy yêu cầu rút tiền 75
Hình 4 49 Lược đồ tuần tự chức năng thêm menu header trang chủ 76
Hình 4 50 Lược đồ tuần tự chức năng cập nhật menu header trang chủ 77
Hình 4 51 Lược đồ tuần tự chức năng xóa menu header trang chủ 78
Hình 4 52 Lược đồ tuần tự chức năng cập nhật quyền lợi khách hàng trang chủ 79
Hình 4 53 Lược đồ tuần tự chức năng cập nhật bước đăng ký trang chủ 80
Hình 4 54 Lược đồ tuần tự chức năng thêm chuyên mục 81
Hình 4 55 Lược đồ tuần tự chức năng cập nhật chuyên mục 82
Hình 4 56 Lược đồ tuần tự chức năng thêm bài viết 83
Hình 4 57 Lược đồ tuần tự chức năng thêm bài viết 84
Hình 4 58 Lược đồ lớp 85
Hình 5 1 Giao diện trang chủ 106
Hình 5 2 Giao diện đăng nhập 107
Hình 5 3 Giao diện đăng ký 107
Hình 5 4 Giao diện quên mật khẩu 108
Hình 5 5 Giao diện chuyên mục 109
Trang 20Hình 5 6 Giao diện bài viết 109
Hình 5 7 Giao diện điều khiển 110
Hình 5 8 Giao diện danh sách đơn hàng 111
Hình 5 9 Giao diện tạo đơn hàng 112
Hình 5 10 Giao diện chi tiết đơn hàng 113
Hình 5 11 Giao diện lịch sử giao dịch 113
Hình 5 12 Giao diện nạp tiền 114
Hình 5 13 Giao diện rút tiền 115
Hình 5 14 Giao diện tracking mã vận đơn 115
Hình 5 15 Giao diện danh sách mã vận đơn 116
Hình 5 16 Giao diện tạo khiếu nại 116
Hình 5 17 Giao diện thông tin người dùng 117
Hình 5 18 Giao diện thống kê doanh thu 118
Hình 5 19 Giao diện thống kê doanh thu 118
Hình 5 20 Giao diện thống kê nạp rút tiền 119
Hình 5 21 Giao diện cấu hình hệ thống 120
Hình 5 22 Giao diện cấu hình phí người dùng 120
Hình 5 23 Giao diện cấu hình phí mua hàng 121
Hình 5 24 Giao diện cấu hình phí vận chuyển 121
Hình 5 25 Giao diện thêm phí vận chuyển 122
Hình 5 26 Giao diện cập nhật phí vận chuyển 122
Hình 5 27 Giao diện cấu hình phí kiểm hàng 123
Hình 5 28 Giao diện cấu hình kho và phương thức vận chuyển 123
Hình 5 29 Giao diện cấu hình ngân hàng 124
Hình 5 30 Giao diện danh sách tài khoản 124
Hình 5 31 Giao diện danh sách hoa hồng 125
Hình 5 32 Giao diện danh sách đơn hàng 125
Hình 5 33 Giao diện tạo đơn hộ khách 126
Hình 5 34 Giao diện danh sách khiếu nại 126
Hình 5 35 Giao diện chi tiết đơn hàng 127
Hình 5 36 Giao diện kiểm hàng kho Trung Quốc 128
Hình 5 37 Giao diện kiểm hàng kho Việt Nam 129
Trang 21Hình 5 38 Giao diện xuất kho 129
Hình 5 39 Giao diện chi tiết xuất kho 130
Hình 5 40 Giao diện chi tiết thanh toán xuất kho 130
Hình 5 41 Giao diện nạp tiền cho khách 131
Hình 5 42 Giao diện rút tiền cho khách 131
Hình 5 43 Giao diện danh sách yêu cầu nạp 132
Hình 5 44 Giao diện danh sách yêu cầu rút 132
Hình 5 45 Giao diện nội dung trang chủ 133
Hình 5 46 Giao diện danh sách chuyên mục 133
Hình 5 47 Giao diện tạo chuyên mục 134
Hình 5 48 Giao diện cập nhật chuyên mục 134
Hình 5 49 Giao diện danh sách bài viết 135
Hình 5 50 Giao diện tạo bài viết 135
Hình 5 51 Giao diện cập nhật bài viết 136
Trang 22Chương 1
TỔNG QUAN
1.1 Tính cấp thiết của đề tài
Trong thời đại ngày nay, việc mua sắm trực tuyến đã trở thành một phần không thể thiếu trong cuộc sống của chúng ta Việt Nam là một trong những quốc gia có tốc
độ tăng trưởng kinh tế nhanh nhất ở châu Á, và nhu cầu tiêu dùng của người dân cũng đang gia tăng Với việc nhập khẩu hàng hóa từ Trung Quốc, thị trường Việt Nam đang ngày càng phát triển, vì vậy cần có một hệ thống website nhập hàng Trung Quốc - Việt Nam để đáp ứng nhu cầu của người tiêu dùng
Hệ thống website này sẽ đem lại nhiều lợi ích cho các nhà kinh doanh cũng như người tiêu dùng Với hệ thống này, người tiêu dùng sẽ có thể dễ dàng mua hàng từ Trung Quốc với số lượng lớn, giá cả hợp lý và chất lượng đảm bảo Đồng thời, các nhà kinh doanh cũng sẽ được hưởng lợi từ việc tiếp cận với nguồn hàng phong phú từ Trung Quốc, giúp tăng cường năng lực cạnh tranh của họ trên thị trường Việt Nam
Hơn nữa, việc xây dựng hệ thống website nhập hàng Trung Quốc - Việt Nam cũng đáp ứng nhu cầu của các doanh nghiệp trong việc tìm kiếm nguồn hàng phù hợp với nhu cầu sản xuất của họ
1.2 Mục đích của đề tài
Mục đích của đề tài xây dựng hệ thống website nhập hàng Trung Quốc – Việt Nam bằng công nghệ NET 6.0 và React tại thị trường Việt Nam hiện nay là để giúp các doanh nghiệp và cá nhân có thể dễ dàng tìm kiếm, mua sắm và nhập hàng từ Trung Quốc với giá cả hợp lý và chất lượng đảm bảo
Bằng cách sử dụng công nghệ NET 6.0 và React, hệ thống website sẽ được phát triển với hiệu suất cao, khả năng mở rộng và bảo mật tốt Điều này sẽ giúp cho việc quản
lý, xử lý và thao tác trở nên dễ dàng hơn và đem lại trải nghiệm tốt nhất cho người dùng
Với mong muốn đem lại lợi ích cho người dùng và đóng góp vào sự phát triển của thị trường nhập khẩu hàng hóa, đề tài xây dựng hệ thống website nhập hàng Trung Quốc – Việt Nam bằng công nghệ NET 6.0 và React là một dự án đầy tiềm năng và có
ý nghĩa quan trọng trong thời đại số hóa hiện nay
Trang 231.3 Cách tiếp cận và phương pháp nghiên cứu
1.3.1 Đối tượng nguyên cứu
Đối tượng nghiên cứu trong đề tài “Tìm hiểu Net, React và vận dụng xây dựng
hệ thống website nhập hàng Trung Quốc – Việt Nam” gồm:
− Các công nghệ Net và React: Nghiên cứu về cách thức sử dụng, cấu trúc, tính năng và ưu điểm của các công nghệ này để áp dụng vào việc xây dựng hệ thống website
− Hệ thống website nhập hàng Trung Quốc – Việt Nam: Nghiên cứu về các yêu cầu, tính năng cần có của hệ thống website nhập hàng, cũng như phân tích, thiết
kế và triển khai hệ thống này sử dụng các công nghệ Net và React
− Người dùng: Nghiên cứu về các đặc điểm và yêu cầu của người dùng trong quá trình nhập hàng từ Trung Quốc về Việt Nam, từ đó đưa ra các giải pháp tối ưu cho hệ thống website nhập hàng
− Nhân viên quản lý hệ thống: Nghiên cứu về các yêu cầu và kỹ năng cần có của nhân viên quản lý hệ thống để có thể quản lý và bảo trì hệ thống website nhập hàng
Từ những đối tượng nghiên cứu trên, nhóm sẽ phân tích, đưa ra giải pháp và triển khai hệ thống giải quyết các vấn đề liên quan đến việc nhập hàng từ Trung Quốc về Việt Nam một cách hiệu quả và tiện lợi hơn
1.3.2 Phạm vi nghiên cứu
Đề tài sẽ tập trung nghiên cứu và vận dụng các công nghệ để xây dựng hệ thống website nhập hàng hiệu quả và thuận tiện cho người dùng Phạm vi nghiên cứu sẽ bao gồm các khía cạnh sau:
Tìm hiểu về các công nghệ Net và React: đề tài sẽ tập trung nghiên cứu và phân tích các tính năng, ưu điểm, hạn chế của các công nghệ này để có thể vận dụng chúng vào việc xây dựng hệ thống website nhập hàng
Phân tích yêu cầu và đặc điểm của người dùng và nhà cung cấp: nhằm tạo ra một
hệ thống website nhập hàng thân thiện và dễ sử dụng cho người dùng, đề tài sẽ nghiên cứu và phân tích các yêu cầu và đặc điểm của người dùng cũng như nhà cung cấp
Thiết kế và triển khai hệ thống website nhập hàng: dựa trên các công nghệ Net
và React, đề tài sẽ tập trung vào việc thiết kế và triển khai hệ thống website nhập hàng
từ Trung Quốc về Việt Nam một cách đơn giản, đầy đủ và tốc độ cao
Trang 24Đánh giá hiệu quả của hệ thống website nhập hàng: đề tài sẽ đánh giá hiệu quả của hệ thống website nhập hàng đã xây dựng bằng các chỉ tiêu như tốc độ xử lý, độ ổn định, độ tin cậy và sự hài lòng của người dùng
1.4 Kết quả dự kiến đạt được
Nâng cao hiểu biết về công nghệ NET và React, đặc biệt là về cách tích hợp giữa hai công nghệ này để xây dựng các ứng dụng web hiệu quả
Hiểu rõ quy trình và các bước để xây dựng một hệ thống nhập hàng đầy đủ tính năng và đáp ứng được nhu cầu của các doanh nghiệp nhập hàng từ Trung Quốc về Việt Nam
Tạo ra một ứng dụng web thực tế và hoàn thiện để quản lý quá trình nhập hàng
từ Trung Quốc về Việt Nam, bao gồm các tính năng như đặt hàng, quản lý đơn hàng, kiểm tra kho, thanh toán Hệ thống khắc phục được nhược điểm của các hệ thống cũ trên thị trường
Cải thiện khả năng phân tích, thiết kế, triển khai và kiểm thử phần mềm của nhóm nghiên cứu
Trang 25Để triển khai mô hình Single Page Application cho đề tài “Tìm hiểu Net, React
và vận dụng xây dựng hệ thống website nhập hàng Trung Quốc – Việt Nam” nhóm
đã sử dụng công nghệ Microsoft NET 6 làm Back-end, React làm Front-end và hệ quản trị cơ sở dữ liệu Microsoft SQL Server để lưu trữ dữ liệu hệ thống
2.1 .NET 6
2.1.1 Giới thiệu
Microsoft NET 6 là một nền tảng phát triển ứng dụng phần mềm được cung cấp bởi Microsoft Nó là phiên bản tiếp theo của Microsoft NET Framework và được phát hành vào năm 2021
.NET 6 cung cấp môi trường chạy ứng dụng đa nền tảng (cross-platform) cho việc phát triển ứng dụng web, ứng dụng di động, ứng dụng máy tính và các dịch vụ điện toán đám mây Nền tảng này bao gồm một bộ công cụ và thư viện mạnh mẽ để xây dựng, triển khai và quản lý các ứng dụng phần mềm
2.1.2 Back-end
Để thực hiện tạo cấu trúc cơ sở dữ liệu hệ thống sử dụng phương pháp EF Code First của Entity Framework tạo ra các đối tượng trước sau đó dựa trên các đối tượng mới bắt đầu tạo ra cấu trúc cơ sở dữ liệu tương ứng
Kiến trúc Back-end được chia thành các Class Library: jeamin.API, jeamin.AppDbContext, jeamin.BaseAPI, jeamin.Entities, jeamin.Extensions, jeamin.Interface, jeamin.Models, jeamin.Requets, jeamin.Service, jeamin.Utilities
jeamin.API chứa các Controller xử lý yêu cầu và phản hồi từ phía client Các
Controller được đặt tên ứng với mỗi bảng trong cơ sở dữ liệu Các controller nhận yêu cầu sau đó gọi các Interface để thực hiện chức năng sau đó trả dữ liệu về client
Trang 26jeamin.AppDbContext được sử dụng để tương tác với cơ sở dữ liệu
jeamin.BaseAPI định nghĩa các phương thức và thuộc tính chung để các API
Controller trong jeamin.API kế thừa và mở rộng nhằm giảm thiểu việc các API giống nhau phải viết nhiều lần
jeamin.Entities chứa các lớp đại diện cho các đối tượng trong cơ sở dữ liệu Các
lớp này sẽ kế thừa lớp AppDomain (chứa các thuộc tính bắt buộc của mỗi đối tượng)
jeamin.Extensions cung cấp các phương thức mở rộng, cho phép mở rộng các
chức năng và tính năng của các lớp đã tồn tại
jeamin.Interface dùng để định nghĩa các interfaces chứa các phương thức của
các lớp triển khai nằm trong jeamin.Service
jeamin.Models định nghĩa và quản lý các mô hình dữ liệu trong hệ thống Các
lớp này được dùng để trả dữ liệu về phía client
jeamin.Requets chứa các lớp đóng vai trò nhận yêu cầu từ client
jeamin.Service triển khai các phương thức đã định nghĩa ở jeamin.Interface jeamin.Utilities chứa các lớp cung cấp các hàm xử lý, enum, đối tượng được sử
dụng trong hệ thống
Để ánh xạ dữ liệu giữa các đối tượng (request, entity, model) hệ thống đã sử dụng
thư viện AutoMapper hỗ trợ Mỗi thực thể đều được định nghĩa quy tắc ánh xạ từ model
sang entity, request sang entity và ngược lại
Hệ thống sử dụng design pattern UnitOfWork để quản lý các hoạt động truy cập
cơ sở dữ liệu giúp đảm bảo tính toàn vẹn dữ liệu, hiệu suất và quản lý tài nguyên
Kiến trúc mà nhóm sử dụng dựa trên kiến trúc cơ bản của Framework Nextjs vì
sẽ không cần phải cài đặt thêm package router dành cho React, sử dụng hệ thống system routing (mỗi folder trong folder pages sẽ là 1 router)
Trang 27File-Ý nghĩa của các thư mục:
− node_modules: chứa các package được cài để hỗ trợ
− public: chứa các hình ảnh mặc định của hệ thống
− api: định nghĩa các instance và các request api
− assest: chứa các file json, css của thư viện như fontawesome
− components: chứa các component dùng cho từng page và toàn hệ thống
− configs: định nghĩa các biến trong hệ thống (Status, params request, …), phần quyền trên các role hooks: định nghĩa các custom hook
− pages: File-system routing mặc định của nextjs (mỗi 1 file con là route)
− providers: định nghĩa context riêng cho warehouse
− store: định nghĩa các global state của redux, lưu trữ các global state
− styles: các file css định nghĩa cho toàn bộ hệ thống, custom lại thư viện tailwind
− types: định nghĩa các kiểu dữ liệu của typescript
− utils: Chứa các modules xử lý các hàm sử dụng chung cho toàn hệ thống: format tiền, format ngày, getBase64, …
Mục đích chia các component là để dễ quản lý, chủ động được khi nào component re-render, chia nhỏ còn giúp cho re-render đúng component mà không re-render các component khác
Các Hook được sử dụng trong hệ thống bao gồm:
− UseState: ví dụ khi người dùng sử dụng bộ lọc danh sách thì state hiện tại của danh sách đó sẽ thay đổi và khi React nhận thấy sự thay đổi của state sẽ thực hiện re-render lại danh sách
− UseRef: ví dụ khi sử dụng bộ lọc có ngày tháng, mặc định khi lọc thì sẽ re-render lại toàn component bao gồm các filter Để giữ lại ngày tháng đã chọn thì userRef
sẽ hỗ trợ điều đó tức là chỉ khi người dùng thao tác chọn lại ngày tháng thì phần lọc ngày tháng mới thay đổi
− UseEffect được sử dụng chủ yếu để gọi API khi người dùng thao tác trên giao diện
− Mục đích sử dụng store là lưu state tại global, dù là component con bậc mấy vẫn gọi trực tiếp mà không cần thông qua truyền props xuống
Trang 28Tailwind là 1 css framework giống như bootstrap nhưng hiệu quả và tối ưu hơn, không cần viết css thuần quá nhiều mà chỉ cần thêm các className tương ứng đã được định nghĩa sẵn
Mặc định reactjs đã có virtual DOM, dùng từ khoá key để so sánh state đầu và state sau khi được cập nhật, những phần nào update sẽ được virtual DOM cập nhật trước
và những phần không thay đổi vẫn giữa nguyên
2.3 Hệ quản trị cơ sở dữ liệu SQL Server
2.3.1 Giới thiệu
Microsoft SQL Server là một hệ quản trị cơ sở dữ liệu quan hệ (RDBMS) được phát triển bởi Microsoft, được thiết kế để lưu trữ và quản lý dữ liệu quan hệ của các ứng dụng doanh nghiệp với khả năng xử lý tối đa hàng nghìn đến hàng triệu dòng dữ liệu
SQL Server được hỗ trợ trên các hệ điều hành như Windows Server và Linux và
hỗ trợ các ngôn ngữ lập trình như C#, Java, PHP, Python, Node.js, v.v SQL Server cũng
hỗ trợ nhiều tính năng như transaction processing, data warehousing, data mining, business intelligence, v.v
Một trong những tính năng nổi bật của SQL Server là khả năng tối ưu hóa hiệu suất với tính năng query optimizer, index optimization và memory management, hỗ trợ các công nghệ mới như columnstore index và in-memory OLTP (online transaction processing) để tối ưu hóa hiệu suất xử lý dữ liệu
SQL Server cũng cung cấp các công cụ quản lý và giám sát dữ liệu như SQL Server Management Studio (SSMS) và SQL Server Profiler, giúp người dùng quản lý
và giám sát hoạt động của cơ sở dữ liệu
Trang 29“đặt hàng Trung Quốc” trên nền tảng tìm kiếm Google Search
Thông qua các từ khóa tìm kiếm, nhóm nhận thấy rằng các phần mềm liên quan phần lớn dùng nền tảng website để vận hành và một số hệ thống kèm theo ứng dụng di động để cho người dùng sử dụng
Hiện tại, ở thị trường Việt Nam cũng đã có rất nhiều hệ thống để người dùng mua hàng từ Trung Quốc như thuongdo.com, vominhthien.com, nhaphangtrung.vn và rất nhiều hệ thống khác Để hiểu rõ nghiệp vụ của một hệ thống nhập hàng Trung Quốc nhóm đã thực hiện khảo sát hệ thống nhaphangtrung.vn
Trang 30Sau khi cài đặt công cụ, người dùng sẽ tìm kiếm tên sản phẩm mình muốn mua
ở 1 trong 3 sàn thương mại điện tử là 1688.com, taobao.com và tmall.com trên giao diện trang chủ của website
Hình 3 2 Giao diện thanh tìm kiếm nhaphangtrung.vn
Sau khi nhập từ khóa tìm kiếm và bấm nút tìm kiếm thì hệ thống sẽ mở một trang ứng với website đã chọn để hiển thị các sản phẩm liên quan đến từ khóa tìm kiếm Sau
đó người dùng sẽ chọn vào một sản phẩm muốn mua, tại trang chi tiết sản phẩm sẽ hiện
ra công cụ để người dùng thêm sản phẩm vào giỏ hàng
Hình 3 3 Thông báo yêu cầu đăng nhập công cụ đặt hàng nhaphangtrung.vn
Trang 31Nếu như người dùng chưa đăng nhập vào hệ thống nhaphangtrung.vn thì khi nhấn thêm vào giỏ hàng công cụ hiển thị thông báo yêu cầu người dùng đăng nhập Sau khi đăng nhập người dùng có thể thêm sản phẩm vào giỏ hàng của tài khoản
Hình 3 4 Giao diện giỏ hàng của hệ thống nhaphangtrung.vn
Ở giao diện giỏ hàng người dùng xem được thông tin sản phẩm đã thêm vào, có thể tăng số lượng sản phẩm, xóa sản phẩm, chọn các dịch vụ thêm và đặt hàng
Hình 3 5 Giao diện đặt hàng của hệ thống nhaphangtrung.vn
Trang 32Sau khi nhấn đặt hàng, tại giao diện đặt hàng người dùng sẽ được xem lại các thông tin của đơn và phải chọn phương thức vận chuyển rồi bấm hoàn tất để hoàn thành quá trình đặt hàng
Hình 3 6 Giao diện đặt hàng của hệ thống nhaphangtrung.vn
Hệ thống sẽ chuyển giao diện đến trang danh sách đơn hàng sau khi quá trình đặt hàng Tại trang danh sách đơn hàng, ứng với mỗi đơn hàng sẽ có các thao tác:
− Chi tiết: chuyển hướng đến trang chi tiết đơn hàng
− Tạo đơn tương tự: tạo một đơn hàng dựa trên dữ liệu từ đơn hàng cũ
− Đặt cọc: thanh toán số tiền phải cọc:
− Thanh toán: thanh toán số tiền còn lại của đơn hàng
− Khiếu nại: tạo khiếu nại cho đơn hàng
Trang 33Hình 3 7 Giao diện chi tiết đơn hàng hệ thống nhaphangtrung.vn
Tại trang chi tiết đơn hàng người dùng cũng có các thao tác đặt cọc, thanh toán
và xóa đơn hàng Trang chi tiết đơn hàng có thông tin của đơn hàng, danh sách mã vận đơn, danh sách phụ phí, danh sách sản phẩm và lịch sử thanh toán của đơn hàng
Hình 3 8 Giao diện nạp tiền hệ thống nhaphangtrung.vn
Hệ thống nhaphangtrung.vn thực hiện giao dịch thông qua ví điện tử của hệ thống, khách hàng sẽ tiến hành tạo lệnh nạp tiền ở trang nạp tiền, sau khi quản trị viên duyệt yêu cầu nạp tiền thì số dư của tài khoản sẽ được cộng tiền vào
Trang 34Hình 3 9 Giao diện lịch sử giao dịch hệ thống nhaphangtrung.vn
Mọi hoạt động về tài chính sẽ được lưu trữ và hiển thị trong trang lịch sử giao dịch để khách hàng nắm bắt các giao dịch của tài khoản
Hình 3 10 Giao diện danh sách khiếu nại hệ thống nhaphangtrung.vn
Những khiếu nại đã gửi đi khách hàng sẽ truy cập vào trang danh sách khiếu nại
để xem thông tin
Trang 35Hình 3 11 Giao diện tracking hệ thống nhaphangtrung.vn
Để xem quá trình vận chuyển của mã vận đơn khách hàng có thể truy cập vào trang tracking của hệ thống và nhập mã vận đơn vào mục tìm kiếm để xem chi tiết
Hình 3 12 Giao diện tài khoản hệ thống nhaphangtrung.vn
Trang thông tin tài khoản của hệ thống nhaphangtrung.vn cho phép khách hàng xem chi tiết thông tin tài khoản của mình và cập nhật nếu cần thiết
Hệ thống dành cho nhân viên bao gồm nghiệp vụ quản lý đơn hàng dành cho nhân viên kinh doanh và nhân viên đặt hàng; quản lý kho dành cho nhân viên kho Trung Quốc và nhân viên kho Việt Nam; thống kê và quản lý tài chính dành kế toán; quản lý
Trang 36người dùng, cấu hình phí và nội dung trang chủ dành cho quản lý; cấu hình hệ thống dành riêng cho quản trị viên Ngoài nghiệp vụ chính thì nhân viên quản lý sẽ có các chức năng của các nhân viên khác trừ phần cấu hình hệ thống; quản trị viên thì sẽ có toàn bộ chức năng của hệ thống
Hình 3 13 Giao diện trang điều khiển hệ thống nhaphangtrung.vn
Giao diện trang điều khiển hiển thị thông tin về đơn hàng và tài chính trong một tuần thông qua các biểu đồ để người dùng dễ nắm bắt số liệu
Hình 3 14 Giao cấu hình hệ thống nhaphangtrung.vn
Phần cấu hình hệ thống nhaphangtrung.vn bao gồm thông tin cấu hình chung, mạng xã hội, tỷ giá – hoa hồng, thông báo, footer và cấu hình SEO
Trang 37Hình 3 15 Giao cấu hình phí đơn hàng hệ thống nhaphangtrung.vn
Tài khoản người dùng của hệ thống được chia thành 3 cấp độ vàng, bạch kim và kim cương Dựa vào cấp độ người dùng hệ thống sẽ áp dụng các mực phí khác nhau Phí mua hàng sẽ được tính dựa trên tổng tiền hàng của sản phẩm trên trang thương mại điện tử nhân cho tỷ lệ phần trăm; số tiền đặt cọc được tính dựa trên tổng tiền của đơn nhân với phần trăm đặt cọc; phí vận chuyển tính trên đơn giá cân nặng và đơn giá khối, sau khi tính được phí vận chuyển từ hai đơn giá thì sẽ lấy phần lớn nhất làm phí vận chuyển của đơn hàng
Hình 3 16 Giao diện cấu hình ngân hàng hệ thống nhaphangtrung.vn
Giao diện danh sách ngân hàng của hệ thống hiển thị các ngân hàng của hệ thống
để người dùng chuyển tiền vào
Trang 38Hình 3 17 Giao diện danh sách nhân viên hệ thống nhaphangtrung.vn
Danh sách nhân viên của hệ thống sẽ được quản lý bởi nhân viên quản lý và quản trị viên
Hình 3 18 Giao diện danh sách khách hàng hệ thống nhaphangtrung.vn
Toàn bộ khách hàng của hệ thống được hiển thị cho quản lý và quản trị viên, còn nhân viên kinh doanh và nhân viên đặt hàng sẽ thấy được những tài khoản khách hàng được gán cho mình Với mỗi khách hàng thì nhân viên có chức năng cập nhật thông tin, xem danh sách đơn hàng, nạp – rút tiền, xem lịch sử giao dịch, xem giỏ hàng của tài khoản khách hàng
Trang 39Hình 3 19 Giao diện danh sách đơn hàng hệ thống nhaphangtrung.vn
Danh sách đơn hàng bao gồm thông tin cơ bản của đơn hàng, số lượng đơn hàng theo trạng thái và thao tác đặt cọc, thanh toán, tạo đơn tương tự cho tài khoản của đơn hàng Tất cả đơn hàng sẽ hiển thị đối với quản lý và quản trị viên, đối với nhân viên kinh doanh và đặt hàng thì chỉ hiển thị những đơn được gán Để thao tác cập nhật đơn hàng thì nhân viên phải bấm vào Id của đơn
Hình 3 20 Giao diện chi tiết đơn hàng hệ thống nhaphangtrung.vn
Chi tiết đơn hàng trong hệ thống quản trị là nơi nhân viên cập nhật thông tin chi tiết của đơn hàng như trạng thái đơn, danh sách mã vận đơn, các loại phí, lịch sử thanh toán và lịch sử thay đổi của đơn hàng
Trang 40Hình 3 21 Giao diện kiểm hàng Trung Quốc hệ thống nhaphangtrung.vn
Nhân viên kho Trung Quốc có quyền tạo bao hàng, mã vận đơn, cập nhật cân nặng, kích thước của mã vận đơn Những mã vận đơn được kho Trung Quốc tạo sẽ nằm trong danh sách kiện trôi nổi bởi vì chưa được khai báo trong đơn hàng Khi cập nhật cân nặng và kích thước của mã vận đơn thì hệ thống vẫn chưa tính tiền phí vận chuyển
vì kiện hàng về Việt Nam phải cập nhật lại thì mới đúng số tiền vận chuyển
Hình 3 22 Giao diện phiên làm việc kho Việt Nam hệ thống nhaphangtrung.vn
Tương tự phần kiểm hàng kho Trung Quốc, phiên làm việc kho Việt Nam cũng
sẽ cập nhật cân nặng, kích thước của mã vận đơn Khi cập nhật thông tin mã vận đơn tại kho Việt Nam hệ thống sẽ tính tiền vận chuyển theo cân nặng và khối sau đó so sánh số tiền nào cao hơn sẽ cập nhật phí vận chuyển đơn hàng theo số tiền cao hơn