Tìm hiểu về nodejs và xây dựng ứng website chia sẻ nhà ở

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG

HỌC CƠNG NGHỆ THƠNG TIN
KHOA CƠNG NGHỆ PHẦN MỀM

ĐỒ ÁN 1

TÌM HIỂU VỀ NODEJS VÀ
XÂY DỰNG ỨNG WEBSITE
CHIA SẺ NHÀ Ở

Giảng viên hướng dẫn: TH.S NGUYỄN CÔNG HOAN
Sinh viên thực hiện:

Đặng Thái Tài-20520923

Tp. Hồ Chí Minh, Tháng 7 năm 2021

ĐẠI


LỜI CẢM ƠN

Đầu tiên, nhóm thực hiện đề tài “Xây dựng website nghe mua điện thoại online” xin gửi
lời cảm ơn đến quý thầy cô đã đang giảng dạy chúng em ở ngôi trường Đại học Công nghệ thông
tin – Đại học quốc gia thành phố Hồ Chí Minh những kiến thức nền tảng vững chắc để nhóm có
thể tự tìm hiểu và hồn thiện đề tài này một cách tốt nhất.
Đặc biệt, chúng em xin gửi lời cảm ơn tới cơ Nguyễn Cơng Hoan vì sự tận tình hướng
dẫn cũng như những góp ý, đề xuất quý báu của cơ dành cho nhóm trong q trình thực hiện đồ
án.
Trong suốt thời gian qua, nhóm đã tự tìm hiểu các công nghệ mới và kết hợp với những

kiến thức nền tảng trong quá trình học tập, nghiên cứu và vận dụng để thực hiện đề tài này. Với
quỹ thời gian có hạn cũng như kinh nghiệm xây dựng sản phẩm cịn thiếu, sản phẩm đồ án cuối
cùng có thể sẽ mắc phải một số sai sót và chúng em rất mong sẽ nhận được những góp ý của cơ
để bổ sung, cải tiến sản phẩm cũng như nâng cao kiến thức để xây dựng các sản phẩm tiếp theo
sẽ chỉn chu và hồn thiện hơn, và tích luỹ thêm cho mình những kinh nghiệm quý giá để đáp ứng
tốt cho những công việc thực tế trong tương lai.
Một lần nữa, xin cảm ơn cơ vì đã đồng hành cùng chúng em trong suốt học kỳ I của năm
học này.
Sinh viên thực hiện

Đặng Thái Tài

NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN

.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................


.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................

.............., ngày ............ tháng……năm 2021
Người nhận xét
(Ký tên và ghi rõ họ tên)

Mục lục
LỜI CẢM ƠNI CẢM ƠNM ƠNN.......................................................................................................................................................................................................................................................... 2
NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪNN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪNA GIẢM ƠNNG VIÊN HƯỚNG DẪNNG DẪNN........................................................................................................................................................................................... 2
DANH MỤC VIẾT TẮTC VIẾT TẮTT TẮTT....................................................................................................................................................................................................................................... 7
ĐỀ CƯƠNG CHI TIẾT CƯƠNNG CHI TIẾT TẮTT........................................................................................................................................................................................................................................ 7
Chương 1: GIỚI THIỆU ĐỀ TÀIng 1: GIỚNG DẪNI THIỆU ĐỀ TÀIU ĐỀ CƯƠNG CHI TIẾT TÀI................................................................................................................................................................................................................. 11
1.1Tên đề tài: tài:...................................................................................................................................................................................................................................... 11
1.2. Mô tả đề tài: đề tài: tài:............................................................................................................................................................................................................................... 11
1.3 Lý do chọn đề tài:n đề tài: tài:...................................................................................................................................................................................................................... 12
1.4. Khả đề tài:o sát hiện trạng:n trạng:ng:............................................................................................................................................................................................................... 12
1.5. Công nghện trạng: sử dụng: dụng:ng:................................................................................................................................................................................................................. 13
1.5. Môi trường thiết kế:ng thiết kế:t kết kế::............................................................................................................................................................................................................... 13
1.6. Công cụng: hỗ trợ: trợ::.......................................................................................................................................................................................................................... 13
Chương 1: GIỚI THIỆU ĐỀ TÀIng 2: CƠN SỞ LÝ THUYẾT LÝ THUYẾT TẮTT.................................................................................................................................................................................................................... 13
2.1. Tổng quan về HandleBarJs:ng quan về tài: HandleBarJs:.................................................................................................................................................................................................. 13
2.1.1. Giới thiệu về HandleBarJs:i thiện trạng:u về tài: HandleBarJs:.......................................................................................................................................................................................... 13
2.1.2. Khái niện trạng:m cơ bản trong HandleBarJs: bả đề tài:n trong HandleBarJs:..................................................................................................................................................................... 13
2.1.2.1. Biểu thức của Handbars.js:u thức của Handbars.js:c của Handbars.js:a Handbars.js:................................................................................................................................................................................. 13
2.1.2.2. Biểu thức của Handbars.js:u thức của Handbars.js:c của Handbars.js:a Handbars.js:................................................................................................................................................................................. 14
2.1.2.2. Hàm biên dịch Handbars.js:ch Handbars.js:.............................................................................................................................................................................. 14
2.1.3. Ưu điểm của Handlebarjs:u điểu thức của Handbars.js:m của Handbars.js:a Handlebarjs:........................................................................................................................................................................................... 14
2.2.1. NodeJS là gì?............................................................................................................................................................................................................................ 15


2.2.2. Cách NodeJS hoạng:t động:ng:..................................................................................................................................................................................................... 15
2.2.3. Ưu điểm của Handlebarjs:u điểu thức của Handbars.js:m của Handbars.js:a NodeJS:.......................................................................................................................................................................................................... 15
2.3.1. ExpressJS là gì?....................................................................................................................................................................................................................... 16
2.3.2. Tính năng của Handbars.js:a ExpressJS:................................................................................................................................................................................................... 16
2.4. MongoDB:.................................................................................................................................................................................................................................... 17

2.4.1. MongoDB là gì:.................................................................................................................................................................................................................. 17
2.4.2. Mộng:t số câu lệnh cơ bản: câu lện trạng:nh cơ bản trong HandleBarJs: bả đề tài:n:............................................................................................................................................................................................... 17
2.4.3. Ưu điểm của Handlebarjs:u điểu thức của Handbars.js:m của Handbars.js:a MongoDB:............................................................................................................................................................................................... 17
Chương 1: GIỚI THIỆU ĐỀ TÀIng 3:.............................................................................................................................................................................................................................................................. 18
PHÂN TÍCH THIẾT TẮTT KẾT TẮT HỆU ĐỀ TÀI THỐNGNG........................................................................................................................................................................................................... 18
3.1. Sơ bản trong HandleBarJs: đồ Use-case: Use-case:.......................................................................................................................................................................................................................... 18
3.1.1. Đăng nhập:p:......................................................................................................................................................................................................................... 19
3.1.2. Đăng xuất:t:.......................................................................................................................................................................................................................... 20
3.1.3. Đăng ký thành viên:........................................................................................................................................................................................................ 21
3.1.5. Thay đổng quan về HandleBarJs:i thông tin các nhân:....................................................................................................................................................................................... 24
3.1.6. Quả đề tài:n lý thơng tin cá nhân:........................................................................................................................................................................................... 25
3.1.7. Tìm kiết kế:m:............................................................................................................................................................................................................................ 27
3.1.8. Xem thông sả đề tài:n phẩm:m:.................................................................................................................................................................................................... 28
Chương 1: GIỚI THIỆU ĐỀ TÀIng 4:.............................................................................................................................................................................................................................................................. 29
THIẾT TẮTT KẾT TẮT GIAO DIỆU ĐỀ TÀIN..................................................................................................................................................................................................................................... 29
4.1. Trang đăng nhập:p, đăng ký:................................................................................................................................................................................................... 29
1.

4.1.1. Mô tả đề tài::......................................................................................................................................................................................................................... 29

4.2. Trang chủa Handbars.js::................................................................................................................................................................................................................................... 30
4.2.1. Giao diện trạng:n:............................................................................................................................................................................................................................ 30
4.2.2. Mô tả đề tài::................................................................................................................................................................................................................................... 31
4.3. Trang thông tin nhà ở:............................................................................................................................................................................................................ 32
4.3.1. Giao diện trạng:n:............................................................................................................................................................................................................................ 32
4.3.2. Mơ tả đề tài::................................................................................................................................................................................................................................... 32
4.4. Trang tìm kiết kế:m:........................................................................................................................................................................................................................ 32
4.4.1. Giao diện trạng:n:............................................................................................................................................................................................................................ 32
4.4.2. Mô tả đề tài::................................................................................................................................................................................................................................... 32
4.5. Trang thông tin giỏ hàng: hàng:...................................................................................................................................................................................................... 33

4.5.1. Giao diện trạng:n:............................................................................................................................................................................................................................ 33
4.5.2. Mô tả đề tài::................................................................................................................................................................................................................................... 33
4.6. Trang thông tin vập:n chuyểu thức của Handbars.js:n:............................................................................................................................................................................................... 35
4.6.1. Giao diện trạng:n:............................................................................................................................................................................................................................ 35
4.6.2. Mô tả đề tài::................................................................................................................................................................................................................................... 35
Chương 1: GIỚI THIỆU ĐỀ TÀIng 5:.............................................................................................................................................................................................................................................................. 35
KẾT TẮTT LUẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪNN............................................................................................................................................................................................................................................................. 35


5.1. Nhập:n xét:...................................................................................................................................................................................................................................... 35
5.1.1. Thuập:n lợ:i:........................................................................................................................................................................................................................... 35
5.1.2. Khó khăn:............................................................................................................................................................................................................................ 36
5.1.3. Ưu điểm của Handlebarjs:u điểu thức của Handbars.js:m của Handbars.js:a đồ Use-case: án:........................................................................................................................................................................................................ 36
5.1.4. Nhượ:c điểu thức của Handbars.js:m của Handbars.js:a đồ Use-case: án:................................................................................................................................................................................................ 36
5.2. Hưới thiệu về HandleBarJs:ng phát triểu thức của Handbars.js:n của Handbars.js:a đồ Use-case: án:............................................................................................................................................................................................... 36
TÀI LIỆU ĐỀ TÀIU THAM KHẢM ƠNO.................................................................................................................................................................................................................................... 36


Mục Lục ảnh
Hình 1 Express js cung cấp cơ chế định tuyến giúp duy trì trạng thái của website.p cơ chế định tuyến giúp duy trì trạng thái của website. chế định tuyến giúp duy trì trạng thái của website. định tuyến giúp duy trì trạng thái của website.nh tuyế định tuyến giúp duy trì trạng thái của website.n giúp duy trì trạng thái của website.ng thái của website.a website.
Hình 2:Sơ chế định tuyến giúp duy trì trạng thái của website. đồ use-case tổng quát use-case tổng quátng quát
Hình 3: Sơ chế định tuyến giúp duy trì trạng thái của website. đồ use-case tổng quát use-case đăng nhập.p.
Hình 4:Sơ chế định tuyến giúp duy trì trạng thái của website. đồ use-case tổng quát use-case đăng xuấp cơ chế định tuyến giúp duy trì trạng thái của website.t.
Hình 5: Sơ chế định tuyến giúp duy trì trạng thái của website. đồ use-case tổng quát use-case đăng ký thành viên.
Hình 6: Sơ chế định tuyến giúp duy trì trạng thái của website. đồ use-case tổng quát use-case mua sản phẩm.n phẩm.m.
Hình 7: Sơ chế định tuyến giúp duy trì trạng thái của website. đồ use-case tổng quát use-case thay đổng quáti thông tin cá nhân.
Hình 8: Sơ chế định tuyến giúp duy trì trạng thái của website. đồ use-case tổng quát use-case quản phẩm.n lý giỏ hàng cá nhân. hàng cá nhân.
Hình 9: Sơ chế định tuyến giúp duy trì trạng thái của website. đồ use-case tổng quát use-case tìm kiế định tuyến giúp duy trì trạng thái của website.m.
Hình 10: Sơ chế định tuyến giúp duy trì trạng thái của website. đồ use-case tổng quát use-case xem thông tin sản phẩm.n phẩm.m..
Hình 11:Giao diện đăng nhậpn đăng nhập.p

Hình 12 : Giao diện đăng nhậpn nút trang đăng ký sau khi click Sign up.
Hình 13:Giao diện đăng nhậpn trang chủa website..
Hình 14:Giao diện đăng nhậpn thông tin người dùngi dùng
Hình 15:Giao diện đăng nhậpn thơng tin phịng
Hình 16: Giao diện đăng nhậpn trang tìm kiế định tuyến giúp duy trì trạng thái của website.m.
Hình 17:Giao diện đăng nhậpn sau khi tìm kiế định tuyến giúp duy trì trạng thái của website.m
Hình 18:Giao diện đăng nhậpn thông tin chuyế định tuyến giúp duy trì trạng thái của website.n đi
Hình 19: Giao diện đăng nhậpn đặt phịng thành cơng.t phịng thành cơng.
Hình 20:Giao diện đăng nhậpn đặt phịng thành cơng.t phịng

1

17
19
19
20
21
23
25
26
28
29
30
31
31
32
33
33
34
34

35
36


DANH MỤC VIẾT TẮT
STT

Ký hiệu chữ viết tắt

Chữ viết đầy đủ

1

CSDL

Cơ sở dữ liệu

2

API

Application program interface

3

DOM

Document Object Model

4

RDBMS

Relational Database Management System

ĐỀ CƯƠNG CHI TIẾT
TÊN ĐỀ TÀI:
Nền tảng chia sẻ nhà với Nodejs
Tên đề tài tiếng Anh:
Building a Home Sharing Platform with Node.js
Cán bộ hướng dẫn: ThS. Nguyễn Công Hoan
Thời gian thực hiện: Từ ngày 05/03/2023 đến tháng 26/06/2023
Sinh viên thực hiện:
Đặng Thái Tài

Nội dung đề tài:
1. Giới thiệu:


Javascript là một ngơn ngữ lập trình được sử dụng rộng rãi hiện nay, dễ đọc và
được hỗ trợ ở mọi nơi. Mà Expressjs lại hỗ trợ Javascript, do đó nếu bạn đã biết đến
Javascript thì chắc chắn việc lập trình bằng Express.js là vơ cùng đơn giản. Ngay cả
những người mới bắt đầu tham gia vào lĩnh vực phát triển web này cũng có thể sử
dụng Expressjs.
Javascript là ngơn ngữ lập trình dễ học với cả những người khơng có bất kỳ kiến
thức gì về ngơn ngữ lập trình khác. Chính vì tính phổ biến, dễ học và dễ sử dụng này mà
Express.js cho phép các tài năng trẻ tham gia và đạt được nhiều thành công trong phát
triển ứng dụng web.
Thơng qua đề tài này, nhóm sẽ xây dựng website bán hàng trực tuyến.
Website cung cấp tảng trực tuyến kết nối người đang có nhu cầu thuê chỗ ở (khách)

với những người chủ nhà có sẵn nhà, căn hộ hoặc phòng trống (đơn vị chủ sở hữu).
Website cập nhật tất cả những điện thoại mới ra mắt phù hợp trong từng nhu cầu sử
dụng, mẫu mã mới nhất nhằm đáp ứng nhu cầu của người mua.
Hệ thống này sẽ có chức năng cơ bản như hiển thị và order, upload mặt
hàng mới, gợi ý nhu cầu người dùng, chức năng tìm kiếm theo dạng text, …
Về phía quản trị viên sẽ có những chức năng chính như: quản lý mặt hàng,
số lượng, thông tin đơn hàng, quản lý tài khoản người dùng, …

2. Mục tiêu:
- Kết nối người thuê và người cho thuê: Tạo ra một nền tảng kết nối giữa
người muốn thuê nhà và những người sẵn sàng cho thuê nhà của mình.
- Cung cấp trải nghiệm người dùng tốt: Tạo ra một trang web dễ sử dụng và
hiệu quả, giúp người dùng dễ dàng tìm kiếm và đặt thuê các căn nhà theo
nhu cầu của họ.
- Quản lý thông tin liên quan đến nhà cho thuê: Cung cấp một giao diện
quản lý cho người cho thuê để quản lý các thông tin về nhà, đặt giá thuê
và tương tác với người thuê.
- Tạo niềm tin và đảm bảo an tồn: Đảm bảo tính bảo mật và an toàn trong
giao dịch cho cả người thuê và người cho thuê.
- Tích hợp các tính năng phụ trợ: Bao gồm các tính năng như thanh tốn
trực tuyến, đánh giá và nhận xét, bản đồ hiển thị vị trí, và các dịch vụ
khác như hỗ trợ khách hàng và hướng dẫn dành cho người sử dụng.
3. Phạm vi:


• Phạm vi môi trường:
o Triển khai sản phẩm đề tài trên mơi trường web.
• Phạm vi chức năng:
o Đăng ký và đăng nhập: Người dùng có thể đăng ký tài khoản mới và đăng
nhập vào trang web.

o Tìm kiếm và xem thơng tin nhà cho th: Người dùng có thể tìm kiếm và
xem thơng tin chi tiết về các căn nhà cho th bao gồm hình ảnh, mơ tả, giá cả
và tiện nghi.
o Đặt và quản lý đơn hàng: Người dùng có thể đặt các yêu cầu thuê nhà, xem
và quản lý lịch sử đặt hàng và thanh toán.
o Đăng tin nhà cho thuê: Người cho thuê có thể đăng tin về căn nhà của mình
bao gồm mơ tả, hình ảnh, giá cả và các tiện nghi đi kèm.
o Đánh giá và nhận xét: Người thuê có thể đánh giá và viết nhận xét về những
lần thuê nhà trước đó.
o Thanh tốn trực tuyến: Tích hợp các cổng thanh tốn trực tuyến để người
dùng có thể thanh tốn tiền thuê nhờ một hệ thống an toàn và tin cậy.
o Gửi yêu cầu hỗ trợ: Người dùng có thể gửi yêu cầu hỗ trợ hoặc liên hệ với
nhóm quản lý để giải quyết các vấn đề liên quan đến thuê nhà.
o Quản lý thơng tin cá nhân: Người dùng có thể quản lý thông tin cá nhân, thay
đổi mật khẩu và cài đặt các tùy chọn cá nhân.
4. Đối tượng:
- Người dùng khách.
- Người dùng có tài khoản.
- Quản trị viên (Admin).


Kế hoạch thực hiện:
Thời gian

Nội dung

05/03/2023 – 16/04/2024 Tìm hiểu đề tài, đánh giá thị trường, xác định các chức năng
của hệ thống.
17/04/2023 – 30/04/2023 Tìm hiểu, nghiên cứu cơng nghệ.
01/05/2023 – 17/05/2023 Phân tích và thiết kế hệ thống website.

18/05/2023 – 08/06/2023 Tìm hiểu quy trình thiết kế UX/UI và thiết kế giao diện cho
website
09/06/2023 – 05/07/2023 Cài đặt phần back-end, xử lý của hệ thống.
06/07/2023 – 08/07/2023 Kiểm thử hệ thống và hoàn thiện báo cáo.

Xác nhận của GVHD
(Ký tên và ghi rõ họ tên)

TP. HCM, ngày 08 tháng 07 năm 2023
Sinh viên Sinh viên (Ký tên và ghi rõ họ tên) (Ký tên và ghi
rõ họ tên)

ThS. Nguyễn Công
Đặng Thái Tài

Hoan

Chương 1:

GIỚI THIỆU ĐỀ TÀI

1.1Tên đề tài:
XÂY DỰNG NỀN TẢNG CHIA SẺ NHÀ
1.2. Mô tả đề tài:
Hiện tại, việc chia sẻ nhà ở đã trở thành một xu hướng phổ biến và có nhiều hình thức
khác nhau trên tồn cầu. Một số hình thức chia sẻ nhà ở phổ biến bao gồm chia sẻ phòng trọ, chia
sẻ căn hộ, chia sẻ nhà nguyên căn và chia sẻ nhà nghỉ.


Sự phổ biến của việc chia sẻ nhà ở có nhiều lợi ích, bao gồm tiết kiệm chi phí, tăng cơ hội

kết nối xã hội và giảm tác động môi trường. Chia sẻ nhà ở có thể giúp người thuê nhà tiết kiệm
một phần thu nhập cho các khoản thuê nhà, điện, nước và internet. Ngoài ra, chia sẻ nhà ở cũng
tạo cơ hội để gặp gỡ và kết nối với các người thuê nhà khác, làm tăng mối quan hệ xã hội và mở
rộng mạng lưới của mỗi người.Với sự phát triển nhanh chóng của internet, chia sẻ nhà ở trên
mạng xã hội đã trở thành một xu hướng phổ biến trong thời gian gần đây. Nền tảng chia sẻ nhà
cung cấp một cách tiện lợi để những người có nhà trống có thể kiếm thêm thu nhập bằng cách cho
th khơng gian của mình ngắn hạn cho những du khách hoặc người dùng khác.
Việc đăng ký và tìm kiếm thông qua mạng xã hội rất đơn giản và tiết kiệm thời gian.
Người sử dụng cũng có thể xem thơng tin chi tiết về những ngơi nhà và phịng trống được chia sẻ,
bao gồm cả hình ảnh và đánh giá từ người đã sử dụng trước đó. Điều này giúp người th nhà có
cái nhìn tổng quan về khơng gian trước khi đặt chỗ.
Website mua điện thọau trực tuyến với mục tiêu mang lại trải nghiệm tốt cho người
dùng, chúng em xây dựng website cung cấp đầy đủ các chức năng cơ bản hiện có của một
website chia sẻ nhà ở. Người dùng tiếp cận các mẫu mã thời trang đa dạng theo sở thích riêng của
mình, …
Website Home-Sharing được xây dựng bằng Nodejs kết hợp với các thư viện hỗ trợ
khác.
1.3 Lý do chọn đề tài:
Với sự phát triển của Internet, nhu mua sắm trên không gian mạng tăng vượt trội bởi vì
sự đơn giản, dễ sử dụng, sự tiếp cận nhanh chóng đến kho đến nguồn sản phẩm khổng lồ của các
website mua bán trực tuyến.
Trước đây, chúng ta ln bị gị bó khi mua sắm bởi vì thời gian hạn chế. Một cửa hàng,
hay một trung tâm thương mại như địa điểm đơn lẻ, có khơng gian trưng bày hạng chế, … chỉ
cho phép chúng ta chưng bày được vài mười mấy, hay vài chục bộ. Thậm chí góc khuất cịn bị bỏ
qua. Muốn bổ sung các các sản phẩm mới đều phải mới đều phải đi tìm các nguồn khác từ các
nguồn khác, điều này gây mất nhiều thời gian, và chỉ những ai có nhiều thời gian rảnh rỗi hay có
vị chí đi lại thuận lợi. Mỗi lần thay đổi địa điểm mua hàng cũng như mỗi lần tới một chân trời
mới, vô cùng bất tiện. Chi phí cho những chuyến đi cũng như thời
gian là vơ cùng bất tiện.
Tốc độ phát triển “chóng mặt” của Internet đã mang lại nhiều thay đổi lớn cho con người,

trong đó bao gồm cả việc thay đổi cách thức và thói mua sắm trước đây của chúng ta vì đã xuất
hiện các website mua bán trực tuyến.
Chúng em quyết định chọn đề tài “Xây dựng website mua điện thoại trực tuyến” bởi vì
tính ứng dụng cao, nhu cầu thực tế lớn và muốn vận dụng khả năng của mình ở nhiều loại đề tài


khác nhau để xây dựng các sản phẩm cho chúng và cái tên đề tài cũng khá thú vị vì chúng em
chưa từng nghĩ tới sẽ thực hiện đề tài này.
1.4. Khảo sát hiện trạng:
Hiện nay, thị trường đã có rất nhiều website mua sắm trực tuyến nổi tiếng được mọi
người biết đến như thegioididong, SellPhoneS, hay những website cửa hàng lớn, … Với giao
diện bắt mắt, dễ sử dụng, cùng với số lượng sản phầm khổng lồ, chúng nhanh chóng trở thành
những website mua bán trực tuyến hàng đầu. Các chức năng của những website này đều tập trung
vào trải nghiệm tìm kiếm một chiếc điện thoại thoải mái ưng ý nhất cho người dùng.
Chúng em cũng sẽ xây dựng một website mua điện thoại trực tuyến với những tính năng
mua sắm cơ bản nhằm mang lại trải nghiệm dễ sử dụng và tiện dụng cho người dùng.
1.5. Công nghệ sử dụng:
- HandleBarjs
-Boostrap
-jQuery
- NodeJS
- ExpressJS
- MongoDB
1.5. Môi trường thiết kế:
- Visual Studio Code.
1.6. Cơng cụ hỗ trợ:
- Trình duyệt Cốc Cốc, Chrome, FireFox.
Chương 2: CƠ

SỞ LÝ THUYẾT

2.1. Tổng quan về HandleBarJs:
2.1.1. Giới thiệu về HandleBarJs:
Handlebars.js là một thư viện mơ phỏng hệ thống mẫu (template system) tiên tiến. Nó
cho phép bạn tạo ra các mẫu HTML động bằng cách tách biệt hoàn toàn logic và giao diện người
dùng. Handlebars.js cho phép bạn kết hợp dữ liệu từ nguồn khác nhau và sử dụng các thành phần
logic như biểu thức, điều kiện, vòng lặp và các hàm trợ giúp để tạo ra đầu ra HTML cuối cùng.
2.1.2. Khái niệm cơ bản trong HandleBarJs:
2.1.2.1. Biểu thức của Handbars.js:
Một biểu thức handlebars đơn giản được viết như thế này (trong đó, nội dụng của


content có thể là một biến hoặc một hàm trợ giúp với các thơng số hoặc khơng có tham số)
{{ content }}
hoặc như thế này nếu biểu thức nằm trong khối:
{{#each}}
HTML content and other Handlebars expresion go here.
{{/each}}
Với biểu thức handlebars HTML. Biến customerName là thuộc tính sẽ được truy xuất
bởi hàm handlebars.compile:
Name: {{ customerName }}
Dưới đây là ví dụ về một thẻ script Handlebars:
<div> Name: {{ headerTitle }} </div>

2.1.2.2. Biểu thức của Handbars.js:
- Phần chính thứ 2 trong Handlebars templating là dữ liệu bạn muốn hiển thị trên trang.Bạn
chuyển một dữ liệu đối tượng tới hàm handlebars, đối tượng dữ liệu được gọi là bối cảnh.
Và đối tượng này có thể bao gồm tất cả các mảng, chuỗi, số, các đối tượng khác hoặc kết
hợp tất cả đối tượng này Nếu đối tượng dữ liệu có một mảng các đối tượng, bạn có thể sử
dụng hàm Handlebars mỗi vịng lặp để lặp lại mảng và bối cảnh hiện tại được đặt cho từng

mục trong mảng Dưới đây là các ví dụ về việc thiết lập đối tượng dữ liệu và cách lặp nó
trong handlebars:
Đối tượng dữ liệu với mảng đối tượng:
//đối tượng customers có một mảng các đối tượng mà chúng ta sẽ chuyển tới handlebars:
var

theData

=

{customers:[{firstName:”Michael”,

lastName:”Alexander”,

age:20},

{firstName:”John”, lastName:”Allen”, age:29}]};
Bạn có thể sử dụng vòng lặp để lặp lại đối tượng của customers như thế này:
{{#each customers}}
<li> {{ firstName }} {{ lastName }} </li>
{{/each}}
2.1.2.2. Hàm biên dịch Handbars.js:
Hàm biên dịch: Đoạn mã cuối cùng mà chúng ta cần cho việc tạo template của handlebars xử
lý 2 bước sau:


-Biên dịch template với hàm handlebars.
Sau đó, sử dụng hàm được biên dịch đó để gọi đối tượng dữ liệu được truyền cho nó (nó lấy
một đối tượng dữ liệu làm tham số duy nhất của nó). Và điều này sẽ trả về một chuỗi
HTML với các giá trị đối tượng được chèn vào HTML.

2.1.3. Ưu điểm của Handlebarjs:
- Handlebars là một trong những công cụ tiên tiến nhất, giàu tính năng và phổ biến trong tất cả
Javascript templating engines.- Tái sử dụng các Component.
- Handlebars là templating engine không có logic, có nghĩa là có rất ít hoặc khơng có logic trong các
template HTML mà bạn sử dụng.
- Nó giữ cho các trang HTML của bạn đơn giản, sạch sẽ và sẽ tách biệt khỏi các tệp javascript dựa
trên logic và handlebars phục vụ tốt mục đích này2.2. NodeJS:
2.2.1. NodeJS là gì?
Nodejs là một nền tảng (Platform) phát triển độc lập được xây dựng trên V8 JavaScript
Engine – trình thơng dịch thực thi mã JavaScript giúp chúng ta có thể xây dựng được các ứng
dụng web như các trang video clip, các forum và đặc biệt là trang mạng xã hội phạm vi hẹp một
cách nhanh chóng và dễ dàng mở rộng.
NodeJS có thể chạy trên nhiều nền tảng hệ điều hành khác nhau từ Window cho tớ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ời gian ở mức thấp nhất.
Node.js được xây dựng và phát triển từ năm 2009, bảo trợ bởi công ty Joyent, trụ sở tại
California, Hoa Kỳ.
2.2.2. Cách NodeJS hoạt động:
Ý tưởng chính của Node js là sử dụng non-blocking, hướng sự vào ra dữ liệu thông
qua các tác vụ thời gian thực một cách nhanh chóng. Bởi vì, Node js có khả năng mở rộng
nhanh chóng, khả năng xử lý một số lượng lớn các kết nối đồng thời bằng thông lượng cao.
Nếu như các ứng dụng web truyền thống, các request tạo ra một luồng xử lý yêu cầu
mới và chiếm RAM của hệ thống thì việc tài nguyên của hệ thống sẽ được sử dụng khơng
hiệu quả. Chính vì lẽ đó giải pháp mà Node js đưa ra là sử dụng luồng đơn (SingleThreaded), kết hợp với non-blocking I/O để thực thi các request, cho phép hỗ trợ hàng chục
ngàn kết nối đồng thời.
2.2.3. Ưu điểm của NodeJS:
- Tốc độ cực nhanh: Được xây dựng dựa trên engine JavaScript V8 của Google Chrome, do
đó các thư viện của nó có khả năng thực thi code chỉ rất nhanh. - NPM: Với hơn 50,000
package khác nhau, các developer có thể dễ dàng lựa chọn bất kỳ tính năng nào để xây dựng

cho ứng dụng của mình.
- Lập trình khơng đồng bộ: Mọi API của Node.JS đều có tính khơng đồng bộ (non blocking),
do đó một server dựa trên Node.JS khơng cần phải đợi API trả về dữ liệu. - Khơng có
buffering: Node.JS giúp tiết kiệm thời gian xử lý file khi cần upload âm
thanh hoặc video vì các ứng dụng này không bao giờ buffer dữ liệu mà chỉ xuất dữ liệu
theo từng phần (chunk).
- Đơn luồng: Node.JS sử dụng mô hình đơn luồng với vịng lặp sự kiện. Do đó các ứng dụng
có thể xử lý số lượng request lớn hơn rất nhiều so với các server truyền thống như Apache
HTTP Server.
- Khả năng mở rộng cao: Server NodeJS phản hồi theo hướng non-blocking, do đó nó có thể
mở rộng vô cùng dễ dàng, tạo ra các luồng giới hạn để xử lý request. 2.3. ExpressJS:
2.3.1. ExpressJS là gì?
Express.js là một framework mã nguồn mở miễn phí cho Node.js. Express.js được sử
dụng trong thiết kế và xây dựng các ứng dụng web một cách đơn giản và nhanh chóng. Express
hỗ rợ các phương thức HTTP và midleware tạo ra môt API vơ cùng mạnh mẽ và dễ sử dụng.
2.3.2. Tính năng của ExpressJS:
- Phát triển máy chủ nhanh chóng: Expressjs cung cấp nhiều tính năng dưới dạng các hàm để
dễ dàng sử dụng ở bất kỳ đâu trong chương trình. Điều này đã loại bỏ nhu cầu viết mã từ
đó tiết kiệm được thời gian.
- Phần mềm trung gian Middleware: Đây là phần mềm trung gian có quyền truy cập vào cơ
sở dữ liệu, yêu cầu của khách hàng và những phần mềm trung gian khác. Phần mềm
Middleware này chịu trách nhiệm chính cho việc tổ chức có hệ thống các chức năng của
Express.js.
- Định tuyến - Routing: Express js cung cấp cơ chế định tuyến giúp duy trì trạng thái của
website với sự trợ giúp của URL.
- Tạo mẫu - Templating: Các công cụ tạo khuôn mẫu được Express.js cung cấp cho phép các
nhà xây dựng nội dung động trên các website bằng cách tạo dựng các mẫu HTML ở phía
máy chủ.
- Gỡ lỗi - Debugging: Để phát triển thành công các ứng dụng web không thể thiết đi việc gỡ

lỗi. Giờ đây với Expressjs việc gỡ lỗi đã trở nên dễ dàng hơn nhờ khả năng xác định chính
xác các phần ứng dụng web có lỗi.


Hình 1 Express js cung cấp cơ chế định tuyến giúp duy trì trạng thái của website.

2.4. MongoDB:
2.4.1. MongoDB là gì:
- MongoDB là một hệ quản trị cơ sở dữ liệu mã nguồn mở, là CSDL thuộc NoSql và được
hàng triệu người sử dụng.
- MongoDB là một database hướng tài liệu (document), các dữ liệu được lưu trữ trong
document kiểu JSON thay vì dạng bảng như CSDL quan hệ nên truy vấn sẽ rất nhanh. - Với
CSDL quan hệ chúng ta có khái niệm bảng, các cơ sở dữ liệu quan hệ (như MySQL hay SQL
Server...) sử dụng các bảng để lưu dữ liệu thì với MongoDB chúng ta sẽ dùng khái niệm là
collection thay vì bảng
- So với RDBMS thì trong MongoDB collection ứng với table, cịn document sẽ ứng với
row , MongoDB sẽ dùng các document thay cho row trong RDBMS. - Các collection trong
MongoDB được cấu trúc rất linh hoạt, cho phép các dữ liệu lưu trữ không cần tuân theo một
cấu trúc nhất định.
- Thông tin liên quan được lưu trữ cùng nhau để truy cập truy vấn nhanh thông qua ngôn ngữ
truy vấn MongoDB
2.4.2. Một số câu lệnh cơ bản:
CSDL

MongoDB

Tạo csdl

use test;

Tạo bảng

db.createCollection('students');

Tạo bản ghi

db.students.insert({ name:huy, gender: 'male'});

Cập nhật

db.students.update({ _id: 1 },{$set:{ name: huy update' }});

Xóa bản ghi

db.students.remove({ _id: 1});

Tìm kiếm all

db.students.find({});


Tìm kiếm

db.students.find({ name: huy });

2.4.3. Ưu điểm của MongoDB:
- Do MongoDB sử dụng lưu trữ dữ liệu dưới dạng Document JSON nên mỗi một collection
sẽ có các kích cỡ và các document khác nhau, linh hoạt trong việc lưu trữ dữ liệu, nên bạn
muốn gì thì cứ insert vào thoải mái.
- Dữ liệu trong MongoDB khơng có sự ràng buộc lẫn nhau, khơng có join như trong RDBMS

nên khi insert, xóa hay update nó khơng cần phải mất thời gian kiểm tra xem có thỏa mãn
các ràng buộc dữ liệu như trong RDBMS.
- MongoDB rất dễ mở rộng (Horizontal Scalability). Trong MongoDB có một khái niệm
cluster là cụm các node chứa dữ liệu giao tiếp với nhau, khi muốn mở rộng hệ thống ta chỉ
cần thêm một node với vào cluster:
- Trường dữ liệu “_id” luôn được tự động đánh index (chỉ mục) để tốc độ truy vấn thông tin
đạt hiệu suất cao nhất.
- Khi có một truy vấn dữ liệu, bản ghi được cached lên bộ nhớ Ram, để phục vụ lượt truy vấn
sau diễn ra nhanh hơn mà không cần phải đọc từ ổ cứng.
- Hiệu năng cao: Tốc độ truy vấn (find, update, insert, delete) của MongoDB nhanh hơn hẳn
so với các hệ quản trị cơ sở dữ liệu quan hệ (RDBMS). Với một lượng dữ liệu đủ
lớn thì thử nghiệm cho thấy tốc độ insert của MongoDB có thể nhanh tới gấp 100 lần so
với MySQL.


Chương 3:

PHÂN TÍCH THIẾT KẾ HỆ THỐNG
3.1. Sơ đồ Use-case:

Hình 2:Sơ đồ use-case tổng quát

3.1.1. Đăng nhập:

Hình 3: Sơ đồ use-case đăng nhập.

Bảng 3.1: Đặc tả đăng nhập:

Use – Case

Nội Dung

Tên Use – Case

Đăng nhập

 Mô tả

Use-Case cho phép người dùng đăng nhập vào hệ thống


Actor

Khách

Điều kiện kích hoạt

Người dùng chọn Login

Tiền điều kiện

Đã có tài khoản

Hậu điều kiện

Người dùng đăng nhập vào hệ thống thành cơng

Luồng sự kiện
chính

Luồng sự kiện phụ

1. Hệ thống hiển thị màn hình đăng nhập 
2. Người dùng nhập email/tên người dùng và mật khẩu
3. Hệ thống kiểm tra thông tin đăng nhập
4. Nếu thông tin hợp lệ hệ thống thông báo đăng nhập
thành công
5. Kết thúc Use-case
Mật khẩu hoặc tên đăng nhập sai:
1. Hệ thống hiển thị lại màn hình đăng nhập để người
dùng nhập lại thông tin kèm theo thông báo tên đăng
nhập hoặc mật khẩu sai.
2. Quay lại bước 2 của Luồng sự kiện chính.

3.1.2. Đăng xuất:

Hình 4:Sơ đồ use-case đăng xuất.

Bảng 3.2: Đặc tả đăng xuất:

Use – Case

Nội Dung

Tên Use – Case

Đăng xuất

 Mô tả

Use-Case cho phép người dùng đăng xuất ra khỏi hệ thống

Actor

Thành viên

Điều kiện kích hoạt

Người dùng chọn Log out


Tiền điều kiện

Đã đăng nhập

Hậu điều kiện

Người dùng đăng xuất ra khỏi hệ thống thành cơng

Luồng sự kiện
chính

Luồng sự kiện phụ

1. Hệ thống đăng xuất người dùng và đưa về trang
trước đó
2. Kết thúc Use-case

Mật khẩu hoặc tên đăng nhập sai:
1. Hệ thống hiển thị lại màn hình đăng nhập để người

dùng nhập lại thông tin kèm theo thông báo tên đăng
nhập hoặc mật khẩu sai.
2. Quay lại bước 2 của Luồng sự kiện chính.

3.1.3. Đăng ký thành viên:

Hình 5: Sơ đồ use-case đăng ký thành viên.

Bảng 3.3: Đặc tả đăng ký thành viên:

Use – Case

Nội Dung

Tên Use – Case

Đăng ký thành viên

 Mô tả

Use-Case cho phép người dùng đăng ký tài khoản

Actor

Khách

Điều kiện kích hoạt

Khi người dùng nhấn vào nút Sign up nằm trong trang chủ

Tiền điều kiện

Có tài khoản email hợp lệ

Hậu điều kiện

Người dùng đăng ký thành công