Xây dựng website thương mại Điện tử và hệ thống bán hàng pos

v TÓM TẮT Đề tài "XÂY DỰNG WEBSITE THƯƠNG MẠI ĐIỆN TỬ VÀ HỆ THỐNG BÁN HÀNG POS" tập trung vào nghiên cứu để tích hợp hệ thống POS vào một trang web bán hàng trực tuyến với mục tiêu cung

Trang 1

BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT

THÀNH PHỐ HỒ CHÍ MINH

ĐỒ ÁN TỐT NGHIỆP NGÀNH CÔNG NGHỆ KỸ THUẬT MÁY TÍNH

GVHD: ĐẶNG PHƯỚC HẢI TRANG SVTH: HUỲNH QUỐC TRỌNG

LÊ VĂN THÀNH

TP Hồ Chí Minh, tháng 6/2024

XÂY DỰNG WEBSITE THƯƠNG MẠI ĐIỆN TỬ

VÀ HỆ THỐNG BÁN HÀNG POS

Trang 2

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP.HCM

KHOA ĐIỆN - ĐIỆN TỬ

BỘ MÔN KỸ THUẬT MÁY TÍNH – VIỄN THÔNG

ĐỒ ÁN TỐT NGHIỆP

NGÀNH CÔNG NGHỆ KỸ THUẬT MÁY TÍNH

Sinh viên: 1 Huỳnh Quốc Trọng

MSSV: 20119380

2 Lê Văn Thành

MSSV: 20119375

TP HỒ CHÍ MINH – 06/2024

Trang 3

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP.HCM

KHOA ĐIỆN -ĐIỆN TỬ

BỘ MÔN KỸ THUẬT MÁY TÍNH – VIỄN THÔNG

ĐỒ ÁN TỐT NGHIỆP

NGÀNH CÔNG NGHỆ KỸ THUẬT MÁY TÍNH

Sinh viên: 1 Huỳnh Quốc Trọng

MSSV: 20119380

2 Lê Văn Thành MSSV: 20119375 Hướng dẫn: ThS Đặng Phước Hải Trang

TP HỒ CHÍ MINH – 06/2024

Trang 4

i

THÔNG TIN KHOÁ LUẬN TỐT NGHIỆP

Đề tài: XÂY DỰNG WEBSITE THƯƠNG MẠI ĐIỆN TỬ VÀ HỆ THỐNG BÁN HÀNG POS

1 Thông tin sinh viên

Họ và tên sinh viên: Huỳnh Quốc Trọng MSSV: 20119380

Họ và tên sinh viên: Lê Văn Thành MSSV: 20119375

2 Thông tin đề tại:

- Tên đề tài: XÂY DỰNG WEBSITE THƯƠNG MẠI ĐIỆN TỬ VÀ HỆ THỐNG BÁN HÀNG POS

- Đơn vị quản lý: Bộ môn Kỹ Thuật Máy Tính – Viễn Thông, Khoa Điện Điện

Tử, Trường Đại học Sư Phạm Kỹ Thuật TPHCM

- Thời gian thực hiện: Từ ngày … / … / 20… đến ngày … / … / 20…

- Thời gian bảo vệ trước hội đồng: Từ ngày … / … / 20…

Tp HCM, ngày … tháng … năm …

SV thực hiện đồ án (Ký và ghi rõ họ tên)

Trang 5

(Ký, ghi rõ họ tên và học hàm – học vị)

Trang 6

Nhóm tác giả xin chân thành cảm ơn!

Trang 7

iv

LỜI CAM ĐOAN

Nhóm tác giả cam đoan rằng đồ án tốt nghiệp này là sản phẩm của quá trình nghiên cứu và làm việc nghiêm túc và trung thực của cá nhân nhóm Tất cả các thông tin và tài liệu tham khảo được sử dụng trong luận văn này đều được trích dẫn và tham chiếu đầy đủ và không có bất ký phần nào trong luận văn được sao chép mà không có trích dẫn

Nhóm tác giả thực hiện

Lê Văn Thành Huỳnh Quốc Trọng

Trang 8

v

TÓM TẮT

Đề tài "XÂY DỰNG WEBSITE THƯƠNG MẠI ĐIỆN TỬ VÀ HỆ THỐNG BÁN HÀNG POS" tập trung vào nghiên cứu để tích hợp hệ thống POS vào một trang web bán hàng trực tuyến với mục tiêu cung cấp những phương thức mua hàng nhanh, hiệu quả và thuận tiện cho người dùng và giúp cho các doanh nghiệp có thể quan lý cửa hàng một cách thuận tiện Mục tiêu chính của

đề tài là xây dựng một trang website đầy đủ chức năng, tập trung vào các tính năng quan trọng như đăng nhập, đăng ký, mua hàng, đặt hàng, và xem chi tiết sản phẩm để cải thiện trải nghiệm người dùng và đề tài cũng tập trung vào việc bảo mật thông tin người dùng bằng cách dùng các thuật toán mã hoá để mã hoá thông tin và xác thực token để phân quyền cho người dùng nhằm nâng cao tính bảo mật cho khách hàng Đồng thời, đề tài cũng tập trung vào phát triển một hệ thống POS nhằm hỗ trợ doanh nghiệp quản lý các cửa hàng Tổng thể, đề tài này hướng đến việc giúp doanh nghiệp tận dụng lợi ích của thương mại điện tử để

mở rộng thị trường và quản lý hiệu quả cửa hàng trực tuyến của họ

Trang 9

vi

MỤC LỤC

DANH MỤC HÌNH viii

DANH MỤC BẢNG xi

CÁC TỪ VIẾT TẮT xii

CHƯƠNG 1TỔNG QUAN 1

1.1 GIỚI THIỆU 1

1.2 MỤC TIÊU ĐỀ TÀI 2

1.3 CÔNG NGHỆ SỬ DỤNG 2

1.4 GIỚI HẠN ĐỀ TÀI 2

1.5 PHƯƠNG PHÁP NGHIÊN CỨU 2

1.6 BỐ CỤC QUYỂN BÁO CÁO 2

CHƯƠNG 2CƠ SỞ LÝ THUYẾT 4

2.1 PHẦN MỀM SỬ DỤNG 4

2.2 LÝ THUYẾT BACKEND 5

2.2.1 Kiến trúc MVC 5

2.2.2 Thuật toán Bcrypt 6

2.2.3 Kỹ thuật JWT 7

2.2.4 Database 9

2.2.5 Hệ thống POS 10

2.3 LÝ THUYẾT FRONTEND 10

2.3.1 Khái niệm React 10

2.3.2 Context 11

2.3.3 Thư viện khác 12

CHƯƠNG 3THIẾT KẾ VÀ THỰC HIỆN 14

Trang 10

vii

3.1 THIẾT KẾ HỆ THỐNG 14

3.2 DATABASE 15

3.3 FRONTEND 18

3.4 BACKEND 19

CHƯƠNG 4KẾT QUẢ THỰC HIỆN 27

4.1 DATABASE 27

4.2 KẾT QUẢ THỰC HIỆN PHẦN FRONTEND 27

4.3 KẾT QUẢ THỰC HIỆN PHẦN BACKEND 39

CHƯƠNG 5KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 52

TÀI LIỆU THAM KHẢO 54

Trang 11

viii

DANH MỤC HÌNH

Hình 2.1: Kiến trúc MVC.[6] 5

Hình 2.2: Luồng hoạt động của kiến trúc MVC.[7] 6

Hình 2.3: Ba phần chính của JWT.[9] 7

Hình 2.4: Cách thực hoạt động của JWT [11] 8

Hình 2.5: Cơ chế one-way binding [14] 11

Hình 3.1: Sơ đồ khối hệ thống………14

Hình 3.2: Lưu đồ giải thuật của toàn hệ thống 15

Hình 3.3: Sơ đồ mối quan hệ thực thể 18

Hình 3.4: Các tác nhân của hệ thống 20

Hình 3.5: Thuật giải đăng ký thành viên 20

Hình 3.6: Lưu đồ đăng nhập 21

Hình 3.7:Lưu đồ cập nhật mật khẩu 22

Hình 3.8: Lưu đồ cho chức năng đăng xuất 22

Hình 3.9: Thuật giải cập nhật, thêm sản phẩm 23

Hình 3.10: Lưu đồ thự hiện xóa thông tin sản phẩm 24

Hình 3.11: Lưu đồ xóa đơn hàng 24

Hình 3.12: Lưu đồ khi nhấn nút mua hàng 25

Hình 3.13: Lưu đồ xem chi tiết đơn hàng 26

Hình 4.1: Diagram của đề tài 27

Hình 4.2: Trang đăng nhập 28

Hình 4.3: Trang đăng ký thành viên mới 28

Hình 4.4: Trang chủ 29

Hình 4.5 Trang sản phẩm với loại hàng là Laptop 29

Trang 12

ix

Hình 4.6: Trang sản phẩm với loại hàng là Tablet 30

Hình 4.7: Trang sản phẩm với loại hàng là Smartphone 30

Hình 4.8 Liên hệ 31

Hình 4.9: Thông báo khi nhấn nút thêm sản phẩm 31

Hình 4.10: Trang giỏ hàng 32

Hình 4.11: Chi tiết về sản phẩm 32

Hình 4.12: Chi tiết mặt hàng 33

Hình 4.13:Thông tin tài khoản 33

Hình 4.14: Đơn hàng đã mua 34

Hình 4.15: Thông tin đơn hàng 34

Hình 4.16: Thống kê sản phẩm của hệ thống POS 35

Hình 4.17: Quản lý mặt hàng của cửa hàng 35

Hình 4.18: Trang thêm mới mặt hàng kinh doanh 36

Hình 4.19: Trang thêm loại hàng 36

Hình 4.20: Trang thống kê đơn hàng 37

Hình 4.21: Thay đổi thông tin hàng hoá 37

Hình 4.22: Sửa thông tin loại sản phẩm 38

Hình 4.23: Thông báo khi đăng ký thành viên 39

Hình 4.24: Thông báo đăng ký thành viên được gởi về email 39

Hình 4.25: Đăng ký thất bại 40

Hình 4.26: Login thành công 40

Hình 4.27: Tìm kiếm thông tin trên hệ thống 40

Hình 4.28: Thêm sản phẩm thành công 41

Hình 4.29: Trang giỏ hàng 41

Trang 13

x

Hình 4.30: Mua hàng thành công 42

Hình 4.31: Email hoá đơn điện tử 42

Hình 4.32: Thông tin tài khoản người dùng 43

Hình 4.33: Đơn hàng đã mua 43

Hình 4.34: Thông tin cụ thể đơn hàng đã mua 44

Hình 4.35: Chức năng đăng xuất 44

Hình 4.36: Chức năng tùy chọn của hệ thống POS 44

Hình 4.37: Cập nhật thông tin mặt hàng 45

Hình 4.38: Xóa một mặt hàng khỏi hệ thống 45

Hình 4.39: Thêm loại sản phẩm 46

Hình 4.40: Thay đổi thông tin hàng hoá 46

Hình 4.41: Xóa loại sản phẩm 47

Hình 4.42: Thống kê đơn hàng 47

Hình 4.43: Các đơn hàng đã bán 48

Hình 4.44: Đăng nhập với quyền admin 49

Hình 4.45: Truy cập vào tài nguyên với quyền admin 49

Hình 4.46: Đăng nhập với quyền user 50

Hình 4.47: Truy cập vào tài nguyên bị từ chối 50

Hình 4.48:Mật khẩu được mã hoá khi lưu trữ 51

Trang 14

xi

DANH MỤC BẢNG

Bảng 3.1: Lưu thông tin sản phẩm 16

Bảng 3.2: Lưu tài khoản của khách hàng 16

Bảng 3.3: Thông tin đơn hàng 16

Bảng 3.4: Thông tin loại hàng hoá 17

Bảng 3.5: Thông tin ảnh của sản phẩm 17

Bảng 3.6: Thông chi tiết đơn hàng 17

Trang 15

xii

CÁC TỪ VIẾT TẮT

BE: Backend

CRUD: Create read update delete

CSS: Cascading Style Sheets

DB: Database

FE: Frontend

HTTP: HyperText Transfer Protocol

JS: Javascript

JWT: JSON Web Token

MVC: Model View Controller

POS: Point of sale

RDBMS: Relational Database Management System

SQL: Structured Query Language

UI: User Interface

URL: Uniform Resource Locator

Trang 16

mà còn thúc đẩy sự tăng trưởng doanh số bán hàng Khả năng tiếp cận một lượng lớn khách hàng mà không bị giới hạn về địa lý là một trong những điểm nổi bật của các website hiện nay Điều này làm cho thị trường mua bán được mở rộng góp phần

mở rộng quy mô Do đó nhiều trang web đã được xây dựng để phục vụ cho mục đích riêng của từng công ty như đề tài “Xây dựng website bán cây cảnh” [1] đề tài này sử dụng PostgreSQL để lưu trữ dữ liệu và không sử dụng các kĩ thuật có liên quan đến xác thực và phân quyền hay đề tài “Xây dựng website quản lý số điện thoại cho công ty viễn thông”[2] tuy đề tài có dùng xác thực nhưng nó chỉ nằm ở mức cơ bản và sử dụng NoSQL để lưu trữ thông tin tuy nhiên chưa áp dụng được các kĩ thuật lưu trữ mới để hạn chế truy cập vào databse nhiều lần nhìn chung cả hai đề tài đều áp dụng được các kỹ thuật liên quan đến cơ sở dữ liệu Nhưng vẫn có một vài thiếu sót trong việc bảo mật thông tin người dùng như là không mã hoá mật khẩu trước khi lưu trữ, không áp dụng các công nghệ mới liên quan đến bảo mật như là xác thực bằng token và phân quyền cho người dùng để giúp cho thông tin của khách hàng và trang web được bảo vệ một cách tốt hơn

Từ các lý do liên quan đến việc áp dụng các kỹ thuật về bảo mật và những phương pháp hiện đại về thao tác dữ liệu nên nhóm chúng tôi đã quyết chọn đề tài

“Xây dựng Website thương mại điện tử và hệ thống bán hàng POS” để nghiên cứu

và thực hiện Đề tài có kế thừa lại các ưu điểm nổi bật của hai đề tài được nêu trên

và đồng thời cũng khắc phục được phần nào những hạn chế như là sử dụng thuật toán để mã hoá mật khẩu người dùng, sử dụng kĩ thuật JWT để thực hiện xác thực

và phân quyền

Trang 17

2

1.2 MỤC TIÊU ĐỀ TÀI

Đề tài hướng đến mục tiêu là tạo ra một trang web bán hàng và tích hợp thêm

hệ thống POS với đầy đủ chức năng với các tính năng như:

- Đăng nhập và đăng ký tài khoản mới

- Xem chi tiết các sản phẩm

- Mua hàng trực tuyến trên web

- Xem chi tiết giỏ hàng và các đơn hàng đã mua

- Các tính năng liên quan đến cập nhật và xem chi tiết thông tin người dùng

- Hệ thống POS cho người quản lý cửa hàng: xem chi tiết các đơn hàng, cập nhật, xóa,…

Chỉ áp dụng được các biện pháp bảo mật ở mức cơ bản như là xác thực và phân quyền người dùng Chưa áp dụng được các kỹ thuật bảo mật nâng cao mà framework hỗ trợ

1.5 PHƯƠNG PHÁP NGHIÊN CỨU

Phương pháp tổng hợp tài liệu lý thuyết

Trang 18

3

CHƯƠNG 2 CƠ SỞ LÝ THUYẾT

Giới thiệu về phần mềm sử dụng để thực hiện đề tài, lý thuyết về web như là mô hình MVC, thuật toán Bcrypt, kỹ thuật JWT, và việc thiết kế cơ

sở dữ liệu

CHƯƠNG 3 THIẾT KẾ VÀ THỰC HIỆN

Giới thiệu chi tiết về các tính năng của Backend, giao diện của Frontend và các thiết kế liên quan đến database

CHƯƠNG 4 KẾT QUẢ THỰC HIỆN

Kết quả sau khi hoàn thành đồ án

CHƯƠNG 5 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN

Kết quả đạt được so với mục tiêu đề ra ban đầu, những nhược điểm

và hạn chế của đề tài để đưa ra kết luận và hướng phát triển trong tương lai

Trang 19

Phần mềm VS Code là một ứng dụng phổ biến hỗ trợ các lập trình viên có thể soạn thảo code để thực hiện một chức năng hoặc một tác vụ một cách nhanh chóng VS Code nó có thể hoạt động tốt trên nhiều nền tảng và nhiều thiết bị có cấu hình khác nhau [4]

MongoDB Compass cung cấp tính năng đồ họa mạnh mẽ cho người dùng

mà không cần ngôn ngữ truy vấn Phần mềm này cho phép hiển thị cấu trúc và phân tích các bản ghi trong cơ sở dữ liệu một cách nhanh chóng MongoDB là một NoSQL cho nên nó cho phép người dùng có thể lưu trữ với nhiều cấu trúc dữ liệu khác nhau và không yêu cầu ràng buộc về mối quan hệ giữa các bảng trong cơ sở

dữ liệu [5]

Trang 20

5

2.2 LÝ THUYẾT BACKEND

2.2.1 Kiến trúc MVC

Hình 2.1: Kiến trúc MVC.[6]

MVC (Model-View-Controller) là mô hình được sử dụng phổ biến để thiết

kế các chức năng Backend Mô hình MVC gồm có ba thành phần chính, mỗi phần

sẽ đảm nhận và thực hiện những nhiệm rụ riêng tuy các phần hoạt động độc lập với nhau nhưng giữa chúng vẫn có sự kết nối chặt chẽ Ba thành phần của mô hình gồm:

- Khối model: khối này thực hiện các công việc liên quan đến database

- Khối view: khối này có chức năng hiển thị dữ liệu và cho phép người dùng

có thể thao tác trên UI để gởi đi các yêu cầu

- Khối controller: khối này thực hiện chức năng điều phối các yêu cầu nhận được từ phía máy khách và tương tác với khối model để lấy dữ liệu.[6]

Trang 21

6

Luồng hoạt động trong của kiến trúc MVC: [7]

Hình 2.2: Luồng hoạt động của kiến trúc MVC.[7]

Khi một yêu cầu được gửi đến Server từ phía máy khách sẽ bị khối điều phối chặn lại để kiểm tra xem đó là sự kiện hay URL request

Tiếp đến khối điều phối sẽ tiếp nhận đầu vào của user rồi giao tiếp với khối model để lấy dữ liệu

Khối model tháo tác vưới database để lấy dữu liệu và trả lại cho khối điều phối để trả lại dữ liệu mà máy khách yêu cầu

2.2.2 Thuật toán Bcrypt

Hashing là một kỹ thuật băm mật khẩu mà trong đó nó biến đổi mật khẩu thành một chuỗi và chuỗi này không thể giải mã được Hệ thống sẽ lấy thông tin của người dùng và đem đi mã hoá sau đo lấy kết quả này để so sánh với thông tin được lưu trong database và trả về kết quả khi thực hiện xác thực [8]

Tuy nhiên nếu như chỉ sử dụng hashing để băm mật khẩu điều này có thể không đạt độ bảo mật cao mà vẫn có thể bị tấn công bởi: rainbow table attacks và brute force attacks Để tăng độ bảo mật thông tin ngoài dùng kĩ thuật hashing cần phải sử dụng thêm cả salting và stretching

Salting là kỹ thuật mà trong đó mật khẩu trước khi được băm nó sẽ được thêm vào một chuỗi dữ liệu Kỹ thuật salting làm cho mật khẩu của người dùng trở nên dài và độ phức tạp cao hơn Salting làm cho các tấn công rainbow table attacks

Trang 22

7

trở nên vô dụng và mỗi dữ liệu đầu vào sẽ được thêm một dãy salting ngẫu nhiên

và không trùng nhau, điều này đảm bảo rằng hai người dùng có cùng một mật khẩu vẫn sẽ không trùng nhau sau khi băm [8]

Để có thể chống lại cái tấn công về brute force thì cần sử dụng thêm stretching Stretching là kỹ thuật nhằm để nâng cao độ phức tạp của thuật toán Để đạt được điều này thì quá trình băm sẽ được lặp lại hàng nghìn lần [8]

Bcrypt được đề xuất bởi Niels Provos và David Mazières Thuật toán Bcrypt

là sự kết hợp của hashing, stretching và salting

Thuật toán Bcrypt được thiết kế để chậm hơn các thuật toán băm thông thường, điều này làm tăng khả năng chống lại các tấn công brute-force và rainbow table Linh động hơn trong việc cấu hình hash Tuy nhiên do quá trình băm chậm, Bcrypt đòi hỏi nhiều tài nguyên hơn so với các thuật toán băm nhanh hơn Điều này

có thể ảnh hưởng đến hiệu suất của hệ thống trong môi trường có nhu cầu xử lý lớn [8]

2.2.3 Kỹ thuật JWT

JWT (JSON Web Token), một token JWT gồm ba phần: header, payload và signature, các thành phần này được phân chia thông qua dấu “.” [9]

Hình 2.3: Ba phần chính của JWT.[9]

Trang 23

8

Header gồm 2 thành phần chính: thuật toán và kiểu token [10]

Header của JWT sẽ có dạng như sau.[11]

{

"alg": "HS256",

"typ": "JWT"

}

Đoạn mã sẽ được encode để làm thành phần đầu tiên của mã JWT

Payload trong JWT chứa các claims Claims dùng để chỉ các tác nhân có quyền truy cập đến tài nguyên của hệ thống hay không Mỗi claims sẽ có dạng Key – Value [10] Payload sau đó được mã hóa Base64Url để tạo thành phần thứ 2 của JSON Web Token

Chữ ký là phần cuối cùng của JWT, phần này dùng để xác thực danh tính của người dùng Để tạo 1 chữ ký cần phải encode phần header và payload và một khoá bí mật.[10]

Hình 2.4: Cách thực hoạt động của JWT [11]

Cách thức mà JWT xác thực và cấp quyền để truy cập:

- Ứng dụng sẽ gửi yêu cầu xác thực và phân quyền đến server

- Khi việc xác thực thành công thì máy chủ sẽ trả lại access token cho phía máy khách

Trang 24

Sử dụng thuật toán Bcrypt để băm mật khẩu trước khi lưu trữ cùng với việc kết hợp thêm JWT giúp cho trang web tăng thêm độ bảo mật và hạn chế bị tấn công nhằm vào cookie hoặc session để đánh cắp thông tin người dùng

2.2.4 Database

NoSQL là viết tắt của Non-Relational SQL, hệ cơ sở dữ liệu này được phát triển dựa trên ngôn ngữ Javasript cung cấp đa dạng các cấu trúc lưu trữ và hiện nay kiểu lưu trữ thông dụng và được sử dụng nhiều nhất là JSON [5]

Chính nhờ vào sự cải tiến về mặt tốc độ truy vấn dữ liệu mà NoSQL được xem là một trong những biện pháp khắc phục cho hệ cơ sở dữu liệu quan hệ Chính

vì NoSQL có tính năng động cao và bỏ qua các ràng buộc phức tạp cửa hệ cơ sở dữu liệu quan hệ mà nó được rất nhiều các tập đoàn công nghệ lớn sử dụng có thể

kể đến như là Google hay Facebook

MongoDB là một trong những hệ cơ sở dữ liệu NoSQL MongoDB được thiết kế với nhiều các Collection hỗ trợ việc lưu trữ dữu liệu Chính vì thế mà MongoDB cung cấp đa dạng các cấu trúc để lưu trữ dữ liệu và dạng lưu trữ phổ biến nhất là JSON.[5]

Database mà nhóm thực hiện đề tài thiết kế sẽ tuân thủ ba nguyên tắc cơ bản: tối ưu hoá cấu trúc bảng, sử dụng chỉ mục và tích hợp các cơ sở dữ liệu[12] Việc tối ưu hoá cấu trúc bảng giúp cho việc lấy và lưu dữ liệu dễ hơn, cùng với sử dụng thêm việc đánh chỉ mục để răng tốt độ truy suất và tăng hiệu suất cho trang web mỗi khi tải lại trang Ngoài ra việc tích hợp các database khác nhau còn giúp giảm việc truy cập vào database nhiều lần, điều này làm cho trang web tải thông tin mượt

mà hơn và nhanh hơn

Trang 25

10

2.2.5 Hệ thống POS

Hệ thống POS sẽ gồm 2 phần là phần cứng và phần mềm nhằm hỗ trợ doanh nghiệp trong việc bán hàng trực tiếp, trực tuyến và trong việc quản lý cửa hàng

Chức năng cơ bản của hệ thống POS:[13]

- Thống kê hàng tồn kho, đơn hàng đã bán và doanh thu đạt được

- Thực hiện xử lý các thanh toán khi mua trực tiếp tại cửa hàng hay trên web

- Thu thập thông tin người dùng và thêm nhiều tính năng khác

Với các cửa hàng trực tuyến, người mua có thể xem các sản phẩm trên website và so sanh với nhiều địa điểm bán hàng khác Khi người dũng đã tìm hiểu hết các thông tin về sản phẩm và muốn mua hàng thì có thể đưa sản phẩm đó vào giảo hàng và tiến hành thanh toán

Giao dịch sẽ được thực hiện khi người mua nhập đầy đủ thông tin thẻ (ghi nợ/tín dụng), thông tin về địa chỉ nhận hàng lên hệ thống Nếu quá trình thanh toán

có xảy ra lỗi thì số tiền này sẽ được hoàn lại cho người mua.13]

Hệ thống POS giúp cho doanh nghiệp: bán hàng hiệu quả hơn, tối ưu hoá chi phí nhân sự, quản lý hàng tồn kho, …

2.3 LÝ THUYẾT FRONTEND

2.3.1 Khái niệm React

ReactJS là một thư viện của ngôn ngữ JavaScript có linh hoạt cao trong việc xây dựng các thành phần giao diện ReactJS cung cấp khả năng phân tách các giao diện giúp cho việc phân tách các giao diện phức tạp trở nên dễ.[14]

Với việc sử dụng one-way data binding thì dữ liệu trong React được truyền

đi theo 1 chiều Thông qua props thì dữ liệu sẽ được truyền từ parent đến child, những luồng dữ liệu đơn giản thì cơ chế trên giúp lập trình viên dễ sửa lỗi, kiểm soát cũng như là nâng cấp

ReactJS phù hợp để xây dựng cácwebsite hay các ứng dụng lớn mà dữ liệu liên tục được cập nhật Ví dụ như trên ứng dụng Facebook, Zalo, …

Trang 26

Cơ chế hoạt động của Context: [14]

- Context: Để bắt đầu sử dụng Context, ta cần tạo một đối tượng Context bằng cách sử dụng React.createContext() Context được tạo ra sẽ có hai thành phần chính:

- Provider: Được sử dụng để cung cấp giá trị của Context cho các thành phần con

- Consumer: Được sử dụng để truy cập giá trị của Context trong các thành phần con

- Provider: Thành phần này bao bọc cây thành phần và cung cấp giá trị cho tất

cả các thành phần con Provider nhận một thuộc tính value chứa dữ liệu cần chia sẻ Mỗi khi giá trị value thay đổi, tất cả các thành phần Consumer bên trong nó sẽ được cập nhật lại

Trang 27

12

- Consumer: Thành phần này cho phép một thành phần con truy cập giá trị của Context Consumer sử dụng render prop (hàm con) để truy cập giá trị được cung cấp bởi Provider

- useContext Hook: Trong các thành phần functional, hook useContext có thể được sử dụng để truy cập giá trị của Context một cách trực tiếp và dễ dàng Lợi ích của Context

Giải quyết vấn đề prop drilling: Context giúp truyền dữ liệu sâu vào cây thành phần mà không cần truyền props qua từng cấp độ Điều này làm cho mã nguồn

dễ hiểu và dễ bảo trì hơn

Quản lý trạng thái toàn cục: Context đặc biệt hữu ích cho việc quản lý các trạng thái hoặc dữ liệu toàn cục như thông tin người dùng, cấu hình ứng dụng, và theme

Những lưu ý khi sử dụng Context

Hiệu suất: Việc sử dụng Context không đúng cách có thể dẫn đến việc tái render không cần thiết của các thành phần Để tránh điều này, cần chắc chắn rằng giá trị của Context chỉ thay đổi khi thực sự cần thiết

Phân tách Context: nên phân tách các Context khác nhau cho các dữ liệu khác nhau Việc này giúp đảm bảo rằng các thành phần chỉ nhận được những cập nhật cần thiết và không bị tái render không cần thiết do các thay đổi không liên quan

Context trong ReactJS giúp đơn giản hóa việc quản lý và chia sẻ dữ liệu trong các ứng dụng React phức tạp Khi được sử dụng đúng cách, nó có thể làm giảm độ phức tạp của code và tăng hiệu suất

2.3.3 Thư viện khác

Axios: hỗ trợ dựng các API sử dụng được trên nhiều nền tảng

React-hook-form và yup: hỗ trợ việc tạo và quản lý form và ngoài ra thư viện còn giúp việc validation form trở nên đơn giản và dễ dàng hơn

Trang 29

- Khối Backend: khối này chịu trách nhiệm về tiếp nhận các yêu cầu từ khối Middleware khi yêu cầu đó đã được xác thực, thực thi các xử lý logic, tương tác trực tiếp với khối Database để xử lý và trả dữ liệu về cho khối Frontend

- Khối Database: khối này đảm nhận việc lưu dữ liệu và trả lại dữ liệu khi khối Backend cần

Trang 30

15

Hình 3.2: Lưu đồ giải thuật của toàn hệ thống

Khi người dùng nhập thông tin đăng nhập nếu như thông tin đúng phía máy khách sẽ nhận được một Token Trong Token sẽ chứa các thông tin có liên quan đến việc xác thực và phân quyền, sau khi Token được xác thực thành công hệ thống

sẽ tiến hành phân quyền cho người dùng Tất cả các yêu cầu truy truy cập vào tài nguyên từ phía người dùng đều sẽ được gởi kèm một Token, nếu Token được phân quyền là user thì chỉ được truy cập vào các tài nguyên cho user ngược lại nếu là admin sẽ được phép truy cập tất cả các tài nguyên của hệ thống Khi người dùng nhấn nút đăng xuất thì Token sẽ được xoá khỏi phía máy khách và không thể truy cập vào các tài nguyên của hệ thống

3.2 DATABASE

Với đề tài này nhóm đã xây dựng cơ sở dữ liệu với các bảng để lưu trữ dữ liệu cho website Các bảng được thiết kế với các trường và kiểu dữ liệu như bảng các bảng bên dưới :

Trang 31

16

Bảng 3.1: Lưu thông tin sản phẩm

STT Tên cột Kiểu dữ liệu Null Chú thích

1 id string No Mã thể loại

2 title string No Tiêu đề

3 description string No Mô tả sản phẩm

4 productImgId string No Mã thông tin ảnh của sản phẩm

5 createdAt date No Ngày tạo

6 price number No Giá sản phẩm

7 quantity number No Số lượng

8 categoryId string No Mã loại hàng

Bảng 3.2: Lưu tài khoản của khách hàng

1 id string No Mã định danh khách hàng

2 name string No Họ và tên

3 email string No Địa chỉ email

4 password string No Mật khẩu

5 role string No Quyền để truy cập

Bảng 3.3: Thông tin đơn hàng

1 id string No Mã đơn hàng

2 userId string No Mã khách hàng

3 orderDetailId string No Mã chi tiết đơn hàng

4 totalPrice int No Tổng giá của đơn hàng

Trang 32

17

Bảng 3.4: Thông tin loại hàng hoá

2 name string No Tên thể loại

Bảng 3.5: Thông tin ảnh của sản phẩm

2 productId string No Mã sản phẩm

3 thumnail string No Ảnh thumnail của sản phẩm

4 banner string No Ảnh banner của sản phẩm

5 photos string No Ảnh của phần mô tả

Bảng 3.6: Thông chi tiết đơn hàng

2 productId string No Mã sản phẩm

3 orderId string No Mã đơn hàng

4 quantity int No Số lượng sản phẩm của đơn hàng

Trang 33

Giao diện đăng nhập: cung các hộp thoại để cho phép nhập các thông tin cần thiết để truy cập vào hệ thống cửa hàng

Giao diện đăng ký tài khoản mới: trang này sẽ chứa một biểu mẫu đăng ký

để đăng ký thành viên mới

Trang chủ: đây chính là nơi người dùng có thể truy cập các thông tin chính như sản phẩm mới hoặc các nút truy cập nhanh đến các phần khác của trang web

Trang 34

19

Trang giỏ hàng: giao diện này sẽ cho người dùng biết được các sản phẩm đã được thêm vào giỏ hàng, cùng với các tùy chọn liên quan đến thêm số lượng hay xoá sản phẩm khỏi giỏ hàng Thông tin về tổng giá và nút thanh toán cũng được hiển thị ở đây

Trang xem chi tiết sản phẩm: hiển thị những thông tin như là hình ảnh, giá cả,… và các tùy chọn mà người dùng có thể chọn

Giao diện hệ thống POS: dành cho người quản trị, giao diện này sẽ cung cấp quyền truy cập, tìm kiếm, … và các tính năng quản trị khác

Trang xem thông tin cá nhân: hiển thị thông tin cá nhân của khách hàng và nhiều tùy chọn khác

Trang xem chi tiết đơn hàng: khi người dùng đăng nhập và xem cụ thể ừng giao dịch trên cửa hàng, giao diện này sẽ hiển thị danh sách các đơn hàng đã đặt, kèm theo chi tiết về từng đơn hàng như sản phẩm, đơn giá, …

Mỗi giao diện sẽ được thiết kế sao cho dễ sử dụng, phù hợp với nhãn quan khách hàng để tạo ra được một trải nghiệm tuyệt vời cho người sử dụng và người quản trị hệ thống

3.4 BACKEND

Các tác nhân của trang web gồm có:

- Khách hàng vãng lai: sẽ có quyền đăng ký tài khoản, xem được các mặt hàng

mà cửa hàng đang kinh doanh, xem chi tiết sản phẩm, tìm kiếm thông tin theo từ khoá

- Khách hàng: có quyền xem các mặt hàng mà cửa hàng hiện đang kinh doanh, xem chi tiết sản phẩm, tìm kiếm thông tin theo từ khóa, đăng nhập, mua hàng, quản lý thông tin

- Quản trị viên: có quyền truy cập vào hệ thống POS của cửa hàng và các quyền truy cập như những khách khác

Trang 35

20

Hình 3.4: Các tác nhân của hệ thống

Dưới đây là một mô tả tổng quan về chức năng Backend của đề tài:

Đăng ký thành viên: tạo một API để nhận thông tin đăng ký từ Frontend và thực hiện kiểm tra tính hợp lệ Lưu thông tin vào database sau khi mã hóa mật khẩu Hình 3.5 là lưu đồ giải thuật

Hình 3.5: Thuật giải đăng ký thành viên

Định dạng
Số trang	71
Dung lượng	4,14 MB