Tải bản đầy đủ (.pdf) (84 trang)

XÂY DỰNG WEBSITE TÌM KIẾM NHÀ TRỌ TRÊN TOÀN QUỐC

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (4.18 MB, 84 trang )

NĂM HỌC 2022 - 2023

ĐẠI HỌC ĐÀ NẴNG
TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT
KHOA CÔNG NGHỆ SỐ

ĐỒ ÁN TỐT NGHIỆP
ĐẠI HỌC

TRẦN Y TIẾN

XÂY DỰNG WEBSITE TÌM KIẾM NHÀ TRỌ TRÊN TỒN QUỐC

NGÀNH: CƠNG NGHỆ THƠNG TIN
CHUN NGÀNH: CƠNG NGHỆ THƠNG TIN
ĐỀ TÀI:

XÂY DỰNG WEBSITE TÌM KIẾM NHÀ TRỌ
TRÊN TỒN QUỐC

Sinh viên thực hiện
Mã sinh viên
Lớp
Người hướng dẫn

: Trần Y Tiến
: 1911505310252
: 19T2
: TS. Nguyễn Tấn Thuận

Đà Nẵng, 06/2023




ĐẠI HỌC ĐÀ NẴNG
TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT
KHOA CÔNG NGHỆ SỐ

ĐỒ ÁN TỐT NGHIỆP
ĐẠI HỌC
NGÀNH: CÔNG NGHỆ THÔNG TIN
CHUN NGÀNH: CƠNG NGHỆ THƠNG TIN
ĐỀ TÀI:

XÂY DỰNG WEBSITE TÌM KIẾM NHÀ TRỌ
TRÊN TOÀN QUỐC

Giảng viên hướng dẫn duyệt

Đà Nẵng, 06/2023


NHẬN XÉT CỦA NGƯỜI HƯỚNG DẪN
...............................................................................................
...............................................................................................
...............................................................................................
...............................................................................................
...............................................................................................
...............................................................................................
...............................................................................................
...............................................................................................
...............................................................................................

...............................................................................................
...............................................................................................
...............................................................................................
...............................................................................................
...............................................................................................
...............................................................................................
...............................................................................................
...............................................................................................
...............................................................................................
...............................................................................................
Đà Nẵng, ngày

tháng

năm 2023

Giảng viên hướng dẫn


NHẬN XÉT CỦA NGƯỜI PHẢN BIỆN
................................................................................................................................................
................................................................................................................................................
................................................................................................................................................
................................................................................................................................................
................................................................................................................................................
................................................................................................................................................
................................................................................................................................................
................................................................................................................................................
................................................................................................................................................
................................................................................................................................................

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

Đà Nẵng, ngày

tháng

Người phản biện

năm 2023


TĨM TẮT
Tên đề tài: Xây dựng hệ thống website tìm kiếm nhà trọ trên toàn quốc.
Sinh viên thực hiện: Trần Y Tiến
Mã SV: 1911505310252

Lớp: 19T2


Đồ án với đề tài Website tìm kiếm nhà trọ trên tồn quốc được xây dựng bằng
ngơn ngữ lập trình JavaScript, Front-end sử dụng ReactJs ,Back-end sử dụng NodeJs,
hệ quản trị cơ sở dữ liệu MySQL.
Website bao gồm các chức năng chính dành cho người sử dụng là khách vãng
lai như: đăng ký tài khoản, đăng nhập, xem danh sách các phòng trọ, lọc phòng theo
khoảng giá, lọc phịng theo khu vực, lọc theo diện tích, xem giá phịng, xem đường
đi ngắn nhất từ vị trí của mình đến phịng trọ. Các chức năng dành cho người sử dụng
là khách hàng thành viên bao gồm các chức năng của khách vãng lai, ngồi ra cịn có:
nhắn tin với chủ trọ, quản lý trang cá nhân, theo dõi hủy theo dõi người đăng tin, nhận
thông báo từ những người theo dõi,… Đối với người sử dụng là người đăng tin cho
th phịng có các chức năng như: Đăng ký, đăng nhập tài khoản người dùng, quản
lý bài đăng, cập nhật thông tin cá nhân, nhắn tin với người tìm phịng trọ,… Đối với
người sử dụng là quản trị viên thì ngồi các chức năng của nhân viên, có thể sử dụng
các chức năng khác như cập nhật tài khoản người dùng hệ thống, xem, xét duyệt hồ
sơ đăng ký chủ trọ, thống kê người dùng, hồ sơ phòng trọ,…


NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP
Giảng viên hướng dẫn: TS. Nguyễn Tấn Thuận
Sinh viên thực hiện: Trần Y Tiến
Mã sinh viên: 1911505310252
1. Tên đề tài:
Xây dựng website tìm kiếm nhà trọ trên toàn quốc.
2. Các số liệu, tài liệu ban đầu:
 Dựa trên quy định upload tài liệu, các quy tắc đặt câu hỏi.
 Tài liệu tham khảo: />3. Nội dung chính của đồ án:
Q trình xây dựng hệ thống website tìm kiếm nhà trọ trên tồn quốc:
 Thu thập thông tin tài liệu liên quan và khảo sát thực tế.
 Phân tích thiết kế các chức năng của hệ thống.

 Phân tích thiết kế cơ sơ dữ liệu.
 Thiết kế giao diện cho các chức năng.
 Xây dựng hệ thống website.
 Kiểm thử chương trình.
 Hồn thành báo cáo tổng hợp.
4. Các sản phẩm dự kiến
 Website tìm kiếm nhà trọ
 File báo cáo hoàn chỉnh.
5. Ngày giao đồ án: 17/02/2023
6. Ngày nộp đồ án: 11/06/2023

Trưởng khoa

Đà Nẵng, ngày tháng năm 2023
Người hướng dẫn


LỜI NÓI ĐẦU
Lời đầu tiên, em xin gửi lời cảm ơn chân thành đến quý thầy cô đã giúp đỡ
chúng em thực hiện đề tài này. Đặc biệt là TS. Nguyễn Tấn Thuận đã tận tình giúp đỡ
em trong suốt quá trình thực hiện đề tài tốt nghiệp này.
Đồng thời, em cũng xin cảm ơn quý thầy cô thuộc ngành Công nghệ thông tin
khoa Công nghệ số, trường Đại học Sư phạm Kỹ thuật - Đại học Đà Nẵng đã truyền
đạt những kiến thức cần thiết và những kinh nghiệm quý báu cho chúng em trong
suốt thời gian 4 năm trên giảng đường để em có thể thực hiện tốt đề tài này. Đặc biệt,
em xin gởi lời cảm ơn chân thành tới TS. Hoàng Thị Mỹ Lệ, TS. Nguyễn Tấn Thuận,
ThS. Nguyễn Thị Hà Quyên, cùng ThS.Lê Vũ - giáo viên chủ nhiệm lớp 19T2 đã giúp
đỡ em rất nhiều trong q trình học tập và cơng việc.
Trong q trình thực hiện đề tài, do kiến thức và thời gian cịn hạn chế nên
khơng thể tránh khỏi những sai sót. Vì vậy em mong q thầy, cơ thơng cảm và góp

ý để em có thể hồn thiện đề tài. Và những lời góp ý đó có thể giúp em có thể tránh
được những sai lầm sau này.
Em xin chân thành cảm ơn!
Đà Nẵng, ngày tháng năm 2023
Sinh viên thực hiện

i


CAM ĐOAN
Em xin cam đoan:
-

Những nội dung trong luận văn này do em thực hiện dưới sự hướng dẫn của
thầy Nguyễn Tấn Thuận.

-

Mọi tham khảo trong luận văn đều được trích dẫn rõ ràng tên tác giả, tên
cơng trình, thời gian, địa điểm công bố.

-

Mọi sao chép không hợp lệ, vi phạm quy chế đào tạo, hay gian trá, em xin
chịu hoàn toàn trách nhiệm.
Sinh viên thực hiện

ii



MỤC LỤC
MỤC LỤC ................................................................................................................ iii
DANH MỤC BẢNG BIỂU .................................................................................... vii
DANH MỤC HÌNH VẼ ........................................................................................ viii
DANH MỤC CHỮ VIẾT TẮT TIẾNG VIỆT ..................................................... xi
DANH MỤC CHỮ VIẾT TẮT TIẾNG ANH ..................................................... xii
MỞ ĐẦU ....................................................................................................................1
1. Mục tiêu đề tài .................................................................................................1
2. Đối tượng và phạm vi nghiên cứu .................................................................2
2.1.

Đối tượng nghiên cứu .............................................................................2

2.2.

Phạm vi nghiên cứu ................................................................................2

3. Phương pháp nghiên cứu ...............................................................................2
4. Giải pháp công nghệ .......................................................................................2
5. Cấu trúc đồ án .................................................................................................2
CHƯƠNG I. CƠ SỞ LÝ THUYẾT .........................................................................4
1.1.

Ngơn ngữ lập trình JavaScript ...................................................................4

1.1.1.

JavaScript là gì?......................................................................................4

1.1.2.


Lịch sử phát triển ....................................................................................4

1.2.

ReactJs ..........................................................................................................5

1.2.1.

Đơi nét về ReactJs ..................................................................................5

1.2.2.

Những tính năng của ReactJs .................................................................5

1.3.

NodeJS ..........................................................................................................6

2.3.1.

NodeJS là gì? ..........................................................................................6

2.3.2.

Các đặc tính của NodeJS ........................................................................6

1.4.

Tổng quan về hệ quản trị cơ sở dữ liệu MySQL ......................................7


CHƯƠNG II. PHÂN TÍCH THIẾT KẾ HỆ THỐNG...........................................8
2.1.

Khảo sát hệ thống ........................................................................................8

2.1.1.

Khảo sát thực tế ......................................................................................8

2.1.2.

Khảo sát người dùng ..............................................................................8

2.2.

Đặc tả yêu cầu phần mềm ...........................................................................8

2.2.1. Xác định các tác nhân .................................................................................8
2.2.2.

Các yêu cầu chức năng ...........................................................................8

2.2.3.

Yêu cầu phi chức năng ...........................................................................9
iii


2.3.


Biểu đồ Use Case ........................................................................................10

2.3.1.

Use case admin .....................................................................................11

2.3.2.

Use case host ........................................................................................11

2.3.3.

Use case renter......................................................................................12

2.3.4.

Use case khách vãng lai .......................................................................12

2.4.

Kịch bản cho Use Case ..............................................................................13

2.4.1.

Kịch bản Use-case “Đăng ký và đăng nhập” .......................................13

2.4.2.

Kịch bản Use-case “Quản lý trang cá nhân” ........................................13


2.4.3.

Kịch bản Use-case “Lọc và xem” ........................................................14

2.4.4.

Kịch bản Use-case “Quản lý người dùng” ...........................................15

2.4.5.

Kịch bản Use-case “Quản lý nhà trọ” ..................................................16

2.4.6.

Kịch bản Use-case “Chatbox” ..............................................................16

2.4.7.

Kịch bản Use-case “Tìm đường đi” .....................................................17

2.4.8.

Kịch bản Use-case “Theo dõi và hủy theo dõi” ...................................18

2.4.9.

Kịch bản Use-case “Đăng tin” .............................................................18

2.4.10. Kịch bản Use-case “Quản lý banner” ...................................................19

2.4.11. Kịch bản Use-case “Quản lý question” ................................................20
2.4.12. Kịch bản Use-case “Thống kê” ............................................................20
2.5.

Sơ đồ hoạt động..........................................................................................21

2.5.1.

Đăng ký và đăng nhập ..........................................................................21

2.5.2.

Quản lý trang cá nhân...........................................................................22

2.5.3.

Chat box ...............................................................................................23

2.5.4.

Lọc và xem ...........................................................................................24

2.5.5.

Theo dõi và hủy theo dõi ......................................................................25

2.5.6.

Tìm đường đi ........................................................................................26


2.5.7.

Đăng tin ................................................................................................27

2.5.8.

Quản lý banner .....................................................................................28

2.5.9.

Quản lý question ...................................................................................29

2.5.10. Quản lý người dùng ..............................................................................30
2.5.11. Quản lý nhà trọ .....................................................................................31
2.5.12. Thống kê ...............................................................................................32
2.6.

Sơ đồ tuần tự ..............................................................................................33

2.6.1.

Đăng ký ................................................................................................33

2.6.2.

Đăng nhập.............................................................................................33
iv


2.6.3.


Quản lý tài khoản .................................................................................34

2.6.4.

Chat box ...............................................................................................35

2.6.5.

Lọc và xem ...........................................................................................35

2.6.6.

Theo dõi và hủy theo dõi ......................................................................36

2.6.7.

Tìm đường đi ........................................................................................36

2.6.8.

Đăng tin ................................................................................................37

2.6.9.

Quản lý banner .....................................................................................37

2.6.10. Quản lý question ...................................................................................38
2.6.11. Quản lý nhà trọ .....................................................................................38
2.6.12. Thống kê ...............................................................................................39

2.7.

Sơ đồ lớp .....................................................................................................39

2.7.1.

Sơ đồ lớp tài khoản...............................................................................39

2.7.2.

Sơ đồ lớp nhà trọ ..................................................................................40

2.8.

Thiết kế bảng cơ sở dữ liệu .......................................................................41

2.8.1.

Bảng authority ......................................................................................41

2.8.2.

Bảng banner ..........................................................................................41

2.8.3.

Bảng district .........................................................................................41

2.8.4.


Bảng favourite ......................................................................................42

2.8.5.

Bảng follow ..........................................................................................42

2.8.6.

Bảng media ...........................................................................................42

2.8.7.

Bảng message .......................................................................................43

2.8.8.

Bảng motel ...........................................................................................43

2.8.9.

Bảng notifi ............................................................................................44

2.8.10. Bảng province.......................................................................................44
2.8.11. Bảng question .......................................................................................44
2.8.12. Bảng user ..............................................................................................45
2.8.13. Bảng room ............................................................................................46
2.8.14. Bảng ward.............................................................................................46
2.9.

Sơ đồ ERD ..................................................................................................47


CHƯƠNG III. XÂY DỰNG CHƯƠNG TRÌNH..................................................48
3.1.

Cơng cụ xây dựng ......................................................................................48

3.2.

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

3.2.1.

Giao diện trang chủ ..............................................................................49

3.2.2.

Giao diện thơng báo .............................................................................50
v


3.2.3.

Giao diện đăng nhập .............................................................................50

3.2.4.

Giao diện đăng ký.................................................................................51

3.2.5.


Giao diện trang cá nhân người dùng ....................................................51

3.2.6.

Giao diện thay đổi mật khẩu ................................................................52

3.2.7.

Giao diện chỉnh sửa trang cá nhân .......................................................52

3.2.8.

Giao diện trang cá nhân chủ trọ ...........................................................53

3.2.9.

Giao diện tìm nhà trọ ............................................................................54

3.2.10. Giao diện chi tiết nhà trọ ......................................................................55
3.2.11. Giao diện chat box ................................................................................56
3.2.12. Giao diện quản lý nhà trọ .....................................................................56
3.2.13. Giao diện đăng trọ ................................................................................57
3.2.14. Giao diện chỉnh sửa nhà trọ ..................................................................58
3.2.15. Giao diện thống kê ...............................................................................59
3.2.16. Giao diện danh sách người dùng ..........................................................59
3.2.17. Giao diện thêm người dùng ..................................................................60
3.2.18. Giao diện sửa người dùng ....................................................................60
3.2.19. Giao diện khóa, mở khóa người dùng ..................................................61
3.2.20. Giao diện danh sách banner .................................................................61
3.2.21. Giao diện thêm banner .........................................................................62

3.2.22. Giao diện sửa banner ............................................................................62
3.2.23. Giao diện xóa banner ............................................................................63
3.2.24. Giao diện danh sách question ...............................................................63
3.2.25. Giao diện thêm question .......................................................................64
3.2.26. Giao diện sửa question .........................................................................64
3.2.27. Giao diện xóa question .........................................................................65
3.2.28. Giao diện trọ u thích .........................................................................65
KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN .............................................................66
TÀI LIỆU THAM KHẢO ......................................................................................67

vi


DANH MỤC BẢNG BIỂU
Bảng 2.4.1 Kịch bản Use-case “Đăng ký và đăng nhập” .....................................13
Bảng 2.4.2 Kịch bản Use-case “Quản lý tài khoản” .............................................14
Bảng 2.4.3 Kịch bản Use-case “Xem danh sách và tìm kiếm phịng trọ” ..........15
Bảng 2.4.4 Kịch bản Use-case “Quản lý người dùng” .........................................15
Bảng 2.4.5 Kịch bản Use-case “Quản lý nhà trọ” ................................................16
Bảng 2.4.6 Kịch bản Use-case “Chatbox” .............................................................17
Bảng 2.4.7 Kịch bản Use-case “Đường đi ngắn nhất” .........................................17
Bảng 2.4.8 Kịch bản Use-case “Theo dõi và hủy theo dõi” .................................18
Bảng 2.4.9 Kịch bản Use-case “Đăng tin” .............................................................19
Bảng 2.4.10 Kịch bản Use-case “Quản lý banner”...............................................19
Bảng 2.4.11 Kịch bản Use-case “Quản lý question” ............................................20
Bảng 2.4.12 Kịch bản Use-case “Thống kê” .........................................................21
Bảng 2.8.1 Bảng authority ......................................................................................41
Bảng 2.8.2 Bảng banner ..........................................................................................41
Bảng 2.8.3 Bảng district ..........................................................................................41
Bảng 2.8.4 Bảng favourite .......................................................................................42

Bảng 2.8.5 Bảng follow ............................................................................................42
Bảng 2.8.6 Bảng media............................................................................................42
Bảng 2.8.7 Bảng message ........................................................................................43
Bảng 2.8.8 Bảng motel.............................................................................................43
Bảng 2.8.9 Bảng notifi .............................................................................................44
Bảng 2.8.10 Bảng province .....................................................................................44
Bảng 2.8.11 Bảng question ......................................................................................44
Bảng 2.8.12 Bảng user .............................................................................................45
Bảng 2.8.13 Bảng room ...........................................................................................46
Bảng 2.8.14 Bảng ward ...........................................................................................46

vii


DANH MỤC HÌNH VẼ
Hình 2.3 Use case tổng hợp.....................................................................................10
Hình 2.3.1 Use case admin ......................................................................................11
Hình 2.3.2 Use case host ..........................................................................................11
Hình 2.3.3 Use case renter ......................................................................................12
Hình 2.3.4 Use case khách vãng lai ........................................................................12
Hình 2.5.1 Activity “Đăng ký và đăng nhập” .......................................................21
Hình 2.5.2 Activity “Quản lý trang cá nhân” .......................................................22
Hình 2.5.3 Activity “Chat box” ..............................................................................23
Hình 2.5.4 Activity “Lọc và xem” ..........................................................................24
Hình 2.5.5 Activity “Theo dõi và hủy theo dõi” ...................................................25
Hình 2.5.6 Activity “tìm đường đi” .......................................................................26
Hình 2.5.7 Activity “Đăng tin” ...............................................................................27
Hình 2.5.8 Activity “Quản lý banner”...................................................................28
Hình 2.5.11 Activity “Quản lý nhà trọ” ................................................................31
Hình 2.5.12 Activity “Thống kê” ...........................................................................32

Hình 2.6.1 Sequence “Đăng ký” .............................................................................33
Hình 2.6.2 Sequence “Đăng nhập” ........................................................................33
Hình 2.6.3 Sequence “Quản lý tài khoản” ............................................................34
Hình 2.6.4 Sequence “Chat box” ...........................................................................35
Hình 2.6.5 Sequence “Lọc và xem” .......................................................................35
Hình 2.6.6 Sequence “Theo dõi, hủy theo dõi” .....................................................36
Hình 2.6.7 Sequence “Tìm đường đi”....................................................................36
Hình 2.6.8 Sequence “Đăng tin” ............................................................................37
Hình 2.6.9 Sequence “Quản lý banner” ................................................................37
Hình 2.6.10 Sequence “Quản lý question” ............................................................38
Hình 2.6.11 Sequence “Quản lý nhà trọ” ..............................................................38
Hình 2.6.12 Sequence “Thống kê” .........................................................................39
Hình 2.7.1 Sơ đồ lớp “Tài khoản” .........................................................................39
Hình 2.7.2 Sơ đồ lớp “Nhà trọ” ..............................................................................40
Hình 2.9 Sơ đồ ERD ................................................................................................47
Hình 3.2.1 Giao diện “Trang chủ” .........................................................................49
Hình 3.2.2 Giao diện “Thơng báo” ........................................................................50
Hình 3.2.3 Giao diện “Đăng nhập” ........................................................................50
Hình 3.2.4 Giao diện “Đăng ký” ............................................................................51
viii


Hình 3.2.5 Giao diện “Trang cá nhân người dùng” .............................................51
Hình 3.2.6 Giao diện “Thay đổi mật khẩu” ..........................................................52
Hình 3.2.7 Giao diện “Chỉnh sửa trang cá nhân” ................................................52
Hình 3.2.8 Giao diện “Trang cá nhân chủ trọ” ....................................................53
Hình 3.2.9 Giao diện “Tìm nhà trọ” ......................................................................54
Hình 3.2.10 Giao diện “Chi tiết nhà trọ” ..............................................................55
Hình 3.2.11 Giao diện “Chat box” .........................................................................56
Hình 3.2.12 Giao diện “Quản lý nhà trọ” .............................................................56

Hình 3.2.13 Giao diện “Đăng trọ” .........................................................................57
Hình 3.2.14 Giao diện “Chỉnh sửa nhà trọ” .........................................................58
Hình 3.2.15 Giao diện “Thống kê” ........................................................................59
Hình 3.2.16 Giao diện “Danh sách người dùng” ..................................................59
Hình 3.2.17 Giao diện “Thêm người dùng” ..........................................................60
Hình 3.2.18 Giao diện “Sửa người dùng” .............................................................60
Hình 3.2.19 Giao diện “Khóa, mở khóa người dùng” .........................................61
Hình 3.2.20 Giao diện “Danh sách banner” .........................................................61
Hình 3.2.21 Giao diện “Thêm banner” .................................................................62
Hình 3.2.22 Giao diện “Sửa banner” .....................................................................62
Hình 3.2.23 Giao diện “Xóa banner” ....................................................................63
Hình 3.2.24 Giao diện “Danh sách question” .......................................................63
Hình 3.2.25 Giao diện “Thêm question” ...............................................................64
Hình 3.2.26 Giao diện “Sửa question” ..................................................................64
Hình 3.2.27 Giao diện “Xóa question” ..................................................................65
Hình 3.2.28 Giao diện “Trọ yêu thích” .................................................................65

ix


DANH MỤC CHỮ VIẾT TẮT TIẾNG VIỆT
STT

Chữ viết tắt

Giải nghĩa

1

CNTT


Công nghệ thông tin

2

CSDL

Cơ sở dữ liệu

xi


DANH MỤC CHỮ VIẾT TẮT TIẾNG ANH
STT

Chữ viết tắt

Giải nghĩa

Nghĩa tiếng Việt

1

HTML

Hyper Text Markup
Language

Ngôn ngữ đánh dấu siêu
văn bản


2

CSS

Cascading Style Sheets

Trang trí cho website

3

ERD

Entity Relationship Diagram Sơ đồ thực thể quan hệ

4

IT

Information Technology

Cơng nghệ thơng tin

5

API

Application Programming
Interface


Giao diện lập trình ứng
dụng

6

W3C

World Wide Web
Consortium

Hiệp hội Web toàn cầu

7

UI

User Interface

Giao diện người dùng

8

HTTP

Hypertext Transfer Protocol

Giao thức truyền tải siêu
văn bản

xii



Xây dựng website tìm kiếm nhà trọ trên tồn quốc

MỞ ĐẦU
Hiện nay, các tỉnh thành có một số lượng lớn sinh viên ngoại tỉnh, đa số trong số
sinh viên này đang phải ở trọ bên ngồi ký túc vì ký túc xá chỉ đáp ứng được từ
20-30% nhu cầu của sinh viên. Cơng việc đi tìm một phịng trọ như ý theo cách thức
truyền thống là một việc rất tốn thời gian, công sức… Đặc biệt đối với các sinh viên
mới nhập trường thì đây quả là một cơng việc rất phức tạp. Họ thường nhờ người
thân, người quen đi tìm trước khi nhập học, những người được nhờ thường khơng có
nhiều thời gian. Để giúp đỡ sinh viên mới nhập trường, hội sinh viên ở các trường
cũng đã có những chương trình hỗ trợ tìm nhà trọ. Tuy nhiên, các chương trình này
chỉ kéo dài trong những ngày nhập trường nên số phòng cung cấp được cho tân sinh
viên là không nhiều, hiệu quả chưa cao. Khi không thể tìm được phịng trọ, các sinh
viên buộc phải tìm đến các trung tâm mơi giới. Thế nhưng chi phí cho lựa chọn này
là cao và độ tin cậy thì rất thấp. Website: nhatot.vn ra đời nhằm giúp cho việc tìm nhà
trọ đối với sinh viên đặc biệt là với tân sinh viên trở nên dễ dàng và thuận tiện. Các
nguồn phòng được đăng trên web sẽ được bảo đảm về độ tin cậy với đầy đủ thông tin
cần thiết cho việc đi tìm một phịng trọ như: giá phịng, diện tích, ảnh chụp, video
quay tồn khu trọ, khoảng cách tìm đường đi giữa 2 địa điểm, ... cùng với ý kiến và
yêu cầu của chủ nhà. Nếu phòng trọ vừa tìm được chưa vừa ý, khách hàng có thể tiếp
tục lựa chọn một phòng khác tiếp theo với mức chi phí giảm dần cho tới khi tìm được
một căn phịng vừa ý.
1. Mục tiêu đề tài
Xây dựng website tìm kiếm nhà trọ trên toàn quốc. Với các chức năng cụ thể:
 Đối khách vãng lai: gồm các chức năng cơ bản.
-

Đăng ký thành viên, đăng nhập hệ thống.


-

Xem danh sách các nhà trọ, chi tiết phòng trọ.

-

Lọc phòng theo khoảng giá.

-

Lọc phòng theo khu vực.

-

Xem đường đi ngắn nhất từ vị trí của mình đến phịng trọ.

-

Lọc theo thời gian đăng tin.

 Đối với khách hàng là thành viên: Bao gồm các chức năng của khách vãng lai
và có thêm một số chức năng.
-

Nhắn tin với người đăng tin.

-

Quản lý tài khoản.


-

Quản lý hồ sơ cá nhân.

Sinh viên thực hiện: Trần Y Tiến

Người hướng dẫn: TS. Nguyễn Tấn Thuận

1


Xây dựng website tìm kiếm nhà trọ trên tồn quốc

-

Theo dõi hủy theo dõi người đăng tin.

-

Nhận thông báo từ những người theo dõi.

 Đối với quản trị viên: Bao gồm các chức năng của khách vang lai và khách
thành viên và có thêm một số chức năng.
-

Xem danh sách thành viên.

-


Cập nhật tài khoản người dùng hệ thống.

-

Xem, xét duyệt hồ sơ đăng ký chủ trọ.

-

Thống kê người dùng, hồ sơ phòng trọ.

2. Đối tượng và phạm vi nghiên cứu
2.1. Đối tượng nghiên cứu
Phân tích thiết kế chức năng tìm đường đi ngắn nhất đến phịng trọ, chatbox, quản
lý phòng trọ.
2.2. Phạm vi nghiên cứu
Đề tài được áp dụng trên phạm vi toàn quốc.
3. Phương pháp nghiên cứu
 Phương pháp nghiên cứu lý thuyết thu thập thông tin qua internet, tài liệu, sách
để tìm được các cơ sở lý thuyết liên quan vấn đề mình nghiên cứu.
 Phương pháp triển khai thực nghiệm: xây dựng website.
4. Giải pháp công nghệ
 Ngơn ngữ lập trình: JavaScript, ReactJs, NodeJs.
 Hệ quản trị cơ sở dữ liệu: MySQL.
 Công cụ hỗ trợ: Visual Studio Code, Xampp, Postman.
5. Cấu trúc đồ án
Cấu trúc đồ án tốt nghiệp gồm các phần như sau:

- Mở đầu: Nghiên cứu, tìm hiểu và đưa ra lý do chọn đề tài, mục tiêu và
mục đích khi xây dựng và phát triển đề tài. Xác định rõ phạm vi và đối
tượng hướng đến, giải pháp công nghệ để triển khai, xây dựng đề tài,

đồng thời phân tích đặc tả yêu cầu nghiệp vụ.
- Chương I: Tìm hiểu, giới thiệu tổng qt các kiến thức về ngơn ngữ lập
trình JavaScript, ReactJs, NodeJs và hệ quản trị cơ sở dữ liệu MySQL.
Sinh viên thực hiện: Trần Y Tiến

Người hướng dẫn: TS. Nguyễn Tấn Thuận

2


Xây dựng website tìm kiếm nhà trọ trên tồn quốc

- Chương II: Phân tích các tác nhân và chức năng của từng tác nhân, yêu
cầu phi chức năng của hệ thống. Thiết kế sơ đồ use-case, sơ đồ hoạt
động, sơ đồ ERD. Thiết kế cơ sở dữ liệu. Xây dựng kịch bản cho từng
use-case trong hệ thống.
- Chương III: Xây dựng giao diện và chức năng của hệ thống.
- Kết luận: Kết luận chung cho các chương trong đồ án. Trình bày những
vấn đề đã giải quyết đồng thời trình bày hướng phát triển.

Sinh viên thực hiện: Trần Y Tiến

Người hướng dẫn: TS. Nguyễn Tấn Thuận

3


Xây dựng website tìm kiếm nhà trọ trên tồn quốc

CHƯƠNG I. CƠ SỞ LÝ THUYẾT

1.1. Ngơn ngữ lập trình JavaScript
1.1.1. JavaScript là gì?
JavaScript là một ngơn ngữ lập trình thơng dịch được phát triển từ các ý niệm
nguyên mẫu. Ngôn ngữ này được dùng rộng rãi cho các trang web (phía người dùng)
cũng như phía máy chủ (với Nodejs). Nó vốn được phát triển bởi Brendan Eich tại
Hãng truyền thông Netscape với cái tên đầu tiên Mocha, rồi sau đó đổi tên thành
LiveScript, và cuối cùng thành JavaScript. Giống Java, JavaScript có cú pháp tương
tự C, nhưng nó gần với Self hơn Java. .js là phần mở rộng thường được dùng cho tập
tin mã nguồn JavaScript.
1.1.2. Lịch sử phát triển
Trước năm 1995, các trang web vẫn chỉ là các trang web tĩnh được tạo nên từ
HTML, CSS. Ông lớn trong lĩnh vực cơng nghệ thời đó là Netscape đã sớm nhận ra
được sự bất tiện này và bước đầu cho ra 1 “ngơn ngữ” đầu tiên chạy trên trình duyệt
gọi là CGI script.
Tuy nhiên, đây vẫn chưa phải là một cuộc cách mạng vì CGI script bắt người
dùng phải gửi 1 request đến server mỗi khi muốn thay đổi trang web và chờ response,
điều này khá bất tiện và tốn thời gian.
Chưa hài lòng với kết quả hiện tại, Netscape có 1 ý tưởng về 1 ngơn ngữ lập
trình chun dụng trên browser và ngay lập tức bắn phát súng đầu tiên. Họ đã thuê 1
lập trình viên đầy tài năng là Brendan Eich để tạo ra 1 ngôn ngữ có tên là Mocha.
Chỉ trong vịng 10 ngày ngắn ngủi, ông đã tạo ra 1 ngôn ngữ lập trình chuyên
dụng trên browser có tên Livescript sau đó đổi tên thành Javascript. Brendan đã chia
sẻ trên 1 tờ báo rằng “Tôi khơng ngủ nhiều lắm”. Nhờ vào Javascript, lập trình viên
bây giờ có thể thêm logic vào trong trang web của mình và biến nó từ “tĩnh” (static)
sang “động” (dynamic), điều này có nghĩa là JS giúp lập trình viên tương tác trực tiếp
với những thành phần quan trọng của trang web như DOM (Document Object Model)
hay windown object (Global execution context của 1 trang web). Nếu như ngày xưa,
với CGI script, bạn phải gửi cả 1 request chỉ để đổi màu 1 dòng chữ hay background

Sinh viên thực hiện: Trần Y Tiến


Người hướng dẫn: TS. Nguyễn Tấn Thuận

4


Xây dựng website tìm kiếm nhà trọ trên tồn quốc

của trang web thì bây giờ, bạn chỉ cần JS là có thể tương tác trực tiếp và manipulate
các thuộc tính của 1 trang web.
1.2. ReactJs
1.2.1. Đôi nét về ReactJs
ReactJS là một thư viện JavaScript mã nguồn mở được phát triển bởi Facebook,
ra mắt vào năm 2013 với mục đích để xây dựng giao diện người dùng. Nó được sử
dụng rộng rãi để xây dựng các trang web SPA (Single Page Application) và các ứng
dụng trên nền tảng di động. Nó rất dễ sử dụng và cho phép người dùng có thể tạo các
component UI có thể tái sử dụng.
Một trong những điểm hấp dẫn của React là thư viện này khơng chỉ hoạt động
trên phía client, mà cịn được render trên server và có thể kết nối với nhau. React so
sánh sự thay đổi giữa các giá trị của lần render này với lần render trước và cập nhật
ít thay đổi nhất trên DOM.
1.2.2. Những tính năng của ReactJs
JSX: viết tắt của JavaScript extension, nó là React extension, giúp cho việc thay
đổi cây DOM dễ dàng hơn bằng HTML-style code đơn giản. Nó là một trong những
tính năng tốt và dễ sử dụng.
Single-way data flow (Luồng dữ liệu một chiều): ReactJS khơng có những
module chun dụng để xử lý data, vì vậy ReactJS chia nhỏ view thành các
component nhỏ có mỗi quan hệ chặt chẽ với nhau. Luồng truyền dữ liệu trong ReactJS
là luồng dữ liệu một chiều từ cha xuống con. Việc ReactJS sử dụng one-way data
flow có thể gây ra một chút khó khăn cho những người muốn tìm hiểu và ứng dụng

vào trong các dự án. Tuy nhiên, cơ chế này sẽ phát huy được ưu điểm của mình khi
cấu trúc cũng như chức năng của view trở nên phức tạp thì ReactJS sẽ phát huy được
vai trị của mình.
Components: Một trang web được xây dựng bằng ReactJS là một sự kết hợp
nhiều component lại với nhau chứ khơng phải chung một Template như bình thường.
Các component cũng như các hàm JavaScript bình thường, giúp tạo ra các code dễ
dàng bằng cách tách các logic ra thành các đoạn code độc lập có thể tái sử dụng.
Chúng ta có thể sử dụng component dưới dạng function hoặc class, ngồi ra các
component cịn có state và props.
Sinh viên thực hiện: Trần Y Tiến

Người hướng dẫn: TS. Nguyễn Tấn Thuận

5


Xây dựng website tìm kiếm nhà trọ trên tồn quốc

Virtual DOM: ReactJS tạo một thứ gọi là Virtual DOM (DOM ảo). Đúng như
tên gọi, nó là một copy của DOM thật trên trang web đó. ReactJS dùng những DOM
ảo đó để tìm đúng những DOM thật cần được cập nhật khi có bất kỳ sự kiện nào làm
các thành phần bên trong nó thay đổi.
Javascript Expressions: Biểu thức JS có thể sử dụng trong file .jsx hoặc .js bằng
cách sử dụng cặp dấu ngoặc nhọn “{}”.
1.3. NodeJS
2.3.1. NodeJS là gì?
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 forum
và đặ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 tồ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 cho tới Linux 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.
2.3.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ộ (noneblocking), nó chủ yếu 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 Node.js 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 Javascript Engine
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ình luồ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ương trình tương tự có thể cung cấp dịch vụ cho
một số lượng lớn hơn nhiều so với yêu cầu máy chủ truyền thống như Apache HTTP
Server.

Sinh viên thực hiện: Trần Y Tiến

Người hướng dẫn: TS. Nguyễn Tấn Thuận

6


Xây dựng website tìm kiếm nhà trọ trên tồn quốc

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.
1.4. Tổng quan về hệ quản trị cơ sở dữ liệu MySQL

Hệ quản trị cơ sở dữ liệu MySQL được hiểu như là chương trình dùng để quản
lý hệ thống cơ sở dữ liệu, trong đó, cơ sở dữ liệu là một hệ thống lưu trữ thông tin
được sắp xếp rõ ràng, phân lớp ngăn nắp. Nó giúp bạn có thể truy cập dữ liệu một
cách thuận lợi và nhanh chóng nhất. Vì hỗ trợ đa số các ngơn ngữ lập trình nên
MySQL chính là hệ quản trị cơ sở dữ liệu tự do nguồn mở phổ biến nhất trên thế giới.
Hiện MySQL đang được các nhà phát triển rất ưa chuộng trong quá trình phát triển
ứng dụng.
MySQL là hệ quản trị cơ sở dữ liệu tự do nguồn mở phổ biến nhất thế giới và
được các nhà phát triển rất ưa chuộng trong quá trình phát triển ứng dụng. Vì MySQL
là cơ sở dữ liệu tốc độ cao, ổn định và dễ sử dụng, có tính khả chuyển, hoạt động trên
nhiều hệ điều hành cung cấp một hệ thống lớn các hàm tiện ích rất mạnh. Với tốc độ
và tính bảo mật cao, MySQL rất thích hợp cho các ứng dụng có truy cập CSDL trên
internet. MySQL miễn phí hồn tồn cho nên bạn có thể tải về MySQL từ trang chủ.
Nó có nhiều phiên bản cho các hệ điều hành khác nhau: phiên bản Win32 cho các hệ
điều hành dòng Windows, Linux, MacOS, FreeBSD, NetBSD, Solaris, SunOS, …
MySQL là một trong những ví dụ rất cơ bản về Hệ Quản trị Cơ sở dữ liệu quan
hệ sử dụng Ngơn ngữ truy vấn có cấu trúc (SQL).

Sinh viên thực hiện: Trần Y Tiến

Người hướng dẫn: TS. Nguyễn Tấn Thuận

7


Xây dựng website tìm kiếm nhà trọ trên tồn quốc

CHƯƠNG II. PHÂN TÍCH THIẾT KẾ HỆ THỐNG
2.1. Khảo sát hệ thống
2.1.1. Khảo sát thực tế

Mỗi năm có đến hàng trăm sinh viên đổ về các trường đại học, trong khi đó số
lượng phịng ở ký túc xá của nhà trường có giới hạn. Do đó nhu cầu thuê trọ của sinh
viên tăng rất cao nhưng đa phần các bạn sinh viên thường đối mặt với trường hợp
thuê phải những căn trọ kém chất lượng với mức giá cao. Vì vậy, em chọn đề tài này
để nghiên cứu nhằm đưa ra những giải pháp tối ưu đáp ứng nhu cầu thuê phòng trọ
của các bạn sinh viên Đại học Sư phạm Kỹ thuật Đà Nẵng nói riêng và cả nước nói
chung.
2.1.2. Khảo sát người dùng
Nhu cầu tìm trọ ngày càng cao khiến cho tình trạng lừa đảo của các mơi giới
ngày càng tăng làm cho nhiều người mất rất nhiều thời gian, cơng sức tiền bạc cho
việc tìm kiếm một chỗ ở phù hợp với nhu cầu bản thân.
2.2. Đặc tả yêu cầu phần mềm
2.2.1. Xác định các tác nhân
 Đề tài gồm ba tác nhân chính
 Khách vãng lai.
 Người thuê trọ (Renter)
 Chủ trọ (Host).
 Người quản lý (Admin).
2.2.2. Các yêu cầu chức năng
 Khách vãng lai.
 Đăng ký thành viên, đăng nhập hệ thống.
 Xem danh sách các nhà trọ, chi tiết phòng trọ.
 Lọc phòng theo khoảng giá.
 Lọc phịng theo khu vực.
 Lọc theo diện tích.
 Lọc theo thời gian đăng tin.
 Renter (gồm các chức năng của khách vãng lai)
Sinh viên thực hiện: Trần Y Tiến

Người hướng dẫn: TS. Nguyễn Tấn Thuận


8


×