Thấu hiểu rõ những điều trên, nhóm em thực hiện đềtài “Xây dựng website bán giày” với định hướng đáp ứng đầy đủ các nhu cầu hiệntại của người dùng.2.Mục tiêu: - Xây dựng được một website
CƠ SỞ LÝ THUYẾT
Ngôn ngữ Javascript
Javascript chính là một ngôn ngữ lập trình web rất phổ biến ngày nay Javascript được tích hợp đồng thời nhúng vào HTML để hỗ trợ cho website trở nên sống động hơn Chúng cũng đóng vai trò tương tự như một phần của website, cho phép Client- side Script từ người dùng tương tự máy chủ (NodeJS) để tạo ra những website động. [7]
Cách hoạt động của Javascript:
- Thông thường, JavaScript sẽ được nhúng trực tiếp vào một website hoặc chúng được tham chiếu qua file js hoặc JavaScript
- Đây là một ngôn ngữ đến từ phía Client nên Script sẽ được download về máy client khi truy cập
- Tại đây, chúng sẽ được hệ thống xử ý Vì vậy, bạn không cần phải tải về máy server rồi chờ cho chúng xử lý xong mới phản hồi được kết quả đến client. Ưu điểm:
- Những lỗi Javascript rất dễ để phát hiện, từ đó giúp bạn sửa lỗi một cách nhanh chóng hơn
- Những trình duyệt web có thể dịch thông qua HTML mà không cần sử dụng đến một compiler.
- Javascript có thể hoạt động ở trên nhiều nền tảng và các trình duyệt web khác nhau.
- Được các chuyên gia đánh giá là một loại ngôn ngữ lập trình nhẹ và nhanh hơn nhiều so với các ngôn ngữ lập trình khác
- Javascript còn có thể được gắn trên một số các element hoặc những events của các trang web
- Những website có sử dụng Javascript thì chúng sẽ giúp cho trang web đó có sự tương tác cũng như tăng thêm nhiều trải nghiệm mới cho người dùng
- Người dùng cũng có thể tận dụng Javascript với mục đích là để kiểm tra những input thay vì cách kiểm tra thủ công thông qua hoạt động truy xuất database
- Giao diện của ứng dụng phong phú với nhiều thành phần như Drag and Drop, Slider để cung cấp đến cho người dùng một Rich Interface (giao diện giàu tính năng)
- Javascript dễ bị các hacker và scammer khai thác hơn
- Javascript cũng không có khả năng đa luồng hoặc đa dạng xử lý
- Có thể được dùng để thực thi những mã độc ở trên máy tính của người sử dụng
- Những thiết bị khác nhau có thể sẽ thực hiện Javascript khác nhau, từ đó dẫn đến sự không đồng nhất
- Vì tính bảo mật và an toàn nên các Client-Side Javascript sẽ không cho phép đọc hoặc ghi các file.
ReactJS
ReactJS là một thư viện JavaScript dùng để xây dựng giao diện người dùng. Tính đến thời điểm hiện tại, đã có khoảng 1300 developer và hơn 94000 trang web đang sử dụng ReactJS được hiểu nôm na là một thư viện, có chứa nhiều JavaScript mã nguồn và “cha đẻ” chính là Facebook Mục đích chính đó là mỗi website sử dụng ReactJS thì phải chạy thật mượt hoặc thật nhanh, có khả năng mở rộng cao và đơn giản thực hiện [8]
Về cơ bản, các tính năng của ReactJS thường xuất phát từ việc tập trung các phần mềm riêng lẻ, cho phép các developer có chức năng phá vỡ giao diện của người dùng từ một cách phức tạp và biến nó trở thành các phần mềm đơn giản Hiểu đơn giản thì các render dữ liệu không chỉ được thực hiện ở vị trí server mà còn ở vị trí client khi sử dụng ReactJS [8] Ưu điểm:
- ReactJS cực kì hiệu quả: ReactJS tạo ra cho chính nó DOM ảo – nơi mà các component thực sự tồn tại trên đó Điều này sẽ giúp cải thiện hiệu suất rất nhiều.ReactJS cũng tính toán những thay đổi nào cần cập nhật len DOM và chỉ thực hiện chúng Điều này giúp ReactJS tránh những thao tác cần trên DOM mà nhiều chi phí.
- ReactJS giúp việc viết các đoạn code Javascript dễ dàng hơn: Nó dung cú pháp đặc biệt là JSX (Javascript mở rộng) cho phép trộn giữa code HTML và Javascript Người dùng có thể thêm vào các đoạn HTML vào trong hàm render mà không cần phải nối chuỗi Đây là đặc tính thú vị của ReactJS Nó sẽ chuyển đổi các đoạn HTML thành các hàm khởi tạo đối tượng HTML bằng bộ biến đổi JSX.
- Render tầng server: Một trong những vấn đề với các ứng dụng đơn trang là tối ưu SEO và thời gian tải trang Nếu tất cả việc xây dựng và hiển thị trang đều thực hiện ở client, thì người dung sẽ phải chờ cho trang được khởi tạo và hiển thị lên Điều này thực tế là chậm ReactJS là một thư viện component, nó có thể vừa render ở ngoài trình duyệt sử dụng DOM và cũng có thể render bằng các chuỗi HTML mà server trả về.
- Làm việc với vấn đề test giao diện: Nó cực kì dễ để viết các test case giao diện vì virtual DOM được cài đặt hoàn toàn bằng Javascript.
- Hiệu năng cao đối với các ứng dụng có dữ liệu thay đổi liên tục, dễ dàng cho bảo trì và sửa lỗi.
- ReactJS chỉ phục vụ cho tầng View React chỉ là View Library nó không phải là một MVC framework như những framework khác Đây chỉ là thư viện của Facebook giúp render ra phần view Vì thế React sẽ không có phần Model và Controller, mà phải kết hợp với các thư viện khác React cũng sẽ không có 2- way binding hay là Ajax.
- React khá nặng nếu so với các framework khác React có kích thước tương tương với Angular (Khoảng 35KB so với 39KB của Angular) Trong khi đóAngular là một framework hoàn chỉnh.
NodeJS
NodeJS là một môi trường runtime chạy JavaScript đa nền tảng và có mã nguồn mở, được sử dụng để chạy các ứng dụng web bên ngoài trình duyệt của client Nền tảng này được phát triển bởi Ryan Dahl vào năm 2009, được xem là một giải pháp hoàn hảo cho các ứng dụng sử dụng nhiều dữ liệu nhờ vào mô hình hướng sự kiện (event-driven) không đồng bộ [9]
Các đặc tính của NodeJS:
- Lập trình hướng sự kiện và không đồng bộ: Toàn bộ API trong thư viện NodeJS đều không đồng bộ, hay không bị chặn Về cơ bản điều này có nghĩa là một server sử dụng NodeJS sẽ không bao giờ chờ một API trả về dữ liệu Server sẽ chuyển sang API kế tiếp sau khi gọi API đó và cơ chế thông báo của Events trong NodeJS giúp server nhận được phản hồi từ lần gọi API trước.
- Cực kỳ nhanh chóng: Được xây dựng trên Công cụ JavaScript V8 của Google Chrome, thư viện NodeJS có khả năng xử lý mã vô cùng nhanh.
- Đơn luồng/Single thread nhưng có khả năng mở rộng cao: NodeJS sử dụng một mô hình luồng đơn với vòng lặp sự kiện/event Cơ chế event cho phép máy chủ phản hồi non-blocking và cũng cho phép khả năng mở rộng cao hơn so với các server truyền thống hỗ trợ giới hạn các thread để xử lý yêu cầu NodeJS sử dụng một chương trình đơn luồng, cùng một chương trình có thể cung cấp dịch vụ cho một số lượng yêu cầu lớn hơn so với các máy chủ truyền thống như Apache HTTP Server.
- Không có buffer: Các ứng dụng NodeJS không có vùng nhớ tạm thời (buffer) cho bất kỳ dữ liệu nào Các ứng dụng này chỉ đơn giản xuất dữ liệu theo khối.
- License: NodeJS được phát hành theo giấy phép MIT. Ưu điểm:
- IO hướng sự kiện không đồng bộ, cho phép xử lý nhiều yêu cầu đồng thời.
- Sử dụng Javascript – một ngôn ngữ lập trình dễ học.
- Chia sẻ cùng code ở cả phía client và server.
- NPM (Node Package Manager) và module Node đang ngày càng phát triển mạnh mẽ.
- Cộng đồng hỗ trợ tích cực.
- Cho phép stream các file có kích thước lớn.
- Cần có kiến thức tốt về Javascript.
- Rất hạn chế khi áp dụng NodeJS khi xây dựng ứng dụng nặng, tốn tài nguyên. Bởi vì NodeJS được viết bằng C++ và Javascript, nên phải thông qua thêm 1 trình biên dịch của NodeJS sẽ lâu hơn 1 chút.
- Giống như hầu hết các công nghệ mới, việc triển khai NodeJS trên host không phải là điều dễ dàng.
- Thiếu sự kiểm duyệt chất lượng các module NodeJS.
Redux Toolkit
Gói Redux Toolkit là cách chuẩn để viết logic Redux Ban đầu nó được tạo ra để giúp giải quyết ba mối quan tâm phổ biến về Redux:
- "Định cấu hình Redux Store quá phức tạp".
- "Dev phải thêm rất nhiều packages để Redux có thể làm bất cứ điều gì hữu ích.
- "Redux yêu cầu quá nhiều mã code sẵn".
Redux Toolkit có thể không giải quyết mọi trường hợp sử dụng, nhưng với tinh thần của create-react-app, Redux Toolkit có thể cố gắng cung cấp một số công cụ tóm tắt quá trình thiết lập và xử lý các trường hợp sử dụng phổ biến nhất, cũng như bao gồm một số tiện ích hữu ích sẽ cho phép người dùng đơn giản hóa mã ứng dụng của họ [10]
Bộ công cụ Redux Toollkit cũng bao gồm khả năng tìm nạp và lưu trữ dữ liệu mạnh mẽ tên là "Truy vấn RTK" Nó được bao gồm trong gói như một tập hợp các điểm đầu vào riêng biệt Nó là tùy chọn, nhưng có thể loại bỏ nhu cầu tự viết tay logic tìm nạp dữ liệu [10]
Những công cụ này sẽ mang lại lợi ích cho tất cả người dùng Redux Cho dù người dùng Redux hoàn toàn mới đang thiết lập dự án đầu tiên của mình hay là người dùng có kinh nghiệm muốn đơn giản hóa ứng dụng hiện có, bộ công cụ Redux có thể giúp làm cho mã Redux của mình tốt hơn [10]
MongoDB
MongoDB là phần mềm cơ sở dữ liệu mã nguồn mở NoSQL, được thiết kế hướng theo đối tượng và hỗ trợ trên đa nền tảng Các bảng MongoDB có cấu trúc linh hoạt, cho phép dữ liệu không cần tuân theo bất kỳ dạng cấu trúc nào [11]
MongoDB hoạt động trên collection, hướng tài liệu kiểu JSON thay cho bảng để tăng tốc độ truy vấn MongoDB có chức năng định hướng tài liệu cung cấp, hiệu suất cao, tính sẵn sàng cao và khả năng mở rộng dễ dàng.
Collection trong MongoDB về bản chất thì có thể hiểu là nhóm các document, một collection sẽ chứa các tập document. Ở MongoDB, các collection không theo bản chất cũ vì các document không tuân theo cấu trúc, nghĩa là các document trong một collection không có cấu trúc cố định như nhau (không cần chia ra các cột để lưu trữ), vậy thì không cần phải định nghĩa thành phần các cột trong một collection như trong cơ sở dữ liệu quan hệ. Ưu điểm:
- MongoDB là một cơ sở dữ liệu hướng tài liệu, sử dụng bộ nhờ nội tại, truy cập dễ dàng nhờ vào việc lập ra các chỉ mục, tăng tốc độ phản hồi truy vấn nhanh. Theo đánh giá thì tốc độ MongoDB có thể nhanh hơn 100 lần so với cơ sở dữ liệu quan hệ.
- Sự linh hoạt của cơ sở dữ liệu: MongoDB sử dụng lưu trữ dữ liệu dưới dạng Document JSON nên mỗi collection sẽ có kích cỡ khác nhau và các document cũng khác nhau Do sử dụng cơ sở dữ liệu không có lược đồ nên điều này mang lại sử linh hoạt và tự do lưu trữ dữ liệu thuộc nhiều loại khác nhau.
- Khả năng mở rộng: Lợi thế về cơ sở dữ liệu theo chiều ngang, vì vậy, khi xử lý một dữ liệu lớn thì chúng ta có thể phân phối cho nhiều máy.
- Đội ngũ hỗ trợ chuyên nghiệp: Khi gặp phải bất kỳ sự cố nào chúng ta có thể liên hệ trực tiếp đến hệ thống hỗ trợ để xử lý kịp thời.
- Tính khả dụng cao: MongoDB không chỉ có các tính năng về sao chép mà có thể sử dụng gridFS (có thể lưu trữ và truy xuất các tệp vượt quá kích thước 16MB) Các tính năng giúp tăng tính khả dụng và đạt hiệu suất cao.
- Do MongoDB không có tính ràng buộc Do đó, người dùng phải thực sự cẩn trọng khi thao tác để tránh những sai số không đáng có.
- Các dữ liệu lớn hơn 16MB sẽ không được lưu trữ do giới hạn về kích thước lưu trữ.
- MongoDB không được phép Joins như cơ sở dữ liệu quan hệ Để sử dụng chức năng Joins, chúng ta có thể thêm Coding theo cách thủ công, vì là thủ công nên có thể làm chậm quá trình và bị ảnh hưởng đến hiệu suất.
- Không có chức năng Joins nên sẽ có sự dư thừa dữ liệu, điều này là dung lượng bộ nhớ tăng không cần thiết.
Bootstrap
Bootstrap là một front-end framework mã nguồn mở miễn phí giúp quá trình phát triển web được nhanh và dễ dàng hơn Bootstrap bao gồm các mẫu thiết kế dựa trên HTML và CSS như typography, forms, buttons, tables, navigation, modals, image carousels… cũng như các plugin JavaScript tùy chọn Người dùng có thể tạo các giao diện responsive design cho các thiết bị khác nhau với Bootstrap [12] Ưu điểm của Bootstrap
- Dễ sử dụng: Bất kỳ ai có kiến thức cơ bản về HTML và CSS đều có thể bắt đầu sử dụng Bootstrap.
- Các tính năng đáp ứng (Responsive features): responsive CSS của Bootstrap điều chỉnh cho điện thoại, máy tính bảng và máy tính để bàn.
- Cách tiếp cận Mobile-first: Trong Bootstrap 3, mobile-first styles là một phần của core framework.
- Khả năng tương thích trình duyệt: Bootstrap tương thích với tất cả các trình duyệt hiện đại (Chrome, Firefox, Internet Explorer, Edge, Safari và Opera).Các tính năng chính của Bootstrap:
- Hỗ trợ jQuery: Bootstrap 5 sẽ không sử dụng thư viện jQuery nữa, thay vào đó là thư viện JavaScript đã được cải thiện Việc kết thúc hỗ trợ jQuery giúp giảm kích thước tệp nguồn và cải thiện thời gian tải, giúp V5 sẵn sàng hơn trong tương lai Các nhà phát triển sẽ không còn phải tải xuống toàn bộ thư viện khổng lồ để thực hiện mọi việc trong JS Đây là chìa khóa quan trọng vì thời gian tải trang là một trong những yếu tố Google đánh giá thứ hạng cho các trang web trên thiết bị di động.
- Thuộc tính tùy chỉnh CSS: Thuộc tính tùy chỉnh CSS giúp CSS linh hoạt hơn và có thể lập trình được Các biến CSS được thêm tiền tố -bs để tránh xung đột với CSS của bên thứ ba.
- Cải tiến biểu mẫu: Một tính năng mới khác trong Bootstrap 5 là hệ thống điều khiển biểu mẫu được cải tiến Trong V5, các biểu mẫu hoàn toàn tùy chỉnh, vì vậy các nhà phát triển có thể cung cấp giao diện giống nhau trên tất cả các trình duyệt Nhờ vậy các biểu mẫu dễ làm việc hơn và nhất quán hơn trên các trình duyệt khác nhau.
- Hỗ trợ RTL: Bootstrap 5 hỗ trợ RTL cho các ngôn ngữ đọc từ phải sang trái Hỗ trợ RTL là một cải tiến lớn về khả năng truy cập trong Bootstrap 5 giúp loại bỏ các khó khăn mà các developer gặp phải khi cần RTL trên trang web.
- Các tùy chọn tùy chỉnh được cải thiện: Giờ đây, việc tạo theme, tùy chỉnh và mở rộng Bootstrap trở nên dễ dàng hơn bao giờ hết Bootstrap 5 đã thêm phần tùy chỉnh vào tài liệu để làm cho mọi thứ rõ ràng hơn.
- Thành phần offcanvas mới: Trong số các tính năng mới của Bootstrap 5 còn có thành phần offcanvas mới bao gồm backdrop có thể định cấu hình, cuộn nội dung và vị trí Phần tử mới bao gồm các biểu tượng chữ V trong Bootstrap để hiển thị khả năng nhấp và trạng thái Các nhà phát triển có thể đặt loại thành phần này ở trên cùng, dưới cùng, bên trái hoặc bên phải của chế độ xem.
PHÂN TÍCH THIẾT KẾ HỆ THỐNG
Phân tích yêu cầu
Người dùng đăng ký tài khoản bằng cách sử dụng Email và Password Sau khi hoàn thành form điền Email và Password, người dùng đăng ký tài khoản mới thành công và sử dụng tài khoản này để đăng nhập vào website.
3.1.1.2 Đăng nhập Để sử dụng các chức năng như: Đánh giá sản phẩm, người dùng phải tiến hành đăng nhập vào website Người dùng đăng nhập bằng tài khoản đã đăng ký trước đó.
3.1.1.3 Mua hàng Đây là chức năng quan trọng nhất của ứng dụng, người dùng không cần đăng nhập vẫn sử dụng được
Trong chức năng này bao gồm các chức năng nhỏ như xem thông tin sản phẩm, thêm sản phẩm vào giỏ hàng, thanh toán.
3.1.1.4 Xem thông tin sản phẩm
Chức năng này cho phép người dùng xem thông tin một sản phẩm bất kì và xem lại danh sách các sản phẩm đã xem trước đó.
Chức năng này hỗ trợ người dùng tìm kiếm sản phẩm theo tên sản phẩm, màu sắc, kiểu dáng trên thanh tìm kiếm.
Người dùng có thể thêm sản phẩm vào giỏ hàng để tiến hành thanh toán ngay hoặc thêm nhiều sản phẩm vào giỏ hàng và thanh toán cùng một lúc.
Người dùng có thể tiến hành thanh toán một hoặc nhiều sản phẩm đã chọn trong phần giỏ hàng
Chức năng này chỉ dành cho quản trị viên, có thể xem danh sách khách hàng, chỉnh sửa danh sách khách hàng
Chức năng này chỉ dành riêng cho phép xem thống kê doanh thu theo ngày, theo tháng, theo năm.
3.1.2 Yêu cầu phi chức năng
- Yêu cầu về giao diện: Giao diện thân thiện, bố cục hợp lý, màu sắc phù hợp, cân đối, trực quan, dễ dàng thao tác.
- Yêu cầu về tính bảo mật: Phải đảm bảo an toàn dữ liệu người dùng, ngăn chặn các tấn công từ bên ngoài, kiểm soát vận hành hệ thống, giảm thiểu tối đa mức độ rủi ro, rò rỉ thông tin như các chức năng xác thực người dùng (đăng nhập,đăng ký, quên mật khẩu).
- Yêu cầu về tính tiện dụng: Website dễ sử dụng, tiện lợi trong việc tìm kiếm và chia sẻ.
- Yêu cầu về tính hiệu quả: Đảm bảo tốc độ xử lý ổn định, có thể lưu một lượng lớn dữ liệu, tránh xảy ra lỗi ngoại lệ.
- Yêu cầu về tính tương thích: Website có thể chạy ổn định và tương thích với nhiều nền tảng trình duyệt khác nhau.
Bảng 3.1 Bảng danh sách Actor
STT Tên Actor Ý nghĩa/Ghi chú
1 Khách hàng Khách hàng đăng nhập vào website có thể sử dụng tất cả các chức năng của website như: Xem thông tin sản phẩm, Thêm sản phẩm vào giỏ hàng, Đặt hàng,
2 Quản trị viên Quản trị viên có thể sử dụng các chức năng quản lí sản phẩm, đơn hàng,account,…
3.2.2 Sơ đồ use case tổng quát
Hình 3.7 Sơ đồ Use case tổng quát
Bảng 3.2 Danh sách Usecase chung
STT Tên use case Ý nghĩa
1 Đăng nhập Người dùng có tài khoản (khách hàng hoặc nhân viên) có thể đăng nhập vào tài khoản và thực hiện các thao tác trên website
2 Đăng xuất Người dùng có thể đăng xuất tài khoản hiện tại khỏi website.
3 Quản lý thông tin tài khoản
Người dùng chọn yêu thích một bài hát để thêm bài hát đó vào thư viện.
4 Xem danh sách sản phẩm Người dùng có thể xem danh sách sản phẩm, xem chi tiết sản phẩm, hình ảnh sản phẩm, thêm sản phẩm vào giỏ hàng.
5 Xem chi tiết sản phẩm Người dùng có thể xem chi tiết sản phẩm bao gồm các thông tin chi tiết như miêu tả, hình ảnh, kích cỡ.
Bảng 3.3 Danh sách Usecase khách hàng
STT Tên use case Ý nghĩa
1 Tạo tài khoản Khách hàng có thể tạo tài khoản trên website để đặt hàng và cập nhật thông tin về sản phẩm và dịch vụ.
2 Đặt hàng Khách hàng có thể đặt các sản phẩm, tùy chọn nhu cầu giao nhận hàng và phương thức thanh toán
3 Theo dõi trạng thái đơn hàng
Khách hàng có thể theo dõi trạng thái đơn hàng đã đặt.
4 Thanh toán đơn hàng Khách hàng có thể thanh toán đơn hàng thông qua trang website bằng các hình thức thanh toán.
5 Xem lịch sử đặt hàng Khách hàng có thể xem lịch sử đặt hàng của mình bao gồm các thông tin chi tiết như ngày đặt hàng, các sản phẩm trong đơn hàng đã đặt và hình thức thanh toán.
6 Phản hồi và góp ý sản phẩm
Khách hàng có thể cung cấp phản hồi về trải nghiệm của mình, bao gồm xếp hạng, đánh giá, gửi khiếu nại hoặc đề xuất và liên hệ với website.
7 Hủy đặt hàng Khách hàng có thể hủy đơn hàng đã đặt.
8 Quản lý giỏ hàng Khách hàng có thể thêm, xóa sản phẩm khỏi giỏ hàng và tùy chỉnh số lượng mỗi sản phẩm trong giỏ hàng tùy ý.
Bảng 3.4 Danh sách Usecase quản trị viên
STT Tên use case Ý nghĩa
1 Quản lý sản phẩm Quản trị viên có thể thêm, xóa, sửa các danh mục sắp xếp sản phẩm.
2 Quản lý kho sản phẩm Quản trị viên có thể thêm, xóa, sửa các sản phẩm khỏi hàng tồn kho của tiệm bánh và cập nhật trạng thái và giá cả của các sản phẩm.
3 Xuất báo cáo Quản trị viên có thể xuất báo cáo về tình trạng bán hàng, mức tồn kho và các số liệu kinh doanh khác để hiểu rõ hơn về hiệu suất của cửa hàng và đưa ra các quyết định kinh doanh dựa trên dữ liệu.
4 Xem báo cáo doanh thu Quản trị viên có thể xem các báo cáo bán hàng theo ngày, theo thàng, theo năm.
5 Xuất báo cáo doanh thu Cho phép quản trị viên xuất báo cáo doanh thu dưới dạng pdf, excel.
6 Quản lý khuyến mãi Cho phép quản trị viên tạo và quản lý các ưu đãi quảng cáo, giảm giá, phiếu giảm giá và chương trình khách hàng thân thiết để khuyến khích khách hàng, tăng doanh số.
7 Xem danh sách đơn đặt hàng
Quản trị viên có thể xem danh sách các đơn hàng hiện có mà khách hàng đặt.
8 Xem chi tiết đơn đặt hàng
Quản trị viên có thể xem chi tiết đơn hàng để có thể biết các thông tin về đơn hàng như số lượng sản phẩm, ghi chú, thông tin khách hàng trong đơn đặt hàng.
9 Cập nhật tình trạng đơn hàng
Quản trị viên có thể cập nhật tình trạng đơn hàng khi có thay đổi như: đã xác nhận, đã hoàn thành, đợi giao hàng, giao hàng thành công hoặc đã hủy.
10 Quản lý tài khoản Quản trị viên có thể thêm, xóa, sửa tài khoản hoặc xem thông tin tài khoản.
3.2.4.1 Đặc tả use case Đăng nhập
Bảng 3.5 Đặc tả usecase Đăng nhập
Tên use case Đăng nhập Đối tượng tham gia Người dùng có tài khoản
Mô tả Người dùng của hệ thống tiến hành đăng nhập vào trang web.
Luồng sự kiện 1 Người dùng điều hướng đến trang đăng nhập của trang web
2 Người dùng nhập email và mật khẩu của họ vào biểu mẫu đăng nhập
3 Hệ thống xác minh thông tin đăng nhập của người dùng + Nếu hệ thống không nhận ra thông tin đăng nhập của người dùng, thông báo lỗi sẽ được hiển thị và người dùng được nhắc nhập thông tin đăng nhập của họ. + Nếu người dùng chưa xác minh địa chỉ email của họ, thông báo lỗi sẽ được hiển thị và người dùng được nhắc xác minh địa chỉ email của họ trước khi đăng nhập
4 Hệ thống đăng nhập người dùng vào tài khoản của họ và chuyển chúng đến trang Bảng điều khiển.
Sự kiện kích hoạt Chỉ người dùng đã đăng ký có thông tin đăng nhập hợp lệ mới có thể đăng nhập vào tài khoản của họ
Mục tiêu Người dùng đăng nhập thành công vào tài khoản của họ.
Tiền điều kiện - Người dùng phải có tài khoản.
- Người dùng phải kết nối Internet.
Hậu điều kiện Không có
Tần suất sử dụng Cao
3.2.4.2 Đặc tả use case Đăng xuất
Bảng 3.6 Đặc tả usecase Đăng xuất
Tên use case Đăng xuất Đối tượng tham gia Người dùng có tài khoản
Mô tả Cho phép người dùng đăng xuất khỏi tài khoản của họ trên trang web.
Luồng sự kiện 1 Người dùng điều hướng đến nút Đăng xuất trên trang Bảng điều khiển
2 Người dùng nhấp vào nút Đăng xuất
3 Hệ thống đăng nhập người dùng ra khỏi tài khoản của họ và chuyển chúng đến trang đăng nhập
Sự kiện kích hoạt Người dùng hiện đang đăng nhập vào tài khoản của họ.
Mục tiêu Người dùng đã đăng xuất thành công tài khoản của họ
Tiền điều kiện Chỉ người dùng đăng nhập mới có thể đăng xuất khỏi tài khoản của
Hậu điều kiện Không có
Tần suất sử dụng Cao
3.2.4.3 Đặc tả use case Quản lý thông tin tài khoản
Bảng 3.7 Đặc tả usecase Quản lý thông tin tài khoản
Tên use case Quản lý thông tin tài khoản Đối tượng tham gia
Người dùng có tài khoản
Mô tả Cho phép người dùng quản lý thông tin tài khoản của họ trên trang web.
Luồng sự kiện 1 Người dùng điều hướng đến trang Cài đặt tài khoản trên trang web.
2 Người dùng cập nhật thông tin tài khoản của họ (ví dụ: tên, email, mật khẩu)
+ Nếu người dùng muốn thay đổi địa chỉ email của họ, hệ thống sẽ gửi email xác minh đến địa chỉ mới.
+ Nếu người dùng muốn thay đổi mật khẩu của họ, hệ thống sẽ nhắc người dùng nhập mật khẩu hiện tại của họ trước khi cho phép họ đặt mật khẩu mới
3 Người dùng nhấp vào nút Lưu để lưu các thay đổi của họ
4 Hệ thống xác nhận các thay đổi của người dùng và cập nhật thông tin tài khoản của họ
Sự kiện kích hoạt Chỉ người dùng đăng nhập mới có thể quản lý thông tin tài khoản của họ.
Mục tiêu Hệ thống phải có khả năng cập nhật thông tin tài khoản của người dùng một cách nhanh chóng và an toàn
Tiền điều kiện Người dùng hiện đang đăng nhập vào tài khoản của họ.
Hậu điều kiện Thông tin tài khoản của người dùng được cập nhật thành công.
Tần suất sử dụng Cao
3.2.4.4 Đặc tả use case Xem danh sách sản phẩm
Bảng 3.8 Đặc tả usecase Xem danh sách sản phẩm
Tên use case Xem danh sách sản phẩm Đối tượng tham gia Người dùng
Mô tả Cho phép xem các sản phẩm có sẵn trên trang web
Luồng sự kiện 1 Người dùng điều hướng đến trang Sản phẩm
2 Trang web hiển thị một danh sách các sản phẩm.
3 Người dùng có thể lọc các sản phẩm dựa trên các tiêu chí khác nhau như giá, danh mục, v.v
4 Người dùng có thể chọn một sản phẩm để xem thêm chi tiết về nó
Sự kiện kích hoạt Người dùng xem được danh sách sản phẩm.
Mục tiêu Danh sách sản phẩm phải cập nhật chính xác.
Hậu điều kiện Tải trang nhanh.
Tần suất sử dụng Cao
3.2.4.5 Đặc tả use case Xem chi tiết sản phẩm
Bảng 3.9 Đặc tả usecase Xem chi tiết sản phẩm
Tên use case Xem chi tiết sản phẩm Đối tượng tham gia Người dùng.
Mô tả Cho phép xem thông tin chi tiết của sản phẩm trên trang web.
Luồng sự kiện 1 Người dùng chọn một sản phẩm từ danh sách các sản phẩm
2 Trang web hiển thị thông tin chi tiết của sản phẩm đã chọn, chẳng hạn như tên, hình ảnh, giá cả, mô tả, v.v
3 Người dùng có thể thêm sản phẩm vào giỏ hàng của họ hoặc tiếp tục duyệt các sản phẩm.
Sự kiện kích hoạt Người dùng chọn sản phẩm muốn xem chi tiết.
Mục tiêu Giúp người dùng xem chi tiết sản phẩm.
Hậu điều kiện Người dùng có thể xem thông tin chi tiết của sản phẩm.
Tần suất sử dụng Cao
3.2.4.6 Đặc tả use case Tạo tài khoản
Bảng 3.10 Đặc tả usecase tạo tài khoản.
Tên use case Tạo tài khoản. Đối tượng tham gia Người dùng.
Mô tả Quá trình người dùng tạo tài khoản trên trang web.
Luồng sự kiện 1 Người dùng nhấp vào nút "Đăng ký"
2 Người dùng điền vào mẫu đăng ký
3 Người dùng gửi biểu mẫu
4 Hệ thống xác minh thông tin và tạo một tài khoản mới
5 Hệ thống gửi một email xác nhận cho người dùng.
Sự kiện kích hoạt Người dùng nhấn vào nút “Đăng ký”.
Mục tiêu Giúp người dùng có thể tạo một tài khoản trên trang web
Tiền điều kiện Người dùng chưa có tài khoản tại trang web.
Hậu điều kiện Một tài khoản mới được tạo cho người dùng.
Tần suất sử dụng Cao.
3.2.4.7 Đặc tả use case Đặt hàng.
Bảng 3.11 Đặc tả usecase Đặt hàng
Tên use case Đặt hàng Đối tượng tham gia Người dùng.
Mô tả Use case mô tả quá trình khách hàng đặt hàng ở trang web
Luồng sự kiện 1 Người dùng chọn một (hoặc nhiều) sản phẩm để đặt hàng.
2 Người dùng chỉ định bất kỳ tùy chọn tùy chỉnh nào (nếu có)
3 Người dùng thêm sản phẩm vào giỏ hàng của họ
4 Người dùng tiến hành thanh toán
5 Người dùng nhập thông tin thanh toán và vận chuyển của họ (nếu đã có thông tin thì sẽ tự động nạp, người dùng vẫn có thể sửa lại theo ý muốn)
6 Người dùng xác nhận đơn đặt hàng
7 Hệ thống xử lý đơn hàng và gửi xác nhận cho người dùng
Sự kiện kích hoạt Người dùng tiến hàng đặt hàng.
Mục tiêu Hệ thống phải có khả năng xử lý một số lượng lớn các đơn đặt hàng trong giờ cao điểm
Tiền điều kiện Người dùng đã đăng nhập và có một hoặc nhiều sản phẩm trong giỏ hàng
Hậu điều kiện Đơn được đặt và người dùng được yêu cầu xác nhận đặt hàng
Tần suất sử dụng Cao.
3.2.4.8 Đặc tả use case Xem tình trạng đơn hàng.
Bảng 3.12 Đặc tả usecase Xem tình trạng đơn hàng.
Tên use case Xem tình trạng đơn hàng Đối tượng tham gia Người dùng.
Mô tả Use case này mô tả quy trình cho phép người dùng kiểm tra trạng thái của đơn đặt hàng được đặt trước đó
Luồng sự kiện 1 Người dùng điều hướng đến trang "Lịch sử đặt hàng"
2 Người dùng chọn thứ tự họ muốn kiểm tra trạng thái của
3 Hệ thống hiển thị trạng thái hiện tại của thứ tự.
Sự kiện kích hoạt Người dùng chọn xem “Lịch sử đơn hàng”.
Mục tiêu Hệ thống phải duy trì một bản ghi chính xác về tất cả các đơn đặt hàng và trạng thái của chúng.
Tiền điều kiện Người dùng có một đơn đặt hàng trước đây mà họ muốn kiểm tra trạng thái
Hậu điều kiện Người dùng được cho xem trạng thái hiện tại của đơn đặt hàng của họ.
Tần suất sử dụng Cao.
3.2.4.9 Đặc tả use case Thanh toán đơn hàng.
Bảng 3.13 Đặc tả usecase Thanh toán đơn hàng.
Tên use case Thanh toán đơn hàng. Đối tượng tham gia Người dùng.
Mô tả Cho phép người dùng thanh toán cho đơn hàng bằng phương thức thanh toán ưa thích
Luồng sự kiện 1 Người dùng chọn phương thức thanh toán.
+ Nếu phương thức thanh toán không được hỗ trợ, hệ thống sẽ thông báo cho khách hàng và nhắc họ chọn phương thức thanh toán khác.
2 Người dùng nhập thông tin thanh toán.
+ Nếu thông tin thanh toán không chính xác, hệ thống sẽ nhắc khách hàng nhập thông tin hợp lệ.
3 Hệ thống xác minh thông tin thanh toán.
4 Thanh toán được xử lí.
5 Hệ thống cập nhật trạng thái đơn hàng.
Sự kiện kích hoạt Người dùng tiến hành thanh toán.
Mục tiêu Thời gian xử lí thanh toán nhanh, người dùng thanh toán thành công.
Tiền điều kiện Người dùng có một đơn đặt hàng hiện chưa thanh toán
Hậu điều kiện Khoản thanh toán được xử lý và tình trạng đơn hàng chuyển sang “Đã thanh toán”
Tần suất sử dụng Cao.
3.2.4.10 Đặc tả use case Xem lịch sử đặt hàng.
Bảng 3.14 Đặc tả usecase Xem lịch sử đặt hàng
Tên use case Xem lịch sử đặt hàng. Đối tượng tham gia Người dùng.
Mô tả Cho phép người dùng xem danh sách tất cả các đơn đặt hàng trước đó.
Luồng sự kiện 1 Người dùng điều hướng đến trang "Lịch sử đặt hàng"
2 Hệ thống truy vấn lịch sử đặt hàng của người dùng
+ Nếu không có đơn đặt hàng trước đó, hệ thống thông báo cho khách hàng và nhắc họ đặt hàng.
3 Hệ thống hiển thị lịch sử đơn hàng cho người dùng.
Sự kiện kích hoạt Người dùng tiến hành xem lịch sử đặt hàng.
Mục tiêu Hệ thống phải có khả năng tải nhanh, người dùng xem lịch sử đặt hàng theo thứ tự sắp xếp đơn hàng gần đây nhất.
Tiền điều kiện Người dùng có một tài khoản đã đăng ký và đã đặt ít nhất một đơn đặt hàng trong quá khứ.
Thiết kế dữ liệu
3.3.1 Sơ đồ thiết kế dữ liệu
Hình 3.8 Sơ đồ Thiết kế Cơ sở dữ liệu
3.3.2 Danh sách các bảng dữ liệu
Bảng 3.24 Danh sách các bảng dữ liệu
STT Tên bảng Ý nghĩa/Ghi chú
1 Product Lưu trữ danh sách sản phẩm
2 ProductType Lưu trữ danh sách loại sản phẩm
3 Sale Lưu trữ danh sách khuyến mãi
4 Feedback Lưu trữ danh sách phản hồi
5 Order Lưu trữ danh sách đơn hàng
6 Delivery Lưu trữ thông tin giao hàng
7 Payment Lưu trữ danh sách phương thức thanh toán
8 User Lưu trữ danh sách người dùng
9 Cart Lưu trữ thông tin giỏ hàng
10 Brand Lưu trữ danh sách thương hiệu
11 Address Lưu trữ địa chỉ của người dùng
12 UserGroup Lưu trữ nhóm người dùng
13 Permission Lưu trữ permission của từng nhóm người dùng
Bảng 3.25 Chi tiết bảng “Product”
STT Tên thuộc tính Kiểu Ý nghĩa/Ghi chú
1 id string Mã sản phẩm
2 name string Tên sản phẩm
3 description string Mô tả sản phẩm
4 colors array Mảng các màu của sản phẩm
5 sizes array Mảng các size của sản phẩm
6 images array Mảng các link hình ảnh sản phẩm
7 isAvailable boolean Trạng thái sản phẩm
8 productType_id string Mã loại sản phẩm
9 price number Giá sản phẩm
10 feedbacks array Mảng các phản hồi của sản phẩm
11 brand_id string Mã thương hiệu
Bảng 3.26 Chi tiết bảng “ProductType”
STT Tên thuộc tính Kiểu Ý nghĩa/Ghi chú
1 id string Mã loại sản phẩm
2 name string Tên loại sản phẩm
4 image string Link hình ảnh loại sản phẩm
5 isAvailable boolean Trạng thái sản phẩm
Bảng 3.27 Chi tiết bảng “Brand”
STT Tên thuộc tính Kiểu Ý nghĩa/Ghi chú
1 id string Mã thương hiệu
2 name string Tên thương hiệu
3 description string Mô tả thương hiệu
4 image string Link hình ảnh thương hiệu
Bảng 3.28 Chi tiết bảng “Sale”
STT Tên thuộc tính Kiểu Ý nghĩa/Ghi chú
1 id string Mã khuyến mãi
2 name string Tên khuyến mãi
3 code string Mã code khuyến mãi
4 percent number Phần trăm khuyến mãi
5 maxSalePrice number Giảm tối đa của khuyến mãi
6 description string Mô tả khuyến mãi
7 startAt string Thời gian bắt đầu
8 endAt string Thời gian kết thúc
9 image string Link hình ảnh khuyến mãi
10 isAvailable boolean Trạng thái khuyến mãi
Bảng 3.29 Chi tiết bảng “Feedback”
STT Tên thuộc tính Kiểu Ý nghĩa/Ghi chú
1 id string Mã phản hồi
2 rating number Đánh giá của phản hồi
3 comment string Bình luận của phản hồi
4 product_id string Mã sản phẩm
5 user_id string Mã user
Bảng 3.30 Chi tiết bảng “Order”
STT Tên thuộc tính Kiểu Ý nghĩa/Ghi chú
1 id string Mã đơn hàng
2 originalPrice number Giá gốc đơn hàng
3 saleAmount number Số tiền được giảm giá
6 state number Trạng thái trạng hàng
7 createdAt string Thời gian tạo đơn hàng
8 paymentTime string Thời gian thanh toán
9 payment_id string Mã phương thức thanh toán
10 sale_id string Mã khuyến mãi
11 user_id string Mã user
Bảng 3.31 Chi tiết bảng “Delivery”
STT Tên thuộc tính Kiểu Ý nghĩa/Ghi chú
1 id string Mã giao hàng
2 name string Tên người nhận hàng
3 phoneNumber string Số điện thoại nhận hàng
4 address string Địa chỉ nhận hàng
6 date string Ngày nhận hàng
7 time string Thời gian nhận hàng
8 state number Trạng thái giao hàng
9 order_id string Mã đơn hàng
Bảng 3.32 Chi tiết bảng “Payment”
STT Tên thuộc tính Kiểu Ý nghĩa/Ghi chú
1 Id string Mã phương thức thanh toán
2 Name string Tên phương thức thanh toán
3 isAvailable string Trạng thái phương thức thanh toán
Bảng 3.33 Chi tiết bảng “User”
STT Tên thuộc tính Kiểu Ý nghĩa/Ghi chú
3 email string Email của user
6 phoneNumber string Số điện thoại
7 avatar string Link hình ảnh đại diện của user
8 addresses array Mảng các địa chỉ của user
9 isActive boolean Trạng thái của user
10 orders array Mảng các đơn hàng của người dùng
11 group_id string Mã nhóm user
Bảng 3.34 Chi tiết bảng “Cart”
STT Tên thuộc tính Kiểu Ý nghĩa/Ghi chú
1 id string Mã giỏ hàng
2 products array Mảng các sản phẩm trong giỏ hàng
4 user_id string Mã user
Bảng 3.35 Chi tiết bảng “Address”
STT Tên thuộc tính Kiểu Ý nghĩa/Ghi chú
1 id string Mã địa chỉ
3 user_id string Mã người dùng
Bảng 3.36 Chi tiết bảng “UserGroup”
STT Tên thuộc tính Kiểu Ý nghĩa/Ghi chú
1 id string Mã nhóm người dùng
2 name string Tên nhóm người dùng
3 users array Mảng các user
4 permission array Mảng các permission
5 isActive boolean Trạng thái của nhóm người dùng
Bảng 3.37 Chi tiết bảng “Permission”
STT Tên thuộc tính Kiểu Ý nghĩa/Ghi chú
2 name string Mảng các sản phẩm trong giỏ hàng
3 code string Mã số permission
4 description string Mô tả về permission
5 isActive boolean Trạng thái của permission
XÂY DỰNG ỨNG DỤNG
Danh sách màn hình
Bảng 4.38 Danh sách các bảng dữ liệu
STT Tên màn hình Ý nghĩa/Ghi chú
1 Trang chủ Hiển thị màn hình chính của website để người dùng sử dụng.
2 Cửa hàng Hiển thị danh sách sản phẩm của cửa hàng.
3 Blogs Hiển thị danh sách các blog.
4 Liên hệ Hiển thị thông tin liên hệ của website.
5 Chi tiết sản phẩm Hiển thị thông tin chi tiết của một sản phẩm.
6 Đăng nhập Cho phép người dùng đăng nhập vào website bằng tài khoản đã đăng ký.
7 Đăng ký Cho phép người dùng đăng ký tài khoản mới để sử dụng website.
8 Giỏ hàng Hiển thị danh sách sản phẩm người dùng đã thêm vào giỏ hàng.
9 Sản phẩm yêu thích Hiển thị danh sách sản phẩm người dùng đã yêu thích.
10 Thanh toán Màn hình thanh toán.
11 Thông tin tài khoản Hiển thị thông tin tài khoản.
12 Thống kê Hiển thị thống kê đơn hàng.
13 Quản lý khách hàng Màn hình quản lý khách hàng.
14 Thêm sản phẩm Màn hình thêm sản phẩm.
15 Danh sách sản phẩm Màn hình danh sách sản phẩm
16 Quản lý loại sản phẩm
Màn hình quản lý loại sản phẩm.
17 Quản lý thương hiệu Màn hình quản lý thương hiệu.
18 Quản lý màu sản phẩm
Màn hình quản lý màu sản phẩm.
19 Quản lý kích cỡ sản Màn hình quản lý kích cỡ sản phẩm. phẩm
20 Quản lý đơn hàng Màn hình quản lý đơn hàng.
21 Quản lý khuyến mãi Màn hình quản lý khuyến mãi.
22 Quản lý blogs Màn hình quản lý blogs.
23 Quản lý yêu cầu Màn hình quản lý yêu cầu.
Chi tiết màn hình
Hình 4.9 Màn hình “Trang chủ”
Màn hình “Trang chủ” chia thành các phần chính: Header, Content giới thiệu,Sản phẩm nổi bật và Footer.
- Header nằm ở trên cùng của website, chứa các thông tin cơ bản của website như slogan, hotline, tên website, logo,… Phần Shop Categories chứa danh sách các thương hiệu, khi người dùng nhấn vào tên thương hiệu sẽ chuyển đến trang hiển thị các sản phẩm hiện có của thương hiệu đó Kế đến là thanh search sản phẩm và nút dẫn đến các trang Danh sách sản phẩm yêu thích, Profile, Giỏ hàng, Cửa hàng, Blogs và Liên hệ; khi người dùng nhấn vào nút nào sẽ chuyển tới trang tương ứng
- Bên dưới Header là phần content giới thiệu, gồm có hình ảnh quảng bá sản phẩm mới, các điểm nổi bật của website, các thương hiệu hiện có và các dòng sản phẩm mới.
- Phần Sản phẩm nổi bật hiển thị các sản phẩm nổi bật của cửa hàng và được chia theo từng bộ sưu tập riêng biệt.
- Phần Blogs hiển thị danh sách các blog mới nhất.
- Dưới cùng là phần Footer hiển thị các thông tin cơ bản của cửa hàng như địa chỉ, số điện thoại, email, các mạng xã hội và đường dẫn đến một số trang khác của website.
Hình 4.10 Màn hình “Cửa hàng”
Màn hình “Cửa hàng” hiển thị danh sách các sẩn phẩm hiện có của website Mỗi sản phẩm được hiển thị với các thông tin cơ bản như hình ảnh, tên sản phẩm, thương hiệu, giá tiền, rating Các sản phẩm này có thể được sắp xếp theo thứ tự tăng dần hoặc giảm dần của bảng chữ cái, giá tiền và ngày đăng tải sản phẩm Người dùng có thể nhanh chóng tìm được sản phẩm mà bản thân đang cần với bộ lọc sản phẩm theo phân loại sản phẩm, khoảng giá, thương hiệu và tag sản phẩm.
Màn hình “Blogs” hiển thị danh sách các blog nhằm cập nhật tin tức mới nhất về các sản phẩm đến với khách hàng.
Hình 4.12 Màn hình “Liên hệ”
Màn hình “Liên hệ” nhằm phục vụ nhu cầu liên hệ với cửa hàng của khách hàng. Khách hàng có thể liên hệ trực tiếp với cửa hàng theo địa chỉ và vị trí định vị đính kèm gửi phản hồi online thông qua form hiển thị trên trang.
4.2.5 Màn hình “Chi tiết sản phẩm”
Hình 4.13 Màn hình “Chi tiết sản phẩm”
Màn hình “Chi tiết sản phẩm” hiển thị các thông tin chi tiết của sản phẩm như hình ảnh, tên sản phẩm, giá tiền, đánh giá sản phẩm, phân loại sản phẩm, thương hiệu, mô tả sản phẩm Đồng thời, khách hàng có thể chọn size, màu sắc và số lượng để thêm sản phẩm vào giỏ hàng hoặc đánh giá sản phẩm và xem các sản phẩm khác tương tự
Hình 4.14 Màn hình “Đăng nhập”
Màn hình “Đăng nhập” cho phép người dùng đăng nhập vào website thông qua email và password đã có để sử dụng được một số chức năng nhất định như mua hàng, thanh toán và đánh giá sản phẩm Sau khi đăng nhập, người dùng được chuyển hướng đến trang “Trang chủ” Người dùng chưa có tài khoản có thể nhấn vào nút “Sign up” để được chuyển sang trang đăng kí tài khoản mới.
Hình 4.15 Màn hình “Đăng ký”
Màn hình “Đăng ký” cho phép người dùng đăng ký tài khoản mới để sử dụng trong website Sau khi đăng ký tài khoản thành công, người dùng được chuyển đến trang
“Đăng nhập” để đăng nhập vào website Người dùng đã có tài khoản có thể nhấn vào nút “Log in” để đăng nhập bằng tài khoản đã có và tiếp tục sử dụng website.
Hình 4.16 Màn hình “Giỏ hàng”
Màn hình “Giỏ hàng” lưu trữ và hiển thị danh sách các sản phẩm mà người dùng đã thêm vào giỏ hàng với size, màu sắc và số lượng mà người dùng đã chọn Tổng tiền của từng sản phẩm và của cả giỏ hàng cũng được tính sẵn và hiển thị ở cuối trang Tại đây người dùng có thể nhấn vào nút Checkout để tiến hành thanh toán giỏ hàng hoặc nhấn vào nút Continue to shop để quay về trang “Cửa hàng” và tiếp tục mua sắm.
Hình 4.17 Màn hình “Thanh toán”
Màn hình “Thanh toán” cho phép người dùng điền các thông tin giao hàng như họ tên, số điện thoại, thành phố, địa chỉ, ghi chú và chọn phương thức thanh toán trước khi tiến hành thanh toán Người dùng có thể kiểm tra lại thông tin các sản phẩm trong đơn hàng, tổng tiền và phí giao hàng Sau khi đã kiểm tra và điền đầy đủ thông tin, người dùng nhấn vào nút Place order để đặt hàng hoặc nhấn Continue to shopping để tiếp tục mua hàng.
4.2.10 Màn hình “Thông tin tài khoản”
Hình 4.18 Màn hình “Thông tin tài khoản”
Màn hình “Thông tin tài khoản” hiển thị các thông tin của người dùng như họ tên,email, số điện thoại Người dùng có thể nhấn nút chỉnh sửa để thay đổi các thông tin này Đồng thời có thể nhấn vào nút Logout để đăng xuất tài khoản khỏi website.
Hình 4.19 Màn hình “Thống kê”
Màn hình “Thống kê” hiển thị tổng doanh thu của cửa hàng, vẽ biểu đồ doanh thu theo từng giai đoạn và danh sách các đơn hàng của cửa hàng.
4.2.12 Màn hình “Quản lý khách hàng”
Hình 4.20 Màn hình “Quản lý khách hàng”
Màn hình “Quản lý khách hàng” hiển thị danh sách tài khoản của các khách hàng đã đăng kí để sử dụng website với các thông tin cơ bản như họ tên, email, số điện thoại.
4.2.13 Màn hình “Thêm sản phẩm”
Hình 4.21 Màn hình “Thêm sản phẩm”
Màn hình “Thêm sản phẩm” cho phép nhân viên của hàng thêm các sản phẩm mới vào hệ thống Mỗi sản phẩm mới cần nhập các thông tin về tên sản phẩm, mô tả, giá tiền, thương hiệu, phân loại, tag, màu sắc, size, số lượng và hình ảnh
4.2.14 Màn hình “Danh sách sản phẩm”
Hình 4.22 Màn hình “Danh sách sản phẩm”
