Build a website to post and search for accommodation

 Building a website that allows lessors to register with the system, post rental information, manage rental information, and communicate with tenants.. of… 2022 INSTRUCTOR''''S COMMENT SHE

OVERVIEW OF THE TOPIC

The urgency of the subject

As Vietnam continues to grow and integrate globally, new professions are emerging rapidly, and cities like Ho Chi Minh City are experiencing an influx of human resources, driving a high demand for accommodation and office spaces The traditional methods of finding housing, such as relying on brokers and flyer ads, have proven to be ineffective and unappealing In response to this need, designing a website for advertising and searching for accommodation has become a pressing concern, aiming to connect renters with suitable properties and facilitate convenient communication with landlords.

Purpose of the topic

The topic of Building a website to post news and find accommodation sets out the key issues about the goals that research students need to accomplish, including:

When tackling the initial problem, students must conduct in-depth research to grasp the fundamentals and practical applications of the chosen technology, MERN Stack, and its complementary tools This involves exploring additional libraries, source code modules, and templates that can enhance the website development process and positively impact user experience Furthermore, understanding the hosting process is crucial for successfully deploying their products online.

The practical application of knowledge is a crucial aspect of the topic, as it involves building a specific product, such as a website for posting and searching for accommodation A key requirement for the finished product is that it must be a functional web application that caters to the needs of both landlords and tenants Furthermore, the product should be designed with scalability in mind, allowing for future upgrades and the addition of new features to enhance its overall functionality.

Research scope

The website is aimed at users who are looking for rooms, premises, offices for rent Besides, the website is also for landlords to access tenants quickly

Research Methods

- Learn and learn about the theory and technology of React, Express, NodeJs, MongoDB through online documentation, internet courses

- Refer to job skills at recruitment sites such as Mogi, Phongtro123

Mogi.vn is a comprehensive electronic information site where users can search for real estate information in Vietnam, while brokers can easily advertise their properties The platform provides in-depth analysis, including assessing the advantages and disadvantages of properties, analyzing their potential, and evaluating selling prices Additionally, users can engage with the online community through the "What does the market say?" section, where they can consult and exchange opinions, further enhancing their real estate search experience.

Link website: https://mogi.vn/

- Update real estate information continuously

Phongtro123.com is a dedicated online platform catering to the specific needs of tenants and individuals seeking rental accommodations, offering a range of options including rooms, apartments, and entire houses The website's categories and features are thoughtfully designed to provide users with a seamless and supportive experience, streamlining their search for the perfect rental property.

In addition to postings about room rental, room renters can post information about finding roommates to find people in need to share costs

Link website: https://phongtro123.com/

- Update real estate information continuously

Expected results achieved

To bridge the gap between IT businesses and job seekers, a cutting-edge website was developed utilizing the MERN stack technology, a powerful combination of MongoDB, Express, React, and Node.js By leveraging this robust tech stack, the platform effectively connects candidates with relevant job openings in the information technology sector The frontend of the website is seamlessly deployed on Vercel, ensuring fast and efficient content delivery, while the backend is deployed on Heroku, providing a scalable and reliable infrastructure for smooth operations This strategic deployment enables the website to provide a seamless user experience, facilitating effortless connections between businesses and IT professionals.

- Chat with the landlord's house

- Sign up to be a lessor

- Register for a membership package of the system

- Sign up for the system's newsletter service package

 Grant account for system manager

THEORETICAL BASIS

Architectural model MERN Stack

A web application's foundation is typically built using a combination of multiple technologies, collectively known as a "stack." The MERN stack, comprising MongoDB, Express, React, and NodeJS, is a popular choice for building comprehensive web applications that encompass frontend, backend, business logic, and database functionalities By leveraging the MERN stack, developers can create a complete web application, streamlining the development process and ensuring a seamless user experience.

Figure 2.1 Overview of the MERN Stack

MERN includes 4 technologies that are MongoDB, Express, React, NodeJS:

MongoDB is a leading open-source, document-oriented NoSQL database management system, offering high performance, availability, and scalability Unlike relational databases, MongoDB is a schema-less database, providing faster access and scalability, although with lower transaction security It stores data in the form of documents, consisting of field and value pairs, with a format similar to JSON, allowing for flexible and efficient data management.

7 be simple values, arrays, or other documents MongoDB uses BSON to store data into document

ExpressJS is a crucial middleware framework in the MERN stack, bridging the gap between React and Node to facilitate seamless server-side application development As a NodeJS framework, ExpressJS empowers developers to build robust web and mobile applications by providing a multitude of shorthand methods for writing NodeJS-powered functionality By leveraging ExpressJS, developers can efficiently create server-side applications, unlocking the full potential of their web or mobile projects.

React is a widely-used, open-source JavaScript front-end library developed by Facebook, initially released in 2011, for building dynamic user interfaces on the web Its primary purpose is to provide a fast, simple, and extensible solution for creating reusable UI components, allowing developers to craft large web applications that update data seamlessly without requiring a full page reload As a key component in the MVC pattern, React focuses solely on the view layer, making it compatible with other JavaScript libraries and frameworks, such as AngularJS, for a more comprehensive development experience.

Node.js is a cross-platform, open-source development platform that enables the creation of JavaScript-based web applications Built on top of a server-side runtime framework written in C++, Node.js allows developers to run JavaScript on a server, unlike traditional client-side JavaScript execution As a result, Node.js has emerged as a popular framework for building web applications, offering a standalone platform for developers to leverage the power of JavaScript on the server-side.

MongoDB is a widely-used, open-source NoSQL database, leveraging C++ as its programming language As a cross-platform database, MongoDB operates on the principles of collections and documents, delivering high performance, high availability, and seamless scalability With millions of users worldwide, MongoDB has established itself as a leading NoSQL database solution, offering unparalleled flexibility and reliability.

The database is a physical container for collections Each database gets its own set of files on the file system Each MongoDB Server can have multiple databases

In MongoDB, a collection is a group of documents equivalent to a table in a relational database management system (RDBMS), existing within a single database Unlike traditional database systems, collections lack relationship constraints, allowing for fast access and flexibility in storing diverse data categories Each collection can contain documents with varying fields, and while documents within a collection share a similar purpose, they can have different structures and data types, thanks to MongoDB's dynamic schema This means that documents in the same collection do not require identical fields or structures, and common fields can hold different data types, providing a flexible and adaptable data storage solution.

In MongoDB, a document is a collection of key-value pairs, similar in structure to JSON data, allowing for flexible data storage Notably, documents in the same collection can have a dynamic schema, meaning they don't require a uniform set of fields or structure Additionally, common fields within a collection's documents can hold varying data types, further enhancing the schema's adaptability.

- The advantages of MongoDB over RDBMS:

 Less Schema: MongoDB is a document-based database where a collection holds different documents The number of fields, content and size of this document may differ from another document

 The structure of an object is obvious

 Deeper query capabilities MongoDB supports dynamic queries on documents by using a document-based query language that is as powerful as SQL

 MongoDB is easy to extend

 The conversion/mapping of application objects to database objects is not necessary

 Use internal memory to store the work piece, for faster data access

 Document-Oriented Repository: Data stored in JSON-style documents

Express.js, also referred to as Expressjs or Express js, is a free and open-source framework designed for Node.js, enabling developers to efficiently design and build web applications with simplicity and speed.

Building web applications and APIs becomes significantly simpler for programmers and developers with Express.js, as it only requires proficiency in the JavaScript programming language As a Node.js framework, Express.js also provides a substantial amount of pre-written code, allowing developers to work more efficiently and focus on customizing their projects.

Expressjs empowers developers to build versatile web applications, including single-page, multi-page, and hybrid apps, with ease Its lightweight nature facilitates the organization of web applications into a structured MVC architecture Proficiency in JavaScript and HTML is a prerequisite to effectively utilize Expressjs and unlock its full potential in web development.

Express.js is a key component of the MEAN software stack, a technology that streamlines the management of web applications By leveraging its JavaScript library, developers can build web applications more efficiently and rapidly Additionally, Express.js is utilized to augment the functionality of Node.js, further enhancing the development process.

Building an effective API without Express.js would require navigating a multitude of complex programming steps Fortunately, Express.js simplifies the process, making Node.js development more accessible and efficient By leveraging Express.js, developers can tap into a wealth of additional features, streamlining their workflow and enhancing the overall API-building experience.

Figure 2.2 Express.js is an open source framework

As one of the most widely used programming languages today, Javascript is renowned for its ease of readability and universal support, making it an ideal choice for web development Given that Express.js is built on top of Javascript, developers who are already familiar with Javascript can seamlessly transition to programming with Express.js Furthermore, its user-friendly nature also makes Express.js an accessible framework for beginners in the field of web development, allowing them to quickly get started with building robust web applications.

Express.js significantly accelerates the website development process, reducing coding time by up to half while maintaining efficiency This framework not only saves time but also alleviates development pressure through its array of features Additionally, Express.js provides a robust middleware system that streamlines decision-making, enabling accurate and responsive handling of customer requests, ultimately leading to faster and more efficient web application development.

MODELING REQUIREMENTS

Requirement modeling

2 Renter - Search for rental information

3 The lease - Register to become a lessor

General Usecase Diagram

Figure 3.1 General Usecase Diagram uc use case tong quat

Dang nhap Xem trang chu

Tim kiem tin cho thue

Xem chi tiet tin cho thue

Danh gia nha cho thue

Dang ky tro thanh nguoi cho thue

Quan ly tin cho thue

Mua goi dich v u dang tin

Quan ly giao dich thanh toan

Cap tai khoan quan ly he thong Xem thong ke

Usecase specification

Figure 3.2 Usecase diagram for account registration Describe the usecase schema for account registration

Describe For users who do not have an account who want to log in to the site

Anyone who does not have an account (Guest)

Pre-condition Must have gmail

Steps to take (1) User opens the website

(3) Go to display the registration page and the user enters the necessary information

(4) Then press the “Register” button to complete the registration 3.3.2 Login usecase schema uc Dang ky tai khoan

Guest Dang ky tai khoan uc Dang nhap

Figure 3.3 Login Usecase Schema Describe the login usecase schema

Describe For users, admin login to the site

Pre-condition Must know the username and password of the account

(3) Go to show login page and user enter usersname/email and password

(4) Then press the 'Login' button to log in

Upon successful login, users and admins will be greeted with a confirmation message and seamlessly redirected to the homepage, while incorrect login attempts will prompt an error report, allowing users to re-enter their login credentials.

Figure 3.4 Usecase schema forgot password Description of usecase forgot password

Describe For users to get a new password uc Quen mat khau guest

(3) Go to display login page, select “Forgot Password”

(4) Go to the authentication page, enter gmail

(5) If successful, you will be redirected to the email check notification page

Figure 3.5 Usecase schema see homepage Description of usecase see homepage

Describe For guests, tenants to view featured posts, perform a search function on the homepage

Pre-condition uc Xem trang chu

Steps to take (1) User opens website : https://weeta-housing.vercel.app/

3.3.5 Usecase diagram to search for rooms for rent

Figure 3.6 Usecase diagram to search for rooms for rent

Description of usecase search for rooms for rent

Describe For guest tenants looking for rooms to rent

(3) Navigate to display rental listings page by search keyword

(5) It is possible to filter rental information by factors: price, area 3.3.6 Usecase diagram to view rental details uc Tim kiem phong cho thue

Tim kiem phong cho thue

Nguoi thue nha uc Xem chi tiet tin cho thue

Xem chi tiet tin cho thue

Figure 3.7 Usecase diagram to view rental details Description of usecase see details for rental information

Describe For guest tenants to see rental details

(3) Go to the page that displays the listing page for rentals

(4) Select the rental you want to see details

(5) Go to rental details page

3.3.7 Usecase diagram to evaluate rental rooms

Figure 3.8 Usecase diagram to evaluate rental rooms

Description of rental room evaluation usecase

Describe Intended for tenants rate the room for rent

Pre-condition Logged uc Rev iew phong cho thue

Rev iew phong cho thue

(4) Select a rental to be evaluated

(5) Enter the review text and select “Submit”

3.3.8 Usecase diagram to store rental information

Figure 3.9 Usecase diagram to store rental information

Description of usecase to save rental information

Describe Intended for Tenants save rental information

(4) Select the "heart" image in the listing to save uc Luu tin cho thue

(5) Review saved rentals in the personal information section

3.3.9 Usecase schema to register as a tenant

Figure 3.10 Usecase schema to register as a tenant Description of usecase registration to become a lessor

Describe Intended for Registered users become lessors

(3) Go to page showing phone number verification page

(4) Enter phone number, get OTP

(5) Go to the page to enter the OTP code, enter the OTP code, select

(6) If the authentication is successful, go back to the home page, if the authentication fails, the validation failed message uc Dang ky tro thanh nguoi cho thue

Dang ky tro thanh nguoi cho thue

3.3.10 Usecase diagram for managing rental information

Figure 3.11 Usecase diagram for managing rental information

Description of rental management usecase

Describe Intended for the lessor manages the rental information

Steps to take  Create a rental message

(1) User opens website : https://weeta-housing.vercel.app/

(3) Enter the necessary information for a post

(4) Choose service package for posting and payment

(5) Go to the payment page, enter your bank card

(6) If the payment is successful, then switch to the post management page, if not successful, the message "payment failed, posting failed"

 Edit rental information uc Quan ly tin cho thue

Chinh sua tin cho thue

Xoa tin cho thue ôextendằ ôextendằ ôextendằ ôextendằ

(2) Select the rental that needs to be edited , display the rental that needs to be edited

(4) Enter the information to edit and select “Save”

(2) Select the listing to hide, show the listing to hide

(4) Select “Confirm” to hide rental information

(2) Go to the listing manager, select the listing you want to delete

(4) Select “Confirm” to delete the listing

3.3.11 Usecase diagram of transaction management

Figure 3.12 Usecase diagram of transaction management

Description of transaction management usecase

Describe Intended for the lessor manages the service payment transaction

(3) Go to the page displaying personal information

(5) Switch to the transaction history page for membership packages and service packages uc Quan ly giao dich

3.3.12 Usecase diagram of account management

Figure 3.13 Usecase diagram of account management

Description of account management usecase

Describe Users in their account management system: Change password, view account information, log out, edit account

Tenant, lessor, system manager, system administrator

Steps to take  View personal information

(3) Switch to personal information page uc Quan ly tai khoan

Nguoi thue nha Nguoi cho thue

Xem thong tin ca nhan

Chinh sua thong tin ca nhan

Doi mat khau Dang xuat ôextendằ ôextendằ ôextendằ ôextendằ

(3) Enter the information to edit and select “Save”

(4) Enter current password, new password select “Confirm” to change password

3.3.13 Usecase diagram to buy membership package

Figure 3.14 Usecase diagram to buy membership package uc Mua goi dich v u dang tin

Mua goi dich v u dang tin

Description of usecase to buy membership package

Describe Intended for the lessor buys a membership package to add the number of posts in 1 month

(3) Go to the page displaying information about membership packages

(4) Select the membership package you want to buy and select

(5) Go to the payment page, enter your bank card and pay

(6) If the payment is successful, you will be redirected to the paid information page

Describe Intended for lessor and tenant communicate with each other

The lessor , the tenant uc Nhan tin

(2) Select the listing of the lessor you want to contact

(4) Switch to the message page

Figure 3.16 Usecase diagram view statistics

Description of usecase view statistics

Describe Intended for Manage the revenue and rental statistics system over time

Steps to take (1) User opens website : https://weeta-admin.vercel.app/

(2) Select “ Dashboard” uc Xem thong ke

3.3.16 Usecase diagram of revenue management

Figure 3.17 Usecase diagram of revenue management

Description of revenue management usecase

Describe Intended for Manage revenue management system

(3) Go to the page showing the lessor's transaction history when paying for the packages uc Quan ly doanh thu

Xem doanh thu goi thanh v ien

Xem doanh thu goi dich v u dang tin ôextendằ ôextendằ

3.3.17 Usecase diagram for managing rental information

Figure 3.18 Usecase diagram for rental information management

Description of rental management usecase

Describe For management system to manage all listings: view listings, approve, reject

Steps to take  View rental listings

(1) Website management : https://weeta-admin.vercel.app/

(4) Switch to the page displaying the list of rentals

(4) Select the listing to be approved/rejected uc Quan ly tin cho thue

Xem danh sach tin cho thue

Phe duyet tin cho thue

Tu choi tin cho thue ôextendằ ôextendằ ôextendằ

(5) If approved, select “Approve”, if rejected, select “Reject”

3.3.18 Usecase diagram of tenant management

Figure 3.19 Usecase diagram of tenant management

Description of tenant management usecase

Describe For management of the entire tenant management system: view the list of tenants, delete tenants, approve/reject lessors

Steps to take  See list of tenants

(4) Switch to the page displaying the list of tenants

 Approve/Reject uc Quan ly nguoi cho thue

Quan ly nguoi cho thue

Phe duyet tai khoan nguoi cho thue

Tu choi tai khoan nguoi cho thue

Xem danh sach nguoi cho thue ôextendằ ôextendằ ôextendằ ôextendằ

(4) Select the lessor to approve/reject

(5) If approved, select “Approve”, if rejected, select “Reject”

(4) Select “Delete” the lessor to delete, select “Confirm”

Figure 3.20 User management usecase diagram

Description of user management usecase

Describe For management of the entire tenant management system: view the list of tenants, block tenants uc Quan ly nguoi dung

Xem danh sach nguoi dung

Chan nguoi dung ôextendằ ôextendằ

Steps to take  See list of tenants

(4) Switch to the user list display page

(3) Select “Block” the tenant to block and select “Confirm”

3.3.20 System management account-level usecase diagram

Figure 3.21 System management account-level usecase diagram Description of the system management account level usecase

Describe Intended for System administration account level revenue management

(3) Enter the account information, select “Save”

Figure 3.22 Usecase diagram view statistics uc Cap tai khoan quan ly he thong

Cap tai khoan quan ly he thong uc Xem thong ke

Description of usecase view statistics

Describe Intended for System administrators view user statistics

(3) Switch to the page showing the number of users in each timeline

Sequence Diagram

3.4.1 Sequence diagram of account registration

Figure 3.23 Sequence diagram of account registration sd Dang ky tai khoan

Man hinh dang ki Auth

[Thong tin dang ky hop le]

[Thong tin dang ky khong hop le]

Kiem tra thong tin tai khoan (data) Nhap thong tin tai khoan()

Thong bao tao tai khoan khong thanh cong()

Gui thong tin tai khoan (data)

Tra ve thong bao loi()

Thong bao tao tai khoan thanh cong()

Figure 3.24 Log in sequence diagram sd Dang nhap

Auth Account Man hinh trang chu alt

[Thong tin khong hop le]

Thong bao dang nhap thanh cong()

Chuyen huong sang trang chu() Thong bao thanh cong()

Tra ve thong tin tai khoan()

Kiem tra thong tin dang nhap()

Nhap thong tin dang nhap()

Gui thong tin dang nhap()

Thong bao dang nhap khong thanh cong()

Figure 3.25 Sequence diagram forgot password sd Quen mat khau

Man hinh quen mat khau

Auth Account Man hinh doi mat khau

Man hinh dang nhap alt

[Email khong hop le] alt

[Doi mat khau thanh cong]

[Doi mat khau that bai]

Kiem tra thong tin() kiem tra email(email)

Thong bao doi mat khau that bai()

Gui thong tin mat khau()

Thong bao that bai() Thong bao doi mat khau thanh cong()

Gui email xac thuc() Nhap email()

Thong bao doi mat khau that bai()

Thong bao thanh cong() Nhap mat khau moi(data)

Chuyen sang dang nhap() Thong bao email hop le()

Doi mat khau that bai()

Gui yeu cau quen mat khau (email)

Doi mat khau thanh cong()

3.4.4 Sequential schema for searching for rental housing

Figure 3.26 Sequential schema for searching for rental housing

3.4.5 Sequential diagram to view rental details

Figure 3.27 Sequential diagram to view rental details sd Tim kiem nha cho thue

Man hinh trang chu ArticleController Article

Hien thi danh sach tin cho thue()

Gui thong tin tim kiem (data)

Nhap tu khoa tim kiem (data)

Danh sach tin cho thue()

Danh sach tin cho thue() Tim kiem tin cho thue() sd Xem chi tiet tin cho thue

Man hinh danh sach tin cho thue

Hien thi chi tiet tin cho thue()

Chi tiet tin cho thue(data)

Chi tiet tin cho thue (data)

Truy xuat tin cho thue (id) Gui tin cho thue

3.4.6 Sequential diagram of rental listing evaluation

Figure 3.28 Sequential diagram of rental listing evaluation sd Rev iew tin cho thue

Man hinh chi tiet tin cho thue

Rev iew Controller Rev iew alt

Thong bao danh gia that bai()

Nhap danh gia nha cho thue()

Thong bao danh gia thanh cong()

Message that bai() Thong bao thanh cong()

3.4.7 Sequential schema for storing rental information

Figure 3.29 Sequential schema for storing rental information sd Luu tin cho thue

Man hinh danh sach tin cho thue

Thong bao luu tin cho thue thanh cong()

Chon tin cho thue muon luu

Gui thong tin tin cho thue (id)

Thong bao luu tin cho thue that bai()

Message thanh cong()Luu tin cho thue(id)

3.4.8 Sequence diagram for creating rental messages

Figure 3.30 Sequence diagram for creating rental messages

3.4.9 Sequential schema for editing rental information

Figure 3.31 Sequential schema for editing rental information sd Tao tin cho thue

Man hinh tao tin cho thue

[Tao tin cho thue thanh cong]

[Tao tin cho thue that bai]

Thong bao tao tin that bai() Thong bao tao tin thanh cong()

Gui thong tin nha cho thue (data)

Luu thong tin nha cho thue (data)

Message that bai() Thong bao that bai()

Thong bao thanh cong() Nhap thong tin nha cho thue() sd Chinh sua tin cho thue

Man hinh chinh sua tin cho thue

[Chinh sua tin cho thue thanh cong]

[Chinh sua tin cho thue that bai]

Nhap thong tin chinh sua()

Gui thong tin chinh sua (data)

Thong bao chinh sua tin that bai()

Cap nhat thong tin chinh sua(data)

Thong bao chinh sua tin thanh cong()

3.4.10 Sequential schema for deleting rental messages

Figure 3.32 Sequential schema for deleting rental messages sd Xoa tin cho thue

Man hinh quan ly tin cho thue

[Xoa tin cho thue thanh cong]

[Xoa tin cho thue that bai]

Chon tin cho thue can xoa()

Thong bao xoa tin thanh cong()

Message thanh cong() xoa tin cho thue(id)

Thong bao xoa tin that bai()

Gui thong tin tin cho thue

3.4.11 Sequence diagram for approval of rental information

Figure 3.33 Sequence diagram for approval of rental information sd Phe duyet tin cho thue

Man hinh phe duyet tin cho thue

Thong bao that bai() Thong bao thanh cong() Gui yeu cau phe duyet()

Hien thi phe duyet that bai()

Hien thi thong bao phe duyet thanh cong()

Message thanh cong()Cap nhat tin cho thue()Chon phe duyet()

3.4.12 Sequence diagram for account approval

Figure 3.34 Sequence diagram for account approval sd Phe duyet tai khoan

Man hinh phe duyet tai khoan

Hien thi thong bao phe duyet thanh cong()

Message that bai()Cap nhat tin cho thue()Gui yeu cau phe duyet()

Figure 3.35 Payment Sequence Diagram sd Thanh toan

PaymentController Transactions Cong thanh toan

Man hinh ket qua thanh toan alt

Gui thong tin thanh toan (data)

Cap nhat trang thai() Hien thi thanh toan thanh cong()

Thong bao that bai() Hien thi thanh toan that bai()

Gui thong tin thanh toan(data)

Gui ket qua thanh toan()

Luu thong tin thanh toan (data)

Kiem tra ket qua thanh toan()

SYSTEM ANALYSIS AND DESIGN

Database Design

4.1.2 Description of database design diagram

STT Attribute name Datatypes Meaningful

1 _id ObjectID The id value is automatically generated, has a unique value,

41 distinguishing it from other documents

2 username String User's login name

3 fullname String User's full name

5 phonenumber String User's phone number

9 Avatar String User avatar ten IdCard Array Photograph of the lessor's

11 saveArticle Array The list of rental messages has been saved twelfth Introduction String Introduce yourself

13 isEmailVerified Boolean Has the email been confirmed?

14 isActive Boolean Is it still active or not?

15 isDelete Boolean Did you delete your account?

16 isAutoApproved Boolean Can the account be automatically approved for rental information?

1 _id ObjectID The id value is automatically generated, has a unique value, distinguishing it from other documents

2 Title String Title of the rental message

3 Dictrict Number Code of the province

4 Ward Number Code of the ward

5 Street String House number, street name of the rental house

6 Image Array List of pictures of houses for rent

9 Location Object Location coordinates of the house for rent ten description String Description of utilities for rental housing

11 Lessor ObjectId Id of the poster twelfth ServicePackageId ObjectId The id of the private rental service package

13 StartDateService Datetime Service start date

14 EndDateService Datetimr Service end date

15 isPublished Boolean Posted or not?

16 isApproved Boolean Has it been approved or not?

17 isAvailable Boolean Is there any room left?

18 isDeleted Boolean Did you delete the message or not?

2 Account ObjectId Id of the lessor

3 memberPackage String Current membership package name of the lessor

4 articleTotal Number Number of articles that can be posted in 1 month

5 ArticleUsed Number Number of posts posted in 1 month

6 isNeedAutoApproved Boolean Request for approval of CCCD/ID

7 isBan Boolean Has it been blocked?

2 memberPackageName String Membership package name

3 articlePerMonth Number Number of articles that can be posted in 1 month

2 serviceName String Name of service package for rental message

2 lessorId ObjectId Id of the lessor

3 memberPackageName String Membership package name

4 transactionAmount Number Amount to be paid by the lessor

5 Status String Status of the transaction

2 lessorId ObjectId Id of the lessor

3 ServicePackageName String Service pack name

4 articleId ObjectId The id of the listing to buy the service pack

5 transactionAmount Number Amount to be paid by the lessor

6 Status String Status of the transaction

2 articleId ObjectId The id of the listing to review

6 isDeleted Boolean Has the review been deleted?

2 conversationName String Name of the conversation

3 Members Array List of users in the conversation

4 latestMessage ObjectId The last message of the conversation

5 amountOfNotSeenMess Number Number of unseen messages

2 Conversation String Id of the conversation

5 isSeen Boolean Have you watched it or not?

6 isDelete Boolean Deleted or not?

2 Name String Name of province/city

3 Code Number Code of province/city

4 Codename String Code according to the name of the province/city

6 phone_code Number Number head

Name String County/district name

Code Number Code of the district/district

Codename String Code according to the name of the district/district

Division_type String Grant short_codename Number Short name code

Name String County/district name

Code Number Code of the district/district

Codename String Code according to the name of the district/district

Division_type String Grant short_codename Number Short name code

1 _id ObjectID The id value is automatically generated, has a unique value,

47 distinguishing it from other documents

2 Title String Reason for reporting

3 Type String Type of report

UI Design

Figure 4.2 Account registration page screen Description of the account registration page screen

No Name Required Type Reference Note

1 user name True Text Username of the account

2 Full name True Text Username and surname

3 Email True Text User's email

4 Phone number True Text User's phone number

5 Password True Text Displayed with *

6 Confirm password True Text Displayed with *

7 terms of use True Switch button Agree to terms of use

When clicking switch to the account verification screen

9 Log in True Lable When click switch to login screen

Figure 4.3 Login page screen Description of login page screen

1 Email True Text Registered email

2 Password True Text Account password

3 Stay logged in False Radio button

Keep logging in for next time

4 Forgot password False Text Link

When you click, you will be redirected to the forgot password page

5 Log in True Button When clicking switch to the homepage

Facebook True Button When clicking switch to the homepage

Google True Button When clicking switch to the homepage

When you click to switch to the registration page

Figure 4.4 Home screen Home screen description

When clicking to switch to the list of rooms for rent

2 Membership package Lable Information about membership packages

When you click, you will be redirected to the login page

When you click, you will be redirected to the account registration page

5 Search Input Enter search keywords

City Dropdown List of districts in Ho

7 Rent cost Dropdown Rental rates

4.2.1.4 Search page for rental information

Figure 4.5 Search page for rental information Screen description of the rental search page

City Dropdown List of districts in Ho

3 Rent cost Dropdown Rental rates

4 Area Dropdown Room sizes for rent

5 More Button Open popup filter by posting date

6 List of rental news Listview Data from

7 District area Listview Data from

4.2.1.5 Details screen for rental information

Figure 4.6 Rental information page screen

Description of details page for rental information

1 Picture Image Data taken from API

List of video images of houses for rent

Information about houses for rent

Paragraph Data taken from API

The useful information of the rental house

3 Map Map Data taken from API

The location of the rental house

4 The lease Data taken from API Information of lessor

5 Phone number Button Data taken from API

Click to get the entire phone number

6 Texting Button Data taken from API

Click to go to the messaging page

7 Report Button Data taken from API

Click to report a landlord violation

Figure 4.7 Messaging screen with tenants Description of the message screen with the tenant

1 List of chats Listview Data taken from API

3 Texting Input Enter the message to send

4 To send Button Click to send a message

Figure 4.8 Saved rental site screen Saved rental listing screen description

2 Saved rental listings Listview Data taken from API

Figure 4.9 Personal information screen Description of personal information screen

1 Username Input Data taken from API Enter a new username

2 First and last name Input Data taken from API

Enter your first and last name

3 Email Input Data taken from API

4 Phone number Input Data taken from API

5 Self-introduce Input Data taken from API

Figure 4.10 Password change screen Description of the password change screen

1 current password Input Enter current password

2 A new password Input Enter your new password

3 Confirm new password Input Enter new password again

4 Confirm Button Click to change password

4.2.3.1 Sign up screen to become a lessor

Figure 4.11 Sign up screen to become a lessor Description of registration screen to become a tenant

2 Agree Button Click to go to the authentication page

Figure 4.12 Account verification page screen Description of the account verification page screen

1 Phone number Input Enter your phone number

2 To send Button Click to go to OTP authentication page

Figure 4.13 OTP authentication screen Description of the OTP authentication screen

1 OTP code Input Enter OTP

2 Accuracy Button Click to confirm

Click to get the verification code again

Description of the screen for creating a rental message

1 Map location Input Enter the address of the rental house

Enter area information, private rental price

Description of the rental message

Input Description of the rental message

4 Image Image Upload photos of houses for rent

Click to save the information and go to the preview page

Figure 4.15 Rental listing preview screen

Description of the rental preview screen

1 Picture Image List of pictures of houses for rent

2 Information Paragraph Utility information of the rental house

3 Map Map The location of the rental house

4 Erase Button Click to cancel the rental listing

5 Edit Button Click to edit rental information

6 Posting package Button List of service packages for postings

8 Post Button Click to post or pay

Figure 4.16 Payment information screen Description of payment information screen

1 Payment methods Button Select payment method

Information Input Data taken from API

Enter your first and last name

3 Pay Button Click to go to the payment page

Figure 4.17 Membership package screen Figure 4.18 Membership package screen description

1 Current package information Paragraph Data taken from API

2 Service packages Button Data taken from API

3 Change package Button Click to go to the payment page

Figure 4.19 Broker account screen Broker account screen description

1 Image Image Upload photo of ID card

2 Commit Checkbox Commitment to take responsibility

Click to send a request to manage the ID card authentication system

Figure 4.20 Transaction history screen Description of transaction history screen

1 Service pack Button Click to get a list of service package deals

Click to get a list of member package deals

Figure 4.21 Post management screen Description of post management screen

1 Approved Button Click to get the list of approved rentals

2 Not approved yet Button Click to get the list of unapproved rentals

3 Not posted yet Button Click to get a list of unpublished rentals

4 List of rental news Listview Data taken from API

Figure 4.22 Login screen Description of login screen

1 Email Input Enter the account of the manager/admin

3 Log in Button Click to log in to the system

Figure 4.23 Stats screen Description of statistics screen

Information on the number of tenants

12 months Chart Data taken from API

6 Post of the week Chart Data taken from API

1 List of tenants Gridview Data taken from API

Figure 4.25 All Tenant Screen Description of all tenants screen

1 List of lessor Gridview Data taken from API

4.2.4.4.2 The lessor screen is waiting for approval

Figure 4.26 The lessor screen is waiting for approval Description of the screen of the lessor waiting for approval

List of lessor waiting for approval

Gridview Data taken from API

Figure 4.27 All rental information screen

Screen description of all rentals

1 List of rental news Gridview Data taken from API

4.2.4.5.2 Screen for rental waiting for approval

Figure 4.28 Screen for rental waiting for approval Description of screen for rental waiting for approval

List of rental waiting for approval

Gridview Data taken from API

Figure 4.29 Manager information screen Figure 4.30 Description of manager information screen

1 Avatar Image Data taken from API

2 Information Input Data taken from API

Enter the information to be edited

3 Save Button Click to save the edited information

CONCLUSION

Summary

Throughout the project implementation process, our group encountered numerous challenges and conflicts, exacerbated by the complexities of the epidemic situation, which necessitated online discussions and meetings Despite these obstacles, our team's self-study ethos, collaborative spirit, and the instructors' enthusiastic support enabled us to successfully complete the project, aligning with our initial objectives.

Timeline

Huynh Thanh Tam Nguyen Thi Nhu Quynh

3 11/03/2022 - 05/06/2022 Project implementation Huynh Thanh Tam

4 06/06/2022 - 16/06/2022 Write report Huynh Thanh Tam

Result

- Learn new technology: MERN stack and know how to apply it to the subject project

- Practice self-study skills, document search skills, and solution-finding skills to solve problems encountered during project implementation

- Improve working skills, group discussion, division of work among team members

- Completing the web application is the bridge between candidates and employers in the field of information technology, meeting the initial goals.

Advantages and disadvantages

- The website has an easy-to-see, user-friendly interface

- Interface can be compatible on many different devices

- Support tenants to search for houses for rent quickly, conveniently and accurately

- Maximum support for lessors to manage their rental information, convenient access to tenants

- Pay online via VNPAY payment gateway

- Tenants, lessors communicate directly on the website using realtime chat application

The response speed of our application may be impacted by utilizing the free environment of the Heroku cloud platform, resulting in slower performance Notably, the Heroku server has an auto-sleep feature that kicks in after a period of inactivity, which can cause delays when the system is accessed after a prolonged idle time.

- The group using the database is MongoDB to store data with an allowed capacity of 512MB, so it is quite limited in terms of data storage

- The re-rendering of components has not been optimized yet

Implementing a MERN stack project can be challenging, especially for teams with limited experience in this relatively new technology The initial learning curve can be steep, requiring significant time and effort to grasp the intricacies of the stack As a result, teams may struggle to get started, navigating the complexities of MongoDB, Express.js, React.js, and Node.js This lack of familiarity can hinder the project's progress, making it essential for teams to invest in training and knowledge acquisition to overcome the initial hurdles and ensure a successful project outcome.

Research and refer to more documents from Google, Udemy

2 Difficulty in storing user's images and files Find a solution to save

1 Conflict error when pulling or pushing code on github

Use source control to manage member's personal branch

2 Having difficulty in reaching consensus among group members

Listen to each other's opinions, then make a joint decision

Lessons Learned

- Learn how to manage source code on github

- Know how to listen to the opinions of group members, work with the group to find the best solution for the topic

Development

- Integrate more chatbot system to better support rental house seekers

- Upgrade the system to automatically suggest rentals near your place without surveying

- Open more types of real estate such as land, office

Tiêu đề	Build A Website To Post And Search For Accommodation
Tác giả	Nguyen Thi Nhu Quynh, Huynh Thanh Tam
Người hướng dẫn	Le Vinh Thinh Ph.D
Trường học	Ho Chi Minh City University of Technology and Education
Chuyên ngành	Information Technology
Thể loại	Graduation Thesis
Năm xuất bản	2022
Thành phố	Ho Chi Minh City

Định dạng
Số trang	112
Dung lượng	7,7 MB