Tài liệu Xây dựng website bán đồ công nghệ với spring boot và reactjs

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN ---------- BÁO CÁO ĐỒ ÁN 1 XÂY DỰNG WEBSITE BÁN ĐỒ CÔNG NGHỆ VỚI SPRING BOOT VÀ REACTJS Giảng viên hướng dẫn: ThS. Trần Thị Hồng Yến Sinh viên thực hiện: Phạm Tấn Khang 19521670 Bùi Minh Huy 19521597 Thành phố Hồ Chí Minh, 16 tháng 06 năm 2022 ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN ---------- BÁO CÁO ĐỒ ÁN 1 XÂY DỰNG WEBSITE BÁN ĐỒ CÔNG NGHỆ VỚI SPRING BOOT VÀ REACTJS Giảng viên hướng dẫn: ThS. Trần Thị Hồng Yến Sinh viên thực hiện: Phạm Tấn Khang 19521670 Bùi Minh Huy 19521597 Thành phố Hồ Chí Minh, 16 tháng 06 năm 2022 LỜI CẢM ƠN Đầu tiên, nhóm xin gửi lời cảm ơn chân thành đến tập thể quý Thầy Cô Trường Đại học Công nghệ thông tin – Đại học Quốc gia TP.HCM và quý Thầy Cô khoa Công nghệ phần mềm đã giúp cho em có những kiến thức cơ bản làm nền tảng để thực hiện đề tài này. Đặc biệt, em xin gửi lời cảm ơn và lòng biết ơn sâu sắc nhất tới cô Trần Thị Hồng Yến (Giảng viên khoa Công Nghệ Phần Mềm). Cô đã trực tiếp hướng dẫn tận tình, sửa chữa và đóng góp nhiều ý kiến quý báu giúp em hoàn thành tốt báo cáo môn học của mình. Trong thời gian một học kỳ thực hiện đề tài, em đã vận dụng những kiến thức nền tảng đã tích lũy đồng thời kết hợp với việc học hỏi và nghiên cứu những kiến thức mới. Từ đó, em vận dụng tối đa những gì đã thu thập được để hoàn thành một báo cáo đồ án tốt nhất. Tuy nhiên, trong quá trình thực hiện, em không tránh khỏi những thiếu sót. Chính vì vậy, em rất mong nhận được những sự góp ý từ phía Cô nhằm hoàn thiện những kiến thức mà em đã học tập và là hành trang để em thực hiện tiếp các đề tài khác trong tương lai. Xin chân thành cảm ơn các quý Thầy Cô! Nhóm sinh viên thực hiện Phạm Tấn Khang Bùi Minh Huy 1 ĐỀ CƯƠNG CHI TIẾT TÊN ĐỀ TÀI: XÂY DỰNG WEBSITE BÁN ĐỒ CÔNG NGHỆ VỚI SPRING BOOT VÀ REACTJS TÊN ĐỀ TÀI TIẾNG ANH: BUILDING TECHNOLOGY SHOP WEBSITE WITH SPRING BOOT AND REACTJS Cán bộ hướng dẫn: ThS. Trần Thị Hồng Yến Thời gian thực hiện: Từ ngày: 21/02/2022 đến ngày: 10/06/2022 Sinh viên thực hiện: Phạm Tấn Khang – 19521670 Bùi Minh Huy – 19521597 Nội dung đề tài: 1. Giới thiệu đề tài: Trong thời đại chuyển giao công nghệ cộng với sự tác động của đại dịch mà người tiêu dùng chuyển thói quen mua hàng tại các cửa hàng siêu thị sang mua sắm online. Bởi vì sự tiện lợi, giá cả rõ ràng, vận chuyển đơn hàng ngày càng nhanh chóng hơn, các cửa hàng kinh doanh luôn nhận thấy được tiềm năng của việc tiếp thị và bán hàng online.Đặc biệt đối với các cửa hàng bán đồ công nghệ cần phải mở rộng hơn trong việc quảng bá các mặt hàng của mình tới khách hàng. Nhận thấy được nhu cầu của cửa hàng và tiềm năng trong việc kinh doanh online, nhóm 2 chúng em đã tiến hành xây dựng "Website bán hàng công nghệ" nhằm thúc đẩy doanh thu của cửa hàng thông qua việc bán hàng online. Phần mềm sẽ là nơi cũng cấp cho người dùng những thông tin chính xác và giá cả trực quan nhất của sản phẩm, góp phần làm cho việc mua bán các thiết bị công nghệ trong thời kì dịch bệnh trở nên dễ dàng hơn. Ngoài ra còn giúp của hàng có thể quản lý kho hàng, các đơn xuất nhập hàng và doanh thu. 2. Mục tiêu đề tài: Nắm bắt và áp dụng được framework Spring Boot và ReactJS để xây - dựng sản phẩm đề tài. Xây dựng được website bán đồ công nghệ với nội dung phong phú, giao - diện thân thiện, màu sắc hài hòa, bố cục hợp lý, đáp ứng các chức năng cần thiết của một website thương mại điện tử. Website được phát triển dựa trên VueJs. Xây dựng được website quản trị cho nhân viên của hàng với các chức - năng quản lý thông tin đa dạng và tiện dụng. Website được phát triển dựa trên ReactJs. 3. Phạm vi đề tài: • Phạm vi môi trường: o • Triển khai sản phẩm trên môi trường web. Phạm vi chức năng: o Đối với phía admin: ▪ Quản lý sản phẩm, biến thể sản phẩm. ▪ Quản lý thương hiệu, loại sản phẩm. ▪ Quản lý đơn hàng. ▪ Quản lý nhập hàng. ▪ Quản lý khuyến mãi. ▪ Quản lý tài khoản nhân viên. ▪ Thống kê. 3 o Đối với phía website: ▪ Đăng nhập, đăng ký tài khoản. ▪ Xác thực mail, quên mật khẩu. ▪ Quản lý thông tin tài khoản. ▪ Hiển thị danh sách sản phẩm, chi tiết sản phẩm. ▪ Tìm kiếm sản phẩm. ▪ Bộ lọc chi tiết sản phẩm. ▪ Chức năng giỏ hàng. ▪ Chức năng đặt hàng. ▪ Lịch sử mua hàng. 4. Đối tượng sử dụng: - Tất cả người dùng có nhu cầu mua đồ công nghệ tại cửa hàng. - Nhân viên, chủ cửa hàng. 5. Phương pháp thực hiện: - Tìm hiểu về Spring Boot, ReactJS, VueJS, PostgreSQL. - Tham khảo các website liên quan để hiểu rõ về nghiệp vụ. - Tiến hành phân tích và thiết kế hệ thống. - Tìm hiểu UX/UI và tiến hành thiết kế giao diện cho website. - Xây dựng website cho người dùng và website cho nhân viên. - Tiến hành triển khai và kiểm thử. 6. Công nghệ sử dụng: - Backend: Spring Boot - Front-end: ReactJS, VueJS - Database: PostgreSQL - Source Control: GitHub 4 7. Kết quả mong đợi: - Nắm bắt và áp dụng được các công nghệ mới để xây dựng sản phẩm đề tài. - Hiểu rõ các nghiệp vụ, chức năng của một website thương mại điện tử. - Áp dụng được các kiến thức đã học về phân tích và thiết kế hệ thống phần mềm, quy trình phát triển phần mềm, cũng như quản lý và triển khai dự án phần mềm để xây dựng website sản phẩm đề tài. - Giao diện website đẹp mắt, dễ sử dụng đối với người dùng. - Có thể thay đổi giao diện một cách linh động và mở rộng thêm các chức năng mới cho website sản phẩm đề tài để phù hợp với nhu cầu thực tiễn trong tương lai. 5 8. Kế hoạch thực hiện: Giai đoạn Thời gian - Tìm hiểu về Spring Boot và ReactJS, Chuẩn bị kiến thức về Công việc 21/02/2022 – 07/03/2022 PostgreSQL công nghệ - Phân tích, xác định, chức năng. Phân tích, thiết kế 08/03/2022 – 08/04/2021 hệ thống - Thiết kế database. - Xây dựng base source. - Thiết kế UI. - Xây dựng giao diện admin với ReactJS. - Xây dựng giao diện website với VueJS. Xây dựng ứng dụng - Xây dựng RESTful API cho các chức 09/04/2021 – 16/05/2021 năng. - Tích hợp API để hoàn thiện giao diện admin và website. - Thực hiện kiểm thử các luồng chức Kiểm thử và sửa lỗi năng. 17/05/2021 – 31/05/2021 - Tiến hành sửa lỗi phát sinh nếu có. - Cải thiện giao diện và hoàn thành ứng dụng - Viết báo cáo. Hoàn thiện báo cáo và slide thuyết 01/06/2022 – 10/06/2022 - Làm slide thuyết trình. trình 6 9. Phân công công việc: Công việc Công việc chung Mô tả công việc - Tìm hiểu công nghệ. - Phân tích, xác định, chức năng yêu cầu. - Kiểm thử. - Chuẩn bị tài liệu, viết báo cáo. - Xây dựng website bán hàng. Công việc cá nhân Phạm Tấn Khang Bùi Minh Huy - Lập trình Backend, xây - Lập trình Frontend, xây dựng dựng RESTful API. giao diện admin. - Thiết kế cơ sở dữ liệu. - Crawl data cho website. TP. HCM, ngày 10 tháng 06 năm 2022 Xác nhận của CBHD Sinh viên (Ký tên và ghi rõ họ tên) (Ký tên và ghi rõ họ tên) ThS. Trần Thị Hồng Yến Phạm Tấn Khang | Bùi Minh Huy 7 MỤC LỤC LỜI CẢM ƠN ......................................................................................................1 ĐỀ CƯƠNG CHI TIẾT .......................................................................................2 MỤC LỤC ............................................................................................................8 DANH MỤC BẢNG ..........................................................................................12 DANH MỤC HÌNH ẢNH .................................................................................15 Chương 1. GIỚI THIỆU ĐỀ TÀI ....................................................................17 1.1 Tên đề tài ..............................................................................................17 1.2 Mô tả đề tài ...........................................................................................17 1.3 Lý do chọn thiết kế Website .................................................................17 1.4 Công nghệ sử dụng ...............................................................................19 Chương 2. CƠ SỞ LÝ THUYẾT ....................................................................20 2.1 Tổng quan về ReactJS...........................................................................20 2.2 Tổng quan về VueJS .............................................................................20 2.3 Tổng quan về Spring Boot ....................................................................21 2.4 Tổng quan về Spring Data JPA ............................................................22 2.5 Tổng quan về Postgres SQL .................................................................22 2.6 Tổng quan về Cloudinary .....................................................................23 2.7 Tổng quan về Json Web Token (JWT) .................................................24 Chương 3. PHÂN TÍCH ĐẶC TẢ YÊU CẦU ................................................26 3.1 Mô tả yêu cầu ........................................................................................26 3.1.1 Yêu cầu chức năng .........................................................................26 3.1.2 Yêu cầu phi chức năng ...................................................................28 3.2 Phân tích Use case ................................................................................29 3.2.1 Use case quản lý .............................................................................29 3.2.1.1 Sơ đồ Use case .........................................................................29 3.2.1.2 Danh sách Actor ......................................................................30 3.2.1.3 Danh sách Use-case .................................................................30 3.2.1.4 Đặc tả Use-case........................................................................31 3.2.2 Use case website ............................................................................49 3.2.2.1 Sơ đồ Use case .........................................................................49 8 3.2.2.2 Danh sách Actor ......................................................................49 3.2.2.3 Danh sách Use case .................................................................50 3.2.2.4 Đặc tả Use Case .......................................................................51 Chương 4. THIẾT KẾ HỆ THỐNG ................................................................62 4.1 Kiến trúc hệ thống.................................................................................62 4.1.1 Kiến trúc hệ thống BackEnd ..........................................................62 4.1.1.1 Mô tả kiến trúc hệ thống ..........................................................62 4.1.1.2 Mô tả thành phần trong hệ thống .............................................63 4.1.2 Mô tả kiến trúc FrontEnd ...............................................................65 4.1.2.1 Phía hệ thống quản lý ..............................................................65 4.1.2.2 Phía website. ............................................................................66 Chương 5. THIẾT KẾ CƠ SỞ DỮ LIỆU ........................................................67 5.1 Sơ đồ dữ liệu .........................................................................................67 5.2 Danh sách các bảng dữ liệu ..................................................................68 5.3 Mô tả từng bảng dữ liệu ........................................................................69 5.3.1 Bảng BRAND ................................................................................69 5.3.2 Bảng CATEGORY ........................................................................69 5.3.3 Bảng ATTRIBUTE ........................................................................70 5.3.4 Bảng TAG ......................................................................................70 5.3.5 Bảng CATEGORY_ATTRIBUTE ................................................71 5.3.6 Bảng PRODUCT............................................................................71 5.3.7 Bảng VARIANT ............................................................................71 5.3.8 Bảng VARIANT_ATTRIBUTE ....................................................72 5.3.9 Bảng IMPORT ...............................................................................72 5.3.10 Bảng IMPORT_DETAIL .............................................................73 5.3.11 Bảng VOUCHER..........................................................................73 5.3.12 Bảng ORDERS .............................................................................74 5.3.13 Bảng ORDER_DETAIL ...............................................................75 5.3.14 Bảng USER ...................................................................................75 5.3.15 Bảng ROLE ..................................................................................76 5.3.16 Bảng VERIFICATION_TOKEN .................................................76 9 5.3.17 Bảng PASSWORD_RESET_TOKEN .........................................77 Chương 6. THIẾT KẾ GIAO DIỆN ................................................................78 6.1 Phía hệ thống quản lý............................................................................78 6.1.1 Sơ đồ các màn hình ........................................................................78 6.1.2 Danh sách các màn hình.................................................................79 6.1.3 Mô tả chi tiết ..................................................................................81 6.1.3.1 Màn hình quản lý phân loại .....................................................81 6.1.3.2 Màn hình thêm phân loại .........................................................82 6.1.3.3 Màn hình chỉnh sửa phân loại ..................................................83 6.1.3.4 Màn hình quản lý thương hiệu .................................................84 6.1.3.5 Màn hình tạo mới thương hiệu ................................................85 6.1.3.6 Màn hình chỉnh sửa thương hiệu .............................................87 6.1.3.7 Màn hình quản lý sản phẩm .....................................................88 6.1.3.8 Màn hình tạo mới sản phẩm ....................................................89 6.1.3.9 Màn hình chỉnh sửa sản phẩm .................................................90 6.1.3.10 Màn hình chỉnh sửa phiên bản ...............................................92 6.1.3.11 Màn hình quản lý đơn hàng ...................................................93 6.1.3.12 Màn hình xem chi tiết đơn hàng ............................................94 6.1.3.13 Màn hình xuất hóa đơn ..........................................................95 6.1.3.14 Màn hình quản lý nhập hàng ................................................96 6.1.3.15 Màn hình tạo mới đơn nhập ...................................................97 6.1.3.16 Màn hình xem chi tiết đơn nhập ............................................98 6.1.3.17 Màn hình xuất đơn nhập ........................................................99 6.1.3.18 Màn hình quản lý tài khoản khách hàng ............................. 100 6.1.3.19 Màn hình quản lý tài khoản nhân viên ............................... 100 6.1.3.20 Màn hình tạo mới tài khoản nhân viên ............................... 101 6.1.3.21 Màn hình quản lý khuyến mãi ............................................ 102 6.1.3.22 Màn hình tạo mới khuyến mãi ............................................ 103 6.1.3.23 Màn hình chỉnh sửa khuyến mãi ......................................... 104 6.1.3.24 6.2 Màn hình thống kê ............................................................. 105 Phía Website ...................................................................................... 106 10 6.2.1 Sơ đồ màn hình ........................................................................... 106 6.2.2 Danh sách các màn hình.............................................................. 106 6.2.3 Chi tiết màn hình ......................................................................... 108 6.2.3.1 Trang chủ .............................................................................. 108 6.2.3.2 Xem sản phẩm theo thương hiệu .......................................... 109 6.2.3.3 Xem sản phẩm theo phân loại............................................... 110 6.2.3.4 Xem giỏ hàng ........................................................................ 111 6.2.3.5 Thông tin đặt hàng ................................................................ 112 6.2.3.6 Chi tiết sản phẩm .................................................................. 113 6.2.3.7 Lịch sử mua hàng .................................................................. 114 6.2.3.8 Thay đổi thông tin cá nhân ................................................... 114 6.2.3.9 Thay đổi mật khẩu ................................................................ 115 6.2.3.10 Đăng nhập ........................................................................... 116 6.2.3.11 Đăng ký ............................................................................... 117 6.2.3.12 Quên mật khẩu .................................................................... 118 6.2.3.13 Đặt lại mật khẩu .................................................................. 119 KẾT LUẬN ..................................................................................................... 120 TÀI LIỆU THAM KHẢO ............................................................................... 122 11 DANH MỤC BẢNG Bảng 3.1 Yêu cầu chức năng..............................................................................28 Bảng 3.2 Danh sách Actor quản lý.....................................................................30 Bảng 3.3 Danh sách use-case quản lý ................................................................31 Bảng 3.4 Đăc tả use-case đăng nhập (quản lý) ..................................................31 Bảng 3.5 Đặc tả use-case đăng xuất (quản lý) ...................................................32 Bảng 3.6 Đặc tả use-case chỉnh sửa thông tin (quản lý) ....................................33 Bảng 3.7 Đặc tả use-case đổi mật khẩu (quản lý) ..............................................34 Bảng 3.8 Đặc tả use-case quản lý phân loại sản phẩm (quản lý) .......................36 Bảng 3.9 Đặc tả use-case quản lý thương hiệu sản phẩm (quản lý) ..................37 Bảng 3.10 Đặc tả use-case quản lý sản phẩm, phiên bản (quản lý) ...................40 Bảng 3.11 Đặc tả use-case quản lý đơn hàng (quản lý) .....................................42 Bảng 3.12 Đặc tả use-case quản lý nhập hàng (quản lý) ...................................43 Bảng 3.13 Đặc tả use-case quản lý tài khoản (quản lý) .....................................45 Bảng 3.14 Đặc tả use-case quản lý khuyến mãi (quản lý) .................................47 Bảng 3.15 Đặc tả use-case thống kê (quản lý) ...................................................48 Bảng 3.16 Danh sách Actor (website) ...............................................................50 Bảng 3.17 Danh sách use case (website) ...........................................................50 Bảng 3.18 Đặc tả use case xem sản phẩm theo phân loại (website) ..................52 Bảng 3.19 Đặc tả use case xem sản phẩm theo thương hiệu (website) .............53 Bảng 3.20 Đặc tả use case xem chi tiết sản phẩm (website) ..............................54 Bảng 3.21 Đcặ tả use case giỏ hàng (website) ...................................................55 Bảng 3.22 Đặc tả use case đặt hàng (website) ...................................................56 Bảng 3.23 Đặc tả use case chỉnh sửa tài khoản (website) ..................................57 Bảng 3.24 Đặc tả use case thay đổi mật khẩu (website) ....................................58 Bảng 3.25 Đặc tả use case xem lịch sử đặt hàng (website) ...............................58 Bảng 3.26 Đặc tả use case đăng ký (website) ....................................................59 Bảng 3.27 Đặc tả use case đăng nhập (website) ................................................60 Bảng 3.28 Đặc tả use case quên mật khẩu (website) .........................................61 12 Bảng 4.1 Mô tả thành phần hệ thống BackEnd – 1............................................64 Bảng 4.2 Mô tả thành phần hệ thống BackEnd - 2 ............................................64 Bảng 4.3 Mô tả thành phần hệ thống phía quản lý ............................................65 Bảng 4.4 Mô tả thành phần hệ thống phía website ............................................66 Bảng 5.1 Dach sách các bảng dữ liệu ................................................................69 Bảng 5.2 Bảng BRAND .....................................................................................69 Bảng 5.3 Bảng CATEGORY .............................................................................70 Bảng 5.4 Bảng ATTRIBUTE .............................................................................70 Bảng 5.5 Bảng TAG ...........................................................................................70 Bảng 5.6 Bảng CATEGORY_ATTRIBUTE .....................................................71 Bảng 5.7 Bảng PRODUCT ................................................................................71 Bảng 5.8 Bảng VARIANT .................................................................................72 Bảng 5.9 Bảng VARIANT_ATTRIBUTE .........................................................72 Bảng 5.10 Bảng IMPORT ..................................................................................73 Bảng 5.11 Bảng IMPORT_DETAIL .................................................................73 Bảng 5.12 Bảng VOUCHER..............................................................................74 Bảng 5.13 Bảng ORDERS .................................................................................75 Bảng 5.14 Bảng ORDER_DETAIL ...................................................................75 Bảng 5.15 Bảng USER .......................................................................................76 Bảng 5.16 Bảng ROLE ......................................................................................76 Bảng 5.17 bảng VERFICATION_TOKEN .......................................................77 Bảng 5.18 Bảng PASSWORD_RESET_TOKEN .............................................77 Bảng 6.1 Danh sách các màn hình .....................................................................81 Bảng 6.2 Bảng mô tả màn hình quản lý phân loại .............................................82 Bảng 6.3 Bảng mô tả màn hình thêm phân loại .................................................83 Bảng 6.4 Bảng mô tả màn hình chỉnh sửa phân loại.........................................84 Bảng 6.5 Bảng mô tả màn hình quản lý thương hiệu........................................85 Bảng 6.6 Bảng mô tả màn hình tạo mới thương hiệu .......................................86 Bảng 6.7 Bảng mô tả màn hình chỉnh sửa thương hiệu .....................................87 13 Bảng 6.8 Bảng mô tả màn hình quản lý sản phẩm ............................................88 Bảng 6.9 Bảng mô tả màn hình tạo mới sản phẩm ............................................90 Bảng 6.10 Bảng mô tả màn hình chỉnh sửa sản phẩm .......................................91 Bảng 6.11 Bảng mô tả màn hình chỉnh sửa phiên bản ......................................93 Bảng 6.12 Bảng mô tả màn hình quản lý đơn hàng ..........................................94 Bảng 6.13 Bảng mô tả màn hình xem chi tiết đơn hàng ...................................95 Bảng 6.14 Bảng mô tả màn hình xuất hoá đơn .................................................95 Bảng 6.15 Bảng mô tả màn hình quản lý nhập hàng ........................................96 Bảng 6.16 Bảng mô tả màn hình tạo mới đơn nhập ..........................................97 Bảng 6.17 Bảng mô tả màn hình xem chi tiết đơn nhập ....................................98 Bảng 6.18 Bảng mô tả màn hình thống kê ...................................................... 105 Bảng 6.19 Danh sách các màn hình website ................................................... 107 Bảng 6.20 Bảng mô tả chi tiết màn hình trang chủ ......................................... 108 Bảng 6.21 Bảng mô tả chi tiết màn hình xem sản phẩm theo thương hiệu .... 110 Bảng 6.22 Bảng mô tả chi tiết màn hình xem sản phẩm theo thương hiệu .... 111 Bảng 6.23 Bảng mô tả chi tiết màn hình giỏ hàng .......................................... 112 Bảng 6.24 Bảng mô tả chi tiết màn hình thông tin đặt hàng ........................... 112 Bảng 6.25 Bảng mô tả chi tiết màn hình ......................................................... 114 Bảng 6.26 Bảng mô tả chi tiết màn hình thay đổi mật khẩu ........................... 115 Bảng 6.27 Bảng mô tả chi tiết màn hình đăng nhập ....................................... 116 Bảng 6.28 Bảng mô tả chi tiết màn hình đăng ký ........................................... 117 Bảng 6.29 Bảng mô tả chi tiết màn hình quên mật khẩu ................................ 118 Bảng 6.30 Bảng mô tả chi tiết màn hình đặt lại mật khẩu .............................. 119 14 DANH MỤC HÌNH ẢNH Hình 3.1 Sơ đồ use case quản lý ........................................................................29 Hình 3.2 Sơ đồ use-case website ........................................................................49 Hình 4.1 Kiến trúc hệ thống - BackEnd .............................................................62 Hình 4.2 Cấu trúc folder - BackEnd ..................................................................63 Hình 4.3 Cấu trúc folder phía quản lý ................................................................65 Hình 4.4 Cấu trúc folder phía website ...............................................................66 Hình 5.1 Sơ đồ dữ liệu .......................................................................................67 Hình 6.1 Sơ đồ các màn hình (quản lý) .............................................................78 Hình 6.2 Màn hình quản lý phân loại.................................................................81 Hình 6.3 Màn hình thêm phân loại ....................................................................82 Hình 6.4 Màn hình chỉnh sửa phân loại .............................................................83 Hình 6.5 Màn hình quản lý thương hiệu ............................................................84 Hình 6.6 Màn hình tạo mới thương hiệu ............................................................85 Hình 6.7 Màn hình chỉnh sửa thương hiệu.........................................................87 Hình 6.8 Màn hình quản lý sản phẩm ................................................................88 Hình 6.9 Màn hình tạo mới sản phẩm ................................................................89 Hình 6.10 Màn hình chỉnh sửa sản phẩm ...........................................................90 Hình 6.11 Màn hình chỉnh sửa phiên bản ..........................................................92 Hình 6.12 Màn hình quản lý đơn hàng ..............................................................93 Hình 6.13 Màn hình quản lý nhập hàng .............................................................96 Hình 6.14 Màn hình tạo mới đơn nhập ..............................................................97 Hình 6.15 Màn hình xem chi tiết đơn nhập .......................................................98 Hình 6.16 Màn hình thống kê ......................................................................... 105 Hình 6.17 Sơ đồ màn hình website ................................................................. 106 Hình 6.18 Màn hình trang chủ ........................................................................ 108 Hình 6.19 Màn hình xem sản phẩm theo thương hiệu .................................... 109 Hình 6.20 Màn hình xem sản phẩm theo thương hiệu .................................... 110 Hình 6.21 Màn hình giỏ hàng ......................................................................... 111 15 Hình 6.22 Màn hình thông tin đặt hàng .......................................................... 112 Hình 6.23 Màn hình chi tiết sản phẩm ............................................................ 113 Hình 6.24 Màn hình thay đổi thông tin cá nhân.............................................. 114 Hình 6.25 Màn hình thay đổi mật khẩu .......................................................... 115 Hình 6.26 Màn hình đăng nhập ....................................................................... 116 Hình 6.27 Màn hình đăng ký........................................................................... 117 Hình 6.28 Màn hình quên mật khẩu ................................................................ 118 Hình 6.29 Màn hình đặt lại mật khẩu.............................................................. 119 16 Chương 1. GIỚI THIỆU ĐỀ TÀI 1.1 Tên đề tài Tên của đề tài là “Xây dựng website bán đồ công nghệ với Spring Boot và ReactJS”. 1.2 Mô tả đề tài Tên gọi website của đề tài là GearShop. GearShop là một website hỗ trợ quản lý hàng hóa và cung cấp giải pháp bán hàng online cho cửa hàng công nghệ. Ở GearShop là nơi cung cấp một thế giới về đồ công nghệ như laptop, màn hình, chuột, bàn phím, bàn ghế thông minh, … Website cung cấp chức năng cho 2 phía người dùng chính: quản lý cửa hàng, khách hàng. Về phía quản lý GearShop cung cấp các chức năng phục vụ cho việc quản lý phân loại sản phẩm, thương hiệu, sản phẩm và phiên bản, nhập hàng hóa, quản lý các đơn hàng, khuyến mãi, người dùng trong hệ thống và cuối cùng là thống kê. Về phía đối tượng sử dụng là khách hàng thì GearShop cung cấp các tính năng như: xem danh sách sản phẩm theo phân loại, thương hiệu, lọc sản phẩm, sắp xếp, xem chi tiết sản phẩm, quản lý giỏ hàng, quản lý hồ sơ và thông tin của khách hàng nếu khách hàng đăng nhập vào hệ thống. 1.3 Lý do chọn thiết kế Website - Lý do khách quan: Cuộc cách mạng khoa học và công nghệ đã và đang diễn ra vô cùng sôi động trên toàn thế giới đã đưa thế giới bước sang một kỉ nguyên mới, kỉ nguyên của công nghệ thông tin. Việc ứng dụng tin học vào đời sống nói chung và công tác quản lý nói riêng đang phát triển mạnh mẽ, nó góp vai trò không nhỏ trong việc đưa tin học trở thành một phần không thể thiếu trong tất cả mọi nghành nghề từ văn phòng, quảng cáo, tài chính. 17 Từ khóa “e-Commerce” chắc chắn không còn xa lạ với chúng ta. Các hoạt động kinh doanh mua bán đang chuyển dần từ trực tiếp sang các đơn đặt hàng online. Điều đó đặt ra yêu cầu phải chuyển đổi mô hình kinh doanh của các cửa hàng, nhà bán lẻ nói chung và thị trường bán lẻ thiết bị điện tử nói riêng. Để có thể triển khai tốt mô hình kinh doanh mới này các cửa hàng, nhà bán lẻ phải quản lý tốt được số lượng sản phẩm trong kho của mình cũng như quản lý các hoạt động khác trong kinh doanh online để tránh mất mát về lợi nhuận. - Lý do chủ quan: Bản thân nhóm chúng em muốn xây dựng một ứng dụng gần hơn với ứng dụng thực tế, có thể giải quyết được vấn đề về việc xây dựng một cửa hàng kinh doanh online mà các cửa hàng bán đồ công nghệ mắc phải. Cùng với đó là nhu cầu sử dụng phần mềm của một thành viên trong nhóm, tụi em sẽ cố gắng phát triển thêm để có thể đưa phần mềm vào sử dụng thực tế. 18