Đồ án xây dựng website bán điện thoại di động

GIỚI THIỆU ĐỀ TÀI

Tóm tắt đồ án

● Tên đề tài: Xây dựng website bán điện thoại di động

Website này được thiết kế với giao diện đơn giản, bắt mắt và dễ sử dụng, mang đến trải nghiệm tốt cho người dùng Nhóm phát triển nhằm mục tiêu quản lý hoạt động mua bán điện thoại di động, giúp đơn giản hóa các giao dịch điện tử Trong tương lai, website sẽ tích hợp các chức năng dự đoán lượt mua/bán và liên hệ với khách hàng để nâng cao hiệu quả kinh doanh.

Lý do chọn đề tài

Công nghệ ra đời nhằm nâng cao chất lượng cuộc sống, trong đó điện thoại là một phát minh vĩ đại Theo thời gian, nhu cầu về tiện ích cá nhân như mua sắm online và tham khảo sản phẩm qua website ngày càng tăng Để đáp ứng xu hướng này, website quản lý bán điện thoại di động trở thành giải pháp tối ưu, giúp đưa công nghệ mới đến tay người tiêu dùng nhanh chóng và hiệu quả.

Trang web quản lý bán điện thoại là cầu nối quan trọng giữa nhà sản xuất, người bán và người tiêu dùng trong thương mại điện tử Người dùng có thể truy cập để tham khảo các sản phẩm điện thoại với thông tin đầy đủ, đa dạng mẫu mã và hãng khác nhau, giúp tối ưu hóa trải nghiệm và tăng doanh thu bán hàng.

Website quản lý bán điện thoại không chỉ cập nhật nhanh chóng các xu hướng công nghệ hiện đại mà còn phân tích dữ liệu người dùng để đưa ra đề xuất mua hàng, giúp tối thiểu hoá rủi ro tồn kho Điều này đảm bảo đáp ứng yêu cầu của khách hàng mà không bị lỗi thời, từ đó cải thiện cách tiếp thị và giúp doanh nghiệp đạt doanh số mong muốn, đồng thời tiếp cận công nghệ và khách hàng mục tiêu.

Để theo kịp sự phát triển của công nghệ và mạng lưới bán hàng điện tử, website được xây dựng nhằm phục vụ cộng đồng và những người yêu thích công nghệ Mục tiêu chính là đáp ứng nhu cầu khách hàng trong thời đại mới, đồng thời tạo nguồn thu nhập và góp phần vào sự phát triển của doanh nghiệp cũng như đất nước.

Mục tiêu

Website cung cấp các chức năng cơ bản như đặt hàng, tìm kiếm và hiển thị thông tin sản phẩm, giúp người dùng dễ dàng truy cập và xem thông tin sản phẩm phù hợp.

● Người dùng tiết kiệm được thời gian chờ đặt hàng và tránh tình trạng thiếu thông tin sản phẩm

Khách hàng sẽ đăng nhập tài khoản để tiến hành mua sản phẩm ưng ý, và thông tin người dùng cùng sản phẩm sẽ được lưu trữ trong hệ thống, giúp dễ dàng sử dụng sau này.

Website không chỉ giúp doanh nghiệp quản lý hiệu quả mà còn cung cấp thống kê hàng tháng về kho hàng, doanh thu và doanh số, từ đó giúp theo dõi tình hình kinh doanh một cách sát sao.

Dữ liệu bán hàng và khách hàng cung cấp thông tin quan trọng cho việc lập kế hoạch chiến lược kinh doanh Những thống kê này giúp xác định các mục tiêu dài hạn, từ đó hỗ trợ doanh nghiệp phát triển bền vững trong tương lai.

● Tăng hiệu suất và lợi nhuận cho doanh nghiệp

Trang bán hàng trên website cho phép thêm hoặc xóa sản phẩm, giúp quản lý rủi ro hàng tồn kho hiệu quả và đáp ứng nhanh chóng nhu cầu của người tiêu dùng.

● Thu thập dữ liệu về xu hướng và sở thích người tiêu dùng khi truy cập vào website

● Cung cấp một trải nghiệm trực tuyến tốt hơn cho khách hàng.

Phạm vi

● Nền tảng hỗ trợ: Triển khai trên website

Trang web cung cấp nhiều chức năng hữu ích như xem chi tiết sản phẩm, phân loại điện thoại theo thương hiệu (Apple, Samsung, Realme, ) và đặt hàng dễ dàng Người dùng có thể đăng ký tài khoản, tìm kiếm sản phẩm, và quản lý giỏ hàng bằng cách thêm hoặc xóa sản phẩm Ngoài ra, trang cũng cung cấp thông tin quảng cáo, hỗ trợ khôi phục mật khẩu, và thanh toán cho các sản phẩm đã mua Người dùng có thể thay đổi thông tin cá nhân, xem lịch sử đơn hàng, và cập nhật địa chỉ Hệ thống cũng cho phép quản lý doanh thu hàng tháng, đơn đặt hàng, và sản phẩm thông qua các chức năng thêm, xóa và sửa.

Đối tượng sử dụng

● Họ có thể xem chi tiết sản phẩm, đăng ký tài khoản, tìm kiếm sản phẩm, xem thông tin quảng cáo, quên mật khẩu

Người dùng có thể kế thừa toàn bộ chức năng của Visitor, bao gồm việc thay đổi thông tin cá nhân như mật khẩu, xem đơn hàng đã mua và cập nhật địa chỉ Họ cũng có khả năng đặt hàng, quản lý giỏ hàng bằng cách thêm hoặc xóa sản phẩm, và thực hiện thanh toán một cách dễ dàng.

● Họ sẽ quản lí sản phẩm ( thêm, xóa, và sửa sản phẩm).

Tổng quan dự án

Website bán điện thoại di động này là một nền tảng thương mại điện tử chuyên nghiệp, mang đến trải nghiệm mua sắm tiện lợi và đáng tin cậy cho khách hàng Với giao diện trực quan và dễ sử dụng, trang web cung cấp đa dạng sản phẩm từ các thương hiệu nổi tiếng toàn cầu Ngoài ra, website còn có công cụ quản lý hệ thống trực tuyến, giúp mở rộng kinh doanh, tăng doanh số và xây dựng một hệ thống kinh doanh trực tuyến chuyên nghiệp, thu hút sự quan tâm và lòng tin từ khách hàng.

Yêu cầu hệ thống – mục đích của dự án

• Xây dựng hệ thống trực quan, dễ dàng sử dụng

• Hệ thống có giao diện hiện đại, dễ sử dụng

• Hỗ trợ chức năng tìm kiếm và bộ lọc thông minh

• Cung cấp thông tin chi tiết sản phẩm

• Quản lý đơn hàng và thanh toán

Các chức năng chính

● Xem chi tiết sản phẩm

● Đặt hàng và thanh toán

● Đăng ký và quản lý tài khoản

Công nghệ sử dụng

● Công cụ thiết kế UI/UX: Figma

● Ngôn ngữ sử dụng: Javascript

● Xây dựng website: HTML5, CSS3

● Cơ sở dữ liệu: MySQL

● Thư viện sử dụng: o Front-end: Reactjs o Back-end: Nodejs.

Môi trường lập trình

● Visual Studio Code (VS Code).

Công cụ hỗ trợ

● Tìm hiểu các công cụ hỗ trợ: Figma, StarUML (WebApp hỗ trợ vẽ diagram)

● Môi trường làm việc: Notion.

GIỚI THIỆU CÔNG NGHỆ SỬ DỤNG

React

React là thư viện JavaScript linh hoạt và hiệu quả, giúp xây dựng giao diện người dùng một cách declarative Nó cho phép phát triển các giao diện phức tạp từ những đoạn code nhỏ, độc lập, được gọi là “components”.

Công cụ này, được phát triển bởi Facebook, ra mắt vào năm 2013 dưới dạng mã nguồn mở JavaScript Hiện nay, nó đã vượt qua các đối thủ lớn như Angular và Bootstrap, trở thành một trong những thư viện JavaScript hàng đầu.

React là một thư viện GUI nguồn mở JavaScript, nổi bật với khả năng hoàn thành nhiệm vụ giao diện người dùng (UI) một cách hiệu quả và dễ sử dụng Thư viện này được phân loại theo nhiều kiểu, giúp các nhà phát triển tạo ra các ứng dụng tương tác một cách linh hoạt.

“V” trong mô hình MVC (Model-View-Controller)

React hỗ trợ việc tái sử dụng các thành phần (components) đã phát triển, cho phép lập trình viên tích hợp chúng vào các ứng dụng khác có cùng chức năng Tính năng này mang lại lợi thế nổi bật cho các lập trình viên, giúp tiết kiệm thời gian và công sức trong quá trình phát triển.

Viết component trong React trở nên dễ dàng hơn nhờ sự kết hợp tuyệt vời giữa JavaScript và HTML, giúp làm rõ toàn bộ quá trình xây dựng cấu trúc trang web Bên cạnh đó, các phần mở rộng cũng hỗ trợ trong việc render nhiều lựa chọn một cách thuận tiện hơn.

● Hiệu suất tốt hơn với Virtual DOM: React sẽ cập nhật hiệu quả quá trình DOM (Document Object Model – Mô hình đối tượng tài liệu)

React là một framework mạnh mẽ giúp tạo ra giao diện người dùng thân thiện với SEO, cho phép các trang web dễ dàng được truy cập và lập chỉ mục bởi các công cụ tìm kiếm Đây là một lợi thế lớn, bởi không phải tất cả các framework JavaScript đều có khả năng tối ưu hóa cho SEO.

● React tăng kích thước của ứng dụng mà người dùng tải xuống

● Sẽ có thêm chi phí về khả năng tính toán và bộ nhớ của thiết bị

● Để bắt đầu học React JS, một lập trình viên không chỉ phải học thư viện mà còn phải làm quen với mô hình

Redux [5.3]

Redux là một thư viện Javascript giúp quản lý trạng thái của ứng dụng một cách hiệu quả Nó cung cấp một lớp quản lý cho mọi trạng thái, cho phép người phát triển dễ dàng theo dõi và kiểm soát dữ liệu trong ứng dụng.

8 management tool (công cụ quản lý cao cấp) cho các ứng dụng được viết bằng ngôn ngữ lập trình Javascript và còn được gọi là Redux js

Redux giúp ứng dụng hoạt động nhất quán trên nhiều môi trường như client, server và native, đồng thời cải thiện khả năng lưu trữ dữ liệu Việc sử dụng thư viện Redux cũng tạo điều kiện thuận lợi cho quá trình kiểm thử phần mềm.

2.2.2 Cách hoạt động của Redux

Redux bao gồm ba thành phần chính: Actions, Store và Reducers Actions là bước đầu tiên trong quy trình hoạt động của Redux, cho phép gửi dữ liệu từ ứng dụng đến Redux Store Mỗi khi trạng thái của ứng dụng hoặc giao diện thay đổi, một hành động sẽ được tạo ra Reducers nhận dữ liệu từ Actions và lưu giữ trạng thái dưới dạng đối tượng, xác định cách thay đổi trạng thái ứng dụng để đáp ứng các Action gửi tới Store Cuối cùng, Store là nơi lưu trữ trạng thái của ứng dụng, chỉ có một Store duy nhất trong mỗi ứng dụng Redux, với nhiệm vụ quản lý và truy cập các state, cập nhật state thông qua dispatch, và cho phép đăng ký hoặc hủy đăng ký các listeners thông qua các phương thức hỗ trợ.

MySQL [6.2]

MySQL is an open-source relational database management system (RDBMS) that operates on a client-server model It is integrated with Apache and PHP, making it a popular choice for web development and data management.

Được ra mắt vào thập niên 90, MySQL hiện đang quản lý dữ liệu qua nhiều cơ sở dữ liệu, mỗi cơ sở dữ liệu có thể chứa nhiều bảng quan hệ với dữ liệu phong phú.

1 cách thức truy xuất cũng như mã lệnh tương tự cùng với ngôn ngữ SQL

MySQL là một hệ quản trị cơ sở dữ liệu quan hệ, hoạt động dựa trên nguyên tắc lưu trữ và truy xuất dữ liệu thông qua các bảng Cơ chế hoạt động của MySQL bao gồm việc xử lý các truy vấn SQL, quản lý các giao dịch và đảm bảo tính toàn vẹn của dữ liệu Hệ thống này sử dụng một kiến trúc máy khách-máy chủ, cho phép nhiều người dùng truy cập và tương tác với cơ sở dữ liệu một cách đồng thời.

● MySQL đang tạo ra bảng để có thể lưu trữ dữ liệu và định nghĩa về sự liên quan giữa những bảng đó

● Client sẽ trực tiếp gửi yêu cầu SQL bằng 1 lệnh đặc biệt có trên MySQL

● Ứng dụng tại server sẽ tiến hành phản hồi thông tin cũng như trả về những kết quả trên máy client

Hình 2.4: Bảng lưu trữ dữ liệu và sự liên quan

● MySQL là CSDL có tốc độ khá cao, ổn định và khá dễ sử dụng có thể hoạt động được trên khá nhiều hệ điều hành

● Tính bảo mật mạnh và sử dụng được trên nhiều ứng dụng mà MySQL còn hoàn toàn được sử dụng miễn phí

MySQL không chỉ hỗ trợ PHP và Perl mà còn tương thích với nhiều ngôn ngữ lập trình khác, đóng vai trò quan trọng trong việc lưu trữ thông tin cho các trang web được phát triển bằng Perl hoặc PHP.

MySQL hoạt động hiệu quả và tiết kiệm chi phí nhờ vào việc thiết lập các tiêu chuẩn cụ thể, từ đó tăng cường tốc độ thực thi.

MySQL là một hệ quản trị cơ sở dữ liệu mạnh mẽ, có khả năng xử lý khối lượng lớn dữ liệu và dễ dàng mở rộng khi cần thiết.

MySQL là một hệ quản trị cơ sở dữ liệu quan hệ đa tính năng, hỗ trợ nhiều chức năng SQL quan trọng, cả gián tiếp lẫn trực tiếp, đáp ứng nhu cầu của người dùng.

MySQL là một hệ quản trị cơ sở dữ liệu (CSDL) nổi bật với độ bảo mật cao, rất phù hợp cho các ứng dụng truy cập CSDL qua internet Nó sở hữu nhiều tính năng bảo mật tiên tiến, giúp bảo vệ dữ liệu một cách hiệu quả.

MySQL là một hệ quản trị cơ sở dữ liệu dễ sử dụng, ổn định và có tốc độ cao, hoạt động trên nhiều hệ điều hành khác nhau Nó cung cấp một hệ thống phong phú với nhiều hàm tiện ích mạnh mẽ.

Khi số lượng bản ghi tăng lên, việc truy xuất dữ liệu trở nên khó khăn hơn, do đó cần áp dụng các biện pháp như tạo cache MySQL hoặc phân chia tải database ra nhiều server để tăng tốc độ truy xuất dữ liệu.

MySQL có nhược điểm về độ tin cậy do cách thức xử lý các chức năng cụ thể như kiểm toán, giao dịch và tài liệu tham khảo, khiến nó kém tin cậy hơn so với một số hệ quản trị cơ sở dữ liệu quan hệ khác.

NodeJS là gì [6.1]

Node.js là nền tảng phát triển ứng dụng mạng nhanh và mở rộng, được xây dựng trên môi trường chạy JavaScript của Chrome Với kiến trúc hướng sự kiện và không chặn, Node.js mang lại hiệu suất cao và tính nhẹ nhàng, lý tưởng cho các ứng dụng real-time yêu cầu xử lý nhiều dữ liệu trên các thiết bị phân tán.

Node.js là một môi trường mã nguồn mở, đa nền tảng, lý tưởng cho việc phát triển ứng dụng mạng Với thư viện phong phú gồm nhiều mô-đun JavaScript, Node.js giúp đơn giản hóa quá trình phát triển ứng dụng web một cách hiệu quả.

Lập trình kiến trúc hướng sự kiện và không đồng bộ trong Node.js cho phép tất cả các API hoạt động không bị chặn Điều này có nghĩa là máy chủ Node.js không bao giờ chờ đợi dữ liệu từ API mà sẽ tiếp tục chuyển đến API tiếp theo ngay sau khi gọi API đầu tiên Cơ chế thông báo sự kiện của Node.js giúp máy chủ nhận phản hồi từ các lệnh gọi API trước đó một cách hiệu quả.

● 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 Node.js xử lý mã rất nhanh

Node.js nổi bật với khả năng mở rộng cao nhờ vào mô hình luồng đơn và vòng lặp sự kiện Cơ chế sự kiện cho phép máy chủ phản hồi một cách không chặn, giúp tăng cường khả năng xử lý nhiều yêu cầu đồng thời So với các máy chủ truyền thống như Apache HTTP Server, Node.js có thể phục vụ một lượng lớn yêu cầu cùng lúc, mang lại hiệu suất vượt trội.

Các ứng dụng Node.js hoạt động mà không cần bộ đệm (buffer), nghĩa là chúng không lưu trữ dữ liệu tạm thời Thay vào đó, các ứng dụng này xuất dữ liệu theo từng khối, giúp tối ưu hóa hiệu suất và giảm thiểu độ trễ trong quá trình truyền tải thông tin.

● Có giấy phép – Node.js được phát hành theo giấy phép của MIT (Học viện công nghệ Massachusetts)

● Websocket server: Các máy chủ web socket như là Online Chat, Game Server…

● Fast File Upload Client: là các chương trình upload file tốc độ cao

● Ad Server: Các máy chủ quảng cáo

● Cloud Services: Các dịch vụ đám mây

● RESTful API: đây là những ứng dụng mà được sử dụng cho các ứng dụng khác thông qua API

● Any Real-time Data Application: bất kỳ một ứng dụng nào có yêu cầu về tốc độ thời gian thực

● Micro Services: Node.js có thể làm tốt việc chia nhỏ một ứng dụng lớn thành các dịch vụ nhỏ và kết nối chúng lại với nhau

● I/O hướng sự kiện không đồng bộ, cho phép nhà phát triển xử lý nhiều yêu cầu cùng lúc

● Node.js sử dụng ngôn ngữ JavaScript là một ngôn ngữ lập trình khá dễ học

● Có thể cùng chia sẻ code ở cả phía server và client

● Node Package Manager (NPM) và module Node ngày càng phát triển mạnh mẽ

● Có cộng đồng hỗ trợ rất tích cực

● Các file có kích thước lớn được phép stream

Node.js có giới hạn về khả năng mở rộng, khiến cho các nhà phát triển không thể khai thác tối đa hiệu suất của phần cứng máy chủ trong bối cảnh hiện nay với mô hình đa lõi.

● Nodejs tỏ ra khó thao tác với các cơ sử dữ liệu quan hệ

● Mỗi callback cần phải đi kèm với nhiều callback lồng nhau khác

● Để sử dụng Nodejs, nhà phát triển phải có kiến thức tốt về JavaScript

● Nodejs tỏ ra không phù hợp với các thao tác cần nhiều CPU.

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

Use-case diagram

Action list

Bảng 3.1: Bảng danh sách các hoạt động

STT Tên đối tượng Mô tả

Xem thông tin sản phẩm, tìm kiếm sản phẩm, đăng ký tài khoản, lấy lại mật khẩu đã quên

Ngoài những chức năng của Visitor còn có thể quản lý thông tin cá nhân, đặt hàng, quản lý giỏ hàng, mua sản phẩm

3 Manager Quản lý sản phẩm.

Use-case list

Bảng 3.2: Bảng danh sách Usecase

STT Tên đối tượng Tên Use-case Mô tả

Giúp người dùng có thể truy cập vào trang web với nhiều vai trò khác nhau

Manager Logout Giúp người dùng đăng xuất tài khoản

Register Giúp người dùng đăng ký tài khoản mới

Forgot Password Giúp người dùng lấy lại mật khẩu khi quên

5 Customer Manage Cart Giúp người dùng quản lý được giỏ hàng

6 Customer Payment Giúp người dùng thanh toán đơn đặt hàng

7 Customer Change User Profile Giúp người dùng quản lý thông tin tài khoản

8 Manager Manage product Giúp quản lý sản phẩm.

Use-case cụ thể

Bảng 3.3: Mô tả Use Case Login

Tên Use Case Login Đối tượng Customer, Manager Điều kiện cần Không

Người dùng cung cấp thông tin tài khoản

Hệ thống xác định thông tin tài khoản

Cho phép người dùng truy cập vào hệ thống hoặc tạo tài khoản mới

Yêu cầu đặc biệt Người dùng phải có một tài khoản đã đăng ký bao gồm email, password Điều kiện sau cùng

Khi đăng nhập thành công, người dùng có thể thực hiện những chức năng mà hệ thống cung cấp, dựa trên từng vai trò của từng tài khoản

Khi đăng nhập thất bại, người dùng đăng nhập lại hoặc tạo một tài khoản mới

Khi đăng ký tài khoản mới thành công, người dùng sẽ dùng tài khoản đó để truy cập vào website Điểm mở rộng Không

Bảng 3.4: Mô tả Use Case Logout

Tên Use Case Logout Đối tượng Customer, Manager Điều kiện cần Không

Người dùng chọn vào button logout

Người dùng xác nhận lựa chọn

Hệ thống đăng xuất tài khoản

Yêu cầu đặc biệt Không Điều kiện sau cùng

Khi người dùng đăng xuất thành công, hệ thống sẽ trở lại trạng thái của Visitor và chỉ cho phép thực hiện các chức năng dành cho Visitor Không có điểm mở rộng nào được áp dụng.

Bảng 3.5: Mô tả Use Case Register

Tên Use Case Register Đối tượng Visitor, Customer, Manager Điều kiện cần Không

Để tạo một tài khoản trên website, người dùng cần cung cấp thông tin cá nhân và đăng ký bằng một email hợp lệ Sau khi hoàn tất đăng ký, người dùng có thể đăng nhập vào website bằng tài khoản vừa tạo.

Bảng 3.6: Mô tả Use Case Forgot Password

Tên Use Case Forgot Password Đối tượng Visitor, Customer, Manager Điều kiện cần Đã đăng ký tài khoản trước đó

Luồng cơ bản Người dùng cung cấp email đã quên mật khẩu

Truy cập vào email để nhận được mã code

Để đăng ký tài khoản mới, người dùng cần cung cấp một email hợp lệ Sau khi hoàn tất quá trình đăng ký, tài khoản sẽ được sử dụng để truy cập vào website Lưu ý rằng không có điểm mở rộng nào được áp dụng.

Bảng 3.7: Mô tả Use Case Manage Cart

Tên Use Case Manage Cart Đối tượng Customer Điều kiện cần Đã đăng nhập tài khoản

Người dùng chọn vào biểu tượng Cart trên thanh Header

Truy cập được vào giỏ hàng và thực hiện được những chức năng mà hệ thống cung cấp

Yêu cầu đặc biệt Không Điều kiện sau cùng

Khi truy cập vào giỏ hàng, người dùng có thể thanh toán cho các đơn hàng hiện có, xóa sản phẩm không cần thiết hoặc thêm những sản phẩm mới vào giỏ.

Bảng 3.8: Mô tả Use Case Payment

Tên Use Case Payment Đối tượng Customer Điều kiện cần Đã đăng nhập tài khoản

Người dùng chọn vào biểu tượng Cart trên thanh Header

Truy cập giỏ hàng để thanh toán các sản phẩm đã chọn Điền đầy đủ thông tin cần thiết để đặt hàng và xác nhận thanh toán.

Truy cập vào trang Product Detail

Chọn Buy Now để thực hiện thanh toán ngay Điền thông tin cần thiết vào để tiến hành đặt đơn hàng Xác nhận thanh toán

Sau khi hoàn tất thanh toán, trạng thái đơn hàng sẽ được ghi lại để người dùng có thể dễ dàng theo dõi.

3.4.7 Use-case “Change User Profile”

Bảng 3.9: Mô tả Usecase Change User Profile

Tên Use Case Change User Profile Đối tượng Customer Điều kiện cần Đã đăng nhập tài khoản

Chọn biểu tượng “My profile” để truy cập vào hồ sơ tài khoản

Người dùng có thể thực hiện nhiều chức năng trên trang Profile, bao gồm chỉnh sửa thông tin tài khoản, đổi mật khẩu, cập nhật thông tin vận chuyển, quản lý đơn hàng và đăng xuất tài khoản.

Chỉ có khách hàng mới có thể thực hiện chức năng này Thông tin cập nhật sẽ được điều chỉnh theo nhu cầu của khách hàng Không có điểm mở rộng nào.

Bảng 3.10: Mô tả Use Case Manage product

Tên Use Case Manage product Đối tượng Manager Điều kiện cần Đã đăng nhập tài khoản

Nhấn vào nút "Danh sách sản phẩm" để truy cập trang danh sách sản phẩm Tại đây, người quản lý có thể thực hiện các chức năng như tìm kiếm, tạo mới và sửa chữa sản phẩm.

Yêu cầu đặc biệt Chỉ có Manager thực hiện được chức năng

26 Điều kiện sau cùng Sau khi thực hiện, sản phẩm sẽ được cập nhật theo yêu cầu của người quản lý Điểm mở rộng Không.

Class diagram

Class diagram explan

STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Ý nghĩa

Lưu id của người dùng ( visitor, manager and customer)

Phân quyền tài khoản ( Visitor, customer and manager)

3 email varchar Lưu thông tin email

4 password varchar Lưu thông tin password

5 fullname varchar Lưu thông tin họ và tên

6 gender varchar Lưu thông tin giới tính

7 phonenumber varchar Lưu thông tin số điện thoại

8 days int Lưu thông tin ngày sinh

9 months int Lưu thông tin tháng sinh

10 years int Lưu thông tin năm sinh

11 province varchar Lưu thông tin tỉnh

12 district varchar Lưu thông tin quận

13 wards varchar Lưu thông tin xã

1 idcate int Khóa chính Lưu id của danh mục

2 namecate varchar Lưu thông tin tên danh mục

1 idproducts int Khóa chính Lưu id của sản phẩm

2 idcate int Khóa ngoại Lưu id danh mục sản phẩm

3 nameproducts varchar Lưu thông tin tên sản phẩm

4 promotion varchar Lưu thông tin mô tả

5 discount int Lưu thông tin giảm giá

6 description varchar Lưu thông tin mô trả chi tiết sản phẩm

Chi tiết thiết kế kiến trúc

Hình 3.3: Kiến trúc Front-end

• View layer: Nó đại diện cho giao diện người dùng của ứng dụng không có bất kỳ logic ứng dụng nào

• State management: Layer này chứa logic ứng dụng Layer này, trong kiến trúc đã thực hiện via React Hooks

• Api Client: Layer này chịu trách nhiệm giao tiếp với máy chủ bên ngoài ( gửi yêu cầu / nhận phản hồi) và lưu trữ dữ liệu cục bộ

Hình 3.4: Kiến trúc Back-end

Modal là thành phần chính chứa tất cả logic liên quan đến dữ liệu mà người dùng tương tác Nó đóng vai trò quan trọng trong việc duy trì dữ liệu của ứng dụng, thực chất là phần cơ sở dữ liệu của ứng dụng.

Thành phần view là yếu tố quan trọng trong việc xử lý logic giao diện người dùng của ứng dụng, giúp mô hình hóa và trình bày dữ liệu theo cách mà người dùng mong muốn Người dùng có khả năng thực hiện các thay đổi đối với dữ liệu được hiển thị View bao gồm các trang tĩnh và động, được kết xuất hoặc gửi đến người dùng theo yêu cầu.

Controller đóng vai trò là giao diện kết nối giữa các thành phần Model và View, chịu trách nhiệm xử lý logic nghiệp vụ và yêu cầu gửi đến Nó thao tác dữ liệu thông qua mô hình thành phần và tương tác với View để hiển thị đầu ra cuối cùng một cách hiệu quả.

XÂY DỰNG ỨNG DỤNG

Header

Bảng 4.1: Tính năng của Header

STT Tên tính năng Loại Chức năng

1 Search Input Tìm kiếm sản phẩm theo tên

2 Seller Channel Text Chuyển đến màn hình đăng nhập admin

3 Home Text Chuyển đến trang

4 Phone Text Hiển thị danh sách các loại sản phẩm

5 Cart Text Chuyển đến trang Cart

6 Login Text Lựa chọn chuyển sang Hồ sơ cá nhân hoặc đăng xuất

Footer

Bảng 4.2: Tính năng của Footer

1 Tên các sản phẩm Button Chuyển đến các loại sản phẩm

Màn hình Login

Bảng 4.3: Tính năng màn hình Login

4 Forgot password Button Quên mật khẩu

Màn hình Register

Bảng 4.4: Tính năng màn hình Register

1 Fullname Text Nhập họ và tên

4 Retype password Button Nhập lại password

Màn hình Forgot password

Hình 4.6: Màn hình Forgot password

Bảng 4.5: Tính năng màn hình Forgot password

2 Confirm Button Quên mật khẩu.

Màn hình Change password

Hình 4.7: Màn hình Change password

Bảng 4.6: Tính năng màn hình Change password

1 Password Text Nhập mật khẩu

2 Retype password Text Nhập lại mật khẩu

Màn hình Home Page

Hình 4.8: Màn hình Home Page

Bảng 4.7: Tính năng màn hình Home Page

1 Arrow Left Button Nút qua trái

2 Arrow Right Button Nút qua phải

Danh sách danh mục sản phẩm

Chuyển sang trang danh mục sản phẩm theo danh mục

Chuyển sang trang chi tiết sản phẩm

Màn hình Category

Bảng 4.8: Tính năng màn hình Category

Sắp xếp theo giá từ thấp đến cao

Sắp xếp theo giá từ cao đến thấp

3 Xem nhiều sản phẩm Button Xem nhiều sản phẩm

Chuyển sang trang chi tiết sản phẩm.

Màn hình Product detail

Hình 4.10: Màn hình Product detail

Bảng 4.9: Tính năng màn hình Product detail

Chọn từng size của sản phẩm

Chọn từng màu của sản phẩm

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

Xem nhiều mô tả sản phẩm

6 Arrow left Button Nút qua trái

7 Arrow right Button Nút qua phải

Chuyển trang chi tiết sản phẩm

Màn hình Cart

Bảng 4.10: Tính năng màn hình Cart

Trở về trang chi tiết sản phẩm

Xóa một sản phẩm trong giỏ hàng

Tăng số lượng sản phẩm trong giỏ hàng

Gỉam số lượng sản phẩm trong giỏ hàng

Chuyển đến trang order info

Choose add the other product

Trở về trang chi tiết sản phẩm.

Màn hình Order info

Hình 4.12: Màn hình Order info

Bảng 4.11: Tính năng màn hình Order info

2 Fullname Text Nhập tên người mua hàng

Nhập số điện thoại người mua hàng

Nhập email người mua hàng

Chọn phương thức mua hàng

Nhập đầy đủ địa chỉ giao hàng

Chuyển đến trang detail bill

Choose add the product product

Quay về trang chi tiết sản phẩm.

Màn hình Detail Bill

Hình 4.13: Màn hình Detail bill

Bảng 4.12: Tính năng màn hình Register

2 Checkout Button Thanh toán đơn hàng

Choose add the product product

Quay về trang chi tiết sản phẩm.

Màn hình Thanks

Màn hình Page not found

Hình 4.15: Màn hình Page not found

Màn hình Profile (User profile)

Hình 4.16: Màn hình Profile (User profile)

Bảng 4.13: Tính năng màn hình Profile (User profile)

1 User name Text Nhập tên người dùng

Nhập tên đầy đủ của người dùng

Nhập email của người dùng

Nhập số điện thoại người dùng

5 Gender Radio Chọn giới tính

6 Date Button Chọn ngày sinh

7 Month Button Chọn tháng sinh

8 Year Button Chọn năm sinh

Cập nhật thông tin người dùng

Màn hình Profile (Change password)

Hình 4.17: Màn hình Profile (Change password)

Bảng 4.14: Tính năng màn hình Profile (Change password)

1 Current password Text Nhập mật khẩu hiện tại

2 New password Text Nhập mật khẩu mới

Text Nhập lại mật khẩu mới

4 Update Button Cập nhật lại mật khẩu.

Màn hình Profile (Delivery address)

Hình 4.18: Màn hình Profile (Delivery address)

Bảng 4.15: Tính năng màn hình Profile (Delivery address)

1 Full name Text Nhập tên người dùng

3 Phone number Text Nhập số điện thoại

Nhập đầy đủ chi tiết địa chỉ

8 Update Button Cập nhật thông tin

Màn hình Profile (Purchase)

Hình 4.19: Màn hình Profile (Purchase)

Bảng 4.16: Tính năng màn hình Profile (Purchase)

Chuyển sang trang see detail

Chuyển sang từng đơn hàng

Màn hình Profile (See detail)

Hình 4.20: Màn hình See detail

Màn hình Profile (See logout)

Hình 4.21: Màn hình Profile (See logout)

Màn hình Profile (Purchase empty)

Hình 4.22: Màn hình Profile (Purchase empty)

Màn hình Product Modifier

Hình 4.23: Màn hình Product Modifier

Bảng 4.17: Tính năng màn hình Product Modifier

1 Product Name Text Nhập tên sản phẩm

2 Discount Text Nhập phần trăm giảm giá

4 Description Text Mô tả chi tiết sản phẩm

7 Save Button Lưu thông tin sản phẩm.

Màn hình Product Modifier (Modal)

Hình 4.24: Màn hình Product Modifier (Modal)

Bảng 4.18: Tính năng màn hình Product Modifier (Modal)

1 Name size Text Nhập tên size

2 Price size Text Nhập giá size

3 Cộng Button Thêm 1 or nhiều màu

4 Name color Text Nhập tên màu

5 Quantity Text Nhập số lượng

Xóa màu và số lượng của màu

8 OK Button Thêm mới 1 size

Màn hình Product List

Hình 4.25: Màn hình Product List

Bảng 4.19: Tính năng màn hình Product List

1 Search Button Tìm kiếm sản phẩm

Chuyển đến trang product modifier

Chuyển đến trang product modifier nhưng hiển thị lại sản phẩm muốn cập nhật

4 Delete Button Xóa sản phẩm

Màn hình Product List (Empty)

Hình 4.26: Màn hình Product List (Empty)

Tiêu đề	Đồ án xây dựng website bán điện thoại di động
Tác giả	Võ Đình Vân, Nguyễn Huỳnh Tuấn Khang
Người hướng dẫn	TS. Đỗ Thị Thanh Tuyền
Trường học	Trường Đại Học Công Nghệ Thông Tin, Đại Học Quốc Gia TP. Hồ Chí Minh
Chuyên ngành	Khoa Công Nghệ Phần Mềm
Thể loại	đồ án
Năm xuất bản	2023
Thành phố	TP. Hồ Chí Minh

Định dạng
Số trang	81
Dung lượng	3,42 MB