Youth International University
Unit 10: Website Design and Development
Assignment 2: Development Hotel Online Booking Website with technologies, tools and
techniques
Lin Thura Aung
21 Batch
1
Table of Contents
P5 .................................................................................................................................................... 2
Introduction of Web Design ........................................................................................................ 2
Wireframe Design ....................................................................................................................... 3
Home Page .............................................................................................................................. 3
Rooms Page ............................................................................................................................ 4
Gallery Page ............................................................................................................................ 5
Review Page............................................................................................................................ 6
Promotion Page ....................................................................................................................... 7
Contact Page ........................................................................................................................... 8
Booking Details Page .............................................................................................................. 9
Admin Page........................................................................................................................... 10
Site Map .................................................................................................................................11
P6 .................................................................................................................................................. 12
Design And Documentation of Website .................................................................................... 12
Home Page ............................................................................................................................ 12
Room Page ............................................................................................................................ 13
Gallery Page .......................................................................................................................... 14
Promotion Page ..................................................................................................................... 15
Review Page.......................................................................................................................... 16
Contact Page ......................................................................................................................... 17
Booking Page ........................................................................................................................ 18
Admin Page........................................................................................................................... 19
P7 .................................................................................................................................................. 20
Check Different browser and browser version ......................................................................... 20
2
Test with difference screen resolution ...................................................................................... 22
Check For Required Content .................................................................................................... 24
Check for required Graphic ...................................................................................................... 25
Text Hyperlinks ......................................................................................................................... 25
Check Spelling .......................................................................................................................... 28
Keywords in page title .............................................................................................................. 28
P5
Introduction of Web Design
Welcome to this hotel reservation system website, which provides a convenient way for travelers
to book their stay. The platform features a range of helpful pages, including a home page with an
overview of the hotel and any featured promotions or special offers.
The room page contains detailed descriptions and photos of each available room, along with
information on rates and availability. The promotion page showcases current discounts and offers,
with details and call-to-action buttons for booking or further exploration. The gallery page provides
high-quality photos of the hotel's amenities and surroundings And the reviews page features
testimonials and ratings from past guests. The contact page provides contact information for the
hotel, and the booking details page summarizes the booking information and payment options. The
admin page provides manage hotel rooms and booking.
The code for this web page was written using HTML, CSS, PHP, and Bootstrap. HTML, CSS,
PHP, and Bootstrap were used to create this web page. This web page was built with a combination
of HTML, CSS, PHP, and Bootstrap. The technology stack for this web page includes HTML,
CSS, PHP, and Bootstrap.
3
Wireframe Design
Home Page
The home page is a link to all the other pages and provides information about the company. It also
displays pictures of some rooms offered by the company. The footer of the page shows reviews
and contact information for the company.
4
Rooms Page
The Rooms page is connected to all other pages and displays all the rooms offered by the company.
Each room has a "Book Now" button. The footer of the page shows reviews and contact
information for the company.
5
Gallery Page
The Gallery page is connected to all other pages and displays some of the rooms offered by the
company. The footer of the page shows reviews and contact information for the company.
6
Review Page
The Reviews page is connected to all other pages and displays client reviews for the company.
This page shows reviews and the footer of this page shows contact information for the company.
7
Promotion Page
The Promotion page is connected to all other pages and displays all the promotion rooms offered
by the company. Each room has a "Book Now" button. The footer of the page shows reviews and
contact information for the company.
8
Contact Page
The contact page connects to all other pages and provides information about the company and how
to get in touch with them. The company's reviews and contact information are also located in the
footer of the website.
9
Booking Details Page
The booking page is connected to all other pages and allows customers to make reservations. It
contains all the necessary details for booking, and customers can complete their reservations on
this page. The company's reviews and contact information are also located in the footer of the
website.
10
Admin Page
The Admin Page displays a table of hotel rooms. It also includes forms for inserting, deleting, and
updating the information in the table.
11
Site Map
12
P6
Design And Documentation of Website
Home Page
This is the main page of the 'Golden Dragon Hotel Reservation' website, which consists of three
parts: the header, body, and footer. The header includes the website logo and links to other pages
13
on the website, such as Rooms, Gallery, Promotions, Reviews, and Contact Us. The body of the
page provides a detailed explanation of the company and showcases some of the rooms available.
The footer displays customer reviews and contact information for the Golden Dragon company.
Room Page
This is the room page of the 'Golden Dragon Hotel Reservation' website, which consists of three
parts: the header, body, and footer. The header includes the website logo and links to other pages
14
on the website, such as Home, Gallery, Promotions, Reviews, and Contact Us. The body of the
page provides all of the rooms that available from the company. And also have book now button
to book the rooms. The footer displays customer reviews and contact information for the Golden
Dragon company.
Gallery Page
15
This is the gallery page of the 'Golden Dragon Hotel Reservation' website, which consists of three
parts: the header, body, and footer. The header includes the website logo and links to other pages
on the website, such as Rooms, Home, Promotions, Reviews, and Contact Us. The body of the
page provides some of the rooms that available from the company. The footer displays customer
reviews and contact information for the Golden Dragon company.
Promotion Page
16
This is the promotion page of the 'Golden Dragon Hotel Reservation' website, which consists of
three parts: the header, body, and footer. The header includes the website logo and links to other
pages on the website, such as Home, Gallery, Rooms, Reviews, and Contact Us. The body of the
page provides all of the promotion rooms that available from the company. And also have book
now button to book the rooms. The footer displays customer reviews and contact information for
the Golden Dragon company.
Review Page
This is the gallery page of the 'Golden Dragon Hotel Reservation' website, which consists of three
parts: the header, body, and footer. The header includes the website logo and links to other pages
on the website, such as Rooms, Home, Promotions, Gallery, and Contact Us. The body of the page
provides customer reviews. The footer displays contact information for the Golden Dragon
company.
17
Contact Page
This is the gallery page of the 'Golden Dragon Hotel Reservation' website, which consists of three
parts: the header, body, and footer. The header includes the website logo and links to other pages
on the website, such as Rooms, Home, Promotions, Reviews, and Gallery. The body of the page
provides details contact of ‘Golden Dragon’. The footer displays customer reviews and contact
information for the Golden Dragon company.
18
Booking Page
This is the booking details page of the 'Golden Dragon Hotel Reservation' website, which consists
of three parts: the header, body, and footer. The header includes the website logo and links to other
pages on the website, such as Rooms, Home, Promotions, Reviews, Contact and Gallery. The body
of the page provides details booking. The footer displays customer reviews and contact information
for the Golden Dragon company.
19
Admin Page
20
The 'Golden Dragon Hotel Reservation' website's admin page is where hotel room management
takes place. This page includes a table for hotel rooms, as well as forms for inserting, deleting, and
updating rooms.
P7
Check different browser and browser version
✓
Test with different screen resolution
✓
Check for required content
✓
Check for required graphic
✓
Test Hyperlinks
✓
Form processing
✓
Check spelling
✓
Keywords in page title
✓
Check Different browser and browser version
With Microsoft Edge Browser.
21
With Chrome Browser.
22
Test with difference screen resolution
23
24
Laptop View
Tablet View
Phone View
Check For Required Content
Arrive home page when user click ‘home’
button.
Arrive rooms page when user click ‘rooms’
button.
Arrive gallery page when user click ‘gallery’
button.
Arrive review page when user click ‘review’
button.
Arrive promotion page when user click
‘promotion’ button.
Arrive contact page when user click ‘contact’
button.
Arrive booking details page when user click
‘book now’ button.
25
Check for required Graphic
Text Hyperlinks
26
Insert Form of Admin Page.
27
Update Form of Admin Page.
Delete Form of Admin Page.
28
Check Spelling
Keywords in page title