Trang 1 FACULTY FOR HIGH QUALITY TRAINING ADVISOR :STUDENTS:GRADUATION THESIS INFORMATION TECHNOLOGY BUILDING A WEBSITE AND A MOBILE APPLICATION FOR ACCOMODATION BOOKING NGUYỄN THIÊN BẢ
OVERVIEW
The urgency of the subject
With the advent of technology and the internet, the traditional method of booking accommodation has undergone a substantial transformation Online accommodation booking platforms have emerged as powerful tools that revolutionize the way people find and reserve lodging options for their travel needs
Online platforms provide travelers with access to an extensive range of accommodation choices, ranging from hotels, resorts, guesthouses, vacation rentals, and more These platforms often aggregate options from multiple providers, giving users a comprehensive selection tailored to their preferences and budget The ability to compare various accommodations empowers travelers to make informed decisions based on their specific needs
Online booking platforms offer real-time availability information Travelers can instantly check if a particular accommodation is available on their desired dates, ensuring transparency and avoiding potential disappointment due to overbooking or unavailability This feature enables users to plan their trips with greater accuracy and flexibility
It also allow travelers to access authentic user reviews and ratings This valuable feedback from previous guests helps prospective travelers gain insights into the quality, cleanliness, service, and overall experience of a particular accommodation This transparency promotes trust and helps users make informed decisions based on the experiences of others
In summary, the urgency of online accommodation booking lies in its ability to simplify the booking process, provide convenience, offer extensive choices, save costs, and enhance the overall travel experience With the rapid advancements in technology and increasing reliance on digital solutions, online accommodation booking has become an essential tool for travelers worldwide, catering to their needs efficiently and effectively
From idea generation to status survey, requirements definition, system design analysis, interface design, etc., to program installation, testing and completion, this article will present Full description of the project implementation process.
Purpose of project
• Create a website that is convenient for users
• A website with all basic and stand-out functions of an accommodation booking website
• Ensure stability and security for users.
Object and scope of the study
The research was conducted around two focus groups of subjects including: subjects with technological knowledge and little knowledge of technology
In which, the group of technology knowledge subjects includes 4 compulsory research subjects: ReactJS Library, NextJS library MongoDB database and Beego framework Incorporating more in the group of research subjects on technology knowledge are a number of valuable Javascript libraries
The scope of the research is set out at a general level, the researcher understands the general knowledge of the research content and can apply each knowledge content to the actual product, not placing heavy emphasis on theories.
Expected results achieved
Build an accommodation booking website with full functions and most convenient for users
STATUS SURVEY AND DETERMINATION OF
Current status survey
The survey examines key aspects such as user experience, features, mobile accessibility, customer reviews, and industry trends
• The user experience of hotel booking websites has improved over the years, with a focus on intuitive interfaces, streamlined search functionality, and easy navigation
• Many platforms now offer advanced filtering options, allowing users to specify preferences such as price range, location, amenities, and accommodation type
• Interactive maps, high-quality images, and detailed descriptions help users make informed decisions
• Hotel booking websites typically provide features like real-time availability, instant booking confirmation, and secure payment gateways
• Some platforms offer additional features such as package deals, flight bookings, car rentals, and vacation rentals, providing a comprehensive travel booking experience
• Loyalty programs and membership benefits are becoming more prevalent, rewarding frequent users with exclusive discounts and perks
• Hotel booking websites have prioritized mobile accessibility to cater to the growing number of users who book accommodations using smartphones and tablets
• Many platforms have developed dedicated mobile apps or responsive websites, ensuring a seamless booking experience across various devices
• Mobile features often include location-based searches, push notifications, and mobile-exclusive discounts
• User-generated reviews and ratings play a crucial role in the decision-making process for potential customers
• Hotel booking websites typically provide aggregated customer reviews and ratings for each listed property, helping users assess the quality and suitability of accommodations
• Traveler feedback serves as a valuable resource for future travelers, fostering transparency and accountability within the industry
• Integration of artificial intelligence (AI) and machine learning technologies is increasingly prominent, providing personalized recommendations based on user preferences and behavior
• Direct partnerships between hotels and booking platforms are growing, allowing for exclusive rates and inventory, bypassing third-party distributors
• Sustainable and eco-friendly accommodations are gaining traction, with booking platforms highlighting environmentally conscious options.
Some sample websites
• Allow multinational booking Disavantages • Too much information is displayed This may lead to confusion for the user
Table 1: Advantages and disavantages of Agoda website https://www.airbnb.com/
Advantages • Information displayed is carefully filtered
• Reliable rating and review system
• Allow host to post their own hotels, villas, townhouses … Disavantages • The user interface is quite simple
Table 2: Advantages and disavantages of Airbnb website
SYSTEM ARCHITECTURE AND USED
Overall architecture of the system
Figure 4: File structure for admin front-end
Figure 5: File structure for client front-end
Figure 6: File structure of back-end
ReactJS
ReactJS, also known as React, is an open-source JavaScript library maintained by Facebook It is a component-based framework used for building user interfaces (UI) in web applications React focuses on creating reusable UI components that efficiently update and render as data changes, providing a fast and responsive user experience
Single-Page Applications (SPA): React is commonly used for building SPAs where the entire application runs within a single web page, enhancing performance and providing a seamless user experience
Component Reusability: React promotes the development of reusable UI components, allowing developers to build complex UI structures by combining smaller, self-contained components This reusability improves development efficiency and code maintainability
Interactive User Interfaces: React enables the creation of interactive and dynamic user interfaces through its virtual DOM (Document Object Model) and efficient rendering methods This makes it suitable for applications that require frequent UI updates, such as real-time dashboards or collaborative tools
Virtual DOM: React's virtual DOM enables efficient updates by minimizing direct manipulations to the actual browser DOM This results in improved performance and responsiveness
Component-Based Architecture: React's component-based approach promotes code reusability, modularity, and maintainability Components can be easily composed and nested, making it easier to manage complex UI structures
One-Way Data Flow: React follows a unidirectional data flow, making it easier to understand and debug the application's state changes This enhances predictability and helps prevent bugs caused by unexpected state mutations
Large and Active Community: React has a vast and active community, providing extensive documentation, tutorials, and third-party libraries This community support ensures access to resources, knowledge-sharing, and continuous updates
Learning Curve: React has a learning curve, especially for developers who are new to component-based frameworks or JavaScript libraries Understanding concepts such as JSX syntax and virtual DOM may require some initial investment of time and effort
Configuration Overhead: React is a library, not a full-fledged framework To build a complete application, developers may need to configure additional tools, libraries, and build systems This can increase the setup and configuration overhead
Boilerplate Code: React alone provides the view layer of an application, so developers often need to integrate it with other libraries or frameworks to handle other aspects like routing or state management This can lead to some boilerplate code and complexity
Performance Impact: While React's virtual DOM offers performance benefits, it may not be as efficient as directly manipulating the browser DOM in certain scenarios However, this impact is usually negligible for most applications unless dealing with extremely complex UI structures
It's important to note that while React has its strengths and drawbacks, its popularity and adoption by major companies demonstrate its value and effectiveness in building modern web applications.
NextJS
Next.js is a JavaScript framework that extends React and provides additional features to simplify the development of server-rendered React applications It allows developers to build modern web applications with server-side rendering, static site generation, client-side rendering, and API routes, among other capabilities
Server-Side Rendering (SSR): Next.js excels at server-side rendering, which means the initial rendering of pages happens on the server before sending them to the client This approach improves the page load time and facilitates better SEO performance
Static Site Generation (SSG): Next.js supports static site generation, enabling developers to pre-render static HTML pages at build time This approach is ideal for content-driven websites, blogs, and landing pages, as it allows for improved performance and reduced server load
Single-Page Applications (SPAs): Next.js can be used to build client-side rendered
SPAs, where the initial page is rendered on the client-side and subsequent interactions are handled by React
API Routes: Next.js provides a simple way to create serverless API routes within your application, enabling easy integration with external services or building custom backend functionality
Performance: Next.js optimizes website performance through features like server- side rendering and static site generation, resulting in faster page loads and better user experience
SEO-Friendly: Server-side rendering and static site generation improve search engine optimization (SEO) by providing pre-rendered HTML content that search engines can easily crawl and index
Developer Experience: Next.js offers a great development experience with features like automatic code splitting, hot module replacement, and built-in TypeScript support It provides a smooth development workflow, allowing developers to focus on building applications rather than configuring complex setups
Ecosystem and Community: Next.js benefits from a large and active community, which contributes to its extensive ecosystem of plugins, libraries, and resources This support makes it easier to find solutions, learn from others, and leverage existing tools
Learning Curve: While Next.js is built on React, it has additional concepts and features to learn, especially if you're new to server-side rendering or static site generation It may require some time and effort to grasp the framework's intricacies Complexity for Simple Projects: Next.js is powerful but may be overkill for simple applications or websites that do not require server-side rendering or static site generation Using Next.js in such cases might add unnecessary complexity to the project
Limited Server Control: Next.js abstracts away many server details, which can be advantageous for most applications However, if you require granular control over the server, you may find Next.js somewhat limiting
Overall, Next.js is a versatile framework that excels in server-side rendering, static site generation, and building performant React applications It offers a range of benefits, but it's essential to consider the specific needs of your project and evaluate whether Next.js aligns with those requirements.
Beego
Beego is an open-source web application framework written in the Go programming language It follows the Model-View-Controller (MVC) architectural pattern and provides developers with a set of tools and libraries to build efficient and scalable web applications
Web Application Development: Beego is primarily used for building web applications in Go It offers a structured approach to development, making it easier to organize code and build scalable applications
API Development: Beego can be used to develop RESTful APIs, providing a framework for routing, request parsing, response formatting, and authentication
Easy to Get Started: Beego offers a simple and straightforward learning curve, making it accessible for developers new to Go or web development frameworks
MVC Architecture: Beego follows the MVC architectural pattern, promoting separation of concerns and allowing for clean code organization
Built-in Features: Beego provides a range of built-in features, including automatic routing, form validation, logging, caching, and internationalization support These features help developers save time and effort by reducing the need to build common functionalities from scratch
Scalability: Beego is designed to handle high-traffic and concurrent requests efficiently It leverages Goroutines and channels in Go to handle multiple requests concurrently, making it suitable for building scalable applications
Limited Community: Compared to some other web frameworks in different programming languages, Beego has a smaller community and ecosystem This might result in fewer available resources, plugins, and community support compared to more popular frameworks
Documentation: Although Beego has documentation, it may not be as comprehensive or up-to-date as some other frameworks Developers may need to rely on the Beego source code or community forums to find solutions to specific problems
Flexibility vs Opinionated: Beego is opinionated in its approach, which means it may enforce certain conventions and limit flexibility compared to more flexible frameworks This can be a drawback for developers who prefer a high degree of customization and flexibility
Beego is a feature-rich web application framework for building web applications and APIs in Go It offers a simple learning curve, built-in features, and follows the MVC architectural pattern While it has its strengths in terms of ease of use and scalability, it also has limitations in terms of community size and flexibility It's important for
18 developers to evaluate their specific requirements and preferences before choosing Beego or any other web framework.
MongoDB
MongoDB is a popular open-source NoSQL database management system It falls under the category of document-oriented databases, designed to store, retrieve, and manage unstructured and semi-structured data in a flexible and scalable manner MongoDB stores data in flexible, JSON-like documents, making it easy to represent complex hierarchical relationships and accommodate evolving data models
Flexible Data Model: MongoDB's document-oriented approach makes it suitable for handling a wide range of data types and structures, making it ideal for use cases with evolving or unpredictable data models
Scalability: MongoDB offers horizontal scalability by allowing data to be distributed across multiple servers, enabling high-performance and efficient scaling of read and write operations as data volumes increase
Real-time Analytics: MongoDB's ability to store and query large volumes of data in near real-time makes it well-suited for applications that require fast and complex data analysis, such as real-time analytics, logging, and event-driven systems
Content Management Systems: MongoDB's flexible schema and ability to handle a variety of data types make it a popular choice for content management systems, allowing developers to store and retrieve rich, unstructured content efficiently
Flexibility: MongoDB's flexible document-based model allows for easy and dynamic schema changes, providing agility and adaptability to evolving data requirements
Scalability and Performance: MongoDB's architecture is designed to scale horizontally, allowing for efficient distribution of data across multiple servers and delivering high-performance read and write operations
Rich Query Language: MongoDB's query language (MongoDB Query Language or MQL) offers a comprehensive set of querying capabilities, including support for complex filtering, aggregation, indexing, and geospatial queries
Replication and Fault Tolerance: MongoDB supports replica sets, providing data redundancy and automatic failover, ensuring high availability and fault tolerance in case of server failures
Lack of Transactions: MongoDB, until version 4.0, did not support multi- document ACID transactions, which could be a limitation for applications requiring complex transactional operations
Memory and Storage Requirements: MongoDB's data storage efficiency can be lower compared to traditional relational databases, requiring more memory and disk space for storing indexes and document structures
Complex Configuration: MongoDB's flexibility can lead to complex configuration and management, especially in distributed environments, requiring careful planning and expertise to optimize performance and ensure data consistency
Learning Curve: MongoDB's query language and data model may require a learning curve for developers accustomed to relational databases, as it deviates from the traditional SQL-based approach
It's worth noting that MongoDB has been continuously evolving, and some of the drawbacks mentioned above may have been addressed or improved in newer versions It's recommended to refer to the official MongoDB documentation and stay updated with the latest releases to fully understand its capabilities and limitations
REQUIREMENT MODELING
User requirements
Order Requirement Type of requirement
1 Store hotels Storage Store information of hotel such as: name, location, images, etc
2 Store news Storage Store name and content of news
3 Store rooms Storage Store information of room such as: price, number of bed, fee policy, etc
4 Store comments Storage Store content, post date, rating star of comment and information about user who post the comment
5 Store accounts Storage Store information of account such as: user name, password, etc
6 Store order Storage Store information of orser such as: check in and check
21 out date, ordered rooms, user who ordered, etc
7 Store amenities Storage Store icon and description of amenity
8 Search for hotels Search Search by location, check in and check out date, maximum of guest and additional filter
9 Calculate statistic Calculation Calculate statistic by day and month Data will be refresh after a year
10 Calculate invoice base on order
Calculation Calculate the total amount of money of an order base on number of ordered room, ordered day, guest, type of room, ordered hotel
1 Management Admin: View account info, view all available hotels
22 and rooms, view posted news, view all comments, view statistic, view all orders
Host: View host’s hotel and room, view posted news, view all comments of host’s hotel, view statistic, view all orders of host’s hotel
Customer: View all available hotels and rooms, view posted news, view comments of hotels
1 The software can be edited and upgraded to suit the requirement and needs of host
• The software interacts well with many devices
• The function buttons are arranged not too complicated and easy to see
• Functional monitors interact well with each other, creating convenience for users
3 • Databases are stored safely and easily retrieved
• The software operates stably, fast access and processing speed
4 The software can meet the user's requirements without affecting the operation of other machines
5 The design and functionality of the software can be reused for later developments
The code can be used many times and can be applied to many different programs without having to change the code too much
Identify actors and use cases
Table 8: Actors and use cases
Detailed description of each usecase and each actor
1 Login Login to client/admin side to access functions of customer/host
3 View hotel View a list hotels on a specific location
4 View news View news that are posted by host
5 Search hotel Search hotel by location, check in and check out date, number of guest and additional filter
6 Manage account Add, update, delete user account
7 Manage hotel Add, update, delete hotel and rooms of the hotel
8 Manage room Add, update, delete room and fee policy of the room
9 Manage comment Add reply comment to customer’s comment, update comment, delete reported comment
10 Manage order Add, update, delete order
11 Manage news Add, update, delete news
12 Manage statistic View statistic by day and month; export statistic to excel file
13 Manage price Add, update, delete price
(price by day, by event or percent promotion)
Use case diagrams
Figure 7: General use case diagram
Figure 8: Admin use case diagram
Figure 9: Host use case diagram
Figure 10: Customer use case diagram
Use case specifications
Describe Allow actor to log into the system
Pre-Conditional Actor know the account and login password
(2) Input user name and password
(3) Press the "Sign in" button or press Enter
(4) If the login fails, the message "Enter the wrong account name or password" The Customer/Manager re-entered the information and logged in again
(5) If the login is successful Direct to homepage of the website
Table 11: Use case Log in specification
Describe Actor registers an account in the website
(2) Actor click to the Register (Sign up) Button and will be navigated to the Register Screen (Page)
(3) Actor need to fill in all required information and have that information checked for validation before sign up
(4) Actor click on the Register to create a new account (after checking whether the account has existed or the password is correct or not)
Table 12: Use case Register specification
Describe Actor view a list of hotel in a specific location
(3) Direct to view page and show a list of hotels that match the location
Table 13: Use case View hotel specification
Describe Actor view a list of posted news
Table 14: Use case View news specification
Describe Actor search for hotels base on certain criteria
Pre-Conditional Actor know the search term
(2) Enter the search criteria then click on “Search” button or press “Enter” If the search criteria is not valid, a warning will pop up tell the user to enter search criteria again
(3) Direct to view page and show a list of hotels that match the search criteria
Table 15: Use case Search hotel specification
Describe Actor add a new account or update/delete the existed one
(2) Go to manage account page
(3) Choose according function (add/update/delete) to continue
(4) Depend on function that the actor choosed, enter the required field if needed and click on Add/Update/Delete button
Table 16: Use case Manage account specification
Describe Actor add a new hotel or update/delete the existed one
Pre-Conditional Actor logged in the website
(2) Go to manage hotel page
(4) Choose according function (add/update/delete) to continue
(5) Depend on function that the actor choosed, enter the required field if needed and click on Add/Update/Delete button
Table 17: Use case Manage hotel specification
Describe Actor add new rooms or update/delete the existed one
Pre-Conditional Actor logged in the website
(2) Go to manage hotel page
(4) Go to manage room tab
(5) Depend on function that the actor choosed, enter the required field if needed and click on Add/Update/Delete button
Table 18: Use case Manage room specification
Describe Actor add reply comment to customer’s comment or update existed one or delete reported comment
Pre-Conditional Actor logged in the website
(2) Go to manage hotel page
(4) Go to manage comment tab
(5) Depend on function that the actor choosed, enter the required field if needed and click on Add/Update/Delete button
Table 19: Use case Manage comment specification
Describe Actor add/update/delete direct or online order
Pre-Conditional Actor logged in the website
(2) Go to manage order page
(4) Depend on function that the actor choosed, enter the required field if needed and click on Add/Update/Delete button
Table 20: Use case Manage order specification
Describe Actor post a new news or update/delete the existed one
Pre-Conditional Actor logged in the website
(2) Go to manage news page
(3) Depend on function that the actor choosed, enter the required field if needed and click on Add/Update/Delete button
Table 21: Use case Manage news specification
Describe View statistic by day and month; export statistic to excel file
Pre-Conditional Actor logged in the website
(2) Go to manage hotel page
(4) Go to manage statistic tab
(5) View/exported statistic by filter
Table 22: Use case Manage statistic specification
Describe Add price by event or month, update/delete existed one
Pre-Conditional Actor logged in the website
(2) Go to manage hotel page
(4) Go to manage price tab
(5) Depend on function that the actor choosed, enter the required field if needed and click on Add/Update/Delete button
Table 23: Use case Manage price specification
SYSTEM DESIGN
Database design
No Attribute Type Range Meaning Note
2 avatar string Avatar of user
3 name string Name of user
4 phoneNumber string Phone number of user
5 address string Address of user
6 reviewCount uint Number of times a user can comment
No Attribute Type Range Meaning Note
2 username string Username of account
3 password string Password of acocunt
4 email string Email of account
5 role string Role of account
6 userID ObjectID Identity of user
7 wishListHotelIDs slice List of hotel’s identities which added to wishlist
8 wishListVillaTown houseIDs slice List of villa/townhouse’s identities which added to wishlist
No Attribute Type Range Meaning Note
2 description string Description of amenity
3 icon string Icon of amenity
No Attribute Type Range Meaning Note
2 hotelID ObjectID Identity of hotel
3 date Datetime The date comment was addes
4 content string Content of comment
5 userID ObjectID Identity of user
6 userName string Name of user who post comment
7 userAvatar string Avatar of user who post comment
8 phoneNumber string Phone number of user who post comment
9 parentID ObjectID Identity of preceded comment
10 starRating float32 Number of star that user give within comment
11 level uint8 Level of comment
12 replyComment slice List of reply comments
No Attribute Type Range Meaning Note
2 facebook string Facebook of contact
3 email string Email of contact
4 phonenumber string Phone number of contact
5 address string Address of contact
6 youtube string Youtube of contact
7 instagram string Instagram of contact
No Attribute Type Range Meaning Note
2 hotelID ObjectID Identity of hotel
3 villaID ObjectID Identity of villa
4 townHouseID ObjectID Identity of townhouse
5 name string Name of holiday
6 date Datetime Date of holiday
7 fee float32 Fee of holiday
8 promotion float32 Promotion of holiday
No Attribute Type Range Meaning Note
2 ownerID ObjectID Identity of owner
3 name string Name of hotel
4 address string Address of hotel
5 description string Description about hotel
6 images slice List of images of hotel
7 star float32 Number of stars of hotel
8 totalRoom int64 Number of rooms of hotel
9 dayOrderMaxRoom int Number of maximum rooms can ordered in one day
10 promotionDescription string Description of promotion of hotel
11 needToContact bool Check whether need to contact to book hotel false: Don’t need to contact true: need to contact
12 amenities slice List of amenities of hotel
13 rank float32 Number of review star of hotel
14 contactInfor string Contact info of hotel
15 minRoomPrice float32 Minimum price of hotel
16 deposit float32 The percent of deposit of hotel
17 images360 slice List of 360 images of hotel
18 lat float32 Latitude of hotel
19 lng float32 Longtitude of hotel
No Attribute Type Range Meaning Note
2 hotelID ObjectID Identity of hotel
3 villaID ObjectID Identity of villa
4 townHouseID ObjectID Indentity of townhouse
5 feeType int Type of monthly fee
6 month int Month that the fee is activated
7 sundayFee float32 Fee on Sunday
8 saturdayFee float32 Fee on Saturday
9 normalDayFee float32 Fee on normal day
No Attribute Type Range Meaning Note
2 title string Title of news
3 thumbnail string Thumbnail of news
4 time Datetime The time when news is post
5 tag string Tag of news
No Attribute Type Range Meaning Note
2 newsID ObjectID Identity of news
3 header string Header of news content
4 image string Image of news content
5 highLight string Highlight of news content
6 text string Content of news content
No Attribute Type Range Meaning Note
2 hotelID ObjectID Identity of hotel
4 dayPrice float32 Price by day of room
5 numberOfBed uint8 Number of beds of room
6 hourFeePolicies slice Hour fee policy of room
7 blocked bool Decide whether a room is allowed for online ordering or not
No Attribute Type Range Meaning Note
2 checkIn DateTime Check-in time of order
3 checkOut DateTime Check-out time of order
4 gmail string Email of user who book order
5 phoneNumber string Phone number of user who book order
6 userName string Username of user who book order
7 numberOfCustomer uint8 Number of customers of order
8 isFullyPaid bool Check whether user paid all fee for order true: pay all fee false: not pay all fee
9 isGroupOrder bool Check whether order is booked for group tenants or not true: order booked by group tenants false: order is not booked by group tenants
10 createdBy string Order is created by client or admin
11 mustPayDeposit float32 Amount of deposit that customer must pay
12 paidDeposit float32 Amount of money that customer paid
13 discountInPercentag e float32 Percentage of discount of order
14 discountInCash float32 Amount of discount in cash of order
15 typeOfDiscount int Type of discount of order
17 vatInPrice float32 VAT of order in cash
18 orderType uint Type of order 0: hour order 1: day order
19 hotelID ObjectID Identity of hotel
20 roomIDs slice List of room IDs of order
21 userID ObjectID Identity of user
22 roomSurcharges slice List of surcharges of order
23 totalPrice float32 Total price of order
24 remain float32 Remain fee of order
25 roomPrice float32 Default price of ordered rooms
No Attribute Type Range Meaning Note
2 name string Name of villa/townhouse
3 address string Address of villa/townhouse
4 images slice List of images of villa/townhouse
5 description string Description of villa/townhouse
6 price float32 Price of villa/townhouse
7 surchargeFee float32 Surcharge of villa/townhouse
8 promotion float32 Promotion of villa/townhouse
9 star float32 Star of villa/townhouse
10 cancelFee float32 Cancel fee of villa/townhouse
11 depositPrice float32 Percentage of deposit of villa/townhouse
13 numberOfCustomer uint8 Maximum number of customers that can order villa/townhouse
15 commentIDs slice List of comments of villa/townhouse
16 promotionDescription string Promotion description of villa/townhouse
17 needToContact bool Check whether need to contact villa/townhoue’s host for ordering
18 contactInfor string Contact info of villa/townhouse
19 available bool Check whether a villa/townhouse is ordered or not
20 amenities slice List of amenities of villa/townhouse
21 images360 slice List of 360 images of villa/townhouse
22 lat float32 Latitude of villa/townhouse
23 lng float32 Longtitude of villa/townhouse
No Attribute Type Range Meaning Note
2 checkIn DateTime Check-in time of order
3 checkOut DateTime Check-out time of order
4 gmail string Email of user who book order
5 phoneNumber string Phone number of user who book order
6 userName string Username of user who book order
7 numberOfCustomer uint8 Number of customers of order
8 isFullyPaid bool Check whether user paid all fee for order
9 isGroupOrder bool Check whether order is booked for group tenants or not
10 createdBy string Order is created by client or admin
11 mustPayDeposit float32 Amount of deposit that customer must pay
12 paidDeposit float32 Amount of money that customer paid
13 discountInPercentage float32 Percentage of discount of order
14 discountInCash float32 Amount of discount in cash of order
15 typeOfDiscount int Type of discount of order
16 vat float32 Percentage of VAT of order
17 vatInPrice float32 VAT of order in cash
18 villaID ObjectID Identity of villa
19 townhouseID ObjectID Identity of townhouse
20 userID ObjectID Identity of user
21 surcharges slice List of surcharges of order
22 villaTownhousePrice float32 Default price of villa/townhouse
23 totalPrice float32 Total price of order
24 remain float32 Remain fee of order
25 orderType uint8 Type of order
User interface design
1 Input (Account) Input account to sign in
2 Input (Password) Input password to sign in
3 Button (Sign in) Sign in the Admin page
Table 38: Log in page component
Figure 13: Log in page event diagram
1 Button (Hotel management ) User move to hotel management features
User move to villa management features
User move to town house management features
User move to News management features
User move to account management features
6 Button (Hotel bill) User move to hotel bill management features
7 Button ( Villa bill) User move to villa bill management features
8 Button (Town house bill) User move to town house bill management features
9 Setting User move to setting features
11 Button ( Edit) Move to Edit hotel page for edit information of existed hotel
12 Button ( Deleting) Delete information of existed hotel
13 Button ( Show room ) Show the room exist in the hotel
Figure 15: Admin page event diagram
1 Button (Edit hotel info) Move to edit hotel information part
2 Button (Room management) Move to room management part
3 Button (Price management) Move to price management part
Move to comment management part
Move to amenity management part
6 Button ( Statistical) Move to statistical part
7 Button ( Cancel changes) Use to cancel the changes
8 Button (Save change) Use to save the information have been updated later
Table 40: Hotel management page component
Figure 17: Hotel management page event diagram
2 Button ( Editing) Edit the information of existed villa
3 Button (Deleting ) Delete the information of existed villa
Table 41: Villa management page component
Figure 19: Villa management page event diagram
1 Button ( House addition) Add new town house
2 Button ( Editing ) Edit the information of existed town house
3 Button (Deleting ) Delete the information of existed town house
Table 42: Townhouse management page component
Figure 21: Townhouse management page event diagram
1 Button ( News addition) Add news information
2 Button ( Editing) Edit information of existed news
3 Button (Deleting ) Delete information of existed news
Figure 23: News page event diagram
1 Button ( Account addition) Add new account
2 Button ( Deleting) Delete information of existed account
3 Button (Editing) Edit information of existed account
Table 44: Account management page component
Figure 25: Account management page event diagram
1 Button ( Hotel choice ) Choose the hotel want to see bill
3 Button ( Modifying) Edit information of existed order
4 Button (Deleting ) Delete the existed order
Table 45: Hotel bill page component
Figure 27: Hotel bill page event diagram
Use account google to sign up
2 Input (Email) Type email to sign up
3 Input (Password) Type password to sign up
4 Input ( Retype password) Retype password to sign up
5 Button (Sign in) Sign in if users have account already
6 Button (Sign up) Sign up after type enough information
Table 46: Sign up page component
Figure 29: Sign up page event diagram
1 Button (Homepage) Move to home page
2 Input(Place to go) Type the place users want to go
5 Button (Choose number of people)
Choose the number of people
6 Button (Search) After type the information then search
7 Button ( News ) Move to News page
8 Button (Contact) Move to contact page
9 Button (User) Move to users page or sign up and sign in page
10 Button ( 360 image) Open 360 degree image of the hotel/villa/town house
11 Button (Map) Open map where the hotel/villa/town house locate
12 Button ( Booking) Go to the detail page for booking
Figure 31: Booking page event diagram
1 Button(Edit date) Edit the checkin and checkout date
2 Button(Edit number of people)
Edit the number of people
3 Input (Full name) Type full name
4 Input (Phone numbers) Type phone numbers
5 Input (Email) Type email to receive confirmation mail
Choose the payment method to pay
Figure 33: Payment page event diagram
Process design
Figure 34: Log in sequence diagram
Figure 36: Search hotel sequence diagram
Figure 37: Create hotel sequence diagram
Figure 38: Create order sequence diagram
Figure 39: Book hotel sequence diagram
Figure 40: Create news sequence diagram
Figure 41: Create room sequence diagram
Figure 42: Add promotion sequence diagram
Figure 43: Manage comment sequence diagram
Figure 44: Manage amenity sequence diagram
Figure 45: Export statistic sequence diagram
IMPLEMENTATION AND TESTING
Implementation
During the project, the team used following softwares:
• Use Visual Studio Code to write code
• Use ReactJS and NextJS to design user interface
• Use Beego and Golang to develop back-end
• Use MongoDB to store data
Step 1: Install programming language Golang at https://go.dev/doc/install
Step 2: Go to command prompt and run the command "go get github.com/astaxie/beego" to install Beego framework
Step 3: Run the command "go get github.com/beego/bee" to install bee tool
Step 4: Create git repository, open command prompt as that folder Run the command "git clone https://github.com/hoangnc1709/tre-booking-be.git " to get the source code of back-end
Step 5: Direct to folder "server" and run the command "bee run" to start the project
Step 6: Access the address "http://localhost:8080/"
Step 1: Run the command "git clone https://github.com/ngochienhv/che-booking- fe.git" to get the source code of front-end
Step 2: Add env file to main folder of the repository with content as below: NEXT_PUBLIC_API_HOST = "http://trebaybooking.com/api/v1"
NEXT_PUBLIC_IMAGE_URL = http://trebaybooking.com/static/images
Step 3: Open command prompt and run the command "yarn install" to install required packages for the project
Step 4: Run the command "yarn dev" to start the project
Step 5: Access the address "http://localhost:3000/"
Test Plan
The objective of the test is to verify that the functionality of the Website For Selling Train Ticket works according to the specifications
The test will execute and verify the test scripts, identify, fix and retest all high and medium severity defects per the entrance criteria, prioritize lower severity defects for future fixing
The final product of the testing is:
• A complete and ready-to-go website
• A set of stable test scripts that can be reused for Functional
• Ticket issuance is the same as the requested data and is available in the system before the Functional Test starts
• Exploratory Testing would be carried out once the build is ready for testing
• Performance testing is not considered for this estimation
• All the defects would come along with a snapshot JPEG format
• The Test Team will be provided with access to Test environment via VPN connectivity
• The Test Team assumes that all necessary inputs required during the design and execution of the Test will be appropriately supported by someone with experience
• Test case design activities will be performed by each people in the team
• Test environment and preparation activities will be owned by Dev Team
• Dev team will provide Defect fix plans based on the Defect meetings during each cycle to plan
• The same will be informed to Test team prior to start of Defect fix cycles
• Any defect fixes planned will be shared with Test Team prior to applying the fixes on the Test environment
• Project Manager will review and sign-off all test deliverables
• The project will provide test planning, test design and test execution support
• Test team will manage the testing effort with close coordination with Project Manager
• Project team has the knowledge and experience necessary, or has received adequate training in the system, the project and the testing processes
• The system will be treated as a black box; if the information shows online and correct with the report, it will be assumed that the database is working properly
• During Functional testing, testing team will use preloaded data which is available on the system at the time of execution
• The Test Team will be perform Functional testing only on the Website For Selling Train Ticket
• Testing will be focused on meeting the business objectives, and quality
• There will be common, consistent procedures for all teams supporting testing activities
• Testing processes will be well defined, yet flexible, with the ability to change as needed
• Testing activities will build upon previous stages to avoid redundancy or duplication of effort
• Testing environment and data will emulate a production environment as much as possible
• Testing will be a repeatable, quantifiable, and measurable activity
• Testing will be divided into distinct phases, each with clearly defined objectives and goals
• There will be entrance and exit criteria
In functional testing, test data will be stored in Excel file for testing activities
There will be two cycles for functional testing Each cycle will execute all the scripts The objective of the first cycle is to identify any blocking, critical defects, and most of the high defects It is expected to use some work-around in order to get to all the scripts
The objective of the second cycle is to identify remaining high and medium defects, remove the work-around from the first cycle, correct gaps in the scripts and obtain performance results
Purpose of testing Ensure the functions tested work correctly according to the required specification
Technique Execute all possible scenarios for each functional group, using valid and invalid data to determine:
- Expected results when valid data is used
- Appropriate warning appears when invalid data is used
Standard stop All designed test cases are executed
All errors found are clearly documented to help the developer fix them
How to test Manual manual testing, sequentially following the steps defined in the testcase
Exception handling List all related issues that arise during test execution
1 (Critical) + This bug is critical enough to crash the system, cause file corruption, or cause potential data loss
+ It causes an abnormal return to the operating system (crash or a system failure message appears)
+ It causes the application to hang and requires re-booting the system
2 (High) + It causes a lack of vital program functionality with workaround
3 (Medium) + This Bug will degrade the quality of the
System However there is an intelligent workaround for achieving the desired functionality - for example through another screen
+ This bug prevents other areas of the product from being tested However other areas can be independently tested
4 (Low) + There is an insufficient or unclear error message, which has minimum impact on product use
5(Cosmetic) + There is an insufficient or unclear error message that has no impact on product use
Personal computer (no Internet needed)
Functions of the application will be tested in Google Chrome browser (Version 107.0.5304.107)
Operating system: Windows 10 Home Single Language.
Test Process
• A unit is the smallest piece of software that can be tested
• Unit testing refers to tests to verify the functionality of a particular part of code, usually at the function level In an object-oriented environment, unit testing is often used at the class level and testing the smallest units including constructors and destructors
• Unit testing is usually done by programmers This should be done as early as possible in the coding phase and throughout the software development cycle
A function can have multiple tests, to catch cases or branches in the code
We are using this technique for testing the combination of functions in our project
We have demoed this technique in Chapter 4 The testing process will check whether the functions work together correctly based on the user requirement
Integration testing combines the components of an application and tests as a finished application While Unit Test tests individual components and Units, Integration Test brings them together and tests the communication between them
Integration Test has 2 main goals:
• Detect communication errors occurring between Units
• Integrate single units into small systems (subsystems) and finally a complete system (system) preparing for system-level testing (System Test)
There are 4 types of tests in Integration Test:
• Structure Test: Similar to White Box Test (testing to ensure that the internal components of a program run properly), it focuses on the operation of internal structural elements of the program such as instructions and internal branches
• Functional Test: Similar to Black Box Test (testing only focuses on the function of the program, not interested in the internal structure), only examines the function of the program according to the technical requirements
• Performance Test: Test the operation of the system
• Stress Test: Test the system's limits
We are using this technique for testing functions in our project We have demoed this technique in 6.2.4 The testing process will check whether the functions separately work correctly based on the user requirement
System testing (ST) includes a series of tests to verify that all the components of a system are properly integrated The purpose of ST is to make sure the whole system works as the customer wants
Usually, this type of check takes a lot of effort and time In many cases, testing requires some auxiliary equipment, specific software or hardware, especially real- time applications, distributed systems, or embedded systems At the system level, testers also look for defects, but the focus is on evaluating the performance, operation, reliability and other quality related requirements of the whole system System test usually has the following types of tests:
• Functional Test: ensure that the behavior of the system meets the design requirements
• Performance Test: ensure optimal allocation of system resources (eg memory) to achieve targets such as processing time or query response
• Stress Test or Load Test: Make sure the system operates properly under high pressure
• Security Test: ensure the integrity and security of the data and of the system
• Recovery Test: ensuring the system is capable of recovering to a previous stable state in the event of a loss of resources or data; especially important for transaction systems such as online banking
In this project, we create many constraints, transactions, … For the transaction, we create and test it in database to ensure the recovery event when losing data Furthermore, we test each function according to the user requirement to ensure that the behavior of project meet the design requirement Because we use local database, and the source is not too big so it could work at an optimal way in some respects
There are two methods for acceptance test:
• Alpha Test: carried out where the organization develops but is not tested by the development team, but by the customer
• Beta Test: made by customers or potential customers power in their place Because we are developer team, and this is a course project so we do not have customer or organization However, to demo this kind of test, some members work as a stranger/customer and test our project and we also invite our friends to use our project
White box testing, also known as structural testing or clear box testing, is a software testing technique that involves testing the internal workings of an application or system In this approach, the tester has access to the code and is aware of the internal structure, design, and implementation of the system
The primary goal of white box testing is to ensure that the code is functioning as intended and meets the specified requirements This type of testing focuses on verifying the internal logic, flow of data, and algorithms used in the code
Some of the commonly used techniques for white box testing include code coverage analysis, path testing, control flow testing, data flow testing, and mutation testing
White box testing can be used for various purposes, including:
• Verifying the correctness of the code,
We use white box testing to ensure that the code is reliable, robust, and performs as intended, while also improving its quality and maintainability
Black box testing is a software testing technique that focuses on testing the functionality of an application or system without any knowledge of its internal workings, design, or implementation In this approach, the tester is only concerned with the inputs and outputs of the system and how it behaves under different conditions
Black box testing is typically performed from a user's perspective, where the tester assumes the role of a typical user and tests the system based on its expected behavior Some of the commonly used techniques for black box testing include equivalence partitioning, boundary value analysis, decision table testing, state transition testing, and exploratory testing
In this project, black box testing help ensure that the system meets the specified requirements and functions as expected under various scenarios, while also identifying potential usability and functionality issues
CONCLUSION
Achievements
• Gained a deep understanding of software development processes and techniques, including agile development methodologies, software testing and quality assurance, and user experience design
• Understand more about project management principles and practices to software development projects to ensure that they are completed on time, within budget, and to the required quality standards
• Improves the ability to work effectively in a team Furthermore, the process teaches effective project planning, including how to initiate and distribute tasks evenly among team members
• Developed a wide range of technical, interpersonal, and teamwork skills throughout the project
• Strengthened our problem-solving skills by identifying and resolving technical issues, managing project risks, and adapting to changing project requirements
• Developed a accommodation booking website allows customers to search for and book accommodations quickly and easily, providing them with a seamless user experience
• The website is reliable and performs well, ensuring that customers have a positive experience when using it
• The website delivered a wide range of accommodation options, real-time availability, competitive pricing, and convenient booking features, meeting the needs and expectations of both travelers and accommodation providers
Strengths and Drawbacks
• The website is designed with ease of maintenance and future development in mind, ensuring that any updates or changes can be made quickly and efficiently
• The website also provide a mobile app version for more convenient for customers
• The website included an extensive choice of accommodations, convenience and efficiency in the booking process, real-time availability information, competitive pricing, and user reviews and ratings for informed decision- making
• Effective communication, agile development methodologies, and attention to detail
• The website currently does not provide services for many places
• The project experienced delays due to unforeseen technical issues that required additional time and resources to resolve
• We also encountered some communication breakdowns between team members that led to misunderstandings and mistakes.
Future Work
• Enhancing the website's search functionality to allow customers to search for hotels by additional criteria, such as: distance to center, bed type deals and discounts, etc
• Expanding website to allow booking in all over the world
1 TypeScript Quickly (2020, February 10) Scribd https://www.scribd.com/book/511816861/TypeScript-Quickly
2 Crockford, D (2006) The application/json Media Type for JavaScript Object Notation (JSON) https://doi.org/10.17487/rfc4627
3 Qing, F., Jiao, L., Dai, C., Ziqiang, D., & Zhang, R (2019) Golang-Based POI Discovery and Recommendation in Real Time https://doi.org/10.1109/mdm.2019.00114
4 Li, C., & Yang, W (2014) The distributed storage strategy research of remote sensing image based on Mongo DB https://doi.org/10.1109/eorsa.2014.6927858
5 Liu, S S., & Mattila, A S (2017) Airbnb: Online targeted advertising, sense of power, and consumer decisions International Journal of Hospitality Management,
6 Tích hợp cổng thanh toán Vn-Pay với ứng dụng của bạn - NTechDevelopers
NTechDevelopers - Programs must be written for people to read, and only incidentally for machines to execute https://blog.ntechdevelopers.com/tich-hop- cong-thanh-toan-vn-pay-voi-ung-dung-cua-ban/
7 Set up online and mobile payment gateway integration (n.d.) https://developer.paypal.com/docs/online/
8 System Design VN (2023) Thiết Kế Hệ Thống Airbnb - Viblo Viblo https://viblo.asia/p/thiet-ke-he-thong-airbnb- x7Z4DYX2JnX?fbclid=IwAR3b3YZ9WohLrKXLtyulZTCstJrMtqCfNj6ajEK1vsf 11zHMZL794pNze24
9 YvonneDev (2022, August 12) Meet Mantine: A TS-Based Open-Source React Components Library Medium https://javascript.plainenglish.io/new-popular- replacement-ui-mantine-829aca3be18a
10 Vitejs (n.d.) GitHub - vitejs/vite-plugin-react: The all-in-one Vite plugin for React projects GitHub https://github.com/vitejs/vite-plugin-react
11 Agrawal, A (2021, December 12) Building an API Using Beego + Swagger - MDG Space - Medium Medium https://medium.com/mobile-development- group/how-beego-swagger-can-make-coding-an-api-easier-227b56055cbc
12 Reduxjs (n.d.) GitHub - reduxjs/redux-thunk: Thunk middleware for Redux GitHub https://github.com/reduxjs/redux-thunk