Nghiên Cứu, Xây Dựng Phần Mềm Quản Lý Cửa Hàng Computer Caq.pdf

<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">

TRƯỜNG ĐẠI HỌC TÀI NGUYÊN VÀ MÔI TRƯỜNG HÀ NỘI

<b>KHOA CÔNG NGHỆ THÔNG TIN</b>

<b>NGHIÊN CỨU, XÂY DỰNG PHẦN MỀM QUẢN LÝ CỬAHÀNG COMPUTER CAQ</b>

</div><span class="text_page_counter">Trang 2</span><div class="page_container" data-page="2">

<b>CHƯƠNG 1: CƠ SỞ LÝ THUYẾT ... 4 </b>

1.2.Tổng quan về công cụ và ngôn ngữ nghiên cứu ... 4

1.2.1.Giới Thiệu về ngôn ngữ javascript ... 4

1.2.2.Thư viện ReactJS ... 6

1.2.3.Giới thiệu về Nodejs ... 8

1.2.4.ExpressJS ... 9

1.2.5.Visual Studio Code ... 10

<b>CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ HỆ THỐNG ... 11 </b>

2.1...Tổ ng quan về cửa hàng Computer ... 11

2.1.1...Giới thiệu về cửa hàng Computer ... 11

2.1.2.Sơ lược về nghiệp vụ khó khăn của cửa hàng Computer...11

</div><span class="text_page_counter">Trang 3</span><div class="page_container" data-page="3">

2.3.3.Usecase đặt hàng ... 16

2.3.4.Usecase quản lí danh mục ... 17

2.3.5.Usecase quản lí giỏ hàng ... 20

2.3.6.Usecase quản lí sản phẩm ... 22

2.3.7.Usecase nhắn tin trực tuyến ... 25

2.3.8.Usecase quản lí tài khoản ... 26

2.4.1.Biểu đồ tuần tự chức năng đăng kí ... 29

2.4.2.Biểu đồ tuần tự chức năng đăng nhập ... 30

2.4.3.Biểu đồ tuần tự chức năng thống kê ... 30

2.4.4.Biểu đồ tuần tự chức năng mua hàng ... 31

2.4.5.Biểu đồ tuần tự chức năng sửa giỏ hàng ... 31

2.4.6.Biểu đồ tuần tự chức năng sửa danh mục ... 32

2.4.7.Biểu đồ tuần tự chức năng sửa hóa đơn ... 32

2.4.8.Biểu đồ tuần tự chức năng sửa sản phẩm ... 33

2.4.9.Biểu đồ tuần tự chức năng sửa tài khoản ... 33

2.4.10.Biểu đồ tuần tự chức năng thêm danh mục ... 34

2.4.11.Biểu đồ tuần tự chức năng thêm sản phẩm vào giỏ hàng ... 34

2.4.12.Biểu đồ tuần tự chức năng trò chuyện ... 35

2.4.13.Biểu đồ tuần tự chức năng thêm sảm phẩm ... 35

2.4.14.Biểu đồ tuần tự chức năng xóa danh mục ... 36

2.4.15.Biểu đồ tuần tự chức năng xóa sản phẩm ... 36

</div><span class="text_page_counter">Trang 4</span><div class="page_container" data-page="4">

2.5.2.Sơ đồ hoạt động chức năng đăng kí ... 38

2.5.3.Sơ đồ hoạt động chức năng đăng nhập ... 38

2.5.4.Sơ đồ hoạt động chức năng trò chuyện...39

2.5.5.Sơ đồ hoạt động chức năng sửa danh mục...39

2.5.6.Sơ đồ hoạt động chức năng sửa sản phẩm...40

2.5.7.Sơ đồ hoạt động chức năng thêm sản phẩm vào giỏ hàng...40

2.5.8.Sơ đồ hoạt động chức năng thêm danh mục...41

2.5.9.Sơ đồ hoạt động chức năng thêm sản phẩm ...41

2.5.10. Sơ đồ hoạt động chức năng xóa danh mục ...42

2.5.11. Sơ đồ hoạt động chức năng xóa sản phẩm vào giỏ hàng ...42

2.5.12. Sơ đồ hoạt động chức năng xóa sản phẩm ...43

2.5.13. Sơ đồ hoạt động chức năng xóa tài khoản...43

2.5.14. Sơ đồ hoạt động chức năng thống kê ...44

2.5.15. Sơ đồ hoạt động chức năng sửa hóa đơn...44

2.6. Biểu đồ lớp ...45

</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5">

<b>DANH MỤC CÁC CHỮ VIẾT TẮT</b>

</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="6">

<b>DANH MỤC CÁC BẢNG</b>

Bảng 2.1. Bảng các tác nhân và chức năng ... 13

Bảng 2.2. Mô tả chức năng đăng kí ... 15

Bảng 2.3. Mô tả chức năng đăng nhập ... 16

Bảng 2.4. Mô tả chức năng thanh toán ... 17

Bảng 2.5. Mô tả chức năng thêm danh mục ... 18

Bảng 2.6. Mô tả chức năng xóa danh mục ... 18

Bảng 2.7. Mô tả chức năng sửa danh mục ... 19

Bảng 2.8. Mô tả chức năng thêm sản phẩm vào giỏ hàng ... 20

Bảng 2.9. Mô tả chức năng xóa sản phẩm trong giỏ hàng ... 21

Bảng 2.10. Mô tả chức năng sửa sản phẩm ở giỏ hàng ... 22

Bảng 2.11. Mô tả chức năng thêm sảm phẩm ... 23

Bảng 2.12. Mô tả chức năng xóa sản phẩm...24

Bảng 2.13. Mơ tả chức năng sửa sản phẩm...24

Bảng 2.14. Mô tả chức năng trò chuyện ... 25

Bảng 2.15. Mô tả chức năng sửa thông tin tài khoản ... 26

Bảng 2.16. Mô tả chức năng reset mật khẩu ... 27

Bảng 2.17. Mô tả chức năng xóa tài khoản ... 27

Bảng 2.18. Mô tả chức năng thống kê ... 28

Bảng 2.19. Mô tả chức năng sửa hóa đơn ... 28

Bảng 3.1. Bảng dữ liệu ACCOUNT ... 46

Bảng 3.2. Bảng dữ liệu CATE GORY ... 47

Bảng 3.3. Bảng dữ liệu MESSAGE ... 47

</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7">

Bảng 3.4. Bảng dữ liệu PRODUCT ... 48 Bảng 3.5. Bảng dữ liệu RECEIPT ... 49 Bảng 3.6. Bảng dữ liệu RECEIPTDETAIL ... 50

</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8">

<b> DANH MỤC HÌNH ẢNH</b>

Hình 1.1. Ngôn ngữ JavaScript[9] ... 4

Hình 1.2. Thư viện ReactJS [5] ... 6

Hình 1.3. Môi trường NodeJS [7] ... 8

Hình 1.4. Thư viện ExpressJS [6] ... 9

Hình 1.5. Trình biên soạn code Visual studio code[8] ... 10

Hình 2.1. Logo của hàng smartphoneCAQ[5] ... 11

Hình 2.2. Sơ đồ usecase Tổng quát ... 14

Hình 2.3. Sơ đồ phân rã usecase đăng kí ... 15

Hình 2.4. Sơ đồ phân rã usecase đăng nhập ... 15

Hình 2.5. Sơ đồ phân rã usecase đặt hàng ... 16

Hình 2.6. Sơ đồ phân rã usecase quản lí danh mục ... 17

Hình 2.7. Sơ đồ phân rã usecase quản lí giỏ hàng ... 20

Hình 2.8. Sơ đồ phân rã usecase quản lí sản phẩm ... 22

Hình 2.9. Sơ đồ phân rã usecase nhắn tin trực tuyến ... 25

Hình 2.10. Sơ đồ phân rã usecase quản lí tài khoản ... 26

Hình 2.11. Sơ đồ phân rã usecase thống kê ... 28

Hình 2.12. Sơ đồ phân rã usecase quản lí hóa đơn ... 28

Hình 2.12. Biểu đồ tuần tự chức năng đăng kí ... 29

Hình 2.13. Biểu đồ tuần tự chức năng đăng nhập ... 30

Hình 2.14. Biểu đồ tuần tự chức năng thống kê ... 30

Hình 2.15. Biểu đồ tuần tự chức năng mua hàng ... 31

Hình 2.16. Biểu đồ tuần tự chức năng sửa giỏ hàng ... 31

Hình 2.17. Biểu đồ tuần tự chức năng sửa danh mục ... 32

</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9">

Hình 2.18. Biểu đồ tuần tự chức năng sửa hóa đơn ... 32

Hình 2.19. Biểu đồ tuần tự chức năng sửa sản phẩm ... 33

Hình 2.20. Biểu đồ tuần tự chức năng sửa tài khoản ... 33

Hình 2.21. Biểu đồ tuần tự chức năng thêm danh mục ... 34

Hình 2.22. Biểu đồ tuần tự chức năng thêm sản phẩm vào giỏ hàng ... 34

Hình 2.23. Biểu đồ tuần tự chức năng trò chuyện ... 35

Hình 2.24. Biểu đồ tuần tự chức năng thêm sản phẩm ... 35

Hình 2.25. Biểu đồ tuần tự chức năng xóa danh mục ... 36

Hình 2.26. Biểu đồ tuần tự chức năng xóa sản phẩm ... 36

Hình 2.27. Sơ đồ hoạt động chức năng đặt hàng ... 37

Hình 2.28. Sơ đồ hoạt động chức năng đăng kí ... 38

Hình 2.29. Sơ đồ hoạt động chức năng đăng nhập ... 38

Hình 2.30. Sơ đồ hoạt động chức năng trò chuyện ... 39

Hình 2.31. Sơ đồ hoạt động chức năng sửa danh mục ... 39

Hình 2. 32. Sơ đồ hoạt động chức năng sửa sản phẩm ... 40

Hình 2.33. Sơ đồ hoạt động chức năng thêm sản phẩm vào giỏ hàng ... 40

Hình 2.34. Sơ đồ hoạt động chức năng thêm danh mục ... 41

Hình 2.35. Sơ đồ hoạt động chức năng thêm sản phẩm ... 41

Hình 2.36. Sơ đồ hoạt động chức năng xóa danh mục ... 42

Hình 2.37. Sơ đồ hoạt động chức năng thêm sản phẩm ở giỏ hàng ... 42

Hình 2.38. Sơ đồ hoạt động chức năng xóa sản phẩm ... 43

Hình 2.39. Sơ đồ hoạt động chức năng xóa tài khoản ... 43

Hình 2.40. Sơ đồ hoạt động chức năng sửa hóa đơn ... 44

Hình 2.41. Sơ đồ hoạt động chức năng thống kê ... 44

Hình 2.42. Biểu đồ lớp ... 45

Hình 3.1. Sơ đồ dữ liệu quan hệ ... 50

</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="10">

Hình 4.1. Popup đăng kí, đăng nhập ... 52

Hình 4.2. Popup giỏ hàng ... 52

Hình 4.3. Màn hình chính ... 53

Hình 4.4. Màn hình danh sách sản phẩm ... 54

Hình 4.5. Màn hình chi tiết sản phẩm ... 55

Hình 4.6. Màn hình biểu mẫu thanh toán ... 56

Hình 4.7. Màn hình thơng tin tài khoản ... 57

Hình 4.8. Màn hình quản lí hóa đơn ... 58

Hình 4.9. Màn hình chi tiết hóa đơn ... 59

Hình 4.10. Màn hình quản lí danh mục ... 60

Hình 4.11. Biểu mẫu quản lí danh mục ... 60

Hình 4.12. Màn hình quản lí sản phẩm ... 61

Hình 4.13. Biểu mẫu sản phẩm ... 61

Hình 4.14. Màn hình quản lí hóa đơn(Admin) ... 62

Hình 4.15. Màn hình quản lí tài khoản ... 62

Hình 4.16. Màn hình thống kê ... 63

Hình 4.17. Popup chat ... 63

</div><span class="text_page_counter">Trang 11</span><div class="page_container" data-page="11">

<b>MỞ ĐẦU1. Lý do chọn đề tài</b>

Ngày nay, CNTT có một vai trị vơ cùng lớn và quan trọng đối với rất nhiều lĩnh vực khoa học kỹ thuật, kinh tế, giáo dục và xã hội. Việc ứng dụng công nghệ thông tin vào những lĩnh vực ấy đã làm giảm rất nhiều thời gian và công sức trong quản lý và điều hành các xí nghiệp, công ty, nhà trường và tất cả những lĩnh vực trong xã hội. Khi internet chưa phát triển thì các hoạt động mua bán diễn ra tại các siêu thị, các khu chợ, các cửa hàng và trung tâm thương mại, việc mua bán diễn ra tại chỗ và trải nghiệm sản phẩm một cách trực tiếp, đem lại sự an tâm và tin tưởng. Nhưng với sự tiến bộ của xã hội cùng những công nghệ hiện đại thì việc mua bán ngày nay diễn ra rất thuận tiện và dễ dàng. Cùng với sự phát triển của những trang web thương mại điện tử thì mọi người có thể mua hàng hoá ở bất cứ đâu và tự do chọn lựa theo nhu cầu của bản thân. Để có thể bắt kịp xu hướng công nghệ hiện nay cửa hàng CAQcomputer cần có trang web giúp cửa hàng có thể mua bán và quản lí sản phẩm và đơn hàng một cách hiệu quả nhất. Từ nhu cầu đó tôi quyết định lựa chọn đề tài: “Nghiên cứu, xây dựng phần mềm quản lý cửa hàng CAQ Computer sử dụng ReactJS” làm đề tài tốt nghiệp của mình. Hy vọng rằng đề tài sẽ nhận được sự đánh giá tích cực của thầy cơ.

<b>2. Mục tiêu của đề tài</b>

Mục tiêu chung:

Nâng cao kiến thức chuyên môn về xây dựng website về ReactJS. Hiểu hơn về ngôn ngữ Javascript và thư viện ReactJS.

Tìm hiểu một số thư viện liên quan đến ngôn ngữ Javascript Mục tiêu cụ thể:

Ứng dụng được quy trình phát triển phần mềm quản lý cửa hàng ComputerCAQ

</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12">

Đưa ra sơ lược về các chức năng của phầm mền quản lý cửa hàng ComputerCAQ

Xây dựng thành công phầm mền quản lý cửa hàng ComputerCAQ

<b>3. Phương pháp nghiên cứu đề tài</b>

Phương pháp luận trong nghiên cứu của luận án là kết hợp giữa nghiên cứu tài liệu, quan sát và thực nghiệm:

Phương pháp thu thập, tổng hợp tài liệu: Tìm kiếm các tài liệu như tạp chí, báo cáo khoa học trong ngành ngồi ngành, thơng tin đại chúng, hình ảnh,… có liên quan về web bán máy tính , từ đó phân tích, thống kê số liệu, tổng hợp rồi chỉ ra những phần cũ cần cải tiến hoặc những phần thiếu sót, sai lệch của web bán điện thoại , đồng thời tìm ra những tính năng mới phù hợp với nhu cầu khách hàng để từ đó cải tiến những điềm yếu ban đầu và phát triển thành những tính năng mới phù hợp với nhu cầu khách hàng để từ đó cải tiến những điểm yếu ban đầu và phát triển thành những tính năng mới cần thiết cho web bán máy tính .

Phương pháp quan sát: quan sát thái độ, cách đánh giá của khách hàng đối với web và quan sát các ưu nhược điểm của dự án của các đối thủ cạnh tranh để đề ra phương án tối ưu hóa nhất cho bài tốn đã đặt ra. Phương pháp quan sát chỉ sử dụng cho các đối tượng ở hiện tại vậy nên cần quan sát liên tục quá trình phát triển web để đề ra các phương án giải quyết kịp thời

Phương pháp phân tích: dựa vào tài liệu và thông tin đã thu thập đưa ra các vấn đề gặp phải để rút ra bài toán tổng hợp từ đó phân tích từng chức năng một để làm rõ bài toán

Phương phát thực nghiệm: thực hiện cài đặt các thuật toán của luận án, chạy thử trên các tập dữ liệu được sử dụng phổ biến trong cộng đồng nghiên cứu. Kiểm tra đánh giá web trong quá trình chạy thử, đưa ra các phương án mới để kịp thời chỉnh sửa và bổ sung

</div><span class="text_page_counter">Trang 13</span><div class="page_container" data-page="13">

<b>4. Nội dung nghiên cứu</b>

Tìm hiểu về cửa hàng ComputerCAQ và nghiệp vụ hiện tại cửa hàng, khảo sát tìm kiếm nhữg ưu nhược điểm của cửa hệ thống hiện tại

Phân tích hệ thống hiện tại và đưa ra bài tốn cụ thể nhằm giải quyết những khó khăn mà hệ thống gặp phải. Thực hiện thiết kế các sơ đồ, biểu đồ, phân tích chức năng để giải quyết bài tốn

Tìm hiểu, ứng dụng các ngơn ngữ và cơng cụ lập trình vào bài tốn để xây dựng các chức năng đã đề ra.

Kiểm thử đánh giá ứng dụng đã xây dựng, đưa ra hướng giải quyết về những vấn đề gặp phải và hướng phát triển của ứng dụng

<b>5. Đối tượng và phạm vi nghiên cứu đềtài Đối tượng nghiên cứu đề tài</b>

Ngôn ngữ lập trình Javascript và thư viện ReactJS Các thư viện liên quan đến ngôn ngữ Javascript Nghiệp vụ bán hàng của cửa hàng ComputerCAQ

<b>Phạm vi nghiên cứu đề tài</b>

Phạm vi nghiên cứu nằm trong cửa hàng ComputerCAQ và Nghiệp vụ bán hàng của cửa hàng ComputerCAQ

<b>6. Cấu trúc báo cáoMở</b>

<b> đầu </b>

Chương 1: Cơ sở lý thuyết Chương 2: Phân tích hệ thống Chương 3: Thiết kế cơ sở dữ liệu

Chương 4: Xây dựng phần mềm quản lý cửa hàng Computer CAQ sử dụng

</div><span class="text_page_counter">Trang 14</span><div class="page_container" data-page="14">

<b>CHƯƠNG 1: CƠ SỞ LÝ THUYẾT </b>

</div>