Tìm hiểu reactjs và xây dựng website bán giày

4 Xem thông tin sản phẩm Xem các thông tin chitiết của sản phẩm để tiếnhành mua hàng hàng Cho phép người dùngthêm sản phẩm vào giỏhàng để mua hàng 6 Xem giỏ hàng cá nhân Cho phép người d

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

KHOA CÔNG NGHỆ PHẦN MỀM

Đồ án 1 TÌM HIỂU REACTJS VÀ XÂY DỰNG WEBSITE BÁN GIÀY

Giảng viên hướng dẫn

Ths THÁI THỤY HÀN UYỂN

Tp Hồ Chí Minh, 2022

Sinh viên thực hiện:

1 Trương Thị Kim Liên 19521748

2 Nguyễn Vũ Thành Long 19521795

NHẬN XÉT ĐỒ ÁN 1

(Của cán bộ giảng viên)

Lời cảm ơn

Sau quá trình học tập và rèn luyện tại khoa Công nghệ Phần mềm trường Đại họcCông nghệ Thông tin – ĐHQG TP.HCM, chúng em đã được trang bị những kiếnthức và những kỹ năng cơ bản để có thể hoàn thành các đồ án môn học

Đồ án 1 là môn học mang lại cho sinh viên cái nhìn mới trong việc áp dụng nhữngkiến thức đã có để giải quyết các vấn đề thực tế Môn học cũng như là một thửthách và cơ hội để sinh viên có thể rèn luyện và hoàn thiện bản thân qua nhữngkinh nghiệm, kỹ năng khi làm đồ án

Chúng em xin gửi lời cảm ơn đến cô THÁI THỤY HÀN UYỂN đã tận tình quantâm, giúp đỡ và hướng dẫn nhóm trong suốt quá trình làm đồ án Qua những lờigóp ý, chỉ bảo của cô mà nhóm có thể hoàn thành đồ án tốt hơn

Nhóm cũng xin cảm ơn tất cả các thầy cô, anh chị, bạn bè đã giúp đỡ, hỗ trợ trongsuốt quá trình nhóm hoàn thành đồ án

Trong quá trình học tập và hoàn thiện đồ án còn gặp nhiều sai sót, chúng em mongnhận được sự góp ý của quý thầy cô và các bạn để có thể hoàn thiện hơn

Chúng em xin chân thành cảm ơn!

CHƯƠNG 3: TÌM HIỂU CÁC CÔNG NGHỆ ỨNG DỤNG TRONG ĐỀ TÀI 12

CHƯƠNG I: GIỚI THIỆU CHUNG

1 Đề tài

- Tên đề tài: Tìm hiểu ReactJS và xây dựng website bán giày

- Công nghệ sử dụng:

● Front-end: ReactJS, Axios

● Back-end: Restful API, NodeJS

- Cơ sở dữ liệu: MongoDB

2 Lý do chọn đề tài

Hiện nay, thương mại điện tử đã trở nên phổ biến với các doanh nghiệp vàhầu hết người dân tại các nước phát triển và đang phát triển Không thể phủnhận những lợi ích to lớn mà nó mang lại, từ đó giúp cho thương mại điện tửtrở thành một phần không thể tách rời trong chiến lược phát triển kinh doanhcủa các doanh nghiệp

Nắm bắt được tiềm năng phát triển của thương mại điện tử trong tình hìnhdịch bệnh COVID-19 đang bùng nổ, các doanh nghiệp đã nắm bắt tình hình

và tập trung đẩy mạnh phát triển các hình thức quảng cáo, mua bán dựa trênthương mại điện tử để mang lại nhiều lợi ích cũng như tiếp cận, đáp ứng yêucầu của khách hàng một cách nhanh chóng hơn

Và các doanh nghiệp buôn bán giày cũng không bỏ qua cơ hội phát triển màthương mại điện tử mang lại Chính vì thế, nhóm quyết định thực hiện xâydựng một trang web bán giày để đáp ứng nhu cầu tìm kiếm, lựa chọn và muasắm giày cho người tiêu dùng

Ngoài ra, để có thể hòa thiện được trang web, nhóm đã tìm hiểu và quyếtđịnh sử dụng công nghệ là ReactJS vì nó đã trở nên rất phổ biến bởi nhữngtính năng linh hoạt và đơn giản cho các lập trình viên trong quá trình pháttriển phần mềm

3 Đối tượng nghiên cứu

- Người làm đề tài:

● Sinh viên đang học tập và nghiên cứu tại trường Đại học Công nghệThông tin – ĐHQG Tp Hồ Chí Minh

- Công nghệ, công cụ phát triển:

● Visual Studio Code

● ReactJS

● Restful API

● NodeJS

● MongoDB

- Thiết kế giao diện:

● Phác thảo và thiết kế giao diện sử dụng công cụ Figma

- Đối tượng trong phạm vi đề tài hướng đến:

● Quản lý hệ thống bán hàng

● Những doanh nghiệp phân phối hàng hóa trong và ngoài nước

● Người tiêu dùng trong nước và (có thể) ngoài nước

5 Phương pháp nghiên cứu

- Cách tiếp cận: Website được xây dựng dựa trên mô hình MVC trên môitrường đa nền tảng

- Phương pháp nghiên cứu:

● Phương pháp đọc tài liệu

● Phương pháp phân tích các website hiện nay đã xây dựng bằng cách

sử dụng ReactJs

● Phương pháp thực nghiệm

CHƯƠNG II:TÌM HIỂU REACTJS

1 Giới thiệu

ReactJs là một thư viện Javascript mã nguồn mở được phát triển bởiFacebook để tạo ra những trang web hấp dẫn, nhanh và hiệu quả với mã hóatối thiểu Mục đích cốt lõi của ReactJS không chỉ khiến cho trang web phảithật mượt mà còn phải nhanh, khả năng mở rộng cao và đơn giản

ReactJs phân tách các trang web thành các thành phần riêng lẻ Chính vì vậy,thay vì làm việc trên toàn bộ ứng dụng web, ReactJs cho phép một lập trìnhviên có thể phân tách giao diện người dùng phức tạp thành các thành phầnđơn giản hơn

2 Lịch sử phát triển của ReactJs

- React được tạo ra bởi Jordan Walke – một kỹ sư phần mềm củaFacebook Ông đã cho phát hành nguyên mẫu đầu tiên của React đượcgọi là “FaxJS” Nó được triển khai lần đầu tiên trên News Feed củaFacebook vào năm 2011 và sau đó trên Instagram vào năm 2012

- Nó được mở mã nguồn (open-sourced) tại JSConf US tháng 5 năm 2013

- Vào ngày 26 tháng 9 năm 2017, React 16.0 được phát hành ra côngchúng

- Vào ngày 16 tháng 2 năm 2019, React 16.8 đã được phát hành ra côngchúng Bản phát hành đã giới thiệu React Hooks

- Vào ngày 10 tháng 8 năm 2020, React v17.0 đã được phát hành ra côngchúng, đáng chú ý là bản phát hành lớn đầu tiên không có thay đổi lớnđối với API dành cho nhà phát triển React

- Phiên bản hiện tại là v18.0.1

3 Tính năng của ReactJs

Tính chất của ReactJs:

- ReactJs mang tính chất khai báo

- ReactJs rất đơn giản

- ReactJs dựa trên các thành phần riêng lẻ

- ReactJs hỗ trợ phía máy chủ

- ReactJs được ứng dụng rất rộng rãi

- ReactJs rất nhanh

- ReactJs rất dễ để học

3.1 JSX

JSX là một phần mở rộng cú pháp cho JavaScript

Trong React, thay vì sử dụng JavaScript thông thường để tạo khuôn mẫu,

nó sẽ sử dụng JSX JSX là một JavaScript đơn giản cho phép trích dẫnHTML và sử dụng các cú pháp thẻ HTML này để hiển thị các thành phầncon Cú pháp HTML được xử lý thành các lệnh gọi Javascript của ReactFramework Tuy nhiên, các nhà phát triển không nhất thiết phải sử dụngJSX trong phát triển React, nhưng có sự khác biệt lớn giữa việc viết tàiliệu React.js bằng JSX và JavaScript

3.2 Redux

Redux là một predictable state management tool cho các ứng dụngJavascript Nó giúp bạn viết các ứng dụng hoạt động một cách nhất quán,chạy trong các môi trường khác nhau (client, server, and native) và dễdàng để test Redux ra đời lấy cảm hứng từ tư tưởng của ngôn ngữ Elm

và kiến trúc Flux của Facebook Do vậy Redux thường dùng kết hợp vớiReact

3.3 Single Way Data Flow

React.js được thiết kế để chỉ hỗ trợ dữ liệu đang chảy xuôi dòng, theomột hướng Nếu dữ liệu phải chảy theo hướng khác, bạn sẽ cần các tínhnăng bổ sung

React chứa một tập hợp các giá trị bất biến được chuyển đến trình kếtxuất thành phần dưới dạng thuộc tính trong các thẻ HTML Các thànhphần không thể sửa đổi trực tiếp bất kỳ thuộc tính nào nhưng hỗ trợ chứcnăng gọi lại để thực hiện sửa đổi

3.4 Virtual DOM

React chứa một bản đại diện của DOM thực trong bộ nhớ được gọi làVirtual DOM Thao tác DOM thực chậm hơn nhiều so với VDOM vìkhông có gì được vẽ trên màn hình Khi trạng thái của bất kỳ đối tượngnào thay đổi, VDOM chỉ sửa đổi đối tượng đó trong DOM thực thay vìcập nhật toàn bộ đối tượng

Điều đó làm cho mọi thứ di chuyển nhanh chóng, đặc biệt là so với cáccông nghệ front-end khác phải cập nhật từng đối tượng ngay cả khi chỉmột đối tượng thay đổi trong ứng dụng web.

4 Lợi ích khi sử dụng ReactJs

● Phù hợp với đa dạng thể loại website: ReactJS khiến cho việc khởitạo website dễ dàng hơn bởi vì bạn không cần phải code nhiều nhưkhi tạo trang web thuần chỉ dùng JavaScript, HTML và nó đã cungcấp cho bạn đủ loại “đồ chơi” để bạn có thể dùng cho nhiều trườnghợp

● Tái sử dụng các Component: Nếu bạn xây dựng các Component đủtốt, đủ flexible để có thể thỏa các “yêu cầu” của nhiều dự án khácnhau, bạn chỉ tốn thời gian xây dựng ban đầu và sử dụng lại hầunhư toàn bộ ở các dự án sau Không chỉ riêng mỗi ReactJS mà cácframework hiện nay cũng đều cho phép chúng ta thực hiện điều đó,

ví dụ Flutter chẳng hạn

● Có thể sử dụng cho cả Mobile application: Hầu hết chúng ta đềubiết rằng ReactJS được sử dụng cho việc lập trình website, nhưngthực chất nó được sinh ra không chỉ làm mỗi đều đó Nếu bạn cầnphát triển thêm ứng dụng Mobile, thì hãy sử dụng thêm ReactNative – một framework khác được phát triển cũng chínhFacebook, bạn có thể dễ dàng “chia sẻ” các Component hoặc sửdụng lại các Business Logic trong ứng dụng

● Thân thiện với SEO: SEO là một phần không thể thiếu để đưathông tin website của bạn lên top đầu tìm kiếm của Google Bảnchất ReactJS là một thư viện JavaScript, Google Search Enginehiện nay đã crawl và index được code JavaScript, tuy nhiên bạncũng cần thêm một vài thư viện khác để hỗ trợ điều này nhé!

● Debug dễ dàng: Facebook đã phát hành 1 Chrome extension dùngtrong việc debug trong quá trình phát triển ứng dụng Điều đó giúptăng tốc quá trình release sản phẩm cung như quá trình coding củabạn.

● Công cụ phát triển web hot nhất hiện nay: Nếu bạn nhìn vào số liệuthống kê từ Google Trend ở Việt Nam ở hình bên dưới, dạo lướtqua các trang tuyển dụng hàng đầu ở Việt Nam như Topdev, Itviec,v.v bạn sẽ thấy số lượng tuyển dụng cho vị trí React Developer làcực kỳ lớn cùng với mức lương vô cùng hấp dẫn và độ phổ biếnhiện tại của ReactJS trên thị trường Việt Nam là như thế nào

CHƯƠNG 3: TÌM HIỂU CÁC CÔNG NGHỆ ỨNG DỤNG TRONG ĐỀ TÀI

1 Tổng quan về JS

1.1 Khái niệm

Javascript chính là một ngôn ngữ lập trình với khả năng đem tới sự sinh động khithiết kế website Đây là dạng ngôn ngữ theo kịch bản, dựa trên chính đối tượngphát triển có sẵn, hoặc là tự định nghĩa ra Chính vì tính tiện lợi, hiệu quả ứng dụngcao mà ngôn ngữ lập trình này được tin dùng ngày càng nhiều, ứng dụng rộng rãitrong các website hiệu quả

1.2 Ưu điểm

● Sử dụng Javascript được thực hiện từ phía khách hàng: Điều này tức là

các mã được tiến hành thực hiện thông qua bộ vi xử lý của chính ngườidùng, thay vì sử dụng trên máy chủ web Chính đặc điểm này giúp việc tiếtkiệm năng thông, đồng thời giảm những căng thẳng, hoạt động quá nhiềutrên máy chủ web dễ dàng hơn

● Là ngôn ngữ lập trình dễ dàng sử dụng: Đơn giản, dễ dàng tìm hiểu và sử

dụng là đặc điểm nổi bật của ngôn ngữ lập trình này Với những cú pháp khátương đồng với tiếng Anh thì việc sử dụng Javascript trở nên dễ dàng, dễtiếp cận hơn rất nhiều Thông qua mô hình DOM được sử dụng, cung cấp tớinhiều tính năng hữu ích, được viết sẵn đem lại khả năng đáp ứng tốt chonhững nhu cầu, những đòi hỏi khác nhau từ phía người dùng

● Đánh giá cao ở độ nhanh chóng với người dùng cuối: Việc sử dụng ngôn

ngữ JS có khả năng đảm bảo khi mã được thực hiện trên thiết bị máy tínhcủa người dùng thì quá trình xử lý, lẫn kết quả đều hoàn thành gần như ngaylập tức Thời gian cụ thể phụ thuộc vào từng nhiệm vụ cụ thể mất thời giannhất định, song thường nó rất nhanh có thể giúp vấn đề được giải quyết

● Mang tới các tính năng bổ sung cho các website: Thông qua bên thứ ba

như Grease monkey giúp đảm bảo cho các nhà phát triển ngôn ngữJavascript dễ dàng viết các đoạn mã, từ đó thực hiện trên website hiệu quảnhư mong muốn Việc mở rộng thêm các tính năng của trang web trở nênđơn giản và dễ dàng hơn rất nhiều

● Sử dụng đa dạng trên nhiều trình duyệt: Một ưu điểm nổi bật giúp JS

ngày càng được tin dùng, ứng dụng phong phú là ở khả năng sử dụng thôngqua nhiều trình duyệt khác nhau Từ các trình duyệt trên máy tính như

Chrome, tới Firefox,… hay những trình duyệt trên thiết bị di động,… đều cóthể sử dụng được đầy đủ và hiệu quả Chính vì sự thích hợp với nhiều trìnhduyệt, nhiều nền tảng khác nhau giúp nó được tin dùng nhiều hơn để đápứng tốt cho đòi hỏi của con người.

● Dễ dàng khi sử dụng với ngôn ngữ Javascript: Sử dụng JS đảm bảo dễ

học, dễ dàng phát hiện lỗi khi xuất hiện, đồng thời nó hoạt động nhanhchóng và nhẹ nhàng hơn nhiều ngôn ngữ lập trình khác Bởi thế, quá trình sửdụng có thể thích hợp với nhiều đối tượng người dùng, đem lại hiệu quả cao

và tránh những ảnh hưởng không mong muốn có thể xảy ra

● Sở hữu giao diện thân thiện, nhiều tính năng: Nếu so sánh với nhiều ngôn

ngữ lập trình khác thì việc sử dụng Javascript mang tới ưu điểm ở giao diệnthân thiện, có thể phù hợp với mọi đối tượng người dùng Đem tới tínhtương tác cao giúp quá trình ứng dụng của mỗi người có được kết quả tốtđẹp Cùng với nhiều tính năng mà ngôn ngữ này mang tới chắc chắn sẽ giúpwebsite chúng ta tạo ra có được hiệu quả sử dụng lý tưởng

2 Tổng quan về MongoDB

2.1 Khái niệm

MongoDB là một chương trình cơ sở dữ liệu mã nguồn mở được thiết kế theokiểu hướng đối tượng trong đó các bảng được cấu trúc một cách linh hoạt chophép các dữ liệu lưu trên bảng không cần phải tuân theo một dạng cấu trúc nhấtđịnh nào Chính do cấu trúc linh hoạt này nên MongoDB có thể được dùng đểlưu trữ các dữ liệu có cấu trúc phức tạp và đa dạng và không cố định (hay còngọi là Big Data)

2.2 Ưu điểm

● Ít Schema hơn: MongoDB là một cơ sở dữ liệu dựa trên Document, trong đómột Collection giữ các Document khác nhau Số trường, nội dung và kích cỡcủa Document này có thể khác với Document khác

● Cấu trúc của một đối tượng là rõ ràng

● Không có các Join phức tạp

● Khả năng truy vấn sâu hơn MongoDB hỗ trợ các truy vấn động trên cácDocument bởi sử dụng một ngôn ngữ truy vấn dựa trên Document mà mạnh

mẽ như SQL

● MongoDB dễ dàng để mở rộng.

● Việc chuyển đổi/ánh xạ của các đối tượng ứng dụng đến các đối tượng cơ sở

dữ liệu là không cần thiết

● Sử dụng bộ nhớ nội tại để lưu giữ phần công việc, giúp truy cập dữ liệunhanh hơn

3 Tổng quan về NodeJS

3.1 Khái niệm

NodeJS là một nền tảng (platform) phía Server side được xây dựng, vận hànhtrên V8 JavaScript runtime của Chrome giúp xây dựng và phát triển các ứngdụng mạng một cách nhanh chóng và có khả năng mở rộng dễ dàng

3.2 Ưu điểm

● Có tốc độ xử lý nhanh nhờ cơ chế xử lý bất đồng bộ (non-blocking) Bạn cóthể dễ dàng xử lý hàng ngàn kết nối trong khoảng thời gian ngắn nhất

● Giúp bạn dễ dàng mở rộng khi có nhu cầu phát triển website

● Nhận và xử lý nhiều kết nối chỉ với một single-thread Nhờ đó, hệ thống xử

lý sẽ sử dụng ít lượng RAM nhất và giúp quá trình xử Nodejs lý nhanh hơnrất nhiều

● Có khả năng xử lý nhiều Request/s cùng một lúc trong thời gian ngắn nhất

● Có khả năng xử lý hàng ngàn Process cho hiệu suất đạt mức tối ưu nhất

● Phù hợp để xây dựng những ứng dụng thời gian thực như các ứng dụng chat,mạng xã hội …

CHƯƠNG 4: XÂY DỰNG HỆ THỐNG

1 Mô hình Use-case

1.1 Sơ đồ Use-case

mềm

người dùng mới

thoát khỏi tài khoảnđang sử dụng

4 Xem thông tin sản phẩm Xem các thông tin chi

tiết của sản phẩm để tiếnhành mua hàng

hàng

Cho phép người dùngthêm sản phẩm vào giỏhàng để mua hàng

6 Xem giỏ hàng cá nhân Cho phép người dùng

truy cập vào giỏ hàng cánhân để xem các sảnphẩm đã thêm và tiếnhành đặt hàng

mua sản phẩm đã chọntrong giỏ hàng

hàng

Cho phép người dùngxóa sản phẩm đã chọn rakhỏi giỏ hàng

9 Xem thông tin cá nhân Cho phép người dùng

xem lại thông tin cánhân đã đăng ký từtrước

nhân

Cho phép người dùngthay đổi thông tin cánhân đã đăng ký từtrước

13 Xem danh sách đơn

hàng

Cho phép admin xemthông tin các đơn hànghiện có

14 Cập nhật đơn hàng Cho phép admin cập

nhật trạng thái của đơnhàng

15 Xem báo cáo doanh thu Cho phép admin xem

thống kê doanh thu

Điều kiện kích hoạt Người dùng khởi động hệ thống

Trạng thái hệ thống trước khi

bắt đầu use-case

- Tài khoản đã được tạo sẵn

- Thiết bị của người dùng đã được kết nối vớiinternet khi thực hiện đăng nhập

Trạng thái hệ thống sau khi thực

hiện use-case

- Người dùng đăng nhập ứng dụng thành công

Luồng sự kiện chính 1 Người dùng truy cập vào trang web

2 Người dùng nhập tài khoản, mật khẩu vàchọn lệnh đăng nhập

3 Hệ thống xác thực thông tin đăng nhập thànhcông và cho phép người dùng truy cập ứngdụng

Luồng sự kiện phụ Không

Mở rộng - Hệ thống xác thực thông tin đăng nhập không

thành công và hiển thị thông báo

+ TH1: Người dùng hủy đăng nhập

Use case dừng lại

+ TH2: Người dùng chọn lệnh quên mật khẩu.Use case tiếp tục use case 03

+ TH3: Người dùng chọn lệnh đăng ký

Use case tiếp tục use case 02

Các yêu cầu đặc biệt Không

1.4.2 Đăng ký

Mục đích Đăng ký tài khoản người dùng cho phần mềm.Người dùng Khách hàng, Admin

Điều kiện kích hoạt Người dùng khởi động phần mềm và chọn lệnh

Trạng thái hệ thống sau khi thực

hiện use-case

- Người dùng đăng ký tài khoản thành công

- Hệ thống lưu thông tin tài khoản mới vào dữliệu

Luồng sự kiện chính 1 Người dùng chọn lệnh đăng ký tài khoản

2 Người dùng nhập tài khoản mật khẩu muốnđăng ký và chọn lệnh đăng ký

3 Hệ thống xác thực thông tin tài khoản mậtkhẩu hợp lệ, tài khoản chưa từng được đăng ký

và cho phép người dùng sử dụng tài khoản đểđăng nhập vào hệ thống

4 Hệ thống lưu thông tin tài khoản mới vào dữliệu

Luồng sự kiện phụ Không

Mở rộng - Hệ thống xác thực thông tin đăng ký không

thành công và hiển thị thông báo

+ TH1: Người dùng hủy đăng ký

Use case dừng lại

+ TH2: Người dùng nhập lại thông tin

Use case quay lại bước 2

+ TH3: Người dùng chọn lệnh quay lại

Use case tiếp tục use case 01

+ TH4: Người dùng chọn lệnh quên mật khẩu.Use case tiếp tục use case 03

Các yêu cầu đặc biệt Tài khoản, mật khẩu đăng ký không được chứa

các kí tự đặc biệt và khoảng trống

1.4.3 Đăng xuất

Tên use case Đăng xuất

Mục đích Đăng xuất khỏi tài khoản đang sử dụng

- Người dùng đã đăng nhập thành công

Trạng thái hệ thống sau khi thực

hiện use-case

- Người dùng đăng xuất thành công

- Hệ thống quay trở lại màn hình đăng nhập.Luồng sự kiện chính 1 Người dùng mở màn hình thông tin cá nhân

2 Người dùng chọn lệnh đăng xuất

3 Hệ thống xác nhận người dùng có thật sựmuốn đăng xuất hay không

4 Hệ thống quay trở lại màn hình đăng nhập.Luồng sự kiện phụ Không

Mở rộng - Hệ thống xác nhận người dùng không đăng

xuất thành công

+ TH1: Người dùng hủy đăng xuất

Use case dừng lại

Các yêu cầu đặc biệt Không

1.4.4 Xem thông tin sản phẩm

Tên use case Xem thông tin sản phẩm

Mục đích Xem chi tiết thông tin sản phẩm mà người dùng

muốn muaNgười dùng Khách hàng, Admin

Điều kiện kích hoạt - Người dùng đã đăng nhập thành công vào

phần mềm

- Người dùng chọn vào sản phẩm muốn xem.Trạng thái hệ thống trước khi

bắt đầu use-case

- Người dùng đã đăng nhập thành công

- Hệ thống có đầy đủ thông tin về các sản phẩm.Trạng thái hệ thống sau khi thực

Luồng sự kiện phụ Không

Các yêu cầu đặc biệt Không

1.4.5 Thêm các sản phẩm vào giỏ hàng

STT 05

Tên use case Thêm sản phẩm vào giỏ hàng

Mục đích Thêm sản phẩm giỏ hàng để người dùng mua

- Người dùng đã đăng nhập thành công

Trạng thái hệ thống sau khi thực

hiện use-case

- Hệ thống cập nhật thông tin vào dữ liệu

Luồng sự kiện chính 1 Người dùng xem thông tin về sản phẩm

2 Người dùng chọn lệnh thêm vào giỏ hàng

3 Sản phẩm được thêm vào giỏ hàng của ngườidùng

Luồng sự kiện phụ Không

Các yêu cầu đặc biệt Không

1.4.6 Xem giỏ hàng cá nhân

Tên use case Xem giỏ hàng cá nhân

Mục đích Cho phép người dùng xem các sản phẩm đã

thêm vào giỏ hàng cá nhân

Điều kiện kích hoạt - Người dùng đã đăng nhập thành công vào

phần mềm

Trạng thái hệ thống trước khi

bắt đầu use-case

- Người dùng đã đăng nhập thành công

Trạng thái hệ thống sau khi

thực hiện use-case

Không

Luồng sự kiện chính 1 Người dùng chọn lệnh xem giỏ hàng cá

nhân ở các màn hình

2 Hệ thống truy cập vào dữ liệu

3 Hiện thông tin các sản phẩm người dùng đãthêm vào giỏ hàng

Luồng sự kiện phụ Không

Mở rộng Nếu giỏ hàng cá nhân chưa có sản phẩm nào

+ TH1: Người dùng chọn lệnh tiếp tục muahàng

Use case kết thúc quay lại màn hình trang chủ.Các yêu cầu đặc biệt Không

khi bắt đầu use-case

- Người dùng đã đăng nhập thành công

Trạng thái hệ thống sau khi

thực hiện use-case

- Hệ thống tạo đơn hàng và cập nhật dữ liệu

Luồng sự kiện chính 1 Người dùng chọn lệnh xem giỏ hàng cá nhân ở

các màn hình

2 Hệ thống truy cập vào dữ liệu

3 Hiện thông tin các sản phẩm người dùng đãthêm vào giỏ hàng

4 Người dùng chọn tất cả sản phẩm và chọn lệnhđặt hàng

5 Hệ thống tạo đơn hàng có tất cả sản phẩmtrong giỏ hàng và cập nhật dữ liệu

Luồng sự kiện phụ Luồng phụ 1:

Các bước 1 2 3 giống luồng chính

4 Người dùng chọn vào sản phẩm mà mìnhmuốn mua và chọn lệnh đặt hàng

5 Hệ thống tạo đơn hàng với các mặt hàng ngườidùng đã chọn và cập nhật dữ liệu

Mở rộng Nếu giỏ hàng cá nhân chưa có sản phẩm nào

+ TH1: Người dùng chọn lệnh tiếp tục mua hàng.Use case kết thúc quay lại màn hình trang chủ.Các yêu cầu đặc biệt Người dùng thêm ít nhất một sản phẩm vào giỏ

hàng1.4.8 Xóa sản phẩm khỏi giỏ hàng

Tên use case Xóa sản phẩm khỏi giỏ hàng

Mục đích Cho phép người dùng xóa các sản phẩm đã thêm

vào giỏ hàngNgười dùng Khách hàng

Điều kiện kích hoạt - Người dùng đã đăng nhập thành công vào phần

mềm

Trạng thái hệ thống trước

khi bắt đầu use-case

- Người dùng đã đăng nhập thành công

Trạng thái hệ thống sau khi

thực hiện use-case

- Hệ thống cập nhật dữ liệu

Luồng sự kiện chính 1 Người dùng mở giỏ hàng cá nhân.

2 Chọn tất cả mặt hàng muốn xóa khỏi giỏ hàng

và chọn lệnh xóa sản phẩm

3 Hệ thống thông báo xác nhận lựa chọn củangười dùng

4 Xác nhận xóa sản phẩm thành công và cậpnhật lại dữ liệu

Luồng sự kiện phụ Luồng phụ 1:

Các bước 1 3 giống luồng chính

2 Người dùng chọn vào sản phẩm mà mìnhmuốn xóa và chọn lệnh xóa sản phẩm

4 Hệ thống xóa các sản phẩm người dùng chọn

và cập nhật lại dữ liệu

Mở rộng Hệ thống xác nhận lựa chọn không thành công

+ TH1: Người dùng chọn lệnh không xóa sảnphẩm

Use case kết thúc quay lại màn hình trang chủ.Các yêu cầu đặc biệt Người dùng thêm ít nhất một sản phẩm vào giỏ

hàng1.4.9 Xem thông tin cá nhân

Tên use case Xem thông tin cá nhân

Mục đích Cho phép người dùng xem thông tin cá nhân của

mìnhNgười dùng Khách hàng, Admin

Điều kiện kích hoạt - Người dùng đã đăng nhập thành công vào phần

mềm

Trạng thái hệ thống trước

khi bắt đầu use-case

- Người dùng đã đăng nhập thành công

Trạng thái hệ thống sau khi

thực hiện use-case

Không

Luồng sự kiện chính 1 Người dùng mở màn hình cá nhân.

2 Người dùng chọn lệnh thông tin cá nhân

3 Hệ thống truy cập vào dữ liệu và cập nhậtthông tin người dùng trên màn hình

Luồng sự kiện phụ Không

Các yêu cầu đặc biệt Không

1.4.10 Chỉnh sửa thông tin cá nhân

Tên use case Chỉnh sửa thông tin cá nhân

Mục đích Cho phép người dùng chỉnh sửa thông tin cá nhân của

khi thực hiện use-case

- Hệ thống cập nhật lại thông tin mới của người dùngvào dữ liệu

Luồng sự kiện chính 1 Người dùng chọn chỉnh sửa thông tin cá nhân trong

màn hình thông tin cá nhân

2 Người dùng nhập những thông tin muốn thay đổi

và chọn lệnh thay đổi thông tin

3 Hệ thống xác nhận cập nhật thông tin thành công,cập nhật lại dữ liệu và quay lại màn hình thông tin cánhân

Luồng sự kiện phụ Không

Mở rộng Hệ thống xác nhận cập nhật thông tin thất bại:

TH1: Người dùng hủy thay đổi thông tin cá nhân.Use case dừng lại

TH2: Người dùng nhập lại thông tin muốn thay đổi.Use case quay lại bước 2.

Các yêu cầu đặc biệt Không

1.4.12 Xem thông tin đơn hàng

Tên use case Xem thông tin các đơn hàng

Mục đích Cho phép người dùng xem thông tin và trạng thái của

các đơn hàng đã đặtNgười dùng Khách hàng

Điều kiện kích hoạt - Người dùng đã đăng nhập thành công vào phần

Luồng sự kiện phụ Không

Tên use case Thêm sản phẩm

Mục đích Cho phép admin thêm sản phẩm

Điều kiện kích hoạt - Admin đã đăng nhập thành công vào phần

mềm

Trạng thái hệ thống trước

khi bắt đầu use-case

- Admin đã đăng nhập thành công

Trạng thái hệ thống sau khi

Luồng sự kiện phụ Không

Mở rộng Hệ thống xác nhận thêm sản phẩm thất bại

TH1: Người dùng hủy lệnh thêm sản phẩm

Use case dừng lại

Các yêu cầu đặc biệt Không

1.4.13.2 Sửa sản phẩm

Tên use case Sửa sản phẩm

Mục đích Cho phép admin sửa thông tin sản phẩm

Điều kiện kích hoạt - Admin đã đăng nhập thành công vào phần mềm.Trạng thái hệ thống trước

khi bắt đầu use-case

- Admin đã đăng nhập thành công

Trạng thái hệ thống sau

khi thực hiện use-case

- Hệ thống cập nhật lại thông tin sản phẩm vàotrong dữ liệu

Luồng sự kiện chính 1 Admin mở màn hình danh sách sản phẩm.

2 Chọn sản phẩm muốn sửa và chọn lệnh sửa sảnphẩm

3 Nhập thông tin cần thiết và nhấn lưu

4 Hệ thống xác nhận sửa thông tin sản phẩm thànhcông thành công và cập nhật lại dữ liệu

Luồng sự kiện phụ Không

Mở rộng Hệ thống xác nhận sửa thông tin sản phẩm thất bại

TH1: Người dùng hủy lệnh sửa sản phẩm

Use case dừng lại

Các yêu cầu đặc biệt Không

1.4.14 Xem danh sách đơn hang

Tên use case Xem danh sách đơn hàng

Mục đích Xem danh sách các đơn hàng

Điều kiện kích hoạt - Admin đã đăng nhập thành công vào phần mềm.Trạng thái hệ thống trước

khi bắt đầu use-case

- Admin đã đăng nhập thành công

- Hệ thống có đầy đủ thông tin về các đơn hàng.Trạng thái hệ thống sau

khi thực hiện use-case

- Hiển thị danh sách đơn hàng mà admin muốn xem

Luồng sự kiện chính 1 Admin chọn lệnh xem danh sách đơn hàng

2 Hệ thống truy cập vào dữ liệu để lấy ra thông tin