đồ án 2 xây dựng website cửa hàng phụ kiện thú cưng

ĐẠ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 2

Xây dựng Website Cửa hàng phụ kiện thú cưng

Giảng viên hướng dẫn:Thầy Nguyễn Tấn Toàn Sinh viên thực hiện 1:Lê Hoàng Phúc

Sinh viên thực hiện 2:Đặng Hồ Anh Quân

TP HỒ CHÍ MINH, 2023

NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN

LỜI CẢM ƠN

Đầu tiên, chúng em xin gửi lời cảm ơn chân thành đến Thầy Nguyễn Tấn Toàn –giảng viên bộ môn Đồ Án 2 Thầy đã trực tiếp hướng dẫn, tận tình chia sẻ nhữngkiến thức, hỗ trợ và đóng góp những ý kiến quý báu để giúp chúng em hoàn thànhthật tốt đồ án và báo cáo của mình.

Trong thời đại công nghệ phát triển mạnh mẽ vượt bậc ngày nay, việc mua bánhàng trực tuyến là nhu cầu thiết yếu cho cả nhà cung cấp lẫn người tiêu dùng Nắmbắt được xu thế đó, nhóm chúng em quyết định chọn đề tài này nhằm cung cấpcho nhà bán hàng cũng như người dùng một website thân thiện, dễ dàng sử dụngvà đầy đủ chức năng.

Trong quá trình thực hiện đồ án, chúng em không tránh khỏi những thách thức vàsai sót, nhưng sự hỗ trợ và góp ý chân thành từ Thầy đã giúp chúng em vượt quanhững khó khăn và hoàn thiện đồ án một cách tốt nhất Chúng em xin cam kết sẽtiếp thu và áp dụng những kinh nghiệm quý báu này để nâng cao khả năng thựchiện các dự án tương lai.

Một lần nữa, chúng em xin chân thành cảm ơn Thầy Nguyễn Tấn Toàn và hy vọngsự đóng góp của thầy sẽ tiếp tục giúp đỡ và hỗ trợ chúng em trong hành trình họctập và nghiên cứu trong tương lai.

Xin chân thành cảm ơn quý thầy cô !

DANH SÁCH THÀNH VIÊN NHÓM

2.2.5.3Nhược điểm 13

CHƯƠNG 3: ĐẶC TẢ USE CASE 16

3.1Sơ đồ Use case 16

3.2Danh sách Use case 16

3.3.7Quản lý thông tin cá nhân 23

3.3.8Thanh toán hoá đơn 24

Ưu điểm của kiến trúc Client Server: 33

Nhược điểm của kiến trúc Client Server: 33

CHƯƠNG 5: THIẾT KẾ DỮ LIỆU 34

CHƯƠNG 7: CÀI ĐẶT VÀ THỬ NGHIỆM 69

7.1Môi trường cài đặt 69

7.1.1Môi trường cài đặt và thử nghiệm 69

TÓM TẮT ĐỒ ÁN

Trong thời đại công nghệ thông tin hiện nay, hình thức mua bán trực tiếp được phổbiến và được ưa chuộng nhất Điều này không chỉ giúp cho các nhà kinh doanh có thểbán hàng trực tuyến mà còn mang lại sự tiện lợi cho khách hàng khi có thể lựa chọn vàmua được sản phẩm mà mình yêu thích ngay tại nhà.

Một Website cửa hàng phụ kiện thú cưng online đáp ứng được yêu cầu của khách hàngcần phải cung cấp đầy đủ thông tin sản phẩm, hình ảnh chất lượng cao, giá cả cạnhtranh và hệ thống thanh toán đa dạng, tiện lợi Điều này giúp khách hàng có thể dễdàng tìm kiếm sản phẩm mình cần một cách nhanh chóng và thuận tiện Bên cạnh đówebsite còn cung cấp cho nhà bán hàng nhiều chức năng quản lý sản phẩm và lượngmua bán trực tiếp trên website.

Một trong những yếu tố quan trọng đối với một website là thiết kế giao diện và trangtrí website đẹp mắt, dễ sử dụng Điều này giúp thu hút khách hàng và tạo niềm tin chohọ khi mua sắm trên website Nếu website của bạn được thiết kế chuyên nghiệp và hấpdẫn, khách hàng sẽ cảm thấy thoải mái hơn khi mua sắm trên trang web và sẽ đánh giácao sản phẩm hơn.

CHƯƠNG 1: GIỚI THIỆU ĐỀ TÀI

1.1 Đặt vấn đề

Ngày nay, số lượng người yêu động vật là rất lớn nên nhu cầu mua sắm chothú cưng của họ cực kỳ nhiều Bên cạnh đó, xu hướng thị trường bây giờ là muasắm trực tuyến, người mua có thể tiến hành mua sắm ở bất kỳ vị trí nào, thời giannào Hiện nay có nhiều website bán hàng cho thú cưng nhưng ít nơi có thể đáp ứngđủ nhu cầu hiện tại.

- Công cụ quản lý dự án: Github, Zalo

- Công cụ soạn thảo văn bản: Microsoft Word- Công cụ deploy: Railway, Vercel

- Công cụ lưu trữ dữ liệu: Cloudinary, PostgreSQL

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

- Tìm hiểu các phương pháp hiện có.

- Tham khảo các Website cửa hàng thú cưng và xác định các tính năng chung cần có.

- Tìm hiểu các công nghệ sử dụng cho đề tài.- Triển khai theo kế hoạch sẵn có.

- Kiểm thử và sửa lỗi (nếu có).- Thiết kế giao diện, cơ sở dữ liệu.

CHƯƠNG 2: TỔNG QUAN

2.1 Tổng quan về đồ án

Website Pescue Shop là một cửa hàng trực tuyến bán phụ kiện cho thú cưng,cung cấp đầy đủ tính năng cần thiết của một website thương mại điện tử bao gồmcho cả người dùng lẫn người bán hàng Với giao diện thân thiện, dễ tiếp cận ngườidùng.

2.1.1 Mô tả quy trình thực hiện các công việc chính

● Bước 1: Xác định các yêu cầu:

- Phân tích khả thi quy mô thực hiện.- Tìm hiểu quy trình nghiệp vụ.

- Tham khảo và trải nghiệm các ứng dụng liên quan.- Khảo sát người dùng qua mạng.

- Xác định và lập danh sách các bảng dữ liệu cần thiết cho các yêu cầu củaphần mềm

- Xây dựng sơ đồ logic cụ thể của phần mềm● Bước 4: Thiết kế giao diện

- Lập ra danh sách các màn hình khi người dùng tương tác với phần mềm- Mô tả các đối tượng trên từng màn hình

- Xác định những chức năng hiển thị trên từng màn hình● Bước 5: Code và kiểm thử

- Code trình bày theo mô hình 3 lớp và được phân chia theo các nhiệm vụ yêu cầu.

- Testcase rõ ràng để kiểm tra tính hiệu quả của hệ thống.

2.2.1.2 Cách thức hoạt động

● Người dùng có thể tạo mới dự án hoặc mở dự án đã tồn tại trên Figma.● Figma cung cấp một giao diện dễ sử dụng, với các công cụ vẽ và chỉnh sửa

các yếu tố trên giao diện.

● Người dùng có thể tạo component (thành phần) để tái sử dụng và duy trì tính nhất quán trên toàn bộ dự án.

● Figma cũng hỗ trợ tính năng cộng tác đồng thời, cho phép nhiều người dùng làm việc trên cùng một dự án và theo dõi sự thay đổi trong thời gian thực.

● Cần kết nối internet để truy cập và làm việc.

● Có thể hạn chế một số tính năng so với các ứng dụng thiết kế giao diện truyền thống.

● Phiên bản miễn phí của Figma có giới hạn băng thông lưu trữ và số lượng dự án.

2.2.2 Ngôn ngữ lập trình TypeScript

TypeScript là một phiên bản cao hơn của JavaScript, được thiết kế để xâydựng các ứng dụng lớn và phức tạp Nó kế thừa nhiều khái niệm từ Java và C#,TypeScript là ngôn ngữ tĩnh (Static typed) có nghĩa là nó nghiêm ngặt và có trật tựtrái ngược với free-type Nó còn được bổ sung thêm lớp hướng đối tượng mà điềunày không có ở Javascript.

Với TypeScript, ta có thể bê nguyên xi code JavaScript vào trong cùng mộtfile và chạy cùng nhau bình thường, bởi vì TypeScript duy trì cú pháp của JavaScriptvà mở rộng nó bằng một loạt tính năng mới Nhờ đó mà hiệu năng làm việc đượctăng lên đáng kể.

Hình 2 TypeScript

2.2.2.1 Lịch sử hình thành TypeScript

TypeScript là một dự án kéo dài hơn 3 năm của Microsoft nhằm tạo ra mộtngôn ngữ để mở rộng JavaScript Giúp nó trở nên phù hợp hơn với những ứngdụng lớn, nhưng vẫn quen thuộc với cấu trúc ngôn ngữ JS hiện tại để mọi người cóthể học nhanh hơn Trưởng nhóm dự án này là Anders Hejlsberg, cha đẻ của C#,Turbo Pascal và Delphi.

2.2.2.2 Ưu nhược điểm của TypeScript

Ưu điểm của Typescript:

● Dễ dàng hơn trong phát triển các dự án lớn, được hỗ trợ bởi các JavascriptFramework lớn.

● Hầu hết các cú pháp hướng đối tượng đều được hỗ trợ bởi Typescript như kếthừa, đóng gói, constructor, abstract, interface, implement, override…v.v

● Cách tổ chức code rõ ràng hơn, hỗ trợ cơ chế giúp kiến trúc hệ thống code hướngmodule, hỗ trợ namespace, giúp xây dựng các hệ thống lớn nơi mà nhiều lậptrình viên có thể làm việc cùng nhau một cách dễ dàng hơn.

● Hỗ trợ các tính năng mới nhất của Javascript TypeScript luôn đảm bảo việc sửdụng đầy đủ các kỹ thuật mới nhất của Javascript, ví dụ như version hiện tại làECMAScript 2015 (ES6).

● Một lợi thế của Typescript nữa là mã nguồn mở vì vậy nó miễn phí và có cộngđồng hỗ trợ rất lớn.

● Với static typing, code viết bằng TypeScript dễ dự đoán hơn, và dễ debug hơn

Nhược điểm của Typescript:

Vì là một ngôn ngữ rất dễ dàng bị lộ code nên dễ bị khai thác Hacker

có thể nhập một đoạn code bất kì vào khung console của trình duyệt, lúcnày trình duyệt sẽ hiểu rằng đoạn code đó là chính thống, nên hacker có thểgửi những request lên server một cách dễ dàng.

2.2.3 Angular

2.2.3.1Tổng quan về Angular

Angular là một mã nguồn mở viết bằng TypeScript và được sử dụng để thiếtkế giao diện web (front – end) Angular được xây dựng, phát triển từ những năm2009 và đang duy trì cho đến nay bởi Google Đây được xem là framework frontend mạnh mẽ và chuyên dụng dành cho các lập trình viên sử dụng HTML cao cấp.

Hình 3 Angular

2.2.3.2Cách thức hoạt động

Angular được ứng dụng rộng rãi để xây dựng các project Single PageApplication (ứng dụng trang đơn) Hiện tại, version stable của Angular là Angular17 (released on November 17, 2023) với TypeScript 3.6 và 3.7.

Hiện nay, Angular được các công ty lớn lựa chọn sử dụng như: Upwork,Forbes, General Motors,… Đây sẽ là cơ hội việc làm rất lớn nếu bạn sử dụng thànhthạo Angular Tuy nhiên, trước đó bạn cần nắm vững các kiến thức nền tảng vềJavaScript, CSS và HTML, cách làm việc với kiến trúc Model-View-Controller (MVC).

● Bạn có thể thuận tiện Unit Test.

● Component có thể tái sử dụng dễ dàng hơn.

● Angular có khả năng hỗ trợ cho các lập trình viên có thể viết code được íthơn cùng với nhiều chức năng hơn Từ đó giúp tiết kiệm thời gian lập trìnhvà tăng hiệu suất công việc.

● AngularJS tương thích với nhiều nền tảng khác nhau Bạn có thể dùng đượctrên nhiều loại trình duyệt khác nhau cả trong máy tính và thiết bị điệnthoại di động.

2.2.3.4Nhược điểm

● Tính bảo mật: Bản chất của Angular là một framework front-end Thông

thường, tính bảo mật của front-end thường không cao bằng back-end.Chính vì thế, bạn cần xây dựng một hệ thống kiểm tra dữ liệu sao cho việctrả về được tốt nhất khi sử dụng API.

● Khả năng an toàn: Website có thể trở nên không an toàn nếu bạn sử

dụng một số trình duyệt sở hữu tính năng Disable JavaScript

2.2.4 Spring Boot

2.2.4.1 Tổng quan về Spring Boot

Spring Spring Boot là một extension của Spring Framework giúp các lập trìnhviên loại bỏ các bước cấu hình phức tạp mà Spring bắt buộc Spring Boot là dự ánphát triển bởi ngôn ngữ Java (JAV) trong hệ sinh thái Spring framework.

Hình 4 Spring Boot

2.2.4.2 Cách thức hoạt động

Java Spring Boot (Spring Boot) là một công cụ giúp phát triển ứng dụng webvà microservices bằng Spring Framework nhanh hơn và dễ dàng hơn.

2.2.4.3 Ưu điểm

● Hội tụ đầy đủ các tính năng của Spring framework.

● Đơn giản hóa cấu hình và xây dựng được các ứng dụng độc lập có khả năngchạy bằng java-jar nhờ các dependency starter.

● Dễ dàng deploy vì các ứng dụng server được nhúng trực tiếp vào ứng dụngđể tránh những khó khăn khi triển khai lên môi trường production màkhông cần thiết phải tải file WAR.

● Cấu hình ít, tự động được hỗ trợ bất cứ khi nào cho chức năng spring nhưtăng năng suất, giảm thời gian viết code và không yêu cầu XML config.● Đa luồng

● Cung cấp nhiều plugin, số liệu, cấu hình ứng dụng từ bên ngoài

2.2.5 Phần mềm lập trình VSCode2.2.5.1 Tổng quan về VSCode

Visual Studio Code (VS Code hay VSC) là một trong những trình soạn thảo

mã nguồn phổ biến nhất được sử dụng bởi các lập trình viên Nhanh, nhẹ, hỗ trợđa nền tảng, nhiều tính năng và là mã nguồn mở chính là những ưu điểm vượt trộikhiến VS Code ngày càng được ứng dụng rộng rãi.

Hình 5 Visual Studio Code

2.2.5.2 Ưu điểm

Hỗ trợ nhiều ngôn ngữ lập trình

Visual Studio Code hỗ trợ nhiều ngôn ngữ lập trình như C/C++, C#,F#, Visual Basic, HTML, CSS, JavaScript, Vì vậy, nó dễ dàng phát hiện vàđưa ra thông báo nếu chương chương trình có lỗi.

Hỗ trợ đa nền tảng

Các trình viết code thông thường chỉ được sử dụng hoặc choWindows hoặc Linux hoặc Mac Systems Nhưng Visual Studio Code có thểhoạt động tốt trên cả ba nền tảng trên.

Cung cấp kho tiện ích mở rộng

Trong trường hợp lập trình viên muốn sử dụng một ngôn ngữ lậptrình không nằm trong số các ngôn ngữ Visual Studio hỗ trợ, họ có thể tảixuống tiện ích mở rộng Điều này vẫn sẽ không làm giảm hiệu năng của phầnmềm, bởi vì phần mở rộng này hoạt động như một chương trình độc lập.

Kho lưu trữ an toàn

Đi kèm với sự phát triển của lập trình là nhu cầu về lưu trữ an toàn.

Với Visual Studio Code, người dùng có thể hoàn toàn yên tâm vì nó dễ dàng

kết nối với Git hoặc bất kỳ kho lưu trữ hiện có nào.

Hỗ trợ web

Visual Studio Code hỗ trợ nhiều ứng dụng web Ngoài ra, nó cũng cómột trình soạn thảo và thiết kế website.

Lưu trữ dữ liệu dạng phân cấp

Phần lớn tệp lưu trữ đoạn mã đều được đặt trong các thư mục tươngtự nhau Ngoài ra, Visual Studio Code còn cung cấp các thư mục cho một sốtệp đặc biệt quan trọng.

Hỗ trợ viết Code

Một số đoạn code có thể thay đổi chút ít để thuận tiện cho ngườidùng Visual Studio Code sẽ đề xuất cho lập trình viên các tùy chọn thay thếnếu có.

Hỗ trợ thiết bị đầu cuối

Visual Studio Code có tích hợp thiết bị đầu cuối, giúp người dùng khỏiphải chuyển đổi giữa hai màn hình hoặc trở về thư mục gốc khi thực hiệncác thao tác.

Hỗ trợ Git

Visual Studio Code hỗ trợ kéo hoặc sao chép mã trực tiếp từ GitHub.

Mã này sau đó có thể được thay đổi và lưu lại trên phần mềm.

2.2.5.3 Nhược điểm

Tiêu tốn tài nguyên: VS Code có khả năng tiêu tốn một lượng tài nguyên

khá lớn, đặc biệt khi bạn làm việc trên các dự án lớn hoặc mở nhiều tab cùngmột lúc Điều này có thể ảnh hưởng đến hiệu suất của máy tính, đặc biệt làtrên các máy tính có cấu hình thấp.

Đôi khi chậm khi mở các tệp lớn: Khi mở các tệp tin lớn, VS Code có thể trở

nên chậm và có thể mất thời gian để phản hồi Điều này đặc biệt đáng chú ýkhi bạn làm việc trên các dự án có nhiều tệp tin hoặc tệp tin có kích thước lớn.

Tích hợp đa công cụ phụ thuộc vào các tiện ích bên thứ ba: Mặc dù VS

Code đi kèm với một số tính năng mạnh mẽ và tiện ích tích hợp sẵn, để sửdụng các tính năng đặc biệt hoặc mở rộng khả năng của trình soạn thảo, bạnphải cài đặt các tiện ích bên thứ ba Điều này có thể yêu cầu thời gian và côngsức để tìm hiểu và tích hợp các tiện ích này

2.2.6 GitHub

Hình 6 Github

GitHub là một dịch vụ cung cấp kho lưu trữ mã nguồn Git dựa trên nền tảngweb cho các dự án phát triển phần mềm GitHub cung cấp cả phiên bản trả tiền lẫn

miễn phí cho các tài khoản.

Các dự án mã nguồn mở sẽ được cung cấp kho lưu trữ miễn phí Tính đếntháng 4 năm 2016, GitHub có hơn 14 triệu người sử dụng với hơn 35 triệu kho mãnguồn, làm cho nó trở thành máy chủ chứa mã nguồn lớn trên thế giới.

Github đã trở thành một yếu tố có sức ảnh hưởng trong cộng đồng pháttriển mã nguồn mở.

Thậm chí nhiều nhà phát triển đã bắt đầu xem nó là một sự thay thế cho sơyếu lý lịch và một số nhà tuyển dụng yêu cầu các ứng viên cung cấp một liên kếtđến tài khoản Github để đánh giá ứng viên.

Dự án trên Github có thể được truy cập và thao tác sử dụng một giao diệndòng lệnh và làm việc với tất cả các lệnh Git tiêu chuẩn Github cũng cho phépngười dùng đăng ký và không đăng ký để duyệt kho công cộng trên trang web.Github cũng tạo ra nhiều client và plugin cho máy tính để bàn.

CHƯƠNG 3: ĐẶC TẢ USE CASE

3.1 Sơ đồ Use case

Hình 7 Sơ đồ Usecase

3.2 Danh sách Use case

User Đăng nhập Cho phép đăng nhập để sử dụng hệ thống

Đăng ký Cho phép đăng ký để sử dụng hệ thống với

quyền người dùng

Xem hàng Người dùng có thể xem danh sách các mặt hàng hiện có trong shop, có thể tìm kiếm và lọc theo từng điều kiện cụ thểThêm vào giỏ hàng Người dùng có thể thêm mặt hàng vào

giỏ hàng để tiếp tục mua hàng

Mua ngay Người dùng có thể tiến hành thanh toán ngay lập tức mà không cần vào giỏ hàngThanh toán Người dùng có 2 hình thức thanh toán

cho hoá đơn là chuyển khoản (thông qua cổng thanh toán điện tử VNPay) và thanhtoán khi nhận hàng (COD)

Lịch sử mua hàng Người dùng có thể xem lại lịch sử mua hàng của mình

Viết đánh giá Người dùng có thể viết đánh giá cho sản phẩm mình đã mua

Nhắn tin Nhắn tin với trại cứu trợ để trao đổi trong

quá trình nhận nuôiQuản lý thông tin cá

Quản lý đơn hàng Admin quản lý đơn hàng từ người dùng

Quản lý phiếu giảm giá

Admin quản lý phiếu giảm giá, cung cấp cho người dùng để người dùng sử dụng khi thanh toán hoá đơn tại cửa hàng

Thống kê Admin thống kê lại doanh thu và nhập hàng theo thời gian cụ thể

Bảng 1: Danh sách Use Case

3.3 Đặc tả Use case3.3.1 Đăng nhập

Tên Use caseĐăng nhập

Mô tả Cho phép đăng nhập sử dụng hệ thốngNgười thực hiện (Actor) User

Sự kiện kích hoạt (Trigger) Bấm chọn đăng nhậpĐiều kiện tiên quyết (Pre-

Nhập tài khoản đã được đăng ký trước đó

Điều kiện kết quả (Post- Conditions)

Đăng nhập thành công và vào màn hình chính

Kịch bản chính (Basic Flow)

Kịch bản thay thế (Alternative Flow)

3a Hệ thống xác nhận tài khoản và mật khẩu không đúng theo yêu cầu Use case trở về với bước 2.4a Hệ thống xác nhận dữ liệu nhập không trùng khớp với dữ liệu trong Database Use case trở về với bước 2.

Bảng 2 Usecase Đăng nhập

3.3.2 Đăng ký

Tên Use caseĐăng ký

Mô tả Cho phép đăng ký để sử dụng hệ thống với quyền người dùng

Người thực hiện (Actor) User

Sự kiện kích hoạt (Trigger) Bấm chọn đăng kýĐiều kiện tiên quyết (Pre-

Nhập thông tin để đăng ký tài khoản

Điều kiện kết quả (Post- Conditions)

Đăng ký thành công và vào màn hình đăng nhập đểtiếp tục

Kịch bản chính (Basic Flow)

1 Hệ thống hiển thị màn hình đăng ký

2 Người dùng thông tin và nhấn nút đăng ký.3 Hệ thống xác nhận thông tin nhập

đúng theo yêu cầu.

4 Hệ thống gửi mã OTP đến email được cung cấp từ người dùng5 Người dùng nhập OTP xác nhận để

kích hoạt tài khoản

6 Hệ thống xác nhận dữ liệu nhập vào trùng với dữ liệu trong Database.

7 Xác nhận thành công, hệ thống chuyển tới trang

chủ.Kịch bản thay thế

(Alternative Flow)

3a Hệ thống xác nhận tài khoản và mật khẩu không đúng theo yêu cầu Use case trở về với bước 2.4a Hệ thống xác nhận dữ liệu nhập không trùng khớp

với dữ liệu trong Database Use case trở về với bước 2.

Sự kiện kích hoạt (Trigger) Bấm chọn đăng ký

Bảng 3 Usecase Đăng ký

3.3.3 Xem hàng

Tên Use caseXem hàng

Mô tả Người dùng có thể xem danh sách các mặt hàng hiện có trong shop, có thể tìm kiếm và lọc theo từngđiều kiện cụ thể

Người thực hiện (Actor) User

Sự kiện kích hoạt (Trigger) Bấm vào Product trên thanh menu

Điều kiện tiên quyết (Pre- Conditions)

Đăng nhập thành công vào hệ thống

Điều kiện kết quả (Post- Conditions)

Xem được danh sách các mặt hàng trong hệ thống

Kịch bản chính (Basic Flow)

1 Hệ thống hiển thị trang danh sách mặt hàng 2 Người dùng chọn một sản phẩm

3 Hệ thống hiển thị màn hình chi tiết sản phẩm4 Người dùng chọn size và màu (nếu có), bấm mua

hàng hoặc thêm vào giỏ hàng

Kịch bản thay thế(Alternative Flow)

Bảng 4 Usecase Xem hàng

3.3.4 Thêm vào giỏ hàng

Tên Use caseThêm vào giỏ hàng

Người thực hiện (Actor) User

Sự kiện kích hoạt (Trigger) Vào trang Chi tiết sản phẩmĐiều kiện tiên quyết (Pre-

Đăng nhập Thành công vào hệ thống

Điều kiện kết quả (Post- Conditions)

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

Kịch bản chính (Basic Flow)

1 Người dùng chọn size và màu (nếu có)2 Bấm nút thêm vào giỏ hàng

3 Hệ thống thông báo thêm vào giỏ thành công

Kịch bản thay thế (Alternative Flow)