Website quản lý kinh doanh thiết bị, phụ kiện công nghệ | Môn Công nghệ thông tin - Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh

lOMoAR cPSD| 58583460
BỘ GIÁO DỤC VÀ ĐÀO TẠO
TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP. HỒ CHÍ MINH
KHOA CÔNG NGHỆ THÔNG TIN
BỘ MÔN ĐỒ ÁN CÔNG NGHỆ THÔNG TIN -------------------- Đề tài
WEBSITE QUẢN LÝ KINH DOANH
THIẾT BỊ, PHỤ KIỆN CÔNG NGHỆ
GVHD: ThS. Phan Thị Huyền Trang Lớp HP:
Nhóm thực hiện: Nhóm 5 Học kỳ: 1
Năm học: 2024 - 2025
Thành phố Hồ Chí Minh, tháng ... năm 2024 lOMoAR cPSD| 58583460
BỘ GIÁO DỤC VÀ ĐÀO TẠO
TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP. HỒ CHÍ MINH
KHOA CÔNG NGHỆ THÔNG TIN --------------------
BỘ MÔN ĐỒ ÁN CÔNG NGHỆ THÔNG TIN Đề tài
WEBSITE QUẢN LÝ KINH DOANH
THIẾT BỊ, PHỤ KIỆN CÔNG NGHỆ
GVHD: ThS. Phan Thị Huyền Trang Lớp HP:
Nhóm thực hiện: Nhóm 5 Học kỳ: 1
Năm học: 2024 - 2025
Thành phố Hồ Chí Minh, tháng ... năm 2024 1 lOMoAR cPSD| 58583460 LỜI CẢM ƠN
Lời đầu tiên, chúng em xin được bày tỏ lòng biết ơn sâu sắc đến ThS. Cô Phan
Thị Huyền Trang, người thầy tận tâm và kiến thức sâu rộng, đã là nguồn động viên
và nguồn sáng tạo không ngừng cho chúng em trong hành trình học tập về Đồ án CNTT.
Trong suốt thời gian chúng em được học từ Cô, không chỉ là những buổi giảng
chất lượng, mà còn là sự chia sẻ kinh nghiệm, tận tâm hướng dẫn và sự hiểu biết sâu
sắc về ngành nghề. Thầy đã không ngần ngại chia sẻ những câu chuyện thành công
và thậm chí những thất bại, từ đó giúp chúng em nhìn nhận môn học một cách toàn
diện hơn, không chỉ là những khái niệm trên giáo trình, mà còn là những thử thách thực tế trong ngành.
Sự cam kết của Cô không chỉ dừng lại ở việc truyền đạt kiến thức, mà còn mở
rộng ra đến việc hỗ trợ chúng em vượt qua những khó khăn trong quá trình học tập.
Thậm chí, trong những buổi thảo luận và hướng dẫn dự án, Thầy đã tận tình giải
đáp mọi thắc mắc, chia sẻ kinh nghiệm thực tế và đưa ra những gợi ý xây dựng để
chúng em có thể phát triển không chỉ là sinh viên, mà còn là những chuyên gia trong lĩnh vực web.
Kiến thức mà Cô truyền đạt không chỉ là những công cụ và ngôn ngữ lập trình,
mà còn là tư duy sáng tạo, tư duy phân tích và khả năng giải quyết vấn đề. Những
kỹ năng này không chỉ quan trọng trong quá trình học tập mà còn là chìa khóa mở
cánh cửa cho chúng em vào thế giới công việc thực tế.
Chúng em nhận thức rằng hành trình học tập không phải lúc nào cũng trải qua
những khoảnh khắc suôn sẻ. Nhưng nhờ có sự hướng dẫn và khích lệ của Thầy, chúng
em đã có thêm động lực và niềm tin để vượt qua mọi khó khăn, không chỉ là để hoàn
thành bài tập mà còn để tự phát triển bản thân và định hình sự nghiệp tương lai.
Cuối cùng, chúng em xin chúc Cô sức khỏe dồi dào, hạnh phúc bền vững và thành
công nhiều hơn nữa trong sự nghiệp giáo dục. Thầy là người thầy mà chúng em tự
hào có được và chân thành cảm ơn Thầy vì những đóng góp không ngừng vào sự
phát triển của chúng em.
TP.HCM, ngày tháng năm 2024 Nhóm 5 Lê Duy Phương 22110205 Trình Quang Trung 22110256 lOMoAR cPSD| 58583460 TÓM TẮT lOMoAR cPSD| 58583460 MỤC LỤC
CHƯƠNG 1: TỔNG QUAN.............................................................................................................1 1.1.
Lý do chọn đề tài...............................................................................................................1 1.2.
Tính cấp thiết của đề tài....................................................................................................1 1.3.
Mục tiêu nghiên cứu.........................................................................................................1 1.4.
Kết quả dự kiến đạt được..................................................................................................2 1.5.
Môi trường hoạt động.......................................................................................................2 1.6.
Ràng buộc..........................................................................................................................2
CHƯƠNG 2: ỨNG DỤNG CÔNG NGHỆ REACT.JS.....................................................................3
2.1. Giới thiệu về ReactJS..............................................................................................................3
2.2. Ưu điểm của ReactJS..............................................................................................................3
2.3. Nhược điểm của ReactJS........................................................................................................3
2.4. Công cụ hỗ trợ phát triển.......................................................................................................4
2.5. Ứng dụng thực tế...................................................................................................................4
2.6. So sánh với các công nghệ khác..............................................................................................5
CHƯƠNG 3: ỨNG DỤNG CÔNG NGHỆ REACT.JS VÀO XÂY DỰNG WEBSITE “TPTECH
SHOP”..............................................................................................................................................6
3.1. Thiết kế chức năng.................................................................................................................6
3.1.1. Usecase tổng quát...........................................................................................................6
3.1.2. Chi tiết usecase................................................................................................................6
3.1.3. Đặc tả yêu cầu...............................................................................................................18
3.2. Kiến trúc ứng dụng...............................................................................................................19
3.2.1. Kiến trúc tổng quát........................................................................................................19
3.3. Thiết kế giao diện với ReactJS...............................................................................................19
3.6. Kết quả kiểm thử..................................................................................................................19
3.7. Đánh giá, tổng kết................................................................................................................19
CHƯƠNG 4: KẾT LUẬN.....................................................................................................................20
TÀI LIỆU THAM KHẢO......................................................................................................................21 lOMoAR cPSD| 58583460
CHƯƠNG 1: TỔNG QUAN
1.1. Lý do chọn đề tài
Việc lựa chọn đề tài “TPTech Shop” cho môn Đồ án CNTT của chúng em
không chỉ là một quyết định ngẫu nhiên mà còn là kết hợp của nhiều yếu tố có ý
nghĩa. Trước hết, đây là một lĩnh vực mà chúng em đặc biệt quan tâm và đam mê
– thiết bị công nghệ. Sự khao khát ứng dụng các thiết bị công nghệ trong phục
vụ đời sống là động lực mạnh mẽ để chúng em hướng đến đề tài lập trình web
của mình vào hướng này.
Ngoài ra, sự chọn lựa này cũng được hỗ trợ bởi nhu cầu ngày càng tăng về
giải pháp mua sắm trực tuyến trong lĩnh vực thiết bị công nghệ. “TPTech Shop”
không chỉ là một trang web thương mại điện tử thông thường mà còn là nơi thực
sự tận dụng sức mạnh của công nghệ để mang lại trải nghiệm mua sắm tốt nhất
cho khách hàng. Sự kết hợp giữa đam mê cá nhân và xu hướng thị trường chính
là động lực chính để chúng em chọn lựa đề tài này.
Trong quá trình phát triển trang web “TPTech Shop”, chúng em hy vọng có
cơ hội thực hiện những ý tưởng sáng tạo, từ việc tối ưu hóa trải nghiệm người
dùng đến việc tận dụng hiệu quả các công nghệ mới nhất. Điều này không chỉ
mang lại kiến thức và kỹ năng lập trình web mà còn giúp chúng em hiểu sâu hơn
về lĩnh vực thiết bị công nghệ và thị trường thương mại điện tử.
1.2. Tính cấp thiết của đề tài
Trong thời đại công nghệ 4.0, việc mua sắm trực tuyến đã trở nên phổ
biến và quan trọng hơn bao giờ hết. Từ đăng bài đến phát trực tiếp trên các mạng
xã hội như Facebook, Twitter, cùng sự xuất hiện hàng loạt website thương mại
điện tử, môi trường mua bán trực tuyến đang trở nên cạnh tranh khốc liệt. Một
website bán hàng thân thiện, dễ sử dụng và trực quan không chỉ giúp khách hàng
dễ dàng mua sắm mà còn tạo ấn tượng tốt, khiến họ muốn quay lại và giới thiệu
cho bạn bè. Vì thế, nhóm chúng em quyết định chọn đề tài “TPTech Shop” với
mục tiêu xây dựng một website hỗ trợ bán các mặt hàng công nghệ.
1.3. Mục tiêu nghiên cứu
Mục đích của đề tài “TPTech Shop” không chỉ là việc thực hành và áp dụng kiến
thức lập trình web mà chúng em đã học được, mà còn chứa đựng những mục tiêu
cụ thể nhằm mang lại giá trị thực tế cho cả người sử dụng và doanh nghiệp. Nhằm
đáp ứng nhu cầu lựa chọn các mặt hàng hiện đại từ xa, thao tác mua sắm dễ dàng,
nhanh chóng, nắm được chi tiết sản phẩm cần mua, nhiều nhãn hàng sẽ giúp
khách hàng có nhiều lựa chọn, thiết kế đơn giản dễ thao tác.
1.4. Kết quả dự kiến đạt được
Xây dựng được nền tảng trang website kinh doanh phụ kiện công nghệ, phụ
kiện máy tính, nhằm kết nối giữa những người có nhu cầu với các sản phẩm lOMoAR cPSD| 58583460
linh kiện máy tính như: chuột, bàn phím, USB, màn hình máy tính, laptop, …
và nhóm chúng em về nền tảng website đã sử dụng công nghệ ReactJS và SpringBoot.
1.5. Môi trường hoạt động Editor: Eclipse. Công nghệ: Back-End: Hibernate (JPA).
Front-End: HTML, CSS, Javascript (ReactJS). Database: mySQL. 1.6. Ràng buộc ...
PHẦN I NÀY CÁC EM ĐANG NHẦM QUA PROJECT CỦA MÔN
LẬP TRÌNH WEB RỒI. CÁC EM CHỈ TẬP TRUNG TRÌNH BÀY NỘI
DUNG LIÊN QUAN ĐẾN ĐỒ ÁN CNTT (LÀ TÌM HIỂU CÔNG NGỆ
REACT.JS VÀ ỨNG DỤNG NÓ ĐỂ XÂY DỰNG WEBSITE)
CHƯƠNG 2: ỨNG DỤNG CÔNG NGHỆ REACT.JS
2.1. Giới thiệu về ReactJS
ReactJS là một thư viện JavaScript mã nguồn mở, được phát triển bởi
Facebook (hiện tại là Meta), nhằm xây dựng giao diện người dùng (UI) dựa trên
các thành phần (components). ReactJS cho phép xây dựng các ứng dụng web
hiện đại với trải nghiệm người dùng mượt mà, cập nhật dữ liệu theo thời gian
thực mà không cần tải lại trang. Được ra mắt lần đầu vào năm 2013, ReactJS đã
nhanh chóng trở thành một trong những công cụ phổ biến nhất cho phát triển
web frontend, nhờ vào sự linh hoạt và hiệu suất cao của nó. Đang còn quá ngắn
2.2. Ưu điểm của ReactJS
- Hiệu suất cao: React sử dụng Virtual DOM để tối ưu hóa quá trình cập nhật
giao diện. Điều này giúp giảm thiểu số lần cập nhật thực sự lên DOM, từ đó
cải thiện hiệu năng của ứng dụng.
- Tái sử dụng component: React cho phép chia nhỏ giao diện thành các thành
phần độc lập, dễ dàng tái sử dụng ở nhiều nơi trong ứng dụng, giúp tăng tính
tổ chức và tiết kiệm thời gian phát triển. lOMoAR cPSD| 58583460
- Hỗ trợ tốt cho SEO: React có thể kết hợp với server-side rendering để cải
thiện khả năng tối ưu hóa công cụ tìm kiếm (SEO), điều mà các framework
khác thường gặp khó khăn.
- Cộng đồng mạnh mẽ và tài liệu phong phú: Với cộng đồng lớn, React cung
cấp nhiều tài liệu hỗ trợ, thư viện mở rộng và các công cụ phát triển giúp việc
phát triển ứng dụng dễ dàng hơn.
- JSX – Cú pháp mở rộng của JavaScript: JSX cho phép viết code JavaScript
xen lẫn với HTML, làm cho việc phát triển UI trở nên trực quan và dễ hiểu hơn.
2.3. Nhược điểm của ReactJS
- Tốc độ phát triển nhanh: Vì React và hệ sinh thái của nó phát triển liên tục,
các công cụ, thư viện đi kèm thường thay đổi nhanh chóng, gây khó khăn cho
việc duy trì và cập nhật dự án lâu dài.
- Chỉ là thư viện UI: React chỉ tập trung vào phần giao diện người dùng,
không phải là một framework hoàn chỉnh như Angular hay Vue. Do đó, lập
trình viên cần kết hợp React với các thư viện khác để xử lý routing, state
management (ví dụ: Redux, React Router).
- Cần học tập để làm quen: JSX có thể gây bối rối cho lập trình viên mới, đặc
biệt là những ai quen với việc viết HTML thuần túy. Ngoài ra, việc sử dụng
React Hook hay quản lý state phức tạp trong các ứng dụng lớn cũng đòi hỏi
nhiều thời gian để thành thạo.
2.4. Công cụ hỗ trợ phát triển
React cung cấp một số công cụ giúp lập trình viên dễ dàng phát triển, kiểm thử và gỡ lỗi ứng dụng:
• Create React App: Đây là công cụ CLI chính thức được cung cấp bởi
React, giúp thiết lập nhanh một môi trường phát triển React với cấu hình
sẵn, bao gồm Webpack, Babel, và các cài đặt cơ bản khác. Điều này giúp
lập trình viên tập trung vào việc phát triển ứng dụng mà không cần lo lắng
về cấu hình môi trường.
• React DevTools: Đây là tiện ích mở rộng dành cho trình duyệt, giúp kiểm
tra và gỡ lỗi các component React trực tiếp trong quá trình phát triển. Nó
cho phép xem cấu trúc component, kiểm tra props và state, và theo dõi sự
thay đổi của các component trong thời gian thực.
• Redux DevTools: Nếu ứng dụng sử dụng Redux để quản lý state, Redux
DevTools là một công cụ hữu ích để theo dõi và kiểm tra luồng dữ liệu
trong ứng dụng. Nó giúp ghi lại lịch sử thay đổi state và hỗ trợ timetravel
debugging, giúp quay lại trạng thái trước đó để tìm lỗi. lOMoAR cPSD| 58583460
• Storybook: Storybook là một công cụ dùng để phát triển các component
React một cách cô lập. Lập trình viên có thể xây dựng và kiểm tra các
component UI mà không cần phải chạy toàn bộ ứng dụng, giúp tăng tốc
quá trình phát triển giao diện.
• Jest và React Testing Library: React cung cấp các công cụ test như Jest
và React Testing Library để đảm bảo chất lượng của ứng dụng. Jest là một
framework kiểm thử JavaScript mạnh mẽ, trong khi React Testing Library
giúp kiểm tra các component React theo cách người dùng tương tác với chúng.
2.5. Ứng dụng thực tế
React được sử dụng bởi nhiều công ty và dự án lớn nhờ vào khả năng linh hoạt,
dễ mở rộng và hiệu suất cao của nó: •
Facebook: Là nơi phát triển React, Facebook sử dụng React để xây dựng
giao diện cho cả ứng dụng web và di động (React Native). Nhiều phần
trong Facebook như News Feed hay Messenger đều sử dụng React. •
Instagram: Toàn bộ giao diện web của Instagram được xây dựng bằng
React. Khả năng tối ưu hóa trải nghiệm người dùng và cập nhật theo thời
gian thực là những lý do chính khiến Instagram chọn React. •
Netflix: React được sử dụng trong giao diện người dùng trên nền tảng TV
của Netflix, nhờ khả năng tải nhanh và xử lý mượt mà trên nhiều thiết bị. •
Airbnb: Airbnb sử dụng React trong nhiều phần của hệ thống, từ giao
diện người dùng đến các thành phần của hệ thống quản lý đặt phòng. •
WhatsApp Web: Phiên bản web của WhatsApp cũng được xây dựng
bằng React, đảm bảo trải nghiệm người dùng mượt mà và khả năng mở rộng tốt.
2.6. So sánh với các công nghệ khác
React thường được so sánh với các framework và thư viện frontend khác như
Angular và Vue. Dưới đây là một số so sánh: •
React vs Angular: Angular là một framework toàn diện do Google phát
triển, có sẵn nhiều tính năng như routing, HTTP requests, và form
handling. Trong khi đó, React chỉ là thư viện UI, tập trung chủ yếu vào
việc xây dựng giao diện người dùng, đòi hỏi lập trình viên tích hợp thêm
các thư viện khác cho các tính năng bổ trợ. Tuy nhiên, React có lợi thế về lOMoAR cPSD| 58583460
hiệu năng nhờ Virtual DOM và dễ dàng tích hợp với các dự án nhỏ hoặc vừa. •
React vs Vue: VueJS là một framework tiến bộ, dễ học, và cung cấp nhiều
tính năng ngay từ đầu, tương tự như Angular nhưng nhẹ hơn. Vue cũng
sử dụng Virtual DOM như React, nhưng cung cấp thêm các tính năng như
directives và two-way data binding, giúp dễ dàng hơn trong việc xử lý các
form và cập nhật dữ liệu. Tuy nhiên, React lại có cộng đồng lớn và hệ
sinh thái mạnh mẽ hơn, giúp dễ dàng tìm kiếm tài liệu và thư viện hỗ trợ. •
React vs Svelte: Svelte là một đối thủ mới nổi trong lĩnh vực phát triển
frontend, khác với React ở chỗ nó biên dịch mã thành JavaScript thuần
mà không cần Virtual DOM. Điều này giúp cải thiện hiệu suất hơn so với
React trong một số trường hợp. Tuy nhiên, React vẫn được ưa chuộng nhờ
vào sự ổn định và hệ sinh thái phong phú.
CHƯƠNG 3: ỨNG DỤNG CÔNG NGHỆ REACT.JS VÀO XÂY
DỰNG WEBSITE “TPTECH SHOP”
Phần này các em đang nhầm qua báo cáo cho môn Lập trình web.
Phần này các em chỉ tập trung trình bày phần nào của website
“TPTECH SHOP” sử dụng công nghệ React.js và phân tích kỹ sử
dụng như thế nào?....
3.1. Thiết kế chức năng lOMoAR cPSD| 58583460
3.1.1 . Usecase tổng quát
Hình 3.1: Hình usecase tổng quát
3.1.2. Chi tiết usecase
3.1.2.1 . Usecase quản lý đơn hàng
Hình 3.2: Hình usecase quản lý đơn hàng
3.1.2.1.1. Usecase xác nhận đơn hàng Tên usecase Xác nhận đơn hàng. Mô tả
Quản lý đơn hàng của khách hàng. Chủ thể Admin. lOMoAR cPSD| 58583460 Dòng xử lý STT Hành động Phản hồi hệ thống 1 Click vào “Quản lý
Màn hình hiển thị thông tin đơn hàng”
các đơn hàng của từng khách hàng. 2 Click vào “Xác
Admin nhấn vào nút “Xác nhận”
nhận” để xác nhận đơn hàng
của khách hàng, hệ thống sẽ
thông báo xác nhận thành công.
Điều kiện cần Đăng nhập với tài khoản admin. Kết quả
Xác nhận đơn hàng của khách thành công.
Bảng 3.1: Usecase xác nhận đơn hàng
3.1.2.2. Usecase quản lý sản phẩm
Hình 3.3: Usecase quản lý sản phẩm
3.1.2.2.1. Usecase thêm sản phẩm Tên usecase Thêm sản phẩm. Mô tả
Thêm sản phẩm khi có sản phẩm mới được nhập. Chủ thể Admin. Dòng xử lý STT Hành động Phản hồi hệ thống lOMoAR cPSD| 58583460 1
Click vào “Thêm Hiển thị màn hình tạo sản sản phẩm” phẩm, gồm các thông tin
như: Tên sản phẩm, nội dung sản phẩm, danh mục
sản phẩm, nhãn hiệu sản phẩm, giá tiền Điều kiện cần
Đăng nhập với tài khoản admin. Kết quả
Tạo sản phẩm thành công.
Bảng 3.2: Usecase thêm sản phẩm
3.1.2.2.2. Usecase sửa sản phẩm Tên usecase Sửa sản phẩm. Mô tả
Sửa, cập nhật thông tin sản phẩm. Chủ thể Admin. Dòng xử lý STT Hành động Phản hồi hệ thống 1 Click vào “Sửa”
Hiển thị modal thông tin sản
phẩm, người dùng có thể
chỉnh sửa và nhấn “Cập
nhật” để cập nhập sản phẩm Điều kiện cần
Đăng nhập với tài khoản admin. Kết quả
Cập nhật sản phẩm thành công.
Bảng 3.3: Usecase cập nhật sản phẩm
3.1.2.2.3. Usecase xóa sản phẩm Tên usecase Xóa sản phẩm. Mô tả Xóa sản phẩm. Chủ thể Admin. Dòng xử lý STT Hành động Phản hồi hệ thống lOMoAR cPSD| 58583460 1 Click vào “Xóa”
Hiển thị modal thông báo
“bạn có muốn xóa sản phẩm
này không”, chọn “Không”
để hủy thao thác xóa, chọn
“Xóa” để thực hiện thao tác
xóa Sau khi xóa thành công
thì hệ thống sẽ thông báo
“Xóa sản phẩm thành công” Điều kiện cần
Đăng nhập với tài khoản admin. Kết quả
Xóa sản phẩm thành công.
Bảng 3.4: Usecase xóa sản phẩm
3.1.2.3 . Usecase quản lý khách hàng
Hình 3.4: Usecase quản lý khách hàng
3.1.2.3.1. Usecase thêm khách hàng Tên usecase Thêm khách hàng. Mô tả
Thêm thông tin khách hàng mới. Chủ thể Admin. Dòng xử lý STT Hành động Phản hồi hệ thống 1
Click vào “Thêm Hiển thị màn hình thêm khách hàng”
khách hàng, gồm các thông
tin như: Tên khách hàng, Số
điện thoại, giới tính. Điều kiện cần
Đăng nhập với tài khoản admin. lOMoAR cPSD| 58583460 Kết quả
Thêm khách hàng thành công.
Bảng 3.5: Usecase thêm khách hàng
3.1.2.3.2. Usecase sửa khách hàng Tên usecase Sửa khách hàng. Mô tả
Sửa, cập nhật thông tin khách hàng. Chủ thể Admin. Dòng xử lý STT Hành động Phản hồi hệ thống 1 Click vào “Sửa” Hiển thị modal thông tin
khách hàng, người dùng có
thể chỉnh sửa và nhấn “Cập
nhật” để cập nhập thông tin. Điều kiện cần
Đăng nhập với tài khoản admin. Kết quả
Cập nhật thông tin khách hàng thành công.
Bảng 3.6: Usecase sửa khách hàng
3.1.2.3.3. Usecase xóa khách hàng Tên usecase Xóa khách hàng. Mô tả Xóa sản phẩm. Chủ thể Admin. Dòng xử lý STT Hành động Phản hồi hệ thống 1 Click vào “Xóa”
Hiển thị modal thông báo
“bạn có muốn xóa khách hàng này không”, chọn
“Không” để hủy thao thác
xóa, chọn “Xóa” để thực hiện thao tác xóa Sau khi
xóa thành công thì hệ thống
sẽ thông báo “Xóa khách hàng thành công” Điều kiện cần
Đăng nhập với tài khoản admin. lOMoAR cPSD| 58583460 Kết quả
Xóa khách hàng thành công.
Bảng 3.7: Usecase xóa khách hàng
3.1.2.4 . Usecase thống kê
Hình 3.5: Usecase thống kê
3.1.2.4.1. Usecase xem thống kê Tên usecase Xem thống kê. Mô tả
Xem thông tin thống kê doanh thu của shop. Chủ thể Admin. Dòng xử lý STT Hành động Phản hồi hệ thống 1 Click vào
Màn hình hiển thị biểu đồ “Thống kê” thể hiện doanh thu sản
phẩm theo tuần, tháng theo
tùy chọn của người dùng. Điều kiện cần
Đăng nhập với tài khoản admin. Kết quả
Hiển thị biểu đồ thể hiện doanh thu.
Bảng 3.8: Usecase xem thống kê
3.1.2.5. Usecase chỉnh sửa thông tin cá nhân
Hình 3.6: Usecase chỉnh sửa thông tin cá nhân lOMoAR cPSD| 58583460
3.1.2.5.1. Usecase cập nhật thông tin cá nhân Tên usecase
Cập nhật thông tin cá nhân. Mô tả
Cập nhật lại thông tin cá nhân người dùng. Chủ thể Khách hàng, admin. Dòng xử lý STT Hành động Phản hồi hệ thống 1
Click vào ảnh đại Màn hình chuyển trang hiển diện người dùng
thị chi tiết thông tin cá nhân
và click vào mục của người dùng. “Thông tin cá nhân” 2
Click vào “Chỉnh Sẽ hiển thị modal cập nhập sửa”
thông tin tài khoản, sau khi
chỉnh sửa xong thông tin,
nhấn “Cập nhật” và hệ
thống sẽ gửi thông báo “bạn
đã cập nhập thành công” Điều kiện cần
Đăng nhập với tài khoản admin, tài khoản khách hàng. Kết quả
Cập nhật thông tin cá nhân thành công.
Bảng 3.9: Usecase cập nhật thông tin cá nhân
3.1.2.6 . Usecase đăng nhập
Hình 3.7: Usecase đăng nhập Tên usecase Đăng nhập. lOMoAR cPSD| 58583460 Mô tả
Người dùng sử dụng tài khoản đã đăng ký để đăng nhập
vào hệ thống online shop. Chủ thể Khách hàng, admin. Dòng xử lý STT Hành động Phản hồi hệ thống 1 Nhấn vào nút
Hiển thị màn hình đăng “Log In” tại nhập vào trang web. trang chủ 2 Nhập tài khoản Nhập tài khoản và mật đã đăng ký và khẩu, sau đó nhấn nút click “Đăng
“Đăng nhập” hệ thống sẽ nhập”
thông báo đăng nhập thành
công khi người dùng nhập
đúng tài khoản và mật khẩu.
Chuyển người dùng về lại trang chủ. Điều kiện cần
Đã có tài khoản admin hoặc tài khoản khách hàng. Kết quả Đăng nhập thành công.
Bảng 3.10: Usecase đăng nhập
3.1.2.7. Usecase đăng xuất
Hình 3.8: Usecase đăng xuất Tên usecase Đăng xuất. Mô tả
Người dùng đăng xuất tài khoản khỏi hệ thống. Chủ thể Khách hàng, admin. Dòng xử lý STT Hành động Phản hồi hệ thống lOMoAR cPSD| 58583460 1
Click vào ảnh đại Quay về màn hình trang diện người dùng chủ. và click vào mục “Đăng xuất” Điều kiện cần
Đã đăng nhập vào tài khoản admin hoặc tài khoản khách hàng. Kết quả
Người dùng thoát khỏi tài khoản đang đăng nhập.
Bảng 3.11: Usecase đăng xuất
3.1.2.8 . Usecase đăng ký tài khoản
Hình 3.9: Usecase đăng ký tài khoản Tên usecase Đăng ký tài khoản. Mô tả
Khách hàng đăng ký tài khoản để có thể đăng nhập vào hệ thống. Chủ thể Khách hàng. Dòng xử lý STT Hành động Phản hồi hệ thống 1 Nhấn vào nút Màn hình hiển thị trang “Đăng ký” tại đăng ký tài khoản. trang chủ 2
Nhập thông tin tài Nhập tên tài khoản, mật khoản
khẩu và nhập lại mật khẩu,
sau đó nhấn nút “Đăng ký”
hệ thống sẽ thông báo khi
người dùng đăng ký thành công. Điều kiện cần
Tài khoản đăng ký không được trùng với tài khoản đã có. Kết quả
Đăng ký tài khoản thành công.