ĐẠI HỌC BÁCH KHOA HÀ NỘI

TRƯỜNG CÔNG NGHỆ THÔNG TIN & TRUYỀN

THÔNG

───────***───────

BÁO CÁO
MÔN: PROJECT 2

WEB NGHE
NHẠC TRỰC TUYẾN

Sinh viên thực hiện: Nguyễn Công

Tiến MSSV:
20194382 – K64
Giáo viên hướng dẫn : Trịnh Văn Chiến

Hà Nội, tháng 8 năm 2022

2
 MỤC LỤC
Danh mục hình ảnh..........................................................................................4
LỜI MỞ ĐẦU..................................................................................................5
Chương 1. Cơ sở lý thuyết và công nghệ sử dụng...........................................6
1.1. Express JS.............................................................................................6
1.2. NodeJS..................................................................................................7
1.3. MongoDB..............................................................................................8
Chương 2. Tổng quan về hệ thống.................................................................10
2.1. Biểu đồ use case..................................................................................10
2.1.1. Biểu đồ use case tổng quan..........................................................10
2.1.2. Phân rã use case quản lý sản phẩm..............................................11
2.1.3. Phân rã use case quản lý khách hàng...........................................11
2.1.4. Phân rã use case quản lý đơn hàng..............................................12
2.2. Đặc tả use case....................................................................................12
2.2.1. Đặc tả use case đăng nhập...........................................................12
2.2.2. Đặc tả use case đăng ký...............................................................13
2.2.3. Đặc tả use case tìm kiếm sản phẩm.............................................13
2.2.4. Đặc tả use case xem chi tiết sản phẩm.........................................14
2.2.5. Đặc tả use case đăng xuất............................................................14
2.2.6. Đặc tả use case xem giỏ hàng......................................................15
2.2.7. Đặc tả use case xóa sản phẩm khỏi giỏ hàng...............................15
2.2.8. Đặc tả use case đặt hàng..............................................................15
2.2.9. Đặc tả use case xem lịch sử đơn hàng.........................................16
2.2.10. Đặc tả use case xem chi tiết đơn hàng...................................16
2.2.11. Đặc tả use case hủy đơn hàng................................................17
2.2.12. Đặc tả use case quản lý sản phẩm..........................................17
2.2.13. Đặc tả use case quản lý khách hàng.......................................19
2.2.14. Dặc tả use case quản lý đơn hàng..........................................20
2.3. Biểu đồ tuần tự....................................................................................21
2.3.1. UC đăng nhập..............................................................................21
2.3.2. UC đăng ký..................................................................................21
2.3.3. UC đăng xuất...............................................................................22
2.3.4. UC thêm sản phẩm.......................................................................22

3
 2.3.5. UC Tìm kiếm sản phẩm...............................................................23
2.3.6. UC xem danh sách sản phẩm.......................................................23
2.3.7. UC xem chi tiết sản phẩm............................................................24
2.3.8. UC sủa sản phẩm.........................................................................24
2.3.9. UC xóa sản phẩm.........................................................................24
2.3.10. UC tìm kiếm khách hàng........................................................24
2.3.11. UC xem danh sách khách hàng..............................................25
Chương 3. Thiết kế và xây dựng website bán hàng.......................................25
3.1. Giao diện trang đăng nhập..................................................................25
3.2. Giao diện trang đăng ký......................................................................25
3.3. Giao diện quên mật khẩu.....................................................................26
3.4. Giao diện trang chủ.............................................................................26
3.5. Giao diện danh sách sản phẩm............................................................27
3.6. Giao diện xem chi tiết sản phẩm.........................................................28
3.7. Giao diện giỏ hàng..............................................................................28
3.8. Giao diện trang thanh toán..................................................................28
3.9. Giao diện trang thông tin tài khoản.....................................................29
Chương 4. Triển khai thử nghiệm và đánh giá..............................................29
4.1. Triển khai hệ thống.............................................................................29
4.2. Đánh giá hệ thống...............................................................................30
KẾT LUẬN....................................................................................................31
TÀI LIỆU THAM KHẢO.............................................................................32

4
Danh mục hình ảnh
Hình 1.1. Cấu trúc ExpressJs………………………………………………………………6
Hình 2.1. Biểu đồ Use case tổng quan…………………………………………………….11
Hình 2.2. Biểu đồ phân rã use case quản lý sản phẩm…………………………………….11
Hình 2.3. Biểu đồ phân rã use case quản lý khách hàng…………………………………..12
Hình 2.4. Biểu đồ phân rã use case quản lý đơn hàng……………………………………..12
Hình 2.5. Biểu đồ tuần tự use case đăng
nhập……………………………………………..21
Hình 2.6. Biểu đồ tuần tự use case đăng ký……………………………………………….22
Hình 2.7. Biểu đồ tuần tự use case đăng xuất……………………………………………..22
Hình 2.8. Biểu đồ tuần tự use case thêm sản phẩm………………………………………..23
Hình 2.9. Biểu đồ tuần tự use case tìm kiếm sản phẩm……………………………………
23
Hình 2.10. Biểu đồ tuần tự use case xem danh sách sản phẩm……………………………23
Hình 2.11. Biểu đồ tuần tự use case xem chi tiết sản phẩm……………………………….24
Hình 2.11. Biểu đồ tuần tự use case sửa sản phẩm………………………………………..24
Hình 2.12. Biểu đồ tuần tự use case xóa sản phẩm………………………………………..24
Hình 2.13. Biểu đồ tuần tự use case tìm kiếm khách hàng………………………………..24
Hình 2.14. Biểu đồ tuần tự use case xem danh sách khách hàng………………………….25
Hình 3.1. Giao diện trang đăng nhập………………………………………………………25
Hình 3.2. Giao diện trang đăng ký tài khoản………………………………………………26
Hình 3.3. Giao diện trang quên mật khẩu………………………………………………….26
Hình 3.4. Giao diện trang chủ……………………………………………………………..27
Hình 3.5. Giao diện trang danh sách sản phẩm……………………………………………27
Hình 3.6. Giao diện trang xem chi tiết sản phẩm…………………………………………28
Hình 3.7. Giao diện trang giỏ hàng………………………………………………………..28
Hình 3.8. Giao diện trang thanh toán……………………………………………………...29
Hình 3.9 Giao diện trang thông tin tài khoản……………………………………………...29

5
 LỜI MỞ ĐẦU
Ngày nay với sự phát triển mạnh mẽ của công nghệ thông tin và những ứng dụng của nó
trong đời sống. Máy tính điện tử không còn là một thứ phương tiện lã lẫm đối với mọi
người mà nó trở thành một công cụ làm việc và giải trí thông dụng và hữu ích của chúng
ta, không chỉ ở công sở mà còn ngay cả trong gia đình.
Trong nền kinh tế hiện nay, với xu thế toàn cầu hoá nền kinh tế thế giới, mọi mặt
của đời sống xã hội ngày càng được nâng cao, đặc biệt là nhu cầu trao đổi hàng hoá của
con người ngày càng tăng cả về số lượng và chất lượng.Hiện nay các công ty tin học
hàng đầu thế giới không ngừng đầu tư và cải thiện các giải pháp cũng như các sản phẩm
nhằm cho phép tiến hành thương mại hóa trên Internet. Thông qua các sản phẩm và công
nghệ này, chúng ta dễ dàng nhận ra tầm quan trọng và tính tất yếu của thương mại điện
tử. Với những thao tác đơn giản trên máy có nối mạng Internet bạn sẽ có tận tay những gì
mình cần mà không phải mất nhiều thời gian. Bạn chỉ cần vào các trang dịch vụ thương
mại điện tử, làm theo hướng dẫn và click vào những gì bạn cần. Các nhà dịch vụ sẽ mang
đến tận nhà cho bạn
Để tiếp cận và góp phần đẩy mạnh sự phổ biến của thương mại điện tử ở Việt Nam,
Em đã tìm hiểu, xây dựng và cài đặt “Website bán hàng trực tuyến” với mặt hàng là:
Quần áo. Qua khảo sát thực tế, ở Việt Nam thì hình thức bán hàng qua mạng này
cũng khá phổ biến.
Cùng với sự chỉ bảo tận tình của thầy Trịnh Văn Chiến em đã hoàn thành
website này.Trong quá trình phân tích thiết kế hệ thống không thể tránh khỏi những sai
sót mong cô đóng góp ý kiến để trang Web được hoàn thiện hơn.

Cách triển khai:

 MongoDB dùng để xử lý các yêu cầu về dữ liệu
 ExpressJS là một web application framework cho NodeJS, cung cấpcác tính năng mạnh
mẽ cho việc xây dựng một ứng dụng web đúngnghĩa hoặc ngược lại
 NodeJS là một nền tảng được xây dựng trên “V8 Javascript engine”được viết bằng c++
và Javasccript
 Sử dụng HTML/ CSS để xây dựng giao diện website
Đồ án bao gồm 3 chương:
 Chương 1. Cơ sở lý thuyết và công nghệ sử dụng
Chương này nêu ra các công nghệ được sử dụng trong đề tài và tổng quan lý thuyết
về công nghệ được sử dụng
 Chương 2. Phân tích thiết kế hệ thống
Chương này nêu ra bài toán quản lí thông tin cho người dùng, phân tích quy trình
hoạt động của website. Từ đó nêu lên mục đích, yêu cầu đặt ra và phân tích hệ
thống.
 Chương 3. Thiết kế và xây dựng website bán hàng
 Chương 4. Triển khai thử nghiệm và đánh giá
Chương này nêu cách cài đặt chương trình và môi trường

6
 Chương 1. Cơ sở lý thuyết và công nghệ sử dụng
1.1. Express JS
1.1.1. Khái niêm
 Express js là một Framework nhỏ, nhưng linh hoạt được xây dựng trên nền
tảngcủa Nodejs. Nó cung cấp các tính năng mạnh mẽ để phát triển web hoặc
mobile.
 Về các package hỗ trợ: Expressjs có vô số các package hỗ trợ.
 Về performance: Express cung cấp thêm về các tính năng (feature) để dev lập
trình tốt hơn. Chứ không làm giảm tốc độ của NodeJS.
 Và hơn hết, các Framework nổi tiếng của NodeJS hiện nay đều sử dụng
ExpressJS như một core function, chẳng hạn: SailsJS, MERN,....
1.1.2. Cấu trúc của Express JS

Hình 1.1. Cấu trúc Epress JS

Cấu trúc Express JS vô cùng đơn giản:
 Root
 app.js chứa các thông tin về cấu hình, khai báo, các định nghĩa,... để
ứngdụng của chúng ta chạy ok
 package.json chứa các package cho ứng dụng chạy. Nếu bạn nào làm với
PHP hoặc RoR rồi thì file này có chức năng tương tự như
composer.jsonhoặc Gemfile
 Folder routes: chứa các route có trong ứng dụng
 Folder view: chứa view/template cho ứng dụng
 Folder public chứa các file css, js, images,...cho ứng dụng
1.1.3. Tìm hiểu về Router trong Express
1.1.3.1. Khái niệm
 Router là một Object (khác Routing nhé), nó là một instance riêngcủa
middleware và routes (Hai khái niệm này là gì thì chúng ta sẽ tìm hiểu
saunhé). Chính vì nó là một instance của middleware và route nên nó có các
chứcnăng của cả hai. Chúng ta có thể gọi nó là một mini-application

7
  Các Application dùng ExpressJS làm core đều có phần Router được tích hợp
sẵn trong đó.
 Router hoạt động như một middleware nên chúng ta có thể dùng nó nhưmột
arguments. Hoặc dùng nó như một arguments cho route khác
 Chúng ta cũng có thể sử dụng Router để chia route.
1.1.3.2. Tìm hiểu về các method all của router
 router.all(). Method này phù hợp với việc định nghĩa mang tính chất toàn cục
cho các prefix
 Nếu ta đặt route này trên cùng (top) thì nó yêu cầu tất cả các route bên dưới
phải được requireAuthentication. Có nghĩa là xác thực trước khi thực hiện
mộthành động hay một task nào đó tiếp theo.
1.1.4. Tìm hiều về router.METHOD()
 Router.METHOD() cung cấp cho chúng ta chức năng Routing trong
ExpressJS.Cụ thể METHOD() ở đây là các HTTP method mà chúng ta
thường xuyên sửdụng. Chẳng hạn GET, POST, PUT,.
 Tên METHOD phải được viết thường
 Để bảo mật tốt hơn thì có thể sử dụng Regex để bắt các Endpoint
1.2. NodeJS
1.2.1. Khái niệm
 NodeJS là một mã nguồn được xây dựng dựa trên nền tảng Javascript V8
Engine,nó được sử dụng để xây dựng các ứng dụng web như các trang video
clip, các forumvà đặc biệt là trang mạng xã hội phạm vi hẹp. NodeJS là một
mã nguồn mở được sửdụng rộng bởi hàng ngàn lập trình viên trên toàn thế
giới
 NodeJS có thể chạy trên nhiều nền tảng hệ điều hành khác nhau từ WIndow
chotới Linux, OS X nên đó cũng là một lợi thế. NodeJS cung cấp các thư viện
phong phúở dạng Javascript Module khác nhau giúp đơn giản hóa việc lập
trình và giảm thờigian ở mức thấp nhất
 Khi nói đến NodeJS thì phải nghĩ tới vấn đề Realtime. Realtime ở đây chính
làxử lý giao tiếp từ client tới máy chủ theo thời gian thực
1.2.2. Các đặc tính của NodeJS
 Không đồng bộ: Tất cả các API của NodeJS đều không đồng bộ( none-
blocking), nó chủ yếu được dựa trên nền của NodeJS Server và chờ đợi
Server trả dữ liệu về. Việc di chuyển máy chủ đến các API tiếp theo sau khi
gọi và cơ chế thông báo các sự kiện của NodeJS giúp máy chủ để có được
một phản ứng từ các cuộc gọi API trươc(realtime).
 Chạy rất nhanh: NodeJ được xây dựng dựa vào nền tảng V8 JavascriptEngine
nên việc thực thi chương trình rất nhanh.
 Đơn luồng nhưng khả năng mở rộng cao: Node.js sử dụng một mô hìnhluồng
duy nhất với sự kiện lặp. cơ chế tổ chức sự kiện giúp các máy chủ đểđáp ứng
một cách không ngăn chặn và làm cho máy chủ cao khả năng mở rộng như
trái ngược với các máy chủ truyền thống mà tạo đề hạn chế để xửlý yêu cầu.
Node.js sử dụng một chương trình đơn luồng và các chươngtrình tương tự có
thể cung cấp dịch vụ cho một số lượng lớn hơn nhiều sovới yêu cầu máy chủ
truyền thống như Apache HTTP Server.
 Không đệm: NodeJS không đệm bất kì một dữ liệu nào và các ứng dụng này
chủ yếu là đầu ra dữ liệu.

8
  Có giấy phép: NodeJS đã được cấp giấy phép bởiMIT License.

1.2.3. Hai NodeJS framework sử dụng

1.2.3.1. Express
ExpressJS là một trong những framework phổ biến dùng để xây dựng API
vàWebsite phổ biến nhất của NodeJS. Nó được sử dụng rộng rãi đến mức hầu như
mọidự án Web nào đều bắt đầu bằng việc tích hợp Express. Có rất nhiều lý do để
chọnExpressJS:
 Có nhiều tính năng hỗ trợ tất cả những gì bạn cần trong việc xây dựng Web
vàAPI
 Quản lý các router dễ dàng
 Cung cấp một nền tảng phát triển cho các API
 Hỗ trợ nhiều thư viện và plugin
 Bảo mật và an toàn hơn so với việc code thuần
 Hỗ trợ cồng đồng tuyệt vời
1.2.3.2. SocketIO
 SocketIO là một web-socket framework có sẵn cho nhiều ngôn ngữ lập trình
 Trong NodeJS, SocketIO cho phép xây dựng một các ứng dụng realtime như
chatbot, tickers, dashboard APIs, và nhiều ứng dụng khác. SocketIO có lợi
íchhơn so với NodeJS thông thường.
 Hỗ trợ route URL tùy chỉnh cho web socket
 Tích hợp dễ dàng hơn với Express JS
 Hỗ trợ clustering với Redis
1.3. MongoDB
1.3.1. Khái niệm
MongoDB là phần mềm cơ sở dữ liệu mã nguồn mở NoSQL hỗ trợ đa nền
tảngđược thiết kế theo hướng đối tượng. Các bảng (trong MongoDB gọi là
collection) có cấu trúc linh hoạt cho phép dữ liệu không cần tuân theo dạng cấu trúc
nào.Vì thế, nó có thể dùng để lưu trữ dữ liệu có cấu trúc phức tạp và đa dạng. Dữ
liệuđược gọi là Big Data. Đặc biệt, chương trình này lưu trữ dữ liệu vào collection
theohướng tài liệu kiểu JSON thay vì bảng nên có hiệu suất cao và tính khả dụng
cao.
1.3.2. NoSQL
NoSQL (Non-Relational SQL) là dạng cơ sở dữ liệu mã nguồn mở được ra đờinhư
một mô hình tiến bộ hơn về tốc độ, tính năng,… so với hệ quản trị cơ sở dữ
liệuquan hệ RDBMS. NoSQL có kiểu dữ liệu JSON. Đây là dạng dữ liệu kiểu key
vàvalue cùng với hiệu suất nhanh và khả năng mở rộng không bị ràng buộc bởi việc
tạokhóa ngoại, khóa chính,… nên được ưa chuộng và sử dụng rất phổ biến
1.3.3. Tính năng của MongoDB
1.3.3.1. Truy vấn ad học
Truy vấn ad hoc là một trong những tính năng tốt nhất của chương trình. Nó hỗtrợ
các trường, truy vấn phạm vi và tìm kiếm các biểu thức để trả về các trường tài
liệucụ thể bao gồm các hàm JavaScript do người dùng xác định hoặc các truy vấn
nàyđược cấu hình và trả về mẫu kết quả ngẫu nhiên có kích thước nhất định. Bên
cạnh đó,các trường trong MongoDB có thể được dùng để lập các chỉ mục chính và
các chỉ mục phụ.

9
 1.3.3.2. Nhân rộng
Đây là tính năng mà chương trình cung cấp Replica set. Nó bao gồm hai hoặcnhiều
bản sao của dữ liệu. Trong đó mỗi bản sao có thể đóng vai trò chính và phụ.
 Trong quá trình nhân rộng, tất cả các dữ liệu ghi và đọc thực hiện trên bản
sao chính
 Bản sao thứ cấp sử dụng bản sao tích hợp để duy trì bản sao dữ liệu của bản
chính
Trong trường hợp một bản sao chính thất bại, Replica set chọn ra một bản saothứ
cấp để trở thành bản sao chính tiếp theo. Replica thứ cấp có thể tùy chọn phục
vụcác hoạt động nhưng dữ liệu cuối cùng chỉ nhất quán theo mặc định
1.3.3.3. Cân bằng tải
Bằng cách sử dụng Sharding, MongoDB chia tỷ lệ theo chiều ngang để ngườidùng
chọn một Shard key. Xác định các dữ liệu được phân phối trong collection.
Nhìnchung, dữ liệu được chia thành các phạm vi và được phân phối đồng đều dựa
trên các Shard key. Nó chạy trên nhiều máy chủ, cân bằng tải hoặc sao chép dữ liệu
để giữhệ thống luôn hoạt động trong trường hợp có lỗi về phần cứng
1.3.3.4. Lưu trữ tệp
Với tính năng lưu trữ tệp, MongoDB được sử dụng như một hệ thống tệp(GridFS)
giúp cân bằng tải và sao chép dữ liệu trên nhiều máy tính để lưu trữ tệp.Trong đó,
GridFS chia một tệp ra thành các phần hoặc các đoạn và lưu trữ thànhnhững tài liệu
riêng biệt. Bạn có thể truy cập GridFS bằng tiện ích Mongofiles hoặc plugin cho
Nginx và Lighttpd
1.3.3.5. Tập hợp
Ở tính năng tập hợp, chương trình này cung cấp ba cách chính để thực hiện tậphợp
là Aggregation Pipeline, chức năng Mapreduce và Single-purpose
Aggregation.Trong đó, theo tài liệu của MongoDB thì Aggregation Pipeline được
công nhận làcung cấp hiệu suất tốt hơn hầu hết các hoạt động tổng hợp
1.3.3.6. Thực thi Javascript phía máy chủ
JavaScript thường được thực thi trong các truy vấn, các hàm tổng hợp và đượcgửi
trực tiếp đến cơ sở dữ liệu.
1.3.3.7. Giới hạn kích thước collection
MongoDB hỗ trợ collection có kích thước cố định được gọi là collection giớihạn.
Nó có kích cỡ cố định theo sau thứ tự chèn làm tăng hiệu suất các hoạt động kháccó
liên quan đến dữ liệu. Khi dữ liệu vượt quá mức giới hạn thì các tài liệu cũ sẽ bị
xóamà không cần dùng bất cứ dòng lệnh nào.
1.3.3.8. Giao dịch
MongoDB còn có tính năng hỗ trợ cho các giao dịch ACID đa tài liệu, bắt đầu
cóhiệu dụng từ phiên bản 4.0 vào tháng 6 năm 2018.
1.3.4. Ưu điểm của MongoDB

10
  Đầu tiên có thể nhắc đến là tính linh hoạt lưu trữ dữ liệu theo các kích cỡ
khác nhau, dữ liệu dưới dạng hướng tài liệu JSON nên bạn có thể chèn
vàothoải mái bất cứ thông tin gì bạn muốn.
 Khác với RDBMS dữ liệu trong đây không có sự ràng buộc và không cóyêu
cầu tuân theo khuôn khổ nhất định, điều này giúp bạn tiết kiệm thờigian cho
việc kiểm tra sự thỏa mãn về cấu trúc nếu muốn chèn, xóa, cậpnhật hay thay
đổi các dữ liệu trong bảng
 MongoDB dễ dàng mở rộng hệ thống bằng cách thêm node vào cluster – cụm
các node chứa dữ liệu giao tiếp với nhau
 Ưu điểm thứ tư là tốc độ truy vấn nhanh hơn nhiều so với hệ quản trị cơ sở dữ
liệu quan hệ RDBMS do dữ liệu truy vấn được cached lên bộ nhớ RAMđể
lượt truy vấn sau diễn ra nhanh hơn mà không cần đọc từ ổ cứng
 Cũng là một ưu điểm về hiệu suất truy vấn của MongoDB, trường dữ
liệu“_id” luôn được tự động đánh chỉ mục để đạt hiệu suất cao nhất
1.3.5. Nhược điểm MongoDB
 Dữ liệu trong MongoDB không bị ràng buộc như RDBMS nhưng người
sửdụng lưu ý cẩn thận mọi thao tác để không xảy ra các kết quả ngoài ý
muốngây ảnh hưởng đến dữ liệu
 Một nhược điểm mà “dân công nghệ” hay lo ngại là bộ nhớ của thiết
bị.Chương trình này thường tốn bộ nhớ do dữ liệu được lưu dưới dạng key-
value, trong khi các collection chỉ khác về value nên sẽ lặp lại key dẫn đến
thừa dữ liệu
 Thông thường, dữ liệu thay đổi từ RAM xuống ổ cứng phải qua 60 giây
thìchương trình mới thực hiện hoàn tất, đây là nguy cơ bị mất dữ liệu nếu bất
ngờ xảy ra tình huống mất điện trong vòng 60 giây đó

Chương 2. Tổng quan về hệ thống

2.1. Biểu đồ use case
2.1.1. Biểu đồ use case tổng quan

11
 Hình 2.1. Biểu đồ Use case tổng quan

2.1.2. Phân rã use case quản lý sản phẩm

Hình 2.2. Biểu đồ phân rã use case quản lý sản phẩm

2.1.3. Phân rã use case quản lý khách hàng

12
 Hình 2.3. Biểu đồ phân rã use case quản lý khách hàng

2.1.4. Phân rã use case quản lý đơn hàng

Hình 2.4. Biểu đồ phân rã use case quản lý đơn hàng

2.2. Đặc tả use case

2.2.1. Đặc tả use case đăng nhập

Mã Use case UC01 Tên Use case Đăng nhập

Tác nhân Khách

Tiền điều kiện Không

Luồng sự kiện STT Thực hiện bởi Hành động

chính
Khách Chọn chức năng đăng nhập
(Thành công) 1.
Hệ thống Hiển thị giao diện đăng nhập
2.
Khách Nhập email và mật khẩu
3.
Khách Yêu cầu đăng nhập
4.
Hệ thống Kiểm tra xem khách đã nhập các trường bắt buộc hay
5.
chưa
Hệ thống Kiểm tra email và mật khẩu có hợp lệ hay không
6.
Hệ thống Hiển thi giao diện trang chủ
7.
Luồng sự kiện STT Thực hiện bởi Hành động
thay thế
6a. Hệ thống Thông báo lỗi: cần nhập các trường bắt buộc nhập nếu
khách nhập thiếu

7a. Hệ thống Thông báo lỗi: Email hoặc mật khẩu không đúng

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

Bảng 2.1. Đặc tả use case đăng nhập
2.2.2. Đặc tả use case đăng ký

Mã Use case UC02 Tên Use case Đăng Ký

13
Tác nhân Khách

Tiền điều kiện Không

Luồng sự kiện STT Thực hiện bởi Hành động

chính
Khách Chọn chức năng đăg ký
(Thành công) 1.
Hệ thống Hiển thị giao diện đăng ký
2.
Khách Nhập các thông tin cá nhân
3.
Khách Yêu cầu đăng ký
4.
Hệ thống Kiểm tra xem khách đã nhập các trường bắt buộc hay
5.
chưa
Hệ thống Kiểm tra email và mật khẩu có hợp lệ hay không
6.
Hệ thống Lưu thông tin tài khoản
7.
Luồng sự kiện STT Thực hiện bởi Hành động
thay thế
6a. Hệ thống Thông báo lỗi: cần nhập các trường bắt buộc nhập nếu
khách nhập thiếu

7a. Hệ thống Thông báo lỗi: Email hoặc mật khẩu không đúng

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

Bảng 2.2. Đặc tả use case đăng ký

2.2.3. Đặc tả use case tìm kiếm sản phẩm

Mã Use case UC03 Tên Use case Tìm kiếm sản phẩm

Tác nhân Khách

Tiền điều kiện Không

Luồng sự kiện STT Thực hiện bởi Hành động

chính
Khách Chọn chức năng tìm kiếm sản phẩm
(Thành công) 1.
Hệ thống Lấy danh sách sản phẩm và hiển thị giao diện tìm kiếm
2.
sản phầm
Khách Nhập tên sản phẩm muốn tìm kiếm
3.
Khách Yêu cầu tìm kiếm
4.
Hệ thống Kiểm tra xem khách đã nhập ít nhất 1 thông tin tìm kiếm
5.
chưa
Hệ thống Tìm và lấy về thông tin sản phẩm phù hợp
6.
Hệ thống Hiển thị danh sách sản phẩm
7.
Luồng sự kiện STT Thực hiện bởi Hành động
thay thế
6a. Hệ thống Thông báo lỗi: cần nhập ít nhất 1 tiêu chí tìm kiếm

7a. Hệ thống Thông báo lỗi: Không tìm thấy sản phẩm phù hợp

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

Bảng 2.3. Đặc tả use case tìm kiếm sản phẩm

2.2.4. Đặc tả use case xem chi tiết sản phẩm

14
Mã Use case UC04 Tên Use case Xem chi tiết sản phẩm

Tác nhân Khách

Tiền điều kiện Không

Luồng sự kiện STT Thực hiện bởi Hành động

chính
Khách Ấn chọn 1 sản phẩm
(Thành công) 1.
Hệ thống Lấy thông tin về sản phẩm
2.
Hệ thống Hiện thị giao diện chi tiết sản phẩm
3.
Khách Thêm sản phẩm vào giỏ hàng
4.
Hệ thống Thêm sản phẩm vào giỏ hàng
5.
Luồng sự kiện STT Thực hiện bởi Hành động
thay thế
3a. Hệ thống Thông báo lỗi: sản phẩm không tồn tại trong hệ thống

5a. Hệ thống Thông báo lỗi: phải đăng nhập để thêm sản phẩm

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

Bảng 2.4. Đặc tả use case xem chi tiết sản phẩm

2.2.5. Đặc tả use case đăng xuất

Mã Use case UC05 Tên Use case Đăng xuất

Tác nhân Khách hàng

Tiền điều kiện Khách đã đăng nhập thành công với vai trò khách hàng

Luồng sự kiện STT Thực hiện bởi Hành động

chính
Khách hàng Chọn chức năng đăng xuất
(Thành công) 1.
Hệ thống Đăng xuất cho khách hàng
2.
Khách Hiện thị giao diện trang chủ
3.
Luồng sự kiện Không có
thay thế

Hậu điều kiện Khách hàng đăng xuất khỏi tài khoản
Bảng 2.5. Đặc tả use đăng xuất

2.2.6. Đặc tả use case xem giỏ hàng

Mã Use case UC06 Tên Use case Xem giỏ hàng

Tác nhân Khách hàng

Tiền điều kiện Khách đăng nhập thành công với vai trò khách hàng

Luồng sự kiện STT Thực hiện bởi Hành động

chính
Khách hàng Chọn chức năng xem giỏ hàng
(Thành công) 1.
Hệ thống Hiển thị danh sách các thông tin sản phẩm đang có trong
2.
giỏ hàng và nút Mua hàng, hoặc thông báo Giỏ hàng
rỗng kèm link trở về trang chủ

15
Luồng sự kiện Không có
thay thế

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

Bảng 2.6. Đặc tả use case xem giỏ hàng

2.2.7. Đặc tả use case xóa sản phẩm khỏi giỏ hàng

Mã Use case UC07 Tên Use case Xóa sản phẩm khỏi giỏ
hàng

Tác nhân Khách hàng

Tiền điều kiện Khách hàng đang ở trang Giỏ hàng, Giỏ hàng không rỗng

Luồng sự kiện STT Thực hiện bởi Hành động

chính
Khách hàng Chọn chức năng xóa sản phẩm khỏi giot hàng
(Thành công) 1.
Hệ thống Hiển thị giao diện xác nhận xóa
2.
Khách hàng Chọn xóa hoặc không
3.
Hệ thống Xóa sản phẩm khỏi giỏ hàng
4.
Luồng sự kiện Không có
thay thế

Hậu điều kiện Khách hàng đăng xuất khỏi tài khoản
Bảng 2.7. Đặc tả use case xóa sản phẩm khỏi giỏ hàng

2.2.8. Đặc tả use case đặt hàng

Mã Use case UC08 Tên Use case Đặt hàng

Tác nhân Khách hàng

Tiền điều kiện Khách hàng đang ở trang Giỏ hàng, Giỏ hàng không rỗng

Luồng sự kiện STT Thực hiện bởi Hành động

chính
Khách hàng Chọn chắc năng đặt hàng
(Thành công) 1.
Hệ thống Hiển thị tên các sản phẩm, giá tiền, giảm giá và trường
2.
nhập địa chỉ giao hàng
Khách hàng Nhập địa chỉ mà đơn hàng cần giao đến và chọn Thanh
3.
toán
Hệ thống Kiểm tra khách hàng đã nhập địa chỉ hay chưa
4.
Hệ thống Thông báo: “Đơn hàng của bạn đang chờ được xử lý"
5.
Luồng sự kiện STT Thực hiện bởi Hành động
thay thế
5a. Hệ thống Thông báo lỗi: khách hàng chưa nhập địa chỉ giao hàng

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

Bảng 2.8. Đặc tả use case đặt hàng

16
 2.2.9. Đặc tả use case xem lịch sử đơn hàng

Mã Use case UC09 Tên Use case Xem lịch sử đơn hàng

Tác nhân Khách hàng

Tiền điều kiện Khách đăng nhập thành công với vai trò Khách hàng

Luồng sự kiện STT Thực hiện bởi Hành động

chính
Khách hàng Chọn chắc năng xem lịch sử đơn hàng
(Thành công) 1.
Hệ thống Hiển thị lịch sử các đơn hàng (nếu có) hoặc thông báo
2.
lịch sử trống kèm link về trang chủ

Luồng sự kiện Không có

thay thế

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

Bảng 2.9. Đặc tả use case xem lịch sử đơn hàng

2.2.10. Đặc tả use case xem chi tiết đơn hàng

Mã Use case UC10 Tên Use case Xem chi tiết đơn hàng

Tác nhân Khách hàng

Tiền điều kiện Khách đăng nhập thành công với vai trò Khách hàng

Luồng sự kiện STT Thực hiện bởi Hành động

chính
Khách hàng Chọn đơn hàng muốn xem chi tiết
(Thành công) 1.
Hệ thống Hiển thị thông tin chi tiết đơn hàng
2.
Luồng sự kiện Không có
thay thế

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

Bảng 2.10. Đăc tả use case xem chi tiết đơn hàng

2.2.11. Đặc tả use case hủy đơn hàng

Mã Use case UC11 Tên Use case Hủy đơn hàng

Tác nhân Khách hàng

Tiền điều kiện Khách hàng đang ở trang Giỏ hàng, Giỏ hàng không rỗng

Luồng sự kiện STT Thực hiện bởi Hành động

chính
Khách hàng Chọn chắc năng hủy đơn hàng
(Thành công) 1.
Hệ thống Kiểm tra trạng thái đơn hàng có hợp lệ để hủy hay
2.
không
Hệ thống Chuyển trạng thái của đơn hàng thành Đã Hủy, thông
3.
báo cho khách hàng

17
Luồng sự kiện STT Thực hiện bởi Hành động
thay thế
3a. Hệ thống Thông báo lỗi: Khách hàng không thể hủy đơn hàng này

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

Bảng 2.11. Đặc tả use case hủy đơn hàng

2.2.12. Đặc tả use case quản lý sản phẩm

Mã Use case UC12 Tên Use case Quản lý Sản phẩm

Tác nhân Admin

Mô tả Thực hiện các tác vụ như Tìm kiếm sản phẩm (S), Xem danh sách sản phẩm (V), Xem chi
tiết sản phẩm (R), Sửa sản phẩm (U), Xóa sản phẩm (D) và Thêm sản phẩm (C)

Sự kiện kích Admin nhấn vào nút "Tìm kiếm sản phẩm" (S), "Xem danh sách sản phẩm" (V), "Xem
hoạt chi tiết sản phẩm" (R), "Sửa thông tin sản phẩm" (U), "Xóa sản phẩm" (D) hoặc
"Thêm sản phẩm" (C) tương ứng

Tiền điều kiện Khách đăng nhập thành công với vai trò Admin
Tìm kiếm(S)

STT Thực hiện bởi Hành động

Admin chọn chức năng Tìm kiếm sản phẩm.
1.
Hệ thống hiển thị giao diện Tìm kiếm sản phẩm.
2.
Admin nhập mã sản phẩm, tên sản phẩm và/hoặc
3.
hạng mục sản phẩm
Admin yêu cầu tìm kiếm.
Luồng sự kiện 4.
Hệ thống kiểm tra xem Admin đã nhập ít nhất một
chính 5.
thông tin tìm kiếm chưa.
Hệ thống tìm và lấy về thông tin những sản phẩm
6.
thoả mãn các tiêu chí tìm kiếm.
Hệ thống hiển thị danh sách những sản phẩm thoả
7.
mãn điều kiện tìm kiếm nếu có ít nhất một sản
phẩm được tìm thấy.
6a Hệ thống thông báo: Cần nhập ít nhất một tiêu chí
tìm
Luồng kiếm nếu Admin không nhập thông tin nào.
sự kiện 7a Hệ thống thông báo: Không tìm thấy thông tin sản
thay thế
phẩm nào thoả mãn tiêu chí tìm kiếm nếu trả về
danh sách rỗng.
Xem danh sách(V)

STT Thực hiện bởi Hành động

Admin yêu cầu Xem danh sách sản phẩm.
1.
Hệ thống lấy danh sách hạng mục sản phẩm.
2.
Hệ thống lấy danh sách tất cả sản phẩm.
3.

18
 Luồng sự kiện Hệ thống hiển thị giao diện Xem danh sách sản
4. phẩm
chính
gồm:

- Phía trên: Danh sách hạng mục sản phẩm

để người dùng có thể lọc sản phẩm theo
nhóm
- Trung tâm: Thông tin các sản phẩm
4a1 Admin lựa chọn một hạng mục sản phẩm.
Luồng
4a2 Hệ thống lấy các sản phẩm thuộc hạng mục sản
sự kiện
thay thế phẩm đã chọn, hiển thị lên giao diện.
Xem chi tiết(R)

STT Thực hiện bởi Hành động

Luồng sự kiện Admin chọn một Sản phẩm và xem chi tiết
1.
chính Hệ thống hiển thị thông tin chi tiết về sản phẩm
2.

Không
Luồng
sự kiện
thay thế

Sửa(U)

STT Thực hiện bởi Hành động

Admin chọn một Sản phẩm và yêu cầu sửa
1.
Hệ thống lấy thông tin chi tiết của sản phẩm và hiển thị
2.
thông tin cũ của sản phẩm trên giao diện Sửa sản
phẩm
Luồng sự kiện
Admin chỉnh sửa các thông tin sản phẩm và yêu cầu sửa.
chính 3.

Hệ thống kiểm tra các trường bắt buộc nhập.

4.
Hệ thống kiểm tra các trường cần đảm bảo duy nhất.
5.
Hệ thống cập nhật các thông tin cần chỉnh sửa và thông báo
6.
chỉnh sửa thành công.
5a Hệ thống thông báo lỗi: chưa nhập đủ các trường cần thiết
Luồng nếu Admin nhập thiếu trường.
sự kiện 6a Hệ thống thông báo lỗi: thông báo cụ thể trường nào không
thay thế
duy nhất nếu Admin nhập trùng.
Xóa(D)

STT Thực hiện bởi Hành động

Admin chọn một Sản phẩm và yêu cầu xoá
1.
Luồng sự kiện Hệ thống hiển thị thông báo yêu cầu người dùng xác nhận
2.
chính việc xoá
Admin xác nhận xoá sản phẩm
3.

19
 Hệ thống xoá sản phẩm và thông báo xoá thành công.
4.
Luồng 4a Hệ thống kết thúc use case nếu người dùng xác nhận
sự kiện không xoá.
thay thế
Thêm(C)
Thêm (C):

STT Thực hiện bởi Hành động

Admin yêu cầu thêm Sản phẩm mới
1.
Hệ thống hiển thị giao diện thêm sản phẩm
2.
Admin nhập các thông tin sản phẩm
3.
Luồng sự kiện
chính
Hệ thống kiểm tra các trường bắt buộc nhập
4.
Hệ thống kiểm tra các trường cần đảm bảo duy nhất.
5.
Hệ thống cập nhật các thông tin và thông báo thành
6.
công.
5a Hệ thống thông báo lỗi: chưa nhập đủ các trường cần thiết
Luồng nếu Admin nhập thiếu trường.
sự kiện 6a Hệ thống thông báo lỗi: thông báo cụ thể trường nào
thay thế
không duy nhất nếu Admin nhập trùng.

Hậu điều kiện - R, S: Hệ thống hiển thị danh sách sản phẩm thỏa mãn.
- C, U, D: Hệ thống hiển thị thông báo xác nhận có thể cập nhật (Thêm, sửa, xóa) sản
phẩm hay không, nếu có thể, cập nhật lại dữ liệu trong cơ sở dữ liệu.
Bảng 2.12. Đặc tả use case quản lý sản phẩm

2.2.13. Đặc tả use case quản lý khách hàng

Mã Use case UC13 Tên Use case Quản lý Khách hàng

Tác nhân Admin

Mô tả Thực hiện các tác vụ như Tìm kiếm khách hàng (S), Xem danh sách khách hàng (R) và
Xóa tài khoản khách hàng (D)

Sự kiện kích Admin nhấn vào nút "Tìm kiếm khách hàng" (S), "Xem danh sách khách hàng" (R)
hoạt hoặc "Xóa tài khoản khách hàng" (D) tương ứng.

Tiền điều kiện Khách đăng nhập thành công với vai trò Admin

20
 Tìm kiếm (S):
Tương tự UC Tìm kiếm sản phẩm
Xem danh sách (R):
Tương tự UC Xem danh sách sản phẩm
Xem thông tin (R):
Tương tự UC Xem chi tiết sản phẩm
Xoá (D):
Tương tự UC Xóa sản phẩm

2.2.14. Dặc tả use case quản lý đơn hàng

Mã Use case UC14 Tên Use case Quản lý đơn hàng

Tác nhân Admin

Mô tả Admin thực hiện các tác vụ như Tìm kiếm đơn hàng (S), Xem danh sách đơn hàng
(R), Sửa đơn hàng (U) và Xóa đơn hàng (D).

Sự kiện kích Admin nhấn vào nút "Tìm kiếm đơn hàng" (S), "Xem danh sách đơn hàng" (R), "Sửa
hoạt đơn hàng" (U) hoặc "Xóa đơn hàng" (D) hoặc tương ứng

Tiền điều kiện Khách đăng nhập thành công với vai trò Admin

Tìm kiếm (S):

Tương tự UC Tìm kiếm sản phẩm
Xem danh sách (R):
Tương tự UC Xem danh sách sản phẩm
Xem thông tin (R):
Tương tự UC Xem chi tiết sản phẩm
Xoá (D):
Tương tự UC Xóa sản phẩm

Hậu điều kiện - S, R: Hệ thống hiển thị danh sách đơn hàng thỏa mãn.
- U, D: Hệ thống hiển thị thông báo xác nhận có thể cập nhật (Thêm, sửa, xóa) đơn hàng
hay không, nếu có thể, cập nhật lại dữ liệu trong cơ sở dữ liệu.

2.3. Biểu đồ tuần tự

2.3.1. UC đăng nhập

21
 Hình 2.5. Biểu đồ tuần tự use case đăng nhập

2.3.2. UC đăng ký

22
 Hình 2.6. Biểu đồ tuần tự use case đăng ký

2.3.3. UC đăng xuất

Hình 2.7. Biểu đồ tuần tự use case đăng xuất

2.3.4. UC thêm sản phẩm

23
 Hình 2.8. Biểu đồ tuần tự use case thêm sản phẩm

2.3.5. UC Tìm kiếm sản phẩm

Hình 2.9. Biểu đồ tuần tự use case tìm kiếm sản phẩm

2.3.6. UC xem danh sách sản phẩm

Hình 2.10. Biểu đồ tuần tự use case xem danh sách sản phẩm

24
2.3.7. UC xem chi tiết sản phẩm

Hình 2.11. Biểu đồ tuần tự use case xem chi tiết sản phẩm

2.3.8. UC sủa sản phẩm

Hình 2.11. Biểu đồ tuần tự use case sửa sản phẩm

2.3.9. UC xóa sản phẩm

Hình 2.12. Biểu đồ tuần tự use case xóa sản phẩm

2.3.10. UC tìm kiếm khách hàng

25
 Hình 2.13. Biểu đồ tuần tự use case tìm kiếm khách hàng

2.3.11. UC xem danh sách khách hàng

Hình 2.14. Biểu đồ tuần tự use case xem danh sách khách hàng

Chương 3. Thiết kế và xây dựng website bán hàng

3.1. Giao diện trang đăng nhập

Hình 3.1. Giao diện trang đăng nhập

3.2. Giao diện trang đăng ký

26
 Hình 3.2. Giao diện trang đăng ký tài khoản

3.3. Giao diện quên mật khẩu

Hình 3.3. Giao diện trang quên mật khẩu

3.4. Giao diện trang chủ

27
 Hình 3.4. Giao diện trang chủ

3.5. Giao diện danh sách sản phẩm

Hình 3.5. Giao diện trang danh sách sản phẩm

28
3.6. Giao diện xem chi tiết sản phẩm

Hình 3.6. Giao diện trang xem chi tiết sản phẩm

3.7. Giao diện giỏ hàng

Hình 3.7. Giao diện trang giỏ hàng

3.8. Giao diện trang thanh toán

29
 Hình 3.8. Giao diện trang thanh toán

3.9. Giao diện trang thông tin tài khoản

Hình 3.9 Giao diện trang thông tin tài khoản

Chương 4. Triển khai thử nghiệm và đánh giá

4.1. Triển khai hệ thống

Do đây là một hệ thống được phát triển trên môi trường NodeJS nên để có thể chạy
được thì cần một số bước sau:
B1. Máy tính cần được cài NodeJs. Nếu máy tính chưa cài đặt thì có thể tải xuống
theo đường link: https://nodejs.org/dist/v16.16.0/node-v16.16.0-x64.msi
B2. Download mã nguồn project
B3. Mở cmd đến file mã nguồn và chạy câu lệnh ‘npm init’ để cài các thư viện cần
thiết
B4. Tiếp tục chạy câu lệnh ‘npm run dev’ để khởi chạy chương trình

30
B5. Mở trình duyệt web truy cập đường link: http://localhost:3000
4.2. Đánh giá hệ thống
Hệ thống hoạt động bình thường. Tuy nhiên UI/UX chưa được tối ưu nên mang lại trải
nghiệm chưa tốt cho người dùng.
Hệ thống chưa được hoàn chỉnh.

31
 KẾT LUẬN
Sau quá trình tìm hiểu thì em cũng hoàn thiện sản phẩm trang web thương mại điện
tử. Về cơ bản trang web đáp ứng những yêu cầu bài toán đặt ra ban đầu. Trang web
cho phép người dùng xem các sản phẩm của cửa hàng rồi đặt mua chúng . Tuy nhiên,
là một sản phẩm đầu tay của bản thân em nên không thể tránh những sai sót và hạn
chế so với ban đầu đặt ra. Trang web có ui/ux còn kém chưa mang lại trải nghiệm tốt
cho người dùng. Một số chức năng không thể hoạt động đúng như kỳ vọng. Cũng sau
quá trình tìm hiểu và học tập, đã giúp em tích lũy được nhiều kinh nghiệm. Đầu tiên
khả năng tự tìm hiểu, đọc các tài liệu chuyên ngành. Biết cách xây dựng, tổ chức và
cách hoạt động của một website. Cũng qua môn học bản thân em tích lũy được nhiều
kiến thức hơn trong việc phân tích thiết kế một hệ thống. Bản thân em thấy ứng dụng
nghe nhạc trực tuyến là một sản phẩm có tiềm năng. Do đó em sẽ cố gắng phát triển
và hoàn thiện sản phẩm một cách tốt nhất.
Cuối cùng em xin cảm ơn thầy Trịnh Văn Chiến đã giúp đỡ em rất nhiều trong quá
trình xây dựng sản phẩm của bản thân. Em xin chân thành cảm ơn thầy!

32
TÀI LIỆU THAM KHẢO
1. Tìm hiểu về NodeJS https://stackjava.com/tu-hoc-nodejs
2. Authentication sử dụng JWT https://vntalking.com/node-authentication-va-
authorization-su-dung-jwt.html
3. Login google https://www.loginradius.com/blog/engineering/google-
authentication-with-nodejs-and-passportjs/

33