BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ TP.HCM

BÁO CÁO ĐỒ ÁN MÔN HỌC

XÂY DỰNG WEBSITE

HỖ TRỢ TÌM KIẾM PHÒNG TRỌ

Ngành: Công nghệ thông tin

Chuyên ngành: Công nghệ phần mền

Sinh viên thực hiện: Phan Hoàng Hạc 1911064776 19DTHD2

Nguyễn Quốc Dũng 1911065749 19DTHD2
Giảng viên hướng dẫn: Thầy Bùi Phú Khuyên

TP. Thủ Đức, Ngày 19 Tháng 6 Năm 2022

 LỜI NHẬN XÉT CỦA GIẢNG VIÊN

.............................................................................................................................................
.............................................................................................................................................
.............................................................................................................................................
.............................................................................................................................................
.............................................................................................................................................
.............................................................................................................................................
.............................................................................................................................................
.............................................................................................................................................
.............................................................................................................................................
.............................................................................................................................................
.............................................................................................................................................
.............................................................................................................................................
.............................................................................................................................................
.............................................................................................................................................
.............................................................................................................................................
.............................................................................................................................................
.............................................................................................................................................
 LỜI MỞ ĐẦU

Công nghệ thông tin đã ngày càng trở lên phổ biến và hữu dụng trong cuộc sống hiệ
n nay. Đặc biệt các từ khóa để tìm kiếm kết quả trở nên nhanh chóng. Hiện tại trên mạng
có nhiều web hỗ trợ tìm kiếm phòng trọ như chotot, phongtro123.com…, các trang này
đều có chức năng giống nhau tìm kiếm nơi ở, phòng trọ.

Chính vì vậy nhóm đã xây dựng một website “Hỗ trợ tìm kiếm phòng trọ” thực hiện
bằng công nghệ React js + Node js với mong muốn giúp cho việc hỗ trợ tìm kiếm phòng
trọ được dễ dàng, thuận tiện hơn.

Tuy chúng em đã hết sức cố gắng để có thể hoàn thiện đề tài một cách tốt nhất, như
ng do thời gian có hạn và sự hiểu biết về ngôn ngữ lập trình, đề tài còn hạn chế, do chưa c
ó nhiều kinh nghiệm nên chắc chắn đề tài sẽ không tránh khỏi những thiếu sót, chúng em
rất mong nhận được những ý kiến đóng góp của Thầy và những người quan tâm để đề tài
được hoàn thiện hơn. Chúng em xin chân thành cảm ơn!
 LỜI CẢM ƠN
Chúng em xin chân thành cảm ơn sự hướng dẫn, chỉ bảo tận tình của Giảng viên bộ
môn Đồ án cơ sở Thầy Bùi Phú Khuyên - giảng viên trường Đại học Công nghệ Thành p
hố Hồ Chí Minh đã truyền đạt cho chúng em nhiều kiến thức quan trọng và nhiều ý kiến
đóng góp quý giá. Cảm ơn đóng góp ý kiến chân thành và quý báu của Thầy và những n
gười quan tâm đã giúp đỡ chúng em để hoàn thành đề tài này.
 Mục Lục

Contents
CHƯƠNG 1 : TỔNG QUAN_____________________________________________________10
1.1. Lý do chọn đề tài_________________________________________________________10
1.2. Mục tiêu đề tài___________________________________________________________10
1.3. Nội dung thực hiện_______________________________________________________10
1.4. Phương pháp thực hiện____________________________________________________11
1.5. Giới thiệu về công nghệ sử dụng_____________________________________________11
1.5.1 Ngôn ngữ javascrip____________________________________________________11
1.5.2. Visual Studio Code(IDE)_______________________________________________12
1.5.3. Node js_____________________________________________________________12
1.5.4. Express framework____________________________________________________13
1.5.5. Mongodb____________________________________________________________14
1.5.6. Mongoose___________________________________________________________14
1.6. Mục tiêu đề ra___________________________________________________________14
CHƯƠNG 2 : TÁC PHÂN TÍCH VÀ ĐẶC TẢ YÊU CẦU_____________________________15
2.1. Quá trình phân tích_______________________________________________________15
2.1.1. Phân tích phạm vi dự án________________________________________________15
2.1.2. Phân tích mở rộng yêu cầu nghiệp vụ______________________________________15
2.1.3. Phân tích yêu cầu bảo mật______________________________________________16
2.1.4. Phân tích yêu cầu tốc độ________________________________________________16
2.1.5. Phân tích yêu cầu vận hành_____________________________________________16
2.1.6. Phân tích yếu tố con người______________________________________________17
2.1.7. Phân tích yêu cầu tích hợp______________________________________________17
2.1.8. Phân tích thực tiễn nghiệp vụ tồn tại______________________________________17
2.2. Xác định yêu cầu_________________________________________________________18
2.2.1. Yêu cầu và mô tả yêu cầu_______________________________________________18
2.2.2. Phân loại yêu cầu_____________________________________________________18
2.3. Mô hình hóa yêu cầu______________________________________________________19
2.3.1. Sơ đồ ngữ cảnh_______________________________________________________19
2.3.2 Sơ đồ Use Case_______________________________________________________19
2.3.3. Sơ đồ chức năng(BFD)_________________________________________________26
2.3.4. Mô hình sơ đồ lớp_____________________________________________________27
 2.4. Xây dựng cơ sở dữ liệu____________________________________________________28
2.4.1. Bảng Category_______________________________________________________28
2.4.2. Bảng Users__________________________________________________________28
2.4.2. Bảng Room__________________________________________________________29
CHƯƠNG 3: THIẾT KẾ PHẦN MỀM_____________________________________________30
3.1. Giao diện chương trình____________________________________________________30
3.1.1. Giao diện trang chủ____________________________________________________30
3.1.2. Giao diện danh mục___________________________________________________33
3.1.3. Giao diện các phòng thuê_______________________________________________33
3.1.4. Giao diện liên hệ______________________________________________________38
3.1.5. Giao diện tìm kiếm trên trang chủ________________________________________40
3.1.6. Giao diện chi tiết bài đăng______________________________________________42
3.1.7. Giao diện chức năng của người dùng______________________________________45
3.1.8. Giao diện đăng nhập, đăng ký___________________________________________47
3.1.9. Giao diện quản lý của Admin____________________________________________49
3.1.10. Một số giao diện khác_________________________________________________50
CHƯƠNG 4: TỔNG KẾT_______________________________________________________52
4.1. Kết quả đạt được_________________________________________________________52
4.2. Mặt hạn chế_____________________________________________________________52
4.3. Hướng phát triển_________________________________________________________52
 Danh Mục Hình Ảnh

Hình 2. 1: Biểu đô sơ đồ ngữ cảnh................................................................................................18

Hình 2. 2: Biều đô Use case tổng quát...........................................................................................19
Hình 2. 3: Biểu đồ Use case đăng nhập, đăng ký..........................................................................20
Hình 2. 4: Biểu đồ Use case quản lý tài khoản..............................................................................21
Hình 2. 5: Biểu đồ Use case quản lý loại phòng thuê....................................................................23
Hình 2. 6: Use case quản lý bài đăng.............................................................................................24
Hình 2. 7: Biểu đồ sơ đồ ngữ cảnh................................................................................................26
Hình 2. 8: Mô hình sơ đồ lớp.........................................................................................................26

Hình 3. 1: Giao diện trang chủ......................................................................................................30

Hình 3. 2: Chức năng tùy chọn.....................................................................................................31
Hình 3. 3: Hiển thị trang Admin khi người dùng là admin...........................................................31
Hình 3. 4: Không hiển thị trang Admin khi người dùng là user...................................................31
Hình 3. 5: Giao diện các danh mục...............................................................................................32
Hình 3. 6: Giao diện các bài đăng khuyến nghị............................................................................32
Hình 3. 7: Giao diện danh mục.....................................................................................................33
Hình 3. 8: Giao diện bài đăng theo danh mục..............................................................................33
Hình 3. 9: Giao diện các phòng thuê...........................................................................................34
Hình 3. 10: : Giao diện lọc với 1 tùy chọn...................................................................................35
Hình 3. 11: : Giao diện lọc với 1 tùy chọn...................................................................................35
Hình 3. 12: : Giao diện lọc với 1 tùy chọn...................................................................................36
Hình 3. 13: Giao diện lọc với nhiều tùy chọn...............................................................................36
Hình 3. 14: Giao diện trang đầu....................................................................................................37
Hình 3. 15: Giao diện khi chuyển trang 2.....................................................................................38
Hình 3. 16: : Giao diện liên hệ, trợ giúp.......................................................................................39
Hình 3. 17: Giao diện khi gửi thành conog...................................................................................39
Hình 3. 18: Giao diện khi thông báo đến admin...........................................................................40
Hình 3. 19: Giao diện tìm kiếm....................................................................................................41
Hình 3. 20: Giao diện tìm kiếm....................................................................................................41
Hình 3. 21: Giao diện tìm kiếm....................................................................................................42
Hình 3. 22: Giao diện chi tiết bài đăng.........................................................................................43
Hình 3. 23: Giao diện khi đăng xuất không hiển thị cập nhật và xóa...........................................44
Hình 3. 24: Giao diện khi đăng nhập có thể cập nhật và xóa.......................................................44
Hình 3. 25: Giao diện cập nhật bài đăng......................................................................................45
Hình 3. 26: Giao diện yêu cầu người dùng phải đăng nhập.........................................................46
Hình 3. 27: Giao diện thông tin tài khoản....................................................................................46
Hình 3. 28: Giao diện hiển thị hộp thoại không tìm thấy người dùng..........................................47
Hình 3. 29: Giao diện hiển thị hộp thoại nhập sai tài khoản và mật khẩu....................................47
Hình 3. 30: Giao diện đăng ký......................................................................................................48
Hình 3. 31: Giao diện đăng ký khi email tồn tại trong database..................................................48
Hình 3. 32: Giao diện đăng ký khi username tồn tại trong database............................................49
Hình 3. 33: Giao diện các thông tin user......................................................................................49
Hình 3. 34: Giao diện các danh mục.............................................................................................50
Hình 3. 35: Giao diện khi người dùng nhập sai điều hướng.........................................................50
Hình 3. 36: Giao diện không tìm thấy trang.................................................................................51
Hình 3. 37: Giao diện không tìm thấy trang khi user truy cập vào admin....................................51
 Danh Mục Bảng
Bảng 2. 1: Bảng đặc tả use case quản lý tài khoản........................................................................23
Bảng 2. 2: Bảng đặc tả use case quản lý tài khoản........................................................................24
Bảng 2. 3: Bảng đặc tả quản lý bài đăng.......................................................................................26
Bảng 2. 4: Bảng Category..............................................................................................................28
Bảng 2. 5: Bảng Users...................................................................................................................29
Bảng 2. 6: Bảng Rooms.................................................................................................................29
 CHƯƠNG 1 : TỔNG QUAN
1.1. Lý do chọn đề tài

Trong cuộc sống hiện nay, có một lượng lớn sinh viên, công nhân lao động, gia
đình vào các thành phố lớn để học tập và làm việc.Nên nhu cầu tìm kiếm phòng
trọ, nơi ở ngày càng tăng.
Tránh việc người đi tìm phải tự thân vận động tìm kiếm cho mình một nơi tốt nhất.
Thay vào đó chỉ cần ngồi ở nhà, hay chỉ cần một thiết bị điện tử để tìm kiếm đơn
giản mà không cần phải đi ra ngoài.
Ý thức được vấn đề đó, nhóm em quyết định chọn đề tài:”Xây dựng Website hỗ
trọ tìm kiếm phòng trọ ” và áp dụng thí điểm vào mô hình quản lí đó vào việc tìm
kiếm.

1.2. Mục tiêu đề tài

Tìm hiểu đúng phương pháp làm một đề tài theo đúng quy tắc , đúng chuẩn.
Đối tượng hướng đến người dùng.
Phạm vi giới hạn: chỉ hỗ trợ tìm kiếm phòng trọ, nhà, văn phòng.
Tìm hiểu được cách triển khai và xây dựng một hệ thông.
Website phải dễ dàng kiểm tra , cải tiến, nâng cấp khi có những lỗi phát sinh bất
ngờ từ hệ thống.

1.3. Nội dung thực hiện

Họ và Tên Nhiệm Vụ
Phan Hoàng Hạc(Nhóm trưởng) Thiết kế phần mềm.
Tìm hiểu để tài.
Lên ý tưởng
 Tìm hiểu ngôn ngữ, công nghệ , IDE,
DB.
Hỗ trợ viết báo cáo.
Nguyễn Quốc Dũng Hỗ trợ thiết kế phần mềm.
Hỗ trợ thiết kế giao diện.
Viết và trình bày báo cáo.
Bảng 1. 1: Bảng nội dung thực hiện

1.4. Phương pháp thực hiện

Họp và phân tích sử dụng công nghệ nào ? thiết kế giao diện như thế nào ? sử
dụng cơ sở dữ liệu gì ?.
Sau khi phân tích tiến hành và đã chọn sử dụng công nghệ React js và Node js
thực hiện theo yêu cầu phần tích.
Kiểm thử và hoàn thành sản phẩm.

1.5. Giới thiệu về công nghệ sử dụng

1.5.1 Ngôn ngữ javascrip

Là một ngôn ngữ lập trình web rất phổ biến ngày nay. Javascript được tích h
ợp đồng thời nhúng vào HTML để hỗ trợ cho website trở nên sống động hơn.
Chúng cũng đóng vai trò tương tự như một phần của website, cho phép Clien
t-side Script từ người dùng tương tự máy chủ (Nodejs) để tạo ra những websi
te động.

Brendan Eich chính là người đã phát triển Javascript tại Netscape với tiền thâ
n là Mocha. Sau đó, Mocha được đổi thành LiveScript và cuối cùng mới đổi t
hành JavaScript.
 Năm 1998, JavaScript với phiên bản mới nhất là ECMAScript 2 phát hành v
à đến năm 1999 thì ECMAScript 3 được ra mắt.

Năm 2016, ứng dụng JavaScript đã đạt kỷ lục lên tới 92% website sử dụng, đ
ồng thời cũng được đánh giá là một công cụ cực kỳ quan trọng đối với lập trì
nh viên.

1.5.2. Visual Studio Code(IDE)

Visual Studio Code là một trình soạn thảo mã nguồn được phát triển bởi Mi
crosoft dành cho Windows, Linux và macOS. Nó hỗ trợ chức năng debug, đ
i kèm với Git, có chức năng nổi bật cú pháp, tự hoàn thành mã thông minh,
snippets, và cải tiến mã nguồn.

Visual Studio Code hỗ trợ đa dạng các chức năng Debug, đi kèm với Git, c
ó Syntax Highlighting. Đặc biệt là tự hoàn thành mã thông minh, Snippets,
và khả năng cải tiến mã nguồn. Nhờ tính năng tùy chỉnh, Visual Studio Cod
e cũng cho phép các lập trình viên thay đổi Theme, phím tắt, và đa dạng các
tùy chọn khác. Mặc dù trình soạn thảo Code này tương đối nhẹ, nhưng lại b
ao gồm các tính năng mạnh mẽ.

1.5.3. Node js

NodeJS là một nền tảng được xây dựng trên “V8 Javascript engine” được viết bằn
g c++ và Javascript. Nền tảng này được phát triển bởi Ryan Lienhart Dahl vào nă
m 2009.
 Node.js ra đời khi các developer đời đầu của JavaScript mở rộng nó từ một thứ bạ
n chỉ chạy được trên trình duyệt thành môi trường mà bạn có thể chạy trên máy củ
a mình dưới dạng ứng dụng độc lập.

Cả trình duyệt JavaScript và Node.js đều chạy trên JavaScript runtime V8 engine.
Công cụ này lấy code JavaScript của bạn và convert nó sang mã máy (bytecode) c
ho việc thực thi nhanh hơn. Mã máy là loại code thấp cấp hơn để máy tính có thể c
hạy mà không cần biên dịch nó.

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. Giống như khi bạn lướt Face
book thì mỗi khi bạn comment hay like một topic nào đó thì ngay lập tức chủ topic
và những người đã comment trên đó sẽ nhận được thông báo là bạn đã comment.

1.5.4. Express framework

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ọi dự á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ọn ExpressJS:

 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 route 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.5.5. Mongodb

MongoDB là một hệ quản trị cơ sở dữ liệu NoSQL mã nguồn mở đa nền tảng viết
bằng C++. Bản ghi trong MongoDB được lưu trữ dạng một dữ liệu văn bản, là một
cấu trúc dữ liệu bao gồm các cặp giá trị và trường tương tự như các đối tượng JSO
N.

Một bản ghi trong collection MongoDB và đơn vị dữ liệu cơ bản trong MongoDB.

Các tài liệu (document) tương tự như các đối tượng JSON nhưng tồn tại trong cơ s
ở dữ liệu ở định dạng có nhiều kiểu dữ liệu hơn được gọi là BSON.

Một cặp name-value trong một document. Một document có 0 hoặc nhiều trường

(field). Các fileld tương tự như các cột(column) trong cơ sở dữ liệu quan hệ (RDB
MS).

1.5.6. Mongoose

Khi bạn đã xác định các Schemas và Model của mình, Mongoose sẽ bao gồm nhi

ều hàm khác nhau cho phép bạn xác thực, lưu, xóa và truy vấn dữ liệu của bạn bằn
g các hàm MongoDB phổ biến. Để làm việc với Mongoose sau khi thực hiện conn
ection thì chúng ta sẽ bắt đầu với một Schema. Mỗi Schemas đều được chỉ định t
ới một collection trong MongoDB và từ đó xác định hình "bộ khung" cho các docu
ment trong collection được chỉ đinh đó. Ở đây mình có một Schemas.

Mỗi key trong object truyền vào class new Schema ví dụ như (title, author, bod
y,..) được chỉ định là một thuộc tính của một document, mỗi value trong object ( n
hư trong ví dụ là String, Boolean, Number) sẽ đại diện cho kiểu dữ liệu được sử dụ
ng ( SchemaType ).

Model chịu trách nhiệm với các document như việc thêm, sửa, xóa, các câu truy v
ấn.

1.6. Mục tiêu đề ra

 Phần mềm sau khi được hoàn thành sẽ giúp người sử dụng thực hiện các
chức năng của trang web:
o Quản lý các bài đăng.
o Thao tác thêm, xóa, sửa nhanh, gọn, dễ dàng, chính xác.
o Thực hiện việc tìm kiếm.
o Cập nhật thông tin cá nhân.

CHƯƠNG 2 : TÁC PHÂN TÍCH VÀ ĐẶC TẢ YÊU CẦU

2.1. Quá trình phân tích

2.1.1. Phân tích phạm vi dự án

Phạm vi : website gồm các chức năng cơ bản.

Phần mền được phát triển và vận hành bởi con người.

2.1.2. Phân tích mở rộng yêu cầu nghiệp vụ

 Xác định yêu cầu nghiệp vụ: Thu thập yêu cầu của khách hàng và ch
ia nhỏ tác vụ đến mức tối thiểu để mô tả một cách chính xác nhất.
Xác định yêu cầu chất lượng: Đáp ứng nhu cầu khách hàng nhanh, c
hính xác, …
Phân tích cơ sở hạ tầng hiện hành: Nắm bắt cấu hình, hệ điều hành đ
ược sử dụng nhiều để nâng cấp phần mềm phù hợp với nhu cầu của
khách hàng, tăng mức độ chính xác và hiệu quả.
Phân tích ảnh hưởng kỹ thuật: Theo nhu cầu của thời đại, luôn phải n
âng cấp và cải thiện hệ thống.

2.1.3. Phân tích yêu cầu bảo mật

Xác định môi trường bảo mật phần mềm: Cung cấp đủ thông tin cho
người dùng.
Xác định mức độ yêu cầu bảo mật: Xác định mức độ rủi ro để bảo m
ật phần mềm.
Rà soát bảo mật hiện tại: Tuân thủ yêu cầu bảo mật để đưa ra nhiều
giải pháp mang lại lợi ích cao.

2.1.4. Phân tích yêu cầu tốc độ

Khi khởi động website, tùy vào cấu hình máy mà thời gian sẽ dao độ
ng từ 3-10 giây.
Sau khi đăng nhập, 100% các thao tác xử lý không quá 10 giây. - Kh
i có yêu cầu của người dùng, thao tác phản hồi người dùng là nhanh.
Có thể thực hiện đăng nhiều bài khác nhau trong một lúc.

2.1.5. Phân tích yêu cầu vận hành

 Hệ thống được xây dựng trên nền Visual Studio Code(IDE) với
ngôn ngữ JavaScrip.
Cơ sở dữ liệu của hệ thống sử dụng CSDL Mongodb.
Yêu cầu phần cứng: CPU intel core i3 hoặc AMD Ryzen 3 trở lên; R
AM >=1GB; Ổ C trống tối thiểu 1GB; Hệ điều hành Windows 7/8/1
0.
Phần cứng tối ưu: CPU intel core i5 (chíp H hoặc HQ) hoặc AMD R
yzen 5 trở lên; RAM >=4GB; Ổ C trống tối thiểu 1GB; Hệ điều hành
Windows 7/8/10.

2.1.6. Phân tích yếu tố con người

Mục đích chính của website là mang đến lợi ích cho con người, nên yếu
tố con người là phần quạn trọng không thể thiếu. Bắt đầu với việc định
nghĩa mục tiêu người dùng, qua đó xác định được các dạng người dùng
với những nhu cầu đặc biệt liên quan, từ đó có thể sửa đổi phần mềm thí
ch ứng với những nhu cầu đó.

2.1.7. Phân tích yêu cầu tích hợp

-Khi nhu cầu của người dùng phát sinh lớn thì cơ sở dữ liệu cần đ
ược thiết kế lại dựa trên những kỹ thuật thiết kế cơ sở dữ liệu mới
để đáp ứng nhu cầu nâng cấp cơ sở dữ liệu trong hệ thống. Việc x
ây dựng các tiện ích chuyển đổi riêng biệt ta có thể dễ dàng thực
hiện việc truy xuất cơ sở dữ liệu hiện có, hay chuyển đổi dữ liệu
cũ sang khuôn dạng mới.

2.1.8. Phân tích thực tiễn nghiệp vụ tồn tại

Khi hiểu được những nghiệp vụ thực tế liên quan đến website
của doanh nghiệp, ta sẽ tránh được sai sót đồng thời và có thể
 tìm được cách tốt hơn, hiệu quả hơn cho việc hiện thực tiến tr
ình nghiệp vụ và ngăn ngừa các lỗi tầm thường.
Để có được website tốt từ giai đoạn phát triển đến lúc sử dụng,
ta cần biết chi tiết về hệ thống mạng và chính sách hạ tầng củ
a khách hàng.
Ta cần tuân thủ nguyên tắc cốt lõi là nhận biết nhu cầu khách
hàng và cố gắng thực hiện chúng.

2.2. Xác định yêu cầu

2.2.1. Yêu cầu và mô tả yêu cầu

Yêu cầu: Hiển thị kết quả tìm kiếm, Tạo bài đăng
Mô tả yêu cầu:
o Đăng nhập/đăng ký tài khoản  Chọn đăng bài 
Đăng bài  Xem lại các bài đã đăng trên giao diện .
o Tìm kiếm gõ vào thanh tìm kiếm  Kết quả.

2.2.2. Phân loại yêu cầu

Yêu cầu chức năng: Đăng bài, thống kê, quản lý thông tin , quản lý thôn
g tin phòng, thay đổi thông tin, tài khoản…
Yêu cầu phi chức năng: Giao diện trực quan thân thiện, dễ sử dụng với
người dùng.
Yêu cầu chức năng lưu trữ: ghi nhận thông tin người dùng.
Yêu cầu chức năng tra cứu: Tìm kiếm các bài đăng.
Yêu cầu chức năng phân quyền: Phân quyền cho Admin – người viên.
Yêu cầu tính tiện dụng: Báo lỗi khi nhập thiếu/sai , giao diện dễ n
hìn/dễ sử dụng.
 -Yêu cầu tính tương thích: Cho nhập thông tin từ bàn phím hoặc
chọn theo danh sách cho sẵn.
-Yêu cầu tính bảo trì: Chuyên viên tin học có thể thêm/xóa/sửa cá
c chức năng của hệ thống.

2.3. Mô hình hóa yêu cầu

2.3.1. Sơ đồ ngữ cảnh

Phản hồi Yêu cầu

Người
dùng Website Admin

Yêu cầu Phản hồi

Hình 2. 1: Biểu đô sơ đồ ngữ cảnh

2.3.2 Sơ đồ Use Case

Biểu đồ use case tổng quát
 Hình 2. 2: Biều đô Use case tổng quát

Tên usecase: xây dựng website hỗ trợ tìm kiếm phòng trọ.
Tên tác nhân: Quản lý, quản trị hệ thống, người dùng.
Chức năng use case: Biểu đồ này cho thấy các use case sẽ tương tác với nhau thôn
g qua phần website hỗ trợ tìm kiếm phòng trọ.

a. Use case đăng nhập, đăng ký

 Hình 2. 3: Biểu đồ Use case đăng nhập, đăng ký
Tên use case: đăng nhập, đăng ký
Tác nhân: quản lý Chức năng use case: cho phép người dùng đăng nhập vào hệ thố
ng
Dòng sự kiện chính:
o Người dùng đăng nhập vào Website.
o Hệ thống yêu cầu người dùng đăng nhập.
o Người dùng nhập Tên đăng nhập và Mật khẩu.
o Người dùng nhập Tên đăng nhập và Mật khẩu và các trường khác để đăng
ký.
o Hệ thống kiểm tra tính hợp lệ thông tin đăng nhập của người dùng và cho p
hép người dùng đăng nhập vào hệ thống.
o Nếu người dùng mà chưa nhập thông tin đăng nhập mà ấn vào nút đăng nhậ
p, đăng ký thì hệ thống sẽ phản hồi lại là không hợp lệ.
Dòng sự kiện phụ:
o Người dùng mà nhập sai tài khoản và mật khẩu thì website sẽ báo lỗi và yê
u cầu người dùng đăng nhập lại.
 o Nếu trong hệ thông đã tồn tại tên người dùng website sẽ báo lỗi và yêu cầu
người dùng đăng ký lại.

b. Use case quản lý tài khoản

Hình 2. 4: Biểu đồ Use case quản lý tài khoản

 Hoạt động của tác nhân Phản ứng của hệ thống
1. Chọn quản lý người dùng
2. Hiển thị thông tin
3. Thêm mới người dùng
4. Cập nhật người dùng
5.Xóa người dùng
6.Hệ thống kiểm tra và xác nhận
Bảng 2. 1: Bảng đặc tả use case quản lý tài khoản

Tên use case: Quản lý tài khoản

Tác nhân: Admin
Chức năng use case: cho phép quản lý thêm, xóa, sửa thông tin tài khoản người
dùng.
Dòng sự kiện chính:
o Admin chọn quản lý người dùng.
o Hệ thống sẽ hiển thị thông tin của các người dùng.
o Admin thêm người dùng.
o Admin cập nhật người dùng.
o Admin xóa người dùng.
Dòng sự kiện phụ:
o Xóa người dùng đồng nghĩa với việc là xóa tất cả thông tin của người dùng.

c. Use case quản lý loại phòng thuê

 Hình 2. 5: Biểu đồ Use case quản lý loại phòng thuê

Hoạt động của tác nhân Phản ứng của hệ thống

1. Chọn quản lý loại phòng
2. Hiển thị thông tin
3. Thêm mới loại phòng
4. Cập nhật loại phòng
5.Xóa loại phòng
6.Hệ thống kiểm tra và xác nhận
Bảng 2. 2: Bảng đặc tả use case quản lý tài khoản
 Tên use case: Quản lý loại phòng
Tác nhân: Admin
Chức năng use case: cho phép quản lý thêm, xóa, sửa thông tin loại phòng.
Dòng sự kiện chính:
o Admin chọn quản lý loại phòng.
o Hệ thống sẽ hiển thị thông tin của các loại phòng.
o Admin thêm loại phòng.
o Admin cập nhật loại phòng.
o Admin xóa loại phòng.
Dòng sự kiện phụ:
o Xóa loại phòng thuê đồng nghĩa với việc là xóa tất cả thông tin của loại phòng
thuê.

d. Use case quản lý bài đăng

Hình 2. 6: Use case quản lý bài đăng

 Hoạt động của tác nhân Phản ứng của hệ thống
1. Chọn quản lý bài đăng
2. Hiển thị thông tin
3. Thêm mới bài đăng
4. Cập nhật bài đăng
5.Xóa loại bài đăng
6.Hệ thống kiểm tra và xác nhận
Bảng 2. 3: Bảng đặc tả quản lý bài đăng

Tên use case: Quản lý bài đăng

Tác nhân: Admin
Chức năng use case: cho phép quản lý thêm, xóa, sửa thông tin bài đăng.
Dòng sự kiện chính:
o Admin chọn quản lý bài đăng.
o Hệ thống sẽ hiển thị thông tin của các bài đăng.
o Admin thêm bài đăng.
o Admin cập nhật bài đăng.
o Admin xóa bài đăng.
Dòng sự kiện phụ:
o Xóa bài đăng đồng nghĩa với việc là xóa tất cả thông tin của loại bài đăng.

2.3.3. Sơ đồ chức năng(BFD)

 Hỗ trợ tìm kiếm phòng trọ

Đăng Trang
Tìm kiếm Admin Bộ lọc Thiếp lập
nhập chủ

Đăng Quản lý Đổi

Đăng ký Theo tên
xuất bài đăng thông tin

Quản lý Đổi mật

Theo loại
tài khoản khẩu
Hình 2. 7: Biểu đồ sơ đồ ngữ cảnh

2.3.4. Mô hình sơ đồ lớp

Hình 2. 8: Mô hình sơ đồ lớp

2.4. Xây dựng cơ sở dữ liệu

2.4.1. Bảng Category

STT Thuộc tính Kiểu Ý nghĩa

1 ObjectId ObjectId Mã loại phòng, tự động tăng

2 name String Tên loại
3 type String Loại
4 img String Hình
5 rooms String Array Mảng chứa các ObjectId của phòng
6 featured Boolean

2.4.2. Bảng Users

Bảng 2. 4: Bảng Category

STT Thuộc tính Kiểu Ý nghĩa

1 ObjectId ObjectId Mã người dùng, tự động tăng

2 username String Tên đăng nhập
3 password String Mật khẩu
4 firstName String Họ và tên đệm
5 lastName String Tên
6 email String xxxxx@Gmail.com
7 address String Địa chỉ
 8 phone String Số điện thoại
9 img String Hình người dùng
10 isAdmin Boolean True là quản trị viên, false là người dùng
11 roomsUser String Array Mảng chứa các ObjectId của phòng, để biết user sở
hữu phòng nào ?

Bảng 2. 5: Bảng Users

2.4.2. Bảng Room

STT Thuộc tính Kiểu Ý nghĩa

1 ObjectId ObjectId Mã phòng, tự động tăng

2 title String Tiêu đề
3 username String Tên người dùng
4 price Number Số tiền
5 address String Địa chỉ
6 status String Trạng thái
7 maxPeople Number Số người ở tối đa
8 area Number Diện tích
9 desc String Mô tả
10 photos String Array Mảng lưu trữ các hình
11 rating Number Đánh giá từ người dùng
12 bestChoice Boolean Tin đăng được ưu tiên
13 type String Loại phòng
14 categoryid ObjectId ObjectId của loại phòng, để biết được phòng này thuộc
loại nào ?
15 userid ObjectId ObjectId của loại người dùng, để biết được phòng này
 thuộc người dùng nào ?

CHƯƠNG 3: THIẾT KẾ PHẦN MỀM

3.1. Giao diện chương trình

3.1.1. Giao diện trang chủ

Bảng 2. 6: Bảng Rooms

 Hình 3. 1: Giao diện trang chủ
Trang chủ bao gồm :
o Navbar:
 Logo, các tùy chọn Rooms(điều hướng đến tất cả phòng hiện có),
Contacts(để liên hệ với quản trị viên), Setting là phần tùy chọn đăng
bài – bài đăng của tôi – thông tin cá nhân
 Hình 3. 2: Chức năng tùy chọn

 Đối với người dùng là Admin thì sẽ xuất hiện Admin Pages dành
cho quản trị viên điều hướng đến trang quản lý.

Hình 3. 3: Hiển thị trang Admin khi người dùng là admin

 Đối với người dùng là người dùng bình thường thì sẽ không hiển thị
Admin Pages.

Hình 3. 4: Không hiển thị trang Admin khi người dùng là user

 Sau khi đăng nhập hiển thị tên người dùng và nút đăng xuất.
 o Banner quảng cáo.
o Chân trang.
o Danh mục

Hình 3. 5: Giao diện các danh mục

o Bài đăng khuyến nghị

Hình 3. 6: Giao diện các bài đăng khuyến nghị

3.1.2. Giao diện danh mục

 Hình 3. 7: Giao diện danh mục

Khi nhấn vào từng loại sẽ hiển thị các phòng thuê thuộc loại tương ứng.
Phân trang tối đa 3 bài đăng.

Hình 3. 8: Giao diện bài đăng theo danh mục

3.1.3. Giao diện các phòng thuê

 Hình 3. 9: Giao diện các phòng thuê

Trong giao diện này sẽ bao gồm:

o Thanh bộ lọc(filter).
 Lọc đơn.
Hình 3. 10: : Giao diện lọc với 1 tùy chọn

Hình 3. 11: : Giao diện lọc với 1 tùy chọn

 Hình 3. 12: : Giao diện lọc với 1 tùy chọn

 Lọc nhiều mục tiêu.

 Khi bấm nút làm mới(Refresh) sẽ làm mới bộ lọc và danh sách
các bài đăng.

Hình 3. 13: Giao diện lọc với nhiều tùy chọn

o Danh sách các bài đăng.
o Phân trang.
 Mặc định là trang đầu.

Hình 3. 14: Giao diện trang đầu

 Chuyển trang.
 Hình 3. 15: Giao diện khi chuyển trang 2

 Phân trang tự động đếm có bao nhiêu bài đăng và hiển thị ra
giới hạn các bài đăng ở mỗi lượt hiển thị.

3.1.4. Giao diện liên hệ

 Hình 3. 16: : Giao diện liên hệ, trợ giúp

Điền tên, email, và nội dung liên hệ. Chưa điền thì sẽ không hiển thị nút để gửi,
bắt buộc phải điển tất các các ô.

Hình 3. 17: Giao diện khi gửi thành conog

 Sau khi gửi, hiển thị thông báo và được gửi vào trong hộp thư của quản trị viên.

Hình 3. 18: Giao diện khi thông báo đến admin

3.1.5. Giao diện tìm kiếm trên trang chủ

Tìm kiếm theo tiêu đề và loại phòng thuê.

Sau khi gõ từ khóa, hiển thị ở dưới danh sách tương ứng.
Chọn details để xem chi tiết bài đăng.
Bấm vào nút close, hoặc xóa từ khóa để trả về trạng thái ban đầu.
Hình 3. 19: Giao diện tìm kiếm

Hình 3. 20: Giao diện tìm kiếm

 Hình 3. 21: Giao diện tìm kiếm

3.1.6. Giao diện chi tiết bài đăng

Hiển thị chi tiết thông tin bài đăng.

Hiển thị người dùng nào đăng bài.
Khi xem chi tiết bài đăng không cần đăng nhập.
 Hình 3. 22: Giao diện chi tiết bài đăng

Nếu bài đăng là của người đăng nhập sẽ hiển thị tùy chọn cập nhập và xóa
bài đăng.
Bắt buộc phải đăng nhập mới thực hiện các chức năng
Chỉ phòng thuộc bài đăng nào mới có thể xóa được bài đăng đó.
 Hình 3. 23: Giao diện khi đăng xuất không hiển thị cập nhật và xóa

Hình 3. 24: Giao diện khi đăng nhập có thể cập nhật và xóa

Khi bấm nút cập nhật điều hướng đến trang cập nhật.
Sau khi cập nhật chuyển đến lại thông tin bài đăng.
 Hình 3. 25: Giao diện cập nhật bài đăng

3.1.7. Giao diện chức năng của người dùng

Các chức năng này yêu cầu người dùng phải đăng nhập.
Tạo mới một bài đăng.
o Khi tạo bắt buộc phải nhập hết các ô dữ liệu.
o Bắt buộc chọn hình ảnh.
Xem các bài đã đăng lên.
o Xem ở dạng danh sách.
o Phân trang với hiển thị tối đa 2 bài đăng.
Xem thông tin tài khoản
o Có thể thay đổi thông tin.
Hình 3. 26: Giao diện yêu cầu người dùng phải đăng nhập

Hình 3. 27: Giao diện thông tin tài khoản

3.1.8. Giao diện đăng nhập, đăng ký

Kiểm tra tài khoản người dùng có trong database không .

Kiểm tra mật khẩu và tài khoản có đúng không.
Các trường dữ liệu bắt buộc phải nhập.
Trong trường hợp đăng ký, nếu username và email đã tồn tại trong database thì
hiển thị cảnh báo.

Hình 3. 28: Giao diện hiển thị hộp thoại không tìm thấy người dùng

Hình 3. 29: Giao diện hiển thị hộp thoại nhập sai tài khoản và mật khẩu
 Hình 3. 30: Giao diện đăng ký

Hình 3. 31: Giao diện đăng ký khi email tồn tại trong database
 Hình 3. 32: Giao diện đăng ký khi username tồn tại trong database

3.1.9. Giao diện quản lý của Admin

Khi vào trang Admin pages bắt buộc phải đăng nhập nếu chưa login ở trang người
dùng.
Xem được tất cả thông tin của người dùng, bao gồm cả cập nhật, xóa, sửa, tạo mới
1 người dùng.
Tạo được loại danh mục mới bao gồm cả thêm, xóa ,sửa.
Xem được tất cả thông tin của các bài đăng, bao gồm cả cập nhật, xóa, sửa, tạo
mới 1 phòng thuê.
Vì là quản trị viên nên có thể xóa được bài đăng của người dùng khác.

Hình 3. 33: Giao diện các thông tin user

 Hình 3. 34: Giao diện các danh mục

3.1.10. Một số giao diện khác

Khi người dùng nhập sai điều hướng trang thì web tự động điều hướng đến
trang không tìm thấy.
Khi người cố gắng truy cập vào trang quản lý Quản trị viên, tự động điều
hướng đến trang cảnh báo.

Hình 3. 35: Giao diện khi người dùng nhập sai điều hướng
 Hình 3. 36: Giao diện không tìm thấy trang

Hình 3. 37: Giao diện không tìm thấy trang khi user truy cập vào admin
 CHƯƠNG 4: TỔNG KẾT
Sau 03 tháng thực hiện nghiên cứu đề tài, dưới sự hướng dẫn tận tình của thầy Bùi
Phú Khuyên, đồ án của em đã đạt được những kết quả sau:

4.1. Kết quả đạt được

Tìm hiều và biết cách sử dụng cơ sở dữ liệu MongoDB.
Tìm hiều và biết cách sử dụng công nghệ React JS.
Tìm kiểu, nắm bắt được kĩ thuật sự dụng NodeJS và Mongoose kết nối với cơ sở d
ữ liệu MongoDB để tạo ra cách thức xử lí dữ liệu theo thời gian thực.
Xây dựng được website với các chức năng như trên phân tích.

4.2. Mặt hạn chế

Trong thời gian qua, em đã cố gắng hết sức để tìm hiểu thực hiện đề tài. Tuy nhiên với ki
nh nghiệm và thời gian hạn chế nên không thể tránh khỏi những thiếu sót trong đồ án. Cụ
thể:
Phần giao diện vẫn còn chưa được đẹp mắt.
Database còn yếu, truy vấn, các mối quan hệ trong MongoDB còn khá kém.
Vì là công nghệ mới, thời gian và trình độ còn hạn chế cho nên hệ thống xây dựng
trong đồ án chỉ dừng ở mức cơ bản. Do đó nếu muốn áp dụng vào thực tiến thì phả
i cần có thời gian, kiến thức nâng cao và công sức để hoàn thiện.

4.3. Hướng phát triển

Xây dựng một phần mềm quản lý toàn diện bao gồm việc mua bán, trao đổi, tìm
kiếm các mặt hàng, thiết bị điện tử, dịch vụ…..

Cung cấp cho người dùng thông tin cần thiết khi muốn tìm kiếm trao đổi dịch vụ,
mặt hàng trên website.
 Tài Liệu Tham Khảo
1. https://nodejs.org/en/docs/
2. https://mongoosejs.com/docs/api.html
3. https://reactjs.org/docs/getting-started.html
4. https://expressjs.com/
5. https://react-bootstrap.github.io/
6. https://react-icons.github.io/react-icons/
7. https://dashboard.emailjs.com/