Quản trị viên - Quản trị viênAdmin: quản lý danh mục bài đăng của website, thống kê số lượng người dùng sử dụng của hệ thống và đưa ra hình phạt dành cho những chủ trọ đăng bài sai lệc
Trang 1ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT
KHOA CÔNG NGHỆ SỐ
Đà Nẵng, tháng 1/2024 ĐỒ ÁN TỐT NGHIỆP
ĐẠI HỌC NGÀNH: CÔNG NGHỆ THÔNG TIN CHUYÊN NGÀNH: CÔNG NGHỆ THÔNG TIN
ĐỀ TÀI:
XÂY DỰNG WEBSITE THUÊ PHÒNG TRỌ
Sinh viên thực hiện : Lê Huỳnh Bảo
Trang 2ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT
KHOA CÔNG NGHỆ SỐ
Đà Nẵng, tháng 1/2024 ĐỒ ÁN TỐT NGHIỆP
ĐẠI HỌC NGÀNH: CÔNG NGHỆ THÔNG TIN CHUYÊN NGÀNH: CÔNG NGHỆ THÔNG TIN
ĐỀ TÀI:
XÂY DỰNG WEBSITE THUÊ PHÒNG TRỌ
Người duyệt: ThS Nguyễn Văn Phát
Trang 3NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN
Trang 4NHẬN XÉT CỦA NGƯỜI PHẢN BIỆN
Trang 5TÓM TẮT
Tên đề tài: Xây dựng hệ thống website thuê phòng trọ Sinh viên thực hiện: Lê Huỳnh Bảo Mã SV: 1911505310103 Lớp: 19T1
- Khách thành viên cần tìm phòng trọ bình luận bài đăng để tiện trong việc tìm kiếm
4 Quản trị viên
- Quản trị viên(Admin): quản lý danh mục bài đăng của website, thống kê số lượng người dùng sử dụng của hệ thống và đưa ra hình phạt dành cho những chủ trọ đăng bài sai lệch thông tin
Trang 6TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT
- Xây dựng website thuê phòng trọ
2 Các số liệu, tài liệu ban đầu:
- Dựa trên thông tin của chợ tốt - Cách thức tìm phòng Trọ tại Đà Nẵng - Ngôn ngữ ReactJS – NodeJS
- Hệ quản trị cơ sở dữ liệu MongoDatabase - Công nghệ hỗ trợ VisualStudio Code, StarUML
3 Nội dung chính của đồ án:
- Chương 1: Tìm hiểu lý thuyết - Chương 2: Phân tích thiết kế hệ thống - Chương 3: Xây dựng chương trình
4 Các sản phẩm dự kiến
- Hoàn thành website thuê phòng trọ - File báo cáo hoàn chỉnh
5 Ngày giao đồ án: 18/9/2023 6 Ngày nộp đồ án: 21/01/2024
Đà Nẵng, ngày tháng 1 năm 2024
Nguyễn Văn Phát
Trang 7LỜI NÓI ĐẦU
i
Lời đầu tiên, em xin bày tỏ lòng biết ơn sâu sắc và lòng tôn trọng đến tất cả quý thầy cô giáo đã đồng hành và hỗ trợ em trong suốt quá trình thực hiện đề tài này Sự giúp đỡ, sự chỉ dẫn và kiến thức quý báu mà quý thầy cô đã chia sẻ với em là điều không thể định giá được và đã góp phần lớn trong thành công của đồ án này
Đặc biệt, em muốn bày tỏ lòng biết ơn chân thành đến ThS Nguyễn Văn Phát
- người đã tận tình và không ngừng động viên, hỗ trợ em trong suốt quá trình thực hiện đề tài tốt nghiệp này Nhờ những kiến thức và kinh nghiệm của thầy, em đã học hỏi được nhiều điều quý giá và trải qua một quá trình học tập và nghiên cứu thực sự đáng nhớ
Đồng thời, em xin gửi lời cảm ơn chân thành tới toàn thể quý thầy cô thuộc khoa Công Nghệ Số Trường Đại Học Sư Phạm Kỹ Thuật - Đại Học Đà Nẵng Suốt 4 năm học tập tại trường, em đã được trang bị những kiến thức chuyên môn, những kỹ năng quan trọng và cả những lời khuyên quý báu từ quý thầy cô Đặc biệt, em muốn
gửi lời cảm ơn đến TS Hoàng Thị Mỹ Lệ - giáo viên chủ nhiệm lớp 19T1, người đã
luôn truyền đạt không chỉ kiến thức mà còn những phẩm chất đạo đức và tình yêu
thương đối với nghề giáo Cùng với ThS Nguyễn Văn Phát, thầy cô đã trở thành
nguồn động viên và nguồn sự hỗ trợ vô cùng quan trọng trong quá trình học tập và công việc của em
Tuy nhiên trong quá trình thực hiện đề tài này, do kiến thức và thời gian có hạn, em không thể tránh khỏi những sai sót Vì vậy, em mong quý thầy, cô thông cảm và góp ý để em có thể hoàn thiện hơn và tránh được những sai lầm trong tương lai
Trang 8CAM ĐOAN
ii
Tôi xin cam đoan: 1 Những nội dung trong luận văn này do tôi thực hiện dưới sự hướng dẫn của ThS Nguyễn Văn Phát
2 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ố
3 Mọi sao chép không hợp lệ, vi phạm quy chế đào tạo, hay gian trá, tôi xin chịu hoàn toàn trách nhiệm
Sinh viên thực hiện
Lê Huỳnh Bảo
Trang 9MỤC LỤC
iii
NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN i
NHẬN XÉT CỦA NGƯỜI PHẢN BIỆN ii
DANH MỤC CHỮ VIẾT TẮT TIẾNG VIỆT ix
DANH MỤC CHỮ VIẾT TẮT TIẾNG ANH x
MỞ ĐẦU 1
1 Mục tiêu đề tài 1
2 Đối tượng nghiên cứu và phạm vi nghiên cứu 2
a Đối tượng nghiên cứu 2
b 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 3
Chương 1 CƠ SỞ LÝ THUYẾT 4
1.1 Giới thiệu về Nodejs 4
Ưu điểm 5
Nhược điểm 5
1.2 Giới thiệu về React 6
Ưu điểm 6
Trang 10Chương 2 PHÂN TÍCH THIẾT KẾ HỆ THỐNG 13
2.1 Khảo sát yêu cầu 13
Sơ đồ hoạt động (Activity Diagram) 24
2.3 Thiết kế cơ sỡ dữ liệu 28
Chi tiết các bảng 28
Sơ đồ ERD 31
Chương 3 XÂY DỰNG CHƯƠNG TRÌNH 32
3.1 Công cụ xây dựng chương trình 32
3.2 Giao diện chương trình 32
Giao diện trang chủ 32
Giao diện chi tiết bài đăng 33
Giao diện thuê phòng trọ 34
Giao diện nhà thuê đã đặt 35
Trang 11MỤC LỤC
v
Giao diện tài khoản của tôi 36
Giao diện quản lý hợp đồng ( chủ trọ) 36
Giao diện đăng kí phòng trọ 37
Giao diện quản lý phòng trọ (chủ trọ) 38
Giao diện quản lý bài đăng 38
Giao diện quản lý người dùng 39
Giao diện quản lý hợp đồng thuê phòng trọ 39
Giao diện lịch sử nạp tiền 40
Giao diện xác nhận hợp đồng thuê phòng trọ (chuyên viên) 40
Giao diện tạo hợp đồng thuê nhà (chuyên viên) 41
Giao diện đăng kí 42
Giao diện đăng nhập 42
KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 44
Trang 12vi
DANH MỤC BẢNG BIỂU
Bảng 2.1: Kịch bản Usecase đăng bài 16
Bảng 2.2: Kịch bản usecase chỉnh sửa thông tin bài đăng 17
Bảng 2.3: Kịch bản usecase Xoá bài đăng 17
Bảng 2.4: Kịch bản usecase Xoá đặt phòng 18
Bảng 2.5: Kịch bản usecase Đặt phòng 19
Bảng 2.6: Kịch bản usecase Tìm kiếm 19
Bảng 2.7: Kịch bản usecase đăng nhập 20
Bảng 2.8: Kịch bản usecase Quản trị viên 21
Bảng 2.9: Kịch bản Usecase đăng bài 28
Bảng 2.10: Bảng Places 29
Bảng 2.11: Bảng Invoices 30
Bảng 2.12: Bảng Users 30
Trang 13vii
DANH MỤC HÌNH VẼ
Hình 1.1: Nodejs 4
Hình 1.2: ReactJS 6
Hình 1.3: Visual Studio Code 8
Hình 1.4: Hệ quản trị CSDL NoSQL MongoDB 10
Hình 2.1: Sơ đồ nghiệp vụ công việc Website 13
Hình 2.2: Sơ đồ Usecase 16
Hình 2.3: Sơ đồ Robustness đăng bài 22
Hình 2.4: Sơ đồ Robustness duyệt bài đăng 22
Hình 2.5: Sơ đồ Robustness đặt phòng 23
Hình 2.6: Sơ đồ Robustness tìm kiếm 23
Hình 2.7: Sơ dồ hoạt động đăng nhập 24
Hình 2.8: Sơ đồ hoạt động đăng tin 24
Hình 2.9: Sơ đồ hoạt động xoá bài đăng 25
Hình 2.10: Sơ đồ hoạt động chỉnh sửa bài đăng 25
Hình 2.11: Sơ đồ hoạt động tìm kiếm 26
Hình 2.12: Sơ đồ hoạt động đặt phòng 26
Hình 2.13: Sơ đồ hoạt động huỷ đặt phòng 27
Hình 2.14: Sơ đồ hoạt động duyệt bài đăng 27
Hình 2.15: Sơ đồ hoạt động quản lý tài khoản người dùng 28
Hình 2.16: Sơ đồ ERD 31
Hình 3.1: Giao diện trang chủ 32
Hình 3.2: Giao diện chi tiết bài đăng 33
Hình 3.3: Giao diện thuê phòng trọ 34
Hình 3.4: Giao diện nhà thuê đã đặt 35
Trang 14viii
Hình 3.5: Giao diện tài khoản của tôi 36
Hình 3.6: Giao diện quản lý hợp đồng của chủ trọ 36
Hình 3.7: Giao diện đăng tin 37
Hình 3.8: Giao diện quản lý phòng trọ 38
Hình 3.9: Giao diện quản lý bài đăng 38
Hình 3.10: Giao diện quản lý người dùng 39
Hình 3.11: Giao diện quản lý hợp đồng 39
Hình 3.12: Giao diện lịch sử nạp tiền 40
Hình 3.13: Giao diện tạo hợp đồng thuê phòng trọ 40
Hình 3.14: Giao diện tạo hợp đồng thuê nhà 41
Hình 3.15: Giao diện đăng kí thành viên 42
Hình 3.16: Giao diện đăng nhập 42
Trang 15DANH MỤC CHỮ VIẾT TẮT TIẾNG VIỆT
ix
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
Trang 16DANH MỤC CHỮ VIẾT TẮT TIẾNG ANH
x
1 HTML HyperText Markup Language
Ngôn ngữ đánh dấu siêu văn bản
2 DOM Document Object Model Mô hình đối tượng tài liệu
3 API
ApplicationProgramming Interface
Các phương thức, giao thức kết nối với các thư viện và ứngdụng khác
4 HTTP Hypertext Transfer Protocol
Giao thức truyền tải siêu văn bản
5 RAM Random Access Memory
Bộ nhớ khả biến cho phép đọc- ghi
6 ERD Entity-Relationship Diagram
Sơ đồ mô hình thực thể quan hệ
7 CPU Central Processing Unit Bộ xử lý trung tâm
8 PHP Personal Home Page
Ngôn ngữ lập trình kịch bản đa mục đích
9 JSX JavaScript XML JavaScript XML
Trang 17Xây dựng website thuê phòng trọ
MỞ ĐẦU
Đối với những thành phố lớn, như là Tp Đà Nẵng – một thành phố với trên 1,1 triệu dân – thì những vấn đề trên càng trở nên phức tạp, nhất là vấn đề về nhà trọ cho dân nhập cư, công nhân và đặc biệt hơn hết là số lượng sinh viên của các trường đại học – cao đẳng Đại đa các thí sinh ngày nay đăng ký thi tuyển sinh Đại học chủ yếu là gia đình ở quê, ngoại thành lên thành phố, thì nhu cầu tìm được trọ vừa ý là rất khó, Sự thành lập của thị trường chứng khoán và sự kiện khác làm cho nên kinh tế Đà Nẵng có những chuyển biến sôi động Hàng trăm công ty mới được thành lập, cũng cần thuê mướn mặt bằng làm địa điểm giao dịch, văn phòng đại diện, nơi làm việc,
Như vậy, hàng năm nhu cầu tìm kiếm nhà trọ để thuê, cũng như tìm thuê mặt bằng làm văn phòng đại diện, địa điểm giao dịch là rất lớn Nhưng bằng cách nào để người thuê gặp được chủ nhà một cách dễ dàng và thuê được căn nhà, phòng trọ ưng ý nhất? Trong khi đó hiên nay nhu cần tìm kiếm mọi thông tin trên Internet đã trở nên rất phổ biến Chính vì thế, em chọn đề tài “Xây dựng website đăng tin và tìm kiếm phòng trọ tại Đà Nẵng” để giải quyết các vấn đề nêu ở trên
Xin chân thành cảm ơn sự hướng dẫn tận tình của thầy trong suốt quá trình thực hiện đồ án này!
• Cho phép chủ trọ đăng tin và cập nhật lại thông tin phòng trọ • Xem thông tin cá nhân, đổi mật khẩu, đăng nhập, đăng xuất • Xem danh sách đặt phòng
• Cho phép chủ trọ xóa thông tin phòng trọ • Cho phép chủ trọ cập nhật giấy tờ chứng minh • Cho phép chủ trọ ẩn bài đăng
Trang 18Xây dựng website thuê phòng trọ
Đối với khách thành viên: • Cho phép bình luận,đánh giá bài đăng • Cho phép đánh giá bình luận của bài đăng • Cho phép đặt phòng
• Cập nhật lại thông tin cá nhân, đổi mật khẩu, đăng nhập, đăng xuất Đối với quản trị viên:
• Cho phép duyệt bài đăng • Cho phép khóa tài khoản và xóa tài khoản vi phạm • Cập nhật thời gian đặt phòng
• Thống kê số bài đăng đã duyệt, số người dùng và chủ trọ đăng bài nhiều nhất
2 Đối tượng nghiên cứu và phạm vi nghiên cứu a Đối tượng nghiên cứu
Người nhập cư, công nhân, sinh viên, học sinh,… có nhu cầu sinh sống và làm việc tại Đà Nẵng
b Phạm vi nghiên cứu
Đề tài được nghiên cứu tại Khu vực thành phố Đà Nẵng
3 Phương pháp nghiên cứu
• Phương pháp nghiên cứu lý thuyết thu nhập thông tin qua sách, các tài liệu trang web để tìm được các cơ sở lý thuyết mà mình nghiên cứu
• Phương pháp triển khai thực nghiệm: xây dựng website • Tham khảo các trang fanpage cho thuê phòng trọ trong khu vực Đà Nẵng
4 Giải pháp công nghệ
• Ngôn ngữ lập trình : Node.js - Reactjs • Hệ quản trị cơ sở dữ liệu : MongoDB • Công cụ hỗ trợ : StarUML, VisualCode
Trang 19Xây dựng website thuê phòng trọ
5 Cấu trúc đồ án
Cấu trúc đồ án bao gồm những phần sau:
Chương 1: Cơ sở lý thuyết
Tìm hiểu, giới thiệu tổng quát các kiến thức về ngôn ngữ lập trình Nodejs - Reactjs, và hệ quản trị cơ sở dữ liệu MongoDB
Chương 2: Phân tích thiết kế hệ thống
Phân tích các tác nhân và chức năng của từng tác nhân 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ảng cho từng use-case hệ thống
Chương 3: Xây dựng chương trình
Xây dựng giao diện và chức năng của hệ thống
Kết luận và Hướng phát triể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
Trang 20Xây dựng website thuê phòng trọ
1.1 Giới thiệu về Nodejs
Chương 1 CƠ SỞ LÝ THUYẾT
Hình 1.1: Nodejs Node.js là một nền tảng phát triển dựa trên JavaScript và được xây dựng trên trình duyệt Chrome's V8 JavaScript runtime Được tạo ra bởi Ryan Dahl và ra mắt lần đầu vào năm 2009, Node.js đã nhanh chóng trở thành một trong những công cụ phổ biến nhất cho việc xây dựng ứng dụng web và server-side
V8 engine là một JavaScript engine mã nguồn mở chạy trên các trình duyệt Chrome Nó được thiết kế tập trung vào hiệu năng và chịu trách nhiệm cho việc dịch mã JavaScript sang mã máy để máy tính có thể hiểu và chạy được Nhưng bạn cũng nên tránh nhầm lẫn rằng Node chạy trên trình duyệt Cha đẻ của Node dựa trên V8 engine, cải tiến một số tính năng chẳng hạn file system API, thư viện HTTP và một số phương thức liên quan đến hệ điều hành Điều đó có nghĩa là Node.js là một chương trình giúp ta có thể chạy code JavaScript trên máy tính, nói cách khác nó là một JavaScript runtime
Trang 21Xây dựng website thuê phòng trọ
Ưu điểm
- Khả năng xử lý không đồng bộ (Asynchronous): Node.js sử dụng mô hình xử lý không đồng bộ, giúp tối ưu hiệu suất của ứng dụng bằng cách cho phép xử lý hàng loạt yêu cầu mà không phải chờ đợi kết quả của từng yêu cầu trước - Hiệu suất cao: Nhờ sử dụng động cơ V8 của Google Chrome, Node.js có hiệu
suất cao và khả năng xử lý tốt các yêu cầu đồng thời Điều này làm cho nó thích hợp cho ứng dụng có yêu cầu cao về xử lý và đáp ứng
- Mô hình sự kiện (Event-driven): Sự kiện là trung tâm của Node.js, giúp quản lý các hoạt động và xử lý sự kiện một cách hiệu quả Điều này làm cho việc lập trình trở nên linh hoạt và dễ quản lý
- Cộng đồng lớn và hỗ trợ đa nền tảng: Node.js được hỗ trợ mạnh mẽ từ cộng đồng lập trình viên trên toàn thế giới, điều này đồng nghĩa với việc có nhiều thư viện, module và tài liệu hữu ích Node.js cũng có thể chạy trên nhiều hệ điều hành, giúp tối ưu hóa sự linh hoạt
- Dễ học và triển khai: Với việc sử dụng JavaScript, một ngôn ngữ lập trình phổ biến, nhà phát triển web đã quen thuộc với Node.js Điều này giúp giảm thời gian học và giúp ứng dụng dễ dàng triển khai
- Môi trường mô-đun (Module ecosystem): Node.js có một hệ sinh thái mô-đun mạnh mẽ, với hàng nghìn thư viện được phát triển và sẵn sàng sử dụng từ cộng đồng
- Phát triển ứng dụng real-time: Node.js làm cho việc xây dựng ứng dụng real- time, như chat và trò chơi trực tuyến, trở nên thuận tiện nhờ vào khả năng xử lý sự kiện và không đồng bộ
Nhược điểm
- Nodejs gây hao tốn tài nguyên và thời gian Nodejs được viết bằng C++ và JavaScript nên khi xử lý cần phải trải qua một quá trình biên dịch Nếu bạn cần xử lý những ứng dụng tốn tài nguyên CPU thì không nên sử dụng Nodejs - Nodejs so với các ngôn ngữ khác như PHP, Ruby và Python sẽ không có sự
chênh lệch quá nhiều Nodejs có thể sẽ phù hợp với việc phát triển ứng dụng
Trang 22Xây dựng website thuê phòng trọ
mới Tuy nhiên khi xây dựng và triển khai dự án quan trọng thì Nodejs không phải là sự lựa chọn hoàn hảo nhất
1.2 Giới thiệu về React
Hình 1.2: ReactJS React (còn được gọi là Reactjs hay React.js) là một Thư viện javascript được tạo ra bởi sự cộng tác giữa Facebook và Instagram Nó cho phép những nhà phát triển web tạo ra giao diện người dùng nhanh chóng Phần Views của Reactjs thường được hiển thị bằng việc chủ yếu dung các component mà chứa các component cụ thể hoặc các thẻ HTML Một trong những đặc trưng duy nhất của Reactjs là việc render dữ liệu không những có thể thực hiện ở tầng server mà còn ở tầng client
Nó cũng sử dụng khái niệm là Virtual DOM (DOM ảo) Virtual DOM tạo ra bản cache cấu trúc dữ liệu của ứng dụng trên bộ nhớ Sau đó, ở mỗi vòng lặp, nó liệt kê những thay đổi và sau đó là cập nhật lại sự thay đổi trên DOM của trình duyệt một cách hiệu quả Điều này cho phép ta viết các đoạn code như thể toàn bộ trang được render lại dù thực tế là Reactjs chỉ render những component hay subcomponent nào thực sự thay đổi
Ưu điểm
- Reactjs cực kì hiệu quả: Reactjs tạo ra cho chính nó DOM ảo – nơi mà các component thực sự tồn tại trên đó Điều này sẽ giúp cải thiện hiệu suất rất nhiều Reactjs cũng tính toán những thay đổi nào cần cập nhật len DOM và chỉ
Trang 23Xây dựng website thuê phòng trọ
thực hiện chúng Điều này giúp Reactjs tránh những thao tác cần trên DOM mà nhiều chi phí
- Reactjs giúp việc viết các đoạn code JS dễ dàng hơn: Nó dung cú pháp đặc biệt là JSX (Javascript mở rộng) cho phép ta trộn giữa code HTML và Javascript Ta có thể them vào các đoạn HTML vào trong hàm render mà không cần phải nối chuỗi Đây là đặc tính thú vị của Reactjs Nó sẽ chuyển đổi các đoạn HTML thành các hàm khởi tạo đối tượng HTML bằng bộ biến đổi JSX
- Nó có nhiều công cụ phát triển: Khi bạn bắt đầu Reactjs, đừng quên cài đặt ứng dụng mở rộng của Chrome dành cho Reactjs Nó giúp bạn debug code dễ dàng hơn Sau khi bạn cài đặt ứng dụng này, bạn sẽ có cái nhìn trực tiếp vào virtual DOM như thể bạn đang xem cây DOM thông thường
- Render tầng server: Một trong những vấn đề với các ứng dụng đơn trang là tối ưu SEO và thời gian tải trang Nếu tất cả việc xây dựng và hiển thị trang đều thực hiện ở client, thì người dùng sẽ phải chờ cho trang được khởi tạo và hiển thị lên Điều này thực tế là chậm Hoặc nếu giả sử người dùng vô hiệu hóa Javascript thì sao? Reactjs là một thư viện component, nó có thể vừa render ở ngoài trình duyệt sử dụng DOM và cũng có thể render bằng các chuỗi HTML mà server trả về
- Làm việc với vấn đề test giao diện: Nó cực kì dễ để viết các test case giao diện vì virtual DOM được cài đặt hoàn toàn bằng JS
- Hiệu năng cao đối với các ứng dụng có dữ liệu thay đổi liên tục, dễ dàng cho bảo trì và sửa lỗi
Nhược điểm
- Reactjs chỉ phục vụ cho tầng View React chỉ là View Library nó không phải là một MVC framework như những framework khác Đây chỉ là thư viện của Facebook giúp render ra phần view Vì thế React sẽ không có phần Model và Controller, mà phải kết hợp với các thư viện khác React cũng sẽ không có 2- way binding hay là Ajax
Trang 24Xây dựng website thuê phòng trọ
- Tích hợp Reactjs vào các framework MVC truyền thống yêu cầu cần phải cấu hình lại
- React khá nặng nếu so với các framework khác React có kích thước tương tương với Angular (Khoảng 35kb so với 39kb của Angular) Trong khi đó Angular là một framework hoàn chỉnh
- Khó tiếp cận cho người mới học Web
1.3 Giới thiệu về Visual Studio Code
Hình 1.3: Visual Studio Code Visual Studio Code (VS Code) là một trình soạn thảo mã nguồn nhỏ gọn và mạnh mẽ, phát triển bởi Microsoft Được thiết kế để đáp ứng nhu cầu lập trình của cộng đồng đa dạng, VS Code mang đến cho nhà phát triển một môi trường làm việc hiện đại và linh hoạt
Là một trình biên tập lập trình code miễn phí dành cho Windows, Linux và macOS, Visual Studio Code được phát triển bởi Microsoft Nó được xem là một sự kết hợp hoàn hảo giữa IDE và Code Editor
Visual Studio Code hỗ trợ chức năng debug, đi kèm với Git, có syntax highlighting, tự hoàn thành mã thông minh, snippets, và cải tiến mã nguồn Nhờ tính năng tùy chỉnh, Visual Studio Code cũng cho phép người dùng thay đổi theme, phím tắt, và các tùy chọn khác
Trang 25Xây dựng website thuê phòng trọ
Một số tính năng nổi bật
- Hỗ trợ nhiều ngôn ngữ lập trình: VSCode hỗ trợ nhiều ngôn ngữ lập trình phổ biến như JavaScript, TypeScript, Python, Java, C++, và nhiều ngôn ngữ khác Điều này làm cho nó trở thành một IDE đa nhiệm và đa ngôn ngữ
- Hỗ trợ Git tích hợp: VSCode tích hợp sẵn công cụ quản lý phiên bản Git, giúp bạn theo dõi thay đổi mã nguồn, thực hiện commit, và quản lý nhánh dễ dàng - Hiển thị IntelliSense: VSCode cung cấp IntelliSense, một tính năng tự động
hoàn thành mã nguồn, giúp bạn nhanh chóng và dễ dàng gõ mã và truy cập vào các phương thức và biến
- Mở rộng và Cộng đồng: VSCode có hệ thống mở rộng mạnh mẽ, cho phép bạn cài đặt các tiện ích mở rộng (extensions) từ thư viện lớn trên Visual Studio Code Marketplace Cộng đồng người dùng cũng đóng góp nhiều extensions hữu ích
- Gỡ lỗi (Debugging): VSCode hỗ trợ chức năng gỡ lỗi cho nhiều ngôn ngữ lập trình, với khả năng thiết lập các điểm dừng (breakpoints), xem biến, và theo dõi thực thi chương trình
- Terminal tích hợp: VSCode tích hợp một terminal trực tiếp trong giao diện người dùng, giúp bạn thực hiện các lệnh hệ thống và quản lý dự án mà không cần chuyển đến cửa sổ terminal riêng biệt
- Theme và tùy chỉnh: VSCode cho phép bạn tùy chỉnh giao diện và theme theo ý muốn của mình Nó cũng hỗ trợ nhiều theme màu sắc phổ biến
- Integrations và Snippets: Hỗ trợ nhiều tích hợp và snippets, giúp tăng tốc quá trình phát triển bằng cách cung cấp các đoạn mã mẫu và tích hợp với các dịch vụ phổ biến
- Tích hợp với các công cụ môi trường phát triển: VSCode có thể tích hợp với nhiều công cụ và môi trường phát triển khác nhau, tạo điều kiện thuận lợi cho quá trình phát triển ứng dụng
Trang 26Xây dựng website thuê phòng trọ
1.4 Giới thiệu hệ quản trị cơ sở dữ liệu NoSql MongoDB
Hình 1.4: Hệ quản trị CSDL NoSQL MongoDB 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 MongoDB được phát triển bởi MongoDB Inc và được cấp phép theo Giấy phép Công cộng phía Máy chủ (SSPL)
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
Ưu điểm
- MongoDB có nhiều ưu điểm hơn so với những loại khác Ưu điểm đầu tiên của MongoDB chính là sử dụng lưu trữ dữ liệu dưới dạng Document JSON Nhờ có nó nên mỗi một collection đều sẽ có các kích cỡ và các Document khác nhau Sự linh hoạt trong việc lưu trữ dữ liệu của MongoDB là rất hữu dụng Chính vì vậy, các bạn hoàn toàn có thể sử dụng MongoDB để Insert dữ liệu bất cứ lúc nào
Trang 27Xây dựng website thuê phòng trọ
- Ưu điểm thứ hai của MongoDB đó chính là nó không có sự ràng buộc lẫn nhau trong dữ liệu Các bạn sẽ không cần phải join như trong RDBMS Nên khi sử dụng insert hay xóa, update sẽ không cần tốn nhiều thời gian Các bạn cũng không cần phải chờ xem nó có thỏa mãn các ràng buộc dữ liệu hay không để tiến hành insert
- Sử dụng MongoDB các bạn có thể mở rộng dễ dàng hơn Trong nền tảng này 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 bạn muốn mở rộng một hệ thống, các bạn chỉ cần thêm một node vào cluster Đây chính là sự nhanh nhạy khi dùng MongoDB
- Trường dữ liệu “_id” luôn tự động đánh chỉ mục index ở MongoDB để tốc độ truy vấn thông tin nhanh nhất Khi có một truy vấn dữ liệu, bản ghi của cached sẽ cho lên bộ nhớ Ram Từ đó phục vụ lần lượt các truy vấn của người dùng, diễn ra nhanh hơn mà không cần đọc từ ổ cứng
- Ngoài ra, sử dụng MongoDB còn hỗ trợ hiệu năng cao cho người dùng Ví dụ như tốc độ truy vấn find, update, insert hay delete Tất cả đều được tối ưu nhanh hơn so với các hệ thống quản trị dữ liệu quan hệ khác Từ những thử nghiệm cho thấy, tốc độ của MongoDb có thể nhanh gấp 100 lần so với MySQL
Nhược điểm
- Mặc dù MongoDB có nhiều ưu điểm như vậy, tuy nhiên nó vẫn chưa phải hoàn hảo Vẫn sẽ có những nhược điểm nhất định khi sử dụng Đây cũng chính là lý do chúng tôi tổng hợp để các bạn hiểu hơn về MongoDB
- Ưu điểm đôi khi là nhược điểm Điều này thực sự quá bất ngờ phải không nào? Mặc dù ưu điểm khi sử dụng MongoDB đó là không có quá nhiều ràng buộc như trong RDBMS Tuy nhiên, chính điều này khiến cho nhiều người dùng lo lắng Khi thao tác trên MongoDB các bạn cần phải cẩn thận hơn vì không có sự ràng buộc này
- MongoDB bị nhiều người dùng đánh giá là tốn bộ nhớ do lưu dữ liệu dưới dạng key – value, collection Nền tảng này các dữ liệu chỉ khác nhau về value,
Trang 28Xây dựng website thuê phòng trọ
do đó, key vẫn sẽ bị lặp lại nhiều lần Vì không hỗ trợ Join nên dễ dẫn đến dư thừa dữ liệu
- Ngoài ra, nhược điểm khi sử dụng MongoDB chính là nguy cơ gây mất dữ liệu khi chưa hoàn thành bản lưu Điều này hoàn toàn có thể xảy ra bởi quá trình insert hay update, remove bản ghi của MongoDB không cập nhật ngay xuống ổ cứng Phải mất khoảng 60s nền tảng này mới thực hiện ghi toàn bộ dữ liệu thay đổi từ Ram vào ổ cứng Nếu có sự cố như mất điện xảy ra trong trường hợp này, thì các bạn có thể bị mất dữ liệu
Trang 29Xây dựng website thuê phòng trọ
Chương 2 PHÂN TÍCH THIẾT KẾ HỆ THỐNG 2.1 Khảo sát yêu cầu
Hoạt động nghiệp vụ
Hình 2.1: Sơ đồ nghiệp vụ công việc Website
Liệt kê người dùng và yêu cầu
• Cho phép khách thành viên đăng ký và bảo mật thông tin
• Xem, cập nhật thông tin cá nhân (tài khoản)
• Giao diện dễ nhìn, dễ sử dụng và đáp ứng được đầy đủ các yêu cầu của người dùng
• Luôn cập nhật thông tin mới nhất về các bài đăng
• Đảm bảo việc tìm kiếm diễn ra nhanh chóng, chính xác theo từng chi tiết khách thành viên yêu cầu
Trang 30Xây dựng website thuê phòng trọ
• Thông tin về một phòng trọ được cho thuê phải rõ từng chi tiết, kèm theo các hình ảnh minh họa và xác minh
• Việc đặt phòng không gặp lỗi
• Hình thức thanh toán đảm bảo độ chính xác
• Cho phép khách thành viên được đánh giá, vote sao và xem bình luận
Đảm bảo được các yêu cầu của khách hàng, ngoài ra còn cần phải đảm bảo các yêu cầu của một quản trị viên:
• Cập nhật thông tin bài đăng thường xuyên
• Quản lý việc đăng bài
• Thống kê chi tiết và chính xác
o Chủ trọ đăng bài nhiều nhất
o Số lượng người đăng ký
o Các bài đăng đã được duyệt
• Quản lý chung và chặt chẽ thông tin khách thành viên và chủ trọ
• Khóa các tài khoản vi phạm hoặc có thể xóa vĩnh viễn
Ngoài các yêu cầu giống như khách thành viên, thì hệ thống còn cần phải đảm bảo các yêu cầu cho chủ trọ như:
• Việc đăng bài không gặp vấn đề và được duyệt 1 cách nhanh nhất
• Cho phép cập nhật lại các thông tin về bài đăng
• Cho phép duyệt đặt phòng của khách thành viên đã đặt phòng
• Cho phép xóa bài đăng và xóa thông tin đặt phòng
Trang 31Xây dựng website thuê phòng trọ
• Khách vãng lai
• Chủ trọ
• Yêu cầu:
• Quản trị viên
• Duyệt bài đăng và xem thông tin bài đăng
• Khóa tài khoản và xóa tài khoản vi phạm
• Thống kê top chủ trọ đăng bài nhiều nhất
• Phân quyền
• Khách thành viên
• Đăng nhập / đăng xuất
• Cập nhập thông tin cá nhân
• Tìm kiếm bài đăng kế thừa từ usecase “Khách vãng lai”
• Xem chi tiết bài đăng
• Bình luận bài đăng khi đã từng thuê phòng trọ hoặc có nhu cầu hỏi về vấn đề liên quan
• Bình luận bài đăng
• Đặt phòng => Cần đặt cọc trực tiếp hoặc thông qua momo do hệ thống quản lý, nếu trực tiếp thì chủ nhà phải tự chuyển đổi trạng thái : Còn trống – Đang đặt – Đã thuê
• Khách vãng lai
• Tìm kiếm phòng trọ theo khu vực, giá phòng, loại phòng tại Đà Nẵng
• Chủ trọ
• Đăng nhập / đăng xuất
• Cập nhật thông tin cá nhân
• Đăng bài , mỗi phòng trọ là một bài đăng, nếu đều là trọ giống nhau thì chỉ cần 1 bài đăng cho tất cả và thường xuyên cập nhập số lượng phòng : Còn trống – Đang đặt – Đã thuê
• Cập nhật thông tin bài đăng
• Xóa bài đăng
• Xóa thông tin đặt phòng