Develop Hotel Booking System

Annexure -I
Micro-Project Report
“Develop Hotel Booking System” .
1.0 Rationale
The "Hotel Booking System" has been developed to override the problems prevailing in the
practicing manual system. This software is supported to eliminate and in some cases reduce the
hardships faced by this existing system. Moreover this system is designed for the particular need of
the company to carry out operations in a smooth and effective manner. The application is reduced
as much as possible to avoid errors while entering the data.
It also provides error message while entering invalid data. No formal knowledge is needed for
the user to use this system. Thus by this all it proves it is user-friendly. Hotel Booking System , as
described above, can lead to error free, secure, reliable and fast management system. It can assist
the user to concentrate on their other activities rather to concentrate on the record keeping. Thus it
will help organization in better utilization of resources.
Every organization, whether big or small, has challenges to overcome and managing the
informations of Rooms, Hotel, Payments, Customers, Bookings. Every Hotel Booking System has
different Hotel needs, therefore we design exclusive employee management systems that are
adapted to your managerial requirements. This is designed to assist in strategic planning, and will
help you ensure that your organization is equipped with the right level of information and details
for your future goals. Also, for those busy executive who are always on the go, our systems come
with remote access features, which will allow you to manage your workforce anytime, at all times.

2.0 Aims/Benefits of the Micro-Project

1.Convenience of booking services from online platform.
2.It provides users with real-time availability about their bookings.
3.Users can have their personalized recommendations and promotions on booking history.
4.A reservation and booking website can increase customer engagement.

3.0 Course Outcomes Achieved

a. Create interactive web pages using program flow control structure.
c. Create event based web forms using Java script.
d. Use JavaScript for handling cookies.
f. Create Menus and navigations in web Pages.
4.0 Actual Methodology Followed
First of all, we came across several micro project topics for the selection. Later we came
across to the discussion with the group then we decided to choose the topic of “Develop hotel
booking system” the topic is on Develop hotel booking system using JavaScript. We started to
collect information related to this topic. Later on, we made our proposal for this topic on “Develop
hotel booking system using JavaScript”. We collected information through various sources like our
textbook and also from Internet. With the help of gathered information we collected on the internet
and also with the reference of books as well as we made report for this and submitted to out subject
teacher.

COMPUTER DEPT(JPK) Page 1

Develop Hotel Booking System

4.1 Data Collected

To create a simple hotel booking system in JavaScript and collect data, you can use HTML,
JavaScript, and potentially a back-end server to store the data. Here's a basic example of how you
can collect data for a number guessing game in JavaScript

Basic Knowledge of HTML

Basic Knowledge of JavaScript
Used Methods:
document.getElementById(“given_id”) Method: The document.getElementById() method is used
to fetch an element from the HTML page having the id as provided (specified) by the user. The
“.value” is used to access the value of the HTML element accessed.
Window Object()
The window object represents an open window in a browser.
If a document contain frames (<iframe> tags), the browser creates one window object for the HTML
document, and one additional window object for each frame.
Syntax: Window.object()
ScrollX property():
The screenX property returns the x (horizontal) coordinate of a window, relative to the screen.
window.screenX
The scrollX property returns the pixels a document has scrolled from the upper left corner of the
window.
The scrollX property is read-only.
ScrollY property():
The scrollY property returns the pixels a document has scrolled from the upper left corner of the
window.
The scrollY property is read-only.
pageXOffset():
The pageXOffset property returns the pixels a document has scrolled from the upper left corner
of the window.
The pageXOffset property is equal to the scrollX property.
The pageXOffset property is read-only.
pageYOffset():
The pageYOffset property returns the pixels a document has scrolled from the upper left corner
of the window.
The pageYOffset property is equal to the scrollY property.
The pageYOffset property is read-only.

Advantages:

 No longer answering phone calls.

 More bookings, fewer cancellations.
 More upselling opportunities.
 Secure and fast payments.
 Everything is online.
 Make informed decisions.
 Make bookings accessible through resellers.
 No more human errors.

COMPUTER DEPT(JPK) Page 2

Develop Hotel Booking System

Disadvantages:

 You need Internet access. ...

 You need to be ready for an influx of new customers. ...
 Not all online booking systems are created equal. ...
 Avoid booking systems that don't bring you new quality customers
 You needed internet access.
 Reliable internet access is required to check reservations and add bookings that are made
over the phone.

4.2 Design / Actual Procedure Followed (Algorithm/Flowchart)

Algorithm-
STEP 1 : In the first step, we will select the test factors and rank them. The selected test
factors such as reliability, maintainability, portability or etc, will be placed in the matrix
according to their rank.
STEP 2 : Enter the valid phone number for login.
STEP 3 : Then,Enter the valid email id.
STEP 4 : All the fields such as Hotel, Services, Bookings are validated and does not take
invalid values.
STEP 5 : Each form for Hotel, Rooms,Customers can not accept blank value fields.
STEP 6 : Preparation of the possible test data with all the validation check.

COMPUTER DEPT(JPK) Page 3

Develop Hotel Booking System

Flowchart:-

4.0 Implementation/Coding
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="CodePel">
<title> HTML Booking Form Example </title>
<!-- Style CSS -->
<link rel="stylesheet" href="demo.css">
<!-- Demo CSS (No need to include it into your project) -->

COMPUTER DEPT(JPK) Page 4

Develop Hotel Booking System

</head>
<body>
<header class="cd__intro">
<h1> ROYAL HOTEL PLAZZA </h1>

<p> HOTEL Booking Form </p>

<div class="cd__action">
<a href="https://www.codepel.com/forms/booking-form-html-code-free" title="Back
to download and tutorial page" class="cd__btn back">Back to Tutorial</a>
</div>
</header>
<!--$%adsense%$-->
<main class="cd__main">
<!-- Start DEMO HTML (Use the following code into your project)-->
<form class="booking-form" action="#" method="post">
<div class="elem-group">
<label for="name">Your Name</label>
<input type="text" id="name" name="visitor_name" placeholder="John Doe" pattern=[A-
Z\\sa-z]{3,20} required>
</div>
<div class="elem-group">
<label for="email">Your E-mail</label>
<input type="email" id="email" name="visitor_email"
placeholder="[email protected]" required>
</div>
<div class="elem-group">
<label for="phone">Your Phone</label>
<input type="tel" id="phone" name="visitor_phone" placeholder="498-348-3872"
pattern=(\\d{3})-?\\s?(\\d{3})-?\\s?(\\d{4}) required>
</div>
<hr>
<div class="elem-group inlined">
<label for="adult">Adults</label>
<input type="number" id="adult" name="total_adults" placeholder="2" min="1" required>
</div>
<div class="elem-group inlined">
<label for="child">Children</label>

COMPUTER DEPT(JPK) Page 5

Develop Hotel Booking System

<input type="number" id="child" name="total_children" placeholder="2" min="0"

required>
</div>
<div class="elem-group inlined">
<label for="checkin-date">Check-in Date</label>
<input type="date" id="checkin-date" name="checkin" required>
</div>
<div class="elem-group inlined">
<label for="checkout-date">Check-out Date</label>
<input type="date" id="checkout-date" name="checkout" required>
</div>
<div class="elem-group">
<label for="room-selection">Select Room Preference</label>
<select id="room-selection" name="room_preference" required>
<option value="">Choose a Room from the List</option>
<option value="connecting">Connecting</option>
<option value="adjoining">Adjoining</option>
<option value="adjacent">Adjacent</option>
</select>
</div>
<hr>
<div class="elem-group">
<label for="message">Anything Else?</label>
<textarea id="message" name="visitor_message" placeholder="Tell us anything else that
might be important." required></textarea>
</div>
<button type="submit">Book The Rooms</button>
</form>
<!-- END EDMO HTML (Happy Coding!)-->
</main>
<footer class="cd__credit">Author: Hotel PLAZZA+ - Distributed By:Vaibhav
Sonavane <a title="Free web design code & scripts"
href="https://www.codepel.com?source=demo-page" target="_blank">CodePel</a></footer>
<!-- Script JS -->
<script src="./js/script.js"></script>
<!--$%analytics%$-->
</body>

COMPUTER DEPT(JPK) Page 6

Develop Hotel Booking System

</html>
SCRIPT
var TINY={};

function $(i){return document.getElementById(i)}

function $$(e,p){p=p||document; return p.getElementsByTagName(e)}

TINY.slideshow=function(n){
this.infoSpeed=this.imgSpeed=this.speed=10;
this.thumbOpacity=this.navHover=70;
this.navOpacity=25;
this.scrollSpeed=5;
this.letterbox='#000';
this.n=n;
this.c=0;
this.a=[]
};

TINY.slideshow.prototype={
init:function(s,z,b,f,q){
s=$(s);
var m=$$('li',s), i=0, w=0;
this.l=m.length;
this.q=$(q);
this.f=$(z);
this.r=$(this.info);
this.o=parseInt(TINY.style.val(z,'width'));
if(this.thumbs){
var u=$(this.left), r=$(this.right);
u.onmouseover=new Function('TINY.scroll.init("'+this.thumbs+'",-
1,'+this.scrollSpeed+')');
u.onmouseout=r.onmouseout=new Function('TINY.scroll.cl("'+this.thumbs+'")');
r.onmouseover=new
Function('TINY.scroll.init("'+this.thumbs+'",1,'+this.scrollSpeed+')');
this.p=$(this.thumbs)
}
for(i;i<this.l;i++){
this.a[i]={};
var h=m[i], a=this.a[i];
a.t=$$('h3',h)[0].innerHTML;
a.d=$$('p',h)[0].innerHTML;
a.l=$$('a',h)[0]?$$('a',h)[0].href:'';
a.p=$$('span',h)[0].innerHTML;
if(this.thumbs){
var g=$$('img',h)[0];
this.p.appendChild(g);
COMPUTER DEPT(JPK) Page 7
Develop Hotel Booking System

w+=parseInt(g.offsetWidth);
if(i!=this.l-1){
g.style.marginRight=this.spacing+'px';
w+=this.spacing
}
this.p.style.width=w+'px';
g.style.opacity=this.thumbOpacity/100;
g.style.filter='alpha(opacity='+this.thumbOpacity+')';
g.onmouseover=new Function('TINY.alpha.set(this,100,5)');
g.onmouseout=new Function('TINY.alpha.set(this,'+this.thumbOpacity+',5)');
g.onclick=new Function(this.n+'.pr('+i+',1)')
}
}
if(b&&f){
b=$(b);
f=$(f);
b.style.opacity=f.style.opacity=this.navOpacity/100;
b.style.filter=f.style.filter='alpha(opacity='+this.navOpacity+')';
b.onmouseover=f.onmouseover=new
Function('TINY.alpha.set(this,'+this.navHover+',5)');
b.onmouseout=f.onmouseout=new
Function('TINY.alpha.set(this,'+this.navOpacity+',5)');
b.onclick=new Function(this.n+'.mv(-1,1)');
f.onclick=new Function(this.n+'.mv(1,1)')
}
this.auto?this.is(0,0):this.is(0,1)
},
mv:function(d,c){
var t=this.c+d;
this.c=t=t<0?this.l-1:t>this.l-1?0:t;
this.pr(t,c)
},
pr:function(t,c){
clearTimeout(this.lt);
if(c){
clearTimeout(this.at)
}
this.c=t;
this.is(t,c)
},
is:function(s,c){
if(this.info){
TINY.height.set(this.r,1,this.infoSpeed/2,-1)
}
var i=new Image();

COMPUTER DEPT(JPK) Page 8

Develop Hotel Booking System

i.style.opacity=0;
i.style.filter='alpha(opacity=0)';
this.i=i;
i.onload=new Function(this.n+'.le('+s+','+c+')');
i.src=this.a[s].p;
if(this.thumbs){
var a=$$('img',this.p), l=a.length, x=0;
for(x;x<l;x++){
a[x].style.borderColor=x!=s?'':this.active
}
}
},
le:function(s,c){
this.f.appendChild(this.i);
var w=this.o-parseInt(this.i.offsetWidth);
if(w>0){
var l=Math.floor(w/2);
this.i.style.borderLeft=l+'px solid '+this.letterbox;
this.i.style.borderRight=(w-l)+'px solid '+this.letterbox
}
TINY.alpha.set(this.i,100,this.imgSpeed);
var n=new Function(this.n+'.nf('+s+')');
this.lt=setTimeout(n,this.imgSpeed*100);
if(!c){
this.at=setTimeout(new Function(this.n+'.mv(1,0)'),this.speed*1000)
}
if(this.a[s].l!=''){
this.q.onclick=new Function('window.location="'+this.a[s].l+'"');
this.q.onmouseover=new Function('this.className="'+this.link+'"');
this.q.onmouseout=new Function('this.className=""');
this.q.style.cursor='pointer'
}else{
this.q.onclick=this.q.onmouseover=null;
this.q.style.cursor='default'
}
var m=$$('img',this.f);
if(m.length>2){
this.f.removeChild(m[0])
}
},
nf:function(s){
if(this.info){
s=this.a[s];
$$('h3',this.r)[0].innerHTML=s.t;
$$('p',this.r)[0].innerHTML=s.d;

COMPUTER DEPT(JPK) Page 9

Develop Hotel Booking System

this.r.style.height='auto';
var h=parseInt(this.r.offsetHeight);
this.r.style.height=0;
TINY.height.set(this.r,h,this.infoSpeed,0)
}
}
};

TINY.scroll=function(){
return{
init:function(e,d,s){
e=typeof e=='object'?e:$(e); var p=e.style.left||TINY.style.val(e,'left'); e.style.left=p;
var l=d==1?parseInt(e.offsetWidth)-parseInt(e.parentNode.offsetWidth):0;
e.si=setInterval(function(){TINY.scroll.mv(e,l,d,s)},20)
},
mv:function(e,l,d,s){
var c=parseInt(e.style.left); if(c==l){TINY.scroll.cl(e)}else{var i=Math.abs(l+c);
i=i<s?i:s; var n=c-i*d; e.style.left=n+'px'}
},
cl:function(e){e=typeof e=='object'?e:$(e); clearInterval(e.si)}
}
}();

TINY.height=function(){
return{
set:function(e,h,s,d){
e=typeof e=='object'?e:$(e); var oh=e.offsetHeight,
ho=e.style.height||TINY.style.val(e,'height');
ho=oh-parseInt(ho); var hd=oh-ho>h?-1:1; clearInterval(e.si);
e.si=setInterval(function(){TINY.height.tw(e,h,ho,hd,s)},20)
},
tw:function(e,h,ho,hd,s){
var oh=e.offsetHeight-ho;
if(oh==h){clearInterval(e.si)}else{if(oh!=h){e.style.height=oh+(Math.ceil(Math.abs(h-
oh)/s)*hd)+'px'}}
}
}
}();

TINY.alpha=function(){
return{
set:function(e,a,s){
e=typeof e=='object'?e:$(e); var o=e.style.opacity||TINY.style.val(e,'opacity'),
d=a>o*100?1:-1; e.style.opacity=o; clearInterval(e.ai);
e.ai=setInterval(function(){TINY.alpha.tw(e,a,d,s)},20)

COMPUTER DEPT(JPK) Page 10

Develop Hotel Booking System

},
tw:function(e,a,d,s){
var o=Math.round(e.style.opacity*100);
if(o==a){clearInterval(e.ai)}else{var n=o+Math.ceil(Math.abs(a-o)/s)*d;
e.style.opacity=n/100; e.style.filter='alpha(opacity='+n+')'}
}
}
}();

TINY.style=function(){return{val:function(e,p){e=typeof e=='object'?e:$(e); return

e.currentStyle?e.currentStyle[p]:document.defaultView.getComputedStyle(e,null).getPrope
rtyValue(p)}}}();



CSS:

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
*{ margin: 0; padding: 0;}
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: inherit;
}

body{
min-height: 100vh;
display: flex;
justify-content: center;
flex-wrap: wrap;
align-content: flex-start;

font-family: 'Roboto', sans-serif;

font-style: normal;
font-weight: 300;
font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 15px;
background: #eee;
}
.cd__intro{
padding: 60px 30px;
margin-bottom: 15px;
flex-direction: column;

}
.cd__intro,
.cd__credit{
display: flex;
COMPUTER DEPT(JPK) Page 11
Develop Hotel Booking System

width: 100%;
justify-content: center;
align-items: center;
background: #fff;
color: #333;
line-height: 1.5;
text-align: center;
}

.cd__intro h1 {
font-size: 18pt;
padding-bottom: 15px;

}
.cd__intro p{
font-size: 14px;
}

.cd__action{
text-align: center;
display: block;
margin-top: 20px;
}

.cd__action a.cd__btn {
text-decoration: none;
color: #666;
border: 2px solid #666;
padding: 10px 15px;
display: inline-block;
margin-left: 5px;
}
.cd__action a.cd__btn:hover{
background: #666;
color: #fff;
transition: .3s;
-webkit-transition: .3s;
}
.cd__action .cd__btn:before{
font-family: FontAwesome;
font-weight: normal;
margin-right: 10px;
}
.down:before{content: "\f019"}
.back:before{content:"\f112"}

.cd__credit{
padding: 12px;
font-size: 9pt;
margin-top: 40px;

}
.cd__credit span:before{

COMPUTER DEPT(JPK) Page 12

Develop Hotel Booking System

font-family: FontAwesome;
color: #e41b17;
content: "\f004";

}
.cd__credit a{
color: #333;
text-decoration: none;
}
.cd__credit a:hover{
color: #60772a;
}
.cd__credit a:hover:after{
font-family: FontAwesome;
content: "\f08e";
font-size: 9pt;
position: absolute;
margin: 3px;
}
.cd__main{
background: #fff;
padding: 20px;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;

}
.cd__main{
display: flex;
width: 100%;
}

@media only screen and (min-width: 1360px){

.cd__main{
max-width: 1280px;
margin-left: auto;
margin-right: auto;
padding: 24px;
}
}

COMPUTER DEPT(JPK) Page 13

Develop Hotel Booking System

4.5 Result & Analysis

Hence we successfully performed the program code and understand the concept reguarding
code and successfully performed number guessing game.

5.0 Actual Resources Used

Name of Resource
S. No. /Material Specifications Qty. Remarks
Processor – Intel Core
1 Computer System Ram – 8GB 1 Used
Visual Studio Code 2015
2 Software Windows 11,Intel Core I5 1 Used
3 Printer Laser Jet 1 Used

6.0 Output of Micro-Projects (Program Output/Screenshot/Photos/Model

COMPUTER DEPT(JPK) Page 14

Develop Hotel Booking System

7.0 Skill Developed/ Learning outcome of this Micro-Project

 Experience teamwork
 Increase knowledge about Javascript and CSS
 Increase communication skill

8.0 Applications of Micro-Project

• User Authentication: Allow users to create accounts or sign in. Keep track of their high
scores and previous games.
• High Scores: Implement a high score leaderboard where players can compete for the top
spot based on how quickly they guess the number.
• Time Limit: Add a time limit for guessing the number to increase the challenge.
• Lives and Rewards: Give players a limited number of lives or hints, and provide rewards
or power-ups for reaching certain milestones

Mrs.Bhalerao D.N
(Subject Teacher)
************************

COMPUTER DEPT(JPK) Page 15

Develop Hotel Booking System

COMPUTER DEPT(JPK) Page 16

Develop Hotel Booking System

COMPUTER DEPT(JPK) Page 17