MINISTRY OF EDUCATION AND TRAINING HO CHI MINH CITY UNIVERSITY OF TECHNOLOGY AND EDUCATION FACULTY FOR HIGH QUALITY TRAINING GRADUATION PROJECT ELECTRONICS AND COMMUNICATIONS FULL STACK DEVELOPMENT HIRING HOME WEBSITE USING REACTJS, NODEJS, MYSQL, EXPRESS LECTURER: TRUONG QUANG PHUC STUDENT: TRAN DINH PHUC SKL012495 Ho Chi Minh City, December 2024 HO CHI MINH CITY UNIVERSITY OF TECHNOLOGY AND EDUCATION FACULTY FOR HIGH QUALITY TRAINING GRADUATION PROJECT FULL STACK DEVELOPMENT HIRING HOME WEBSITE USING REACTJS, NODEJS, MYSQL, EXPRESS TRAN DINH PHUC Student ID : 19161067 Major : ELECTRONICS AND COMMUNICATIONS ENGINEERING TECHNOLOGY Supervisor : TRƯƠNG QUANG PHÚC, MEng. Ho Chi Minh City, December 2023 i HO CHI MINH CITY UNIVERSITY OF THE SOCIALIST REPUBLIC OF VIETNAM TECHNOLOGY AND EDUCATION FACULTY FOR HIGH QUALITY TRAINING Independence – Freedom– Happiness -------- GRADUATION PROJECT ASSIGNMENT Student name : TRAN DINH PHUC Student ID : 19161067 Major : Electronic and telecommunication Class : 19161CLA2 Advisor : M. 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. Final product : Website real estate display includes an administration system and a client system.
CHAIR OF PROGRAM ADVISOR (Sign with full name) (Sign with full name) Trương Quang Phúc iii HO CHI MINH CITY UNIVERSITY OF THE SOCIALIST REPUBLIC OF VIETNAM TECHNOLOGY AND EDUCATION FACULTY FOR HIGH QUALITY TRAINING 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. Trương Quang Phúc. Content of the project:. Approval for oral defense? (Approved or denied) Approved.
Overall evaluation: (Excellent, Good, Fair, Poor) Good.(in words:………………………………………………………) Ho Chi Minh City, (month day, year) ADVISOR (Sign with full name) Trương Quang Phúc iv HO CHI MINH CITY UNIVERSITY OF THE SOCIALIST REPUBLIC OF VIETNAM TECHNOLOGY AND EDUCATION FACULTY FOR HIGH QUALITY TRAINING 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:. Content and workload of project:. Approval for oral defense? (Approved or denied).
Comments and suggestions. Ho Chi Minh City, (month day, year) REVIEWER (Sign with full name) v HO CHI MINH CITY UNIVERSITY OF THE SOCIALIST REPUBLIC OF VIETNAM TECHNOLOGY AND EDUCATION FACULTY FOR HIGH QUALITY TRAINING 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:.
Approval for oral defense? (Approved or denied). Comments and suggestions. Ho Chi Minh City, (month day, year) COMMITTEE MEMBER (Sign with full name) vi 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 vii ACKNOWLEDGEMENT During the implementation of the graduation project, I have received a lot of help, suggestions, and indicators from teachers and friends.
To complete the project " Full stack development hiring home website using reactjs, nodejs, mysql, express.", I would like to thank MEng. Truong Quang Phuc - Lecturer in the Department of Electrical and Electronic Engineering, University of Technology and Education of Ho Chi Minh City. With dedicated guidance, guidance, facilitating and supporting me to successfully complete this project. 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 viii 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. ix TABLE OF CONTENTS CHAPTER 1 : INTRODUCTION. 3 CHAPTER 2: LITERATURE REVIEW .2 JSON WEB TOKEN .7 APPLICATION PROGRAMMING LANGUAGE (API).
10 CHAPTER 3: SYSTEM DESIGN .2 Non-functional requirements .4 USE CASE MODEL AND SYSTEM SPECIFICATION .2 User post management .3 User information management .4 Modal filter function .1 Post management function .2 Post filter function .3 LOGIN AND REGISTER.6 VALIDATE DATA FUNCTION .7 PERSONAL INFORMATION MANAGEMENT. 60 CHAPTER 5 : CONCLUSION AND FUTURE WORK .66 xi LIST OF FIGURES Figure 2. 1 JSON Web Token work-flow. 2 User post management.
3 User information management. 6 Post management activity diagram. 7 Modal filtering function diagram. 8 Working mechanism of modal search by range.
9 User information management diagram. 1 Layout of the website client-view. 2 Footer of pages. 3 Detailed layout of posts.
4 Detailed table of posting characteristics. 5 Registration page interface. 6 Test the API using postman to see the response. 7 Popup notification of login status.
8 Warning for wrong form fill. 9 Layout of create new posts. 10 Layout of post management. 11 The function returns the post information update status.
12 Result of active post filtering. 13 Result of filtering expired posts. 14 Interface of the post editing page. 15 The result of the province API call.
16 Result when retrieving from the city to get the district name. 17 A list of data will be output for the user to choose. 18 Result when clicking select city and province tag. 19 The system returns the district by city name.
20 The address of the selection will be rendered. 21 Interface for users to upload photos. 22 Preview tag to preview the image. 23 Folder containing images in cloudinary.
24 Image sequential process is uploaded. 25 Link storage database. 26 Folder to save photos on cloudinary. 27 Validate data before sending.
28 Warning below input form. 29 Personal information management interface. 30 Updated personal information successfully. 31 Layout contact form.
32 Pop-up notification success send. 33 Chatbot's interface and location. 35 Conversational chat bot. 36 Chat with chat bot .63 xiii LIST OF TABLES Table 3.
1 Table describing the lable’s properties. 2 Table describing the attribute's properties. 3 Table describing the user's properties. 4 Table describing the user's contact properties.
5 Table describing the user's categories properties. 6 Table describing the user's area properties. 7 Table describing the images properties. 8 Table describing the overview properties.
9 Table describing the price properties. 10 Table describing the posts properties. 11 Table describing the province properties. 12 Use case specification for guest.
13 Use case specification for user post management. 14 Use case specification for user information management. 15 Use case specification for user filter posts management. 16 Use case specification for chat bot .27 xiv ACRONYMS SIGN THUẬT NGỮ 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 xv 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.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. 1 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.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.
