Mỗi thành phần kiến trúc được xây dựng để xử lý khía cạnh phát triển cụ thể của một ứng dụng.. Các đặc trưng của Client-Side Rendering - Single-page applications SPA: Client-side renderi
GIỚI THIỆU CHUNG
Giới thiệu đề tài
Đề tài website bán quần áo với hệ thống gợi ý là một đề tài thú vị và có ý nghĩa trong lĩnh vực thương mại điện tử Website bán quần áo là một loại website chuyên cung cấp các sản phẩm quần áo của nhiều thương hiệu, kiểu dáng và mức giá khác nhau.
Lý do chọn đề tài
Trong thời đại hiện nay mạng Internet là một sản phẩm hết sức lớn lao và là nền tảng chính cho sự truyền tài, trao đổi thông tin trên toàn cầu Trong hoạt động sản xuất kinh doanh, giờ đây thương mại điện tử đã khẳng định được vai trò xúc tiến và thúc đẩy hoạt động của doanh nghiệp Đối với một cửa hàng, việc quảng bá và giới thiệu đến khách hàng các sản phẩm mới đáp ứng được nhu cầu của khách hàng là rất cần thiết Vì vậy, em đã quyết định “Xây dựng website bán quần áo" có tên là Besty giới thiệu và cung cấp các loại quần áo sang trọng đang có mặt trên thị trường và khách hàng có thể đặt hàng ngay tại website mà không cần đến trực tiếp điểm giao dịch Việc này giúp cho khách hàng có thể chủ động và tiết kiệm thời gian của chính mình.
Mục tiêu trong đề tài
- Nghiên cứu một số thuật toán có trong hệ thống gợi ý
- Xây dựng website bán quần áo cùng hệ thống gợi ý sản phẩm cho khách hàng
- Xây dựng được hệ thống quản lý bán hàng đảm bảo thực hiện được đầy đủ các chức năng cơ bản của một website bán hàng
- Giải quyết tối ưu hóa quá trình mua bán qua mạng phù hợp với thực tiễn
- Đưa ra các báo cáo, thống kê tổng hợp
- Tìm hiểu và ứng dụng các công nghệ mới, nâng cao kỹ năng phát triển phần mềm
Đối tượng nghiên cứu
- Front-end: Nextjs, redux, reactjs, html, cs, ant design
- Backend: NodeJS, asp.net core, clean architecture, ImediaR
1.4.2 Đối tượng phạm vi đề tài hướng đến
- Các cửa hàng muốn có một website bán quần áo
- Khách hàng muốn mua sản phẩm trực tuyến
Phạm vi
- Đề tài tập trung vào xây dựng hệ thống trên nền tảng website hướng tới đối tượng sử dụng là những người có nhu cầu mua quần áo
- Áp dụng tại các cửa hàng bán quần áo muốn có website bán quần áo trực tuyến
- Người dùng có điện thoại hoặc laptop có internet là có thể truy cập.
Phương pháp thực hiện
- Tìm hiểu và phân tích quy trình tìm kiếm, mua bán sản phẩm tại các website bán quân áo
- Phân tích các giải pháp của các sản phẩm tương tự trên thị trường
- Xây dựng chức năng ở mức MVP (Minimum Viable Product) để đo lường tính hiệu quả.
Ý nghĩa thực tiễn
- Việc tìm kiếm sản phẩm ưng ý dễ dàng hơn cho khách hàng
- Khách hàng có một nơi để mua sản phẩm quần áo chất lượng
- Người quản trị có thể dễ dàng quản lý các sản phẩm có trong cửa hàng
Kết quả dự kiến
- Hiểu rõ các công nghệ mới: o Front – end: HTML-CSS, NextJs, Reactjs, ant design o Back – end: NodeJS, Postgres, Cloudinary, Collaorative Filtering, ASP.NET core 7
- Hoàn thành sản phẩm với các chức năng đã được trình bày
- Giao diện thân thiện và tạo ra được những giá trị của mục tiêu.
CƠ SỞ LÝ THUYẾT VÀ CÔNG NGHỆ
Mô hình ứng dụng web MVC
2.1.1 Giới thiệu mô hình ứng dụng web MVC
Mô hình Model-View-Controller (MVC) là một mẫu kiến trúc phân tách một ứng dụng thành ba thành phần logic chính Model, View và Controller Do đó viết tắt MVC Mỗi thành phần kiến trúc được xây dựng để xử lý khía cạnh phát triển cụ thể của một ứng dụng MVC tách lớp logic nghiệp vụ và lớp hiển thị ra riêng biệt
2.1.2 Các đặc trưng của mô hình MVC
Mô hình MVC là một mô hình kiến trúc phổ biến trong lập trình web, giúp phân tách ứng dụng web thành ba thành phần chính: Model, View và Controller
- Model: là thành phần đại diện cho dữ liệu và logic nghiệp vụ của ứng dụng
Model có thể kết nối với cơ sở dữ liệu, xử lý các yêu cầu và trả về kết quả
- View: là thành phần đảm nhiệm việc hiển thị giao diện người dùng và tương tác với người dùng View có thể chứa các đối tượng giao diện như textbox, button, image View cũng có thể nhận được sự kiện từ người dùng và gửi đến Controller
- Controller: là thành phần điều khiển luồng xử lý của ứng dụng Controller nhận các yêu cầu từ View, gọi đến Model để xử lý và trả về kết quả cho View để hiển thị
Mô hình MVC giúp tăng tính tái sử dụng, bảo trì và mở rộng của mã nguồn, cũng như giảm sự phụ thuộc giữa các thành phần
Hình 2.1: Mô hình MVC
2.1.3 Lý do chọn mô hình MVC cho đề tài
Hệ thống MVC phát triển tốt sẽ cho phép phát triển front – end, back – end cùng trên hệ thống mà không có sự can thiệp, chia sẻ, chỉnh sửa các tập tin trong khi một hoặc hai bên vẫn đang làm việc
Việc sử dụng mô hình tương đối đơn giản Chỉ cần hiểu rõ quy trình vận hành, nắm được các chức năng của từng bộ phận thì việc triển khai mô hình MVC tương đối dễ dàng.
Server-Side Rendering
2.2.1 Giới thiệu về Server-Side Rendering
Server side là kịch bản thường được sử dụng bởi máy chủ để người sử dụng tùy chỉnh website đang truy cập Server side là một kỹ thuật được dùng để phát triển website Bên cạnh chức năng cung cấp việc hiển thị tập tin website, nó còn phản hồi cho server biết các tùy chỉnh của người truy cập đối với website
Server-side rendering là một cơ chế đã được sử dụng từ lâu Theo cơ chế này thì hầu hết các xử lý logic đều ở phía máy chủ Trong đó, máy chủ thực hiện xử lý và tiến hành các thao tác với cơ sở dữ liệu để thông dịch (render) ra thành HTML, sau đó gửi phản hồi cho khách hàng Trình duyệt của khách hàng cũng sẽ chỉ hiển thị HTML này
Hình 2.2: Sơ đồ mô tả hoạt động SSR
2.2.2 Các đặc trưng của Server-Side Rendering
Server-side rendering là cơ chế đã được sử dụng từ rất lâu Gọi nó là server-side rendering là vì phần lớn logic sẽ được xử lý ở server:
• Khi người dùng vào một trang web, trình duyệt sẽ gửi GET request tới web server
• Web server sẽ nhận request, đọc dữ liệu từ database
• Web server sẽ render HTML, trả về cho browser để hiển thị cho người dùng
2.2.3 Lý do chọn Server-Side Rendering cho đề tài
“Tuy lâu nhưng không lỗi thời” chính là cụm từ để miêu tả Server-Side Rendering, bởi cơ chế này sở hữu nhiều ưu điểm mà các cơ chế khác không có, cụ thể như:
• Tốc độ tải ban đầu nhanh chóng, dễ dàng điều chỉnh vì tất cả các dữ liệu đều được xử lý ở trên máy chủ Phía máy khách chỉ thực hiện chức năng hiển thị lại các thông tin đã được diễn giải
• Phần lớn các web framework đều hỗ trợ cơ chế Server-Side Rendering
• Lập trình viên dễ code hơn Theo đó, các lập trình viên chỉ cần thực hiện code một dự án web, mà không cần tách front-end và back-end
• Hỗ trợ đắc lực cho SEO Vì khi tất cả dữ liệu của website được thể hiện dưới dạng HTML nên được các công cụ tìm kiếm Google, Bing đánh giá cao
• Chạy được trên các trình duyệt, bao gồm cả disable JavaScript.
Client-Side Rendering
2.3.1 Giới thiệu về Client-Side Rendering
Client-side rendering (CSR) là một phương pháp để xây dựng ứng dụng web, trong đó quá trình xử lý và tạo nội dung HTML diễn ra trên máy khách (client-side) thay vì máy chủ (server-side) Thay vì nhận được một trang HTML đầy đủ từ máy chủ, trình duyệt web nhận được một tệp JavaScript và sử dụng nó để tạo ra nội dung và giao diện của trang
Hình 2.3: Sơ đồ mô tả hoạt động CSR
2.3.2 Các đặc trưng của Client-Side Rendering
- Single-page applications (SPA): Client-side rendering thường được sử dụng trong việc xây dựng ứng dụng đơn trang (SPA), trong đó toàn bộ ứng dụng được tải một lần duy nhất và các nội dung thay đổi được tạo ra và quản lý trên máy khách
- JavaScript-based rendering: Việc tạo nội dung và giao diện của trang diễn ra trên máy khách bằng cách sử dụng mã JavaScript Trình duyệt tải tệp JavaScript và thực thi nó để tạo ra nội dung hiển thị cho người dùng
- Rich user interactions: Client-side rendering cho phép tạo ra các trải nghiệm tương tác phong phú và đáp ứng nhanh Với JavaScript chạy trên trình duyệt, người dùng có thể tương tác với trang mà không cần phải tải lại toàn bộ trang
- Better performance for subsequent interactions: Một lợi ích của Client-side rendering là hiệu suất tốt cho các tương tác tiếp theo sau khi trang ban đầu đã được tải Vì không cần gửi yêu cầu đến máy chủ và tải lại trang, việc tương tác với ứng dụng trên máy khách có thể nhanh chóng và mượt mà
2.3.3 Lý do chọn Client-Side Rendering
- Interactive user experience: Client-side rendering cho phép tạo ra các trải nghiệm tương tác mạnh mẽ và đáp ứng nhanh Người dùng có thể tương tác với ứng dụng mà không cần phải tải lại trang hoặc chờ đợi phản hồi từ máy chủ
- Offline support: Với Client-side rendering và sử dụng các công nghệ như Service Workers, ứng dụng có thể hoạt động trong chế độ ngoại tuyến (offline) Người dùng có thể truy cập và tương tác với nội dung mà không cần kết nối internet
- Scalability: Với Client-side rendering, phần lớn công việc xử lý diễn ra trên máy khách, giảm tải cho máy chủ Điều này giúp cải thiện khả năng mở rộng và xử lý tải trọng của ứng dụng
- Modular development: Với Client-side rendering, ứng dụng có thể được xây dựng thành các thành phần độc lập và có thể tái sử dụng Điều này giúp tăng tốc quá trình phát triển và duy trì ứng dụng.
NodeJS
V8 engine là một JavaScript engine mã nguồn mở chạy trên các trình duyệt Chrome, Opera và Vivaldi Nó được thiết kế tập trung vào hiệu năng và chịu trách nhiệm cho việc dịch mã JavaScript sang mã máy để máy tính có thể hiểu và chạy được Nhưng bạn cũng nên tránh nhầm lẫn rằng Node chạy trên trình duyệt Cha đẻ của Node dựa trên V8 engine, cải tiến một số tính năng chẳng hạn file system API, thư viện HTTP và một số phương thức liên quan đến hệ điều hành Điều đó có nghĩa là Node.js là một chương trình giúp ta có thể chạy code JavaScript trên máy tính, nói cách khác nó là một JavaScript runtime
2.4.2 Các đặc trưng của NodeJS
- Module: Module giống như các thư viện JavaScript sử dụng trong ứng dụng
Node.js application bao gồm một bộ các chức năng Để đưa một module vào ứng dụng Node.js thì phải sử dụng hàm require() function with the với dấu ngoặc đơn chứa tên module
- Cluster: Node.js được xây dựng dựa trên ý tưởng lập trình đơn luồng Cluster là một module cho phép đa luồng bằng cách tạo ra các quy trình con có chung cổng máy chủ và chạy đồng thời
- Global: Biến toàn cục trong Node.js tồn tại trong tất cả các module Những biến này bao gồm các hàm, module, string, v…v… Một số biến toàn cục trong Node.js có thể kể đến trong bảng sau:
Hình 2.4: Các biến toàn cục trong NodeJs
- Error Handling: Lỗi trong Node.js được sử lý qua các exception Chẳng hạn, chúng ta phải xử lý một lỗi xảy ra khi chia cho 0 Lỗi này sẽ làm crash ứng dụng Node.js, vì vậy chúng ta phải xử lý lỗi này để ứng dụng có thể hoạt động bình thường
- Streaming: Stream là các đối tượng cho phép bạn đọc và viết dữ liệu một cách liên tục Có 4 loại stream như sau:
• Readable: Là loại stream mà từ đó dữ liệu có thể đọc được
• Writable: Là loại stream mà dữ liệu có thể được viết lên đó
• Duplex: Là loại stream có thể đọc và viết được
• Transform: Là loại stream có thể thao tác dữ liệu trong khi nó đang được đọc hoặc viết
- Buffer: Bộ đệm là một module cho phép xử lý các stream chỉ chứa các dữ liệu dạng nhị phân
- Domain: Domain module sẽ chặn các lỗi chưa được xử lý Hai phương thức được dùng để chặn lỗi đó là:
• Internal Binding: Error emitter thực thi code trong phương thức run
• External Binding: Error emitter được thêm thẳng vào domain qua phương thức add của nó
DNS: DNS module được sử dụng để kết nối đến một máy chủ DNS và thực hiện phân giải tên miền
- Debugger: Node.js có chức năng gỡ lỗi có thể được sử dụng với một client gỡ lỗi được tích hợp sẵn Trình gỡ lỗi của Node.js không có quá nhiều tính năng nhưng nó hỗ trợ các chức năng kiểm tra code cơ bản Trình gỡ lỗi có thể được sử dụng trong bảng lệnh bằng cách sử dụng từ khoá 'inspect' phía trước tên của file JavaScript
2.4.3 Lý do chọn NodeJS cho đề tài
- Khả năng mở rộng: Các ứng dụng Node.js có thể dễ dàng mở rộng, theo chiều dọc và chiều ngang Trong khi quy mô theo chiều dọc cho phép bạn thêm nhiều tài nguyên hơn vào các nút hiện tại, quy mô theo chiều ngang cho phép bạn thêm các nút mới nhanh hơn Hơn nữa, các ứng dụng Node.js không yêu cầu một khối lớn trong toàn bộ quá trình phát triển, vì nó hoạt động cùng với một tập hợp các microservices và mô-đun Nó đơn giản, dễ dàng và hoàn toàn phù hợp cho các công ty khởi nghiệp đang muốn phát triển
- Hiệu suất cao: Node.js chạy trên công cụ Google V8 JS tuân thủ mã Javascript trực tiếp vào mã máy Điều này làm cho nó hiệu quả về tài nguyên cũng như tăng tốc độ của khung Trên thực tế, bản thân Google đầu tư rất nhiều vào công cụ tìm kiếm của họ để cải thiện hiệu suất một cách nhất quán
- Hỗ trợ cộng đồng lớn: Được thành lập vào năm 2015, Node.js Foundation là một nhóm các nhà sáng lập ấn tượng đến từ các doanh nghiệp hàng đầu như IBM, Microsoft, Fidelity và SAP Một số lượng lớn các nhà phát triển phần mềm và nhiều người hâm mộ Node.js tích cực đang không ngừng đóng góp vào cộng đồng Node.js không ngừng phát triển và phát triển để hỗ trợ các nhà phát triển đồng nghiệp
- Ngôn ngữ lập trình đơn: Node.js cung cấp một loạt các ngôn ngữ tương tự trên Javascript front-end và back-end Nó thực sự dễ tiếp cận và linh hoạt hơn âm thanh Nó làm cho toàn bộ chu trình phát triển ứng dụng web trở nên mạnh mẽ và liền mạch cho các nhà phát triển và doanh nghiệp Nó giúp tiết kiệm thời gian, năng lượng và tài nguyên đầu tư vào giờ làm việc hiệu quả hơn và có lợi nhuận Node.js không chỉ giúp cho việc phát triển ứng dụng web trở nên thuận tiện mà còn khiến nó trở thành công nghệ được ưa chuộng nhất trên thị trường hiện nay
- Hệ sinh thái phong phú: Khi nói đến sự đơn giản và phong phú của Node.js, npm là từ duy nhất xuất hiện trong đầu bạn npm có 836.000 thư viện và 10.000 trở lên được xuất bản mỗi tuần Hơn 475.000 gói và đăng ký có sẵn và 11.000 công cụ mới hàng tuần Nó đang giảm rất nhiều thời gian và chi phí liên quan đến việc phát triển và đưa ra thị trường.
NextJS
Next.js là một framework phát triển ứng dụng web React với khả năng xây dựng Server-side Rendering (SSR) và Static Site Generation (SSG) Nó cung cấp một cách tiếp cận hybric rendering, cho phép lựa chọn giữa client-side rendering và server-side rendering tùy thuộc vào yêu cầu của ứng dụng
- Server-side Rendering (SSR): Next.js cho phép xây dựng ứng dụng với khả năng render trên phía máy chủ Khi một yêu cầu được gửi đến máy chủ, Next.js sẽ thực hiện việc render trước trang và trả về nội dung HTML đã được tạo ra cho trình duyệt Điều này giúp cải thiện khả năng tìm kiếm và trải nghiệm người dùng ban đầu
- Static Site Generation (SSG): Next.js hỗ trợ xây dựng các trang tĩnh trước (pre-rendered) với nội dung được tạo ra trong quá trình xây dựng ứng dụng Khi một yêu cầu được gửi đến máy chủ, Next.js sẽ trả về trực tiếp các trang tĩnh đã được tạo sẵn, mà không cần render trên phía máy chủ Điều này giúp tăng tốc độ tải trang và giảm tải cho máy chủ
- Incremental Static Regeneration (ISR): Next.js cho phép cập nhật lại các trang tĩnh đã được tạo ra trước theo một lịch trình định sẵn Khi có yêu cầu mới, Next.js có thể tạo lại các trang tĩnh chỉ trong vài giây và cung cấp nội dung mới nhất cho người dùng
- Hot Module Replacement (HMR): Next.js hỗ trợ HMR để cập nhật các module React mà không cần tải lại trang hoặc mất trạng thái Điều này giúp tăng tốc quá trình phát triển và cải thiện trải nghiệm phát triển của nhà phát triển
2.5.3 Lý do chọn NextJS cho đề tài
- Performance: Next.js cung cấp khả năng SSR và SSG giúp cải thiện hiệu suất và tốc độ tải trang Trang được render trước trên phía máy chủ hoặc tạo trước dưới dạng trang tĩnh, giúp giảm thời gian phản hồi và tăng trải nghiệm người dùng
- SEO-friendly: Với khả năng SSR và SSG, Next.js giúp cải thiện khả năng tìm kiếm của trang web Các trang được tạo ra trước có thể chứa nội dung đầy đủ và đáng tin cậy cho các công cụ tìm kiếm
- Developer Experience: Next.js cung cấp một số tính năng hữu ích như HMR và Fast Refresh giúp tăng tốc quá trình phát triển và giúp nhà phát triển dễ dàng xây dựng ứng dụng React phức tạp
- Scalability: Next.js hỗ trợ việc xây dựng các ứng dụng có khả năng mở rộng và điều chỉnh linh hoạt Với khả năng render trên phía máy chủ và tạo trước các trang tĩnh, Next.js giúp giảm tải cho máy chủ và cho phép ứng dụng xử lý tải trọng cao
- Versatility: Next.js là một framework đa năng và linh hoạt, cho phép lựa chọn giữa SSR, SSG hoặc cả hai tùy thuộc vào yêu cầu cụ thể của ứng dụng Điều này cho phép phát triển viên tận dụng các lợi ích của cả client-side rendering và server-side rendering để đáp ứng nhu cầu của dự án
- Ecosystem and Community: Next.js được hỗ trợ bởi một cộng đồng lớn và sôi động Với sự phát triển nhanh chóng, Next.js đã thu hút được nhiều cống hiến từ cộng đồng và có một hệ sinh thái mạnh mẽ của các thư viện và plugin hỗ trợ
- Integration with React: Next.js là một framework được xây dựng trên nền tảng React, vì vậy nó tận dụng được các lợi ích của React như khả năng tái sử dụng component, quản lý trạng thái thông qua React hooks, và cộng đồng phát triển lớn của React
- Development Efficiency: Next.js cung cấp các tính năng và công cụ để tăng tốc quá trình phát triển ứng dụng như routing tự động, code splitting, và pre- fetching dữ liệu Điều này giúp giảm công sức và thời gian phát triển, đồng thời tạo ra các ứng dụng mạnh mẽ và tối ưu.
Vite + ReactJS
Hình 2.6: React + vite + TypeScript
Vite React là một sự kết hợp giữa công cụ phát triển web nhanh Vite và thư viện JavaScript phổ biến React Vite là một công cụ phát triển web hiệu quả được thiết kế để xây dựng ứng dụng web hiện đại Nó tập trung vào tối ưu hóa thời gian phát triển bằng cách sử dụng các kỹ thuật như tải lười biếng và phân tách mã React là một thư viện JavaScript phổ biến và mạnh mẽ, được sử dụng để xây dựng giao diện người dùng linh hoạt và dễ bảo trì
- Tải nhanh: Vite React tận dụng khả năng tải lười biếng và phân tách mã để cung cấp thời gian khởi động nhanh cho ứng dụng của bạn Khi bạn phát triển, chỉ các module cần thiết cho trang hiện tại sẽ được tải, giúp giảm thời gian chờ và tăng tốc độ phát triển
- ES Modules native: Vite React sử dụng cú pháp import/export của ES Modules một cách tự nhiên Điều này giúp loại bỏ bước bundling trung gian và cho phép bạn sử dụng các module JavaScript một cách trực tiếp trong mã nguồn của mình
- Hỗ trợ React tốt: Vite React được tối ưu hóa để tương thích tốt với React Bạn có thể sử dụng JSX, React Hooks và các tính năng React khác mà không cần cấu hình phức tạp
- Hot Module Replacement (HMR): Vite React hỗ trợ HMR, cho phép bạn cập nhật mã nguồn trong quá trình phát triển mà không cần tải lại trang Điều này giúp bạn nhìn thấy ngay lập tức các thay đổi và tăng tốc quá trình phát triển
- Môi trường phát triển đơn giản: Vite React cung cấp một môi trường phát triển đơn giản và dễ sử dụng Bạn chỉ cần cài đặt Vite và các gói phụ thuộc, và sau đó bạn có thể bắt đầu phát triển ứng dụng React ngay lập tức
- Tăng tốc phát triển: Với khả năng tải nhanh và HMR, Vite React giúp bạn tiết kiệm thời gian phát triển Bạn có thể thấy ngay lập tức các thay đổi và tận dụng khả năng tải lười biếng để giảm thời gian chờ
- Tích hợp tốt với React: Vite React được tối ưu hóa để tương thích tốt với React Bạn có thể sử dụng các tính năng của React mà không gặp sự cản trở và tận dụng các lợi ích của Vite
- Hiệu suất tốt: Vite React sử dụng các kỹ thuật như phân tách mã và tải lười biếng để cải thiện hiệu suất.
Typescript
TypeScript là một ngôn ngữ lập trình mã nguồn mở phát triển bởi Microsoft
Nó là một phiên bản mở rộng của JavaScript, được thiết kế để xây dựng ứng dụng lớn, phức tạp và dễ bảo trì TypeScript cung cấp các tính năng kiểm tra kiểu tĩnh, khắc phục một số hạn chế của JavaScript và giúp phát triển dự án có tính bảo trì cao hơn
- Kiểm tra kiểu tĩnh: Một trong những đặc điểm quan trọng nhất của TypeScript là khả năng kiểm tra kiểu tĩnh TypeScript cho phép xác định kiểu dữ liệu cho biến, tham số, và giá trị trả về của hàm Điều này giúp phát hiện lỗi kiểu và cung cấp cung cấp thông tin hữu ích để phát triển và bảo trì mã nguồn
- Hỗ trợ ES6+: TypeScript hỗ trợ các tính năng của ECMAScript 6 và các phiên bản tiếp theo Bạn có thể sử dụng cú pháp mới như arrow functions, classes, modules, promises và template literals để phát triển ứng dụng hiện đại
- Tính mở rộng: TypeScript cho phép bạn mở rộng các kiểu dữ liệu có sẵn và tạo ra các kiểu dữ liệu tùy chỉnh Điều này giúp bạn mô hình hóa các cấu trúc dữ liệu phức tạp và tạo ra mã nguồn dễ đọc và dễ bảo trì hơn
- Tích hợp công cụ phát triển: TypeScript tích hợp tốt với các công cụ phát triển như trình biên dịch TypeScript (tsc), trình gỡ lỗi và trình thông báo lỗi Điều này giúp bạn phát triển và gỡ lỗi mã nguồn TypeScript một cách hiệu quả
- Hệ sinh thái mạnh mẽ: TypeScript có một hệ sinh thái mạnh mẽ với nhiều thư viện, framework và công cụ phát triển hỗ trợ Các thư viện phổ biến như React, Angular và Node.js đều hỗ trợ TypeScript, giúp bạn xây dựng các ứng dụng web, mobile và backend mạnh mẽ
- Kiểm tra kiểu tĩnh: Kiểm tra kiểu tĩnh giúp phát hiện lỗi ngay từ quá trình phát triển, giảm thiểu lỗi trong quá trình chạy ứng dụng và cung cấp thông tin hữu ích để gỡ lỗi
- Mở rộng JavaScript: TypeScript là một phiên bản mở rộng của JavaScript, cho phép bạn sử dụng các tính năng mới trong ECMAScript và xây dựng ứng dụng hiện đại
- Dễ bảo trì: TypeScript giúp tạo ra mã nguồn dễ đọc hơn và dễ bảo trì hơn nhờ các tính năng như kiểm tra kiểu tĩnh và mô hình hóa dữ liệu
- Hệ sinh thái mạnh mẽ: TypeScript có một hệ sinh thái phong phú với nhiều thư viện, framework và công cụ hỗ trợ Bạn có thể tận dụng các thư viện và framework phổ biến như React, Angular, Vue.js, Nest.js và nhiều hơn nữa để xây dựng các ứng dụng web, mobile và backend
- Cộng đồng và tài liệu: TypeScript có một cộng đồng lớn và nhiệt tình, với nhiều nguồn tài liệu, ví dụ như hướng dẫn, tài liệu chính thức, blog và video học Điều này giúp bạn dễ dàng tìm kiếm thông tin và giải quyết vấn đề trong quá trình phát triển.
PostgreSQL
PostgreSQL là một hệ quản trị cơ sở dữ liệu quan hệ mã nguồn mở và mạnh mẽ Được phát triển từ nguồn gốc của Ingres vào những năm 1980, PostgreSQL đã trở thành một trong những hệ quản trị cơ sở dữ liệu phổ biến nhất trên thế giới
- Mã nguồn mở: PostgreSQL là một phần mềm mã nguồn mở, điều này có nghĩa là có thể xem, sửa đổi và phân phối mã nguồn theo nhu cầu của bạn Điều này mang lại sự linh hoạt và khả năng tùy chỉnh mạnh mẽ cho người dùng
- Quản lý dữ liệu phong phú: PostgreSQL hỗ trợ nhiều kiểu dữ liệu khác nhau, bao gồm cả số nguyên, số thực, chuỗi ký tự, kiểu dữ liệu ngày tháng, kiểu dữ liệu địa lý và nhiều hơn nữa Nó cung cấp các tính năng phong phú như khóa ngoại, giao dịch, chức năng và trình tự, giúp bạn quản lý dữ liệu một cách hiệu quả
- Hiệu suất cao: PostgreSQL được tối ưu hóa để đạt hiệu suất cao, đồng thời hỗ trợ khả năng mở rộng dọc và ngang Nó có thể xử lý các bộ dữ liệu lớn và tải công việc lớn mà vẫn duy trì tốc độ và độ tin cậy
- Bảo mật mạnh mẽ: PostgreSQL cung cấp các tính năng bảo mật mạnh mẽ để bảo vệ dữ liệu của bạn Nó hỗ trợ xác thực người dùng, kiểm soát truy cập dựa trên vai trò và quyền hạn, mã hóa dữ liệu và các tính năng khác để đảm bảo an ninh cao
- Cộng đồng lớn và hỗ trợ: PostgreSQL có một cộng đồng rộng lớn với hàng ngàn người dùng và nhà phát triển trên toàn thế giới Cộng đồng này cung cấp tài liệu phong phú, diễn đàn thảo luận, tài liệu hướng dẫn và hỗ trợ cho người dùng Bạn có thể tìm thấy giải pháp cho các vấn đề cụ thể hoặc nhận sự hỗ trợ từ cộng đồng rất dễ dàng
- Độ tin cậy và ổn định: PostgreSQL đã được thử nghiệm và sử dụng rộng rãi trong nhiều ứng dụng lớn và quy mô doanh nghiệp Nó đã chứng tỏ được tính ổn định và độ tin cậy cao trong việc xử lý và quản lý dữ liệu
- Khả năng mở rộng: PostgreSQL cho phép mở rộng dọc và ngang, cho phép bạn tăng cường khả năng xử lý và lưu trữ dữ liệu theo nhu cầu của bạn Bạn có thể thêm các máy chủ, phân chia dữ liệu và tối ưu hóa hiệu suất mà không gặp nhiều rào cản
- Bảo mật và tuân thủ chuẩn: PostgreSQL tuân thủ các chuẩn bảo mật và chuẩn SQL quốc tế, như ANSI SQL và ACID (Atomicity, Consistency, Isolation, Durability) Điều này đảm bảo rằng dữ liệu của bạn được bảo vệ và tuân thủ các quy tắc quan trọng về đồng nhất và bảo mật
- Hỗ trợ đa nền tảng: PostgreSQL có sẵn trên nhiều nền tảng, bao gồm Windows, Linux, macOS và các hệ điều hành khác Điều này cho phép bạn triển khai PostgreSQL trên hệ thống mà bạn đã sử dụng
- Mô-đun mở rộng và tích hợp: PostgreSQL có một hệ sinh thái mô-đun mở rộng phong phú, cho phép bạn tăng cường tính năng của nó thông qua các mô- đun bổ sung Bạn có thể sử dụng các mô-đun để thực hiện các tác vụ như truy vấn không gian địa lý, tìm kiếm văn bản đầy đủ, phân tích dữ liệu và nhiều hơn nữa.
ASP.NET Core 7 API
Hình 2.8: Logo ASP.NET 7
ASP.NET Core 7 API là một phần của framework mã nguồn mở ASP.NET Core, được sử dụng để xây dựng các dịch vụ và ứng dụng web API với NET Với ASP.NET Core 7 API, bạn có thể tạo ra các dịch vụ web API hiệu quả, linh hoạt và có khả năng mở rộng trên nhiều nền tảng, bao gồm Windows, Linux và macOS
- Hiệu suất tối ưu: ASP.NET Core 7 API cung cấp các cải tiến về hiệu suất, giúp tăng tốc độ xử lý và tải trang của ứng dụng API Nó sử dụng các kỹ thuật tối ưu hóa để đảm bảo khả năng phản hồi nhanh chóng và xử lý đồng thời nhiều yêu cầu từ các client
- Hỗ trợ RESTful: ASP.NET Core 7 API hỗ trợ việc phát triển các API theo kiến trúc RESTful Bạn có thể dễ dàng tạo ra các endpoint cho các phương thức HTTP như GET, POST, PUT và DELETE để thực hiện các hoạt động CRUD trên dữ liệu
- Kiến trúc dịch vụ độc lập: Với ASP.NET Core 7 API, bạn có thể xây dựng các dịch vụ API độc lập, có khả năng triển khai riêng biệt trên các container Docker Điều này cho phép bạn tách biệt và mở rộng các thành phần của ứng dụng một cách linh hoạt và dễ dàng
- Cộng đồng và mã nguồn mở: ASP.NET Core 7 API là một phần của cộng đồng mã nguồn mở sôi động và được hỗ trợ bởi Microsoft Cộng đồng đóng góp vào việc phát triển và cung cấp các thư viện, công cụ và tài liệu hữu ích Bạn có thể tìm kiếm sự giúp đỡ và chia sẻ kinh nghiệm với cộng đồng thông qua các diễn đàn như Stack Overflow và Microsoft Q&A
- Độ tin cậy và hỗ trợ từ Microsoft: ASP.NET Core là một sản phẩm của Microsoft, một công ty công nghệ hàng đầu thế giới Việc được phát triển và hỗ trợ bởi Microsoft đảm bảo rằng ASP.NET Core 7 API sẽ được duy trì và cập nhật thường xuyên, bao gồm các bản vá lỗi và cải tiến tính năng mới
- Hiệu suất cao: ASP.NET Core 7 API được thiết kế để có hiệu suất cao Nó sử dụng mô hình xử lý không đồng bộ và sự tối ưu hóa để đảm bảo khả năng phản hồi nhanh chóng và xử lý đồng thời nhiều yêu cầu từ các client Điều này làm cho ứng dụng của bạn có thể xử lý lượng lớn yêu cầu một cách hiệu quả
- Hỗ trợ RESTful và phát triển API linh hoạt: ASP.NET Core 7 API hỗ trợ việc phát triển các API theo kiến trúc RESTful, giúp bạn xây dựng các dịch vụ API dễ dàng và có cấu trúc Nó cung cấp các tính năng như routing linh hoạt, phân tích và tạo JSON/XML, và hỗ trợ các phương thức HTTP như GET, POST, PUT và DELETE
- Bảo mật mạnh mẽ: ASP.NET Core 7 API cung cấp các tính năng bảo mật tích hợp sẵn, bao gồm xác thực người dùng, phân quyền và bảo vệ chống tấn công
Nó hỗ trợ các giao thức xác thực như OAuth2 và JWT, cho phép bạn xác thực và ủy quyền người dùng một cách an toàn
- Đa nền tảng: ASP.NET Core 7 API cho phép bạn phát triển và triển khai trên nhiều nền tảng khác nhau, bao gồm Windows, Linux và macOS Điều này cho phép bạn đáp ứng nhanh chóng với yêu cầu của người dùng trên các môi trường khác nhau và tận dụng các lợi ích của việc triển khai trên các container như Docker
- Cộng đồng và mã nguồn mở: ASP.NET Core 7 API là một phần của cộng đồng mã nguồn mở sôi động Điều này có nghĩa là bạn sẽ có sự hỗ trợ từ cộng đồng lập trình viên khắp nơi trên thế giới thông qua các diễn đàn, trang web và tài liệu Bạn có thể tìm kiếm giải pháp cho các vấn đề cụ thể, chia sẻ kinh nghiệm và học hỏi từ những người khác sử dụng ASP.NET Core.
VnPay Sandbox
VNPAY Sandbox là một môi trường thử nghiệm cho phép các nhà phát triển ứng dụng tích hợp và kiểm tra tính năng của VNPAY, một hệ thống thanh toán điện tử hàng đầu tại Việt Nam Được giới thiệu vào năm 2018, VNPAY Sandbox đã trở thành công cụ quan trọng trong quá trình phát triển và kiểm tra ứng dụng thanh toán của các nhà phát triển
- Môi trường thử nghiệm an toàn: VNPAY Sandbox cung cấp một môi trường thử nghiệm an toàn và đáng tin cậy để các nhà phát triển kiểm tra tính năng và tích hợp thanh toán của VNPAY mà không cần lo lắng về việc ảnh hưởng đến hệ thống thực tế Điều này giúp giảm thiểu rủi ro và tăng tính đáng tin cậy của các ứng dụng thanh toán được phát triển
- Tích hợp dễ dàng: VNPAY Sandbox cung cấp tài liệu và hướng dẫn chi tiết về cách tích hợp thanh toán vào ứng dụng Các nhà phát triển có thể sử dụng API (Application Programming Interface) của VNPAY để tương tác với hệ thống thanh toán và kiểm tra tính năng như thanh toán trực tuyến, thanh toán hóa đơn, chuyển khoản, và nhiều tính năng khác
- Đáng tin cậy và an toàn: VNPAY là một trong những hệ thống thanh toán hàng đầu tại Việt Nam với nhiều năm kinh nghiệm trong lĩnh vực thanh toán điện tử VNPAY Sandbox được xây dựng dựa trên cơ sở hạ tầng đáng tin cậy của VNPAY, đảm bảo tính an toàn và bảo mật cho các giao dịch thanh toán
- Dễ dàng tích hợp: VNPAY Sandbox cung cấp tài liệu và hướng dẫn chi tiết về cách tích hợp thanh toán vào ứng dụng Việc tích hợp được thực hiện một cách dễ dàng và nhanh chóng, giúp các nhà phát triển tiết kiệm thời gian và công sức trong quá trình phát triển ứng dụng thanh toán
Hình 2.10: Các bước thược hiện thanh toán online bằng VNPAY
Hệ thống gợi ý với lọc cộng tác
Hệ thống hợp ý bằng lọc cộng tác (Collaborative Filtering) là một phương pháp phân tích dữ liệu được sử dụng phổ biến trong lĩnh vực học máy và khai thác dữ liệu
Nó được sử dụng để dự đoán và tạo ra các gợi ý cá nhân dựa trên thông tin từ những người dùng tương tự Hệ thống này xem xét lịch sử hoạt động của các người dùng để tìm kiếm sự tương đồng trong hành vi và sở thích, từ đó đề xuất những mục tiêu mà người dùng có thể quan tâm
Hình 2.11: Mô tả hệ thống gợi ý Collaborative Filtering
- Không yêu cầu thông tin chi tiết: Không cần biết về chi tiết và đặc trưng của mục tiêu hoặc người dùng Hệ thống chỉ cần phân tích mối quan hệ giữa người dùng và những mục tiêu để tạo ra gợi ý
- Độc lập với nội dung: Không cần quan tâm đến nội dung của các mục tiêu
Hệ thống chỉ dựa vào thông tin về sự tương tác hoặc đánh giá của người dùng với các mục tiêu
- Mở rộng và linh hoạt: Hệ thống hợp ý bằng lọc cộng tác có thể được áp dụng cho nhiều lĩnh vực và tài nguyên khác nhau, bao gồm các sản phẩm, bộ phim, âm nhạc, tin tức, và nhiều hơn nữa
- Vấn đề lạm dụng thông tin phổ biến (Popularity Bias): Hệ thống hợp ý bằng lọc cộng tác có xu hướng gợi ý những mục tiêu phổ biến và phổ biến hơn những mục tiêu ít được tương tác Điều này có thể làm giảm tính đa dạng và khám phá của gợi ý, vì người dùng có thể bị hạn chế trong việc khám phá những mục tiêu mới và độc đáo
- Vấn đề hiệu suất với số lượng lớn người dùng và mục tiêu (Scalability Issues): Khi số lượng người dùng và mục tiêu tăng lên, việc tính toán sự tương đồng và tạo ra các gợi ý có thể trở nên phức tạp và tốn nhiều thời gian Điều này có thể gây ra vấn đề về hiệu suất và làm giảm trải nghiệm người dùng
- Vấn đề xử lý dữ liệu thưa (Sparsity Issue): Ma trận đánh giá trong hệ thống hợp ý bằng lọc cộng tác thường rất thưa, có nghĩa là có nhiều giá trị đánh giá bị thiếu Điều này có thể làm cho việc tính toán sự tương đồng và tạo ra các gợi ý trở nên khó khăn và không chính xác Để giải quyết vấn đề này, cần áp dụng các kỹ thuật xử lý dữ liệu thưa như lấp đầy giá trị thiếu hoặc áp dụng phương pháp lọc cộng tác kết hợp với các phương pháp khác như lọc dựa trên nội dung
2.11.4 Các thuật toán được sử dụng
- Lọc cộng tác dựa trên người dùng (User-based Collaborative Filtering): Thuật toán này dựa trên giả định rằng những người dùng có sự tương đồng trong hành vi và sở thích sẽ có xu hướng đánh giá những mục tiêu tương tự theo cách tương tự Thuật toán này xác định sự tương đồng giữa các người dùng và sử dụng thông tin này để tạo ra các gợi ý dựa trên những gì những người dùng tương tự đã đánh giá cao
- Lọc cộng tác dựa trên mục tiêu (Item-based Collaborative Filtering): Thuật toán này dựa trên giả định rằng những mục tiêu có người dùng tương tự sẽ có khả năng được đánh giá cao bởi người dùng hiện tại Thuật toán này xác định sự tương đồng giữa các mục tiêu và sử dụng thông tin này để tạo ra các gợi ý dựa trên những mục tiêu tương tự
Cách thức hoạt động của hệ thống hợp ý bằng lọc cộng tác bao gồm các bước sau:
• Thu thập dữ liệu: Thu thập thông tin về hoạt động và sở thích của người dùng, baocác đánh giá hoặc sự tương tác với các mục tiêu
• Xây dựng ma trận đánh giá: Xây dựng ma trận đánh giá, trong đó hàng đại diện cho người dùng và cột đại diện cho các mục tiêu Giá trị trong ma trận cho biết mức đánh giá hoặc sự tương tác của người dùng với mục tiêu tương ứng
• Tính toán sự tương đồng: Dựa trên ma trận đánh giá, tính toán sự tương đồng giữa các người dùng hoặc các mục tiêu Có nhiều phương pháp để đo lường sự tương đồng, bao gồm độ tương tự cosin và hệ số tương quan
• Tạo ra các gợi ý: Dựa trên sự tương đồng đã tính toán, tạo ra các gợi ý cho người dùng bằng cách lựa chọn những mục tiêu mà người dùng chưa tương tác mà có khả năng phù hợp với sở thích của họ
Hình 2.12: Danh sách các snar phẩm được gợi ý sau khi được train
PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
Phân tích yêu cầu hệ thống
- Đăng ký, đăng nhập bằng tài khoản
- Khách hàng có thể tìm kiếm sản phẩm phù hợp và nhanh chóng
- Khách hàng có thể thêm sản phẩm vào giỏ hàng và tạo đơn đặt hàng
- Khách hàng có thể thanh toán qua vnpay
- Khách hàng có thể xem tình trạng đơn hàng
- Khách hàng có thể thêm sản phẩm vào danh sách yêu thích
- Admin có thể quản lý sản phẩm
- Admin có thể quản lý danh mục sản phẩm
- Admin có thể quản lý đơn nhập hàng
- Admin có thể quản lý đơn bán hàng
- Admin có thể quản lý tài khoản khách hàng
- Admin có thể xem báo cáo thông kê thu chi
3.1.2 Sơ đồ phân rã chức năng
Hình 3.1: Sơ đồ phân rã chức năng
3.1.3 Phân tích yêu cầu phi chức năng Ứng dụng sử dụng tiếng Việt, hoạt động ổn định trên nền tảng website Để thu hút được người dùng hứng thú sử dụng, các thao tác trên ứng dụng phải thật đơn giản Giao diện thân thiện, giúp khách hang và người quản lý nhận thức được giá trị nhận lại khi sử dụng hệ thống
3.1.4 Mô hình hóa các yêu cầu
Bảng 3.1: Danh sách các actors
STT Tên Actor Ý nghĩa/Ghi chú
1 Khách hàng Người truy cập trang web để mua hàng
Quản lý danh mục, đơn hàng, xem thống kê thu chi
3.1.4.2 Danh sách các Use case
Bảng 3.2: Danh sách các Use case
STT Actor Tên Use-case Chức năng
Admin Đăng nhập Cho phép admin, khách hàng đăng nhập vào trang web UC_2 Khách hàng Xem sản phẩm Xem, thêm sản phẩm vào giỏ hàng
UC_3 Khách hàng Tìm kiếm sản phẩm
Tìm kiếm theo ký tự, theo thương hiệu, tag, danh mục sản phẩm
UC_4 Khách hàng Quản lý giỏ hàng Xem, cập nhật, xóa
UC_5 Khách hàng Lọc sản phẩm Lọc theo danh mục, tên, màu, size, giá
UC_6 Admin Quản lý danh mục Thêm, cập nhật, xóa
UC_7 Admin Quản lý sản phẩm Xem, sửa, xóa đơn nhập
UC_8 Admin Quản lý đơn nhập hàng Thêm, sửa, xóa đơn nhập sản phẩm
UC_9 Admin Quản lý đơn bán hàng
Xem, xóa, chỉnh sửa trạng thái đơn bán hàng
UC_10 Admin Báo cáo, thông kê Xem thống kê thu chi của cửa hàng
3.1.4.3 Sơ đồ use case tổng
Hình 3.2: Sơ đồ Use case tổng
Hình 3.3: Use case đăng nhập a Đặc tả Use case Đăng nhập
Bảng 3.3: Đặc tả Use case đăng nhập
Tên use case Đăng nhập
Mục đích Đăng nhập vào trang web Điều kiện trước
Tài khoản gmail đã tồn tại Điều kiện sau
Người dùng sử dụng chức năng của tài khoản
B1: Truy cập vào trang web B2: Chọn “login”
B4: Hệ thống hiển thị form dăng nhập B5: Nhập thông đăng nhập tài khoản gmail B6: Hệ thống kiểm tra thông tin tài khoản và cập nhật vào database B7: Tùy vào tài khoản là gmail của khách hàng hay admin hệ thống sẽ hiển thị giao diện tương ứng (trang bán hàng hoặc trang quản trị) Ngoại lệ Nhập thông tin tài khoản gmail không chính xác, hệ thống thông báo
“sai tài khoản emai hoặc mật khẩu” b Đặc tả use case Đăng xuất
Bảng 3.4: Đặc tả Use case Đăng xuất
Tên use case Đăng xuất
Mục đích Đăng xuất tài khoản khỏi trang web Điều kiện trước
Người dùng đã đăng nhập vào trang web Điều kiện sau Đăng xuất thành công và trang web trở về trang home
B2: Hệ thống đăng xuất tài khoản và trang web trở về trang home với trạng thái không được login
Hình 3.4: Use case xem sản phẩm a Đặc tả Use case Xem sản phẩm
Bảng 3.5: Đặc tả Use case Xem sản phẩm
Tên use case Xem sản phẩm
Khách hàng Mục đích Xem thông tin chi tiết của một sản phẩm Điều kiện trước
Khách hàng truy cập vào trang web Điều kiện sau Trang web hiển thị trang xem chi tiết sản phẩm
B1: Khách hàng click vào một sản phẩm bất kỳ hiển thị trên danh sách các sản phẩm
B2: Hệ thống sẽ chuyển đến page hiển thị hình ảnh cũng như thông tin chi tiết của sản phẩm
Ngoại lệ b Đặc tả Use case Thêm sản phẩm vào giỏ hàng
Bảng 3.6: Đặc tả Use case thêm sản phẩm vào giỏ hàng
Tên use case Thêm sản phẩm vào giỏ hàng
Tác nhân sử dụng Khách hàng
Mục đích Khách hàng thêm sản phẩm muốn mua vào giỏ hàng Điều kiện trước Khách hàng đang ở page xem chi tiết một sản phẩm Điều kiện sau Sản phẩm được thêm vào giỏ hàng
Diễn biến chính B1: Khách hàng chọn kích thước mà màu sản phẩm
B2: Chọn thêm vào giỏ hàng B3: Hệ thống xác nhận ID của sản phẩm và thêm vảo giỏ hàng B4: Hệ thống tự động tăng số sản phẩm trên icon giỏ hàng Ngoại lệ B1.1: Sản phẩm hết hàng và hiển thị thông báo “Hết hàng”
3.1.5.3 UC_3 “Tìm kiếm sản phẩm”
Hình 3.5: Use case Tìm kiếm sản phẩm a Đặc tả Use case Tìm kiếm sản phẩm
Bảng 3.7: Đặc tả Use case tìm kiếm sản phẩm
Mục đích Hiển thị danh sách sản phẩm phù hợp với thông tin tìm kiếm của khách hàng Điều kiện trước Điều kiện sau
Hiển thị danh sách các sản phẩm phù hợp với nội dung tìm kiếm
B1: Khách hàng click “icon tìm kiếm sản phẩm”
B2: Hệ thống sẽ lấy thông tin đầu vào và kiểm trả, hiển thị thông tin được tìm thấy
Ngoại lệ B2.1: Hệ thống không tìm thấy sản phẩm phù hợp vói thông tin tìm kiếm của khách hàng và hiện hiện thì “Không có kết quả phù hợp!”
3.1.5.4 UC_4 “Quản lý giỏ hàng”
Hình 3.6: Use case quản lý giỏ hàng a Đặc tả Use Case Quản lý giỏ hàng
Bảng 3.8: Đặc tả Use case quản lý giỏ hàng
Tên use case Quản lý giỏ hàng
Mục đích Hiển thị danh sách sản phẩm phù hợp với thông tin tìm kiếm của khách hàng Điều kiện trước Khách hàng truy cập vào trang web Điều kiện sau Hiển thị popup giỏ hàng
Diễn biến chính B1: Khách hàng click icon “giỏ hàng”
B2: Hệ thống sẽ thêm và lưu sản phẩm vào giỏ hàng
Ngoại lệ b Đặc tả Use case Thêm bớt số lượng sản phẩm
Bảng 3.9: Đặc tả Use case Thêm bớt số lượng sản phẩm
Thêm bớt số lượng sản phẩm
Mục đích Điều chỉnh số lượng từng sản phẩm có trong giỏ hàng Điều kiện trước
Khách hàng đang mở giỏ hàng, giỏ hàng có sản phẩm được thêm từ trước Điều kiện sau
Hiển thị số lượng sản phẩm sau khi được thêm bớt
B1: Khách hàng click vào button “+” hoặc “-“ hoặc nhập số lượng sản phẩm muốn vào input của sản phẩm muốn điều chỉnh
B2: Hệ thống sẽ hiển thị số lượng sản phẩm sau khi được điều chỉnh Ngoại lệ c Xóa sản phẩm
Bảng 3.10: Đặc tả Use case xoá sản phẩm
Tên use case Xóa sản phẩm
Mục đích Xóa sản phẩm khỏi giỏ hàng Điều kiện trước Khách hàng đang mở giỏ hàng, giỏ hàng có sản phẩm được thêm từ trước Điều kiện sau Sản phẩm được xóa khỏi giỏ hàng
Diễn biến chính B1: Khách hàng click icon “X” ở cuối mỗi item sản phẩm
B2: Hệ thống lấy id sản phẩm và tiến hành xóa sản phẩm khỏi giỏ hàng
Ngoại lệ d Đặc tả Use case Đặt hàng
Bảng 3.11: Đặc tả Use case đặt hàng
Tên use case Đặt hàng
Mục đích Đặt hàng sản phẩm có trong giỏ hàng Điều kiện trước
Khách hàng đang mở giỏ hàng Điều kiện sau Đơn hàng được tạo và page chuyển đến trang thông đặt hàng thành công
B1: Khách hàng click “checkout” ở giỏ hàng B2: Trang web chuyển đến trang checkout hiển thị các thông tin các sản phẩm muốn đặt hàng
B3: Khách hàng nhập các thông cần thiết B4: Khách hàng click button “Thanh toán” để tiến hành đặt sản phẩm
B5: Hệ thống lấy id các sản phẩm được đặt và thông tin khách hàng nhập vào, tạo đơn hàng
Ngoại lệ B1.1: Không có sản phẩm trong giỏ hàng nên button “thêm” bị disable B4.1: “Khách hàng chưa nhập đủ các thông tin cần thiết và trang web sẽ focus vào phần input bị nhập thiếu” e Đặc tả Use case Thanh toán
Bảng 3.12: Đặc tả Use case Thanh toán
Mục đích Đặt hàng sản phẩm có trong giỏ hàng Điều kiện trước
Khách hàng đang ở trang thanh toán Điều kiện sau Đơn hàng được tạo và page chuyển đến trang thông báo tình trạng thanh toán
B1: Khách hàng lựa chọn phương thức thanh toán (COD hoặc VnPay)
B2: Khách hàng click đặt hang B3: Khách hàng click “đặt hàng “ B5: Hệ thống lấy id các sản phẩm được đặt và thông tin khách hàng nhập vào, tạo đơn hàng và lưu đơn hàng vào database
B6: Hệ thống sẽ chuyển hướng đến các bước thanh toán tiếp theo tuỳ vào phương thức thanh toán mà khách hàng chọn
Ngoại lệ B4.1: “Khách hàng chưa chọn phương thức thanh toán hệ thông báo lỗi” f Đặc tả Thanh toán online
Bảng 3.13: Đặc tả Use case thanh toán online
Mục đích Thanh toán online cho đơn hàng Điều kiện trước
Khách hàng đã chọn phương thức thanh toán online Điều kiện sau Đơn hàng được tạo và page chuyển đến trang thông báo tình trạng thanh toán
B1: Hệ thống chuyển đến trang thanh toán của VnPay B2: Khách hàng lựa chọn phương thức thanh toán B3: Khách hàng nhập thông tin thanh toán theo yêu cầu B4: Khánh hàng tiến hành thanh toán, dữ liệu sẽ được cập nhật vào database
B4: Sau khi tiến hành thanh toán thành công khách hàng sẽ được chuyển hướng về trang thông báo tình trạng thanh toán của cửa hàng Ngoại lệ B4.1: “Khách hàng huỷ giao dịch, đơn hàng bị huỷ” g Đặc tả Use case Thanh toán khi nhận hàng
Bảng 3.14: Đặc tả Use case thanh toán khi nhận hàng
Tên use case Thanh toán khi nhận hàng
Khách hàng Mục đích Thanh toán online cho đơn hàng Điều kiện trước
Khách hàng đã chọn phương thức thanh toán khi nhận hàng Điều kiện sau Đơn hàng được tạo và page chuyển đến trang thông báo tình trạng thanh toán
B1: Đơn hàng được tạo và khách hàng sẽ chuyển hướng đến trang thông báo tình trạng thanh toán là pending
Hình 3.7: Use case lọc sản phẩm a Đặc tả Use case Lọc sản phẩm
Bảng 3.15: Đặc tả Use case Lọc sản phẩm
Tên use case Lọc sản phẩm
Khách hàng Mục đích Lọc sản phẩm Điều kiện trước
Khách hàng đang ở trang xem danh sách sản phẩm Điều kiện sau Hệ thống hiển thị các sản phẩm khớp với nội dung được lọc
B1: Khách hàng chọn các thuộc tính để lọc( theo danh mục, thoe giá, theo màu, theo kích thước)
B2: Hệ thống hiển thị các các phẩm phù hợp với nội dung lọc Ngoại lệ
3.1.5.6 UC_6 “Quản lý danh mục”
Hình 3.8: Đặc tả Use case quản lý danh mục a Đặc tả Use case Thêm danh mục
Bảng 3.16: Đặc tả Use case Thêm danh mục
Tên use case Thêm danh mục
Mục đích Thêm danh mục mới Điều kiện trước
Admin đăng nhập vào admin page Điều kiện sau Danh mục mới được tạo và lưu vào database
B1: admin click vào “category” trong trang B2: hệ thống chuyển đến màn hình quản lý danh mục B3: admin click vào button “New category”
B4: Hệ thống chuyển đến trang thêm danh mục mới B5: admin nhập các thông tin cần thiết
B7: Hệ thống lưu danh mục mới vào database và trở về trang quản lý danh mục Ngoại lệ B6.1: admin nhập thiếu thông tin, page sẽ focus vào ô thông tin nhập thiếu b Đặc tả Use case Chỉnh sửa danh mục
Bảng 3.17: Đặc tả Use case chỉnh sửa danh mục
Admin Mục đích Chỉnh sửa danh mục Điều kiện trước
Admin đang ở trang quản lý danh mục và danh mục được chỉnh sửa có trong danh sách Điều kiện sau
Thanh đổi thông tin danh mục thành công
B1: Admin click vào icon ba chấm ở cuối dòng danh mục cần chỉnh sửa
B3: Hệ thống chuyển trang chỉnh sửa danh mục B4: Admin thực hiện chỉnh chỉnh sửa tên danh mục B5: Click button “Save”
B6: Hệ thống cập nhật thông tin danh mục vào database và quay về trang quản lý danh mục với thông tin danh mục mới được cập nhật Ngoại lệ B5.1: Tên danh mục bị để trống, page sẽ focus vào input trống để người dùng nhập thông tin c Xóa danh mục
Bảng 3.18: Đặc tả Use case xoá danh mục
Tên use case Xóa danh mục
Mục đích Xóa danh mục Điều kiện trước
Admin đang ở trang quản lý danh mục và danh mục bị xóa có trong danh sách Điều kiện sau Danh mục bị xóa không còn hiển thị trong danh sách các danh mục hiện có Diễn biến chính
B1: Admin click vào icon ba chấm ở cuối dòng danh mục cần chỉnh sửa
B3: Popup hiển thị form “Are you sure to delete this item?”
B6: Hệ thống thực hiện xóa danh mục khỏi database và quay trở về trang quản lý danh mục Ngoại lệ d Đặc tả Use case Tìm kiếm danh mục
Bảng 3.19: Đặc tả Use case Tìm kiếm danh mục
Mục đích Tìm kiếm danh mục theo ký tự nhập vào Điều kiện trước
Admin đang ở trang quản lý danh mục Điều kiện sau
Hiển thị danh sách các danh mục phù hợp với thông tin admin nhập vào
B1: Admin focus và input search nằm phía trên table danh sách các danh , và nhập thông tin cần tìm kiếm, như tên của danh mục, số thứ tự danh mục B2: Hệ thống thực hiện tìm kiếm danh mục phù hợp với text được nhập vào
B3: Hệ thống hiển thị danh sách các danh mục phù hợp với thông tin nhập vào tìm kiếm
Ngoại lệ B1.1: Hệ thống không tìm kiếm được danh mục khớp với thông tin nhập vào và table hiển thị “No item found”
3.1.5.7 UC_7 “Quản lý sản phẩm”
Hình 3.9: Use case quản lý sản phẩm a Đặc tả Use case Xem sản phẩm
Bảng 3.20: Đặc tả Use case xem sản phẩm
Tên use case Xem sản phẩm
Mục đích Xem chi tiết một sản phẩm Điều kiện trước
Admin đăng nhập vào admin page Điều kiện sau
Hệ thống chuyển đến trang xem chi tiết sản phẩm và hiển thị chính xác thông tin chi tiết của đơn hàng vừa chọn
B1: admin click vào “products” trong trang B2: hệ thống chuyển đến màn hình quản lý sản phẩm
B3: admin click vào icon ba chấm ở cuối dòng sản phẩm muốn xem B4: click “view”
B5: Hệ thống chuyển đến trang xem chi tiết sản phẩm và hiển thị chi tiết thông tin của sản phẩm vừa chọn
Ngoại lệ b Đặc tả Use case Thêm sản phẩm
Bảng 3.21: Đặc tả Use case xem sản phẩm
Mục đích Thêm sản phẩm mới Điều kiện trước
Admin đăng nhập vào admin page Điều kiện sau
Sản phẩm mới được tạo và lưu vào database
B1: admin click vào “products” trong trang B2: hệ thống chuyển đến màn hình quản lý sản phẩm B3: admin click vào button “New product”
B4: Hệ thống chuyển đến trang thêm sản phẩm mới B5: admin nhập các thông tin và chọn ảnh cần thiết cho sản phẩm mới
B7: Hệ thống xử lý và lưu sản phẩm mới vào database B8: Hệ thống quay về trang quản lý sản phẩm và hiện bảng dư liệu các sản phẩm bao gồm cả sản phẩm mới được thêm
Ngoại lệ B6.1: admin nhập thiếu thông tin, page sẽ focus vào ô thông tin nhập thiếu c Đặc tả Use case Chỉnh sửa sản phẩm
Bảng 3.22: Đặc tả Use case Chỉnh sửa sản phẩm
Mục đích Chỉnh sửa sản phẩm Điều kiện trước
Admin đang ở trang quản lý sản phẩm và sản phẩm được chỉnh sửa có trong danh sách Điều kiện sau
Thanh đổi thông tin sản phẩm thành công
B1: Admin click vào icon ba chấm ở cuối dòng sản phẩm cần chỉnh sửa
B3: Hệ thống chuyển trang chỉnh sửa sản phẩm B4: Admin thực hiện chỉnh sửa các thông tin của sản phẩm (tên, thương hiệu, ảnh, …)
Thiết kế hệ thống
3.2.1.1 Lược đồ hoạt động của hệ thống thanh toán online
Hình 3.13: Lược đồ hoạt động của hệ thống thanh toán
3.2.1.2 Sơ đồ tuần tự của hệ thống thanh toán online
Hình 3.14: Sơ đồ tuần tự của hệ thống thanh toán online
3.2.1.3 Sơ đồ tuần tự thao tác thêm sản phẩm
Hình 3.15: Sơ đồ tuần tự thao tác thêm sản phẩm
3.2.2 Thiết kế cơ sở dữ liệu
3.2.2.1 Lược đồ cơ sở dữ liệu
Hình 3.16: Lược đồ cơ sở dữ liệu
3.2.2.2 Mô tả các bảng dữ liệu
Bảng dữ liệu users: Lưu thông tin về tài khoản người dùng
Bảng 3.34: Bảng dữ liệu users
STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Ý nghĩa
1 id int Là duy nhất Id của người dùng
2 email string Email đăng ký của người dùng
3 password String Mật khẩu đã được mã hoá của tài khoản người dùng
4 phoneNumber String Số điện thoại người dùng
5 fullName String Họ và tên người dùng
6 avatar String Ảnh đại diện người dùng
7 address Date Địa chỉ người dung
8 roleId int Foreign Key Foreign key role của người dùng
Bảng dữ liệu role_permisstions: Bảng phụ để truy vấn role tương ứng với permission nào
Bảng 3.35: Bảng dữ liệu role_permissstions
STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Ý nghĩa
1 id int Là duy nhất Id của bảng
2 Role_Id int Foreign key Id của role
3 Permission_Id int foreign key Id của permission
Bảng dữ liệu role: Bảng lưu role người dùng
Bảng 3.36: Bảng dữ liệu role
STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Ý nghĩa
1 id int Là duy nhất Id của role
2 Name int Foreign key Tên của role
Bảng dữ liệu permisions: Bảng lưu quyền hạn của người dùng
Bảng 3.37: Bảng dữ liệu permisstons
STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Ý nghĩa
1 id int Là duy nhất Id của quyền hạn
2 Name int Foreign key Tên quyền hạn
3 Permission_Id int foreign key Id của permission
Bảng dữ liệu favorite: Bảng lưu kết thông tin sản phẩm yêu thích của người dùng
Bảng 3.38: Bảng dữ liệu favorite
STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Ý nghĩa
1 id int Là duy nhất Id của bảng
2 Product_Id int Foreign key Id của sản phẩm
3 User_Id int foreign key Id của user
Bảng dữ liệu product: Lưu thông tin về sản phẩm
Bảng 3.39: Bảng dữ liệu product
STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Ý nghĩa
1 id int Là duy nhất Id của sản phẩm
2 name String Tên sản phẩm
3 description String Mô tả sản phẩm
4 price Long int Giá của sản phẩm
5 images Array[String] Lưu Url các ảnh mô tả sản phẩm
Bảng dữ liệu category: Lưu thông tin về danh mục
Bảng 3.40: Bảng dữ liệu category
STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Ý nghĩa
1 id Int Là duy nhất Id của danh mục
2 name String Tên của danh mục
Bảng dữ liệu product_category: Bảng phụ để truy vấn product thuộc về category nào
Bảng 3.41: Bảng dữ liệu product_category
STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Ý nghĩa
1 id int Là duy nhất Id của bảng
2 product_Id String foreign key Id của sản phẩm
3 category_Id String foreign key Id của danh mục
Bảng dữ liệu product_detail: Lưu thông tin về màu sản phẩm
Bảng 3.42: Bảng dữ liệu product_detail
STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Ý nghĩa
1 id int Là duy nhất Id của loại sản phẩm
2 Product_id int foreign key Tên của sản phẩm
3 color String Mã màu của sản phẩm
4 price Long int Giá của sản phẩm
Bảng dữ liệu Size: Lưu thông tin về kích thước của sản phẩm
Bảng 3.43: Bảng dữ liệu Size
STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Ý nghĩa
1 id int Là duy nhất Id của kích thước
2 Product_detail_id int foreign key Id của màu sản phẩm mà kích thước này thộc về
Bảng dữ liệu import_order: Lưu thông tin đơn nhập hàng
Bảng 3.44: Bảng dữ liệu import_order
STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Ý nghĩa
1 _id UUID Là duy nhất Id của đơn
2 produc_id ObjectId foreign key Id của sản phẩm được nhập
3 Total_amount Number Tổng đơn
Bảng dữ liệu Import_order_detail: Chi tiết đơn nhập
Bảng 3.45: Bảng dữ liệu Import_order_Detail
STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Ý nghĩa
1 id int Là duy nhất Id của chi tiết đơn
2 Size_id int foreign key Id của kích thước sản phẩm
3 Import_Order_Id int foreign key Id của đơn nhập hàng
4 Unit_price Long int Đơn giá nhập
6 Quantity int Số lượng nhập
Bảng dữ liệu Cart: Lưu thông tin giỏ hàng
Bảng 3.46: Bảng dữ liệu Cart
STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Ý nghĩa
1 id int Là duy nhất Id của giỏ hàng
2 User_id int foreign key Id của người dùng
6 Quantity int Số lượng nhập
Bảng dữ liệu Cart_detail: Lưu thông tin sản phẩm trong giỏ hàng
Bảng 3.47: Bảng dữ liệu Cart_detail
STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Ý nghĩa
1 id int Là duy nhất Id của bảng
2 Size_id int Id kích thước của sản phẩm
Bảng dữ liệu Order_detail: Lưu thông tin chi tiết đơn đặt hàng
Bảng 3.48: Bảng dữ liệu Order_detail
STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Ý nghĩa
1 Order_id int Là duy nhất Id của bảng
2 Size_id int foreign key Id kích thước của sản phẩm
3 Quantity int Số lượng sản phẩm
Bảng dữ liệu Order: Lưu thông tin đơn đặt hàng
Bảng 3.49: Bảng dữ liệu Order
STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Ý nghĩa
1 id int Là duy nhất Id của đơn hàng
2 address string Địa chỉ giao hàng
3 Email string Email của khách h
4 fullName string Họ tên khách hàng
5 PhoneNumber String Số điện thoại khách hàng
6 User_id Int Foreign key Id của khách hàng
7 Voucher_id Int Foreign key Id của phiếu giảm giá
8 Create_at Timestamp Thời gian tạo đơn
9 Total_amount Long Int Giá trị đơn hàng
10 Status String Tình trạng đơn hàng
Bảng dữ liệu Review: Lưu thông tin review về sản phẩm
Bảng 3.50: Bảng dữ liệu Order
STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Ý nghĩa
1 id int Là duy nhất Id của review
2 User_id Int Foreign key Id của khách hàng review
3 Product_id Int Foreign key Id của sản phẩm được khách hàng reveiw
4 Order_id Int Foreign key Id của đơn hàng mà khách hàng đã tạo
5 Rating Int Điểm đánh giá sản phẩm
6 Comment string Nội dung đánh giá
7 Create_at Timestamp Thời gian tạo review
Bảng dữ liệu Transaction: Lưu thông tin giao dịch của đơn hàng
Bảng 3.51: Bảng dữ liệu Transaction
STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Ý nghĩa
1 id int Là duy nhất Id của giao dịch
2 Order_id Int Foreign key Id của đơn hàng
3 Transaction_date Timestamp Thời gian tạo giao dịch
Int Foreign key Id của phương thức thanh toán
5 Amount Long Int Giá trị giao dịch
6 Comment string Nội dung đánh giá
7 Create_at Timestamp Thời gian tạo review
Bảng dữ liệu Payment: Lưu thông tin các phương thức giao dịch
Bảng 3.52: Bảng dữ liệu Payment
STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Ý nghĩa
1 id int Là duy nhất Id của phương thức
2 Name string Tên phương thức
3.2.3 Thiết kế kiến trúc hệ thống
Hình 3.17: Kiến trúc tổng thể dự án
Mô tả: Back-end deploy trên Railway, được viết bằng ASP.NET 7 Core API sử dụng cơ sở dữ liệu PostegreSQL, backend cũng được thiết kết với clean architecture để phân tách code cũng như việc bảo trì được dễ dàng, front-end được deploy trên máy chủ vercel và được phát triển bằng vite-react-ts.
XÂY DỰNG ỨNG DỤNG
Danh sách giao diện
4.1.1 Danh sách giao diện khách hàng
Bảng 4.1: Danh sách giao diện khách hàng
STT Tên màn hình Mô tả chức năng
1 Giao diện trang chủ Hiển thị các sản phẩm mới, các brand của quần áo
2 Giao diện đăng nhập Màn hình đăng nhập vào trang web besty
3 Giao diện đăng ký Màn hình đăng ký tài khoản
4 Giao diện xem sản phẩm Hiển thị chi tiết sản phẩm vừa được chọn và gợi ý danh sách các sản phẩm tương tự
5 Giỏ hàng Hiển thị các sản phẩm có trong giỏ hàng
6 Giao diện đặt hàng Hiển thị form đặt hàng các sản phẩm
7 Giao diện thanh toán thành công Hiển thị thông báo đặt hàng thành công
8 Giao diện lọc sản phẩm Hiển thị danh sách các sản phẩm phù khớp với kết quả tìm kiếm
9 Giao diện thanh toán online Hiện thị thanh toán bằng VnPay
10 Giao diện hiển thị danh sách yêu thích
Hiển thị danh sách yêu thích của Khách hàng
11 Giao diện hiển thị đơn hàng Hiển thị thông tin đơn hàng đã tạo của khách hàng
12 Giao diện giỏ hàng Hiển thị giỏ hàng của khách hàng
13 Giao diện thanh nhập thông tin giao hàng Hiển thị form nhập thông tin sản phẩm
14 Giao diện chọn phương thức thanh toán
Hiển thị lựa chọn phương thức thanh toán cho đơn hàng
15 Giao diện xem danh sách sản Hiển thị danh sách sản phẩm có trong cửa phẩm hàng
4.1.2 Danh sách giao diện Admin
Bảng 4.2: Danh sách giao diện Admin
1 Giao diện dashboard Hiển thị các báo cáo thống kê của cửa hàng
2 Giao diện quản lý danh mục Hiển thị danh sách các danh mục có trong database
3 Giao diện thêm mới danh mục Hiển thị form thêm mới danh mục
4 Giao diện chỉnh sửa danh mục Hiển thị form chỉnh sửa danh mục
5 Giao diện quản lý sản phẩm Hiển thị danh sách các sản phẩm có trong cửa hàng
6 Giao diện thêm mới sản phẩm Hiển thị form thêm mới sản phẩm
7 Giao diện xem chi tiết sản phẩm Hiển thị giao diện xem chi tiết một sản phẩm
8 Giao diện quản lý đơn hàng Hiển thị danh sách các đơn bán hàng hiện có
9 Giao diện chỉnh sủa trạng thái đơn Hiển thị giao giao diện để chỉnh sửa tình trạng đơn hàng
10 Giao diện xem chi tiết đơn hàng Hiển thị giao diện xem chi tiết một đơn bán hàng
11 Giao diện quản lý đơn hàng thanh toán bằng VnPay
Hiển thị thông tin các đơn hàng thanh toán bằng cổng VnPay
Mô tả các màn hình
Hình 4.1: Giao diện trang chủ
- Màn hình này là trang chủ của cửa hàng, sẽ hiện thi thông tin các sản phẩm mới về, sản phẩm bán chạy nhất, xem nhiều nhất
- Khách hàng có thể click vào bất cứ sản phẩm nào để xem sản phẩm
Hình 4.2: Giao diện đăng nhập
- Màn hình để khách hàng đăng nhập vào cửa hàng
- Bao gồm ô nhập tên đăng nhập, mật khẩu, button đăng nhập
- Nếu khách hàng chưa có tài khoản thì có thể chọn đăng ký tài khoản
Hình 4.3: Giao diện đăng ký tài khoản
- Màn hình để khách hàng đăng ký vào cửa hàng
- Bao gồm ô nhập tên đăng nhập, mật khẩu, button đăng nhập
- Nếu khách hàng chưa có tài khoản thì có thể chọn đăng ký tài khoản
4.2.4 Giao diện xem sản phẩm
Hình 4.4: Giao diện Xem sản phẩm
- Màn hình để khách hàng xem chi tiết một sản phẩm
- Khách hàng có thể chọn màu, size sản phẩm
- Sau khi chọn màu và size khách hàng có thể thêm sản phẩm vào giỏ hàng bằng cách click và button “Thêm vào giỏ hàng.”
- Khách hàng có thể xem thông tin sản phẩm ở các tab bên dưới button
Khách hàng có thể thêm sản phẩm vào danh sách yêu thích bằng click vào biểu tưởng hình trái tim
Hình 4.5: Giao diện giỏ hàng
- Màn hình này hiển thị các sản phẩm mà khách hàng đã thêm vào giỏ hàng
- Khách hàng có thể tăng hoặc giảm số lượng sản phẩm bằng cách click “-“ hoặc “+”
- Khi muốn đặt hàng sản phẩm khách hàng có thể click vào button “Xem giỏ hàng của bạn”
Hình 4.6: Giao diện đặt hàng
- Màn hình hiển thị sản phẩm có trong giỏ hàng
- Các chức năng của giỏ hàng đã được mô tả phía trên
- Khi đã chỉnh sửa giỏ hàng xong khách hàng có thể click button “Đặt hàng”
4.2.7 Giao diện thanh toán thành công
Hình 4.7: Giao diện thanh toán thành công
- Màn hình thông báo thành công sau khi khách hàng thanh toán online
Khách hàng có thể xem đơn hàng của mình bằng cách click vào button “xem giỏ hàng” hoặc click vào button “Tiếp tục mua hàng” để tiếp tục mua hàn
4.2.8 Giao diện lọc sản phẩm
Hình 4.8: Giao diện lọc sản phẩm
- Màn hỉnh hiển thị chức năng lọc sản phẩm
- Khách hàng có thể click vào các butotn danh mục, kích thước, sắp xếp giá tiền để lọc ra nhưng sản phẩm phù hợp
4.2.9 Giao diện thanh toán online
Hình 4.9: Giao diện thanh toán online
- Màn hình mô tả giao diện thanh toán bằng thẻ ngân hàng
- Khách hàng có thể chọn ngân hàng mình muốn thanh toán bằng cách click vào các biểu tưởng ngân hàng
4.2.10 Giao diện hiển thị danh sách yêu thích
Hình 4.10: Giao diện danh sách yêu thích
- Màn hình hiển thị các sản phẩm mà khách hàng yêu thích,
Khách hàng có thể xem chi tiết sản phẩm bằng cách click vào từng item
4.2.11 Giao diện hiển thị đơn hàng
Hình 4.11: Giao diện danh sách đơn hàng
- Màn hình hiển thị danh sách các đơn hàng của khách hàng đã đăng nhập bằng tài khoản
- Khách hàng có thể xem chi tiết đơn, tình trạng đơn hàng, giá, ngày tạo đơn
- Khách hàng có thể lọc theo giá trị đơn, ngày tạo, phương thức thanh toán, và tình trạng đơn hàng
Hình 4.12: Giao diện giỏ hàng
- Các chức năng đã được giải thích phía trên
4.2.13 Giao diện nhập thông tin giao hàng
Hình 4.13: Giao diện nhập thông tin giao hàng
- Màn hình hiển thị form nhập thông tin khách hàng và địa chỉ giao hàng]
- Khách hàng phải nhập đây đủ thông tin như email, số điện thoại, họ và tên, tỉnh thành phố, huyện, xã, địa chỉ cụ thể thì mới được click “button” tiếp tục để đi tới trang thanh toán
4.2.14 Giao diện thông báo thanh toán thất bại
Hình 4.14: Giao diện thanh toán thất bại
- Màn hình hiển thị thông báo thất bại nếu khách hàng huỷ thanh toán online
- Khách hàng có thể quay về trang chủ bằng cách click button “về trang chủ”
4.2.15 Giao diện chọn phương thức thanh toán
Hình 4.15: Giao diện chọn phương thức thanh toán
- Màn hỉnh hiển thị các phương thức thanh toán mà khách hàng có thể chọn, kèm theo đó là thông tin đơn hàng
- Sau khi xác nhận thông tin khách hàng có thể click button để đi đến trang thanh toán
4.2.16 Giao diện danh sách sản phẩm
Hình 4.16: Giao diện danh sách sản phẩm
- Màn hình hiển thị các các sản phẩm có trong cửa hàng
Khách hàng có thể xem chi tiết sản phẩm bằng cách click vào sản phẩm
Hình 4.17: Giao điện dashboard
Màn hình hiển thị doanh thu, số lượng đơn hàng trong ngày, và tổng, hiển thị biểu đồ doanh số
4.2.18 Giao diện quản lý danh mục
Hình 4.18: Giao diện quản lý danh mục
- Màn hình hiển thị danh sách các danh mục sản phẩm có trong cửa hàng, bao gồm tên và id của danh mục
- Khách hàng có thể chỉnh sửa danh mục hoặc xoá danh mục bằng click vào các button có icon tương ứng
Hình 4.19: Giao diện thêm mới danh mục
- Màn hình hiển thị form thêm danh mục mới
- Khách hàng nhập tên danh mục mới vào input “Tên danh mục”
- Để thêm danh mục vừa mơi được nhập khách hàng click button “Thêm.”
4.2.20 Giao diện chỉnh sửa danh mục
Hình 4.20: Giao diện chỉnh sửa danh mục
- Màn hình hiển thị form để chỉnh sửa tên dnah mục
Người dùng thực hiện nhập tên danh mục mới vào input và ấn button “ lưu” để lưu lại tên danh mục đã sửa đổi
4.2.21 Giao diện xoá danh mục
Hình 4.21: Giao diện xoá danh mục
- Màn hỉnh hiển thị popup khi người dùng ấn vào button xoá danh mục,
- Nếu đồng ý xoá , chọn button”yes” – danh mục sẽ được xoá khỏi database , nếu không thì chọn button “No”
4.2.22 Giao diện quản lý sản phẩm
Hình 4.22: Giao diện quản lý sản phẩm
- Màn hình hiển thị danh sách các sản phẩm hiện có trong cửa hàng, trong bảng gồm các table id sản phẩm, ảnh thumbnail, giá, chiết khấu, trạng thái và các danh mục của sản phẩm
- Người dùng có thể lọc giao giá sản phẩm, tên sản phẩm bằng cách click vào các icon hiển thị trên các cột tương ứng của bảng Để thực hiện các thao tác với một sản phẩm cụ thể người dùng có thể click vào button
4.2.23 Giao diện thêm sản phẩm mới
Hình 4.23: Giao diện thêm sản phẩm
- Màn hình hiển thị các thông tin và các input cần nhập vào đối với một sản phẩm mới
- Người dùng chọn ảnh , nhập tên, danh mục, ảnh mô tả, các size nhập vào và sau đó click vào button “submit” để thêm sản phẩm vào cơ sở dữ liệu
4.2.24 Giao diện xem chi tiết sản phẩm
Hình 4.24: Giao diện xem chi tiết sản phẩm
- Màn hỉnh hiển thị các thông tin chi tiết của một sản phẩm trong cửa hàng
- Bao gồm thôn tin về ảnh, tên, giá, danh mục, tình trạng, mô tả của sản phẩm,
- Các màu, size mà sản phẩm hiện có trong kho hàng
4.2.25 Giao diện quản lý đơn hàng
Hình 4.25: Giao diện quản lý đơn hàng
- Màn hình hiển thị danh sách các đơn hàng đã được tạo bởi khách hàng trong cửa hàng
- Hiển thị các thông tin cơ bản của đơn hàng như tên khách hàng, giá trị đơn, ngày tạo, phương thức thanh toán, tình trạng đơn
- Người dùng có thể thực hiện các hành động với một đơn hàng cụ thể bằng cách click vào button “…”
4.2.26 Giao diện chỉnh sửa trạng thái đơn
Hình 4.26: Giao diện chỉnh sủa trạng thái đơn
- Admin có thể chỉnh sửa trạng thái đơn hàng bằng cách chọn các trạng thái đơn mong muốn, bao gồm 3 trạng thái đơn
• Completed: đơn đã thanh toán
• Pending: Đơn chưa thanh toán
- Sau khi chọn xong hệ thống sẽ thông báo tình trạng cập nhật với của đơn hàng
4.2.27 Giao diện xem chi tiết đơn hàng
Hình 4.27: Giao diện xem chi tiết đơn hàng
- Màn hình mô tả chi tiết một đơn hàng bao gồm, các thông tin cơ bản đã trong danh sách đơn hàng phía trên và bổ tsung thêm thông tin về các sản phẩm đã được dặt mua trong đơn hàng
4.2.28 Giao diện quản lý đơn hàng thanh toán bằng VNPay
Hình 4.28: Giao diện thanh toán bằng VNPAY
- Màn hình quản lý các đơn hàng được thanh toán online bằng cổng VnPay
- Các chức năng của giao diện được mô tả bằng các label trong hình
