full stack development hiring home website using reactjs nodejs mysql express

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 (11.07 MB, 82 trang )

Trang 1<div class="page_container" data-page="1">

MINISTRY OF EDUCATION AND TRAINING

HO CHI MINH CITY UNIVERSITY OF TECHNOLOGY AND EDUCATION FACULTY FOR HIGH QUALITY TRAINING

GRADUATION PROJECT

ELECTRONICS AND COMMUNICATIONS

S K L 0 1 2 4 9 5

Ho Chi Minh City, December 2024

FULL STACK DEVELOPMENT HIRING HOME WEBSITE USING

REACTJS, NODEJS, MYSQL, EXPRESS

LECTURER: TRUONG QUANG PHUC STUDENT: TRAN DINH PHUC

</div>Trang 2<div class="page_container" data-page="2">

GRADUATION PROJECT

EXPRESS

Ho Chi Minh City, December 2023

HO CHI MINH CITY UNIVERSITY OF TECHNOLOGY AND EDUCATION FACULTY FOR HIGH QUALITY TRAINING

FULL STACK DEVELOPMENT HIRING HOME WEBSITE USING REACTJS, NODEJS, MYSQL,

Major : ELECTRONICS AND COMMUNICATIONS ENGINEERING TECHNOLOGY

Supervisor : TRƯƠNG QUANG PHÚC, MEng. TRAN DINH PHUC

Student ID : 19161067

</div>Trang 3<div class="page_container" data-page="3">

HO CHI MINH CITY UNIVERSITY OF TECHNOLOGY AND EDUCATION

FACULTY FOR HIGH QUALITY TRAINING

THE SOCIALIST REPUBLIC OF VIETNAM

Independence – Freedom– Happiness

---

GRADUATION PROJECT ASSIGNMENT

Student name : TRAN DINH PHUC Student ID : 19161067 Major : Electronic and telecommunication Class : 19161CLA2 Advisor : M.Eng . Trương Quang Phúc. Phone : 0917 731 988 Date of assignment : Date of submission :

1. Project title : Full Stack development hiring home using ReactJs, NodeJs, MySQL, Express

2. Initial materials provided by advisor : Basic knowledge of website architecture and systems

3. Content of project : Website design to display and preview various types of real estate, Learn about ReactJS and NodeJs technology, interact with the database through APIs.

4. Final product : Website real estate display includes an administration system and a client system.

(Sign with full name) (Sign with full name)

Trương Quang Phúc

</div>Trang 4<div class="page_container" data-page="4">

HO CHI MINH CITY UNIVERSITY OF TECHNOLOGY AND EDUCATION

FACULTY FOR HIGH QUALITY TRAINING

THE SOCIALIST REPUBLIC OF VIETNAM

Independence – Freedom– Happiness

---

ADVISOR’S EVALUATION SHEET

Student name : Trần Đình Phúc Student ID : 19161067 Major : Electronic and telecomunication

Project title : Full Stack development hiring home using ReactJs, NodeJs, MySQL, Express.

Advisor : M.Eng. Trương Quang Phúc.

EVALUATION

1. Content of the project:

...2. Strengths:

... 3. Weaknesses:

...

4. Approval for oral defense? (Approved or denied)

</div>Trang 5<div class="page_container" data-page="5">

HO CHI MINH CITY UNIVERSITY OF TECHNOLOGY AND EDUCATION

FACULTY FOR HIGH QUALITY TRAINING

THE SOCIALIST REPUBLIC OF VIETNAM

Independence – Freedom– Happiness

---

PRE-DEFENSE EVALUATION SHEET

Student name : Trần Đình Phúc Student ID : 19161067 Major : Electronic and telecomunication

Project title : Full Stack development hiring home using ReactJs, NodeJs, MySQL, Express.

Name of Reviewer:...

EVALUATION

1. Content and workload of project:

...2. Strengths:

... 3. Weaknesses:

...

4. Approval for oral defense? (Approved or denied)

... 5. Comments and suggestions

...

Ho Chi Minh City, (month day, year)

REVIEWER

(Sign with full name)

</div>Trang 6<div class="page_container" data-page="6">

HO CHI MINH CITY UNIVERSITY OF TECHNOLOGY AND EDUCATION

FACULTY FOR HIGH QUALITY TRAINING

THE SOCIALIST REPUBLIC OF VIETNAM

Independence – Freedom– Happiness

---

EVALUATION SHEET OF DEFENSE COMMITTEE MEMBER

Student name : Trần Đình Phúc Student ID : 19161067 Major : Electronic and telecomunication

Project title : Full Stack development hiring home using ReactJs, NodeJs, MySQL, Express.

Name of Reviewer :………

EVALUATION

1. Content and workload of project:

...2. Strengths:

... 3. Weaknesses:

...

4. Approval for oral defense? (Approved or denied)

... 5. Comments and suggestions

...

Ho Chi Minh City, (month day, year)

COMMITTEE MEMBER

(Sign with full name)

</div>Trang 7<div class="page_container" data-page="7">

DISCLAIMER

I hereby declare that this is a research system based on my own accumulated knowledge, the data and research results presented in the report are truthful and have never been published in any other system.

Ho Chi Minh City, January, 2024

Students perform

Trần Đình Phúc

</div>Trang 8<div class="page_container" data-page="8">

I would like to thank the authors of the reference sources who helped the group to have more knowledge and choices in the process of implementing the topic.

Although I have tried to complete this topic in the most complete way, there are certain errors in research work, practical approach, as well as limitations in knowledge and implementation time. Looking forward to receiving your comments so that I can supplement and correct the topic to be more complete.

Once again, I sincerely thank you.

Sincerely, Tran Dinh Phuc

</div>Trang 9<div class="page_container" data-page="9">

ABSTRACT

Nowsadays, with the fever of the real estate market in the industrial revolution, with the plus improved quality of life, people are flocking everywhere to find job opportunities. Along with the strong development of education, the demand for renting houses is increasing day by day. To meet that, online viewing real estate is developed and the website provides information instantly, promising to improve the efficiency of providing infomation through the internet. At the same time, website became more famous nowsadays, some suitable features that could become the main technology in future internet systems, avoiding the difficulties of implementing actual real buissiness.

In this capstone design project, I am focuses on surveying and simulating the work-flow through the full stack web development, including giving buisiness solutions based on my website . Simultaneously use four techniques : React js , Node js, Express and mySQL in my website. Then give the development direction for the topic.

</div>Trang 10<div class="page_container" data-page="10">

3.4.2 User post management ... 21

3.4.3 User information management ... 23

3.4.4 Modal filter function ... 25

3.4.5 Chat-bot ... 26

3.5 ACTIVITY DIAGRAM ... 28

3.5.1 Post management function ... 28

3.5.2 Post filter function ... 30

3.5.3 Member information ... 34

</div>Trang 11<div class="page_container" data-page="11">

4.6 VALIDATE DATA FUNCTION ... 55

4.7 PERSONAL INFORMATION MANAGEMENT ... 56

</div>Trang 12<div class="page_container" data-page="12">

LIST OF FIGURES

Figure 2. 1 JSON Web Token work-flow... 5

Figure 2. 2 React logo ... 7

Figure 3. 1 Guest function...21

Figure 3. 2 User post management ... 23

Figure 3. 3 User information management ... 24

Figure 3. 4 Filter function ... 25

Figure 3. 5 Chat bot ... 27

Figure 3. 6 Post management activity diagram ... 29

Figure 3. 7 Modal filtering function diagram ... 31

Figure 3. 8 Working mechanism of modal search by range ... 32

Figure 3. 9 User information management diagram ... 35

Figure 4. 1 Layout of the website client-view...36

Figure 4. 2 Footer of pages ... 37

Figure 4. 3 Detailed layout of posts ... 38

Figure 4. 4 Detailed table of posting characteristics ... 39

Figure 4. 5 Registration page interface ... 40

Figure 4. 6 Test the API using postman to see the response ... 41

Figure 4. 7 Popup notification of login status ... 42

Figure 4. 8 Warning for wrong form fill ... 42

Figure 4. 9 Layout of create new posts ... 43

Figure 4. 10 Layout of post management ... 44

Figure 4. 11 The function returns the post information update status ... 45

Figure 4. 12 Result of active post filtering ... 45

Figure 4. 13 Result of filtering expired posts ... 46

Figure 4. 14 Interface of the post editing page ... 46

Figure 4. 15 The result of the province API call ... 47

Figure 4. 16 Result when retrieving from the city to get the district name ... 48

Figure 4. 17 A list of data will be output for the user to choose ... 49

Figure 4. 18 Result when clicking select city and province tag ... 49

Figure 4. 19 The system returns the district by city name ... 50

Figure 4. 20 The address of the selection will be rendered ... 50

</div>Trang 13<div class="page_container" data-page="13">

Figure 4. 21 Interface for users to upload photos ... 51

Figure 4. 22 Preview tag to preview the image ... 52

Figure 4. 23 Folder containing images in cloudinary ... 53

Figure 4. 24 Image sequential process is uploaded ... 53

Figure 4. 25 Link storage database ... 54

Figure 4. 26 Folder to save photos on cloudinary ... 55

Figure 4. 27 Validate data before sending ... 55

Figure 4. 28 Warning below input form ... 56

Figure 4. 29 Personal information management interface ... 57

Figure 4. 30 Updated personal information successfully ... 57

Figure 4. 31 Layout contact form ... 59

Figure 4. 32 Pop-up notification success send ... 60

Figure 4. 33 Chatbot's interface and location ... 61

Figure 4. 34 Dialogue interface ... 62

Figure 4. 35 Conversational chat bot ... 62

Figure 4. 36 Chat with chat bot ... 63

</div>Trang 14<div class="page_container" data-page="14">

LIST OF TABLES

Table 3. 1 Table describing the lable’s properties ... 14

Table 3. 2 Table describing the attribute's properties ... 14

Table 3. 3 Table describing the user's properties ... 15

Table 3. 4 Table describing the user's contact properties ... 15

Table 3. 5 Table describing the user's categories properties ... 16

Table 3. 6 Table describing the user's area properties ... 16

Table 3. 7 Table describing the images properties ... 16

Table 3. 8 Table describing the overview properties ... 17

Table 3. 9 Table describing the price properties ... 17

Table 3. 10 Table describing the posts properties ... 18

Table 3. 11 Table describing the province properties ... 18

Table 3. 12 Use case specification for guest ... 20

Table 3. 13 Use case specification for user post management ... 22

Table 3. 14 Use case specification for user information management ... 24

Table 3. 15 Use case specification for user filter posts management ... 25

Table 3. 16 Use case specification for chat bot ... 27

</div>Trang 15<div class="page_container" data-page="15">

ACRONYMS

MVP Minimum valuable product API Application Programming Interface SQL Structure Query Language WTO World Trade Organization

CSS Cascading Style Sheets TDEE Total Daily Energy Expenditure

JWT Json Web Token HTML Hypertext Markup Language

HTTP HyperText Transfer Protocol CRUD Create – Read – Update- Delete

</div>Trang 16<div class="page_container" data-page="16">

CHAPTER 1 : INTRODUCTION

1.1 OVERVIEW

Urbanization also comes with many problems that need to be solved due to overcrowding in urban areas such as environmental pollution, traffic jams, food hygiene and safety, material and spiritual life, housing for workers...For big cities, especially Ho Chi Minh City - a city with over 8 million people - the above problems become even more complicated, especially the problem of accommodation for immigrants, workers and students of universities and colleges. Hundreds of newly established companies also need to rent space for transaction locations, representative offices...Thus, there is a daily need to find boarding houses to rent, as well as finding office space to rent. Representatives and trading locations are very large.

There is a problem here is probably that there is not a certain connection between the buyer and the seller. While people who want to buy or rent a house can't find all the apartments for rent, renters can't find people with that need. So this website was born to solve that problem, with a powerful combination of a simple user interface, a clean and well designed database that makes the website work. very simple and minimalistic.Combining existing technologies as well as redesigning the interface appropriately will partly make it easier for older customers to access technology, and partly create simplicity, avoiding complicated problems. At the same time, it also beautifies the interface and makes it more suitable for users.

Nowadays, the need to search for all information on the internet has become quite popular. To connect people who want to buy and people who have real estate to sell or rent. Therefore, my topic is to design a website to search for accommodation quickly and effectively. After coming up with the idea, I proceed to analyze and design my idea.

1.2 RELATED WORKS

In [1], the website clearly functions in different blocks, making the website have a friendly user interface. However, the layout causes problems because it allows advertising, confusing information, leading to overload for users, without focusing on usual information. In this case, it will distract users from the process of finding information and hinder the web surfing process.

</div>Trang 17<div class="page_container" data-page="17">

In [2] the information has been designed reasonably, each separate functional block has made accessing information easier, the speed of the website has also clearly improved, the information is centralized. In general, the functions also work stably, but not being able to integrate chat bots and leaving contact information still faces many difficulties.

In [3], this project has a uniform design,also has a price chart to update current prices, but the displayed information has not been presented clearly, functions have not been shown specifically, making customer access to information not optimal. Specifically, the search and price filter modal is still not optimized.

1.3 OBJECTIVES

- The user interface is easy to use, the layout design identifies to be clear, the application of functions such as notifications and user interaction need to be optimized. - The database design calculated for the needed performance, all the data have to strictly for the managed database table. To value a real estate, a lot of information is needed, and the activities of the buyers and sellers must take place under the control of legal agencies.

- Filters must be carefully calculated and spaced appropriately to be able to filter data accurately, thereby increasing the ability to interact with users and also making it convenient to filter data, reducing the load on the database

- Users can post the sales details, manage posts and send necessary information so the buyers can contact them.

- Integrated chat bot to guide users in using the app for speed-up evaluations of the website. It can take users hours or even days because of basic information portals, so chatbots will be embedded to support both sides.

1.4 METHODOLOGY

To carry out the project, first collect and process data, then search for appropriate logic to be able to filter content in the database, combined with the use of available libraries to save time and optimize your experience. With the participation of external APIs, the combination to work must be specifically calculated, arrange the time to return the results and take those results to combine with external libraries to display to the user .The project must be tested many times and interact with third-party applications to support implementation.

</div>Trang 18<div class="page_container" data-page="18">

- Problem 1: Study about supporting languages such as HTML, React Library, supporting libraries, design database methods.

- Problem 2 : Create the structure and select a development framework.

- Problem 3: Build a suitable, highly applicable and complete database to complete the functionality of the web.

- Problem 4: Combine API calls and calculate appropriate time for data transmission and reception. In order for data to be displayed accurately and specifically, affecting the user experience.

- Problem 5 : Combine it all, interact with the website, record outstanding errors to add new functions in the future.

1.5 REPORT’S LAYOUT

This project is represent 5 chapters :

the purpose of the project, and methods to implement the project. Point out points to reach customers and essential needs of society.

use, supporting libraries and software used to make the project. In particular, will talk in detail about the json web token and the hooks that will be used in the project

the purpose of the project, and methods to implement the project.Separately present ideas and implementations for components with common functions, separate functional components, and API systems for external use.

●

Chapter 4 - Results :

Simulation of achieved results presents the advantages of the product. test all functions, present the results of the tests and the behavior of the outermost functions as returned results of the APIs

●

Chapter 5 - Conclusion and future work :

Give comments and self assessment on the results of the test . Provide an assessment of the current product, its advantages and disadvantages, and future improvements.

</div>Trang 19<div class="page_container" data-page="19">

CHAPTER 2: LITERATURE REVIEW

2.1 WEBSITE

A website (also written as a web site) is a collection of web pages and related content that is identified by a common domain name and published on at least one web server. Websites are typically dedicated to a particular topic or purpose, such as news, education, commerce, entertainment or social networking. As of May 2023, the top 5 most visited websites are Google Search, YouTube, Facebook, Twitter, and Instagram.All publicly accessible websites collectively constitute the World Wide Web. Users can access websites on a range of devices, including desktops, laptops, tablets, and smartphones. The app used on these devices is called a web browser.

A website is a dynamic and interactive online platform that serves as a virtual space where individuals, businesses, organizations, or communities can share information, services, and resources with a global audience.The design and functionality of a website are crucial elements, influencing user experience and overall effectiveness. As an integral part of the digital landscape, websites play a fundamental role in shaping online presence, facilitating communication, and serving as a gateway to the vast world of information available on the internet.

2.2 JSON WEB TOKEN

JSON Web Token (JWT) [4] is an open standard (RFC 7519) that defines a compact and self-contained way for securely transmitting information between parties as a JSON object. This information can be verified and trusted because it is digitally signed. JWTs can be signed using a secret (with the HMAC algorithm) or a public/private key pair using RSA or ECDSA.

Although JWTs can be encrypted to also provide secrecy between parties, we will focus on signed tokens. Signed tokens can verify the integrity of the claims contained within it, while encrypted tokens hide those claims from other parties. When tokens are signed using public/private key pairs, the signature also certifies that only the party holding the private key is the one that signed it.

JWT that has the previous header and payload encoded, and it is signed with a secret key:

</div>Trang 20<div class="page_container" data-page="20">

Figure 2. 1 JSON Web Token work-flow

The application (1) or client requests authorization to the authorization server. This is performed through one of the different authorization flows. For example, a typical OpenID Connect compliant web application will go through the /oauth/authorize endpoint using the authorization code flow.

When the authorization is granted (2), the authorization server returns an access token to the application.

The application uses the access token (3) to access a protected resource (like an API).

JWT includes 3 parts :

- Header : Typ - type of token ( default JWT). Alg - Algorithm used for encryption . - Payload : Is the place where the content of the information (claim) is stored. The transmitted information can be a description of an entity (for example, a user) or it can also be additional information for the Header. They are divided into 3 types:

• Reserved (is the information specified in the IANA JSON Web Token Claims registry. None of this information is mandatory. However, depending on each application you implement, please bind the mandatory requirements to the necessary information), public and private.

• Public: The key can be defined according to the wishes of the JWT user. However, to avoid duplication, tokens should be specified in the IANA JSON Web Token Registry or a URI containing an unduplicated namespace.

• Private: Additional information is used to pass between clients.

- Signature: The signature is created by combining the Header + Payload parts, then encoding it with any encoding algorithm such as HMAC SHA-256.

</div>Trang 21<div class="page_container" data-page="21">

System flow uses JWT :

• User performs login by sending id/password or using social network accounts to the Authentication Server (Authentication Server)

• Authentication Server receives data that the User sends to serve user authentication. In case of success, the Authentication Server will create a JWT and return it to the user via response.

• The user receives the JWT returned by the Authentication Server as a "key" to execute the next "commands" to the Application Server.

• Application Server, before making a request from the User, will verify the JWT sent. If ok , continue executing the called request.

2.3 REDUX-TOOLKIT

Redux Toolkit is official, opinionated, batteries-included toolset for efficient Redux development. It is intended to be the standard way to write Redux logic, and strongly recommend that you use it in the project.

It includes several utility functions that simplify the most common Redux use cases, including store setup, defining reducers, immutable update logic, and even creating entire slices of state at once without writing any action creators or action types by hand. It also includes the most widely used Redux addons, like Redux Thunk for async logic and Reselect for writing selector functions, so that users can use them right away.

The redux js toolkit package wraps around the core redux package [5], and contains API methods and common dependencies that we think are essential for building a Redux app. Redux Toolkit builds suggested best practices, simplifies most Redux tasks, prevents common mistakes, and makes it easier to write Redux applications.

Redux is really a single store containing "global" state. Dispatching plain object actions to the store when something happens in the app. Pure reducer functions look at those actions and return an immutably updated state. While it's not required, Redux code also normally includes:

• Action creators that generate those action objects. • Middleware to enable side effects.

• Thunk functions that contain sync or async logic with side effects.

• Memoized selector functions with the Reselect library for optimizing derived data.

</div>Trang 22<div class="page_container" data-page="22">

The Redux DevTools Extension to view action history and state changes.

The Redux core is a very small and deliberately opinionated library. It provides a few small API primitives:

• CreateStore to actually create a Redux store.

• CombineReducers to combine multiple slice reducers into a single larger reducer. • ApplyMiddleware to combine multiple middleware into a store enhancer.

• Compose to combine multiple store enhancers into a single store enhancer.

2.4 REACT JS

React, also known as ReactJS is a free and open-source front-end JavaScript library for building user interfaces based on components [6]. It is maintained by Meta (formerly Facebook) and a community of individual developers and companies. React can be used to develop single-page, mobile, or server-rendered applications with frameworks like Next.js. Because React is only concerned with the user interface and rendering components to the DOM, React applications often rely on libraries for routing and other client-side functionality.

Figure 2. 2 React logo

React code is made of entities called components. These components are modular and reusable. React applications typically consist of many layers of components.When rendering a component, values are passed between components through props (short for "properties"). Values internal to a component are called its state.

The two primary ways of declaring components in React are through function components and class components.

Function components : Function components are declared with a function (using JavaScript function syntax or an arrow function expression) that accepts a single "props" argument and returns JSX. From React v16.8 onwards, function components can use state with the useState Hook :

</div>Trang 23<div class="page_container" data-page="23">

− React Hooks : Hooks are functions that let developers "hook into" React state and lifecycle features from function components [7].Notably, Hooks do not work inside classes - they let developers use more features of React without classes [8].

− React provides several built-in Hooks such as useState, useContext, useReducer, useMemo and useEffect [9]. Others are documented in the Hooks API Reference, useState and useEffect, which are the most commonly used, are for controlling state and side effects respectively.

Routing : React itself does not come with built-in support for routing. React is primarily a library for building user interfaces, and it doesn't include a full-fledged routing solution out of the box. One such library is react-router, which provides a comprehensive routing solution for React applications.It allows you to define routes, manage navigation, and handle URL changes in a React-friendly way. To use react-router, you need to install it as a separate package and integrate it into your React application.

2.5 NODE JS

Node.js is a cross-platform, open-source server environment compatible with Windows, Linux, Unix, macOS, and more. Functioning as a back-end JavaScript runtime environment, it operates on the V8 JavaScript engine and executes JavaScript code independently of a web browser.

All Node.js APIs are asynchronous, employing a non-blocking approach that relies on the Node.js Server, waiting for server responses. This platform's real-time capabilities stem from an event notification mechanism that facilitates continuous server responsiveness.

Developers can utilize Node.js to write command line tools and server-side scripts in JavaScript. Its ability to execute JavaScript on the server is instrumental in generating dynamic web page content before transmitting it to the user's browser [10].The Node.js development project, initially governed by the Node.js Foundation, has merged with the JS Foundation to establish the OpenJS Foundation, facilitated by the Linux Foundation's Collaborative Projects program.

The community-driven nature of Node.js is evident in the extensive libraries available, with npm (Node Package Manager) offering versions that enhance application development speed and efficiency [11]. Node.js supports the creation of reusable

</div>Trang 24<div class="page_container" data-page="24">

modules that do not inadvertently affect other code, allowing developers to create and use their modules across multiple applications.

2.6 MYSQL

MySQL, an open-source relational database management system (RDBMS), is named after co-founder Michael Widenius's daughter, "My," and "SQL" for Structured Query Language. It organizes data into tables, forming relationships within a relational database. Programmers use SQL to manipulate data and regulate user access. MySQL collaborates with an operating system to implement relational databases, overseeing user management, network access, and database integrity.

Operating under the GNU General Public License, it was initially owned by MySQL AB, later acquired by Sun Microsystems, and is now part of Oracle Corporation. Similar to Microsoft's SQL Server, MySQL efficiently manages data through databases with user authentication via unique usernames and passwords.

The advantage of using MYSQL : flexibility because MySQL runs on all operating systems, power focuses on performance .Enterprise-Level SQL, MySQL had for some time been lacking in advanced features such as subqueries, views, and stored procedures, query caching helps enhance the speed of MySQL greatly.

2.7 APPLICATION PROGRAMMING LANGUAGE (API)

An Application Programming Interface (API) comprises methods and protocols to establish connections with other libraries and applications. Serving as a conduit for application programming, it enables the exchange of data between different applications by providing access to a predefined set of commonly used functions. APIs play a crucial role in software development, acting as a bridge for seamless communication between different applications.

They define rules and protocols for one piece of software to access the functionality or data of another, fostering interoperability and innovation [12]. APIs empower developers to integrate services, applications, or platforms, facilitating the creation of efficient workflows and interconnected digital ecosystems. Whether for web development, mobile applications, or software solutions, APIs are essential for building robust, scalable, and interconnected systems.

A REST API (Representational State Transfer Application Programming Interface) adheres to simplicity, scalability, and statelessness principles. Using standardized HTTP methods like GET, POST, PUT, and DELETE, it facilitates

</div>Trang 25<div class="page_container" data-page="25">

communication between clients seeking web information and servers with the required data.

2.8 CHAT-BOT

A chatbot is a software application designed to facilitate online conversations through text or text-to-speech interactions. Rather than engaging in live discussions with real users, a chatbot uses programmed responses to simulate conversation and provide assistance, information, or perform specific tasks [13].

Chatbots have a wide range of capabilities and can perform various tasks depending on their design and programming. Here are some common functionalities of chatbot : − Answering FQAs : Chatbots can provide instant responses to common queries, offering information about products, services, or general inquiries.

− Customer support : They can assist users with troubleshooting, technical support, and guiding them through common issues.

− Social media interaction : Chatbots can be integrated into social media platforms to engage with users, answer inquiries, and provide updates.

− Survey and feedback collection : They can conduct surveys or collect feedback from users, helping businesses gather valuable information.

− Provide fast customer service : Customers want fast and easy service, even during peak hours. When bots step in to handle the first interaction, they eliminate wait times with instant support. Because chatbots never sleep, they can provide global, 24/7 support at the most convenient time for the customer, even when agents are offline.

− Offer more personalized experiences : Customers understand that bots collect personal data but want them to use it to create a better customer experience. According to our CX Trends Report, 59 percent of consumers who interact with chatbots expect their data will be used to personalize future interactions with a brand.

The capabilities of a chatbot depend on its design, programming, and the specific tasks it is programmed to handle. They are continuously evolving to offer more sophisticated and personalized interactions.

</div>Trang 26<div class="page_container" data-page="26">

CHAPTER 3: SYSTEM DESIGN

3.1 SYSTEM REQUIREMENTS

The website is designed to have these requirements :

− Design a service to find and share information that describes the description of a rental model. Users can refer to and find service providers quickly.

− Website must have functions that can add, edit, delete and update data. Data must be filled with character fields, designed with the database for easy management, divided into separate sections, from that creates a full database system.

− The system must have the function of decentralizing users.Users can manage personal information and update avatars. The user's personal information include full name, specifically identified posts, and include a profile picture and phone number to display on the personal page.

− The final design must have all the functions working properly, which are read, post, update, delete data. After passing all the test simulation, the design is expected to satisfy the requirements of displaying complete information and operations to meet user needs.

− Back-end : Process data, access additional external libraries to convert and handle data. The asynchronous feature will make data transmission easier and faster. Required fast data processing and response speed, able to handle a huge amount of access needs from users and it supports very well in querying, adding, editing, and deleting data.

− Methods for transferring data are using the API architecture. API provides access to a set of commonly used functions, thereby creating a bridge for data exchange between applications.

− In addition to the main libraries above, additional libraries will still be used to optimize the website :

</div>Trang 27<div class="page_container" data-page="27">

• Cors : Helps to optimize website security, when data is running in this domain, when going to another domain to access data, a notification will be sent to the browser to grant permission to request access to that page.

• Dotenv : Used to set environment values for the page, used to specify which processes you want.

• Jsonwebtoken : JWT is a means of representing transfer requests between Client - Server sides, the information in the JWT string is formatted in JSON. The Token string must have 3 parts: header, payload.

• UUID : This library helps with website security as well as generating the necessary ids. Different from the usual way of creating ids in an ascending direction, it uses a string of characters to represent a specific object.

• Bcryptjs : Is a form of hash function to encrypt passwords for the purpose of enhancing security. It is a type of library written in javascript so it is easier to use. The time to run the function is quite consuming.

• Postings type are luxury apartments, can be rented for stage, backstage, shooting scenes, or in luxury urban areas.

• Postings of premises include premises located on major roads, or main roads, used for supermarkets, high-end offices, can be used for large businesses, including two to three street frontages, can be concentrated in densely populated areas or central areas with quite expensive rental costs.

− Filter by time, price and area : These are three very important factors in choosing to buy or sell and make decisions for buyers or renters. Making business decisions depends on many other factors, but choosing a reasonable price will save money. Currently the selection modal will provide filtering of posts according to 4 prerequisites.

</div>Trang 28<div class="page_container" data-page="28">

− Post management includes:

• Adding post information : Users can post personal product information on the website, by combining provincial APIs , functions are applied specifically to help filter posts before being published.

• Editing post information: Unavoidable errors when performing the above functions or during the user's inconvenience process, this function was created to minimize inconsistent postings on the centralized market.

• Deleting post information: Regarding the lack of communication function with outside life, this function was created to reduce information interference as well as reduce pressure on the data system.

− Users interact with posts :

• For a complete post, it is essential to have a short overview to display on the general page and detailed information to be displayed on another page, a summary before users find the information. Detailed information to deal directly with the poster is something to keep in mind.

• When entering the post details page, all the full post information will be included, including description, post code, poster, and a summary list of post characteristics will be displayed. directly and a separate function block so users can call the seller directly via zalo or private phone number.

− Chat bot :

• Online chat no longer seems strange to the technical world, so launching an automatic chat bot can help website users interact with it more easily. The experiment is that it is quite difficult for older people to access the website in an organized way. The problem of websites and reducing the workload for administrators will be solved.

• The main functions chatbots can do are the ability to talk and answer user questions. Questions may or may not be related to the site depending on the level of the licensing administrator.

3.2.2 Non-functional requirements

− In terms of interface design :

• Functions must be designed clearly and separately, for easy management and use: In this project, the main functions include filtering posts and interacting with the database.

</div>Trang 29<div class="page_container" data-page="29">

• The website's colors must be beautiful and harmonious, avoiding contrasting colors that cause discomfort during use.

• Make sure there is no distracting information such as ads or cluttered arrangements of heterogeneous blocks. Displayed information must be complete and clear, font must be properly aligned.

• Make sure there are no design errors in color or size. − In terms of database design :

• Tables must be linked together clearly and clearly to ensure consistency in data. • The fields in the table must ensure complete information, for easy control and management of the database. One-to-one or many-to-many relationships must be clarified, thereby making data querying simple and light, high optimization for the website. Ensure database security through external libraries.

• Carefully calculate the objects in the table to design appropriate data, avoiding data inconsistency. The table must be easy to see, understand and manage, thereby improving table quality as well as minimizing the process of maintaining and upgrading the database.

3.2.3 Database design

The database includes 11 tables, of which 8 tables have relationships with each other, and the subsequent tables delineate the properties of the database :

Table 3. 1 Table describing the lable’s properties

Order Properties Data Type Significance 1 Id String Label identify

2 Code String Used to classify post characteristics 3 Value String Used to determine the nature of the

post and where it is posted

This table is used to classify rental forms. Each different rental form in each different district corresponds to a different code. Each post has only one label code and one label code will be present in many different posts.

Table 3. 2 Table describing the attribute's properties

</div>Trang 30<div class="page_container" data-page="30">

2 Price String Represents each certain price range

This table is used to describe the value ranges of two fields: area and current price. This table is related to the posts table and helps the system filter posts.

Table 3. 3 Table describing the user's properties

This table is used to contain the user's personal information. This table must pay special attention to the avatar field because the appropriate data type must be selected to save the avatar. This table is considered quite important because it helps the system owner determine how many members are participating in transactions as well as visiting the website.

Table 3. 4 Table describing the user's contact properties

Order Properties Data Type Significance 1 Id String Contact identify 2 Name String Name of person to contact 3 Phone String Phone number of person to contact 4 Description Text Specific description of the message

This table is used to save contact information for users, understood as a table to leave contact information to resolve personal problems when the administrator is absent or inconvenient to contact at the time of occurrence.

</div>Trang 31<div class="page_container" data-page="31">

Table 3. 5 Table describing the user's categories properties

Order Properties Data Type Significance

1 Code String Representing each categories group 2 Value Text Value of categories identify 3 Header Text Introduction of categories 4 Sub-header Text Brief description of categories

This table has the function of containing abbreviations of rental categories, the main function is to classify data, increase data centralization and reduce user confusion due to incorrect naming.

Table 3. 6 Table describing the user's area properties

Order Properties Data Type Significance 1 Id String Area identify

2 Order String Used to sort the value of the price 3 Code String Represents each certain price range 4 Value Text Value of area

This table shows the spatial spacing properties of the post model. More specifically, the area of the rental model, the main function is used to classify filters and display details for users. This table plays an important role in creating classification in the area, helping to increase the accuracy of the post.

Table 3. 7 Table describing the images properties

Order Properties Data Type Significance 1 Id String Image identify 2 Image String Orders of images

This table is used to store image data for the post. Separating this table from the post because the image is saved as a link makes it difficult to control the image. Therefore, the photo description table will have a 1-1 relationship with the post table. A photo can only be in one post and a post will only have one photo id. Categorizing photo

</div>Trang 32<div class="page_container" data-page="32">

boards separately will help increase dispersion and make it easier for administrators to handle errors when combining photos into posts.

Table 3. 8 Table describing the overview properties

Order Properties Data Type Significance 1 Id String Overview identify 2 Code String Overview management code 3 Area String Overview area type 4 Target String Gender of client 5 Bonus String Overview bonus for coupon 6 Create Time Time created overview 7 Expire Time Time overview expires

This is a type of table used to manage posting details, including fields such as post description, post name, and codes to link to other tables. It can be said that this is a rather long and complicated table among the remaining tables because the amount of information is very large and the data dispersion is also large. However, thanks to that, the database will become tighter and easier to manage. This table will contain user information as well as post information, making the filtering and sorting process of posts more stable.

Table 3. 9 Table describing the price properties

Order Properties Data Type Significance 1 Id String Price identify 2 Order String Order of price

3 Code String Represents a certain price range 4 Value String Value of price

This table is used to classify prices, creating different price codes to serve the filter. In addition, the website also has a search function by price range to help determine the specific financial situation of people in need of services to save time for users. This table only provides exact price ranges, not optional price ranges, so basic needs still need to be upgraded.

</div>Trang 33<div class="page_container" data-page="33">

Table 3. 10 Table describing the posts properties

Order Properties Data Type Significance 1 Id String Post identify 2 Title String Post title 3 Star String Star of post

4 Label code String Post characteristics code 5 Address String Address of post 6 Attributes Id Sting Attributes characteristics 7 Category Code String Categories characteristics 8 Price Code String Price code

9 Area Code String Area code 10 Province Code String Province Code 11 Description Text Description about posts 12 User ID String User identity 13 Overview ID String Overview identify 14 Images ID String Images identify 15 Price number Float Price code 16 Area number Float Area code

This is the most important as well as the most complex of all tables, this table has relationships with many different tables. Tables relate to each other for easy processing and retrieval of information. This table includes many fields, but the data is not much because it has been shared with other tables for common management, avoiding storing too much important information in the same table and causing errors in the process data.

Table 3. 11 Table describing the province properties

Order Properties Data Type Significance 1 Id String Province identify 2 Code String Province code

</div>Trang 34<div class="page_container" data-page="34">

3 Value String Name of province

This is the table used to divide the provinces into the post table. This table will be combined with the province api and a separate code generator function used to process and shorten province names, thereby creating separate codes. depending on the region and serving the filter. Whether the website experience is fast or slow depends a lot on tables like this because it was created to optimize the website and optimize user experience, as well as reduce the burden on web designers who have to create web page separate filter functions.

3.3 SYSTEM OPERATION

The website system will offer two choices for users: the first is for individuals seeking market information without the intention of posting items for sale, while the second is tailored for customers looking to engage in the trading of diverse assets. The latter option encompasses all the features and capabilities of the first type.

The second category of account will have access to services associated with tasks like managing posts and verifying the authenticity of submissions.

Following the planning of the design process and addressing various scenarios, a procedure will be established to actualize the website. Users can conduct searches based on predefined criteria embedded in the search modal.

Upon constructing the search modal, enhancements will be made to filtering and selection processes, optimizing the experience and aligning with individual preferences to fulfill specific search requirements. This aims to facilitate efficient information retrieval and reference.

The search and contact process will take place in 2 steps:

− Step 1 : Select the preferences that align with your individual circumstances through the use of the provided filters integrated into the website.

− Step 2 : Reach out to the seller directly through the contact details, such as the phone number or zalo, integrated into the website.

For existing members, decentralization will encompass supplementary features, including post management and personal information management. Both categories of customers can utilize the integrated chatbot within the system. The chatbot is designed with simplicity and can provide guidance to users on its usage.

</div>Trang 35<div class="page_container" data-page="35">

From the initial system overview, it is evident that the functions are comprehensive and essential for the operation of a website.

3.4 USE CASE MODEL AND SYSTEM SPECIFICATION

3.4.1 Guest

This figure describes the main functions of unregistered users, which only include:

− Viewing post information : Users click on the post to view the product's value, including title, actual demand, image, poster information, and detailed post description. − Leaving personal information when needing support : Users do this in two ways: one is to fill in information to leave a request when not urgently needed, and two is to make contact according to the information already displayed on the website.

This type of user will not be able to interfere with the system database. The main function of this type of user is to consult the market, especially customers who want to buy and do not need to sell.

In this case, the user does not need to have login information or an account. Users can still use guest functions without affecting the experience.

Table 3.12 summarizes the activities as well as the necessary and sufficient conditions for this type of function. This series of functions only applies filters, using functions to display postings from the database.

The posts below will be designed as a list consisting of 5 different posts and will be displayed according to the user's input conditions. When starting the process of calling the function to display the post, there will be 2 APIs called :

Table 3. 12 Use case specification for guest

Actor action Basic course of

events

1. User search post information

2. The system returns the results that the user searches for.

</div>Trang 36<div class="page_container" data-page="36">

Post conditions The post information has been saved to the database

Figure 3. 1 Guest function

− An API is used to get all the data of all posts to . To perform pagination, you need to know the number of posts currently in the database to perform division operations, thereby putting data into the built-in logic function to perform the pagination process. − After calling the API to get all the posts, an additional API call will be made to get 5 posts and use this data to display on the user's side. There will be two buttons for users to filter posts according to personal needs. This action will call an additional action to rearrange posts by decreasing date value.

3.4.2 User post manangement

The basic functions of user system post management represent in the figure below, users can:

− Add posts : Adding a new post will be done through these steps:

• Filling in the parameters completely and accurately and uploading photos: Includes a function to check input parameters like when logging in.

• Make api calls to upload photos and upload posts .

</div>Trang 37<div class="page_container" data-page="37">

− Edit posted posts: The system will retrieve the old data from the post to automatically fill in the post and let the user edit the post status.

− Delete posts: The system will call a function called delete post that has been set to delete data from the database.

− Update individual post status : The system will recall old data, combined with a specially built calculation function to consider the post's status as expired or unexpired. − These functions have been designed separately using different functions so that they can be easily customized.

− The necessary condition for this function is that the user is logged in and has performed the posting operation. The database already has post information and user information.

− With the 6 stages specifically described in the table below and the necessary conditions also attached, this table clearly shows detailed instructions for use of this function.

Table 3. 13 Use case specification for user post management

Actor action Basic course of

events

1. User register or login

2. The system returns the results that the user register or login status.

3. The user chooses the post management function

4. The system displays the post management page allowing user to create, update, and delete posts

5. User make edits, add, create new posts,...

6. The system checks and saves information into the database.

Triggers Users have demand to create transactions on the market.

Assumptions The user has fully implemented the function.

Pre conditions User must have account.

Post conditions The post information has been saved to the database.

</div>Trang 38<div class="page_container" data-page="38">

Figure 3. 2 User post management

3.4.3 User information management

Figure below describes the activities of users who are members of the site. Includes only 3 main functions :

− Create account : Creating a new account will include an additional function in addition to checking invalid fields. If the user has already created an account, they will be transferred to log in.

− Updated account : Once the user has logged in or has an account, errors during data entry are inevitable. Therefore, this function was created to help users change information such as name, phone number, or avatar.

</div>Trang 39<div class="page_container" data-page="39">

Figure 3. 3 User information management

− Send request : Users do this in two ways:

• One is to fill in information to leave a request when not urgently needed.

• Two is to make contact according to the information already displayed on the website, contact information will be presented specifically and clearly.

Table 3. 14 Use case specification for user information management

Actor action Basic course of

events

1. User register or login

2. The system returns the results that the user register or login status.

3. The user choose the account management function 4. The system displays the information management page allowing users to update the personal information.

5. User make edit information.

6.The system checks and saves edited data into the database.

Triggers Users have a demand to edit personal data.

Assumptions The user has fully implemented the function.

Pre conditions User must have account.

Post conditions The user information has been saved to the database.

</div>Trang 40<div class="page_container" data-page="40">

3.4.4 Modal filter function

request and send it to the database to filter out posts that meet the requirements. This modal still supports the UI very well, including a pull bar to limit it to your liking or separate price ranges to be able to choose reasonably.

Figure 3. 4 Filter function

− Each modal operates separately, but the modal design process is based on a logical logic that should be applicable to many different components such as price or area. The other two fields operate independently, then combine them together to perform filtering accurately and in accordance with needs. Filter models included :

Table 3. 15 Use case specification for user filter posts management

Actor action

</div>