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
MINISTRY OF EDUCATION AND TRAINING HO CHI MINH CITY UNIVERSITY OF TECHNOLOGY AND EDUCATION GRADUATION THESIS INFORMATION TECHNOLOGY BUILD A WEBSITE TO POST AND SEARCH FOR ACCOMMODATION LECTURER: LE VINH THINH PH.D STUDENTS: NGUYEN THI NHU QUYNH HUYNH THANH TAM SKL 009441 Ho Chi Minh City, June 2022 MENISTRY OF EDUCATION AND TRAINING HO CHI MINH CITY UNIVERSITY OF TECHNOLOGY AND EDUCATION FACULTY OF HIGH QUALITY GRADUATION THESIS BUILD A WEBSITE TO POST AND SEARCH FOR ACCOMMODATION Instructor: Le Vinh Thinh Ph.D Reporters: Nguyen Thi Nhu Quynh 18110189 Huynh Thanh Tam 18110194 Ho Chi Minh City, June 2022 SOCIALIST REPUBLIC OF VIETNAM Independence - Freedom - Happiness Ho Chi Minh City, day… of…2022 GRADUATION SUBJECTS Full name: Nguyen Thi Nhu Quynh ID: 18110189 Major: Information Technology Class: 18110CLST1 Full name: Huynh Thanh Tam ID: 18110194 Major: Information Technology Class: 18110CLST3 Instructor: Le Vinh Thinh Ph.D Project start date: Project submission date: Project title: Building a website to post news and search for accommodation Initial data and documents: Surveying the current status through current Internet search engine websites and professional reference for implementation Content of the project: Building a website that allows users to search for rooms for rent Building a website that allows lessors to register with the system, post rental information, manage rental information, and communicate with tenants Building a website that allows system managers to manage tenants and rental listings Building a website that allows system administrators to manage users in the system Product: Website that connects job seekers and tenants MAJOR LEADER INSTRUCTOR (Sign and write full name) (Sign and write full name) i SOCIALIST REPUBLIC OF VIETNAM Independence - Freedom - Happiness Ho Chi Minh City, day… of… 2022 INSTRUCTOR'S COMMENT SHEET Full name: Nguyen Thi Nhu Quynh ID: 18110189 Full name: Huynh Thanh Tam ID: 18110194 Major: Information Technology Project title: Building a website to post news and search for accommodation Instructor: Le Vinh Thinh Ph.D COMMENT Regarding the topic content & volume of implementation: Advantages: Weakness: Recommend for protection or not? Rating type: Score: (In words: ) Ho Chi Minh City, day… of … 2022 Instructors (Sign and write full name) ii SOCIALIST REPUBLIC OF VIETNAM Independence - Freedom - Happiness Ho Chi Minh City, day… of … 2022 REVIEWER’S COMMENT SHEET Full name: Nguyen Thi Nhu Quynh ID: 18110189 Full name: Huynh Thanh Tam ID: 18110194 Major: Information technology Project title: Building a website to post news and search for accommodation Reviewer teacher: ……………………………………………………………… COMMENT Regarding the topic content & volume of implementation: Advantages: Weakness: Recommend for protection or not? Rating type: Score: (In words: ) Ho Chi Minh City, day… of … 2022 Reviewer (Sign and write full name) iii ACKNOWLEDGEMENT First of all, the group of students who made the report would like to express their most sincere thanks to the school and teachers During their study at Ho Chi Minh City University of Technology and Education, the teachers created many conditions for us to study best, imparted background and specialized knowledge, as well as supported our students support and help when the group has difficulties in the learning process and while writing the essay Next, the group of students who made the report would like to express their deep gratitude to Le Vinh Thinh Ph.D - who guided and helped the group during the implementation of the project Due to limited knowledge and lack of experience in fact-finding, so our group still has many shortcomings, we hope to receive valuable comments from teachers to draw lessons from our experience experience The implementation team would like to sincerely thank Finally, our team would like to wish the teachers a lot of health to continue to carry out their noble mission of imparting useful knowledge to the next generations of students We would like to express our gratitude to our teachers! Implementation group Nguyen Thi Nhu Quynh Huynh Thanh Tam iv INTRODUCTION Through the Covid pandemic, we have confirmed that information technology and especially the Internet play an extremely important role in the economy - culture - society of each country It helps people change the way they live, work, communicate, communicate, and access information in the fastest and most convenient way Our Vietnam is on the rise Cities develop rapidly, especially the key city Ho Chi Minh City Human resources poured into these cities are increasing day by day Therefore, the demand for finding accommodation, as well as looking for office space, is very large If in the past finding accommodation was mainly through brokers, flyers ads were both ineffective and unsightly Therefore, our topic is to design a website to advertise and search for accommodation - where people who need to rent can find a suitable house and contact the lessor in the most convenient way During years of studying at Ho Chi Minh City University of Technology and Education, the school has created conditions for students to specialized dissertations, thereby giving students the opportunity to approach how to work on small projects with full procedures With the help of the instructor as well as the comments of the reviewer will be a valuable opportunity to help the group gain more experience That is also the reason for the birth of the Website to post and search for accommodation , presented below by the group v TABLE OF CONTENTS CHAPTER OVERVIEW OF THE TOPIC 1.1 The urgency of the subject 1.2 Purpose of the topic 1.3 Research scope 1.4 Research Methods 1.4.1 Website Mogi 1.4.2 Website phongtro.123 1.5 Expected results achieved 1.5.1 Guest side 1.5.2 The accommodation seeker 's side 1.5.3 Lessor's side 1.5.4 System management side 1.5.5 System administrator side CHAPTER THEORETICAL BASIS 2.1 Architectural model MERN Stack 2.1.1 Overview of MERN 2.1.2 MongoDB 2.1.2.1 Overview 2.1.2.1.1 Database 2.1.2.1.2 Collection 2.1.2.1.3 Document 2.1.2.2 Advantages of MongoDB 2.1.3 Express vi 2.1.3.1 Definition of Express 2.1.3.2 Reasons to use Express 10 2.1.3.3 Outstanding ExpressJS Features and Benefits 11 2.1.3.3.1 Features of ExpressJS 11 2.1.3.3.2 Benefits of ExpressJS 11 2.1.4 ReactJS 12 2.1.4.1 Definition of ReactJS 12 2.1.4.2 Features of ReactJS 12 2.1.4.3 Reasons to use ReactJS 12 2.1.5 NodeJS 13 2.1.5.1 Definition of NodeJS 13 2.1.5.2 Features of NodeJS 13 2.1.5.3 NodeJS Operation 14 2.1.5.4 NodeJS Pros and Cons 14 2.1.5.4.1 Advantages of NodeJS 14 2.1.5.4.2 Disadvantages of NodeJS 15 CHAPTER MODELING REQUIREMENTS 16 3.1 Requirement modeling 16 3.2 General Usecase Diagram 18 3.3 Usecase specification 19 3.3.1 For account registration 19 3.3.2 Login usecase schema 19 3.3.3 Usecase schema forgot password 20 3.3.4 Usecase schema see homepage 21 vii 3.3.5 Usecase diagram to search for rooms for rent 22 3.3.6 Usecase diagram to view rental details 22 3.3.7 Usecase diagram to evaluate rental rooms 23 3.3.8 Usecase diagram to store rental information 24 3.3.9 Usecase schema to register as a tenant 25 3.3.10 Usecase diagram for managing rental information 26 3.3.11 Usecase diagram of transaction management 28 3.3.12 Usecase diagram of account management 29 3.3.13 Usecase diagram to buy membership package 30 3.3.14 Messaging usecase diagram 31 3.3.15 Usecase diagram view statistics 32 3.3.16 Usecase diagram of revenue management 33 3.3.17 Usecase diagram for managing rental information 34 3.3.18 Usecase diagram of tenant management 35 3.3.19 User management usecase diagram 36 3.3.20 System management account-level usecase diagram 38 3.3.21 Usecase diagram view statistics 38 3.4 Sequence Diagram 39 3.4.1 Sequence diagram of account registration 39 3.4.2 Log in sequence diagram 40 3.4.3 Sequence diagram forgot password 41 3.4.4 Sequential schema for searching for rental housing 42 3.4.5 Sequential diagram to view rental details 42 3.4.6 Sequential diagram of rental listing evaluation 43 viii Chapter System analysis and design 4.2.3.9 Transaction history screen Figure 4.20 Transaction history screen Description of transaction history screen No Name Service pack Reference Note Click to get a list of service package deals Click to get a list of Button package transaction Type Button Membership List Required member deals of Listview history 69 Data from API package Chapter System analysis and design 4.2.3.10 Post management screen Figure 4.21 Post management screen Description of post management screen No Name Approved Not approved Not posted yet news of Type Reference rental approved rentals Click to get the list of Button unapproved rentals Click to get a list of Button Listview 70 Note Click to get the list of Button yet List Required unpublished rentals Data taken from API Chapter System analysis and design 4.2.4 System manager screen 4.2.4.1 Login screen Figure 4.22 Login screen Description of login screen No Name Required Type Email Input Password Input Log in Button 71 Reference Note Enter the account of the manager/admin Enter password Click to log in to the system Chapter System analysis and design 4.2.4.2 Stats screen Figure 4.23 Stats screen Description of statistics screen No Name Type Data taken information from API Article number Data taken information from API User Data taken number information from API on Data taken the number of from API tenants Reference Revenue Information Required Turnover within 12 months Chart 72 Data taken from API Note Chapter System analysis and design Post of the week Chart Data taken from API 4.2.4.3 User management screen Figure 4.24 User management screen User management screen No Name List of tenants Required Type Gridview 73 Reference Data taken from API Note Chapter System analysis and design 4.2.4.4 Tenant management screen 4.2.4.4.1 All Tenant Screen Figure 4.25 All Tenant Screen Description of all tenants screen No Name List of lessor Required Type Gridview 74 Reference Data taken from API Note Chapter System analysis and design 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 No Name List of waiting Required Type lessor for Gridview approval 75 Reference Data taken from API Note Chapter System analysis and design 4.2.4.5 Rental information management screen 4.2.4.5.1 All rental information screen Figure 4.27 All rental information screen Screen description of all rentals No Name List news of rental Required Type Gridview 76 Reference Data taken from API Note Chapter System analysis and design 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 No Name List of waiting Required Type rental for Gridview approval 77 Reference Data taken from API Note Chapter System analysis and design 4.2.4.6 Report screen 4.2.4.7 Manager information screen Figure 4.29 Manager information screen Figure 4.30 Description of manager information screen No Name Required Type Avatar Image Information Input Save Button 78 Reference Note Data taken from API Data taken Enter the information from API to be edited Click to save edited information the Chapter Conclusion CHAPTER CONCLUSION 5.1 Summary In the process of implementing the project, from the time of receiving the topic until now, the group has encountered many difficulties and inevitably conflicts and controversies occurred In addition, the epidemic situation is very complicated, so the implementation of the topic as well as discussions and group meetings take place only online Although there were many difficulties, but thanks to the spirit of self-study, the spirit of teamwork, as well as the enthusiastic support of the instructors, the group successfully completed the project in accordance with the initial desire 5.2 Timeline Timeline No Time 07/03/2022 Task Member Receive graduation thesis Huynh Thanh Tam project Nguyen Thi Nhu Quynh 08/03/2022 - 10/03/2022 Make a project implementation plan 11/03/2022 - 05/06/2022 Project implementation Huynh Thanh Tam Nguyen Thi Nhu Quynh Huynh Thanh Tam Nguyen Thi Nhu Quynh 06/06/2022 - 16/06/2022 Write report Huynh Thanh Tam Nguyen Thi Nhu Quynh 5.3 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 93 Chapter Conclusion - Completing the web application is the bridge between candidates and employers in the field of information technology, meeting the initial goals 5.4 Advantages and disadvantages 5.4.1 Advantages - 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 5.4.2 Defect - Due to using the free environment of the Heroku cloud platform, the response is not very fast It is especially worth noting that the Heroku server will automatically go to sleep if after a period of time there is no user to access the system - 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 5.4.3 Difficult 5.4.4 Technological difficulties Technological difficulties No Difficult Overcome MERN stack is a new technology and the Research and refer to more team does not have much experience, so in documents from Google, the process of implementing the project, the Udemy team has difficulty in initially approaching and learning about the technology Difficulty in storing user's images and files 94 Find a solution to save Chapter Conclusion images on firebase 5.4.5 Difficulty in implementation process Difficulty in implementation process No Difficult Overcome Conflict error when pulling or pushing Use source control to manage code on github member's personal branch Having difficulty in reaching consensus Listen among group members to each other's opinions, then make a joint decision 5.5 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 5.6 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 - Expand to more provinces 95 Chapter References CHAPTER REFERENCES [1] https://www.youtube.com/c/EasyFrontend [2] https://www.youtube.com/channel/UCNSCWwgW-rwmoE3Yc4WmJhw [3] https://www.udemy.com/course/nodejs-express-mongodb-bootcamp/ [4] https://javascript.plainenglish.io/uploading-an-image-to-firebase-cloud-storage-andreturning-url-with-express-nodejs-713daac7a5d4 [5] https://socket.io/ [6] https://sandbox.vnpayment.vn/apis/docs/huong-dan-tich-hop/ 96