Đồ án room booking and rental

UNIVERSITY OF INFORMATION TECHNOLOGY FACULTY OF SOFTWARE ENGINEERING -🙚🙚🙚🙚🙚 - PROJECT REPORT ROOM BOOKING AND RENTAL Lecturer: Thai Thi Han Uyen Students: 20521486 – Dang Ba Kien 20521719 – Tran Linh Nhi Ho Chi Minh City, June 2023 Acknowledgments After studying and training at the Faculty of Software Engineeringat the University of Information Technology – VNU-HCMC In HCMC, I wasequipped with basic knowledge and practical skills to be able to complete my Project For the completion of this project, with deep gratitudeI would like to express my sincere gratitude to: Board of Directors of University of Information Technology – VNU-HCMC HCMC for creating favorable conditions for students to search and research information with a modern institute system, a variety of books and materials Close to n are the best words to Mr Nguyen Cong Hoan who has wholeheartedly helped, oriented the way to work scientifically These are very valuable suggestions not only in the process of implementing the project but also in the process of continuingto support me in the learning process and work later Finally, I would like to wish the teachers in the Faculty of Software Engineering in particularas well as the teachers at theInformation Technology School in general a lot of health and belief to continue carrying out their noble mission Ho Chi Minh City, 05 April 2023 Student Dang Ba Kien Comment ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… …… ………………………………………………………………………………………… …… ………………………………………………………………………………………… …… ………………………………………………………………………………………… …… ………………………………………………………………………………………… …… ………………………………………………………………………………………… …… ………………………………………………………………………………………… …… ………………………………………………………………………………………… …… ………………………………………………………………………………………… …… ………………………………………………………………………………………… …… ………………………………………………………………………………………… …… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… Document change record sheet Date Version Description Authors 25/5/2023 1.0 Description, system construction, functions and All Initialization 2/6/2023 1.1 Analyze requirements, build Use case diagrams and design All databases 3/6/2023 1.2 Conduct initial design of the application interface All 4/6/2023 1.3 Do the coding parallel to the interface design All 5/6/2023 1.4 Complete the functions set out as required All 6/6/2023 1.5 Handling errors and adding administrative functions for All manager 7/6/2023 1.6 Check the software and fix the errors that arise All 8/6/2023 1.7 Make a report for the system All 9/6/2023 2.0 Complete and release the system All Contents Comment Document change record sheet I Overview 13 Project overview 13 System requirement – purpose of the project 13 II State of the project 13 71.1 Actual demand 13 1.2 Development opportunities 13 72.1 Current status survey 14 III Use-case model of the Project: 16 102 123 124 Login 134.1 20 4.2 Search Place/ Beach/ Countryside/ Camping 20 4.3 Comment 21 4.4 Book Place 21 4.5 View Place 22 4.6 Manage customer 22 4.7 Manage comment 23 4.8 Manage Place/Beach/Countryside/ camping 23 IV Class diagram 24 62 73 3.1 3.2 3.3 3.4 3.5 20VI.27VII.29a 9b 91 02 13 24 1 18 18 18 19 19 20V 29VIII.2 3 3 35 56 67 68 79 10 11 12 13 14 15 3 3 38 39 40 41 42 43 44IX Summary 22 23 24 60 2X Task assignment 61 XI References: 62 I Overview Project overview Today, the application of information technology and computerization is considered as one of the decisive factors in the activities of governments, organizations, as well as companies; it plays a very important role, can make strong breakthroughs The construction of management website to serve the unique needs of organizations, companies and even individuals, today, is not strange The operation of a large-scale travel company will be enhanced and expanded if a good management website is built Starting with this idea, along with the suggestions of Ms Thai Thi Han Uyen, we have implemented the project "ROOM BOOKING AND RENTAL" as shown below System requirement – purpose of the project ● Build an intuitive, easy-to-use system ● The system has the functions of managing Places, vehicles, Countryside tickets, customers ● There are many different functions to serve the needs and purposes of users ● Completely free ● Has high practical applicability II State of the project Purpose of the system 1.1 Actual demand Place management software is software developed to apply technology to Place management Through this software system, you can easily perform operations such as managing Places, Countrysideline tickets, booking Beachs, lakes, customers… 1.2 Development opportunities Technologyization of the management process of Places, customers, lake reservations, Countryside tickets, Beach rentals Meeting the necessary needs for management in the best way makes the management process convenient, easier and more professional Description of users/forms and related entities 2.1 Current status survey Facing the reality of having to manage too many problems, the problem is to have a new system that meets the following basic requirements: - Reducing the volume of records, ensuring fast query, timely and convenient storage and update - Prepare periodic and ad hoc reports quickly and accurately - Make management operations easy - Statistics can be easily obtained - The ability to store information for a long time - Having high security 2.1.1 Organizational status 2.1.2 Description of processes: The management department logs into the system with the previously registered account View and select Place packages based on the time, location and service desired by the user The management department will check the information of the Place package Choose to pay for the travel package at the package's displayed price Choose a lake at a pre-booked example location with detailed information and services of that room service package Select the type of transportation such as Countryside or Beach rental, then view the details of the ticket Payment for services according to the price The management department can manage Places, lakes, Beach rentals, Countryside tickets Manage customers with their paid services The management department can make statistics through graphs visually 2.1.2.1 Login Actor’s Activities This use case begins when a customer click “Login” System’s reaction Actor will fill Login with the entered information that the customer provided then report an error if so System will confirm whether the information is valid or not, then Actor click the Select button Inormation will be saved and sent to the database 2.1.2.2 Choose Place Actor’s Activities System’s reaction This use case begins when the executive department clicks the “Place package” button Actor will click the “Place package” button Actor click the View button System will show the customer and appraisal report on the screen System will update the Place profile’s state and send it to staff for creating a Place Place 2.1.2.3 Choose Countryside place/Lake/Beach Rental Actor’s Activities System’s reaction This use case begins when actor clicks the “Countryside place/Lake/Beach Rental” button Actor will click the “Countryside place/Lake/Beach Rental” button -System will display Countryside place /Lake/Beach Rental sample on the screen Actor will enter choose information Actor will click the “Book now” button System will display credit Beach on the screen III Use-case model of the Project: Use-case diagram: Hình Main Use-case diagram 1.2 Sequence Diagram Hình Main sequence diagram Hình Login sequence diagram Hình 10 Place booking sequence diagram Hình 11 Customer manage sequence diagram Non-Functional Requirements 2.1 Usability - Efficiency: Customers can easily view a list of customers by different categories Easy operation, just click on the function on the title bar, the app will display the function you want to perform - Cohesion: Suitable for the office space, the company makes it easy for customers to book rooms - Easy to learn: Just 10-15 minutes to use the app 2.2 Reliability SC_1.1: The system should safely use the database SC_1.2: The system needs to secure the user's information SC_1.3: The user's password is encrypted for more security 2.3 Ability to support PC_1.1: App for windows operating system PC_1.2: Programming language: Nextjs,… PC_1.3: Database: mongoatlas , connect prisma PC_1.4: Code: UI design 2.4 Supportability To ensure safety support for users, the website will encrypt all kinds of confidential information passwords Use the libraries available on the visual studio code, if needed, and can be downloaded for use or maintenance 2.5 Design Contraints UI_1.1: Programming language: Nextjs,mongoatlas , connect prisma UI_1.2: Programming Tools: Visual Studio Code,typescript UI_1.3: Website process: must log in with a management account to perform editing functions 4.6.Reusability The source code of this app can be edited into Place booking management website Functional requirements User Requests System Functions Main Use Cases Use Case # User wants to login to the application Login UC-1.1 The user wants to log out of the app Log out UC-1.2 User wants to register an account Sign Up UC-1.3 User wants to change password Change account password UC-1.4 Admin wants to manage customer accounts Manage Accounts of Customer and Staff UC-1.5 User wants to check customer information Look up customer information UC-1.6 Users want to look up Place information Look up Place information UC-1.7 User wants to Add/Remove/Edit Place Add/Delete/Edit Places UC-1.8 User wants to Add/Remove/Edit Customer Add/Delete/Edit Customer UC-1.9 User wants to check information Look up and validate information User wants to Add/Remove/Edit calculation (basic, validate, punish) User wants to Print Payslip UC-2.1 UC-2.2 UC-2.3 Print pay slips User wants to View/Update personal information View/Update personal information User Wants Vacation UC-2.4 On leave UC-2.5 Users want to Statistics customer data (by Place, gender, major, ) UC-2.6 Customer data statistics (by Place, gender, specialty) industry, ) User wants to Update profile picture Update profile picture UC-2.7 Interface Figure 1: Login UI STT Name Type Function textLoginUserName Text Box Enter your username textLoginUserPass Text Box Enter your login password tgShowPass Toggle Switch Show password buttonLogin Button Log in to the website lbSignUpChange Label Sign up for an account guna2PictureBox2 Picture Box Exit the website Figure 2: Sign Up UI STT Name Type Function textSignUpUserName Text Box Enter your registered name tbEmail Text Box tbPhone Toggle Switch Enter customer email Enter the multiplier phone number tablets textSignUpUserPass Button Enter password textConfirmPass Label Re-enter password tgShowPassSU Toggle Switch Toggle Switch Show Password buttonSignUp Button cbPermisson Combo Box lbLoginChange Label Sign up for an account Select Customer Permissions or manage Back to login screen Figure 3: Main Customer UI STT Name Type Function btHome Button Switch to tab Home btCustomer Button Switch to tab Customer bt Button Switch to tab btPlace Button Switch to tab Place btChart Button Switch to tab Statistics guna2GradientButton1 Button Switch to tab Furlough btAbout Button Switch to tab About us btInfo Button Switch to tab Infomation btView1 btView2 Button 10 chartView Chart 11 guna2GradientPanel1 Panel 12 lbDay Label Show top top Show customer graph of Place Show the total of the Staff Show current date 13 lbTime Label Show current time 14 btSetting Picture Box Show Setting Figure 4: User Main UI STT Name Type Function btHome Button Switch to tab Home guna2GradientButton2 Button Switch to tab Pay Off guna2GradientButton1 Button Switch to tab Furlough btAbout Button Switch to tab About us btInfo Button Switch to tab Infomation btView1 btView2 Button chartView Chart guna2GradientPanel1 Panel lbDay Label Show top top Show customer graph of Place Display the total of the Staff Show current date 10 lbTime Label Show current time 11 btSetting Picture Box Show Setting Figure 5: Manage User UI STT Name Type Function btUser_Mana Button Switch to the User tab tbTimUser Text Box dataGridViewUser dataGridView Search account Display the list of accounts and time log in, log out Figure 6: Manage Customer UI STT Name Type Function tbTimNHANVIEN Text Box Looking for customers dataGridViewNV dataGridView Show list of customers btAddNew Button More staff Type Button Function Enter customer ID Figure 7: Add customer UI STT Name tbAddID tbAddName Button Enter customer name tbAddIDC Button Enter customer CCCD tbAddPhone Button Enter customer phone number tbAddEmail Button Enter Customer Email tbAddDress Button Enter Customer Address tbAddEducation Button Enter Customer Education radioButton1 radioButton2 Radio Button Select customer's gender pickerBirthday DateTime Picker Enter Customer's Birthday 10 cbPlace Check box Select Staff Place 11 cbPosition Check box Select Customer Position 12 btAdd Button Add Customer Figure 8: Manage UI STT Name Type Function Show customer list and payroll Looking for customers dataGridViewNV dataGridView tbTimL Text Box picker Date Time Picker Select month to display Figure 9: Manage Place UI STT Name picturboxAvatar Type Picture Box Function Show Customer Avatar lbTen Label Show customer name lbChucVu Label Show customer title dataGridViewNV dataGridView Show list of Places cbbDP Combo Box Select Places to display customers dataGridView1 dataGridView Show customers in the Place btDeleteDP Button Delete Place tbTimPlace Text Box Find staff in the Place btAdd Button Add Place Type Text box Function Enter the Place ID Figure 10: Add Place UI STT Name tbAddID tbAddName Text box Enter Place Name btAdd Button Add Place btCancel Button Delete Places Figure 11: Chart UI STT Name Type Function cbbStatic Combo Box Select data for statistics cbbStyle Combo Box Choose a Statistical Chart Style chartView Chart Statistical chart display Figure 12: User Manament UI STT Name dataGridViewNP btDelete Type Data Grid View Function Show leave list Button Delete a leave Figure 13: Furlough User UI STT Name dataGridViewTP Type Data Grid View Function Show list of individual rewards or punishments dataGridViewNP Data Grid View Show individual leave list btAdd Button Add leave Figure 14: Customer Information UI STT Name picturboxAvatar Type Picture Box Function Show Customer Avatar lbTen Label Show customer name lbChucVu Label Show customer title lb Label Show Customer Base lbValidate Label Show Customer btUp Button Update customer information btDetail Button Show Reward and Penalty details tbName Text Box Show Customer Name pickerBirthday Date Time Picker Show Customer's Birthday 10 tbEmail Text Box Show Customer Email 11 tbChucvu Text Box Show Customer Position 12 tbPhongBan Text Box Show Staff Place 13 btPrint Button Print customer information 14 btDelete Button Delete Customer 15 btUpdate Button Update customer information 16 guna2Button1 Button Cancel changes 17 Radio Button Show Customer Gender 18 radioButton1 radioButton2 tbIDC Text Box Show Customer Address 19 tbDiaChi Text Box Show Customer Address 20 tbPhone Text Box Show customer phone number 21 tbChuyenNganh Text Box Show Staff Specialization 22 btChangePicture Button Change Customer Avatar Figure 15: User Profile UI STT Name btChangePicture Type Button Function Change Customer Avatar picturboxAvatar Picture Box Show Customer Avatar tbUserName Text Box Show Username btChange Button Show Masked Password tbPass Text Box Show Password btChangePass Button Change the password tbName Text Box Show customer name pickerBirthday Date Time Picker Show customer birthday tbEmail Text Box Show customer email 10 tbChucvu Text Box Show customer title 11 tbPlace Text Box Show staff Place 12 Radio Button Customer gender display 13 radioButton1 radioButton2 tbIDC Text Box Show CCCD staff 14 tbDiaChi Text Box Show customer address 15 tbPhone Text Box Show customer phone number 16 tbChuyenNganh Text Box Show Customer Education STT Name Type Function dataGridViewPO Data Grid View radioButton1 Radio Button radioButton2 tbDetail Text Box pickerTime Picture Box Enter a Description of Reward or Penalty reason Choose reward or punishment time btAdd Button Add validate and penalty btCancel Button Cancel extra validate or penalty STT STT Name Type dataGridViewPONV Data Grid View Name tbPassOld tbNewPass tbConfirmPass btChange btCancel Type Text Box Text Box Text Box Button Button Show list of rewards and punishments Choose reward or punishment Function Display individual reward and punishment list Function Enter old password Enter new password Enter a new password Change the password Cancel changes University of Information Technology The Faculty of Software Engineering Appendixes 5.1 Glossary The list below contains all the necessary terms to interpret the document, including acronyms and abbreviations Term BR CBR DB MSG UC N/A UI SRS TBD ID Description Business Rule Common Business Rule Database Message Use Case Not Available or Not Applicable, used to indicate when information in a certain section could not be provided because it does not apply to this application User Interface Website Requirements Specification To be determined or to be defined Identification 5.2 Messages Message Code MSG1 MSG2 MSG3 MSG4 MSG5 MSG6 MSG7 MSG8 MSG9 MSG10 MSG11 MSG12 MSG13 Message Content “Create a successful account” “Account creation failed, please try again” “Login failure” “Code sai” “Passwords don't match” “Save successfully” “Save failure” “Are you sure you want to delete?” “Error" “Successful” “Removed” “Are you sure you want to change this information?” Button OK OK OK OK OK OK OK OK/Cancel OK OK OK “Are you sure you want to cancel your order?” OK/Cancel OK/Cancel 5.3 Issues List N/A University of Information Technology The Faculty of Software Engineering PROJECT IX Summary Development Environment ● Operating system: Windows,tailwindcss ● Database: MongoDB Atlas ● Analysis tools: Draw.io, StarUML ● IDE: Blend for Visual Studio code ● Frameworks used: Nextjs,typescript Achievement ● Having learned the basics of designing in Nextjs,typescript ● Improved the UI of the software ● Create a finished product ● Improve the knowledge of the use-case, design diagrams ● Apply knowledge of object-oriented software development process professionally ● Learn more about new engineering architecture technologies Drawbacks - The report is not too detailed and realistic - Payment methods are limited - The project haven't brought the smoothest experience yet - Having limited multi-language support - Having no user recommendations yet - Having not completed as expected Future development - Complete milk yet hidden errors - Extend the application to greater scale and scope - Integrate many new technologies - Improve software door disadvantages - Increase the security of the project University of Information Technology The Faculty of Software Engineering PROJECT X Task assignment 20521719 Trần Linh Nhi • • • • • UI Design Code frontend Make ppt Create generic database Make final report 20521486 Đặng Bá Kiên • • • • • • Create Use case diagram Create Sequence diagram Create State diagram Create Class diagram Code Backend Participate in making final report University of Information Technology The Faculty of Software Engineering PROJECT XI References: - https://www.youtube.com/watch?v=c_b_isI4vg&feature=share&fbclid=IwAR3ULlLZSqT0VAhPbGRzIFVL0937mV3i8zPTVY7nme0UJ8Js-nCT8eerWQ Airbnb, [Online] Address: https://www.airbnb.com/ [Last visited: 20/06/2023 – Browser: Microsoft Edge] Code With Antonio, [Online] Address: https://www.youtube.com/@codewithantonio [Last visited: 20/4/2023 – Browser: Microsoft Edge] NextJS Documentation, [Online] Address: https://nextjs.org/docs [Last visited: 15/6/2023 – Browser: Microsoft Edge] MongoDB Atlas, [Online] Address: https://cloud.mongodb.com/ [Last visited: 20/6/2023 – Browser: Microsoft Edge] Tailwind CSS, [Online] Address: https://tailwindcss.com/docs/installation [Last visited: 20/6/2023 – Browser: Microsoft Edge] Prisma Documentation, [Online] Address: https://www.prisma.io/docs [Last visited: 14/5/2023 – Browser: Microsoft Edge] React Icons, [Online] Address: https://react-icons.github.io/react-icons [Last visited: 20/6/2023 – Browser: Microsoft Edge]