Xây dựng website kinh doanh linh kiện máy tính sử dụng nodejs và reactjs

PHẦN MỞ ĐẦU

TÍNH CẤP THIẾT CỦA ĐỀ TÀI

Công nghệ thông tin đang phát triển mạnh mẽ, ảnh hưởng sâu sắc đến mọi lĩnh vực của đời sống và kinh tế Sự mở rộng quy mô của doanh nghiệp và xí nghiệp trong cơ chế thị trường đã làm gia tăng khối lượng thông tin, khiến công tác quản lý trở nên phức tạp hơn Việc quản lý thủ công bằng sổ sách không còn đáp ứng được yêu cầu hiện tại Do đó, quản lý dựa vào máy tính trở thành nhu cầu thiết yếu cho mọi ngành và doanh nghiệp, với việc tin học hóa từng bước trong quản lý, khai thác và điều hành sản xuất kinh doanh ngày càng trở nên cấp thiết.

Trong thời đại công nghiệp hóa hiện đại hóa hiện nay, nhu cầu sử dụng máy tính ngày càng tăng cao, đặc biệt trong lĩnh vực học tập và làm việc trực tuyến Học sinh, sinh viên cần máy tính để học online, tra cứu tài liệu và ôn tập, trong khi phụ huynh cũng tham gia các cuộc họp trực tuyến Ngoài ra, nhân viên trong các ngành như thiết kế, marketing và kế toán cũng cần máy tính để duy trì công việc hiệu quả Do đó, máy tính đã trở thành thiết bị thiết yếu trong mỗi gia đình và là "hàng hot" trên thị trường hiện nay.

Dựa trên nhu cầu thực tế và mong muốn tạo sự linh hoạt trong giao dịch mua bán linh kiện máy tính, nhóm chúng tôi quyết định thực hiện đề tài "Quản lý cửa hàng mua bán linh kiện máy tính".

MỤC TIÊU CỦA ĐỀ TÀI

Mục đích chính của việc xây dựng website bán linh kiện máy tính là mang lại sự tiện lợi, tiết kiệm thời gian và chi phí, đồng thời đảm bảo hiệu quả cao Ngoài ra, nhóm còn hướng tới các mục tiêu khác nhằm nâng cao trải nghiệm người dùng và tối ưu hóa quy trình mua sắm.

- Áp dụng được các kiến thức đã học được vào quá trình thực hiện đồ án

- Xây dựng một website “Dễ nhìn, dễ sử dụng”

- Cung cấp cho người dùng các sản phẩm thuộc về mảng máy tính và thông tin chi tiết của chúng

- Việc quản lý cửa hàng cũng được thiết kế dễ vận hành

- Bảo mật thông tin của khách hàng.

ĐỐI TƯỢNG NGHIÊN CỨU

Website tôi xây dựng tuy chưa hoàn chỉnh, nhưng mang lại lợi ích cho người dùng trong việc mua bán sản phẩm Người dùng có thể dễ dàng cập nhật thông tin về sản phẩm mới, các mặt hàng bán chạy, và tìm kiếm sản phẩm một cách thuận tiện Ngoài ra, website cũng cho phép khách hàng đăng nhập để thực hiện giao dịch mua hàng.

KHÓA LUẬN TỐT NGHIỆP Trang 15

Nâng cao trình độ thiết kế website và phân tích một website thương mại điện tử là mục tiêu quan trọng của chúng em Điều này không chỉ giúp em hiểu rõ hơn về các ngôn ngữ lập trình mà còn cung cấp kiến thức sâu rộng về các phần mềm hỗ trợ trong quá trình thực hiện đồ án.

CÔNG NGHỆ SỬ DỤNG

Để thực hiện đề tài, nhóm chúng em sử dụng công nghệ:

- Restful API, NodeJS, ExpressJS để xây dựng nên hệ thống các APIs hỗ trợ lấy dữ liệu một cách chính xác và nhanh chóng nhất

- Cơ sở dữ liệu NoSQL là MongoDB để lưu trữ dũ liệu người dùng của hệ thống

- ReacJS và các thư viện hỗ trợ thiết kế giao diện để thiết kế một giao diện đẹp mắt và thân thiện với người dùng.

PHẠM VI NGHIÊN CỨU

Nhóm phát triển trang web kinh doanh linh kiện máy tính cung cấp các chức năng cơ bản của một trang web bán hàng, bao gồm xem, tìm kiếm, mua và thanh toán sản phẩm Ngoài ra, website còn tích hợp các chức năng quản lý như thêm, xóa và sửa sản phẩm cũng như quản lý người dùng.

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

Sau khi hoàn thiện đề tài, nhóm chúng em đã tích lũy nhiều kỹ năng và kiến thức bổ ích, đặc biệt về các công nghệ mới hiện nay Kinh nghiệm này sẽ hỗ trợ nhóm trong các dự án tương lai Sản phẩm của nhóm khi áp dụng thực tế sẽ đáp ứng nhu cầu mua sắm máy tính và linh kiện cho mọi người, đặc biệt là giới trẻ, mang lại sự tiện lợi và nhanh chóng trong việc mua sắm trực tuyến.

CƠ SỞ LÝ THUYẾT

NODEJS

- Node.js là một mã nguồn mở, một môi trường cho các máy chủ và ứng dụng mạng

Node.js vận dụng động cơ Google V8 JavaScript để thực thi mã, với một số lượng lớn mô-đun cơ bản được phát triển bằng JavaScript Các ứng dụng sử dụng Node.js chủ yếu cũng được lập trình bằng ngôn ngữ JavaScript.

Node.js đi kèm với một thư viện tích hợp cho phép các ứng dụng hoạt động như một máy chủ web mà không cần sử dụng phần mềm bên ngoài như Nginx, Apache HTTP Server hay IIS.

Node.js mang đến kiến trúc hướng sự kiện và API I/O không chặn, giúp tối ưu hóa hiệu suất ứng dụng và nâng cao khả năng mở rộng.

- Xây dựng websocket server (Chat server)

- Hệ thống Notification (Giống như facebook hayTwitter)

- Ứng dụng upload file trên client

- Các máy chủ quảng cáo

- Các ứng dụng dữ liệu thời gian thực khác

 Có tốc độ xử lý nhanh nhờ cơ chế xử lý bất đồng bộ (non- blocking)

 Giúp bạn dễ dàng mở rộng khi có nhu cầu phát triển website

 Có khả năng xử lý nhiều Requests cùng một lúc trong thời gian ngắn nhất

 Phù hợp để xây dựng những ứng dụng thời gian thực như các ứng dụng chat, mạng xã hội

 Nodejs gây hao tốn tài nguyên và thời gian

Node.js là một lựa chọn tiềm năng cho việc phát triển ứng dụng mới, nhưng khi triển khai các dự án quan trọng, nó có thể không phải là sự lựa chọn tối ưu nhất.

REACTJS

ReactJS là thư viện JavaScript mã nguồn mở do Facebook phát triển, nhằm tạo ra các ứng dụng web hấp dẫn, nhanh chóng và hiệu quả với mã hóa tối thiểu Mục tiêu chính của ReactJS là đảm bảo trang web hoạt động mượt mà, nhanh chóng, có khả năng mở rộng cao và dễ sử dụng.

Trong React, JSX được sử dụng thay vì JavaScript để thiết kế bố cục trang web, mang lại sự đơn giản hơn trong việc trích dẫn HTML và sử dụng cú pháp thẻ HTML cho việc render các subcomponent Việc sử dụng JSX giúp tối ưu hóa mã nguồn.

KHÓA LUẬN TỐT NGHIỆP Trang 18 khi biên soạn, vì vậy nó chạy nhanh hơn so với code JavaScript tương đương

- Single-way data flow (Luồng dữ liệu một chiều)

ReactJS không có những module chuyên dụng để xử lý data, vì vậy ReactJS chia nhỏ view thành các component nhỏ có mỗi quan hệ chặt chẽ với nhau

ReactJS sử dụng cơ chế one-way data flow, điều này có thể gây khó khăn cho những người mới tìm hiểu và áp dụng vào dự án Tuy nhiên, khi cấu trúc và chức năng của view trở nên phức tạp, ReactJS sẽ thể hiện rõ vai trò và ưu điểm của mình.

Redux là thư viện Javascript giúp quản lý trạng thái ứng dụng một cách hiệu quả Nó được biết đến như một công cụ quản lý trạng thái dự đoán (predictable state management tool) cho các ứng dụng viết bằng Javascript, thường được gọi là Redux js.

MONGODB

- MongoDB là một cơ sở dữ liệu mã nguồn mở và là cơ sở dữ liệu NoSQL hàng đầu, được hàng triệu người sử dụng

MongoDB là một cơ sở dữ liệu đa nền tảng, sử dụng các khái niệm Collection và Document, mang lại hiệu suất cao, tính khả dụng tối ưu và khả năng mở rộng dễ dàng.

Truy vấn ad hoc cho phép các trường thực hiện các truy vấn phạm vi, đồng thời kết hợp việc tìm kiếm biểu thức để trả về kết quả tài liệu cụ thể với kích thước nhất định.

- Nhân rộng: MongoDB cung cấp Replica Set cho phép nhân 2 hoặc nhiều bản sao của dữ liệu Đồng thời, mỗi bản sao lại đóng vai trò chính và phụ

MongoDB thực hiện cân bằng tải bằng cách sử dụng Shard key để phân chia dữ liệu thành các phạm vi và phân phối chúng đồng đều Hệ thống có khả năng chạy trên nhiều máy chủ khác nhau, đồng thời thực hiện sao chép dữ liệu và cân bằng tải, giúp duy trì hoạt động liên tục ngay cả khi gặp sự cố phần cứng.

- Lưu trữ tệp: tính năng lưu trữ tệp được dùng như một hệ thống tệp

(gọi là GridFS) đóng vai trò cân bằng tải, đồng thời, sao chép dữ liệu trên nhiều máy tính

- Giới hạn kích thước collection: Các collection được MongoDB hỗ trợ thường có kích thước cố định [4]

JSON WEB TOKEN

JSON Web Token (JWT) là một chuẩn mở (RFC 7519) định nghĩa một cách nhỏ gọn và khép kín để truyền một cách an toàn thông tin giữa

Chuỗi Token trong định dạng JSON bao gồm ba phần chính: header, payload và signature, được phân tách bằng dấu “.”.

JSON Web Token bao gồm 3 phần:

- Header: Phần header sẽ chứa kiểu dữ liệu , và thuật toán sử dụng để mã hóa ra chuỗi JWT

- Payload: Phần payload sẽ chứa các thông tin mình muốn đặt trong chuỗi Token như username, userId,…

- Signature: Phần Signature sẽ được tạo ra bằng cách mã hóa phần header , payload kèm theo một chuỗi secret (khóa bí mật) [5]

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

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

3.1.1 Website X-Gear - Kinh doanh linh kiện máy tính Địa chỉ truy cập: https://xgear.net/

Hình 3.1:Website X-gear Các chức năng chính:

 Hiển thị danh sách các linh kiện máy tính

 Phân loại các loại linh kiện

 Tìm kiếm theo tên, loại linh kiện

 Xem chi tiết sản phẩm với các thông số của linh kiện cũng như góc nhìn đa chiều của sản phẩm

 Thanh toán bằng nhiều hình thức Ưu điểm:

 Giao diện với 3 tông màu trắng, đen, xám hiện đại

 Trang chi tiết sản phẩm giới thiệu chi tiết cũng như đem lại nhiều thông tin cho khách hàng

 Không phân loại theo từng nhu cầu (văn phòng, chơi game, )

3.1.2 Website GearVN - Hi end PC & Gaming Gear Địa chỉ truy cập: https://gearvn.com/

Hình 3.2: Website GearVN Các chức năng chính:

 Trang chủ được chia làm nhiều vùng với từng chức năng riêng

 Phân loại các loại linh kiện

 Lọc sản phẩm theo nhu cầu người dùng

 Phân loại theo từng nhu cầu của người dùng

 Phân loại chi tiết theo từng dòng máy

 Có hướng dẫn và chính sách cụ thể mang lại sự tin tưởng cho người dùng

 Trang chủ với quá nhiều hình ảnh và thông tin làm “ngộp” đối với người dùng mới truy cập lần đầu

3.1.3 Website PHONGVU.VN - Website kinh doanh Laptop, PC Địa chỉ truy cập: https://phongvu.vn

Hình 3.3: Website Phongvu Các chức năng chính:

 Phân loại các loại linh kiện ngay trên trang chủ

 Lọc sản phẩm theo loại

 Giao diện bắt mắt, hiện đại

 Cho người dùng biết số lượng còn lại của sản phẩm

 Hiển thị danh sách các sản phẩm người dùng vừa xem

 Sản phẩm hiện thị không quá nhiều, tạo cảm giác vừa đủ

 Phần phân loại sản phẩm khá đại trà, dễ bắt gặp ở các trang web khác

 Chưa hiển thị các sản phẩm bán chạy khiến cho người dùng thiếu thông tin trong việc lựa chọn

Thông qua ba trang web kinh doanh thiết bị và linh kiện máy tính, nhóm đã thống nhất về các chức năng cần thiết cho một trang web bán hàng.

 Giao diện cần phải bắt mắt, hiện đại để người dùng dễ dàng thao tác

 Các tính năng như Xem sản phẩm, tìm kiếm sản phẩm, quá trình mua hàng phải được tập trung phát triển

 Xây dựng thêm các chức năng thêm, xoá, sửa cho người quản lý

 Phát triển thêm dịch vụ phản hồi giữa người dùng và người quản lý.

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

- Xem chi tiết thông tin của một sản phẩm

- Xem lịch sử đơn hàng đã đặt

- Chỉnh sửa thông tin tài khoản

- Quản lý địa chỉ giao hàng

- Quản lý loại sản phẩm

3.2.2 Yêu cầu phi chức năng

- Tốc độ tìm kiếm nhanh và chính xác

- Bảo mật được thông tin người dùng và thông tin sách, thu hẹp không gian lưu trữ, tránh thất lạc dữ liệu

- Tốc độ xử lý các thao tác nhanh chóng và chính xác, thời gian phản hồi nhanh

- Có thể mở rộng chức năng theo yêu cầu người dùng

MÔ HÌNH HOÁ YÊU CẦU

Hình 3.4: Lược đồ Usecase Người dùng

Hình 3.5: Lược đồ Usecase Người quản lý (1)

Hình 3.6: Lược đồ Usecase Người quản lý (2)

Mô tả Người dùng đăng nhập vào hệ thống Đối tượng Người dùng

Tiền điều kiện Người dùng đã được tạo tài khoản trong hệ thống

Nếu đăng nhập thành công: Người dùng được xác thực và trang chủ hiện ra

Nếu đăng nhập không thành công: Người dùng không truy cập được vào hệ thống.

Use case bắt đầu khi người dùng cần thực hiện chức năng bất kì của hệ thống cần xác thực quyền truy cập

1 Hệ thống hiển thị giao diện đăng nhập

2 Người dùng nhập tên tài khoản

3 Người dùng nhập mật khẩu

4 Hệ thống xác thực Tài khoản

5 Hệ thống xác định vai trò của người dùng

6 Hệ thống hiển thị thông báo Đăng nhập thành công

7 Hệ thống mở màn hình trang chủ và mở các chức năng được phép truy cập của người dùng.

Nếu người dùng chọn Tài khoản đăng nhập không chính xác Những công việc sau được thực hiện:

1 Hệ thống hiển thị thông báo Đăng nhập không thành công

2 Hệ thống yêu cầu người dùng đăng nhập lại

Nếu người dùng chọn Tài khoản đăng nhập không chính xác Những công việc sau được thực hiện:

1 Hệ thống hiển thị thông báo Đăng nhập không thành công

2 Hệ thống yêu cầu người dùng đăng nhập lại

3 Bước 2 ở Luồng cơ bản được thực hiện

Luồng mở rộng Không có

Mô tả Đăng xuất tài khoản khỏi trang web Đối tượng Người dùng

Tiền điều kiện Người dùng đang đăng nhập trong hệ thống

Hậu điều kiện Chuyển người dùng về trang chủ

1 Người dùng nhấn “Đăng xuất”

2 Hệ thống thoát khỏi tài khoản người dùng, trả về trang chủ của web

Nếu việc đăng xuất thất bại thì những công việc sau được thực hiện:

1 Hệ thống giữ nguyên trạng thái hiện tại

Mô tả Người dùng đăng ký vào hệ thống Đối tượng Người dùng

Tiền điều kiện Người dùng chưa có tài khoản trong hệ thống

Nếu đăng ký thành công: Người dùng được chuyển đến form đăng nhập

Nếu đăng nhập thất bại: Người dùng được yêu cầu đăng ký lại.

1 Chọn chức năng “Đăng ký”

2 Nhập tên đăng nhập, mật khẩu, thông tin cá nhân, của khách hàng

3 Hệ thống kiểm tra sự hợp lệ của thông tin vừa nhập

4 Hiện thông báo đăng ký thành công và chuyển về trang Đăng nhập

Nếu khách hàng không thể tạo được tài khoản Những công việc sau được thực hiện:

1 Hệ thống mô tả lý do xác thực bị sai (thông tin chưa hợp lệ hoặc tên đăng nhập này đã tồn tại)

2 Hệ thống lưu ý người dùng kiểm tra lại lần nữa

Bảng 3.4: Usecase xem thông tin chi tiết sản phẩm

Tên Xem thông tin chi tiết sản phẩm

Mô tả Người dùng xem chi tiết thông tin sản phẩm. Đối tượng Quản trị viên, Người dùng, Khách

Tiền điều kiện Người dùng truy cập thành công vào trang web.

Nếu xem thông tin thành công: Hệ thống hiển thị thông tin chi tiết của sản phẩm

Nếu xem thông tin không thành công: Hệ thống thông báo chưa cập nhật thông tin của sản phẩm Quay về Trang chủ.

Use case bắt đầu khi người dùng chọn sản phẩm cần xem thông tin chi tiết

1 Hệ thống kiểm tra thông tin sản phẩm đã chọn

2 Hệ thống truy vấn thông tin chi tiết của sản phẩm

3 Hệ thống hiển thị thông tin chi tiết của sản phẩm.

Nếu sản phẩm được chọn không hợp lệ Những công việc sau được thực hiện:

1 Hệ thống hiển thị thông báo chưa cập nhật thông tin sản phẩm

Bảng 3.5: Usecase Tra cứu sản phẩm

Tên Tra cứu sản phẩm

Mô tả Người dùng tra cứu sản phẩm có cửa hàng Đối tượng Quản trị viên, Người dùng, Khách

Tiền điều kiện Người dùng truy cập thành công vào trang web.

Nếu tìm kiếm thành công: Hệ thống hiển thị danh sách sản phẩm hợp lệ

Nếu tìm kiếm không thành công: Hệ thống thông báo không tìm thấy sản phẩm.

Use case bắt đầu khi người dùng chọn chức năng Tra cứu sản phẩm

1 Người dùng nhập tên sản phẩm cần tra cứu

2 Người dùng tuỳ chọn Bộ lọc và Sắp xếp cho kết quả tra cứu

3 Người dùng chọn biểu tượng Tra cứu

4 Hệ thống kiểm tra dữ liệu nhập vào

5 Hệ thống truy vấn các sản phẩm theo thông tin được nhập vào

6 Hệ thống hiển thị danh sách sản phẩm cần tra cứu.

Nếu tên sản phẩm nhập vào không hợp lệ Những công việc sau được thực hiện:

1 Hệ thống hiển thị thông báo không thành công

2 Hệ thống gợi ý nhập lại thông tin.

Bảng 3.6: Usecase chỉnh sửa thông tin tài khoản

Tên Chỉnh sửa thông tin tài khoản

Mô tả Người dùng chỉnh sửa thông tin tài khoản. Đối tượng Người dùng

Tiền điều kiện Người dùng đăng nhập thành công vào hệ thống.

Nếu chỉnh sửa thông tin thành công: Hệ thống thông báo chỉnh sửa thông tin thành công

Nếu đăng nhập không thành công: Hệ thống thông báo chỉnh sửa không thành công Quay về Trang chủ.

Use case bắt đầu khi người dùng chọn trang thông tin tài khoản

1 Hệ thống hiển thị các trường thông tin mà người dùng có thể chỉnh sửa

2 Người dùng chỉnh sửa thông tin tài khoản

3 Người dùng chọn nút Lưu

4 Hệ thống kiểm tra các trường thông tin đã hoàn thành

5 Hệ thống xác minh quyền của tài khoản

6 Hệ thống lưu thông tin chỉnh sửa tài khoản

7 Hệ thống hiển thị kết quả lưu dữ liệu.

Nếu dữ liệu người dùng nhập vào không hợp lệ Những công việc sau được thực hiện:

1 Hệ thống hiển thị thông báo Chỉnh sửa không thành công

2 Hệ thống yêu cầu người dùng nhập lại thông tin

Bảng 3.7: Usecase Thay đổi mật khẩu

Tên Thay đổi mật khẩu

Mô tả Người dùng thay đổi mật khẩu. Đối tượng Người dùng

Nếu thay đổi mật khẩu thành công: Hệ thống thông báo chỉnh sửa thông tin thành công

Nếu thay đổi mật khẩu không thành công: Hệ thống thông báo chỉnh sửa không thành công.

Use case bắt đầu khi người dùng chọn trang thông tin tài khoản

1 Hệ thống hiển thị các trường để thay đổi mật khẩu

2 Người dùng thay đổi mật khẩu tài khoản

4 Hệ thống kiểm tra các trường không tin đã hoàn thành

6 Hệ thống lưu mật khẩu mới.

Bảng 3.8: Usecase Thêm địa chỉ mới

Tên Thêm địa chỉ mới

Mô tả Người dùng thêm địa chỉ mới Đối tượng Người dùng

Nếu thêm địa chỉ mới thành công: Hệ thống thông báo chỉnh sửa thông tin thành công

Nếu thêm địa chỉ mới không thành công: Hệ thống thông báo chỉnh sửa không thành công Quay về Trang chủ.

Use case bắt đầu khi người dùng chọn trang thông tin tài khoản  Quản lý địa chỉ

1 Hệ thống hiển thị các trường thông tin mà người dùng có thể thêm mới

2 Người dùng thêm địa chỉ mới

6 Hệ thống lưu địa chỉ mới

1 Hệ thống hiển thị thông báo thêm địa chỉ mới không thành công

Bảng 3.9: Usecase Chỉnh sửa địa chỉ

Tên Chỉnh sửa địa chỉ

Mô tả Người dùng chỉnh sửa địa chỉ Đối tượng Người dùng

Nếu chỉnh sửa địa chỉ thành công: Hệ thống thông báo chỉnh sửa thông tin thành công

Nếu chỉnh sửa địa chỉ không thành công: Hệ thống thông báo chỉnh sửa không thành công Quay về Trang chủ.

Use case bắt đầu khi người dùng chọn trang thông tin tài khoản  Quản lý địa chỉ

1 Hệ thống hiển thị các trường thông tin mà người dùng có thể thêm mới

2 Người dùng chỉnh sửa địa chỉ

6 Hệ thống lưu địa chỉ mới

1 Hệ thống hiển thị thông báo chỉnh sửa địa chỉ không thành công

Bảng 3.10: Usecase thêm sản phẩm vào giỏ hàng

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

Mô tả Người dùng thêm sản phẩm vào giỏ hàng cá nhân Đối tượng Người dùng

Tiền điều kiện Người dùng đăng nhập thành công vào hệ thống

Nếu thêm sản phẩm vào giỏ hàng thành công: Hệ thống thông báo thành công

Nếu thêm sản phẩm không thành công: Hệ thống thông báo không thành công Yêu cầu người người dùng thực hiện lại

Use case bắt đầu khi người dùng chọn thêm sản phẩm vào Giỏ hàng

1 Hệ thống kiểm tra thông tin sản phẩm được chọn

2 Hệ thống lưu thông tin sản phẩm vào giỏ hàng

3 Hệ thống thông báo thêm sản phẩm vào giỏ hàng thành công

(Thất bại) Ở bước 1 và 3, nếu sản phẩm được chọn đã tồn tại Những công việc sau được thực hiện:

1 Hệ thống tự động nâng số lượng sản phẩm trong giỏ hàng lên 1

Bảng 3.11: Usecase Xoá sản phẩm khỏi giỏ hàng

Tên Xoá sản phẩm khỏi giỏ hàng

Mô tả Người dùng xoá sản phẩm khỏi giỏ hàng Đối tượng Người dùng

Tiền điều kiện Người dùng đăng nhập thành công vào hệ thống

Nếu xoá sản phẩm thành công: Sản phẩm biến mất khỏi giỏ hàng

Nếu xoá sản phẩm không thành công: Hệ thống thông báo không thành công Yêu cầu người người dùng thực hiện lại

Use case bắt đầu khi người dùng chọn biểu tượng Xoá sản phẩm khỏi Giỏ hàng:

1 Người dùng chọn sản phẩm cần xoá

2 Người dùng chọn biểu tượng Xoá

5 Hệ thống yêu cầu xác nhận thao tác

6 Người dùng chọn Xác nhận

7 Hệ thống xoá thông tin sản phẩm khỏi Giỏ hàng

8 Hệ thống hiện thị giao diện giỏ hàng sau khi xoá sản phẩm

(Thất bại) Ở bước 1 và 3, nếu sản phẩm được chọn không hợp lệ

Những công việc sau được thực hiện:

1 Hệ thống hiển thị thông báo lý do xoá không thành công

2 Hệ thống yêu cầu chọn sản phẩm khác Quay lại bước 1 ở luồng cơ bản

Mô tả Người dùng thực hiện chức năng thanh toán Đối tượng Người dùng

Tiền điều kiện Người dùng chọn nút Thanh toán trong trang đơn hàng

Hậu điều kiện Không có

Usecase được thực hiện khi người dùng bấm nút Thanh toán đơn hàng:

1 Hệ thống hiển thị trang thanh toán

2 Người dùng điền thông tin địa chỉ, số điện thoại, phương thức thanh toán

3 Hệ thống yêu cầu người dùng xác nhận lại thông tin đơn hàng đó

(Thất bại) Hệ thống thông báo các trường không hợp lệ và yêu cầu nhập lại

3.3.2.2 Phía Quản trị viên (Admin)

Bảng 3.13: Usecase thêm sản phẩm vào cửa hàng

Tên Thêm Sản phẩm vào cửa hàng

Mô tả Quản trị viên thêm sản phẩm vào cửa hàng Đối tượng Quản trị viên

Tiền điều kiện Quản trị viên đăng nhập thành công vào hệ thống

Khi thêm sản phẩm thành công, hệ thống sẽ thông báo thành công Ngược lại, nếu việc thêm sản phẩm không thành công, hệ thống sẽ hiển thị thông báo không thành công và yêu cầu thực hiện lại.

Use case bắt đầu khi quản trị viên chọn chức năng Thêm sản phẩm

1 Hệ thống hiển thị các trường thông tin cần nhập

2 Quản trị viên nhập thông tin và tải file sản phẩm

3 Quản trị viên chọn Xác nhận

5 Hệ thống kiểm tra thông tin sản phẩm được nhập

6 Hệ thống hiển thị thông tin đã nhập

7 Hệ thống lưu thông tin sản phẩm và tiến hành tải sản phẩm

8 Hệ thống thông báo kết quả.

(Thất bại) Ở bước 2, nếu quản trị viên nhập thông tin không hợp lệ Những công việc sau được thực hiện:

1 Hệ thống hiển thị thông báo thông tin không hợp lệ

2 Hệ thống yêu cầu nhập lại thông tin Quay lại bước 1 ở luồng cơ bản.

Bảng 3.14: Usecase chỉnh sửa thông tin sản phẩm

Tên Chỉnh sửa thông tin Sản phẩm

Mô tả Quản trị viên chỉnh sửa thông tin sản phẩm Đối tượng Quản trị viên

Nếu chỉnh sửa thông tin sản phẩm thành công: Hệ thống thông báo thành công

Nếu chỉnh sửa thông tin sản phẩm không thành công: Hệ thống thông báo không thành công Yêu cầu thực hiện lại.

Use case bắt đầu khi Quản trị viên chọn chức năng Chỉnh sửa thông tin sản phẩm

1 Hệ thống hiển thị các trường thông tin có thể chỉnh sửa

2 Quản trị viên chỉnh sửa thông tin sản phẩm

6 Hệ thống hiển thị thông tin đã chỉnh sửa

7 Hệ thống lưu lại thông tin chỉnh sửa sản phẩm

8 Hệ thống thông báo kết quả

(Thất bại) Ở bước 2, nếu Quản trị viên nhập thông tin không hợp lệ

2 Hệ thống yêu cầu nhập lại thông tin Quay lại bước 1 ở luồng cơ bản

Bảng 3.15: Usecase Cập nhật trạng thái đơn hàng

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

Mô tả Quản trị viên cập nhật trạng thái đơn hàng Đối tượng Quản trị viên

Hậu điều kiện Nếu cập nhật thành công: Hệ thống thông báo thành công

Nếu cập nhật không thành công: Hệ thống thông báo không thành công Yêu cầu thực hiện lại

Use case bắt đầu khi Quản trị viên chọn vào chi tiết đơn hàng

1 Hệ thống hiển thị các trường thông tin đơn hàng

2 Quản trị viên cập nhật trạng thái đơn hàng

5 Hệ thống lưu lại thông tin cập nhật

2 Hệ thống yêu cầu cập nhật thông tin Quay lại bước 1 ở luồng cơ bản

Bảng 3.16: Usecase thêm loại Sản phẩm

Tên Thêm loại Sản phẩm

Mô tả Quản trị viên thêm loại sản phẩm vào cửa hàng Đối tượng Quản trị viên

Nếu thêm loại sản phẩm thành công: Hệ thống thông báo thành công

Nếu thêm loại sản phẩm không thành công: Hệ thống thông báo không thành công Yêu cầu thực hiện lại.

Use case bắt đầu khi quản trị viên chọn chức năng Thêm loại sản phẩm

2 Quản trị viên nhập thông tin

5 Hệ thống kiểm tra thông tin loại sản phẩm được nhập

7 Hệ thống lưu thông tin loại sản phẩm

(Thất bại) Ở bước 2, nếu quản trị viên nhập thông tin không hợp lệ

Bảng 3.17: Usecase chỉnh sửa thông tin loại sản phẩm

Tên Chỉnh sửa thông tin loại sản phẩm

Mô tả Quản trị viên chỉnh sửa thông tin loại sản phẩm Đối tượng Quản trị viên

Nếu chỉnh sửa thông tin loại sản phẩm thành công: Hệ thống thông báo thành công

Nếu chỉnh sửa thông tin loại sản phẩm không thành công: Hệ thống thông báo không thành công Yêu cầu thực hiện lại.

Use case bắt đầu khi Quản trị viên chọn chức năng Chỉnh sửa thông tin loại sản phẩm

2 Quản trị viên chỉnh sửa thông tin loại sản phẩm

5 Hệ thống kiểm tra thông tin loại sản phẩm được chọn

7 Hệ thống lưu lại thông tin chỉnh sửa sản phẩm

Bảng 3.18: Usecase Thêm người dùng

Mô tả Quản trị viên thêm người dùng Đối tượng Quản trị viên

Nếu thêm thêm người dùng thành công: Hệ thống thông báo thành công

Nếu thêm người dùng không thành công: Hệ thống thông báo không thành công Yêu cầu thực hiện lại.

Use case bắt đầu khi quản trị viên chọn chức năng Thêm thêm người dùng

5 Hệ thống kiểm tra thông tin người dùng được nhập

7 Hệ thống lưu thông tin loại người dùng

Bảng 3.19: Usecase chỉnh sửa người dùng

Tên Chỉnh sửa thông tin người dùng

Mô tả Quản trị viên chỉnh sửa thông tin người dùng Đối tượng Quản trị viên

Nếu chỉnh sửa thông tin người dùng thành công: Hệ thống thông báo thành công

Nếu chỉnh sửa thông tin người dùng không thành công: Hệ thống thông báo không thành công Yêu cầu thực hiện lại.

Use case bắt đầu khi Quản trị viên chọn chức năng Chỉnh sửa thông tin người dùng

2 Quản trị viên chỉnh sửa thông tin người dùng

5 Hệ thống kiểm tra thông tin người dùng được chọn

7 Hệ thống lưu lại thông tin chỉnh sửa người dùng

Bảng 3.20: Usecase Thêm thương hiệu

Mô tả Quản trị viên thêm thương hiệu mới vào cửa hàng Đối tượng Quản trị viên

Nếu thêm thương hiệu thành công: Hệ thống thông báo thành công

Nếu thêm thương hiệu không thành công: Hệ thống thông báo không thành công Yêu cầu thực hiện lại.

Use case bắt đầu khi quản trị viên chọn chức năng Thêm thương hiệu

5 Hệ thống kiểm tra thông tin thương hiệu được nhập

7 Hệ thống lưu thông tin thương hiệu

Bảng 3.21: Usecase chỉnh sửa thương hiệu

Tên Chỉnh sửa thông tin thương hiệu

Mô tả Quản trị viên chỉnh sửa thông tin thương hiệu Đối tượng Quản trị viên

Nếu chỉnh sửa thông tin thương hiệu thành công: Hệ thống thông báo thành công

Nếu chỉnh sửa thông tin thương hiệu không thành công: Hệ thống thông báo không thành công Yêu cầu thực hiện lại.

Use case bắt đầu khi Quản trị viên chọn chức năng Chỉnh sửa thông tin thương hiệu

2 Quản trị viên chỉnh sửa thông tin thương hiệu

5 Hệ thống kiểm tra thông tin thương hiệuđược chọn

7 Hệ thống lưu lại thông tin chỉnh sửa

Mô tả Quản trị viên thống kê theo đơn hàng, số liệu người dùng của cửa hàng Đối tượng Quản trị viên

Hậu điều kiện Nếu thống kê thành công: Hệ thống hiển thị thống kê

Nếu tham gia không thành công: Hệ thống thông báo không thành công.

Use case bắt đầu khi Quản trị viên truy cập vào chức năng Quản lý – Thống kê của Cửa hàng:

1 Quản trị viên truy cập vào chức năng Thống kê

2 Hệ thống hiển thị thông tin thống kê.

(Thất bại) Ở bước 2, nếu hệ thống truy xuất thông tin không thành công Những công việc sau được thực hiện:

1 Hệ thống hiển thị thông báo đã xảy ra lỗi.

THIẾT KẾ PHẦN MỀM

LƯỢC ĐỒ LỚP

LƯỢC ĐỒ TUẦN TỰ

Hình 4.2: Lược đồ tuần tự Chức năng Đăng nhập

KHÓA LUẬN TỐT NGHIỆP Trang 53 4.2.2 Chức năng đăng kí

Hình 4.3: Lược đồ tuần tự Chức năng Đăng ký

KHÓA LUẬN TỐT NGHIỆP Trang 54 4.2.3 Chức năng đăng xuất

Hình 4.4: Lược đồ tuần tự Chức năng Đăng xuất

4.2.4 Chức năng xem thông tin cá nhân

Hình 4.5: Lược đồ tuần tự Chức năng xem thông tin cá nhân

4.2.5 Chức năng chỉnh sửa thông tin cá nhân

Hình 4.6: Lược đồ tuần tự Chức năng Chỉnh sửa thông tin cá nhân

4.2.6 Chức năng xem danh sách địa chỉ

Hình 4.7: Lược đồ chức năng xem danh sách địa chỉ

4.2.7 Chức năng thêm địa chỉ mới

Hình 4.8: Lược đồ chức năng thêm địa chỉ mới

4.2.8 Chức năng Chỉnh sửa địa chỉ

Hình 4.9: Lược đồ chức năng Chỉnh sửa địa chỉ

4.2.9 Chức năng Xem thông tin sản phẩm

Hình 4.10: Lược đồ tuần tự Chức năng Xem thông tin sản phẩm

4.2.10 Chức năng tra cứu sản phẩm

Hình 4.11: Lược đồ tuần tự Chức năng tra cứu sản phẩm

4.2.11 Chức năng thêm sản phẩm vào giỏ hàng

Hình 4.12: Lược đồ tuần tự thêm sản phẩm vào giỏ hàng

4.2.12 Chức năng xóa sản phẩm khỏi giỏ hàng

Hình 4.13: Lược đồ tuần tự Chức năng xóa sản phẩm khỏi giỏ hàng

KHÓA LUẬN TỐT NGHIỆP Trang 63 4.2.13 Chức năng thanh toán

Hình 4.14: Lược đồ tuần tự Chức năng thanh toán

KHÓA LUẬN TỐT NGHIỆP Trang 64 4.2.14 Chức năng Thêm sản phẩm

Hình 4.15: Lược đồ tuần tự Chức năng Thêm sản phẩm

4.2.15 Chức năng Cập nhật sản phẩm

Hình 4.16: Lược đồ tuần tự Chức năng Cập nhật sản phẩm

4.2.16 Chức năng xoá sản phẩm

Hình 4.17: Lược đồ tuần tự Chức năng xoá sản phẩm

KHÓA LUẬN TỐT NGHIỆP Trang 67 4.2.17 Chức năng Thêm loại sản phẩm

Hình 4.18: Lược đồ tuần tự Chức năng thêm loại sản phẩm

KHÓA LUẬN TỐT NGHIỆP Trang 68 4.2.18 Chức năng cập nhật loại sản phẩm

Hình 4.19: Lược đồ tuần tự Chức năng cập nhật loại sản phẩm

KHÓA LUẬN TỐT NGHIỆP Trang 69 4.2.19 Chức năng xoá loại sản phẩm

Hình 4.20: Lược đồ tuần tự Chức năng xoá loại sản phẩm

KHÓA LUẬN TỐT NGHIỆP Trang 70 4.2.20 Chức năng thêm người dùng

Hình 4.21: Lược đồ tuần tự Chức năng thêm người dùng

KHÓA LUẬN TỐT NGHIỆP Trang 71 4.2.21 Chức năng chỉnh sửa thông tin người dùng

Hình 4.22: Lược đồ tuần tự Chức năng chỉnh sửa thông tin người dùng

Hình 4.23: Lược đồ tuần tự Chức năng xoá người dùng

KHÓA LUẬN TỐT NGHIỆP Trang 73 4.2.22 Chức năng thêm thương hiệu

Hình 4.24: Lược đồ tuần tự Chức năng thêm thương hiệu

KHÓA LUẬN TỐT NGHIỆP Trang 74 4.2.23 Chức năng Cập nhật thương hiệu

Hình 4.25: Lược đồ tuần tự Chức năng cập nhật thương hiệu

4.2.24 Chức năng xoá thương hiệu

Hình 4.26: Lược đồ tuần tự Chức năng xoá thương hiệu

4.2.25 Chức năng cập nhật trạng thái đơn hàng

Hình 4.27: Lược đồ tuần tự Chức năng cập nhật trạng thái đơn hàng

4.2.26 Chức năng xem Thống kê

Hình 4.28: Lược đồ tuần tự Chức năng xem Thống kê

BẢNG DỮ LIỆU

STT Thuộc tính Kiểu dữ liệu Ý nghĩa Ghi chú

1 _id ObjectId Mã dữ liệu MongoDB

2 uid String Mã dữ liệu Được tự sinh ra khi tạo mới

3 code String Mã phân quyền

4 name String Tên phân quyền Admin, sale,…

3 code String Mã người dùng

4 username String Tên đăng nhập

5 name String Tên người dùng

6 unsignedName String Tên mã hóa Bỏ dấu tiếng việt, bỏ các kí hiệu đặc biệt

7 password String Mật khẩu Hash để bảo mật

8 email String Email của người dùng

9 phone String Sô điện thoại người dùng

10 status Boolean Trạng thái tài khoản true: Đang áp dụng false: Vô hiệu hóa

11 avatar String Ảnh đại diện trên hệ thống

12 roleId String Phân quyền cho người dùng

13 createAt Date Thời gian tạo

14 updateAt Date Thời gian cập nhật

3 code String Mã khách hàng

4 username String Tên đăng nhập

5 password String Mật khẩu Hash để bảo mật

8 fullName String Tên đầy đủ

11 phone String Sô điện thoại khách hàng

12 status Boolean Trạng thái tài khoản true: Đang áp dụng false: Vô hiệu hóa

13 avatar String Ảnh đại diện trên hệ thống

14 roleId String Phân quyền cho người dùng

1 _id ObjectId Mã dữ liệu

6 province String Thành phố, tỉnh

7 customerId String Mã dữ liệu khách hàng

1 _id ObjectId Mã dữ liệu

3 code String Mã sản phẩm

4 name String Tên sản phẩm

5 unsignedName String Tên mã hóa sản phẩm

6 price Number Giá sản phẩm

7 quantity Number Số lượng còn lại

8 status Boolean Trạng thái sản phẩm true: Đang áp dụng false: Vô hiệu hóa

9 promotion Number Phầm trăm khuyến mãi

10 promotionPrice Number Giá sản phẩm sau khuyến mãi

11 expiryDate String Hạn sử dụng

12 productType String Loại sản phẩm Uid loại sản phẩm

13 brand String Thương hiệu sản phẩm

14 image Array Lưu các đường dẫn ảnh

15 descriptionSummary String Mô tả tóm tắt sản phẩm

16 descriptionDetail String Mô tả chi tiết sản phẩm

19 customerComment Array Đánh giá sản phẩm

3 code String Mã loại sản phẩm

4 name String Tên loại sản phẩm

5 unsignedName String Tên mã hóa loại sản phẩm

6 image String Đường dẫn ảnh Lưu URL ảnh

3 code String Mã thương hiệu

4 name String Tên thương hiệu

5 unsignedName String Tên mã hóa thương hiệu

3 customerId String Uid khách hàng

4 product Array Mảng product Lưu:

+ Uid – String - Tự sinh khi thêm sản phẩm

+ ProductId – String – Uid sản phẩm

+ number – Number – Số lượng sản phẩm

3 orderCode String Mã đơn hàng

4 customerId String Uid khách hàng

5 product Array Các sản phẩm trong giỏ hàng

Thông tin sản phẩm trong giỏ hàng

6 status String Trạng thái đơn hàng

7 date String Ngày tạo đơn

8 address Array Thông tin địa chỉ Lưu các trường giống address

10 totalAmount Number Tổng giá trị đơn hàng

11 Paid Boolean Trạng thái thanh toán

12 typePayment String Phương thước thanh toán

13 transportFee Number Phí vận chuyển

LƯỢC ĐỒ THỰC THỂ KẾT HỢP (ERD)

Hình 4.29: Lược đồ thực thể kết hợp

THIẾT KẾ GIAO DIỆN

4.5.1.1 Giao diện trang Đăng nhập

Hình 4.30: Giao diện trang đăng nhập

Bảng 4.10: Các đối tượng trang Đăng nhập

STT Tên Định dạng Mô tả

1 Tên đăng nhập Text Người dùng nhập tên tài khoản

2 Mật khẩu Text Người dùng nhập mật khẩu

3 Đăng nhập Button Chuyển người dùng đến trang chủ

4 Tạo tài khoản mới Button Chuyển người dùng đến trang đăng ký

4.5.1.2 Giao diện trang Đăng ký

Hình 4.31: Giao diện trang Đăng ký

Bảng 4.11: Các đối tượng trang Đăng ký

1 Tên đăng nhập Text Người dùng nhập số tên tài khoản

2 Mật khẩu Text Người dùng nhập mật khẩu

3 Tên Text Người dùng nhập họ

4 Họ Text Người dùng nhập tên

5 Email Text Người dùng nhập email

6 Số điện thoại Text Người dùng nhập số điện thoại

7 Đăng ký Button Tiến hành đăng kí tài khoản

8 Quay về trang đăng nhập Button Quay lại trang đăng nhập

Hình 4.32: Giao diện trang chủ 1

Bảng 4.12: Các đối tượng Trang chủ 1

1 Trang chủ Link Chuyển hướng đến trang chủ

2 Tất cả sản phẩm Link Chuyển hướng đến trang sản phẩm

3 Thông tin người dùng Link Chuyển hướng đến trang thông tin người dùng

4 Lịch sử mua hàng Link Chuyển hướng đến trang Lịch sử mua hàng

5 Giỏ hàng Link Chuyển hướng đến trang giỏ hàng

6 Nhắn tin Link Chuyển đến trang nhắn tin với quản trị viên

7 Đăng xuất Button Đăng xuất khỏi tài khoản

8 Mua ngay Link Chuyển hướng đến trang sản phẩm

9 Xem tất cả sản phẩm Link Chuyển hướng đến trang sản phẩm

1 Sản phẩm Link Hiển thị tất cả sản phẩm

2 Bo mạch chủ Link Hiển thị sản phẩm thuộc loại Bo mạch chủ

3 CPU Link Hiển thị sản phẩm thuộc loại CPU

4 Quạt tản nhiệt Link Hiển thị sản phẩm thuộc loại Quạt tản nhiệt

5 Case Gaming Link Hiển thị sản phẩm thuộc loại Case Gaming

6 RAM Link Hiển thị sản phẩm thuộc loại RAM

7 Thông tin sản phẩm Link Chuyển đến trang chi tiết sản phẩm

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

1 Thương hiệu Link Hiển thị tất cả sản phẩm

2 Intel Link Hiển thị sản phẩm của Intel

3 ASUS Link Hiển thị sản phẩm của ASUS

4 AMD Link Hiển thị sản phẩm của AMD

5 Corsair Link Hiển thị sản phẩm Corsair

6 Thông tin sản phẩm Link Chuyển đến trang chi tiết sản phẩm

4.5.1.4 Giao diện Trang sản phẩm

Hình 4.35: Giao diện trang sản phẩm

Bảng 4.15: Các đối tượng trang Sản phẩm

1 Ô tìm kiếm Text Người dùng nhập tên sản phẩm cần tìm

2 Giá Text Lọc theo giá

3 Thương hiệu Text Lọc theo thương hiệu

4 Loại sản phẩm Text Lọc theo loại sản phẩm

5 Lọc Button Tiến hành lọc sản phẩm

6 Làm mới Button Làm mới các tiêu chí lọc

7 Tên sản phẩm Link Dẫn đến trang chi tiết sản phẩm

9 Prev Button Chuyển đến trang trước

10 Next Button Chuyển đến trang tiếp theo

4.5.1.5 Giao diện Trang chi tiết sản phẩm

Hình 4.36: Giao diện trang Chi tiết sản phẩm

Bảng 4.16: Các đối tượng trang Chi tiết sản phẩm

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

2 Mô tả Button Hiển thị mô tả của sản phẩm

3 Đánh giá Button Hiển thị đánh giá của sản phẩm

4 Bạn có thể thích Text Các sản phẩm của cửa hàng

4.5.1.6 Giao diện Trang thông tin người dùng

Hình 4.37: Giao diện trang Thông tin người dùng

Bảng 4.17: Các đối tượng trang Thông tin cá nhân

1 Thông tin cá nhân Button Hiển thị thông tin người dùng

2 Quản lý mật khẩu Button Hiển thị trang Quản lý mật khẩu

3 Quản lý địa chỉ Button Hiển thị trang Quản lý địa chỉ

4 Tên tài khoản Text Hiển thị tên tài khoản

5 Họ Text Hiển thị họ

6 Tên Text Hiển thị tên

7 Giới tính Check box Hiển thị giới tính

8 Ngày sinh Text Hiển thị ngày sinh

9 Email Text Hiển thị email

10 Số điện thoại Text Hiển thị số điện thoại

11 Lưu Button Lưu thông tin sau khi chỉnh sửa

4.5.1.7 Giao diện Trang Quản lý mật khẩu

Bảng 4.18: Các đối tượng trang Quản lý mật khẩu

4 Mật khẩu cũ Text Người dùng nhập mật khẩu cũ

Hình 4.38: Giao diện trang Quản lý mật khẩu

5 Hiển thị mật khẩu Hiển thị mật khẩu dưới dạng text

6 Mật khẩu mới Text Người dùng nhập mật khẩu mới

7 Nhập lại mật khẩu Text Người dùng nhập lại mật khẩu mới

8 Lưu Button Lưu thông tin sau khi chỉnh sửa

4.5.1.8 Giao diện Trang quản lý địa chỉ

Hình 4.39: Giao diện trang Quản lý địa chỉ

Bảng 4.19: Các đối tượng trang Quản lý địa chỉ

4 Thêm địa chỉ Button Hiển thị trang nhập địa chỉ mới

5 Icon Sửa Icon Hiển thị trang chỉnh sửa địa chỉ

6 Icon Xóa Icon Xóa địa chỉ

4.5.1.9 Giao diện Trang lịch sử mua hàng

Hình 4.40: Giao hiện trang Lịch sử mua hàng

Bảng 4.20: Các đối tượng trang Lịch sử mua hàng

Hiển thị trạng thái đơn hàng

2 Danh sách đơn hàng Form Hiển thị danh sách đơn hàng

3 Trang trước Button Trang trước đó

4 Trang sau Button Trang tiếp theo

4.5.1.10 Giao diện Trang giỏ hàng

Hình 4.41: Giao diện giỏ hàng

Bảng 4.21: Các đối tượng Trang Giỏ hàng

1 Số lượng Text Hiển thị Số lượng

2 Giá tiền Text Hiển thị Giá tiền

3 Xóa sản phẩm khỏi giỏ hàng Button Xóa sản phẩm khỏi giỏ hàng

4 Tăng số lượng Button Tăng số lượng sản phẩm

5 Giảm số lượng Button Giảm số lượng sản phẩm

6 Chi tiết giỏ hàng Link Dẫn đến trang Chi tiết giỏ hàng

7 Tổng giá tiền Text Tổng giá tiền

8 Thanh toán Button Dẫn đến trang Thanh toán

4.5.1.11 Giao diện trang chi tiết giỏ hàng

Hình 4.42: Giao diện trang chi tiết giỏ hàng

Bảng 4.22: Các đối tượng trang Chi tiết giỏ hàng

1 Thông tin sản phẩm Text Hiển thị thông tin sản phẩm vừa thêm

2 Xóa sản phẩm khỏi giỏ hàng Button Xóa sản phẩm khỏi giỏ hàng

3 Tổng giá tiền Text Tổng giá tiền

4 Tiếp tục mua sắm Button Dẫn đến trang Sản phẩm để tiếp tục mua

5 Tiến hành thanh toán Button Chuyển đến trang thanh toán

4.5.1.12 Giao diện trang thanh toán

Hình 4.43: Giao diện trang thanh toán

Bảng 4.23: Đối tượng trang thanh toán

1 Email Text Người dùng nhập email liên lạc

2 Số điện thoại Text Người dùng nhập điện thoại liên lạc

3 Địa chỉ Select Người dùng chọn địa chỉ

4 Phương thức thanh toán Select Người dùng chọn Phương thức thanh toán

5 Tổng tiền Field Hiển thị giá tiền đơn hàng

6 Thanh toán Button Thanh toán đơn hàng

4.5.2 Giao diện quản trị viên

4.5.2.1 Giao diện trang Đăng nhập

Hình 4.44: Giao diện trang Đăng nhập

Bảng 4.24: Các đối tượng trang Đăng nhập

1 Tài khoản Text Nhập tên tài khoản

2 Mật khẩu Text Hiển mật khẩu

3 Đăng nhập Button Tiến hành đăng nhập

4.5.2.2 Giao diện phần Quản lý

Hình 4.45: Giao diện phần Quản lý

Bảng 4.25: Các đối tượng phần Quản lý

1 Thống kê Link Chuyển hướng đến trang Thống kê

2 Đơn hàng Link Chuyển hướng đến trang Đơn hàng

3 Người dùng Link Chuyển hướng đến trang Người dùng

4 Khách hàng Link Chuyển hướng đến trang Khách hàng

5 Sản phẩm Link Chuyển hướng đến trang Sản phẩm

6 Nhãn hiệu Link Chuyển hướng đến trang Nhãn hiệu

7 Loại sản phẩm Link Chuyển hướng đến trang Loại sản phẩm

8 Nhắn tin Link Chuyển đến trang Tin nhắn

4.5.2.3 Giao diện trang thống kê

Hình 4.46: Giao diện trang Thống kê

Bảng 4.26: Các đối tượng trang Thống kê

1 Biểu tượng 3 vạch Button Hiển thị danh sách các mục quản lý

2 Thông tin người dùng Dropdown Hiển thị thông tin người dùng

3 Quản lý đơn hàng Button Chuyển hướng đến trang Quản lý đơn hàng

4.5.2.4 Giao diện trang Quản lý đơn hàng

Hình 4.47: Giao diện trang Quản lý đơn hàng

Bảng 4.27: Các đối tượng trang Đơn hàng

1 Xem đơn Button Hiển thị chi tiết đơn hàng

4.5.2.5 Giao diện trang Chi tiết đơn hàng

Hình 4.48: Giao diện trang Chi tiết đơn hàng

Bảng 4.28: Các đối tượng trang Chi tiết đơn hàng

1 Mã đơn hàng Text Hiển thị thông tin mã đơn hàng

2 Trạng thái đơn hàng Text Hiển thị thông tin trạng thái đơn hàng

3 Tên khách hàng Text Hiển thị thông tin tên khách hàng

4 Chi tiết Đơn hàng Text Hiển thị thông tin Chi tiết Đơn hàng

5 Tổng đơn hàng Text Hiển thị thông tin Tổng giá đơn hàng

4.5.2.6 Giao diện trang Quản lý người dùng

Hình 4.49: Giao diện trang Quản lý người dùng

Bảng 4.29: Các đối tượng trang Người dùng

1 Thêm người dùng mới Button Hiển thị giao diện thêm mới

2 Sửa Button Hiển thị giao diện chỉnh sửa

3 Xoá Button Xoá người dùng

4.5.2.7 Giao diện trang Thêm mới người dùng

Hình 4.50: Giao diện trang Thêm người dùng mới

Bảng 4.30: Các đối tượng trang Thêm người dùng mới

1 Tài khoản người dùng Text Người dùng nhập

2 Password Text Người dùng nhập

3 Email Text Người dùng nhập

4 Số điện thoại Text Người dùng nhập

5 Vai trò Text Người dùng nhập

6 Huỷ Button Huỷ bỏ việc chỉnh sửa

7 Lưu Button Lưu trạng thái mới

4.5.2.8 Giao diện trang Chỉnh sửa thông tin người dùng

Hình 4.51: Giao diện trang Chỉnh sửa thông tin người dùng

Bảng 4.31: Các đối tượng trang Chỉnh sửa người dùng

1 Tài khoản người dùng Text Người dùng nhập

2 Password Text Người dùng nhập

3 Email Text Người dùng nhập

4 Số điện thoại Text Người dùng nhập

5 Vai trò Text Người dùng nhập

4.5.2.9 Giao diện trang quản lý nhãn hiệu

Hình 4.52: Giao diện trang Quản lý nhãn hiệu

Bảng 4.32: Các đối tượng trang Quản lý nhãn hiệu

1 Thêm nhãn hiệu mới Button Hiển thị giao diện thêm mới

3 Xoá Button Xoá nhãn hiệu

4.5.2.10 Giao diện trang Chỉnh sửa thông tin nhãn hiệu

Hình 4.53: Giao diện trang Chỉnh sửa thông tin nhãn hiệu

Bảng 4.33: Các đối tượng trang Chỉnh sửa nhãn hiệu

1 Mã nhãn hiệu Text Người dùng nhập

2 Tên nhãn hiệu Text Người dùng nhập

3 Trạng thái Text Người dùng nhập

4.5.2.11 Giao diện trang Quản lý loại sản phẩm

Hình 4.54: Giao diện trang Quản lý loại sản phẩm

Bảng 4.34: Các đối tượng trang Quản lý loại sản phẩm

1 Thêm loại sản phẩm mới Button Hiển thị giao diện thêm mới

3 Xoá Button Xoá loại sản phẩm

4.5.2.12 Giao diện Nhắn tin với người dùng

Hình 4.55: Giao diện Nhắn tin với người dùng

Bảng 4.35: Các đối tượng trang Nhắn tin

Hiển thị danh sách người dùng

2 Giao diện tin nhắn Hiển thị giao diện tin nhắn

3 Ô nhập tin nhắn Nhập nội dung tin nhắn

4 Nút gửi tin nhắn Button Nhấn vào để gửi tin nhắn

CÀI ĐẶT VÀ KIỂM THỬ PHẦN MỀM

CÀI ĐẶT PHẦN MỀM

5.1.1 Yêu cầu hệ thống Để có thể chạy được ứng dụng, máy tính phải có các yêu cầu sau:

- Phải có Windows Terminal hoặc Command Prompt

- Trình duyệt: Google Chrome, Microsoft Edge

Bước 1: Clone hoặc download project từ link github:

- Back-end: https://github.com/tri419/BE-lkmt.git

- Front-end (User): https://github.com/huu-tin/user_fe.git

- Front-end (Admin): https://github.com/huu-tin/admin_fe.git

Bước 2: Khởi chạy Back-End

- Sau khi clone Back-End về máy, chuột phải vào thư mục tải về và chọn “Open in Windows Terminal”

- Sau khi Windows Terminal hiện ra, chạy lệnh “npm i” để cập nhật các thư viện và package cần thiết để project hoạt động

- Tiếp tục chạy lệnh “npm start” trên Windows Terminal để bắt đầu chạy back- end

Bước 3: Khởi chạy Front-End (admin và user)

- Sau khi clone Front-End về máy, chuột phải vào thư mục tải về và chọn “Open in Windows Terminal”

- Sau khi Windows Terminal hiện ra, chạy lệnh “npm i” để cập nhật các thư viện và package cần thiết để project hoạt động

- Tiếp tục chạy lệnh “npm start” trên Windows Terminal để bắt đầu chạy Front-End.

KIỂM THỬ PHẦN MỀM

Bảng 5.1: Kịch bản kiểm thử

STT Chức năng Mô tả

1 Đăng nhập Đăng nhập với tài khoản và mật khẩu đã đăng ký

2 Mua hàng Thực hiện các thao tác thêm sản phẩm, xóa sản phẩm khỏi giỏ hàng

3 Giao dạng phần quản trị viên Kiểm tra các đường dẫn tới các trang quản lý của quản trị viên

4 Thêm mới Kiểm tra chức năng thêm mới sản phẩm, người dùng, thương hiệu

Bảng 5.2: Kiểm tra chức năng đăng nhập (1)

Mô tả Bước Chi tiết Dữ liệu vào Kết quả kì vọng

Trạng thái Đăng nhập với tài khoản và mật khẩu

Nhập được không báo lỗi

3 Nhấn đăng nhập Đăng nhập thành công vào trang mua sắm

Bảng 5.3: Kiểm tra chức năng đăng nhập (2)

Mô tả Bước Chi tiết Dữ liệu vào Kết quả kì vọng Kết quả thực tế Trạng thái Đăng nhập với tài khoản và mật khẩu để trống

1 Để trống username Hệ thống báo các trường không được để trống

2 Để trống password Hệ thống báo các trường không được để trống

3 Nhấn đăng nhập Đăng nhập thành công vào trang mua sắm

Bảng 5.4: Kiểm tra chức năng mua hàng (1)

Mô tả Bước Chi tiết Dữ liệu vào Kết quả kì vọng Kết quả thực tế

Kiểm tra chức năng thêm sản phẩm vào giỏ hàng

Nhập được không báo lỗi Như kì vọng Pass

2 Chọn biểu tượng thêm vào giỏ hàng

Chọn được không báo lỗi

Sản phẩm đã được thêm vào giỏ hàng

Mô tả Bước Chi tiết Dữ liệu vào Kết quả kì vọng Kết quả thực tế Trạng thái

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

1 Vào trang chi tiết giỏ hàng

Hiển thị trang chi tiết giỏ hàng Như kì vọng Pass

2 Chọn 1 sản phẩm và chọn xóa

Hiên thông báo muốn xóa hay không

Sản phẩm được xóa khỏi giỏ hàng

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

Tăng số lượng trong giỏ hàng

Giảm số lượng trong giỏ hàng Như kì vọng Pass

Sản phẩm được xóa khỏi giỏ hàng

5.2.2.3 Kiểm tra giao diện trang Quản trị

Bảng 5.7: Kiểm tra giao diện trang Quản trị (1)

Kiểm tra giao diện trang Đơn hàng

1 Chọn mục Đơn hàng bên phần Quản lý

2 Kiểm tra giao diện trang Đơn hàng

Hiển thị giao diện của trang Đơn hàng Như kì vọng Pass

Kiểm tra giao diện trang

1 Chọn mục Người dùng bên phần Quản lý

2 Kiểm tra giao diện trang Người dùng

Hiển thị giao diện của trang Người dùng

Mô tả Bước Chi tiết Dữ liệu vào Kết quả kì vọng Kết quả thực tế Trạng thái

Kiểm tra giao diện trang

1 Chọn mục Thương hiệu bên phần Quản lý

Chọn được không báo lỗi Như kì vọng Pass

2 Kiểm tra giao diện trang Thương hiệu

Hiển thị giao diện của trang Thương hiệu

Bảng 5.10: Kiểm thử chức năng thêm mới (1)

Mô tả Bước Chi tiết Kết quả kì vọng Kết quả thực tế Trạng thái

Kiểm tra nút Huỷ của trang

1 Chọn mục thương hiệu trong phần Quản lý

2 Nhấn vào thêm mới thương hiệu

Hiển thị giao diện thêm mới thương hiệu

Trả lại về trang thương hiệu

Bảng 5.11: Kiểm thử chức năng thêm mới (2)

Mô tả Bước Chi tiết Kết quả kì vọng Kết quả thực tế Trạng thái

1 Chọn mục thương hiệu trong phần Quản lý

Chọn được không báo lỗi Như kì vọng Pass

2 Nhấn vào thêm mới thương hiệu

Hiển thị giao diện thêm mới thương hiệu

3 Nhập các trường hợp lệ

Nhập được không báo lỗi Như kì vọng Pass

Lưu Thông báo Lưu thành công Như kì vọng Pass

5 Xem lại thông tin sau khi thêm

Hiển thị đúng thông tin Như kì vọng Pass

TỔNG KẾT

KẾT QUẢ ĐẠT ĐƯỢC

- Đề tài đã nghiên cứu công nghệ và kỹ thuật liên quan đến ReactJS, NodeJs, Redux,…

- Nắm bắt và áp dụng kiến thức về NoSQL và MongoDB trong việc lưu trữ dữ liệu người dùng

- Sử dụng Công nghệ Json Web Token vào đề tài để đảm bảo sự an toàn của dữ liệu trên Hệ thống

- Xây dựng được một website kinh doanh linh kiện máy tính với những tính năng cơ bản

- Xây dựng được các chức năng cho người quản lý như thêm, xoá, sửa sản phẩm, thống kê đơn hàng.

ƯU ĐIỂM

- Giao diện thân thiện với người dùng, dễ sử dụng

- Hệ thống đáp ứng được các chức năng cơ bản của một website bán hàng

- Ứng dụng chạy chính xác các chức năng được cài đặt.

NHƯỢC ĐIỂM

- Chưa hỗ trợ nền tảng di động

- Đăng nhập bằng nhiều nền tảng

HƯỚNG PHÁT TRIỂN

- Hỗ trợ trên nền tảng di động

- Áp dụng AI vào việc gợi ý sản phẩm

Tiêu đề	Xây Dựng Website Kinh Doanh Linh Kiện Máy Tính Sử Dụng NodeJS Và ReactJS
Tác giả	Nguyễn Cao Trí, Nguyễn Hữu Tín
Người hướng dẫn	TS. Lê Văn Vinh
Trường học	Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh
Chuyên ngành	Công nghệ Thông tin
Thể loại	Đồ án tốt nghiệp
Năm xuất bản	2023
Thành phố	Thành phố Hồ Chí Minh

Định dạng
Số trang	122
Dung lượng	6,61 MB