Đồ án tốt nghiệp Công nghệ thông tin: Xây dựng website kinh doanh lĩnh vực thời trang

• Áp dụng công nghệ ReactJS và NodeJS: Sử dụng ReactJS để xây dựng giao diện người dùng, tận dụng các ưu điểm của ReactJS như hiệu suất cao, khả năng tái sử dụng các thành phần giao diệ

MỤC ĐÍCH ĐỀ TÀI

Đề tài “Phát triển website kinh doanh thời trang” đặt ra các mục tiêu chính sau:

• Thiết kế giao diện website ấn tượng và thân thiện với người dùng, tối ưu trải nghiệm mua sắm trực tuyến:

Mục tiêu là tạo ra một website có giao diện bắt mắt, thu hút người dùng ngay từ cái nhìn đầu tiên Giao diện cần phải thân thiện, dễ sử dụng, giúp người dùng dễ dàng tìm thấy và chọn lựa sản phẩm

• Tạo dựng một hệ thống mua sắm tiện lợi:

Xây dựng quy trình mua sắm đơn giản và liền mạch, từ việc tìm kiếm sản phẩm, xem chi tiết, thêm vào giỏ hàng đến thanh toán trực tuyến

Tích hợp các tính năng như bộ lọc tìm kiếm, phân loại sản phẩm theo nhiều tiêu chí khác nhau, giúp người dùng dễ dàng tìm thấy sản phẩm mong muốn

Hỗ trợ đa dạng các phương thức thanh toán, từ thanh toán trực tuyến qua thẻ ngân hàng, ví điện tử đến thanh toán khi nhận hàng

Sau khi hoàn tất giao dịch, người dùng có thể để lại đánh giá và nhận xét về sản phẩm, giúp cải thiện chất lượng dịch vụ và sản phẩm

• Phát triển hệ thống quản lý và báo cáo doanh số bán hàng:

Xây dựng hệ thống quản lý đơn hàng, giúp theo dõi tình trạng đơn hàng từ lúc đặt mua đến khi giao hàng hoàn tất

Phát triển các công cụ báo cáo và phân tích doanh số, giúp quản lý cửa hàng nắm bắt được tình hình kinh doanh, hiệu quả bán hàng, và xu hướng tiêu dùng của khách hàng

Hỗ trợ quản lý kho hàng, kiểm soát số lượng sản phẩm tồn kho, giúp tối ưu hóa quy trình nhập hàng và quản lý hàng tồn

• Thực hiện cơ chế phân quyền người dùng và bảo mật thông tin:

Xây dựng hệ thống phân quyền người dùng, đảm bảo mỗi người dùng chỉ có thể truy cập vào các chức năng và dữ liệu phù hợp với quyền hạn của họ

• Áp dụng công nghệ ReactJS và NodeJS:

Sử dụng ReactJS để xây dựng giao diện người dùng, tận dụng các ưu điểm của ReactJS như hiệu suất cao, khả năng tái sử dụng các thành phần giao diện, và hỗ trợ tối ưu cho phát triển ứng dụng đơn trang (SPA)

Sử dụng NodeJS cho phần backend, tận dụng khả năng xử lý đồng thời và hiệu năng cao của NodeJS để xây dựng hệ thống máy chủ mạnh mẽ, đáng tin cậy

Tích hợp các công nghệ và thư viện liên quan như Redux, Express, Sequelize để phát triển ứng dụng web hiện đại, linh hoạt và dễ dàng mở rộng trong tương lai.

Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN

Đề tài này có ý nghĩa khoa học và thực tiễn quan trọng trong việc áp dụng và phát triển công nghệ thông tin vào lĩnh vực thương mại điện tử, đặc biệt là trong ngành công nghiệp thời trang Các điểm chính bao gồm:

Xây dựng nền tảng thương mại điện tử chuyên ngành: Dự án tạo ra một nền tảng thương mại điện tử chuyên ngành thời trang, giúp các doanh nghiệp trong lĩnh vực này có thể tiếp cận và khai thác tiềm năng của thị trường trực tuyến một cách hiệu quả và hiện đại

Nâng cao trải nghiệm người dùng: Bằng việc tích hợp các tính năng như thiết kế áo thun cá nhân hóa, hệ thống thanh toán trực tuyến, quản lý đơn hàng thông minh, và hệ thống chat trực tuyến, dự án mang đến cho người dùng trải nghiệm mua sắm trực tuyến thuận tiện và tối ưu hóa

Tăng cường khả năng cạnh tranh và phát triển kinh doanh: Các công nghệ và chiến lược được áp dụng từ đề tài giúp nâng cao năng lực cạnh tranh của các doanh nghiệp thời trang trên thị trường điện tử, từ đó thúc đẩy sự phát triển bền vững và hiệu quả của ngành

CƠ SỞ LÝ THUYẾT

MÔ HÌNH MVC

Mô hình MVC, viết tắt của Model-View-Controller, là một kiến trúc phần mềm phổ biến được sử dụng rộng rãi trong phát triển ứng dụng Được thiết kế để tách biệt logic xử lý dữ liệu (Model), hiển thị giao diện người dùng (View), và điều phối cả hai (Controller), mô hình này mang lại nhiều lợi ích trong việc quản lý mã nguồn và cải thiện khả năng bảo trì của hệ thống.

Mô hình MVC, hay Model-View-Controller, là một kiến trúc phần mềm được sử dụng để tổ chức và quản lý mã nguồn trong quá trình phát triển ứng dụng Kiến trúc này tách biệt ba thành phần chính: Model, View, và Controller, giúp giảm độ phức tạp của hệ thống và làm cho mã nguồn dễ quản lý hơn [1]

Model (M - Model): Đây là thành phần chịu trách nhiệm cho xử lý dữ liệu và logic kinh doanh của ứng dụng Model là nơi lưu trữ thông tin, thực hiện các thao tác cập nhật và truy vấn dữ liệu, mà không quan tâm đến cách dữ liệu được hiển thị hoặc tương tác với người dùng.

View (V - View): View là thành phần hiển thị giao diện người dùng và đảm nhận trách nhiệm hiển thị thông tin từ Model View không có logic kinh doanh và chỉ chịu trách nhiệm về việc hiển thị dữ liệu một cách đẹp mắt và dễ hiểu cho người dùng

Controller (C - Controller): Controller là thành phần điều phối và xử lý sự kiện từ người dùng Nó nhận lệnh từ người dùng thông qua View, sau đó cập nhật Model dựa trên những thay đổi này và điều hướng hiển thị trở lại View Controller giữ vai trò quan trọng trong việc duy trì sự đồng bộ giữa Model và View

Mô hình MVC giúp tách biệt logic ứng dụng thành các phần nhỏ, dễ quản lý và bảo trì Nó cũng thúc đẩy tái sử dụng mã nguồn, khiến cho quá trình phát triển và bảo trì ứng dụng trở nên hiệu quả hơn [1]

1.1.2 Các thành phần trong mô hình MVC

Mô tả: Model đại diện cho dữ liệu và logic kinh doanh của ứng dụng Nó là nơi lưu trữ thông tin, thực hiện các thao tác cập nhật và truy vấn dữ liệu Model không quan tâm đến cách dữ liệu được hiển thị hoặc tương tác với người dùng [1]

• Lưu trữ và quản lý dữ liệu

• Thực hiện logic kinh doanh và xử lý sự kiện

• Cung cấp API cho các thành phần khác để truy xuất và cập nhật dữ liệu

Mô tả: View là thành phần chịu trách nhiệm hiển thị thông tin từ Model cho người dùng Nó không có logic kinh doanh và chỉ tập trung vào việc hiển thị dữ liệu một cách đẹp mắt và dễ hiểu

• Hiển thị dữ liệu cho người dùng

• Tương tác với người dùng thông qua giao diện người dùng

• Thông báo về các sự kiện tương tác đến Controller

Mô tả: Controller là thành phần điều phối và xử lý sự kiện từ người dùng Nó nhận lệnh từ người dùng thông qua View, sau đó cập nhật Model dựa trên những thay đổi này và điều hướng hiển thị trở lại View

• Nhận các sự kiện từ View

• Gửi các yêu cầu cập nhật hoặc truy vấn dữ liệu đến Model

• Cập nhật View dựa trên sự thay đổi trong Model

1.1.3 Ưu điểm và nhược điểm Ưu điểm của mô hình MVC:

Tách biệt logic: MVC giúp tách biệt logic ứng dụng thành các phần riêng biệt (Model, View, và Controller), làm cho mã nguồn dễ hiểu và dễ bảo trì [1]

Tái sử dụng mã nguồn: Các thành phần trong MVC có thể được tái sử dụng một cách linh hoạt Model và View có thể được sử dụng lại trong nhiều phần của ứng dụng hoặc trong các ứng dụng khác nhau

Phân chia công việc: Mô hình này giúp phân chia công việc giữa các thành viên trong nhóm phát triển, với người làm Model tập trung vào logic xử lý dữ liệu, người làm View chịu trách nhiệm về giao diện người dùng, và người làm Controller quản lý sự tương tác

Dễ mở rộng: Do sự tách biệt giữa các thành phần, việc mở rộng và thay đổi ứng dụng trở nên dễ dàng hơn Một thành phần có thể được thay thế hoặc mở rộng mà không làm ảnh hưởng đến các thành phần khác

Kiểm thử dễ dàng: Sự tách biệt giữa Model, View và Controller giúp kiểm thử tốt hơn, vì bạn có thể kiểm thử mỗi thành phần một cách độc lập, giảm rủi ro gây ảnh hưởng lẫn nhau

Nhược điểm của mô hình MVC:

Phức tạp cho ứng dụng nhỏ: Đối với các ứng dụng nhỏ hoặc đơn giản, việc triển khai mô hình MVC có thể quá phức tạp và làm tăng độ phức tạp của mã nguồn

Tăng độ phức tạp của mã nguồn: Trong một số trường hợp, việc chia nhỏ ứng dụng thành nhiều thành phần có thể làm tăng độ phức tạp của mã nguồn và làm cho mã trở nên khó hiểu Khó khăn trong việc đảm bảo sự đồng bộ: Đôi khi có thể khó khăn để đảm bảo sự đồng bộ giữa Model và View, đặc biệt là trong các ứng dụng lớn và phức tạp [1].

CÁC CÔNG NGHỆ SỬ DỤNG Ở PHÍA FRONT-END

ReactJS là một opensource được phát triển bởi Facebook, ra mắt vào năm 2013, bản thân nó là một thư viện Javascript được dùng để để xây dựng các tương tác với các thành phần trên website Một trong những điểm nổi bật nhất của ReactJS đó là việc render dữ liệu không chỉ thực hiện được trên tầng server mà còn ở dưới client [2]

• Component: Là một phần của giao diện, bao gồm HTML, CSS và JavaScript Một component trong ReactJS có thể được sử dụng lại trong nhiều vị trí khác nhau của ứng dụng

• JSX: Là một cú pháp đặc biệt của ReactJS để tạo ra các component và các element của giao diện

• Props: Là một cách để truyền dữ liệu từ component cha đến component con

• State: Là trạng thái của một component, có thể thay đổi trong quá trình chạy của ứng dụng

• Virtual DOM: Là một bản sao của DOM (Document Object Model), được sử dụng để tối ưu hiệu năng của ứng dụng

• Lifecycle methods: Là các phương thức được gọi trong quá trình đời của một component, từ khi được khởi tạo đến khi bị hủy [2]

• Hiệu suất cao: ReactJS sử dụng Virtual DOM để tối ưu hóa hiệu suất của ứng dụng Virtual DOM cho phép ReactJS cập nhật các thay đổi trên trang web một cách nhanh chóng và hiệu quả hơn so với cách truyền thống, giúp tăng tốc độ và hiệu suất của ứng dụng [2]

• Tái sử dụng: ReactJS cho phép tái sử dụng các thành phần UI, giúp giảm thiểu thời gian và chi phí phát triển Các thành phần UI có thể được sử dụng lại trong nhiều phần khác nhau của ứng dụng, giúp tăng tính linh hoạt và khả năng mở rộng của ứng dụng

• Dễ dàng quản lý trạng thái: ReactJS giúp quản lý trạng thái của ứng dụng một cách dễ dàng

Sử dụng State và Props, ReactJS cho phép các nhà phát triển quản lý trạng thái của các thành phần UI một cách chính xác và dễ dàng

• Hỗ trợ tốt cho SEO: ReactJS cho phép các nhà phát triển xây dựng ứng dụng web với khả năng tương thích tốt với SEO Với sự hỗ trợ của các thư viện như React Helmet, ReactJS cho phép các nhà phát triển tùy chỉnh và quản lý các phần tử meta và title cho từng trang web

• Hỗ trợ đa nền tảng: ReactJS không chỉ được sử dụng để phát triển các ứng dụng web, mà còn được sử dụng để phát triển các ứng dụng di động với React Native Sử dụng React

Native, các nhà phát triển có thể xây dựng ứng dụng di động cho cả iOS và Android sử dụng cùng một mã nguồn

Bootstrap là một framework HTML, CSS, và JavaScript phổ biến nhất để phát triển website chuẩn responsive

Bootstrap giúp cho quá trình thiết kế website của bạn diễn ra nhanh chóng dựa trên những thành tố cơ bản sẵn có như typography, forms, buttons, tables, grids, navigation, image carousels

Bootstrap được thiết kế theo dạng module tích hợp dễ dàng với các mã nguồn mở như Joomla, WordPress, Mageto Bootstrap mang lại nhiều tính năng hấp dẫn như:

• Cho phép tùy chỉnh framework của website trước khi tải xuống

• Được tích hợp Glyphicons giảm thiểu việc sử dụng các hình ảnh biểu tượng và tăng tốc độ tải trang

• Bootstrap cho phép truy cập vào thư viện dùng để tạo giao diện website như: font, typography, table, grid

• Bootstrap được tích hợp với JQuery

Redux là một thư viện quản lý State (trạng thái) mã nguồn mở và chạy trên phía client, tạo ra một store toàn cục trong đó State có thể được chia sẻ giữa các component mà không cần thiết phải có kết nối cha-con (Truyền từ cha xuống con)

Redux gồm 3 thành phần chính: Action, Reducer và Store

Action là một hàm đơn giản trả về một đối tượng và có trách nhiệm gửi dữ liệu đến kho lưu trữ (store) thông qua hàm dispatch và reducer Nó có hai thuộc tính - payload và type Hành động được gọi là “type” và giá trị được áp dụng để thay đổi trạng thái của ứng dụng được gọi là

“Reducer” là một hàm được sử dụng để thay đổi trạng thái của ứng dụng theo cách phụ thuộc vào các loại action cụ thể Hàm nhận hai đối số: trạng thái hiện tại và action, và trả về một trạng thái mới Chức năng chính của reducer là tạo ra một trạng thái mới cho store

Store là một đối tượng JavaScript và là một kho chứa trung tâm quản lý trạng thái, có thể truy cập từ toàn bộ ứng dụng Phương thức duy nhất để truy cập vào store là thông qua việc gửi action

SCSS (Sassy Cascading Style Sheets) là một ngôn ngữ tiền xử lý được biên dịch thành CSS, với phần mở rộng file có dạng scss SCSS cho phép thêm các tính năng bổ sung vào CSS, bao gồm các biến, nesting Các tính năng bổ sung có thể giúp việc viết SCSS đơn giản và nhanh chóng hơn nhiều so với CSS tiêu chuẩn SCSS có thể sử dụng code và hàm của CSS, tuân theo cú pháp của CSS và hỗ trợ mọi tính năng có trong SASS Ưu điểm của SCSS

• SCSS cho phép viết code gọn gàng, nhanh chóng hơn trong cấu trúc chương trình

• SCSS cung cấp tính năng nesting, do đó developer có thể sử dụng cú pháp lồng nhau và nhiều hàm hữu ích, trong đó có cả các thao tác liên quan đến màu hay dùng hàm toán học,…

• Cung cấp các biến để tái sử dụng các giá trị trong CSS

• Tương thích được với mọi phiên bản CSS

• Debug: Các preprocessor có một giai đoạn biên dịch, do đó code CSS trở nên vô nghĩa trong quá trình debug Ngoài ra việc debug cũng trong SCSS cũng khó hơn rất nhiều

• File CSS lớn: Dù source file có kích thước không đáng kể thì file CSS vẫn sẽ có kích thước lớn hơn nhiều

• Ngoài ra, việc sử dụng SASS cũng có thể làm vô hiệu hoá một số inspector tích hợp sẵn trong trình duyệt

Axios là một thư viện HTTP Client dựa trên Promise dành cho node.js và trình duyệt Nó có tính đẳng hình (tức là cùng codebase có thể chạy trong cả trình duyệt và node.js) Ở phía server thì nó sử dụng native module http trong node.js, còn ở phía client (trình duyệt) thì nó sử dụng XMLHttpRequest

• Tạo request từ trình duyệt bằng XMLHttpRequest

• Tạo request từ node.js bằng http

• Đón chặn request và response

• Biến đổi dữ liệu request và response

• Tự động chuyển đổi cho dữ liệu JSON

• Hỗ trợ phía client bảo vệ chống lại XSRF

CÁC CÔNG NGHỆ SỬ DỤNG Ở PHÍA BACK-END

Expressjs hay còn được viết là Express js, Express.js Đây là một framework mã nguồn mở miễn phí cho Node.js Express.js được sử dụng trong thiết kế và xây dựng các ứng dụng web một cách đơn giản và nhanh chóng Nó cung cấp các tính năng mạnh mẽ để phát triển web hoặc mobile Expressjs hỗ trợ các method HTTP và midleware tạo ra API vô cùng mạnh mẽ và dễ sử dụng [9]

• Giúp cho việc phát triển back-end dễ dàng hơn nhiều khi sử dụng ExpressJS

• Mã JavaScript được diễn giải thông qua Google V8 JavaScript Engine của Node.js Do đó, mã sẽ được thực hiện một cách nhanh chóng và dễ dàng

• ExpressJS rất đơn giản để tùy chỉnh và sử dụng theo nhu cầu

• Cung cấp một module phần mềm trung gian linh hoạt và rất hữu ích để thực hiện các tác vụ bổ sung theo phản hồi và yêu cầu

• Hỗ trợ phát triển ứng dụng theo mô hình MVC, đây là mô hình phổ biến cho việc lập trình web hiện nay [9]

MySQL là hệ quản trị cơ sở dữ liệu mã nguồn mở phổ biến hàng đầu trên thế giới (gọi tắt là RDBMS) và đặc biệt MySQL được ưa chuộng trong quá trình xây dựng, phát triển ứng dụng MySQL được đánh giá là hệ quản trị cơ sở dữ liệu tốc độ cao, ổn định và dễ sử dụng, có khả năng

14 thay đổi mô hình sử dụng phù hợp với điều kiện công việc MySQL hoạt động trên nhiều hệ điều hành, cung cấp một hệ thống lớn các hàm tiện ích rất mạnh

MySQL thích hợp với các ứng dụng có truy cập cơ sở dữ liệu trên Internet nhờ vào tốc độ cũng như tính bảo mật cao MySQL có thể tải miễn phí từ trang chủ với nhiều phiên bản cho các hệ điều hành khác nhau như phiên bản Win32 cho các hệ điều hành dòng Windows, Linux, Mac OS X, Unix, FreeBSD Ưu điểm của MySQL:

• Sử dụng dễ dàng: MySQL là cơ sở dữ liệu tốc độ cao và ổn định, công cụ này dễ sử dụng và hoạt động trên nhiều hệ điều hành cung cấp hệ thống lớn các hàm tiện ích

• Độ bảo mật cao: MySQL thích hợp cho các ứng dụng có truy cập CSDL trên Internet khi sở hữu nhiều tính năng bảo mật thậm chí là ở cấp cao

• Đa dạng tính năng: MySQL hỗ trợ rất nhiều chức năng MySQL được mong chờ từ một hệ quản trị cơ sở dữ liệu quan hệ cả trực tiếp lẫn gián tiếp

• Khả năng mở rộng và mạnh mẽ: MySQL có thể xử lý rất nhiều dữ liệu và hơn thế nữa nó có thể được mở rộng nếu cần thiết

• Nhanh chóng: Việc đưa ra một số tiêu chuẩn cho phép MySQL để làm việc một cách hiệu quả và tiết kiệm chi phí, do đó nó làm tăng tốc độ thực thi

• Sử dụng miễn phí: Là một mã nguồn mở, GNU General Public License được MySQL dùng nên hoàn toàn miễn phí

Khi truy cập vào 1 trang web hoặc ứng dụng bất kỳ thì việc giao tiếp giữa máy chủ (Server) và máy khách (Client) là việc rất quan trọng Để máy chủ và máy khách có thể nhận biết được sự thay đổi của đối phương thì cần sử dụng những cách thức như AJAX, long-polling, short-polling, & HTML5 server-sent events, Việc sử dụng cách giao tiếp bằng những công cụ kể trên tồn tại nhiều nhược điểm trong đó có thể kể đến là kết quả trả về chậm và tốn rất nhiều tài nguyên Để khắc phục những nhược điểm này, công cụ socket.io ra đời để giúp cho việc giao tiếp giữa Server và Client diễn ra tức khắc và chiếm ít tài nguyên nhất Ưu điểm:

• Bảo mật cao: Socket io được xây dựng dựa trên Engine.IO Nó sẽ khởi chạy phương thức long-polling trước nhất để kết nối Sau đó nó mới sử dụng các phương thức giao tiếp tốt hơn

15 như là Websocket chẳng hạn Vì được thiết lập chặt chẽ như vậy nên khi socket io xuất hiện nó sẽ tự động tạo những kết nối bảo mật như là: proxy và cân bằng tải hoặc là tường lửa cá nhân và phần mềm chống vi rút

• Kết nối tự động tới server: Đặc điểm tự động kết nối đến server của socket io là gì? Giả sử trong quá trình khởi chạy bị mất kết nối giữa client và server thì socket io sẽ tự động gắn kết nối mãi mãi cho đến khi nào server phản hồi lại Và đây là tính năng có thể tùy chỉnh được nên bạn có quyền chọn không kết nối tự động đến bất kỳ server nào mà mình muốn

• Mã hóa nhị phân: Socket io có thể hỗ trợ mã hóa nhị phân như ArrayBuffer và Blob trên trình duyệt hoặc là ArrayBuffer và Buffer trong Node.js

• Cho phép tạo kênh và phòng: Có thể nói đây là 1 tính năng khá nổi bật khi mà socket io có thể tạo ra mối quan hệ giữa các phần hoặc các module riêng lẻ bằng cách tạo ra những kênh riêng biệt khác nhau Ngoài việc tạo kênh, nó còn hỗ trợ tạo phòng cho các clients tham gia với mục đích gửi thông báo đến 1 nhóm người dùng được kết nối với 1 số thiết bị nào đó chẳng hạn

JSON Web Token (JWT) là một chuẩn mở (RFC 7519) được sử dụng để chia sẻ thông tin an toàn giữa các bên dưới dạng một đối tượng JSON Thông tin trong JWT có thể được xác minh và tin cậy vì nó được ký số, có thể bằng thuật toán HMAC hoặc bằng một cặp khóa công khai/tư nhân sử dụng RSA hoặc ECDSA JWT thường được sử dụng trong các ứng dụng web để xác thực người dùng, quản lý phiên làm việc, và trao đổi thông tin giữa các dịch vụ khác nhau

Cấu trúc của một JWT gồm ba phần chính: Header (phần tiêu đề), Payload (phần tải dữ liệu), và Signature (chữ ký) Header chứa thông tin về thuật toán ký và kiểu token Payload chứa các tuyên bố (claims), là các thông tin về người dùng hoặc các dữ liệu khác Signature được tạo ra bằng cách kết hợp header, payload và một khóa bí mật hoặc một khóa riêng tư để đảm bảo tính toàn vẹn và xác thực của token Điểm mạnh của JWT là tính nhỏ gọn và hiệu quả, giúp nó dễ dàng được truyền tải qua URL, trong các tham số của POST hoặc trong HTTP header Ngoài ra, JWT không yêu cầu lưu trữ trạng thái ở phía máy chủ, làm cho việc mở rộng ứng dụng trở nên đơn giản hơn Tuy nhiên, do thông tin trong payload không được mã hóa mà chỉ được ký, các dữ liệu nhạy cảm không nên được lưu trữ trực tiếp trong JWT

KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HÓA YÊU CẦU

KHẢO SÁT HIỆN TRẠNG

Hình 3 Giao diện Website Shopee Đặc điểm:

Website Shopee nổi bật với giao diện hài hòa.

Banner quảng cáo là slideshow chạy từ phải qua trái

Thanh tìm kiếm nằm trên banner quảng cáo, có đầy đủ các chức năng như bộ lọc hay điền để tìm kiếm

Ta có thể thông tin các ưu đãi đang hiện có ở trên hệ thống website Đồng thời ta có thể thấy toàn bộ các danh mục sản phẩm của website Đi kèm đó trang web cũng show ra các sản phẩm đang trong chương trình giảm giá flash sale giúp khách hàng có thêm sự lựa chọn tiết kiệm

Phần chính của website là mục sản phẩm nổi bật do hệ thống gợi ý cho người dùng và sẽ thay đổi dựa vào tương tác người dùng với từng sản phẩm

Hình 4 Giao diện trang chi tiết sản phẩm Website Shopee

Trang chi tiết sản phẩm thiết kế đơn giản nhưng vô cùng đầy đủ các thông tin cần thiết về sản phẩm

Chúng ta hoàn toàn cũng có thể biết chi tiết thông tin về sản phẩm cũng như người bán

Hình 5 Giao diện trang đánh giá sản phẩm Website Shopee

Bên cạnh đó mỗi sản phẩm sẽ có mục đánh giá giúp ta có cái nhìn khách quan về chất lượng sản phẩm

Hình 6 Giao diện trang giỏ hàng Website Shopee

Phần giỏ hàng và thanh toán cũng được thiết kế vô cùng đơn giản với những thông tin cơ bản cần thiết Ưu điểm:

Trang web thiết kế về tổng thể thì cực kỳ đơn giản với màu sắc dịu mắt Đồng thời việc tối giản thiết kế cũng giúp cho việc sử dụng của người dùng, kể cả là người mới tới trang web lần đầu. Đồng thời trang web cũng cung cấp hệ thống gợi ý sản phẩm cực kỳ tốt giúp khách hàng có được nhiều lựa chọn tốt Cũng như sẽ giữ khách hàng lại sử dụng lâu dài Đồng thơi trang web cũng cung cấp chức năng chat với chủ cửa hàng vô cùng tiện lợi

Hiện tại trang web đang được tối ưu khá tốt kể cả khi có số lượng lớn truy cập nên không thật sự có điểm yếu nào quá lớn

Link: https://www.coolmate.me/

Hình 7 Giao diện trang chủ Website Coolmate Đặc điểm:

Website Coolmate nổi bật với giao diện gọn gàng với bố trí nhìn khá gọn mắt.

Banner quảng cáo là mục sản phẩm nổi bật ứng với danh mục được chọn trên thanh taskbar có thể cuộn từ phải quá trái

Thanh tìm kiếm nằm cạnh danh mục sản phẩm có thể tìm kiếm sản phẩm theo tên cũng như danh mục Đồng thời ta có thể thấy toàn bộ các danh mục sản phẩm của website Đi kèm đó là mục voucher xuất hiện ngay mép dưới màn hình để người dùng lựa chọn

Hình 8 Giao diện trang chi tiết sản phẩm Website Coolmate

Trang chi tiết sản phẩm được thiết kế đơn giản nhưng vô cùng gọn gàng và bắt mắt

Hình 9 Giao diện trang đánh giá sản phẩm Website Coolmate

Ta cũng có thể xem đánh giá người dùng vể sản phẩm để có cái nhìn khách quan hơn

Hình 10 Giao diện trang thanh toán Website Coolmate

Giao diện trang thanh toán cũng cung cấp đầy đủ các thông tin cần thiết về sản phẩm cũng như các ưu đãi dành cho sản phẩm Ưu điểm:

Tương tự như ở Shopee, giao diện của Coolmate cũng được đơn giản hoá tối đa để giúp trải nghiệm khách hàng được mượt mà hơn những vẫn giữ được sự bắt mắt.

Trang web cũng cung cấp nhiều sản phẩm đa dạng với nhiều lựa chọn phù hợp với mỗi khách hàng

Phần tìm kiếm chỉ search theo từ khoá hoặc danh mục lựa chọn chứ không có bất kỳ một bộ lọc cụ thể nào Vd như: giá, size

Website cũng không có phần gợi ý sản phẩm theo tương tác lựa chọn của người dùng

Không có phần chat với người bán mà phải liên hệ qua phương thức gọi điện trực tiếp

Link: https://bitis.com.vn/

Hình 11 Giao diện trang chủ Website Bitis

Hình 12 Giao diện trang chi tiết sản phẩm Website Bitis

Hình 13 Giao diện trang thanh toán Website Bitis Đặc điểm:

Vừa vào trang web thì ta sẽ được thấy danh sách các mã khuyến mãi

Banner quảng cáo được đặt đầu trang rất lớn, chiếm gần như toà bộ view màn hình Hình ảnh được thiết kế và lựa chọn vô cùng chỉnh chu Màu sắc và đề tài cũng nhắm tới giới trẻ cũng chính là đối tượng khách hàng chính

Thanh tìm kiếm nằm trên thanh công cụ có thể dùng để search theo từ khoá nhập

Phần quảng cáo nhấp nháy liên tục “Giảm đến 50%” thu hút sự chú ý người dùng

Danh mục sản phẩm cũng khá đa dạng

Các sản phẩm tiêu biểu cũng được sắp xếp theo bố cục vừa mắt và đơn giản Ưu điểm:

Tương tự như ở các trang web khác, Bitis cũng theo xu hướng thiết kế đơn giản tối đa và chỉ tập trung trưng bày những thông tin cần thiết.

Website cũng cung cấp tương đối đầy đủ các chức năng cơ bản

Website thể hiện khá tốt trong việc cung cấp nhiều mã ưu đãi giảm giá để hấp dẫn người dùng

Tương tự nhu ở website Coolmate, phần tìm kiếm chỉ search theo từ khoá hoặc danh mục lựa chọn chứ không có bất kỳ một bộ lọc cụ thể nào Vd như: giá, size

Website cũng không có phần gợi ý sản phẩm theo tương tác lựa chọn của người dùng

Không có phần chat với người bán mà phải liên hệ qua phương thức gọi điện trực tiếp

XÁC ĐỊNH YÊU CẦU

Dựa trên văn bản mô tả “Kết quả dự kiến đạt được”, chúng em xác định được danh sách các chức năng chính sử dụng như sau:

2.2.1 Bộ phận quản trị viên

Bảng 1 Danh sách chức năng quản trị viên

STT Tên tác nhân Tên chức năng Mô tả

Chức năng quản lý người dùng, cho phép quản trị viên tìm kiếm, thêm, xoá, cập nhật người dùng, xem thông tin của người dùng trên hệ thống

Chức năng quản lý danh mục cho phép quản trị viên tìm kiếm, thêm, sửa, xóa, xem tất cả các danh mục trong hệ thống

Chức năng quản lý băng rôn cho phép quản trị viên tìm kiếm, thêm, sửa, xóa, xem tất cả các băng rôn trong hệ thống

Thống kê Chức năng thống kê doanh thu, lợi nhuận cho phép quản trị viên xem tổng doanh thu, tổng lợi nhuận của tất cả đơn hàng đã hoàn thành

Quản lý tin nhắn Chức năng quản lý tin nhắn cho phép quản trị viên nhắn tin với những người dùng khác trên hệ thống

Chức năng quản lý nhãn hàng cho phép quản trị viên tìm kiếm, thêm, sửa, xóa, xem tất cả các nhãn hàng trong hệ thống

Chức năng quản lý chủ đề cho phép quản trị viên tìm kiếm, thêm, sửa, xóa, xem tất cả các chủ đề trong hệ thống

Chức năng quản lý bài đăng cho phép quản trị viên tìm kiếm, thêm, sửa, xóa, xem tất cả các bài đăng trong hệ thống

Chức năng quản lý sản phẩm cho phép quản trị viên tìm kiếm, thêm, sửa, xóa, xem tất cả các sản phẩm trong hệ thống

Chức năng quản lý khyến mãi cho phép quản trị viên tìm kiếm, thêm, sửa, xóa, xem tất cả các khyến mãi trong hệ thống

Quản lý loại khuyến mãi

Chức năng quản lý loại khuyến mãi cho phép quản trị viên tìm kiếm, thêm, sửa, xóa, xem tất cả các loại khuyến mãi trong hệ thống

Chức năng quản lý loại ship cho phép quản trị viên tìm kiếm, thêm, sửa, xóa, xem tất cả các loại ship trong hệ thống

Quản lý đơn hàng

Chức năng quản lý đơn hàng cho phép quản trị viên tìm kiếm, xem chi tiết, cập nhật trạng thái tất cả các đơn hàng trong hệ thống

Quản lý nhà cung cấp

Chức năng quản lý nhà cung cấp cho phép quản trị viên tìm kiếm, thêm, sửa, xóa, xem tất cả các nhà cung cấp trong hệ thống

Chức năng quản lý đơn nhập hàng cho phép quản trị viên tìm kiếm, tạo đơn nhập hàng, xem tất cả các đơn nhập hàng trong hệ thống

Bảng 2 Danh sách chức năng khách hàng

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

Chức năng quản lý thông tin cá nhân cho phép khách hàng cập nhật, xem thông tin cá nhân của mình trong hệ thống

Quản lý đơn hàng cá nhân

Chức năng quản lý đơn hàng cá nhân cho phép khách hàng xem lại thông tin những đơn hàng mà họ đã đặt trong hệ thống và thay đổi trạng thái

Quản lý địa chỉ cá nhân

Chức năng quản lý địa chỉ cá nhân cho phép khách hàng thêm, sửa, xóa, xem tất cả các địa chỉ cá nhân của bản thân

Thêm sản phẩm vào giỏ hàng

Chức năng thêm sản phẩm vào giỏ hàng cho phép khách hàng thêm sản phẩm, cập nhật số lượng, xóa sản phẩm trong giỏ hàng của hệ thống

Quản lý khuyến mãi Chức năng quản lý khuyến mãi cho phép khách hàng lưu mã khuyến mãi, xem lại tất cả các mã đã lưu Đặt hàng thanh toán Chức năng đặt hàng thanh toán cho phép khách hàng đặt hàng và thanh toán bằng tiền mặt hoặc online

Bình luận đánh giá Chức năng bình luận đánh giá cho phép khách hàng bình luận bài đăng và đánh giá sản phẩm Đăng ký tài khoản Chức năng đăng ký tài khoản cho phép khách hàng tạo tài khoản cá nhân và đăng nhập vào hệ thống

2.2.3 Bộ phận khách vãng lai

Bảng 3 Danh sách chức năng khách vãng lai

Xem thông tin sản phẩm

Chức năng xem thông tin sản phẩm cho phép khách vãng lai xem đầy đủ thông tin chi tiết của từng sản phẩm trong hệ thống

Xem thông tin bài đăng

Chức năng xem thông tin bài đăng cho phép khách vãng lai xem đầy đủ thông tin chi tiết của từng bài đăng trong hệ thống Đăng ký tài khoản Chức năng đăng ký tài khoản cho phép khách vãng lai tạo tài khoản cá nhân và đăng nhập vào hệ thống

Bảng 4 Danh sách chức năng nhân viên giao hàng

Xem danh sách, chi tiết đơn hàng

Chức năng xem danh sách, chi tiết đơn hàng cho phép nhân viên giao hàng xem đầy đủ thông tin chi tiết của từng đơn hàng trong hệ thống

Cập nhật trạng thái đơn hàng

Chức năng cho phép shipper xem và nhận đơn, thay đổi trạng thái đơn hàng, gồm đã nhận đơn, đã giao hàng

Xem thông tin cá nhân Chức năng xem thông tin cá nhân cho phép shipper xem thông tin chi tiết của bản thân Đăng nhập Chức năng đăng nhập tài khoản cho phép shipper đăng nhập vào ứng dụng mobile của website

Bảng 5 Danh sách chức năng nhân viên bán hàng

Nhân viên bán hàng (Seller)

Quản lý đơn hàng

Chức năng quản lý đơn hàng, cho phép nhân viên bán hàng viên tìm kiếm, xem thông tin chi tiết, cập nhập trạng thái đơn hàng, xuất excel

Quản lý nhà cung cấp

Chức năng quản lý nhà cung cấp, cho phép nhân viên tìm kiếm, thêm, sửa , xóa nhà cung cấp, xem thông tin chi tiết, xuất excel

Quản lý tin nhắn Chức năng quản lý tin nhắn, cho phép nhân viên nhắn tin với người dùng có tài khoản

Chức năng quản lý nhập hàng, cho phép nhân viên tìm kiếm, thêm, sửa, xóa đơn nhập hàng, xem thông tin chi tiết, xuất excel

MÔ HÌNH HÓA YÊU CẦU

Hình 14 Lược đồ UseCase khách hàng và khách vãng lai

Hình 15 Lược đồ UseCase quản trị viên

Hình 16 Lược đồ UseCase nhân viên bán hàng

Hình 17 Lược đồ UseCase nhân viên giao hàng

Các tác nhân trong Use Case:

Bảng 6 Mô tả các tác nhân trong lược đồ UseCase

STT Tác nhân Mô tả

Người có trách nhiệm cao nhất đối với hệ thống, có tất cả các quyền của hệ thống bao gồm (quản lý người dùng, quản lý danh mục, quản lý tin nhắn, quản lý băng rôn, quản lý nhãn hàng, quản lý chủ đề, quản lý bài đăng, quản lý sản phẩm, quản lý khuyến mãi, quản lý loại khuyến mãi, quản lý loại ship, quản lý đơn hàng, quản lý thống kê, quản lý nhà cung cấp, quản lý nhập hàng)

Người dùng thông thường, có đăng ký tài khoản với hệ thống có quyền xem lịch sử đơn hàng, quản lý thông tin cá nhân, thêm sản phẩm vào giỏ hàng, quản lý địa chỉ cá nhân, bình luận bài đăng, đánh giá sản phẩm, đăng ký tài khoản mới, nhắn tin, quản lý khuyến mãi, đặt hàng thanh toán, đăng kí tài khoản, xem danh sách sản phẩm, xem danh sách bài đăng

3 Khách vãng lai Người dùng chưa có đăng kí hoặc chưa đăng nhập vào website họ chỉ có quyền xem thông tin sản phẩm, thông tin bài đăng, đăng kí tài khoản

Nhân viên giao hàng được admin mở tài khoản để đăng nhập vào ứng dụng mobile có quyền xem danh sách, chi tiết đơn hàng, cập nhật trạng thái đơn hàng, xem thông tin cá nhân

Nhân viên bán hàng được admin mở tài khoản để đăng nhập vào trang quản trị có quyền quản lý đơn hàng, quản lý tin nhắn, quản lý nhà cung cấp, quản lý nhập hàng

Bảng 7 Mô tả Use case đăng ký

Short Description: Khách vãng lai phải đăng ký tài khoản để có thể sử dụng các chức năng thanh toán

Pre-Conditions: Chưa có tài khoản

Post-Conditions: Tài khoản được khởi tạo và lưu trữ dữ liệu vào CSDL

Trên giao diện đăng nhập

(1) Nhấn vào nút “Tài khoản mới” thì một giao diện đăng ký sẽ hiện lên

(2) Điền tên, email, mật khẩu, xác nhận mật khẩu và nhấn nút đăng ký

(3) Nhập mã OTP được gửi tới số điện thoại đã đăng ký

(4) Bấm Xác thực và đăng ký tài khoản mới thành công

Alternate Flow(s): Khi không muốn tiếp tục đăng ký, có thể nhấn nút “Tôi có tài khoản” để trở lại trang đăng nhập

Exception Flow(s): Thông tin đăng ký đã được sử dụng hoặc trống Người dùng sẽ được thông báo để sửa đổi

Bảng 8 Mô tả Use case đăng nhập

Short Description: Người dùng cần phải đăng nhập tài khoản để có thể sử dụng các chức năng chính của trang web

Actors: Khách hàng (KH), Nhân viên (NV), Quản trị viên (QTV)

Pre-Conditions: Khách hàng: đã có tài khoản

Quản trị viên, Nhân viên: được cấp tài khoản

Post-Conditions: Đăng nhập thành công vào hệ thống

(1) KH, NV, QTV vào trang đăng nhập, giao diện đăng nhập sẽ hiện lên

(2) KH điền thông tin đăng nhập đã đăng ký

NV, QTV điền thông tin đăng nhập được cấp

KH, NV, QTV nhấn nút “Tài khoản mới” trên trang đăng nhập: hệ thống chuyển tới trang đăng ký

Người dùng nhấn nút quên mật khẩu khi đăng nhập: hệ thống chuyển tới trang quên mật khẩu

Exception Flow(s): Nhập sai thông tin tài khoản hoặc mật khẩu Thông báo sai tài khoản và mật khẩu

Bảng 9 Mô tả Use case đăng xuất

Short Description: Khách hàng, Nhân viên, Quản trị viên thoát tài khoản

Actors: Khách hàng (KH), Nhân viên (NV), Quản trị viên (QTV)

Pre-Conditions: Đã đăng nhập tài khoản

Post-Conditions: Thoát khỏi phiên đăng nhập

(1) KH đang hoạt động trên trang web

NV hoặc QTV Nhấn vào ảnh đại diện, bảng chọn xuất hiện

(3) Đăng xuất thành công, thoát tài khoản

2.3.2.4 Use Case Thêm giỏ hàng

Bảng 10 Mô tả Use case thêm giỏ hàng

Use Case: Thêm vào giỏ hàng

Short Description: Khách hàng thêm sản phẩm vào giỏ hàng

Pre-Conditions: Đã đăng nhập tài khoản và đang ở trang chủ

Post-Conditions: Xem được thông tin bài báo tin tức

Main Flow: (1) Bấm vào xem chi tiết sản phẩm

(2) Kiểm tra số lượng sản phẩm mong muốn và bấm nút Thêm vào giỏ

Khách hàng có thể bấm xem các mục khác trên thanh công cụ để qua trang khác xem

Khách hàng có thể bấm xem thông tin chi tiết, mô tả chi tiết cũng như đánh giá của sản phẩm trên trang

Exception Flow(s): Sản phẩm đã hết số lượng vào lúc bấm Thêm vào giỏ Người dùng sẽ được thông báo là hết sản phẩm trong kho

2.3.2.5 Use Case Tìm kiếm sản phẩm

Bảng 11 Mô tả Use case tìm kiếm sản phẩm

Use Case: Tìm kiếm sản phẩm

Short Description: Khách hàng tìm kiếm thông tin sản phẩm mong muốn

Pre-Conditions: Đã đăng nhập tài khoản và bấm chọn mục Cửa hàng trên thanh công cụ ở trang chủ

Post-Conditions: Hiển thị các sản phẩm theo thông tin tìm kiếm

Trên giao diện trang thông tin cá nhân (1.1) Nhập từ khóa vào ô tìm kiếm và bấm nút Enter trên bàn phím hoặc nhấn vào icon kính lúp bên cạnh (1.2) Chọn radio option mục Các danh mục hoặc Các thương hiệu để tạo bộ lọc hiển thị sản phẩm

(2) Xem danh sách các sản phẩm theo bộ lọc từ hệ thống

Alternate Flow(s): Khách hàng có thể bấm xem các mục khác trên thanh công cụ để qua trang khác xem Exception Flow(s):

2.3.2.6 Use Case Thu thập Voucher

Bảng 12 Mô tả Use case thu thập voucher

Use Case: Lưu các Voucher hiện có trên trang

Short Description: Khách hàng xem các voucher hiện có trên trang và lưu chúng để sử dụng sau này

Post-Conditions: Lưu thành công các voucher đã chọn ở trong Kho voucher

Trên giao diện trang chủ

(1) Bấm chọn mục Giảm giá trên thanh công cụ ở trang chủ

(2) Bấm Lưu đối với mã giảm giá mong muốn

Alternate Flow(s): Khách hàng có thể bấm xem các mục khác trên thanh công cụ để qua trang khác xem

Exception Flow(s): Mã giảm giá đã hết số lượng vào lúc bấm Lưu Người dùng sẽ được thông báo là hết số lượng voucher giảm giá cho mã đã chọn

2.3.2.7 Use Case Xem thông tin sản phẩm

Bảng 13 Mô tả Use case xem thông tin sản phẩm

Use Case: Xem thông tin sản phẩm

Short Description: Xem thông tin chi tiết sản phẩm

Post-Conditions: Xem được thông tin chi tiết sản phẩm

(1.1) Ở trang chủ bấm vào xem một sản phẩm được gợi ý ở các mục sản phẩm trên trang (1.2) Ở mục Cửa hàng và bấm vào xem một sản phẩm trong danh sách các sản phẩm đang hiển thị

2.3.2.8 Use Case Xem tin tức

Bảng 14 Mô tả Use case xem tin tức

Use Case: Xem tin tức

Short Description: Xem bài báo về tin tức đang có trên trang

Pre-Conditions: Đã đăng nhập tài khoản và đang ở trang chủ

Post-Conditions: Xem được thông tin bài báo tin tức

Main Flow: (1) Ở trang chủ bấm vào mục Tin tức trên thanh công cụ

(2) Bấm chọn vào bài báo tin tức muốn xem

2.3.2.9 Use Case Quản lý tài khoản

Bảng 15 Mô tả Use case quản lý tài khoản

Use Case: Quản lý tài khoản

Short Description: Khách hàng chỉnh sửa thông tin tài khoản

Pre-Conditions: Đã đăng nhập tài khoản thành công và bấm chọn vào icon người dùng trên thanh công cụ

Post-Conditions: Chỉnh sửa thông tin theo ý muốn thành công

Trên giao diện trang thông tin cá nhân (1.1) Chọn mục Hồ sơ và chỉnh sửa thông tin muốn thay đổi vào các field và bấm tải ảnh lên để thay đổi hình đại diện (1.2) Chọn mục Đổi mật khẩu và nhập vào các field mật khẩu cần thiết (1.3) Chọn mục Địa chỉ và bấm Thêm địa chỉ mới Sau đó nhập các thông tin cần thiết

(2) Bấm nút Lưu thông tin

Alternate Flow(s): Khách hàng có thể bấm Đơn mua để xem các đơn hàng đã mua hoặc Kho voucher để xem các voucher đã lưu

Exception Flow(s): Mục tên hoặc số điện thoại bị bỏ trống Người dùng sẽ được thông báo để sửa đổi

2.3.2.10 Use Case Thêm danh mục

Bảng 16 Mô tả Use case thêm danh mục

Use Case: Thêm danh mục

Short Description: Quản trị viên thêm danh mục mới vào hệ thống

Actors: Quản trị viên (QTV)

Pre-Conditions: Đã đăng nhập tài khoản admin

Post-Conditions: Thêm danh mục mới thành công

(1) Truy cập vào Thêm danh mục trong mục Quản lý danh mục

(2) Nhập thông tin danh mục mới

(3) Bấm Lưu thông tin Alternate Flow(s): Quản trị viên có thể bấm xem các mục khác trên thanh công cụ

Exception Flow(s): Các mục quan trọng bị bỏ trống Quản trị viên sẽ được thông báo không bỏ trống field quan trọng

2.3.2.11 Use Case Xóa danh mục

Bảng 17 Mô tả Use case xóa danh mục

Use Case: Xóa danh mục

Short Description: Quản trị viên xóa danh mục khỏi hệ thống

Post-Conditions: Xóa danh mục đã chọn thành công

Main Flow: (1) Truy cập vào Danh sách danh mục trong mục Quản lý danh mục

(2) Bấm nút Delete trên danh mục muốn xóa

Alternate Flow(s): Quản trị viên có thể bấm xem các mục khác trên thanh công cụ Exception Flow(s):

2.3.2.12 Use Case Chỉnh sửa danh mục

Bảng 18 Mô tả Use case chỉnh sửa danh mục

Use Case: Chỉnh sửa danh mục

Short Description: Quản trị viên chỉnh sửa thông tin danh mục

Post-Conditions: Chỉnh sửa thông tin danh mục thành công

(1) Truy cập vào Danh sách danh mục trong mục Quản lý danh mục

(2) Bấm nút Edit trên danh mục muốn sửa thông tin

(3) Chỉnh sửa thông tin danh mục

2.3.2.13 Use Case Hủy đơn hàng

Bảng 19 Mô tả Use case hủy đơn hàng

Use Case: Hủy đơn hàng

Short Description: Quản trị viên, Nhân viên hủy đơn hàng được chọn

Actors: Quản trị viên (QTV), Nhân viên (NV)

Post-Conditions: Hủy đơn hàng đã chọn thành công

(1) Truy cập vào Danh sách đơn hàng trong mục Quản lý đơn hàng

(2) Bấm nút Xem chi tiết sản phẩm cần hủy

(3) Bấm nút Hủy đơn hàng Alternate Flow(s): Quản trị viên, nhân viên có thể bấm xem các mục khác trên thanh công cụ Exception Flow(s):

2.3.2.14 Use Case Xác nhận đơn hàng

Bảng 20 Mô tả Use case xác nhận đơn hàng

Use Case: Xác nhận đơn hàng

Short Description: Quản trị viên, Nhân viên xác nhận đơn hàng được chọn

Post-Conditions: Xác nhận đơn hàng đã chọn thành công

(1) Truy cập vào Danh sách đơn hàng trong mục Quản lý đơn hàng

(2) Bấm nút Xem chi tiết sản phẩm cần xác nhận

(3) Bấm nút Xác nhận đơn hàng Alternate Flow(s): Quản trị viên, nhân viên có thể bấm xem các mục khác trên thanh công cụ Exception Flow(s):

2.3.2.15 Use Case Xem danh sách đơn hàng

Bảng 21 Mô tả Use case xem danh sách đơn hàng

Use Case: Xem danh sách đơn hàng

Short Description: Quản trị viên xem danh sách đơn hàng đang có trong hệ thống

Post-Conditions: Có thể xem toàn bộ danh sách đơn hàng

Main Flow: (1) Truy cập vào Danh sách đơn hàng trong mục Quản lý đơn hàng

Alternate Flow(s): Quản trị viên, nhân viên có thể bấm xem các mục khác trên thanh công cụ Exception Flow(s):

2.3.2.16 Use Case Thêm người dùng

Bảng 22 Mô tả Use case thêm người dùng

Use Case: Thêm người dùng

Short Description: Quản trị viên thêm người dùng mới vào hệ thống

Post-Conditions: Thêm người dùng mới thành công

(1) Truy cập vào Thêm người dùng trong mục Quản lý người dùng

(2) Nhập thông tin người dùng mới

2.3.2.17 Use Case Xóa người dùng

Bảng 23 Mô tả Use case xóa người dùng

Use Case: Xóa người dùng

Short Description: Quản trị viên xóa người dùng khỏi hệ thống

Post-Conditions: Xóa người dùng đã chọn thành công

Main Flow: (1) Truy cập vào Danh sách người dùng trong mục Quản lý người dùng

(2) Bấm nút Delete trên người dùng muốn xóa

2.3.2.18 Use Case Chỉnh sửa người dùng

Bảng 24 Mô tả Use case chỉnh sửa người dùng

Use Case: Chỉnh sửa người dùng

Short Description: Quản trị viên chỉnh sửa thông tin người dùng

Post-Conditions: Chỉnh sửa thông tin người dùng thành công

(1) Truy cập vào Danh sách người dùng trong mục Quản lý người dùng

(2) Bấm nút Edit trên người dùng muốn sửa thông tin

(3) Chỉnh sửa thông tin người dùng

2.3.2.19 Use Case Thêm sản phẩm

Bảng 25 Mô tả Use case thêm sản phẩm

Use Case: Thêm sản phẩm

Short Description: Quản trị viên thêm sản phẩm mới vào hệ thống

Post-Conditions: Thêm sản phẩm mới thành công

(1) Truy cập vào Thêm sản phẩm trong mục Quản lý sản phẩm

(2) Nhập thông tin sản phẩm mới

2.3.2.20 Use Case Chỉnh sửa sản phẩm

Bảng 26 Mô tả Use case chỉnh sửa sản phẩm

Use Case: Chỉnh sửa sản phẩm

Short Description: Quản trị viên chỉnh sửa thông tin sản phẩm

Post-Conditions: Chỉnh sửa thông tin sản phẩm thành công

(1) Truy cập vào Danh sách sản phẩm trong mục Quản lý sản phẩm

(2) Bấm nút Edit trên sản phẩm muốn sửa thông tin

(3) Chỉnh sửa thông tin sản phẩm

2.3.2.21 Use Case Xóa sản phẩm

Bảng 27 Mô tả Use case xóa sản phẩm

Use Case: Xóa sản phẩm

Short Description: Quản trị viên ban sản phẩm đã chọn khỏi hệ thống

Post-Conditions: Ban sản phẩm đã chọn thành công

Main Flow: (1) Truy cập vào Danh sách sản phẩm trong mục Quản lý sản phẩm

(2) Bấm nút Ban trên sản phẩm

2.3.2.22 Use Case Thêm loại khuyến mãi

Bảng 28 Mô tả Use case thêm loại khuyến mãi

Use Case: Thêm loại khuyến mãi

Short Description: Quản trị viên thêm loại khuyến mãi mới vào hệ thống

Post-Conditions: Thêm loại khuyến mãi mới thành công

(1) Truy cập vào Thêm loại khuyến mãi trong mục Quản lý voucher

(2) Nhập thông tin loại khuyến mãi mới

2.3.2.23 Use Case Xóa loại khuyến mãi

Bảng 29 Mô tả Use case xóa loại khuyến mãi

Use Case: Xóa loại khuyến mãi

Short Description: Quản trị viên xóa loại khuyến mãi đã chọn khỏi hệ thống

Post-Conditions: Xóa loại khuyến mãi đã chọn thành công

Main Flow: (1) Truy cập vào Danh sách loại khuyến mãi trong mục Quản lý voucher

(2) Bấm nút Xóa loại khuyến mãi

2.3.2.24 Use Case Chỉnh sửa loại khuyến mãi

Bảng 30 Mô tả Use case chỉnh sửa loại khuyến mãi

Use Case: Chỉnh sửa loại khuyến mãi

Short Description: Quản trị viên chỉnh sửa thông tin loại khuyến mãi

Post-Conditions: Chỉnh sửa thông tin loại khuyến mãi thành công

(1) Truy cập vào Danh sách loại khuyến mãi trong mục Quản lý voucher

(2) Bấm nút Edit trên loại khuyến mãi muốn sửa thông tin

(3) Chỉnh sửa thông tin loại khuyến mãi

Alternate Flow(s): Quản trị viên có thể bấm xem các mục khác trên thanh công cụ

2.3.2.25 Use Case Thêm mã khuyến mãi

Bảng 31 Mô tả Use case thêm mã khuyến mãi

Use Case: Thêm mã khuyến mãi

Short Description: Quản trị viên thêm mã khuyến mãi mới vào hệ thống

Post-Conditions: Thêm mã khuyến mãi mới thành công

(1) Truy cập vào Thêm mã khuyến mãi trong mục Quản lý voucher

(2) Nhập thông tin mã khuyến mãi mới

2.3.2.26 Use Case Xóa mã khuyến mãi

Bảng 32 Mô tả Use case xóa mã khuyến mãi

Use Case: Xóa mã khuyến mãi

Short Description: Quản trị viên xóa mã khuyến mãi đã chọn khỏi hệ thống

Post-Conditions: Xóa mã khuyến mãi đã chọn thành công

Main Flow: (1) Truy cập vào Danh sách mã khuyến mãi trong mục Quản lý voucher

(2) Bấm nút Xóa mã khuyến mãi Alternate Flow(s): Quản trị viên có thể bấm xem các mục khác trên thanh công cụ Exception Flow(s):

2.3.2.27 Use Case Chỉnh sửa mã khuyến mãi

Bảng 33 Mô tả Use case chỉnh sửa mã khuyến mãi

Use Case: Chỉnh sửa mã khuyến mãi

Short Description: Quản trị viên chỉnh sửa thông tin mã khuyến mãi

Post-Conditions: Chỉnh sửa thông tin mã khuyến mãi thành công

(1) Truy cập vào Danh sách mã khuyến mãi trong mục Quản lý voucher

(2) Bấm nút Edit trên mã khuyến mãi muốn sửa thông tin

(3) Chỉnh sửa thông tin mã khuyến mãi

2.3.2.28 Use Case Thống kê doanh thu

Bảng 34 Mô tả Use case thống kê doanh thu

Use Case: Thống kê doanh thu

Short Description: Quản trị viên xem thống kê doanh thu

Post-Conditions: Có thể xem được danh sách thống kê doanh thu trên hệ thống

(1) Truy cập vào Thống kê doanh thu trong mục Thống kê

(3) Bấm nút Lọc Alternate Flow(s): Quản trị viên, nhân viên có thể bấm xem các mục khác trên thanh công cụ Exception Flow(s):

2.3.2.29 Use Case Thống kê lợi nhuận

Bảng 35 Mô tả Use case thống kê lợi nhuận

Use Case: Thống kê lợi nhuận

Short Description: Quản trị viên xem thống kê lợi nhuận

Post-Conditions: Có thể xem được danh sách thống kê lợi nhuận trên hệ thống

(1) Truy cập vào Thống kê lợi nhuận trong mục Thống kê

(3) Bấm nút Lọc Alternate Flow(s): Quản trị viên, nhân viên có thể bấm xem các mục khác trên thanh công cụ Exception Flow(s):

2.3.2.30 Use Case Thống kê hàng tồn kho

Bảng 36 Mô tả Use case thống kê hàng tồn kho

Use Case: Thống kê tồn kho

Short Description: Quản trị viên xem thống kê tồn kho

Post-Conditions: Có thể xem được danh sách thống kê tồn kho trên hệ thống

Main Flow: Truy cập vào Thống kê tồn kho trong mục Thống kê

Alternate Flow(s): Quản trị viên, nhân viên có thể bấm xem các mục khác trên thanh công cụ Exception Flow(s):

2.3.2.31 Use Case Đánh giá sản phẩm

Bảng 37 Mô tả Use case đánh giá sản phẩm

Use Case: Đánh giá sản phẩm sau khi mua hàng

Short Description: Khách hàng có thể viết đánh giá sản phẩm (hình ảnh nếu có) và chọn số sao cho sản phẩm

Pre-Conditions: Đã đăng nhập tài khoản Đã mua sản phẩm cần đánh giá

Post-Conditions: Đánh giá sản phẩm thành công và hiển thị thông báo

Trên giao diện trang chi tiết sản phẩm

(1) Bấm chọn phần đánh giá

(2) Hệ thống sẽ hiển thị giao diện phần đánh giá

(3) Nhập thông tin đánh giá (hình ảnh nếu có), chọn số sao cho sản phẩm và click button đánh giá sản phẩm

(4) Hiển thị thông báo đánh giá sản phẩm thành công

Alternate Flow(s): Khách hàng có thể bấm xem các mục khác trang chi tiết sản phẩm như

Thông tin chi tiết, mô tả chi tiết của sản phẩm

Các mục quan trọng bị bỏ trống khi đánh giá (chưa chọn số sao, chưa viết nội dung đánh giá) Hệ thống sẽ hiển thị thông báo lỗi và khách hàng sẽ nhập lại đầy đủ

Khách hàng chưa mua sản phẩm định đánh giá, hệ thống sẽ hiển thị thông báo lỗi và khách hàng phải mua sản phẩm đó mới tiến hành đánh giá được

2.3.2.32 Use Case Thanh toán sản phẩm

Bảng 38 Mô tả Use case thanh toán sản phẩm

Use Case: Thanh toán khi mua sản phẩm

Khách hàng đặt hàng và thanh toán trực tuyến hoặc thanh toán khi nhận hàng Chức năng này bao gồm việc chọn địa chỉ giao hàng, đơn vị vận chuyển, áp dụng voucher giảm giá, và chọn phương thức thanh toán

Pre-Conditions: Đã đăng nhập tài khoản User Đã chọn các sản phẩm và có giỏ hàng sẵn sàng để thanh toán

Hệ thống có thông tin về các địa chỉ giao hàng, loại hình vận chuyển và mã voucher(nếu có)

Nếu thanh toán thành công: Khách hàng nhận thông báo đặt hàng thành công và đơn hàng được cập nhật trạng thái trong Đơn mua của khách hàng

Nếu thanh toán thất bại hoặc bị hủy: Khách hàng nhận thông báo lỗi và giỏ hàng vẫn được giữ nguyên

(1) Truy cập vào trang Thanh toán

2.1 Hiển thị thông tin giỏ hàng của khách hàng

2.2 Lấy thông tin địa chỉ giao hàng của khách hàng từ cơ sở dữ liệu

2.3 Lấy thông tin các đơn vị vận chuyển

(3) Chọn địa chỉ giao hàng, nếu chưa có thì thêm địa chỉ giao hàng mới thông qua modal

(4) Chọn đơn vị vận chuyển, áp mã voucher(nếu có)

(5) Chọn phương thức thanh toán (thanh toán trực tuyến, PayPal,

VNPAY hoặc khi nhận hàng)

7.1 Tạo đơn hàng với thông tin đã chọn

7.2 Nếu chọn thanh toán trực tuyến qua VNPAY, điều hướng khách hàng đến trang thanh toán VNPAY

7.3 Nếu chọn thanh toán khi nhận hàng, hoàn tất đơn hàng và thông báo thành công

(8) Hoàn tất thanh toán trực tuyến hoặc nhận thông báo đặt hàng thành công

Khách hàng có thể thêm địa chỉ giao hàng mới

Lỗi kết nối VNPAY, Nếu hệ thống không thể kết nối với VNPAY, trả về thông báo lỗi cho khách hàng và đề nghị thử lại sau

Các mục quan trọng(chọn đơn vị vận chuyển, địa chỉ) bị bỏ trống Khách hàng sẽ được thông báo lỗi không được bỏ trống

Hệ thống không thể kết nối hoặc hoàn tất giao dịch thanh toán với VNPAY, khách hàng có thể tiếp tục quá trình đặt hàng sau khi chọn phương thức thanh toán khác hoặc sau khi thử lại thành công

2.3.2.33 Use Case Giao hàng shipper

Bảng 38.1 Mô tả Use case giao hàng shipper

Use Case: Giao hàng của Shipper

Short Description: Shipper sẽ nhận đơn hàng trên App từ Admin và tiến hành giao đến tay khách hàng Chức năng này bao gồm việc xác nhận, thay đổi trạng thái

51 của đơn hàng, chụp và gửi hình ảnh đơn hàng sau khi giao hàng thành công

Pre-Conditions: Đã đăng nhập tài khoản Shipper Đã chọn đơn hàng cần giao hàng

Hệ thống có tất cả thông tin về đơn hàng cần giao và trạng thái của đơn hàng

Nếu giao hàng thành công: Shipper sẽ gửi hình ảnh sau khi giao hàng thành công và trạng thái của đơn hàng “Đã giao hàng”

Nếu thanh toán thất bại hoặc bị hủy: Hệ thống bị lỗi

(1) Truy cập vào một đơn hàng trong danh sách các đơn hàng

2.1 Hiển thị thông tin chi tiết đơn hàng

2.2 Lấy thông tin chi tiết đơn hàng từ cơ sở dữ liệu và trạng thái của đơn hàng “Đang chờ lấy hàng”

(3) Shipper xác nhận đơn hàng bằng bấm nút “Nhận đơn”

4.1 Hiển thị thông tin chi tiết đơn hàng và trạng thái đơn hàng là “Đang giao hàng”

(5) Chụp và gửi hình ảnh đơn hàng khi giao hàng thành công và bấm nút

6.1 Hiển thị thông tin chi tiết đơn hàng và trạng thái của đơn hàng “Đã giao hàng” kèm hình ảnh đơn hàng đã tải lên

Shipper không thể nhận đơn do lỗi hệ thống hoặc kết nối mạng Lỗi khi chụp ảnh đơn hàng hoàn thành (Shipper chụp ảnh đơn hàng hoàn thành nhưng gặp lỗi khi tải ảnh lên)

PHÂN TÍCH THIẾT KẾ HỆ THỐNG

THIẾT KẾ LƯỢC ĐỒ TUẦN TỰ

CHƯƠNG 3: PHÂN TÍCH THIẾT KẾ HỆ THỐNG 3.1 THIẾT KẾ LƯỢC ĐỒ LỚP

Hình 14 Lược đồ Class Diagram

3.2 THIẾT KẾ LƯỢC ĐỒ TUẦN TỰ

Hình 15 Lược đồ Sequence Diagram Đăng ký

Hình 16 Lược đồ Sequence Diagram Đăng nhập

Hình 17 Lược đồ Sequence Diagram Đăng xuất

3.2.4 Sequence Diagram “Thêm giỏ hàng”

Hình 18 Lược đồ Sequence Diagram Thêm giỏ hàng

3.2.5 Sequence Diagram “Tìm kiếm sản phẩm”

Hình 19 Lược đồ Sequence Diagram Tìm kiếm sản phẩm

3.2.6 Sequence Diagram “Thu thập voucher”

Hình 20 Lược đồ Sequence Diagram Thu thập voucher

3.2.7 Sequence Diagram “Xem thông tin sản phẩm”

Hình 21 Lược đồ Sequence Diagram Xem thông tin sản phẩm

3.2.8 Sequence Diagram “Xem tin tức”

Hình 22 Lược đồ Sequence Diagram Xem tin tức

3.2.9 Sequence Diagram “Quản lý tài khoản”

Hình 23 Lược đồ Sequence Diagram Quản lý tài khoản

3.2.10 Sequence Diagram “Thêm danh mục”

Hình 24 Lược đồ Sequence Diagram Thêm danh mục

3.2.11 Sequence Diagram “Xóa danh mục”

Hình 25 Lược đồ Sequence Diagram Xóa danh mục

3.2.12 Sequence Diagram “Chỉnh sửa danh mục”

Hình 26 Lược đồ Sequence Diagram Chỉnh sửa danh mục

3.2.13 Sequence Diagram “Hủy đơn hàng”

Hình 27 Lược đồ Sequence Diagram Hủy đơn hàng

3.2.14 Sequence Diagram “Xác nhận đơn hàng”

Hình 28 Lược đồ Sequence Diagram Xác nhận đơn hàng

3.2.15 Sequence Diagram “Xem danh sách đơn hàng”

Hình 29 Lược đồ Sequence Diagram Xem danh sách đơn hàng

3.2.16 Sequence Diagram “Thêm người dùng”

Hình 30 Lược đồ Sequence Diagram Thêm người dùng

3.2.17 Sequence Diagram “Xóa người dùng”

Hình 31 Lược đồ Sequence Diagram Xóa người dùng

3.2.18 Sequence Diagram “Chỉnh sửa người dùng”

Hình 32 Lược đồ Sequence Diagram Chỉnh sửa người dùng

3.2.19 Sequence Diagram “Thêm sản phẩm”

Hình 33 Lược đồ Sequence Diagram Thêm sản phẩm

3.2.20 Sequence Diagram “Chỉnh sửa sản phẩm”

Hình 34 Lược đồ Sequence Diagram Chỉnh sửa sản phẩm

3.2.21 Sequence Diagram “Xóa sản phẩm”

Hình 35 Lược đồ Sequence Diagram Xóa sản phẩm

3.2.22 Sequence Diagram “Thêm loại khuyến mãi”

Hình 36 Lược đồ Sequence Diagram Thêm loại khuyến mãi

3.2.23 Sequence Diagram “Xóa loại khuyến mãi”

Hình 37 Lược đồ Sequence Diagram Xóa loại khuyến mãi

3.2.24 Sequence Diagram “Chỉnh sửa loại khuyến mãi”

Hình 38 Lược đồ Sequence Diagram Chỉnh sửa loại khuyến mãi

3.2.25 Sequence Diagram “Thêm mã khuyến mãi”

Hình 39 Lược đồ Sequence Diagram Thêm mã khuyến mãi

3.2.26 Sequence Diagram “Xóa mã khuyến mãi”

Hình 40 Lược đồ Sequence Diagram Xóa mã khuyến mãi

3.2.27 Sequence Diagram “Chỉnh sửa mã khuyến mãi”

Hình 41 Lược đồ Sequence Diagram Chỉnh sửa mã khuyến mãi

3.2.28 Sequence Diagram “Thống kê doanh thu”

Hình 42 Lược đồ Sequence Diagram Thống kê doanh thu

3.2.29 Sequence Diagram “Thống kê lợi nhuận”

Hình 43 Lược đồ Sequence Diagram Thống kê lợi nhuận

3.2.30 Sequence Diagram “Thống kê hàng tồn kho”

Hình 44 Lược đồ Sequence Diagram Thống kê hàng tồn kho

3.2.31 Sequence Diagram “Thanh toán sản phẩm”

Hình 45 Lược đồ Sequence Diagram Thanh toán sản phẩm

3.2.32 Sequence Diagram “Đánh giá sản phẩm”

Hình 46 Lược đồ Sequence Diagram Đánh giá sản phẩm

3.2.33 Sequence Diagram “Giao hàng shipper”

Hình 46.1 Lược đồ Sequence Diagram Giao hàng shipper

3.3 THIẾT KẾ CƠ SỞ DỮ LIỆU

Hình 47 Lược đồ ERD tổng quát

Bảng 39 Mô tả chi tiết bảng AddressUser

Cột Kiểu Null Mặc định Ràng buộc Mô tả id int(11) Khôn g Primary key, auto_increment Mã địa chỉ tài khoản userId int(11) Có NULL Foreign key Mã tài khoản shipName varchar(255) Có NULL Tên người nhận shipAdress varchar(255) Có NULL Địa chỉ người nhận shipEmail varchar(255) Có NULL Địa chỉ email người nhận shipPhonenumb er varchar(255) Có NULL Số điện thoại người nhận createdAt datetime Khôn g Ngày tạo updatedAt datetime Khôn g Ngày chỉnh sửa

Bảng 40 Mô tả chi tiết bảng Allcode

Cột Kiểu Null Mặc định Ràng buộc Mô tả id int(11) Khôn g Primary key, auto_increment Mã định danh type varchar(255) Có NULL Loại mã value varchar(255) Có NULL Giá trị code varchar(255) Có NULL Unique Mã code createdAt datetime Khôn g Ngày tạo updatedAt datetime Khôn g Ngày chỉnh sửa

Bảng 41 Mô tả chi tiết bảng Banner

Cột Kiểu Null Mặc định Ràng buộc Mô tả id int(11) Khôn g Primary key, auto_increment Mã băng rôn description longtext Có NULL Mô tả name varchar(255) Có NULL Tên băng rông statusId varchar(255) Có NULL Foreign Key Mã trạng thái image longblob Có NULL Hình ảnh createdAt datetime Khôn g Ngày tạo updatedAt datetime Khôn g Ngày chỉnh sửa

Bảng 42 Mô tả chi tiết bảng Blog

Cột Kiểu Null Mặc định Ràng buộc Mô tả id int(11) Khôn g Primary key, auto_increment Mã bài đăng shortdescription longtext Có NULL Mô tả ngắn title varchar(255) Có NULL Tiêu đề subjectId varchar(255) Có NULL Mã chủ đề

86 statusId varchar(255) Có NULL Mã trạng thái image longblob Có NULL Hình ảnh contentMarkdown longtext Có NULL Nội dung markdown dạng text contentHTML longtext Có NULL Nội dung markdown dạng html userId int(11) Có NULL Foreign Key Mã người dùng view int(11) Có NULL Lượt xem createdAt datetime Khôn g Ngày tạo updatedAt datetime Khôn g Ngày chỉnh sửa

Bảng 43 Mô tả chi tiết bảng Comment

Cột Kiểu Null Mặc định Ràng buộc Mô tả id int(11) Khôn g Primary key, auto_increment Mã bình luận / đánh giá content longtext Có NULL Nội dung image longblob Có NULL Hình ảnh parentId int(11) Có NULL Mã bình luận / đánh giá cấp cha con productId int(11) Có NULL Foreign Key Mã sản phẩm userId int(11) Có NULL Foreign Key Mã người dùng blogId int(11) Có NULL Foreign Key Mã bài đăng star int(11) Có NULL Số sao createdAt datetime Khôn g Ngày tạo updatedAt datetime Khôn g Ngày chỉnh sửa

Bảng 44 Mô tả chi tiết bảng Message

Cột Kiểu Null Mặc định Ràng buộc Mô tả

87 id int(11) Khôn g Primary key, auto_increment Mã tin nhắn text longtext Có NULL Nội dung userId int(11) Có NULL Foreign Key Mã người dùng roomId int(11) Có NULL Foreign Key Mã phòng unRead tinyint(1) Có NULL Trạng thái đọc tin nhắn createdAt datetime Khôn g Ngày tạo updatedAt datetime Khôn g Ngày chỉnh sửa

Bảng 45 Mô tả chi tiết bảng OrderDetail

Cột Kiểu Null Mặc định Ràng buộc Mô tả id int(11) Khôn g Primary key, auto_increment Mã chi tiết đơn hàng orderId int(11) Có NULL Foreign Key Mã đơn hàng productId int(11) Có NULL Foreign Key Mã kích thước sản phẩm quantity int(11) Có NULL Số lượng realPrice bigint(20) Có NULL Giá thực tế createdAt datetime Khôn g Ngày tạo updatedAt datetime Khôn g Ngày chỉnh sửa

Bảng 46 Mô tả chi tiết bảng OrderProduct

Cột Kiểu Null Mặc định Ràng buộc Mô tả id int(11) Khôn g Primary key, auto_increment Mã đơn hàng addressUserId int(11) Có NULL Foreign Key Mã địa chỉ người dùng statusId varchar(255) Có NULL Foreign Key Mã trạng thái typeShipId int(11) Có NULL Foreign Key Mã loại vận chuyển voucherId int(11) Có NULL Foreign Key Mã khuyến mã

88 note varchar(255) Có NULL Ghi chú isPaymentOnlie n int(11) Có NULL Trạng thái thanh toán shipperId Int(11) Có NULL Mã shipper image longblob Có NULL Hình ảnh createdAt datetime Khôn g Ngày tạo updatedAt datetime Khôn g Ngày chỉnh sửa

Bảng 47 Mô tả chi tiết bảng ProductDetail

Cột Kiểu Null Mặc định Ràng buộc Mô tả id int(11) Khôn g Primary key, auto_increment Mã loại sản phẩm productId int(11) Có NULL Foreign Key Mã sản phẩm description longtext Có NULL Mô tả nameDetail varchar(255) Có NULL Tên loại sản phẩm originalPrice bigint(20) Có NULL Giá gốc discountPrice bigint(20) Có NULL Giá khuyến mãi createdAt datetime Khôn g Ngày tạo updatedAt datetime Khôn g Ngày chỉnh sửa

Bảng 48 Mô tả chi tiết bảng ProductDetailSize

Cột Kiểu Null Mặc định Ràng buộc Mô tả id int(11) Khôn g Primary key, auto_increment

Mã kích thước loại sản phẩm productdetailId int(11) Có NULL Foreign Key Mã loại sản phẩm width varchar(255) Có NULL Chiều rộng height varchar(255) Có NULL Chiều cao weight varchar(255) Có NULL Cân nặng

89 sizeId varchar(255) Có NULL Foreign Key Mã kích thước createdAt datetime Khôn g Ngày tạo updatedAt datetime Khôn g Ngày chỉnh sửa

Bảng 49 Mô tả chi tiết bảng ProductImage

Cột Kiểu Null Mặc định Ràng buộc Mô tả id int(11) Khôn g Primary key, auto_increment

Mã hình ảnh loại sản phẩm caption varchar(255) Có NULL Mô tả productdetailId int(11) Có NULL Foreign Key Mã loại sản phẩm image longblob Có NULL Hình ảnh createdAt datetime Khôn g Ngày tạo updatedAt datetime Khôn g Ngày chỉnh sửa

Bảng 50 Mô tả chi tiết bảng Product

Cột Kiểu Null Mặc định Ràng buộc Mô tả id int(11) Khôn g Primary key, auto_increment Mã sản phẩm name varchar(255) Có NULL Tên sản phẩm contentHTML longtext Có NULL Nội dung markdown dạng html contentMarkdo wn longtext Có NULL Nội dung markdown dạng text statusId varchar(255) Có NULL Foreign Key Mã trạng thái categoryId varchar(255) Có NULL Foreign Key Mã danh mục view int(11) Có NULL Lượt xem madeby varchar(255) Có NULL Làm/thiết kế bởi material varchar(255) Có NULL Chất liệu brandId varchar(255) Có NULL Foreign Key Mã nhãn hàng createdAt datetime Khôn g Ngày tạo

90 updatedAt datetime Khôn g Ngày chỉnh sửa

Bảng 51 Mô tả chi tiết bảng RoomMessage

Cột Kiểu Null Mặc định Ràng buộc Mô tả id int(11) Khôn g Primary key, auto_increment Mã phòng userOne int(11) Có NULL Foreign Key Mã người tham gia thứ nhất userTwo int(11) Có NULL Foreign Key Mã người tham gia thứ hai createdAt datetime Khôn g Ngày tạo updatedAt datetime Khôn g Ngày chỉnh sửa

Bảng 52 Mô tả chi tiết bảng ShopCart

THIẾT KẾ GIAO DIỆN

id int(11) Khôn g Primary key, auto_increment Mã chi tiết nhập hàng receiptId int(11) Có NULL Foreign Key Mã nhập hàng productDetailSi zeId int(11) Có NULL Foreign Key Mã kích thước sản phẩm quantity int(11) Có NULL Số lượng price bigint(20) Có NULL Đơn giá createdAt datetime Khôn g Ngày tạo updatedAt datetime Khôn g Ngày chỉnh sửa

Bảng 61 Danh sách giao diện

TT Tên giao diện Mô tả

1 Trang đăng nhập Trang giúp khách hàng và admin có thể đăng nhập vào hệ thống

2 Trang đăng ký Trang giúp khách hàng đăng ký tài khoản

3 Trang home Trang mở ra đầu tiên khi khách hàng truy cập webstite

4 Trang cửa hàng Trang trưng bày danh sách sản phẩm của cửa hàng

5 Trang tin tức Trang trưng bày danh sách bài đăng thời trang của cửa hàng

6 Trang chi tiết sản phẩm Trang giúp khách hàng có thể xem thông tin sản phẩm

7 Trang chi tiết bài đăng Trang giúp khách hàng có thể xem thông tin bài đăng

8 Trang giảm giá Trang giúp khách hàng có thể coi có những mã giảm giá nào và lưu mã về tài khoản

9 Trang giỏ hàng Trang giúp khách hàng có thể coi được những sản phẩm mình đã thêm vào giỏ

10 Trang thanh toán Trang cho phép khách hàng xem thông tin đơn hàng, ghi chú và chọn các mục

11 Trang hồ sơ Trang cho phép khách hàng, quản trị viên có thể xem thông tin bản thân và chỉnh sửa

12 Trang địa chỉ Trang giúp khách hàng thêm, sửa, xóa thông tin địa chỉ cá nhân

13 Trang đổi mật khẩu Trang giúp khách hàng, quản trị viên có thể thay đổi mật khẩu

14 Trang đơn mua Trang giúp khách hàng xem lịch sử đơn hàng và cập nhật trạng thái đơn hàng

15 Trang kho voucher Trang giúp khách hàng xem lại những mã voucher đã lưu

16 Trang chủ admin Trang giúp admin xem thống kê gồm các dạng biểu đồ

17 Trang admin quản lý người dùng Trang giúp admin xem, thêm, cập nhật, xóa người dùng

18 Trang admin quản lý danh mục Trang giúp admin xem, thêm, cập nhật, xóa danh mục

19 Trang admin quản lý nhãn hàng Trang giúp admin xem, thêm, cập nhật, xóa nhãn hàng

20 Trang admin quản lý sản phẩm Trang giúp admin xem, thêm, cập nhật, xóa sản phẩm

21 Trang admin quản lý nhà cung cấp Trang giúp admin xem, thêm, cập nhật, xóa nhà cung cấp

22 Trang admin quản lý nhập hàng Trang giúp admin xem, thêm, cập nhật, xóa nhập hàng

23 Trang admin quản lý băng rôn Trang giúp admin xem, thêm, cập nhật, xóa băng rôn

24 Trang admin quản lý chủ đề Trang giúp admin xem, thêm, cập nhật, xóa chủ đề

25 Trang admin quản lý bài đăng Trang giúp admin xem, thêm, cập nhật, xóa bài đăng

26 Trang admin quản lý loại ship Trang giúp admin xem, thêm, cập nhật, xóa loại ship

27 Trang admin quản lý nhà voucher Trang giúp admin xem, thêm, cập nhật, xóa nhà voucher

28 Trang admin quản lý đơn hàng Trang giúp admin xem, cập nhật đơn hàng

29 Trang admin quản lý tin nhắn Trang giúp admin xem, nhắn tin

30 Trang admin thống kê Trang giúp admin xem thống kê doanh thu, lợi nhuận theo từng ngày, tháng, năm

31 Màn hình đăng nhập shipper Màn hình giúp shipper đăng nhập vào ứng dụng giao hàng

32 Màn hình danh sách đơn hàng Màn hình hiển thị danh sách đơn hàng để shipper nhận đơn

33 Màn hình danh sách đơn đang làm

Màn hình hiển thị danh sách đơn hàng shipper đã nhận và đang làm

34 Màn hình danh sách đơn đã xong Màn hình hiển thị danh sách đơn hàng shipper đã hoàn thành

35 Màn hình chi tiết đơn hàng Màn hình hiển thị chi tiết đơn hàng

36 Màn hình chụp đơn hàng Màn hình chụp đơn hàng khi giao hàng

37 Màn hình chỉ đường google map Màn hình chỉ đường google map giúp shipper coi được đường đi

38 Màn hình thông tin shipper Màn hình hiển thị thông tin shipper

- Người dùng nhập vào email vào ô “Địa chỉ Email” và mật khẩu vào ô “Mật khẩu” đã đăng ký

- Bấm nút “Đăng nhập” để bắt đầu đăng nhập vào ứng dụng

- Ngoài ra người dùng có thể lựa chọn đăng nhập với Google bằng cách nhấn vào nút “Đăng nhập với Google” bên dưới

Bảng C1 Mô tả giao diện trang Đăng nhập

1 Thẻ Khung nhập email

2 Thẻ Khung nhập password

3 Thẻ Nút đăng nhập

4 Thẻ Liên kết tới trang đăng ký

5 Thẻ < button > Nút đăng nhập bằng gmail

- Người dùng nhập họ và tên vào ô “Họ và tên”

- Người dùng nhập email vào ô “Địa chỉ Email”

- Người dùng nhập số điện thoại vào ô “Số điện thoại”

- Người dùng nhập mật khẩu vào ô “Mật khẩu”

- Người dùng nhập chính xác mật khẩu đã nhập ở trên vào ô “Xác nhận mật khẩu”

- Người dùng bấm nút “Đăng ký” để đăng ký tài khoản

Bảng C2 Mô tả giao diện trang Đăng ký

1 Thẻ Khung nhập họ và tên

2 Thẻ Khung nhập email

3 Thẻ Khung nhập số điện thoại

4 Thẻ Khung nhập mật khẩu

5 Thẻ Khung nhập xác nhận mật khẩu

6 Thẻ < button > Nút bấm quay lại trang đăng nhập

7 Thẻ < button > Nút đăng kí tài khoản

3.4.2.3 Trang xác thực đăng ký tài khoản OTP

Hình 50 Trang xác thực OTP

- Người dùng nhập mã OTP đã được gửi về số điện thoại đã đăng ký trước đó vào từng ô trống rồi bấm nút “Xác thực” để đăng ký tài khoản thành công

Bảng C3 Mô tả giao diện trang xác thực OTP

1 Thẻ Khung nhập mã OTP

2 Thẻ Nút yêu cầu gửi lại OTP

3 Thẻ Nút xác thực OTP

- Người dùng bấm chọn “Trang chủ” trên thanh công cụ để tiến tới trang chủ

- Người dùng bấm chọn “Cửa hàng” trên thanh công cụ để tiến tới mục cửa hàng

- Người dùng bấm chọn “Tin tức” trên thanh công cụ để tiến tới phần tin tức

- Người dùng bấm chọn “Giảm giá” trên thanh công cụ để tiến tới trang thu thập voucher

- Người dùng bấm chọn “Dịch vụ” trên thanh công cụ để tiến tới phần dịch vụ

Bảng C4 Mô tả giao diện trang Trang chủ

1 Thẻ Thanh công cụ chuyển đổi trang

2 Thẻ Tên người dùng

3 Thẻ Ô nhắn tin/ giỏ hàng/ cá nhân

4 Thẻ Nút đăng xuất tài khoản

Hình 52 Trang chủ - Gợi ý sản phẩm

- Một số sản phẩm sẽ hiển thị trên phần “Gợi ý sản phẩm” dựa theo các sản phẩm mà khách hàng đã mua va đánh giá trước đó Người dùng có thể bấm vào sản phẩm để qua trang chi tiết sản phẩm

Bảng C5 Mô tả giao diện trang Trang chủ - Gợi ý sản phẩm

1 Thẻ Ô hiển thị sản phẩm

2 Thẻ Thông tin cơ bản về sản phẩm

Hình 53 Trang chủ - Sản phẩm đặc trưng

- Tương tự như trên, một số sản phẩm sẽ hiển thị trên phần “Sản phẩm đặc trưng” dựa theo số lượt xem giảm dần Người dùng có thể bấm vào sản phẩm để qua trang chi tiết sản phẩm

Bảng C6 Mô tả giao diện trang Trang chủ - Sản phẩm đặc trưng

1 Thẻ Ô hiển thị sản phẩm

2 Thẻ Thông tin cơ bản về sản phẩm

Hình 54 Trang chủ - Blog mới đăng

- Trang chủ cũng trưng bày một số blog bài viết nổi bật Người dùng có thể bấm vào để xem chi tiết tin tức

Bảng C7 Mô tả giao diện trang Trang chủ - Blog mới đăng

1 Thẻ Ô chuyển hướng tới blog mới

2 Thẻ Tiêu đề bài blog

- Người dùng thể chọn sản phẩm dưới mục “Các danh mục” để lọc sản phẩm theo lựa chọn

- Người dùng có thể bấm nút “Sắp xếp” để lọc sản phẩm theo thứ tự

- Người dùng có thể bấm nút “Hiển thị 6” để lựa chọn số lượng sản phẩm sẽ hiển thị

- Người dùng có thể tìm kiếm sản phẩm bằng cách nhập vào ô “Tìm kiếm theo tên quần áo”

- Người dùng có thể click chuột vào một sản phẩm để vào trang chi tiết sản phẩm

Bảng C8 Mô tả giao diện trang Cửa hàng

1 Thẻ Cột phân loại sản phẩm

2 Thẻ Nút tùy chọn sắp xếp sản phẩm

3 Thẻ Nút tùy chọn hiển thị số lượng sản phẩm

4 Thẻ Thanh tìm kiếm sản phẩm

3.4.2.6 Trang chi tiết sản phẩm

Hình 56 Trang chi tiết sản phẩm

- Người dùng bấm vào 1 trong 3 ô Size để chọn kích cỡ áo mong muốn

- Người dùng nhập số lượng sản phẩm muốn mua vào ô “Số lượng”

- Người dùng chọn màu áo và kiểu thiết kế ở “Loại sản phẩm”

- Người dùng bấm nút “Thêm vào giỏ hàng” để thêm sản phẩm vào giỏ hàng

Hình 57 Trang chi tiết sản phẩm - Thông số sản phẩm

- Người dùng bấm Thông số chi tiết để xem các thông số cơ bản của sản phẩm

- Người dùng bấm Mô tả chi tiết để xem các thông tin chi tiết về sản phẩm

- Người dùng bấm Đánh giá để xem các đánh giá từ những người dùng đã mua sản phẩm

Hình 58 Trang chi tiết sản phẩm - Đánh giá sản phẩm

- Người dùng nhập thông tin đánh giá nếu đã mua sản phẩm vào ô “Viết đánh giá của bạn”

- Người dùng bấm nút “Share” để đăng gửi đánh giá sản phẩm

Bảng C9 Mô tả giao diện trang chi tiết sản phẩm

1 Thẻ Ô chọn size sản phẩm

2 Thẻ Ô chọn số lượng sản phẩm

3 Thẻ Ô chọn màu sắc sản phẩm

4 Thẻ Nút thêm sản phẩm vào giỏ hàng

5 Thẻ Ô hiển thị kích thước, mô tả chi tiết và đánh giá sản phẩm

6 Thẻ Khung nhập đánh giá sản phẩm

7 Thẻ Nút đính kèm hình ảnh đánh giá

8 Thẻ Nút gửi đánh giá

Hình 59 Trang tin tức thời trang

- Người dùng có thể xem các tin tức nổi bật được cung cấp bởi trang web tại mục “Tin tức”

Bảng C10 Mô tả giao diện trang tin tức

1 Thẻ Bài viết khác liên quan

2 Thẻ Thanh tìm kiếm bài viết

3 Thẻ Cột phân loại bài viết

- Người dùng có thể tích lũy voucher ở mục “Giảm giá”

Hình 61 Trang voucher - Thu thập voucher

- Người dùng có thể bấm “Lưu” voucher mà mình muốn thu thập để nhận ưu đãi giảm giá khi mua sản phẩm trong cửa hàng

Bảng C11 Mô tả giao diện trang voucher

1 Thẻ Banner chương trình voucher đang diễn ra

2 Thẻ Thông tin về voucher

1 Thẻ Nút lưu voucher

- Người dùng có thể chat với người bán bằng cách nhập nội dung chat vào ô input và bấm nút

“Send” để gửi tin nhắn

Bảng C12 Mô tả giao diện trang tin nhắn

1 Thẻ Thanh tìm kiếm nhân viên bán hàng

2 Thẻ Thanh nhập tin nhắn

3 Thẻ Nút gửi tin nhắn

3.4.2.10 Trang thông tin cá nhân

Hình 63 Trang thông tin cá nhân

- Người dùng có thể cập nhật thông tin tài khoản bằng cách nhấn vào mục “Tài khoản của tôi” để qua trang “Tài khoản” và tiến hành cập nhật thông tin

Hình 64 Trang thông tin cá nhân - Hồ sơ

- Người dùng có thể upload hình đại diện mới bằng cách ấn vào nút “Tải ảnh”

- Người dùng nhập họ vào ô “Họ”

- Người dùng nhập tên vào ô “Tên”

- Người dùng nhập số điện thoại vào ô “Số điện thoại”

- Người dùng nhập địa chỉ vào “Ô địa chỉ”

- Người dùng chọn giới tính tại ô “Giới tính”

- Người dùng nhập ngày sinh tại ô “Ngày sinh”

- Người dùng bấm nút “Lưu thông tin” để lưu thông tin đã thay đổi

Hình 65 Trang thông tin cá nhân - Đổi mật khẩu

- Người dùng nhập mật khẩu hiện tại vào ô “Mật khẩu cũ”

- Người dùng nhập mật khẩu mới vào ô “Mật khẩu mới”

- Người dùng nhập lại mật khẩu mới ở trên vào ô “Nhập lại mật khẩu”

- Người dùng bấm nút “Lưu thông tin” để lưu thông tin đã thay đổi

Hình 66 Trang thông tin cá nhân - Đơn mua

- Người dùng có thể xem thông tin các đơn đã mua bằng cách bấm vào mục “Đơn mua” trên Danh mục

Bảng C13 Mô tả giao diện trang thông tin cá nhân

1 Thẻ Danh mục cá nhân

2 Thẻ Nút tải ảnh đại diện lên

3 Thẻ Thanh nhập thông tin cá nhân

4 Thẻ Nút lưu thông tin

5 Thẻ Thanh nhập mật khẩu cũ và mới

6 Thẻ Nút lưu mật khẩu mới

7 Thẻ Nút chuyển đến trang của shop

8 Thẻ Hiển thị thông tin đơn hàng

- Người dùng có thể chỉnh sửa số lượng sản phẩm bằng cách nhập vào ô “Số lượng”

- Người dùng có thể quan sát giá sản phẩm ở mục “Giá”

- Người dùng có thể xem tổng tiền dựa theo số lượng sản phẩm ở mục “Tổng tiền”

- Người dùng có thẻ xóa sản phẩm khỏi giỏ hàng bằng cách bấm vào nút “Xóa”

- Người dùng bấm nút “Đi đến thanh toán” để tiến hành thanh toán sản phẩm

Hình 68 Trang giỏ hàng - Mã giảm giá

- Người dùng có thể chọn voucher bằng cách bấm vào nút “Chọn hoặc Nhập Mã”

- Người dùng bấm nút “Dùng ngay” để áp mã voucher vào giá sản phẩm

Bảng C14 Mô tả giao diện trang giỏ hàng

1 Thẻ Nút xóa sản phẩm khỏi giỏ hàng

2 Thẻ Nút chọn phương thức giao hàng

3 Thẻ Nút thanh toán

4 Thẻ Nút chọn mã giảm giá

5 Thẻ Nút sử dụng mã giảm giá

6 Thẻ Nút thoát nếu không dùng mã

- Người dùng có thể quan sát thấy những thông tin về đơn hàng đang mua như địa chỉ nhận hàng, giá sản phẩm, số lượng sản phẩm, tổng tiền sản phẩm, mã voucher, tổng thanh toán sản phẩm

- Người dùng tích chọn 1 trong 3 lựa chọn kiểu giao hàng

Hình 70 Trang thanh toán - Phương thức thanh toán

- Người dùng chọn phương thức thanh toán

- Người dùng bấm nút “Đặt hàng” để tiến tới bước đặt hàng

Hình 71 Trang thanh toán – Thông tin thanh toán

- Ô “Loại hàng hóa” sẽ hiển thị thông tin loại thanh toán của sản phẩm

- Ô “Số tiền” sẽ hiển thị tổng tiền cần thanh toán của sản phẩm

- Ô “Nội dung thanh toán” sẽ hiển thị thông tin khách hàng đã nhập ở trước đó

- Ô “Loại hàng hóa” sẽ hiển thị thông tin loại thanh toán của sản phẩm

- Ô “Ngân hàng” sẽ hiển thị ngân hàng mà khách hàng lựa chọn để thanh toán

- Ô “Ngôn ngữ” hiển thị ngôn ngữ mà khách hàng lựa chọn

- Người dùng bấm nút “Thanh toán” để tiếp tục thành toán

Hình 72 Trang thanh toán – Thông tin đơn hàng thanh toán online

- Người dùng nhập thông tin thẻ thanh toán ứng với từng mục VNPay yêu cầu

- Người dùng bấm nút “Tiếp tục” dể tiếp tục thanh toán

Hình 73 Trang thanh toán – Xác thực OTP

- Người dùng nhập mã OTP đã gửi về số điện thoại đã đăng ký

- Người dùng bấm “Thanh toán” để hoàn thanh giao dịch

Hình 74 Trang thanh toán – Thanh toán thành công

- Người dùng được đưa trở về trang chủ sau khi thanh toán thành công đơn hàng

Hình 75 Trang thanh toán – Danh sách đơn hàng

- Người dùng có thể quan sát trạng thái đơn hàng mình đã đặt

Bảng C15 Mô tả giao diện trang thanh toán

1 Thẻ Nút thay đổi địa chỉ giao hàng

2 Thẻ Thanh nhập lời nhắn cho shop

3 Thẻ Tùy chọn phương thức thanh toán

4 Thẻ Nút đặt hàng

6 Thẻ Thanh nhập thông tin bảo mật thẻ ngân hàng

7 Thẻ Chọn mã khuyến mãi

8 Thẻ Nút tiếp tục đến trang xác thực

9 Thẻ Nút hủy thanh toán

10 Thẻ Thanh nhập mã OTP

12 Thẻ Nút hủy thanh toán

13 Thẻ Thông báo thanh toán thành công

14 Thẻ Tên sản phẩm/Kiểu loại/Số lượng sản phẩm

15 Thẻ Trạng thái đơn hàng

16 Thẻ Giá chưa bao gồm ship

17 Thẻ Giá đã bao gồm ship

3.4.2.13 Trang Quản trị - Thống kê

Hình 76 Trang quản trị - Thống kê

- Quản trị viên có thể xem thông kê doanh thu ở mục “Thống kê”

- Quản trị viên bấm nút “Chi tiết” tại ô “Tổng số đơn hàng” để xem thông tin các đơn hàng đã bán được

- Quản trị viên bấm nút “Chi tiết” tại ô “Đánh giá” để xem các đánh giá về các sản phẩm

- Quản trị viên bấm nút “Chi tiết” tại ô “Sản phảm” để xem thông tin các sản phẩm đã bán được

- Quản trị viên bấm nút “Chi tiết” tại ô “Thành viên” để xem thông tin các thành viên có tài khoản trên hệ thống

- Quản trị viên bấm chọn năm ở ô “Chọn năm” để hiển thị biểu đồ thống kê theo năm

- Quản trị viên bấm chọn loại thống kê ở ô “Loại thống kê” để hiển thị biểu đồ thống kê theo mong muốn

- Quản trị viên bấm chọn tháng ở ô “Chọn tháng” để hiển thị biểu đồ thống kê theo tháng trong năm

Bảng C16 Mô tả giao diện trang quản trị - thống kê

1 Thẻ Nút xem chi tiết tổng số đơn/ đánh giá/ sản phẩm/ thành viên có tài khoản

2 Thẻ Chọn năm cần thống kê

3 Thẻ Chọn loại, tháng cần thống kê

4 Thẻ Nút lọc theo yêu cầu

3.4.2.14 Trang Quản trị - Quản lý người dùng

Hình 77 Trang quản trị - Quản lý người dùng

- Quản trị viên có thể nhập số điện thoại vào ô “Tìm kiếm theo số điện thoại” để lọc người dùng theo số điện thoại

- Quản trị viên có thể xuất file excel thông tin danh sách người dùng bằng cách bấm nút “Xuất Excel”

- Quản trị viên có thể bấm nút “Edit” để chỉnh sủa thông tin người dùng

- Quản trị viên có thể bấm nút “Delete” để xóa người dùng khỏi hệ thống

- Quản trị viên có thể chọn mục “Thêm người dùng” bên trái thanh menu để thêm người dùng mới

Bảng C17 Mô tả giao diện trang quản trị - Quản lý người dùng

1 Thẻ Hiển thị tên trang quản trị

2 Thẻ Khung nhập thông tin người dùng cần tìm

3 Thẻ Nút search thông tin

4 Thẻ Nút để xuất file excel danh sách người dùng

5 Thẻ < table> Hiển thị bảng danh sách thông tin người dùng

6 Thẻ Thực hiện thao tác với thông tin người dùng

7 Component Hiển thị giao diện phân trang

3.4.2.15 Trang Quản trị - Quản lý danh mục

Hình 78 Trang quản trị - Quản lý danh mục

- Quản trị viên có thể nhập tên danh mục vào ô “Tìm kiếm theo tên danh mục” để lọc danh mục theo tên

- Quản trị viên có thể xuất file excel thông tin danh sách danh mục bằng cách bấm nút “Xuất Excel”

- Quản trị viên có thể bấm nút “Edit” để chỉnh sủa thông tin danh mục

- Quản trị viên có thể bấm nút “Delete” để xóa danh mục khỏi hệ thống

- Quản trị viên có thể chọn mục “Thêm danh mục” bên trái thanh menu để thêm danh mục mới

Bảng C18 Mô tả giao diện trang quản trị - Quản lý danh mục

2 Thẻ Khung nhập thông tin danh mục cần tìm

4 Thẻ Nút để xuất file excel danh sách danh mục

5 Thẻ < table> Hiển thị bảng danh sách thông tin các danh mục

6 Thẻ Thực hiện thao tác với thông tin danh mục

3.4.2.16 Trang Quản trị - Quản lý nhãn hàng

Hình 79 Trang quản trị - Quản lý nhãn hàng

- Quản trị viên có thể nhập tên nhãn hàng vào ô “Tìm kiếm theo tên nhãn hàng” để lọc nhãn hàng theo tên

- Quản trị viên có thể xuất file excel thông tin danh sách nhãn hàng bằng cách bấm nút “Xuất Excel”

- Quản trị viên có thể bấm nút “Edit” để chỉnh sủa thông tin nhãn hàng

- Quản trị viên có thể bấm nút “Delete” để xóa nhãn hàng khỏi hệ thống

- Quản trị viên có thể chọn mục “Thêm nhãn hàng” bên trái thanh menu để thêm nhãn hàng mới

Bảng C19 Mô tả giao diện trang quản trị - Quản lý nhãn hàng

2 Thẻ Khung nhập thông tin nhãn hàng cần tìm

4 Thẻ Nút để xuất file excel danh sách nhãn hàng

5 Thẻ < table> Hiển thị bảng danh sách thông tin các nhãn hàng

6 Thẻ Thực hiện thao tác với thông tin nhãn hàng

3.4.2.17 Trang Quản trị - Quản lý sản phẩm

Hình 80 Trang quản trị - Quản lý sản phẩm

- Quản trị viên có thể nhập tên sản phẩm vào ô “Tìm kiếm theo tên sản phẩm” để lọc sản phẩm theo tên

- Quản trị viên có thể xuất file excel thông tin danh sách sản phẩm bằng cách bấm nút “Xuất Excel”

- Quản trị viên có thể bấm nút “Edit” để chỉnh sủa thông tin sản phẩm

- Quản trị viên có thể bấm nút “Ban” để ẩn sản phẩm khỏi hệ thống

- Quản trị viên có thể chọn mục “Thêm sản phẩm” bên trái thanh menu để thêm sản phẩm mới

Bảng C20 Mô tả giao diện trang quản trị - Quản lý sản phẩm

1 Thẻ Thanh tìm kiếm tên sản phẩm

2 Thẻ Nút xuất file excel thông tin danh sách sản phẩm

3 Thẻ Nút “Edit” để chỉnh sửa thông tin sản phẩm

4 Thẻ Nút “Delete” để xóa sản phẩm khỏi hệ thống

5 Thẻ Nút “View” để xem sản phẩm

6 Thẻ Nút chuyển trang

3.4.2.18 Trang Quản trị - Quản lý băng rôn

Hình 81 Trang quản trị - Quản lý băng rôn

- Quản trị viên có thể nhập tên băng rôn vào ô “Tìm kiếm theo tên băng rôn” để lọc băng rôn theo tên

- Quản trị viên có thể xuất file excel thông tin danh sách băng rôn bằng cách bấm nút “Xuất Excel”

- Quản trị viên có thể bấm nút “Edit” để chỉnh sủa thông tin băng rôn

- Quản trị viên có thể bấm nút “Delete” để xóa băng rôn khỏi hệ thống

- Quản trị viên có thể chọn mục “Thêm băng rôn” bên trái thanh menu để thêm băng rôn mới

Bảng C21 Mô tả giao diện trang quản trị - Quản lý băng rôn

2 Thẻ Khung nhập thông tin băng rôn cần tìm

4 Thẻ Nút để xuất file excel danh sách băng rôn

5 Thẻ < table> Hiển thị bảng danh sách thông tin các băng rôn

6 Thẻ Thực hiện thao tác với thông tin băng rôn

3.4.2.19 Trang Quản trị - Quản lý chủ đề

Hình 82 Trang quản trị - Quản lý chủ đề

- Quản trị viên có thể nhập tên chủ đề vào ô “Tìm kiếm theo tên chủ đề” để lọc chủ đề theo tên

- Quản trị viên có thể xuất file excel thông tin danh sách chủ đề bằng cách bấm nút “Xuất Excel”

- Quản trị viên có thể bấm nút “Edit” để chỉnh sủa thông tin chủ đề

- Quản trị viên có thể bấm nút “Delete” để xóa chủ đề khỏi hệ thống

- Quản trị viên có thể chọn mục “Thêm chủ đề” bên trái thanh menu để thêm chủ đề mới

Bảng C22 Mô tả giao diện trang quản trị - Quản lý chủ đề

2 Thẻ Khung nhập thông tin chủ đề cần tìm

4 Thẻ Nút để xuất file excel danh sách chủ đề

5 Thẻ < table> Hiển thị bảng danh sách thông tin các chủ đề

6 Thẻ Thực hiện thao tác với thông tin chủ đề

3.4.2.20 Trang Quản trị - Quản lý bài đăng

Hình 83 Trang quản trị - Quản lý bài đăng

- Quản trị viên có thể nhập tên bài đăng vào ô “Tìm kiếm theo tiêu đề” để lọc tiêu đề theo tên

- Quản trị viên có thể xuất file excel thông tin danh sách bài đăng bằng cách bấm nút “Xuất Excel”

- Quản trị viên có thể bấm nút “Edit” để chỉnh sủa thông tin bài đăng

- Quản trị viên có thể bấm nút “Delete” để xóa bài đăng khỏi hệ thống

- Quản trị viên có thể chọn mục “Thêm bài đăng” bên trái thanh menu để thêm bài đăng mới

Bảng C23 Mô tả giao diện trang quản trị - Quản lý bài đăng

2 Thẻ Khung nhập thông tin bài đăng cần tìm

4 Thẻ Nút để xuất file excel danh sách bài đăng

5 Thẻ < table> Hiển thị bảng danh sách thông tin các bài đăng

6 Thẻ Thực hiện thao tác với thông tin bài đăng

3.4.2.21 Trang Quản trị - Quản lý loại ship

Hình 84 Trang quản trị - Quản lý loại ship

- Quản trị viên có thể nhập tên loại ship vào ô “Tìm kiếm theo tên loại ship” để lọc loại ship theo tên

- Quản trị viên có thể xuất file excel thông tin danh sách loại ship bằng cách bấm nút “Xuất Excel”

- Quản trị viên có thể bấm nút “Edit” để chỉnh sủa thông tin loại ship

- Quản trị viên có thể bấm nút “Delete” để xóa loại ship khỏi hệ thống

- Quản trị viên có thể chọn mục “Thêm loại giao hàng” bên trái thanh menu để thêm loại giao hàng mới

Bảng C24 Mô tả giao diện trang quản trị - Quản lý loại ship

2 Thẻ Khung nhập thông tin loại ship cần tìm

4 Thẻ Nút để xuất file excel danh sách các loại ship

5 Thẻ < table> Hiển thị bảng danh sách thông tin các loại ship

6 Thẻ Thực hiện thao tác với thông tin loại ship

3.4.2.22 Trang Quản trị - Quản lý voucher

Hình 85 Trang quản trị - Quản lý voucher

- Quản trị viên có thể xuất file excel thông tin danh sách voucher bằng cách bấm nút “Xuất Excel”

- Quản trị viên có thể bấm nút “Edit” để chỉnh sủa thông tin voucher

- Quản trị viên có thể bấm nút “Delete” để xóa voucher khỏi hệ thống

- Quản trị viên có thể chọn mục “Thêm loại khuyến mãi” bên trái thanh menu để thêm loại khuyến mãi mới

Bảng C25 Mô tả giao diện trang quản trị - Quản lý voucher

2 Thẻ Nút để xuất file excel danh sách các voucher

3 Thẻ < table> Hiển thị bảng danh sách thông tin các voucher

4 Thẻ Thực hiện thao tác với thông tin voucher

3.4.2.23 Trang Quản trị - Quản lý nhà cung cấp

Hình 86 Trang quản trị - Quản lý nhà cung cấp

- Quản trị viên có thể nhập tên nhà cung cấp vào ô “Tìm kiếm theo tên nhà cung cấp” để lọc nhà cung cấp theo tên

- Quản trị viên có thể xuất file excel thông tin danh sách nhà cung cấp bằng cách bấm nút “Xuất Excel”

- Quản trị viên có thể bấm nút “Edit” để chỉnh sủa thông tin nhà cung cấp

- Quản trị viên có thể bấm nút “Delete” để xóa nhà cung cấp khỏi hệ thống

- Quản trị viên có thể chọn mục “Thêm nhà cung cấp” bên trái thanh menu để thêm nhà cung cấp mới

Bảng C26 Mô tả giao diện trang quản trị - Quản lý nhà cung cấp

2 Thẻ Khung nhập thông tin nhà cung cấp cần tìm

4 Thẻ Nút để xuất file excel danh sách nhà cung cấp

5 Thẻ < table> Hiển thị bảng danh sách thông tin nhà cung cấp

6 Thẻ Thực hiện thao tác với thông tin nhà cung cấp

3.4.2.24 Trang Quản trị - Quản lý nhập hàng

Hình 87 Trang quản trị - Quản lý nhập hàng

- Quản trị viên có thể xuất file excel thông tin danh sách nhập hàng bằng cách bấm nút “Xuất Excel”

- Quản trị viên có thể bấm nút “View” để xem thông tin nhập hàng và nhà cung cấp

- Quản trị viên có thể chọn mục “Thêm nhập hàng” bên trái thanh menu để thêm nhập hàng mới

Bảng C27 Mô tả giao diện trang quản trị - Quản lý nhập hàng

2 Thẻ Nút để xuất file excel danh sách nhập hàng

3 Thẻ < table> Hiển thị bảng danh sách thông tin nhập hàng

4 Thẻ Thực hiện thao tác với thông tin nhập hàng

3.4.2.25 Trang Quản trị - Quản lý đơn hàng

Hình 88 Trang quản trị - Quản lý đơn hàng

- Quản trị viên có thể xuất file excel thông tin danh sách đơn hàng bằng cách bấm nút “Xuất Excel”

- Quản trị viên có thể bấm nút “Xem chi tiết” để xem thông tin đơn hàng và quản lý đơn hàng của khách hàng

Bảng C28 Mô tả giao diện trang quản trị - Quản lý đơn hàng

1 Thẻ Hiển thị danh sách trạng thái đơn hàng

2 Thẻ Nút để xuất file excel danh sách đơn hàng

3 Thẻ < table> Hiển thị bảng danh sách thông tin các đơn hàng

4 Thẻ Thực hiện thao tác với thông tin đơn hàng

3.4.2.26 Trang Quản trị - Quản lý tin nhắn

Hình 89 Trang quản trị - Quản lý tin nhắn

- Quản trị viên có thể quản lý các tin nhắn mà khách hàng và nhân viên đã gửi

Bảng C29 Mô tả giao diện trang quản trị - Quản lý tin nhắn

1 Thẻ Khung nhập thông tin đoạn chat cần tìm

2 Thẻ

Hiển thị danh sách các đoạn chat với người mua

3 Thẻ < input> Khung nhập thông tin chat

4 Thẻ Nút gửi đi khi nhập xong thông tin chat

3.4.2.27 Trang Quản trị - Thống kê

Hình 90 Trang quản trị - Thống kê doanh thu

Bảng C30 Mô tả giao diện trang quản trị - Thống kê doanh thu

2 Thẻ Chọn mốc thời gian ngày hoặc tháng và năm để thống kê

3 Thẻ Chọn mốc thời gian cụ thể

4 Thẻ Nút để lọc danh sách doanh thu sau khi chọn mốc thời gian

5 Thẻ Nút để xuất file excel danh sách doanh thu

6 Thẻ < table> Hiển thị bảng danh sách các đơn hàng doanh thu

7 Thẻ Thực hiện thao tác với thông tin doanh thu

Hình 91 Trang quản trị - Thống kê lợi nhuận Bảng C31 Mô tả giao diện trang quản trị - Thống kê lợi nhuận

2 Thẻ Chọn mốc thời gian ngày hoặc tháng và năm để thống kê

3 Thẻ Chọn mốc thời gian cụ thể

4 Thẻ Nút để lọc danh sách lợi nhuận sau khi chọn mốc thời gian

5 Thẻ Nút để xuất file excel danh sách lợi nhuận

6 Thẻ < table> Hiển thị bảng danh sách các đơn hàng lợi nhuận

7 Thẻ Thực hiện thao tác với thông tin lợi nhuận

Hình 92 Trang quản trị - Quản lý sản phẩm tồn kho

- Quản trị viên có thể xem thống kê danh thu, lợi nhuận và quản lý các sản phẩm tồn kho

Bảng C32 Mô tả giao diện trang quản trị - Quản lý sản phẩm tồn kho

2 Thẻ Nút để xuất file excel danh sách sản phẩm tồn kho

3 Thẻ < table> Hiển thị bảng danh sách sản phẩm tồn kho

Hình 93 Trang đăng nhập shipper

- Shipper nhập email vào ô email

- Shipper nhập mật khẩu vào ô mật khẩu

- Shipper nhấn nút “Đăng nhập” để đăng nhập vào app

Bảng C33 Mô tả giao diện – Đăng nhập shipper

1 Thẻ Hiển thị tên màn hình

2 Thẻ Khung nhập thông tin gmail

3 Thẻ Khung nhập thông tin mật khẩu

4 Thẻ Nút đăng nhập sau khi nhập thông tin

3.4.2.29 Trang danh sách đơn hàng Shipper

Hình 94 Trang danh sách đơn hàng shipper

- Shipper có thể quan sát danh sách đơn hàng đang được đặt trên hệ thống

- Shipper bấm vào 1 đơn hàng để bắt đầu nhận đơn hàng và thực hiện đơn hàng

Bảng C34 Mô tả giao diện – Danh sách đơn hàng shipper

2 Thẻ Màn hình danh sách thông tin các đơn hàng

3.4.2.30 Trang chi tiết đơn hàng Shipper

Hình 95 Trang chi tiết đơn hàng shipper

- Shipper có thể quan sát các thông tin về đơn hàng như địa chỉ giao hàng, tên và số điện thoại khách hàng, tên đơn hàng

- Shipper bấm nút “Nhận đơn” để nhận đơn hàng

Bảng C35 Mô tả giao diện – Chi tiết đơn hàng shipper

2 Thẻ Màn hình danh sách thông tin chi tiết của một đơn hàng

3 Thẻ Nút nhận đơn để xác nhận đơn đi ship

Hình 96 Trang chi tiết đơn hàng shipper – Đã giao hàng

- Shipper sau khi đã tới nơi giao hàng và chụp hình đơn hàng thì bấm nút “Đã giao hàng” để hoàn thành đơn hàng

Bảng C36 Mô tả giao diện Chi tiết đơn hàng shipper – Đã giao hàng

2 Thẻ Màn hình danh sách thông tin các đơn hàng

3 Thẻ Nút đã giao hàng để xác nhận đã giao hàng thành công kèm hình ảnh cụ thể

Hình 97 Trang danh sách đơn hàng shipper – Đã hoàn thành

- Shipper có thể bấm vào tab “Đã hoàn thành” để xem danh sách các đơn hàng đã hoàn thành

Bảng C37 Mô tả giao diện Danh sách đơn hàng shipper - Đã hoàn thành

2 Thẻ Màn hình danh sách thông tin các đơn hàng đã hoàn thành

3.4.2.31 Trang thông tin cá nhân Shipper

Hình 98 Trang thông tin cá nhân shipper

- Shipper có thể bấm vào tab “Thông tin” để thông tin của mình được lưu trên hệ thống

Bảng C38 Mô tả giao diện – Thông tin cá nhân shipper

2 Thẻ Màn hình hiển thị thông tin cá nhân của shipper

3.4.2.32 Trang dịch vụ - Thiết kế áo thun

Hình 99 Trang chủ thiết kế áo thun

- Khách hàng có thể bấm vào mục “Customize it” để chuyển đến trang thiết kế áo thun

Hình 100 Trang thiết kế áo thun – Thiết kế màu sắc

- Khách hàng có thể chọn màu sắc để thiết kế cho áo thun ở mục bên trái Icon thứ 1 để tùy biến màu sắc cho áo thun

Hình 101 Trang thiết kế áo thun – Thiết kế logo

- Khách hàng có thể upload logo hoặc mẫu áo thun yêu thích để thiết kế cho áo thun ở mục bên trái Icon thứ 2 để tùy biến logo và mẫu áo

Hình 102 Trang thiết kế áo thun – Tích hợp AI để thiết kế

- Khách hàng có thể nhập vào câu lệnh để yêu cầu AI thiết kế áo thun theo sở thích và mong muốn ở mục bên trái Icon thứ 3 để tùy biến logo và mẫu áo được AI thiết kế

Bảng C39 Mô tả giao diện – Tích hợp AI để thiết kế

1 Thẻ Hiển thị tên tiêu đề

2 Thẻ Nút để bắt đầu thiết kế áo

3 Plugin chat Chat bằng facebook

4 Thẻ Nút để chụp lại mẫu áo đã thiết kế

5 Thẻ Nút để quay lại bước đã làm

6 Thẻ Hiển thị colorpicker dùng để chọn màu áo

7 Thẻ Hiển thị filepicker dùng để thiết kế áo

8 Thẻ Nút dùng để tải hình ảnh lên từ máy tính để thiết kế áo

9 Thẻ Nút để chọn ảnh vừa tải lên làm logo cho áo

10 Thẻ Nút để chọn ảnh vừa tải lên bảo phủ hết áo

11 Thẻ Hiển thị aipicker dùng để thiết kế áo

12 Thẻ Khung nhập thông tin cho AI thiết kế

13 Thẻ Nút để thiết kế logo áo bằng AI với thông tin thiết kế đã viết

14 Thẻ Nút để thiết kế logo áo bằng AI với thông tin thiết kế đã viết

15 Thẻ Hiển thị hình ảnh mặt trước, mặt sau của áo khi thiết kế

CÀI ĐẶT VÀ KIỂM THỬ

CÀI ĐẶT

+ Mở file sql có trong file tải về code toàn bộ vào csdl vừa tạo và chạy để thêm csdl vào database + Mở terminal trong Visual Studio Code

+ Chạy lệnh “npm i” hoặc “yarn i” để cài đặt các package

+ Chạy lệnh “npm start” hoặc “yarn start” để run project

+ Mở terminal trong Visual Studio Code

+ Chạy lệnh “npm i” hoặc “yarn i” để cài đặt các package

+ Chạy lệnh “npm start” hoặc “yarn start” để run project.

KIỂM THỬ

4.2.1 Kế hoạch và phương pháp kiểm thử

Mục đích: Kiểm tra một số chức năng quan trọng của hệ thống

Phương pháp: Kiểm thử hộp đen

Các chức năng kiểm thử

Bảng 62 Danh sách chức năng kiểm thử

Khách hàng hoặc Quản trị viên đã có tài khoản Đăng nhập vào hệ thống

Kiểm thử chức năng đăng nhập vào hệ thống, khi cung cấp tài khoản và mật khẩu hợp lệ sẽ cấp một phiên làm việc

2 Khách vãng lai Đăng ký tài khoản mới

Kiểm thử chức năng đăng ký tài khoản cho người mới

3 Khách hàng Đặt hàng và thanh toán

Kiểm thử chức năng đặt hàng và thanh toán đơn hàng cho khách hàng

Bảng 63 Kịch bản kiểm thử

Function Objective Test Scenario Scenario description Expected result Đăng nhập

Cho phép khách hàng đã có tài khoản đăng nhập vào hệ thống

Khách hàng đăng nhập đúng tài khoản và mật khẩu

Khách hàng nhập sai tài khoản hoặc mật khẩu

Thông báo người tìm việc nhập sai tài khoản hoặc mật khẩu

Cho phép quản trị viên đăng nhập vào hệ thống

Quan trị viên đúng tài khoản và mật khẩu

Chuyển đến trang quản trị

Quản trị viên nhập sai tài khoản hoặc mật khẩu

Thông báo quản trị viên nhập sai tài khoản hoặc mật khẩu Đăng ký

Cho phép khách vãng lai đăng ký tài khoản

Khách vãng lai nhập đầy đủ các thông tin yêu cầu

Tạo tài khoản thành công

Khách vãng lai nhập thiếu thông tin đăng ký

Thông báo Khách vãng lai nhập sai thông tin đăng ký Đặt hàng và

Cho phép khách hàng đặt hàng và thanh toán

Khách hàng chọn sản phẩm muốn mua vào giỏ hàng

Sau đó vào giỏ hàng chọn đơn vị vận chuyên và bấm Đi đến thanh toán Cuối cùng chọn phương thức thanh toán và bấm đặt hàng Đơn hàng được đặt thành công và chuyển sang trạng thái Chờ xác nhận | Đã thanh toán

Test Case ID: TC_01 Test Designed by: Bùi Trọng Nghĩa

Post Post Condition: Chuyển đến trang chủ

Step Test steps Test data Expected result Actual result Status

1 Mở trang đăng nhập Đưa đến trang chủ và cấp một phiên làm việc

Nhập tài khoản và mật khẩu

19110246@stud ent.hcmute.edu. vn

PostCondition: Thông báo Sai tài khoản hoặc mật khẩu Step Test steps Test data Expected result Actual result Status

Thông báo người dung nhập sai tài khoản hoặc mật khẩu

19110246@stud ent.hcmute.edu. vn Mật khẩu:

PostCondition: Chuyển đến trang Quản trị

1 Mở trang đăng nhập Đưa đến trang Quản trị

Tài khoản: admin@gmail.c om Mật khẩu:

PostCondition: Thông báo Sai tài khoản hoặc mật khẩu

Mở trang đăng nhập cho nhà tuyển dụng

Thông báo người dùng nhập sai tài khoản hoặc mật khẩu

Tài khoản: admin@gmail.c om Mật khẩu:

PostCondition: Thông báo đăng ký thành công và có thể đăng nhập bằng tài khoản đã đăng ký

Mở trang đăng nhập cho khách vãng lai

Thông báo tạo tài khoản thành công

2 Nhấn vào liên kết đăng ký

3 Nhập thông tin đăng ký

+ Họ và tên: Bùi Trọng Nghĩa + Địa chỉ email: trongnghia105 2@gmail.com + Số điện thoại:

0921104382 + Mật khẩu: string123 + Nhập lại mật khẩu: string123

PostCondition: Thông báo tên không được để trống

Mở trang đăng nhập cho người tìm việc

Thông báo Vui long nhập đầy đủ thông tin

2 Nhấn vào liên kết đăng ký

3 Nhập thông tin đăng ký

+ Họ và tên: Bùi Trọng Nghĩa + Địa chỉ email: trongnghia105 2@gmail.com + Số điện thoại (Để trống) + Mật khẩu: string123 + Nhập lại mật khẩu: string123

4.2.3.3 Chức năng đặt hàng và thanh toán

Post Post Condition: Đơn hàng được đặt thành công và chuyển sang trạng Chờ xác nhận | Đã thanh toán

1 Mở trang chủ Đưa đến trang Order và chuyển trạng thái của đơn hàng qua

Chờ xác nhận | Đã thanh toán

Bấm chọn xem một sản phẩm và bấm vào nút Thêm vào giỏ

Quần short thun Outerity nỉ Signature / chữ Đen - ORT503 - chữ Đen - ORT503

Vào trang Giỏ hàng và nhập số lượng sản phẩm muốn mua

4 Chọn đơn vị vận chuyển

5 Bấm nút di đến thanh toán

6 Chọn phương thức thanh toan

Thanh toán khi nhận hàng

Trong quá trình triển khai dự án, nhóm em đã thành công trong việc xây dựng một trang web kinh doanh sản phẩm thời trang hoàn chỉnh, với đầy đủ các chức năng chính và khả năng sử dụng trong thực tế Nhóm đã áp dụng hiệu quả các công nghệ và kỹ thuật mới nhất vào quá trình phát triển trang web.Ngoài ra nhóm chúng em cũng học thêm nhiều kiến thức từ dự án như:

• Nghiệp vụ liên quan đến website bán hàng (Giỏ hàng, đặt hàng, đánh giá, nhắn tin)

• Mô hình Restfull API, MVC

• Front end: Html, css, ReactJs, Redux

• Thanh toán online với Paypal Sandbox, VNPAY

• Xác thực OTP với firebase

• Xác thực API với JWT (Json web token)

• Nhắn tin trực tuyến (Socket io)

• Đăng nhập với Google (auth firebase)

• Đáp ứng được các yêu cầu cần có của đề tài

• Giao diện được đánh giá tốt

• Phân luồng người dùng hợp lý, chức năng được phân tích triển khai phù hợp

- Có sẵn nhiều tài liệu hướng dẫn cho người mới bắt đầu với các công nghệ phổ biến hiện nay như ReactJS, ExpressJS và các công nghệ khác

- Sử dụng các công cụ quản lý dự án phần mềm giúp quá trình phát triển phần mềm tiện lợi hơn

- Kiến thức môn học được giảng viên hướng dẫn đưa vào thực tiễn và áp dụng hiệu quả

- Thống kê chưa đa dạng các mục

- Chưa hỗ trợ nhiều các thẻ tín dụng, ví điện tử

- Phần gợi ý sản phẩm còn đơn giản

- Chức năng sử dụng AI để thiết kế sản phẩm tốc độ còn khá chậm

- Mở rộng thống kê với nhiều dạng biểu đồ và dạng thống kê

- Tích hợp nhiều thẻ tín dụng và ví điện tử để thanh toán tiện lợi hơn

- Xử lý khả năng lưu ảnh để có thể cho gửi tin nhắn kèm ảnh và video.

ƯU ĐIỂM

4 Đề nghị cho bảo vệ hay không?

TP.Hồ Chí Minh, ngày tháng năm 2024

(Ký & ghi rõ họ tên) ĐH SƯ PHẠM KỸ THUẬT TP HCM

CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự do – Hạnh Phúc

PHIẾU NHẬN XÉT CỦA GIẢNG VIÊN PHẢN BIỆN

Họ và tên Sinh viên: Bùi Lê Quốc Hưng MSSV: 19110220

Họ và tên Sinh viên: Bùi Trọng Nghĩa MSSV: 19110246

Họ và tên Sinh viên: Trần Hoàng Sơn MSSV: 19110509

Ngành: Công nghệ thông tin

Tên đề tài: Xây dựng website kinh doanh lĩnh vực thời trang

Giảng viên phản biện : ThS Mai Anh Thơ

1 Về nội dung báo cáo & khối lượng thực hiện:

4 Đề nghị cho bảo vệ hay không?

TP.Hồ Chí Minh, ngày tháng năm 2024

(Ký & ghi rõ họ tên)

Lời đầu tiên, chúng em xin gửi lời cảm ơn chân thành nhất đến ban giám hiệu trường Đại Học

Sư phạm kỹ thuật Thành phố Hồ Chí Minh vì đã luôn tạo điều kiện thuận lợi cho chúng em học tập phát triển Bên cạnh đó, chúng em cũng xin được gửi lời cảm ơn chân thành các quý thầy cô trong khoa Đào tạo Chất Lượng Cao nói chung và ngành Công Nghệ Thông Tin nói riêng đã tận tình truyền đạt những kiến thức cần thiết giúp chúng em có nền tảng để thực hiện đề tài

Tiếp theo, chúng em xin gửi lời cảm ơn sâu sắc đến TS.Lê Văn Vinh - người đã hướng dẫn và giúp đỡ nhóm trong suốt thời gian thực hiện đề tài Chúng em cảm ơn thầy đã đưa ra những lời khuyên từ kinh nghiệm thực tiễn của mình để định hướng cho chúng em đi đúng với yêu cầu của đề tài đã chọn, luôn giải đáp thắc mắc và đưa ra những góp ý, chỉnh sửa kịp thời giúp chúng em khắc phục nhược điểm và hoàn thành bài đúng với thời hạn đã đề ra

Do kiến thức còn hạn chế và chưa có kinh nghiệm tìm hiểu thực tế nên nhóm em vẫn còn nhiều thiếu sót, rất mong nhận được những ý kiến đóng góp quý báu của quý thầy quý cô để kiến thức của chúng em được hoàn thiện hơn và chúng em có thể làm tốt hơn nữa trong những lần sau Chúng em xin chân thành cảm ơn

Lời cuối cùng, chúng em xin kính chúc quý thầy, quý cô thật nhiều sức khỏe, thành công và hạnh phúc

Nhóm Sinh Viên Thực Hiện BÙI LÊ QUỐC HƯNG - 19110220 BÙI TRỌNG NGHĨA - 19110246 TRẦN HOÀNG SƠN - 19110509 ĐH SƯ PHẠM KỸ THUẬT TP HCM

CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự do – Hạnh Phúc

Tp.Hồ Chí Minh, 01 tháng 03 năm 2024

NHIỆM VỤ KHÓA LUẬN TỐT NGHIỆP

Họ và tên Sinh viên: Bùi Lê Quốc Hưng MSSV: 19110220

Chuyên ngành: Công nghệ phần mềm Lớp: 19110CLST2

Họ và tên Sinh viên: Bùi Trọng Nghĩa MSSV: 19110246

Họ và tên Sinh viên: Trần Hoàng Sơn MSSV: 19110509

Giảng viên hướng dẫn: TS Lê Văn Vinh

1 Tên đề tài: Xây dựng website kinh doanh lĩnh vực thời trang

2 Dữ liệu, tài liệu ban đầu: Khảo sát hiện trạng thông qua tìm kiếm các trang web trên Internet hiện nay và tham khảo ý kiến của chuyên gia có chuyên môn để thực hiện

3 Nội dung của đề tài:

- Xây dựng website kinh doanh thời trang giúp khách hàng dễ dàng tìm kiếm và mua sắm sản phẩm

- Phát triển hệ thống quản lý hoạt động cửa hàng giúp nhân viên theo dõi và kiểm soát tình hình kinh doanh, quản lý danh mục sản phẩm, và xem các báo cáo và thống kê sản phẩm

4 Tối ưu hóa trang trải trên website để đảm bảo khách hàng dễ dàng tiếp cận thông tin chính xác về sản phẩm, thuận tiện đặt mua và thực hiện quy trình thanh toán một cách đơn giản và hiệu quả

5 Sản phẩm: Website kinh doanh lĩnh vực thời trang với đầy đủ chức năng của một trang web bán hàng

Trưởng Khoa GV hướng dẫn

(Họ và tên, ký) (Họ và tên, ký) i

DANH MỤC HÌNH ẢNH viii

1 TÍNH CẤP THIẾT ĐỀ TÀI 1

5 KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC 4

6 Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN 6

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 7

1.1.2 Các thành phần trong mô hình MVC 8

1.1.3 Ưu điểm và nhược điểm 9

1.2 CÁC CÔNG NGHỆ SỬ DỤNG Ở PHÍA FRONT-END 9

1.3 CÁC CÔNG NGHỆ SỬ DỤNG Ở PHÍA BACK-END 13

CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HÓA YÊU CẦU 18

2.2.1 Bộ phận quản trị viên 25

2.2.3 Bộ phận khách vãng lai 28

2.3 MÔ HÌNH HÓA YÊU CẦU 29

2.3.2.4 Use Case Thêm giỏ hàng 36 iii

2.3.2.5 Use Case Tìm kiếm sản phẩm 36

2.3.2.6 Use Case Thu thập Voucher 37

2.3.2.7 Use Case Xem thông tin sản phẩm 37

2.3.2.8 Use Case Xem tin tức 38

2.3.2.9 Use Case Quản lý tài khoản 38

2.3.2.10 Use Case Thêm danh mục 39

2.3.2.11 Use Case Xóa danh mục 39

2.3.2.12 Use Case Chỉnh sửa danh mục 40

2.3.2.13 Use Case Hủy đơn hàng 40

2.3.2.14 Use Case Xác nhận đơn hàng 41

2.3.2.15 Use Case Xem danh sách đơn hàng 41

2.3.2.16 Use Case Thêm người dùng 42

2.3.2.17 Use Case Xóa người dùng 42

2.3.2.18 Use Case Chỉnh sửa người dùng 42

2.3.2.19 Use Case Thêm sản phẩm 43

2.3.2.20 Use Case Chỉnh sửa sản phẩm 43

2.3.2.21 Use Case Xóa sản phẩm 44

2.3.2.22 Use Case Thêm loại khuyến mãi 44

2.3.2.23 Use Case Xóa loại khuyến mãi 45

2.3.2.24 Use Case Chỉnh sửa loại khuyến mãi 45

2.3.2.25 Use Case Thêm mã khuyến mãi 46

2.3.2.26 Use Case Xóa mã khuyến mãi 46

2.3.2.27 Use Case Chỉnh sửa mã khuyến mãi 47

2.3.2.28 Use Case Thống kê doanh thu 47

2.3.2.29 Use Case Thống kê lợi nhuận 47

2.3.2.30 Use Case Thống kê hàng tồn kho 48 iv

2.3.2.31 Use Case Đánh giá sản phẩm 48

2.3.2.32 Use Case Thanh toán sản phẩm 49

2.3.2.33 Use Case Giao hàng shipper 50

CHƯƠNG 3: PHÂN TÍCH THIẾT KẾ HỆ THỐNG 52

3.1 THIẾT KẾ LƯỢC ĐỒ LỚP 52

3.2 THIẾT KẾ LƯỢC ĐỒ TUẦN TỰ 52

3.2.4 Sequence Diagram “Thêm giỏ hàng” 55

3.2.5 Sequence Diagram “Tìm kiếm sản phẩm” 56

3.2.6 Sequence Diagram “Thu thập voucher” 56

3.2.7 Sequence Diagram “Xem thông tin sản phẩm” 57

3.2.8 Sequence Diagram “Xem tin tức” 58

3.2.9 Sequence Diagram “Quản lý tài khoản” 59

3.2.10 Sequence Diagram “Thêm danh mục” 60

3.2.11 Sequence Diagram “Xóa danh mục” 61

3.2.12 Sequence Diagram “Chỉnh sửa danh mục” 62

3.2.13 Sequence Diagram “Hủy đơn hàng” 63

3.2.14 Sequence Diagram “Xác nhận đơn hàng” 64

3.2.15 Sequence Diagram “Xem danh sách đơn hàng” 65

3.2.16 Sequence Diagram “Thêm người dùng” 66

3.2.17 Sequence Diagram “Xóa người dùng” 67

3.2.18 Sequence Diagram “Chỉnh sửa người dùng” 68

3.2.19 Sequence Diagram “Thêm sản phẩm” 69

3.2.20 Sequence Diagram “Chỉnh sửa sản phẩm” 70

3.2.21 Sequence Diagram “Xóa sản phẩm” 71 v

3.2.22 Sequence Diagram “Thêm loại khuyến mãi” 72

3.2.23 Sequence Diagram “Xóa loại khuyến mãi” 73

3.2.24 Sequence Diagram “Chỉnh sửa loại khuyến mãi” 74

3.2.25 Sequence Diagram “Thêm mã khuyến mãi” 75

3.2.26 Sequence Diagram “Xóa mã khuyến mãi” 76

3.2.27 Sequence Diagram “Chỉnh sửa mã khuyến mãi” 77

3.2.28 Sequence Diagram “Thống kê doanh thu” 78

3.2.29 Sequence Diagram “Thống kê lợi nhuận” 79

3.2.30 Sequence Diagram “Thống kê hàng tồn kho” 80

3.2.31 Sequence Diagram “Thanh toán sản phẩm” 81

3.2.32 Sequence Diagram “Đánh giá sản phẩm” 82

3.2.33 Sequence Diagram “Giao hàng shipper” 83

3.3 THIẾT KẾ CƠ SỞ DỮ LIỆU 84

3.4.2 Xây dựng giao diện 96

3.4.2.3 Trang xác thực đăng ký tài khoản OTP 98

3.4.2.6 Trang chi tiết sản phẩm 102

3.4.2.10 Trang thông tin cá nhân 107

3.4.2.13 Trang Quản trị - Thống kê 115

3.4.2.14 Trang Quản trị - Quản lý người dùng 116

3.4.2.15 Trang Quản trị - Quản lý danh mục 117

3.4.2.16 Trang Quản trị - Quản lý nhãn hàng 118

3.4.2.17 Trang Quản trị - Quản lý sản phẩm 119

3.4.2.18 Trang Quản trị - Quản lý băng rôn 120

3.4.2.19 Trang Quản trị - Quản lý chủ đề 121

3.4.2.20 Trang Quản trị - Quản lý bài đăng 122

3.4.2.21 Trang Quản trị - Quản lý loại ship 123

3.4.2.22 Trang Quản trị - Quản lý voucher 124

3.4.2.23 Trang Quản trị - Quản lý nhà cung cấp 125

3.4.2.24 Trang Quản trị - Quản lý nhập hàng 126

3.4.2.25 Trang Quản trị - Quản lý đơn hàng 127

3.4.2.26 Trang Quản trị - Quản lý tin nhắn 127

3.4.2.27 Trang Quản trị - Thống kê 128

3.4.2.29 Trang danh sách đơn hàng Shipper 132

3.4.2.30 Trang chi tiết đơn hàng Shipper 133

3.4.2.31 Trang thông tin cá nhân Shipper 137

3.4.2.32 Trang dịch vụ - Thiết kế áo thun 138

CHƯƠNG 4: CÀI ĐẶT VÀ KIỂM THỬ 141

4.2.1 Kế hoạch và phương pháp kiểm thử 141

4.2.2 Kịch bản kiểm thử 142

4.2.3.3 Chức năng đặt hàng và thanh toán 148

TÀI LIỆU THAM KHẢO 152 viii

Hình 3 Giao diện Website Shopee 18

Hình 4 Giao diện trang chi tiết sản phẩm Website Shopee 19

Hình 5 Giao diện trang đánh giá sản phẩm Website Shopee 19

Hình 6 Giao diện trang giỏ hàng Website Shopee 20

Hình 7 Giao diện trang chủ Website Coolmate 21

Hình 8 Giao diện trang chi tiết sản phẩm Website Coolmate 21

Hình 9 Giao diện trang đánh giá sản phẩm Website Coolmate 22

Hình 10 Giao diện trang thanh toán Website Coolmate 22

Hình 11 Giao diện trang chủ Website Bitis 23

Hình 12 Giao diện trang chi tiết sản phẩm Website Bitis 23

Hình 13 Giao diện trang thanh toán Website Bitis 24

Hình 14 Lược đồ UseCase khách hàng và khách vãng lai 30

Hình 15 Lược đồ UseCase quản trị viên 31

Hình 16 Lược đồ UseCase nhân viên bán hàng 32

Hình 17 Lược đồ UseCase nhân viên giao hàng 33

Hình 14 Lược đồ Class Diagram 52

Hình 15 Lược đồ Sequence Diagram Đăng ký 53

Hình 16 Lược đồ Sequence Diagram Đăng nhập 54

Hình 17 Lược đồ Sequence Diagram Đăng xuất 55

Hình 18 Lược đồ Sequence Diagram Thêm giỏ hàng 55

Hình 19 Lược đồ Sequence Diagram Tìm kiếm sản phẩm 56

Hình 20 Lược đồ Sequence Diagram Thu thập voucher 57

Hình 21 Lược đồ Sequence Diagram Xem thông tin sản phẩm 58

Hình 22 Lược đồ Sequence Diagram Xem tin tức 58

Hình 23 Lược đồ Sequence Diagram Quản lý tài khoản 59

Hình 24 Lược đồ Sequence Diagram Thêm danh mục 60

Hình 25 Lược đồ Sequence Diagram Xóa danh mục 61

Hình 26 Lược đồ Sequence Diagram Chỉnh sửa danh mục 62

Hình 27 Lược đồ Sequence Diagram Hủy đơn hàng 63 ix

Hình 28 Lược đồ Sequence Diagram Xác nhận đơn hàng 64

Hình 29 Lược đồ Sequence Diagram Xem danh sách đơn hàng 65

Hình 30 Lược đồ Sequence Diagram Thêm người dùng 66

Hình 31 Lược đồ Sequence Diagram Xóa người dùng 67

Hình 32 Lược đồ Sequence Diagram Chỉnh sửa người dùng 68

Hình 33 Lược đồ Sequence Diagram Thêm sản phẩm 69

Hình 34 Lược đồ Sequence Diagram Chỉnh sửa sản phẩm 70

Hình 35 Lược đồ Sequence Diagram Xóa sản phẩm 71

Hình 36 Lược đồ Sequence Diagram Thêm loại khuyến mãi 72

Hình 37 Lược đồ Sequence Diagram Xóa loại khuyến mãi 73

Hình 38 Lược đồ Sequence Diagram Chỉnh sửa loại khuyến mãi 74

Hình 39 Lược đồ Sequence Diagram Thêm mã khuyến mãi 75

Hình 40 Lược đồ Sequence Diagram Xóa mã khuyến mãi 76

Hình 41 Lược đồ Sequence Diagram Chỉnh sửa mã khuyến mãi 77

Hình 42 Lược đồ Sequence Diagram Thống kê doanh thu 78

Hình 43 Lược đồ Sequence Diagram Thống kê lợi nhuận 79

Hình 44 Lược đồ Sequence Diagram Thống kê hàng tồn kho 80

Hình 45 Lược đồ Sequence Diagram Thanh toán sản phẩm 81

Hình 46 Lược đồ Sequence Diagram Đánh giá sản phẩm 82

Hình 46.1 Lược đồ Sequence Diagram Giao hàng shipper 83

Hình 47 Lược đồ ERD tổng quát 84

Hình 50 Trang xác thực OTP 98

Hình 52 Trang chủ - Gợi ý sản phẩm 100

Hình 53 Trang chủ - Sản phẩm đặc trưng 100

Hình 54 Trang chủ - Blog mới đăng 101

Hình 56 Trang chi tiết sản phẩm 103

Hình 57 Trang chi tiết sản phẩm - Thông số sản phẩm 103

Hình 58 Trang chi tiết sản phẩm - Đánh giá sản phẩm 104 x

Hình 59 Trang tin tức thời trang 105

Hình 61 Trang voucher - Thu thập voucher 106

Hình 63 Trang thông tin cá nhân 107

Hình 64 Trang thông tin cá nhân - Hồ sơ 108

Hình 65 Trang thông tin cá nhân - Đổi mật khẩu 108

Hình 66 Trang thông tin cá nhân - Đơn mua 109

Hình 68 Trang giỏ hàng - Mã giảm giá 110

Hình 70 Trang thanh toán - Phương thức thanh toán 112

Hình 71 Trang thanh toán – Thông tin thanh toán 112

Hình 72 Trang thanh toán – Thông tin đơn hàng thanh toán online 113

Hình 73 Trang thanh toán – Xác thực OTP 113

Hình 74 Trang thanh toán – Thanh toán thành công 114

Hình 75 Trang thanh toán – Danh sách đơn hàng 114

Hình 76 Trang quản trị - Thống kê 115

Hình 77 Trang quản trị - Quản lý người dùng 116

Hình 78 Trang quản trị - Quản lý danh mục 117

Hình 79 Trang quản trị - Quản lý nhãn hàng 118

Hình 80 Trang quản trị - Quản lý sản phẩm 119

Hình 81 Trang quản trị - Quản lý băng rôn 120

Hình 82 Trang quản trị - Quản lý chủ đề 121

Hình 83 Trang quản trị - Quản lý bài đăng 122

Hình 84 Trang quản trị - Quản lý loại ship 123

Hình 85 Trang quản trị - Quản lý voucher 124

Hình 86 Trang quản trị - Quản lý nhà cung cấp 125

Hình 87 Trang quản trị - Quản lý nhập hàng 126

Hình 88 Trang quản trị - Quản lý đơn hàng 127

Hình 89 Trang quản trị - Quản lý tin nhắn 128

Hình 90 Trang quản trị - Thống kê doanh thu 128 xi

Hình 91 Trang quản trị - Thống kê lợi nhuận 129

Hình 92 Trang quản trị - Quản lý sản phẩm tồn kho 130

Hình 93 Trang đăng nhập shipper 131

Hình 94 Trang danh sách đơn hàng shipper 132

Hình 95 Trang chi tiết đơn hàng shipper 133

Hình 96 Trang chi tiết đơn hàng shipper – Đã giao hàng 134

Hình 97 Trang danh sách đơn hàng shipper – Đã hoàn thành 136

Hình 98 Trang thông tin cá nhân shipper 137

Hình 99 Trang chủ thiết kế áo thun 138

Hình 100 Trang thiết kế áo thun – Thiết kế màu sắc 138

Hình 101 Trang thiết kế áo thun – Thiết kế logo 139

Hình 102 Trang thiết kế áo thun – Tích hợp AI để thiết kế 139 xii

Bảng 1 Danh sách chức năng quản trị viên 25

Bảng 2 Danh sách chức năng khách hàng 27

Bảng 3 Danh sách chức năng khách vãng lai 28

Bảng 4 Danh sách chức năng nhân viên giao hàng 28

Bảng 5 Danh sách chức năng nhân viên bán hàng 29

Bảng 6 Mô tả các tác nhân trong lược đồ UseCase 33

Bảng 7 Mô tả Use case đăng ký 34

Bảng 8 Mô tả Use case đăng nhập 35

Bảng 9 Mô tả Use case đăng xuất 35

Bảng 10 Mô tả Use case thêm giỏ hàng 36

Bảng 11 Mô tả Use case tìm kiếm sản phẩm 36

Bảng 12 Mô tả Use case thu thập voucher 37

Bảng 13 Mô tả Use case xem thông tin sản phẩm 37

Bảng 14 Mô tả Use case xem tin tức 38

Bảng 15 Mô tả Use case quản lý tài khoản 38

Bảng 16 Mô tả Use case thêm danh mục 39

Bảng 17 Mô tả Use case xóa danh mục 39

Bảng 18 Mô tả Use case chỉnh sửa danh mục 40

Bảng 19 Mô tả Use case hủy đơn hàng 40

Bảng 20 Mô tả Use case xác nhận đơn hàng 41

Bảng 21 Mô tả Use case xem danh sách đơn hàng 41

Bảng 22 Mô tả Use case thêm người dùng 42

Bảng 23 Mô tả Use case xóa người dùng 42

Bảng 24 Mô tả Use case chỉnh sửa người dùng 42

Bảng 25 Mô tả Use case thêm sản phẩm 43

Bảng 26 Mô tả Use case chỉnh sửa sản phẩm 43

Bảng 27 Mô tả Use case xóa sản phẩm 44

Bảng 28 Mô tả Use case thêm loại khuyến mãi 44

Bảng 29 Mô tả Use case xóa loại khuyến mãi 45

Bảng 30 Mô tả Use case chỉnh sửa loại khuyến mãi 45

Bảng 31 Mô tả Use case thêm mã khuyến mãi 46 xiii

Bảng 32 Mô tả Use case xóa mã khuyến mãi 46

Bảng 33 Mô tả Use case chỉnh sửa mã khuyến mãi 47

Bảng 34 Mô tả Use case thống kê doanh thu 47

Bảng 35 Mô tả Use case thống kê lợi nhuận 47

Bảng 36 Mô tả Use case thống kê hàng tồn kho 48

Bảng 37 Mô tả Use case đánh giá sản phẩm 48

Bảng 38 Mô tả Use case thanh toán sản phẩm 49

Bảng 38.1 Mô tả Use case giao hàng shipper 50

Bảng 39 Mô tả chi tiết bảng AddressUser 84

Bảng 40 Mô tả chi tiết bảng Allcode 85

Bảng 41 Mô tả chi tiết bảng Banner 85

Bảng 42 Mô tả chi tiết bảng Blog 85

Bảng 43 Mô tả chi tiết bảng Comment 86

Bảng 44 Mô tả chi tiết bảng Message 86

Bảng 45 Mô tả chi tiết bảng OrderDetail 87

Bảng 46 Mô tả chi tiết bảng OrderProduct 87

Bảng 47 Mô tả chi tiết bảng ProductDetail 88

Bảng 48 Mô tả chi tiết bảng ProductDetailSize 88

Bảng 49 Mô tả chi tiết bảng ProductImage 89

Bảng 50 Mô tả chi tiết bảng Product 89

Bảng 51 Mô tả chi tiết bảng RoomMessage 90

Bảng 52 Mô tả chi tiết bảng ShopCart 90

Bảng 53 Mô tả chi tiết bảng TypeShip 90

Bảng 54 Mô tả chi tiết bảng TypeVoucher 91

Bảng 55 Mô tả chi tiết bảng User 91

Bảng 56 Mô tả chi tiết bảng Voucher 92

Bảng 57 Mô tả chi tiết bảng VoucherUsed 92

Bảng 58 Mô tả chi tiết bảng Supplier 93

Bảng 59 Mô tả chi tiết bảng Receipt 93

Bảng 60 Mô tả chi tiết bảng ReceiptDetail 93

Bảng 61 Danh sách giao diện 94

Bảng C1 Mô tả giao diện trang Đăng nhập 96 xiv

Bảng C2 Mô tả giao diện trang Đăng ký 97

Bảng C3 Mô tả giao diện trang xác thực OTP 98

Bảng C4 Mô tả giao diện trang Trang chủ 99

Bảng C5 Mô tả giao diện trang Trang chủ - Gợi ý sản phẩm 100

Bảng C6 Mô tả giao diện trang Trang chủ - Sản phẩm đặc trưng 101

Bảng C7 Mô tả giao diện trang Trang chủ - Blog mới đăng 101

Bảng C8 Mô tả giao diện trang Cửa hàng 102

Bảng C9 Mô tả giao diện trang chi tiết sản phẩm 104

Bảng C10 Mô tả giao diện trang tin tức 105

Bảng C11 Mô tả giao diện trang voucher 106

Bảng C12 Mô tả giao diện trang tin nhắn 107

Bảng C13 Mô tả giao diện trang thông tin cá nhân 109

Bảng C14 Mô tả giao diện trang giỏ hàng 110

Bảng C15 Mô tả giao diện trang thanh toán 114

Bảng C16 Mô tả giao diện trang quản trị - thống kê 116

Bảng C17 Mô tả giao diện trang quản trị - Quản lý người dùng 117

Bảng C18 Mô tả giao diện trang quản trị - Quản lý danh mục 118

Bảng C19 Mô tả giao diện trang quản trị - Quản lý nhãn hàng 119

Bảng C20 Mô tả giao diện trang quản trị - Quản lý sản phẩm 120

Bảng C21 Mô tả giao diện trang quản trị - Quản lý băng rôn 120

Bảng C22 Mô tả giao diện trang quản trị - Quản lý chủ đề 121

Bảng C23 Mô tả giao diện trang quản trị - Quản lý bài đăng 122

Bảng C24 Mô tả giao diện trang quản trị - Quản lý loại ship 123

Bảng C25 Mô tả giao diện trang quản trị - Quản lý voucher 124

Bảng C26 Mô tả giao diện trang quản trị - Quản lý nhà cung cấp 125

Bảng C27 Mô tả giao diện trang quản trị - Quản lý nhập hàng 126

Bảng C28 Mô tả giao diện trang quản trị - Quản lý đơn hàng 127

Bảng C29 Mô tả giao diện trang quản trị - Quản lý tin nhắn 128

Bảng C30 Mô tả giao diện trang quản trị - Thống kê doanh thu 129

Bảng C31 Mô tả giao diện trang quản trị - Thống kê lợi nhuận 129

Bảng C32 Mô tả giao diện trang quản trị - Quản lý sản phẩm tồn kho 130

Bảng C33 Mô tả giao diện – Đăng nhập shipper 132 xv

Bảng C34 Mô tả giao diện – Danh sách đơn hàng shipper 132

Bảng C35 Mô tả giao diện – Chi tiết đơn hàng shipper 133

Bảng C36 Mô tả giao diện Chi tiết đơn hàng shipper – Đã giao hàng 135

Bảng C37 Mô tả giao diện Danh sách đơn hàng shipper - Đã hoàn thành 137

Bảng C38 Mô tả giao diện – Thông tin cá nhân shipper 138

Bảng C39 Mô tả giao diện – Tích hợp AI để thiết kế 139

Bảng 62 Danh sách chức năng kiểm thử 141

Bảng 63 Kịch bản kiểm thử 142

1 TÍNH CẤP THIẾT ĐỀ TÀI

Hiện tại, Online là một thị trường lớn và đầy tiềm năng đối với kinh doanh bán lẻ Trong khi đó, người tiêu dùng đang có xu hướng “online hóa” việc mua sắm để tiết kiệm thời gian, công sức Do đó, các doanh nghiệp bán lẻ cũng đang dần tiến sâu vào thị trường kinh doanh trực tuyến này với mong muốn tăng hiệu suất và doanh thu bán hàng Được biết, khi bán hàng theo phương pháp truyền thống rất bất cập trong vấn đề quảng cáo sản phẩm cũng như thống kê doanh thu Việc thống kê báo cáo doanh thu hoàn toàn dựa trên phần mềm excel, việc này đẫn đến một số vấn đề khá khó khăn như thời gian xuất một báo cáo rất lâu, tốn nhiều thời gian và nhân lực, nhập liệu nếu có nhầm lẫn sẽ không được cảnh báo và xử lý, chẳng hạn như nếu xuất một sản phẩm mà trong kho số lượng tồn của sản phẩm đó không đủ để xuất hay sản phẩm đã hết hàng nhưng khách hàng không được thông báo về tình trạng này, nhân viên cũng không được nhắc để nhập thêm loại hàng ấy Ngoài ra, khách hàng không chủ động được trong việc đặt trước và mua hàng của shop, mọi việc bán và mua phải diễn ra đồng thời giữa cả bên mua và bên bán

Do đó, vấn đề xây dựng một shop bán hàng online rất cần thiết Việc này giúp shop bán hàng quản lý hàng hóa tốt hơn, thống kê báo cáo doanh thu nhanh chóng, chính xác, giảm nhân lực, giảm chi phí và thời gian Việc quảng cáo sản phẩm và thương hiệu cũng dễ dàng hơn Về mặt khách hàng, một shop online sẽ giúp họ tiết kiệm thời gian mua sắm cũng như giúp “đặt chỗ” trước những sản phẩm mà họ yêu thích, không sợ bị mua trước hay hết hàng khi họ không đến shop, chủ động trong việc xem và đặt hàng

Vì các vấn đề đã nêu, chúng em đã chọn đề tài “Xây dựng website kinh doanh lĩnh vực thời trang” nhằm giúp cửa hàng thời trang cải thiện được vấn đề quản lý, quảng cáo hàng hóa của mình Đồng thời phù hợp với xu hướng phát triển của thế giới hiện nay

2 MỤC ĐÍCH ĐỀ TÀI Đề tài “Phát triển website kinh doanh thời trang” đặt ra các mục tiêu chính sau: