29 trang 6 lượt tải

Báo cáo Các vấn đề hiện đại của công nghệ phần mềm môn Công nghệ Thông tin | Học viện Phụ nữ Việt Nam

11

Trong kỷ nguyên số hóa, thương mại điện tử đã trở thành một phần không thể thiếu trong đời sống, đặc biệt trong lĩnh vực thời trang và trang sức. Trang sức dành cho nam và nữ, với thiết kế đa dạng, giá trị thẩm mỹ cao và ý nghĩa văn hóa sâu sắc, ngày càng được ưa chuộng như một món phụ kiện thời trang và quà tặng ý nghĩa. Tài liệu được sưu tầm gồm 29 trang, giúp các bạn ôn luyện và phục vụ cho việc học tập, đạt kết quả tốt. Mời các bạn đón xem!

Môn: Công nghệ Thông tin (CNTT02) 7 tài liệu

Trường: Học viện Phụ nữ Việt Nam 772 tài liệu

Tác giả:

Profile

My Lữ

1 tuần trước
Danh sách Quiz
/29
lOMoARcPSD| 59757093
HỌC VIỆN PHỤ NỮ VIỆT NAM
VIỆN CÔNG NGHỆ THÔNG TIN
BÁO CÁO CÁC VẤN ĐỀ HIỆN ĐẠI CỦA CÔNG
NGHỆ PHẦN MỀM
Sinh viên: Nguyễn Bảo Ngọc
Lớp: K10CNTTA
Khóa: 10
Giảng viên hướng dẫn: TS. Nguyễn Đức Toàn
Thời gian thực hiện: 02/12/2024 - 24/01/2025
Hà Nội, 2025
1
MỤCLỤC
Mục lục 1
Danh sách hình vẽ 3
Mở đầu 4
0.1 Lí do chọn đề tài . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
0.2 Mục êu nghiên cứu đề tài . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
0.3 Ý nghĩa của đề tài . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
0.4 Nội dung nghiên cứu đề tài . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
0.5 Phương pháp nghiên cứu đề tài . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1 Lý thuyết tổng quan 6
1.1 Tìm hiểu các công nghệ sử dụng trong đề tài . . . . . . . . . . . . . . . . . . . 6
1.1.1 Node.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.1.2 Express.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.1.3 MongoDB và Mongoose . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.1.4 EJS (Embedded JavaScript) . . . . . . . . . . . . . . . . . . . . . . . 7
1.1.5 Tailwind CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.1.6 JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2 Phân ch và thiết kế hệ thống 8
2.1 Phân ch yêu cầu hệ thống . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.1.1 Yêu cầu chức năng . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.1.2 Yêu cầu phi chức năng . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.2 Biểu đồ Use Case (UC) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.2.1 Biểu đồ Use Case tổng quát . . . . . . . . . . . . . . . . . . . . . . . 9
2.2.2 Biểu đồ Use Case phân rã . . . . . . . . . . . . . . . . . . . . . . . . 9
2
2.3 Thiết kế cơ sở dữ liệu (MongoDB Schema) . . . . . . . . . . . . . . . . . . . 10
2.3.1 Thực thể và thuộc nh . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.3.2 Mối quan hệ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
2.3.3 Sơ đồ ERD . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
2.3.4 Mô tả chi ết bảng . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
3 Xây dựng chương trình ứng dụng 14
3.1 Môi trường cài đặt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
3.1.1 Phần mềm và công cụ sử dụng . . . . . . . . . . . . . . . . . . . . . . 14
3.1.2 Cấu hình hệ thống . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
3.2 Thiết kế giao diện website . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
3.2.1 Giao diện trang người dùng (Client) . . . . . . . . . . . . . . . . . . . 14
3.2.2 Giao diện trang quản trị (Admin) . . . . . . . . . . . . . . . . . . . . . 19
3.3 Một số đoạn mã nguồn êu biểu . . . . . . . . . . . . . . . . . . . . . . . . . 23
3.4 Triển khai ứng dụng lên Render . . . . . . . . . . . . . . . . . . . . . . . . . 24
3.5 Kiểm thử và đánh giá hiệu năng . . . . . . . . . . . . . . . . . . . . . . . . . 24
3.5.1 Phương pháp kiểm thử . . . . . . . . . . . . . . . . . . . . . . . . . . 24
3.5.2 Kết quả kiểm thử . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
3.5.3 Các vấn đề phát sinh và cách khắc phục . . . . . . . . . . . . . . . . . 25
3.6 Tài liệu hướng dẫn sử dụng . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
3.6.1 Hướng dẫn cho khách hàng . . . . . . . . . . . . . . . . . . . . . . . . 25
3.6.2 Hướng dẫn cho quản trị viên . . . . . . . . . . . . . . . . . . . . . . . 26
Kết luận 27
3.7 Kết quả đạt được . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
3.8 Kết quả chưa đạt được . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
3
3.9 Hướng phát triển trong tương lai . . . . . . . . . . . . . . . . . . . . . . . . . 27
Tài liệu tham khảo 29 ..........................................................................................................................4
2.1 Biểu đồ Use Case tổng quát ...................................................................................................... 10
2.2 Biểu đồ Use Case phân rã chức năng Quản lý sản phẩm ...................................................... 10
2.3 Biểu đồ Use Case phân rã chức năng Quản lý đơn hàng ...................................................... 10
2.4 Biểu đồ Use Case phân rã chức năng Quản lý bình luận ....................................................... 10
2.5 Biểu đồ Use Case phân rã chức năng Quản lý loại hàng hóa ............................................... 11
2.6 Biểu đồ Use Case phân rã chức năng Quản lý khách hàng ................................................... 11
2.7 Biểu đồ Use Case phân rã chức năng Thống kê ...................................................................... 11
2.8 Sơ đồ Lược đồ cơ sở dữ liệu MongoDB ................................................................................... 12
3.1 Giao diện trang chủ website bán trang sức ............................................................................ 14
3.2 Giao diện trang đăng nhập ........................................................................................................ 15
3.3 Giao diện trang đăng ký ............................................................................................................. 15
3.4 Giao diện danh sách sản phẩm ................................................................................................. 16
3.5 Giao diện giỏ hàng ...................................................................................................................... 16
3.6 Giao diện thanh toán bằng QR code. Khi chuyển khoản thành công, nhân viênsẽ tự lên
đơn ...................................................................................................................................................... 17
3.7 Giao diện đơn hàng .................................................................................................................... 17
3.8 Giao diện đánh giá của khách hàng ......................................................................................... 18
3.9 Giao diện hồ sơ tài khoản .......................................................................................................... 18
3.10 Giao diện bảng điều khiển (Dashboard) ................................................................................ 19
3.11 Giao diện quản lý sản phẩm .................................................................................................... 19
3.12 Giao diện quản lý danh mục sản phẩm ................................................................................. 20
3.13 Giao diện quản lý đơn hàng .................................................................................................... 20
3.14 Giao diện quản lý người dùng ................................................................................................ 21
4
3.15 Giao diện tạo tài khoản............................................................................................................ 21
3.16 Giao diện tạo danh mục sản phẩm ........................................................................................ 22
3.17 Giao diện thêm sản phẩm ....................................................................................................... 22
3.18 Đoạn mã kết nối MongoDB trong app.js ............................................................................... 22
Tài liệu tham khảo 29
DANH SÁCH HÌNH VẼ
5
MỞ ĐẦU
0.1 Lí do chọn đề tài
Trong kỷ nguyên số hóa, thương mại điện tử đã trở thành một phần không thể thiếu trong
đời sống, đặc biệt trong lĩnh vực thời trang và trang sức. Trang sức dành cho nam và nữ, với
thiết kế đa dạng, giá trị thẩm mỹ cao và ý nghĩa văn hóa sâu sắc, ngày càng được ưa chuộng
như một món phụ kiện thời trang và quà tặng ý nghĩa. Theo thống kê, thị trường trang sức tại
Việt Nam trong năm 2025 có tốc độ tăng trưởng đáng kể, với hơn 40
Tuy nhiên, hiện nay, các website bán trang sức còn hạn chế về sự chuyên biệt, giao diện
chưa tối ưu và thiếu các nh năng quản lý hiệu quả cho người bán. Người êu dùng thường
gặp khó khăn trong việc m kiếm sản phẩm phù hợp, so sánh mẫu mã hoặc theo dõi đơn
hàng. Nhận thức được ềm năng và nhu cầu thực tế này, tôi đã chọn đề tài “Xây dựng website
bán trang sức cho nam và nữ online” nhằm tạo ra một nền tảng thương mại điện tử chuyên
nghiệp, đáp ứng tốt nhu cầu của cả khách hàng và người quản trị, đồng thời áp dụng các công
nghệ phần mềm hiện đại để nâng cao trải nghiệm người dùng.
0.2 Mục êu nghiên cứu đề tài
• Xây dựng một website bán trang sức cho nam và nữ online với giao diện hiện đại, thân
thiện, dễ sử dụng và hỗ trợ mua sắm trực tuyến hiệu quả.
• Thiết kế hệ thống quản trị nội dung (Admin Panel) cho phép người quản trị quản lý sản
phẩm, danh mục, đơn hàng và khách hàng một cách linh hoạt.
• Sử dụng ngăn xếp công nghệ hiện đại như Node.js, Express.js, MongoDB để đảm bảo
hiệu năng cao, khả năng bảo trì và mở rộng trong tương lai.
• Đảm bảo nh bảo mật thông n người dùng và ch hợp các nh năng cơ bản như giỏ
hàng, lịch sử đơn hàng.
0.3 Ý nghĩa của đề tài
6
• Về mặt thực ễn: Website bán trang sức cung cấp một kênh bán hàng trực tuyến hiệu
quả, giúp ết kiệm chi phí vận hành, mở rộng thị trường và ếp cận khách hàng ềm
năng trên toàn quốc. Hệ thống hỗ trợ tương tác 24/7, nâng cao trải nghiệm mua sắm
và tăng cường sự hài lòng của khách hàng.
• Về mặt học thuật: Đề tài là cơ hội để tôi áp dụng các kiến thức từ môn “Các vấn đề hiện
đại của Công nghệ phần mềm” vào thực tế, rèn luyện kỹ năng phân ch yêu cầu, thiết
kế hệ thống và phát triển phần mềm. Đồng thời, dự án góp phần thúc đẩy quá trình
chuyển đổi số trong ngành trang sức, mang lại giá trị thực ễn cho cộng đồng.
0.4 Nội dung nghiên cứu đề tài
• Nghiên cứu các công nghệ cốt lõi bao gồm Node.js (môi trường runme), Express.js
(framework web), MongoDB (cơ sở dữ liệu NoSQL), Mongoose (thư viện ORM), EJS
(động cơ template), và Tailwind CSS (framework CSS).
• Phân ch yêu cầu hệ thống, thiết kế biểu đồ Use Case, sơ đồ ERD và kiến trúc tổng thể.
• Thiết kế cơ sở dữ liệu với các collecon như Users, Products, Orders, Categories.
• Phát triển giao diện người dùng (Client) và giao diện quản trị (Admin) với các nh năng
cơ bản như xem sản phẩm, giỏ hàng, quản lý sản phẩm và đơn hàng.
• Kiểm thử chức năng, tối ưu hóa hiệu năng và triển khai ứng dụng trên môi trường
localhost.
0.5 Phương pháp nghiên cứu đề tài
• Nghiên cứu tài liệu: Tham khảo tài liệu từ các nguồn uy n như w3schools, tài liệu chính
thức của Node.js, MongoDB, và các khóa học trực tuyến về phát triển web.
• Phân ch và thiết kế: Sử dụng phương pháp phân ch yêu cầu, vẽ biểu đồ Use Case và
sơ đồ ERD để mô hình hóa hệ thống.
7
• Phát triển phần mềm: Áp dụng quy trình phát triển phần mềm cơ bản (phân ch →
thiết kế → lập trình → kiểm thử → triển khai) với công cụ Visual Studio Code và môi
trường
Node.js.
• Tham khảo thực tế: Học hỏi từ các website thương mại điện tử như Shopee, Lazada để
tối ưu giao diện và chức năng, đồng thời ch hợp các nh năng phù hợp với website
bán trang sức.
CHƯƠNG1
LÝTHUYẾTTỔNGQUAN
1.1 Tìm hiểu các công nghệ sử dụng trong đề tài
Để xây dựng website bán trang sức, tôi đã sử dụng ngăn xếp công nghệ dựa trên Node.js với
các công cụ và thư viện hiện đại, tập trung vào hiệu năng và khả năng mở rộng.
1.1.1 Node.js
Node.js là một môi trường runme JavaScript phía máy chủ, được xây dựng trên engine V8
của Google Chrome. Với mô hình I/O không chặn và sự kiện, Node.js phù hợp để xử lý các yêu
cầu đồng thời, chẳng hạn như quản lý giỏ hàng và đơn hàng trong website bán trang sức.
Trong dự án, Node.js được sử dụng để chạy server và xử lý logic phía backend.
1.1.2 Express.js
Express.js là framework web nhẹ nhàng cho Node.js, cung cấp các công cụ để định tuyến, xử
lý middleware và kết xuất giao diện. Trong website bán trang sức, Express.js được dùng để:
• Xử lý các tuyến như ‘/products‘, ‘/cart‘, ‘/admin‘.
• Tích hợp middleware để xác thực người dùng và ghi log hoạt động.
• Kết nối với EJS để tạo các trang động như ‘home.ejs‘ và ‘manage-products.ejs‘.
1.1.3 MongoDB và Mongoose
8
MongoDB
MongoDB là cơ sở dữ liệu NoSQL hướng tài liệu, lưu trữ dữ liệu dưới dạng BSON (phiên bản
nhị phân của JSON). Nó cho phép linh hoạt trong việc thiết kế schema, rất phù hợp để lưu trữ
thông n sản phẩm trang sức với nhiều thuộc nh đa dạng như chất liệu, kích thước, và giá
cả.
Mongoose
Mongoose là thư viện ODM giúp định nghĩa schema và quản lý tương tác với MongoDB. Trong
website bán trang sức, Mongoose được dùng để tạo mô hình cho các collecon như ‘Users‘,
‘Products‘, và ‘Orders‘, đảm bảo nh toàn vẹn dữ liệu và hỗ trợ truy vấn hiệu quả.
1.1.4 EJS (Embedded JavaScript)
EJS là động cơ template cho Node.js, cho phép nhúng JavaScript vào HTML để tạo trang động.
Trong website bán trang sức, EJS được sử dụng để render các trang như ‘index.ejs‘ (trang
chủ), ‘products.ejs‘ (danh sách sản phẩm), và ‘order-history.ejs‘ (lịch sử đơn hàng).
1.1.5 Tailwind CSS
Tailwind CSS là framework CSS hiện đại, cung cấp các class ện ích để thiết kế giao diện nhanh
chóng và responsive. Trong website bán trang sức, Tailwind CSS được dùng để tạo giao diện
với tông màu xanh dương/trắng, đảm bảo hiển thị tốt trên cả máy nh và thiết bị di động.
1.1.6 JavaScript
JavaScript phía client được sử dụng để thêm các hiệu ứng động, như toggle chi ết đơn hàng
trong ‘order-history.ejs‘, tăng nh tương tác và trải nghiệm người dùng.
CHƯƠNG2
PHÂNTÍCHVÀTHIẾTKẾHỆTHỐNG
2.1 Phân ch yêu cầu hệ thống
9
2.1.1 Yêu cầu chức năng
• Đối với khách hàng (User):
– Đăng ký, đăng nhập, và đăng xuất tài khoản.
– Xem danh sách sản phẩm trang sức, lọc theo danh mục (nam, nữ) và m kiếm theo
từ khóa.
– Xem chi ết sản phẩm, bao gồm hình ảnh, giá, mô tả, và đánh giá.
– Thêm sản phẩm vào giỏ hàng, chỉnh sửa số lượng, và xóa sản phẩm.
– Đặt hàng và xem lịch sử đơn hàng với chi ết toggle.
– Cập nhật thông n tài khoản và đánh giá sản phẩm.
• Đối với người quản trị (Admin):
– Đăng nhập vào trang quản trị.
– Quản lý sản phẩm: Thêm, sửa, xóa sản phẩm trang sức.
– Quản lý danh mục sản phẩm: Thêm, sửa, xóa danh mục.
– Quản lý đơn hàng: Xem danh sách, cập nhật trạng thái (chờ xử lý, đã giao).
– Quản lý người dùng: Xem danh sách, thêm, sửa, xóa tài khoản.
– Tạo tài khoản admin mới và tạo danh mục sản phẩm.
2.1.2 Yêu cầu phi chức năng
• Giao diện thân thiện, sử dụng tông màu xanh dương/trắng, hỗ trợ responsive.
• Tốc độ tải trang dưới 3 giây, đảm bảo hiệu năng trên các trình duyệt phổ biến (Chrome,
Firefox).
• Bảo mật thông n người dùng thông qua mã hóa mật khẩu bằng bcrypt.
• Khả năng mở rộng để ch hợp thêm nh năng thanh toán trực tuyến trong tương lai.
2.2 Biểu đồ Use Case (UC)
10
2.2.1 Biểu đồ Use Case tổng quát
Biểu đồ mô tả sự tương tác giữa hai tác nhân chính: Khách hàng (Customer) và Quản trị viên
(Admin) với hệ thống website bán trang sức.
Hình 2.1: Biểu đồ Use Case tổng quát
2.2.2 Biểu đồ Use Case phân rã
• Quản lý sản phẩm:
Hình 2.2: Biểu đồ Use Case phân rã chức năng Quản lý sản phẩm
• Quản lý đơn hàng:
Hình 2.3: Biểu đồ Use Case phân rã chức năng Quản lý đơn hàng
• Quản lý bình luận:
Hình 2.4: Biểu đồ Use Case phân rã chức năng Quản lý bình luận
• Quản lý loại hàng hóa:
11
Hình 2.5: Biểu đồ Use Case phân rã chức năng Quản lý loại hàng hóa
• Quản lý khách hàng:
Hình 2.6: Biểu đồ Use Case phân rã chức năng Quản lý khách hàng
• Thống kê:
Hình 2.7: Biểu đồ Use Case phân rã chức năng Thống kê
2.3 Thiết kế cơ sở dữ liệu (MongoDB Schema)
2.3.1 Thực thể và thuộc nh
• Users Collecon: Mã (String, khóa chính), Tên (String), Email (String), Mật khẩu (String),
Số điện thoại (String), Địa chỉ (String), Vai trò (String).
• Products Collecon: Mã (String, khóa chính), Tên (String), Mô tả (String), Giá (Number),
Số lượng tồn kho (Number), Danh mục (String), Hình ảnh (String).
• Categories Collecon: Mã (String, khóa chính), Tên (String), Mô tả (String).
• Orders Collecon: Mã (String, khóa chính), Mã khách hàng (String), Ngày đặt (Date),
Trạng thái (String), Tổng ền (Number).
2.3.2 Mối quan hệ
• 1 khách hàng có thể đặt nhiều đơn hàng (1-n).
• 1 đơn hàng chứa nhiều sản phẩm (1-n).
• 1 danh mục chứa nhiều sản phẩm (1-n).
12
2.3.3 Sơ đồ ERD
Hình 2.8: Sơ đồ Lược đồ cơ sở dữ liệu MongoDB
2.3.4 Mô tả chi ết bảng
• Users: Mã (String), Tên (String, max 100 ký tự), Email (String, duy nhất), Mật khẩu
(String, mã hóa), Số điện thoại (String, max 15 ký tự), Địa chỉ (String, max 255 ký tự),
Vai trò (String, ’User’ hoặc ’Admin’).
13
• Products: Mã (String), Tên (String, max 100 ký tự), Mô tả (String), Giá (Number, 2 chữ số
thập phân), Số lượng tồn kho (Number), Danh mục (String), Hình ảnh (String).
CHƯƠNG3
XÂYDỰNGCHƯƠNGTRÌNHỨNGDỤNG
3.1 Môi trường cài đặt
3.1.1 Phần mềm và công cụ sử dụng
• IDE: Visual Studio Code, môi trường phát triển ch hợp hỗ trợ Node.js.
• Runme: Node.js phiên bản 18.x, cung cấp môi trường chạy server.
• Cơ sở dữ liệu: MongoDB Server, MongoDB Atlas (dịch vụ đám mây), và MongoDB
Compass (công cụ quản lý dữ liệu).
• Hệ điều hành: Windows 11, với cấu hình CPU Intel Core i5, RAM 8GB, SSD 256GB.
• Thư viện chính:
– Backend: express, mongoose, body-parser, jsonwebtoken, bcryptjs (mã hóa mật
khẩu).
– Frontend: HTML, EJS, Tailwind CSS, JavaScript (hiệu ứng động).
3.1.2 Cấu hình hệ thống
• Cài đặt Node.js và quản lý gói bằng npm.
• Kết nối MongoDB Atlas qua Mongoose với chuỗi kết nối bảo mật trong tệp ‘.env‘.
• Cấu hình server Express.js trên cổng 3000, ch hợp EJS và Tailwind CSS trong dự án.
• Kiểm tra môi trường bằng lệnh ‘npm start‘ và truy cập ‘hp://localhost:3000‘.
3.2 Thiết kế giao diện website
14
3.2.1 Giao diện trang người dùng (Client)
Giao diện người dùng được thiết kế với tông màu xanh dương/trắng, tập trung vào việc hiển
thị sản phẩm trang sức một cách hấp dẫn.
Hình 3.1: Giao diện trang chủ website bán trang sức
15
Hình 3.2: Giao diện trang đăng nhập
Hình 3.3: Giao diện trang đăng ký
16
Hình 3.4: Giao diện danh sách sản phẩm
Hình 3.5: Giao diện giỏ hàng
17
Hình 3.6: Giao diện thanh toán bằng QR code. Khi chuyển khoản thành công, nhân viên sẽ tự
lên đơn.
Hình 3.7: Giao diện đơn hàng
18
Hình 3.8: Giao diện đánh giá của khách hàng
Hình 3.9: Giao diện hồ sơ tài khoản
3.2.2 Giao diện trang quản trị (Admin)
Giao diện quản trị được thiết kế với tông màu tối, tập trung vào các chức năng quản lý.
19
Hình 3.10: Giao diện bảng điều khiển (Dashboard)
Hình 3.11: Giao diện quản lý sản phẩm

Tài liệu khác của Học viện Phụ nữ Việt Nam

Preview text:

lOMoAR cPSD| 59757093
HỌC VIỆN PHỤ NỮ VIỆT NAM
VIỆN CÔNG NGHỆ THÔNG TIN
BÁO CÁO CÁC VẤN ĐỀ HIỆN ĐẠI CỦA CÔNG NGHỆ PHẦN MỀM
Sinh viên: Nguyễn Bảo Ngọc Lớp: K10CNTTA Khóa: 10
Giảng viên hướng dẫn: TS. Nguyễn Đức Toàn
Thời gian thực hiện: 02/12/2024 - 24/01/2025 Hà Nội, 2025 MỤCLỤC Mục lục 1 Danh sách hình vẽ 3 Mở đầu 4 0.1 Lí do chọn đề tài
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 0.2
Mục tiêu nghiên cứu đề tài . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 0.3
Ý nghĩa của đề tài . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 0.4
Nội dung nghiên cứu đề tài . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 0.5
Phương pháp nghiên cứu đề tài . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1 Lý thuyết tổng quan 6
1.1 Tìm hiểu các công nghệ sử dụng trong đề tài . . . . . . . . . . . . . . . . . . . 6
1.1.1 Node.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.1.2 Express.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.1.3 MongoDB và Mongoose . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.1.4 EJS (Embedded JavaScript) . . . . . . . . . . . . . . . . . . . . . . . 7
1.1.5 Tailwind CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.1.6 JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2 Phân tích và thiết kế hệ thống 8
2.1 Phân tích yêu cầu hệ thống . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.1.1 Yêu cầu chức năng . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.1.2 Yêu cầu phi chức năng . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.2 Biểu đồ Use Case (UC) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.2.1 Biểu đồ Use Case tổng quát . . . . . . . . . . . . . . . . . . . . . . . 9
2.2.2 Biểu đồ Use Case phân rã
. . . . . . . . . . . . . . . . . . . . . . . . 9 1
2.3 Thiết kế cơ sở dữ liệu (MongoDB Schema)
. . . . . . . . . . . . . . . . . . . 10
2.3.1 Thực thể và thuộc tính
. . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.3.2 Mối quan hệ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
2.3.3 Sơ đồ ERD . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
2.3.4 Mô tả chi tiết bảng . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
3 Xây dựng chương trình ứng dụng 14
3.1 Môi trường cài đặt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
3.1.1 Phần mềm và công cụ sử dụng . . . . . . . . . . . . . . . . . . . . . . 14
3.1.2 Cấu hình hệ thống
. . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
3.2 Thiết kế giao diện website
. . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
3.2.1 Giao diện trang người dùng (Client) . . . . . . . . . . . . . . . . . . . 14
3.2.2 Giao diện trang quản trị (Admin) . . . . . . . . . . . . . . . . . . . . . 19
3.3 Một số đoạn mã nguồn tiêu biểu
. . . . . . . . . . . . . . . . . . . . . . . . . 23
3.4 Triển khai ứng dụng lên Render . . . . . . . . . . . . . . . . . . . . . . . . . 24
3.5 Kiểm thử và đánh giá hiệu năng
. . . . . . . . . . . . . . . . . . . . . . . . . 24
3.5.1 Phương pháp kiểm thử . . . . . . . . . . . . . . . . . . . . . . . . . . 24
3.5.2 Kết quả kiểm thử . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
3.5.3 Các vấn đề phát sinh và cách khắc phục . . . . . . . . . . . . . . . . . 25
3.6 Tài liệu hướng dẫn sử dụng . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
3.6.1 Hướng dẫn cho khách hàng . . . . . . . . . . . . . . . . . . . . . . . . 25
3.6.2 Hướng dẫn cho quản trị viên . . . . . . . . . . . . . . . . . . . . . . . 26 Kết luận 27
3.7 Kết quả đạt được
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
3.8 Kết quả chưa đạt được . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 2
3.9 Hướng phát triển trong tương lai . . . . . . . . . . . . . . . . . . . . . . . . . 27
Tài liệu tham khảo 29 ..........................................................................................................................4
2.1 Biểu đồ Use Case tổng quát ...................................................................................................... 10
2.2 Biểu đồ Use Case phân rã chức năng Quản lý sản phẩm ...................................................... 10
2.3 Biểu đồ Use Case phân rã chức năng Quản lý đơn hàng ...................................................... 10
2.4 Biểu đồ Use Case phân rã chức năng Quản lý bình luận ....................................................... 10
2.5 Biểu đồ Use Case phân rã chức năng Quản lý loại hàng hóa ............................................... 11
2.6 Biểu đồ Use Case phân rã chức năng Quản lý khách hàng ................................................... 11
2.7 Biểu đồ Use Case phân rã chức năng Thống kê ...................................................................... 11
2.8 Sơ đồ Lược đồ cơ sở dữ liệu MongoDB ................................................................................... 12
3.1 Giao diện trang chủ website bán trang sức ............................................................................ 14
3.2 Giao diện trang đăng nhập ........................................................................................................ 15
3.3 Giao diện trang đăng ký ............................................................................................................. 15
3.4 Giao diện danh sách sản phẩm ................................................................................................. 16
3.5 Giao diện giỏ hàng ...................................................................................................................... 16
3.6 Giao diện thanh toán bằng QR code. Khi chuyển khoản thành công, nhân viênsẽ tự lên
đơn ...................................................................................................................................................... 17
3.7 Giao diện đơn hàng .................................................................................................................... 17
3.8 Giao diện đánh giá của khách hàng ......................................................................................... 18
3.9 Giao diện hồ sơ tài khoản .......................................................................................................... 18
3.10 Giao diện bảng điều khiển (Dashboard) ................................................................................ 19
3.11 Giao diện quản lý sản phẩm .................................................................................................... 19
3.12 Giao diện quản lý danh mục sản phẩm ................................................................................. 20
3.13 Giao diện quản lý đơn hàng .................................................................................................... 20
3.14 Giao diện quản lý người dùng ................................................................................................ 21 3
3.15 Giao diện tạo tài khoản............................................................................................................ 21
3.16 Giao diện tạo danh mục sản phẩm ........................................................................................ 22
3.17 Giao diện thêm sản phẩm ....................................................................................................... 22
3.18 Đoạn mã kết nối MongoDB trong app.js ............................................................................... 22
Tài liệu tham khảo 29 DANH SÁCH HÌNH VẼ 4 MỞ ĐẦU
0.1 Lí do chọn đề tài
Trong kỷ nguyên số hóa, thương mại điện tử đã trở thành một phần không thể thiếu trong
đời sống, đặc biệt trong lĩnh vực thời trang và trang sức. Trang sức dành cho nam và nữ, với
thiết kế đa dạng, giá trị thẩm mỹ cao và ý nghĩa văn hóa sâu sắc, ngày càng được ưa chuộng
như một món phụ kiện thời trang và quà tặng ý nghĩa. Theo thống kê, thị trường trang sức tại
Việt Nam trong năm 2025 có tốc độ tăng trưởng đáng kể, với hơn 40
Tuy nhiên, hiện nay, các website bán trang sức còn hạn chế về sự chuyên biệt, giao diện
chưa tối ưu và thiếu các tính năng quản lý hiệu quả cho người bán. Người tiêu dùng thường
gặp khó khăn trong việc tìm kiếm sản phẩm phù hợp, so sánh mẫu mã hoặc theo dõi đơn
hàng. Nhận thức được tiềm năng và nhu cầu thực tế này, tôi đã chọn đề tài “Xây dựng website
bán trang sức cho nam và nữ online” nhằm tạo ra một nền tảng thương mại điện tử chuyên
nghiệp, đáp ứng tốt nhu cầu của cả khách hàng và người quản trị, đồng thời áp dụng các công
nghệ phần mềm hiện đại để nâng cao trải nghiệm người dùng.
0.2 Mục tiêu nghiên cứu đề tài
• Xây dựng một website bán trang sức cho nam và nữ online với giao diện hiện đại, thân
thiện, dễ sử dụng và hỗ trợ mua sắm trực tuyến hiệu quả.
• Thiết kế hệ thống quản trị nội dung (Admin Panel) cho phép người quản trị quản lý sản
phẩm, danh mục, đơn hàng và khách hàng một cách linh hoạt.
• Sử dụng ngăn xếp công nghệ hiện đại như Node.js, Express.js, MongoDB để đảm bảo
hiệu năng cao, khả năng bảo trì và mở rộng trong tương lai.
• Đảm bảo tính bảo mật thông tin người dùng và tích hợp các tính năng cơ bản như giỏ
hàng, lịch sử đơn hàng.
0.3 Ý nghĩa của đề tài 5
• Về mặt thực tiễn: Website bán trang sức cung cấp một kênh bán hàng trực tuyến hiệu
quả, giúp tiết kiệm chi phí vận hành, mở rộng thị trường và tiếp cận khách hàng tiềm
năng trên toàn quốc. Hệ thống hỗ trợ tương tác 24/7, nâng cao trải nghiệm mua sắm
và tăng cường sự hài lòng của khách hàng.
• Về mặt học thuật: Đề tài là cơ hội để tôi áp dụng các kiến thức từ môn “Các vấn đề hiện
đại của Công nghệ phần mềm” vào thực tế, rèn luyện kỹ năng phân tích yêu cầu, thiết
kế hệ thống và phát triển phần mềm. Đồng thời, dự án góp phần thúc đẩy quá trình
chuyển đổi số trong ngành trang sức, mang lại giá trị thực tiễn cho cộng đồng.
0.4 Nội dung nghiên cứu đề tài
• Nghiên cứu các công nghệ cốt lõi bao gồm Node.js (môi trường runtime), Express.js
(framework web), MongoDB (cơ sở dữ liệu NoSQL), Mongoose (thư viện ORM), EJS
(động cơ template), và Tailwind CSS (framework CSS).
• Phân tích yêu cầu hệ thống, thiết kế biểu đồ Use Case, sơ đồ ERD và kiến trúc tổng thể.
• Thiết kế cơ sở dữ liệu với các collection như Users, Products, Orders, Categories.
• Phát triển giao diện người dùng (Client) và giao diện quản trị (Admin) với các tính năng
cơ bản như xem sản phẩm, giỏ hàng, quản lý sản phẩm và đơn hàng.
• Kiểm thử chức năng, tối ưu hóa hiệu năng và triển khai ứng dụng trên môi trường localhost.
0.5 Phương pháp nghiên cứu đề tài
• Nghiên cứu tài liệu: Tham khảo tài liệu từ các nguồn uy tín như w3schools, tài liệu chính
thức của Node.js, MongoDB, và các khóa học trực tuyến về phát triển web.
• Phân tích và thiết kế: Sử dụng phương pháp phân tích yêu cầu, vẽ biểu đồ Use Case và
sơ đồ ERD để mô hình hóa hệ thống. 6
• Phát triển phần mềm: Áp dụng quy trình phát triển phần mềm cơ bản (phân tích →
thiết kế → lập trình → kiểm thử → triển khai) với công cụ Visual Studio Code và môi trường Node.js.
• Tham khảo thực tế: Học hỏi từ các website thương mại điện tử như Shopee, Lazada để
tối ưu giao diện và chức năng, đồng thời tích hợp các tính năng phù hợp với website bán trang sức. CHƯƠNG1 LÝTHUYẾTTỔNGQUAN
1.1 Tìm hiểu các công nghệ sử dụng trong đề tài
Để xây dựng website bán trang sức, tôi đã sử dụng ngăn xếp công nghệ dựa trên Node.js với
các công cụ và thư viện hiện đại, tập trung vào hiệu năng và khả năng mở rộng. 1.1.1 Node.js
Node.js là một môi trường runtime JavaScript phía máy chủ, được xây dựng trên engine V8
của Google Chrome. Với mô hình I/O không chặn và sự kiện, Node.js phù hợp để xử lý các yêu
cầu đồng thời, chẳng hạn như quản lý giỏ hàng và đơn hàng trong website bán trang sức.
Trong dự án, Node.js được sử dụng để chạy server và xử lý logic phía backend. 1.1.2 Express.js
Express.js là framework web nhẹ nhàng cho Node.js, cung cấp các công cụ để định tuyến, xử
lý middleware và kết xuất giao diện. Trong website bán trang sức, Express.js được dùng để:
• Xử lý các tuyến như ‘/products‘, ‘/cart‘, ‘/admin‘.
• Tích hợp middleware để xác thực người dùng và ghi log hoạt động.
• Kết nối với EJS để tạo các trang động như ‘home.ejs‘ và ‘manage-products.ejs‘.
1.1.3 MongoDB và Mongoose 7 MongoDB
MongoDB là cơ sở dữ liệu NoSQL hướng tài liệu, lưu trữ dữ liệu dưới dạng BSON (phiên bản
nhị phân của JSON). Nó cho phép linh hoạt trong việc thiết kế schema, rất phù hợp để lưu trữ
thông tin sản phẩm trang sức với nhiều thuộc tính đa dạng như chất liệu, kích thước, và giá cả. Mongoose
Mongoose là thư viện ODM giúp định nghĩa schema và quản lý tương tác với MongoDB. Trong
website bán trang sức, Mongoose được dùng để tạo mô hình cho các collection như ‘Users‘,
‘Products‘, và ‘Orders‘, đảm bảo tính toàn vẹn dữ liệu và hỗ trợ truy vấn hiệu quả. 1.1.4
EJS (Embedded JavaScript)
EJS là động cơ template cho Node.js, cho phép nhúng JavaScript vào HTML để tạo trang động.
Trong website bán trang sức, EJS được sử dụng để render các trang như ‘index.ejs‘ (trang
chủ), ‘products.ejs‘ (danh sách sản phẩm), và ‘order-history.ejs‘ (lịch sử đơn hàng). 1.1.5 Tailwind CSS
Tailwind CSS là framework CSS hiện đại, cung cấp các class tiện ích để thiết kế giao diện nhanh
chóng và responsive. Trong website bán trang sức, Tailwind CSS được dùng để tạo giao diện
với tông màu xanh dương/trắng, đảm bảo hiển thị tốt trên cả máy tính và thiết bị di động. 1.1.6 JavaScript
JavaScript phía client được sử dụng để thêm các hiệu ứng động, như toggle chi tiết đơn hàng
trong ‘order-history.ejs‘, tăng tính tương tác và trải nghiệm người dùng. CHƯƠNG2
PHÂNTÍCHVÀTHIẾTKẾHỆTHỐNG
2.1 Phân tích yêu cầu hệ thống 8
2.1.1 Yêu cầu chức năng
• Đối với khách hàng (User):
– Đăng ký, đăng nhập, và đăng xuất tài khoản.
– Xem danh sách sản phẩm trang sức, lọc theo danh mục (nam, nữ) và tìm kiếm theo từ khóa.
– Xem chi tiết sản phẩm, bao gồm hình ảnh, giá, mô tả, và đánh giá.
– Thêm sản phẩm vào giỏ hàng, chỉnh sửa số lượng, và xóa sản phẩm.
– Đặt hàng và xem lịch sử đơn hàng với chi tiết toggle.
– Cập nhật thông tin tài khoản và đánh giá sản phẩm.
• Đối với người quản trị (Admin):
– Đăng nhập vào trang quản trị.
– Quản lý sản phẩm: Thêm, sửa, xóa sản phẩm trang sức.
– Quản lý danh mục sản phẩm: Thêm, sửa, xóa danh mục.
– Quản lý đơn hàng: Xem danh sách, cập nhật trạng thái (chờ xử lý, đã giao).
– Quản lý người dùng: Xem danh sách, thêm, sửa, xóa tài khoản.
– Tạo tài khoản admin mới và tạo danh mục sản phẩm.
2.1.2 Yêu cầu phi chức năng
• Giao diện thân thiện, sử dụng tông màu xanh dương/trắng, hỗ trợ responsive.
• Tốc độ tải trang dưới 3 giây, đảm bảo hiệu năng trên các trình duyệt phổ biến (Chrome, Firefox).
• Bảo mật thông tin người dùng thông qua mã hóa mật khẩu bằng bcrypt.
• Khả năng mở rộng để tích hợp thêm tính năng thanh toán trực tuyến trong tương lai. 2.2
Biểu đồ Use Case (UC) 9
2.2.1 Biểu đồ Use Case tổng quát
Biểu đồ mô tả sự tương tác giữa hai tác nhân chính: Khách hàng (Customer) và Quản trị viên
(Admin) với hệ thống website bán trang sức.
Hình 2.1: Biểu đồ Use Case tổng quát
2.2.2 Biểu đồ Use Case phân rã
• Quản lý sản phẩm:
Hình 2.2: Biểu đồ Use Case phân rã chức năng Quản lý sản phẩm
• Quản lý đơn hàng:
Hình 2.3: Biểu đồ Use Case phân rã chức năng Quản lý đơn hàng
• Quản lý bình luận:
Hình 2.4: Biểu đồ Use Case phân rã chức năng Quản lý bình luận
• Quản lý loại hàng hóa: 10
Hình 2.5: Biểu đồ Use Case phân rã chức năng Quản lý loại hàng hóa
• Quản lý khách hàng:
Hình 2.6: Biểu đồ Use Case phân rã chức năng Quản lý khách hàng • Thống kê:
Hình 2.7: Biểu đồ Use Case phân rã chức năng Thống kê
2.3 Thiết kế cơ sở dữ liệu (MongoDB Schema)
2.3.1 Thực thể và thuộc tính
• Users Collection: Mã (String, khóa chính), Tên (String), Email (String), Mật khẩu (String),
Số điện thoại (String), Địa chỉ (String), Vai trò (String).
• Products Collection: Mã (String, khóa chính), Tên (String), Mô tả (String), Giá (Number),
Số lượng tồn kho (Number), Danh mục (String), Hình ảnh (String).
• Categories Collection: Mã (String, khóa chính), Tên (String), Mô tả (String).
• Orders Collection: Mã (String, khóa chính), Mã khách hàng (String), Ngày đặt (Date),
Trạng thái (String), Tổng tiền (Number). 2.3.2 Mối quan hệ
• 1 khách hàng có thể đặt nhiều đơn hàng (1-n).
• 1 đơn hàng chứa nhiều sản phẩm (1-n).
• 1 danh mục chứa nhiều sản phẩm (1-n). 11 2.3.3 Sơ đồ ERD
Hình 2.8: Sơ đồ Lược đồ cơ sở dữ liệu MongoDB
2.3.4 Mô tả chi tiết bảng
• Users: Mã (String), Tên (String, max 100 ký tự), Email (String, duy nhất), Mật khẩu
(String, mã hóa), Số điện thoại (String, max 15 ký tự), Địa chỉ (String, max 255 ký tự),
Vai trò (String, ’User’ hoặc ’Admin’). 12
• Products: Mã (String), Tên (String, max 100 ký tự), Mô tả (String), Giá (Number, 2 chữ số
thập phân), Số lượng tồn kho (Number), Danh mục (String), Hình ảnh (String). CHƯƠNG3
XÂYDỰNGCHƯƠNGTRÌNHỨNGDỤNG
3.1 Môi trường cài đặt
3.1.1 Phần mềm và công cụ sử dụng
• IDE: Visual Studio Code, môi trường phát triển tích hợp hỗ trợ Node.js.
• Runtime: Node.js phiên bản 18.x, cung cấp môi trường chạy server.
• Cơ sở dữ liệu: MongoDB Server, MongoDB Atlas (dịch vụ đám mây), và MongoDB
Compass (công cụ quản lý dữ liệu).
• Hệ điều hành: Windows 11, với cấu hình CPU Intel Core i5, RAM 8GB, SSD 256GB.
• Thư viện chính:
– Backend: express, mongoose, body-parser, jsonwebtoken, bcryptjs (mã hóa mật khẩu).
– Frontend: HTML, EJS, Tailwind CSS, JavaScript (hiệu ứng động).
3.1.2 Cấu hình hệ thống
• Cài đặt Node.js và quản lý gói bằng npm.
• Kết nối MongoDB Atlas qua Mongoose với chuỗi kết nối bảo mật trong tệp ‘.env‘.
• Cấu hình server Express.js trên cổng 3000, tích hợp EJS và Tailwind CSS trong dự án.
• Kiểm tra môi trường bằng lệnh ‘npm start‘ và truy cập ‘http://localhost:3000‘.
3.2 Thiết kế giao diện website 13 3.2.1
Giao diện trang người dùng (Client)
Giao diện người dùng được thiết kế với tông màu xanh dương/trắng, tập trung vào việc hiển
thị sản phẩm trang sức một cách hấp dẫn.
Hình 3.1: Giao diện trang chủ website bán trang sức 14
Hình 3.2: Giao diện trang đăng nhập
Hình 3.3: Giao diện trang đăng ký 15
Hình 3.4: Giao diện danh sách sản phẩm
Hình 3.5: Giao diện giỏ hàng 16
Hình 3.6: Giao diện thanh toán bằng QR code. Khi chuyển khoản thành công, nhân viên sẽ tự lên đơn.
Hình 3.7: Giao diện đơn hàng 17
Hình 3.8: Giao diện đánh giá của khách hàng
Hình 3.9: Giao diện hồ sơ tài khoản 3.2.2
Giao diện trang quản trị (Admin)
Giao diện quản trị được thiết kế với tông màu tối, tập trung vào các chức năng quản lý. 18
Hình 3.10: Giao diện bảng điều khiển (Dashboard)
Hình 3.11: Giao diện quản lý sản phẩm 19

Tài liệu liên quan: