đồ án 2 xây dựng website cửa hàng phụ kiện thú cưng
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (3.27 MB, 97 trang )
<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">
<b>ĐẠI HỌC QUỐC GIA TP. HỒ CHÍ MINH</b>
<b>TRƯỜNG ĐẠI HỌC CƠNG NGHỆ THƠNG TIN KHOA CƠNG NGHỆ PHẦN MỀM</b>
<b>ĐỒ ÁN 2</b>
<b>Xây dựng Website Cửa hàng phụ kiện thú cưng</b>
<b>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</b>
<b>Sinh viên thực hiện 2:Đặng Hồ Anh Quân </b>
<b>TP. HỒ CHÍ MINH, 2023</b>
</div><span class="text_page_counter">Trang 2</span><div class="page_container" data-page="2"><b>NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN</b>
</div><span class="text_page_counter">Trang 3</span><div class="page_container" data-page="3"><b>LỜI CẢM ƠN</b>
Đầ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à hồ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 Tồ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ô !
</div><span class="text_page_counter">Trang 4</span><div class="page_container" data-page="4"><b>DANH SÁCH THÀNH VIÊN NHÓM</b>
</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="6"><small>2.2.5.3Nhược điểm...13</small>
<small>CHƯƠNG 3: ĐẶC TẢ USE CASE...16</small>
<small>3.1Sơ đồ Use case...16</small>
<small>3.2Danh sách Use case...16</small>
<small>3.3.7Quản lý thơng tin cá nhân...23</small>
<small>3.3.8Thanh tốn hố đơn...24</small>
<small>Ưu điểm của kiến trúc Client Server:...33</small>
<small>Nhược điểm của kiến trúc Client Server:...33</small>
<small>CHƯƠNG 5: THIẾT KẾ DỮ LIỆU...34</small>
</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8"><small>CHƯƠNG 7: CÀI ĐẶT VÀ THỬ NGHIỆM...69</small>
<small>7.1Môi trường cài đặt...69</small>
<small>7.1.1Môi trường cài đặt và thử nghiệm...69</small>
</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9"><b>TÓM TẮT ĐỒ ÁN</b>
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.
</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="10"><b>CHƯƠNG 1: GIỚI THIỆU ĐỀ TÀI</b>
<b>1.1 Đặt vấn đề</b>
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
</div><span class="text_page_counter">Trang 11</span><div class="page_container" data-page="11">- Công cụ lưu trữ dữ liệu: Cloudinary, PostgreSQL
</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12"><b>1.6 Phương pháp nghiên cứu</b>
- 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.
</div><span class="text_page_counter">Trang 13</span><div class="page_container" data-page="13"><b>CHƯƠNG 2: TỔNG QUAN</b>
<b>2.1 Tổng quan về đồ án</b>
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.
<b>2.1.1 Mơ tả quy trình thực hiện các cơng việc chính</b>
● Bước 1: Xác định các 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
</div><span class="text_page_counter">Trang 14</span><div class="page_container" data-page="14">- 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
</div><span class="text_page_counter">Trang 15</span><div class="page_container" data-page="15">- 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.
</div><span class="text_page_counter">Trang 16</span><div class="page_container" data-page="16"><b>2.2.1.2 Cách thức hoạt động</b>
● 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
</div><span class="text_page_counter">Trang 17</span><div class="page_container" data-page="17">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.
<b>2.2.2 Ngơn ngữ lập trình TypeScript</b>
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.
</div><span class="text_page_counter">Trang 18</span><div class="page_container" data-page="18">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ể.
</div><span class="text_page_counter">Trang 19</span><div class="page_container" data-page="19"><i><b>Hình 2. TypeScript</b></i>
<b>2.2.2.1 Lịch sử hình thành TypeScript</b>
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.
<b>2.2.2.2 Ưu nhược điểm của TypeScript</b>
<i><b>Ưu điểm của Typescript:</b></i>
● 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.
</div><span class="text_page_counter">Trang 20</span><div class="page_container" data-page="20">● Với static typing, code viết bằng TypeScript dễ dự đoán hơn, và dễ debug hơn
<i><b>Nhược điểm của Typescript:</b></i>
Vì là một ngơn ngữ rất dễ dàng bị lộ code nên dễ bị khai thác. Hacker
</div><span class="text_page_counter">Trang 21</span><div class="page_container" data-page="21">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.
</div><span class="text_page_counter">Trang 22</span><div class="page_container" data-page="22"><b>2.2.3 Angular</b>
<b>2.2.3.1Tổng quan về Angular</b>
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.
<i><b>Hình 3. Angular</b></i>
<b>2.2.3.2Cách thức hoạt động</b>
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).
</div><span class="text_page_counter">Trang 23</span><div class="page_container" data-page="23">● Bạn có thể thuận tiện Unit Test.
</div><span class="text_page_counter">Trang 24</span><div class="page_container" data-page="24">● 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.
<b>2.2.3.4Nhược điểm</b>
<b>● Tính bảo mật: Bản chất của Angular là một framework front-end. Thông</b>
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.
<b>● Khả năng an tồn: Website có thể trở nên khơng an tồn nếu bạn sử</b>
dụng một số trình duyệt sở hữu tính năng Disable JavaScript
<b>2.2.4 Spring Boot</b>
<b>2.2.4.1 Tổng quan về Spring Boot</b>
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.
</div><span class="text_page_counter">Trang 25</span><div class="page_container" data-page="25"><i><b>Hình 4. Spring Boot</b></i>
</div><span class="text_page_counter">Trang 26</span><div class="page_container" data-page="26"><b>2.2.4.2 Cách thức hoạt động</b>
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.
<b>2.2.4.3 Ưu điểm</b>
● 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 ngồi
<b>2.2.5 Phần mềm lập trình VSCode2.2.5.1 Tổng quan về VSCode</b>
Visual Studio Code (VS Code hay VSC) là một trong những trình soạn thảo
</div><span class="text_page_counter">Trang 27</span><div class="page_container" data-page="27">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.
</div><span class="text_page_counter">Trang 28</span><div class="page_container" data-page="28"><i><b>Hình 5. Visual Studio Code</b></i>
<b>2.2.5.2 Ưu điểm</b>
<b>Hỗ trợ nhiều ngơn ngữ lập trình</b>
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.
<b>Hỗ trợ đa nền tảng</b>
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.
<b>Cung cấp kho tiện ích mở rộng</b>
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.
<b>Kho lưu trữ an tồn</b>
Đ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.
</div><span class="text_page_counter">Trang 29</span><div class="page_container" data-page="29">Với Visual Studio Code, người dùng có thể hồn tồn n tâm vì nó dễ dàng
</div><span class="text_page_counter">Trang 30</span><div class="page_container" data-page="30">kết nối với Git hoặc bất kỳ kho lưu trữ hiện có nào.
<b>Hỗ trợ web</b>
Visual Studio Code hỗ trợ nhiều ứng dụng web. Ngồi ra, nó cũng cómột trình soạn thảo và thiết kế website.
<b>Lưu trữ dữ liệu dạng phân cấp</b>
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.
<b>Hỗ trợ viết Code</b>
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ó.
<b>Hỗ trợ thiết bị đầu cuối</b>
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.
<b>Hỗ trợ Git</b>
Visual Studio Code hỗ trợ kéo hoặc sao chép mã trực tiếp từ GitHub.
</div><span class="text_page_counter">Trang 31</span><div class="page_container" data-page="31">Mã này sau đó có thể được thay đổi và lưu lại trên phần mềm.
<b>2.2.5.3 Nhược điểm</b>
</div><span class="text_page_counter">Trang 32</span><div class="page_container" data-page="32"><b>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</b>
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.
<b>Đơ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ở</b>
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.
<b>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</b>
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ể 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
<b>2.2.6 GitHub</b>
<i><b>Hình 6. Github</b></i>
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
</div><span class="text_page_counter">Trang 33</span><div class="page_container" data-page="33">miễn phí cho các tài khoản.
</div><span class="text_page_counter">Trang 34</span><div class="page_container" data-page="34">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.
</div><span class="text_page_counter">Trang 35</span><div class="page_container" data-page="35"><b>CHƯƠNG 3: ĐẶC TẢ USE CASE</b>
<b>3.1 Sơ đồ Use case</b>
<i><b>Hình 7. Sơ đồ Usecase</b></i>
<b>3.2 Danh sách Use case</b>
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
</div><span class="text_page_counter">Trang 36</span><div class="page_container" data-page="36">giỏ hàng để tiếp tục mua hàng
Mua ngay Người dùng có thể tiến hành thanh tốn ngay lập tức mà khơng cần vào giỏ hàngThanh tốn Người dùng có 2 hình thức thanh tốn
cho hố đơn là chuyển khoản (thơng qua cổng thanh tố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
</div><span class="text_page_counter">Trang 37</span><div class="page_container" data-page="37">Thống kê Admin thống kê lại doanh thu và nhập hàng theo thời gian cụ thể
<i><b>Bảng 1: Danh sách Use Case</b></i>
<b>3.3 Đặc tả Use case3.3.1 Đăng nhập</b>
<b>Tên Use caseĐăng nhập</b>
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)
</div><span class="text_page_counter">Trang 38</span><div class="page_container" data-page="38">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.
<i><b>Bảng 2. Usecase Đăng nhập</b></i>
<b>3.3.2 Đăng ký</b>
<b>Tên Use caseĐăng ký</b>
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
</div><span class="text_page_counter">Trang 39</span><div class="page_container" data-page="39">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ý
<i><b>Bảng 3. Usecase Đăng ký</b></i>
<b>3.3.3 Xem hàng</b>
<b>Tên Use caseXem hàng</b>
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
</div><span class="text_page_counter">Trang 40</span><div class="page_container" data-page="40">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)
<i><b>Bảng 4. Usecase Xem hàng</b></i>
<b>3.3.4 Thêm vào giỏ hàng</b>
<b>Tên Use caseThêm vào giỏ hàng</b>
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)
</div>
