Online Hotel Reservation System Project in Django with Source Code
The Online Hotel Reservation System Project is created based on Python, Django, and SQLITE3 Database.
Online Hotel Reservation System Project in Django with Source Code
The Online Hotel Reservation System Project is created based on Python, Django, and SQLITE3 Database.
The Online Hotel Reservation System is a computerized system that allows your guests to make reservations at their leisure online.
With the aid of this system, you can effectively manage your company, increasing both office productivity and benefit.
An Online Hotel Reservation System has a very responsive interface, you can now access your bookings at any time and from any location as long as you have an internet connection and a laptop, mobile, or tablet.
Compared to a manual process that could take a long time to complete, booking a room online is quick, fast, and enjoyable thanks to a user-friendly interface.
Online Hotel Reservation System Project in Django: Customer Features
- Login and Logout Page
- Register Page
- Home Page
- About Us
- Contact Us
- Room and Rates
- Guest Profile
- Manage Booking Cart
- Reservation Details
- Submit Reservation
How to Create an Online Hotel Reservation System Project in Django?
Here are the steps on how to create a Online Hotel Reservation System Project in Django with Source Code.
- Step 1: Open file.
Open “PyCharm professional” after that click “file” and click “new project”.
- Step 2: Choose Django.
Next, after click “new project”, choose “Django” and click.
- Step 3: Select file location.
Then, select a file location wherever you want.
- Step 4: Create application name.
After that, name your application.
- Step 5: Click create.
Lastly, finish creating project by clicking “create” button.
- Step 6: Start Coding.
Finally, we will now start adding functionality to our Django Framework by adding some functional codes.
Functionality and Codes of the Online Hotel Reservation System Project in Django
- Create template for the reservation in Online Hotel Reservation System Project in Django.
In this section, we will learn on how create a templates for the reservation.
To start with, add the following code in your reservation.html under the folder of /templates/.
{% load static %}
{% static 'img' as baseUrl %}
<!doctype html>
<html lang="en">
<head>
<title>Myrel Hotel Reservation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Mukta+Mahee:200,300,400|Playfair+Display:400,700" rel="stylesheet">
<link rel="stylesheet" href="{% static 'css/bootstrap.css' %}">
<link rel="stylesheet" href="{% static 'css/animate.css' %}">
<link rel="stylesheet" href="{% static 'css/owl.carousel.min.css' %}">
<link rel="stylesheet" href="{% static 'css/aos.css' %}">
<link rel="stylesheet" href="{% static 'css/bootstrap-datepicker.css' %}">
<link rel="stylesheet" href="{% static 'css/jquery.timepicker.css' %}">
<link rel="stylesheet" href="{% static 'css/magnific-popup.css' %}">
<link rel="stylesheet" href="{% static 'fonts/ionicons/css/ionicons.min.css' %}">
<link rel="stylesheet" href="{% static 'fonts/fontawesome/css/font-awesome.min.css' %}">
<!-- Theme Style -->
<link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>
<header class="site-header">
<div class="container-fluid">
<div class="row">
<div class="col-4 site-logo" data-aos="fade"><a href="index.html"><em>Myrel Hotel Reservation</em></a></div>
<div class="col-8">
<div class="site-menu-toggle js-site-menu-toggle" data-aos="fade">
<span></span>
<span></span>
<span></span>
</div>
<!-- END menu-toggle -->
<div class="site-navbar js-site-navbar">
<nav role="navigation">
<div class="container">
<div class="row full-height align-items-center">
<div class="col-md-6 mx-auto text-center">
<ul class="list-unstyled menu">
<li><a href="/">Home</a></li>
<li><a href="rooms/allRooms">Rooms</a></li>
<li><a href="/About">About</a></li>
<li><a href="/Blog">Events</a></li>
<li><a href="/Contact">Contact</a></li>
<li class="active"><a href="#">Reservation Form</a></li>
</ul>
</div>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
</header>
<!-- END head -->
<section class="site-hero inner-page overlay" style="background-image: url({% static 'img/room2.jpg' %})" data-stellar-background-ratio="0.5">
<div class="container">
<div class="row site-hero-inner justify-content-center align-items-center text-center">
<div class="col-md-10 text-center" data-aos="fade-up">
<h1 class="heading">Reservation</h1>
</div>
</div>
</div>
<a class="mouse smoothscroll" href="#next">
<div class="mouse-icon">
<span class="mouse-wheel"></span>
</div>
</a>
</section>
<!-- END section -->
<section class="section contact-section" id="next">
<div class="container">
<div class="row">
<div class="col-md-7" data-aos="fade-up" data-aos-delay="100">
<form action="#" method="post" class="bg-white p-md-5 p-4 mb-5 border">
<div class="row">
<div class="col-md-6 form-group">
<label class="text-black font-weight-bold" for="name">Name</label>
<input type="text" id="name" class="form-control ">
</div>
<div class="col-md-6 form-group">
<label class="text-black font-weight-bold" for="phone">Phone</label>
<input type="text" id="phone" class="form-control ">
</div>
</div>
<div class="row">
<div class="col-md-12 form-group">
<label class="text-black font-weight-bold" for="email">Email</label>
<input type="email" id="email" class="form-control ">
</div>
</div>
<div class="row">
<div class="col-md-6 form-group">
<label class="text-black font-weight-bold" for="checkin_date">Date Check In</label>
<input type="text" id="checkin_date" class="form-control">
</div>
<div class="col-md-6 form-group">
<label class="text-black font-weight-bold" for="checkout_date">Date Check Out</label>
<input type="text" id="checkout_date" class="form-control">
</div>
</div>
<div class="row">
<div class="col-md-6 form-group">
<label for="adults" class="font-weight-bold text-black">Adults</label>
<div class="field-icon-wrap">
<div class="icon"><span class="ion-ios-arrow-down"></span></div>
<select name="" id="adults" class="form-control">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4+</option>
</select>
</div>
</div>
<div class="col-md-6 form-group">
<label for="children" class="font-weight-bold text-black">Children</label>
<div class="field-icon-wrap">
<div class="icon"><span class="ion-ios-arrow-down"></span></div>
<select name="" id="children" class="form-control">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4+</option>
</select>
</div>
</div>
</div>
<div class="row mb-4">
<div class="col-md-12 form-group">
<label class="text-black font-weight-bold" for="message">Notes</label>
<textarea name="message" id="message" class="form-control " cols="30" rows="8"></textarea>
</div>
</div>
<div class="row">
<div class="col-md-6 form-group">
<input type="submit" value="Reserve Now" class="btn btn-success text-white py-3 px-5">
</div>
</div>
</form>- Create template for the room in Online Hotel Reservation System Project in Django.
In this section, we will learn on how create a templates for the room.
To start with, add the following code in your room.html under the folder of /templates/.
{% load static %}
{% static 'img' as baseUrl %}
<!doctype html>
<html lang="en">
<head>
<title>Myrel Hotel Reservation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Mukta+Mahee:200,300,400|Playfair+Display:400,700" rel="stylesheet">
<link rel="stylesheet" href="{% static 'css/bootstrap.css' %}">
<link rel="stylesheet" href="{% static 'css/animate.css' %}">
<link rel="stylesheet" href="{% static 'css/owl.carousel.min.css' %}">
<link rel="stylesheet" href="{% static 'css/aos.css' %}">
<link rel="stylesheet" href="{% static 'css/bootstrap-datepicker.css' %}">
<link rel="stylesheet" href="{% static 'css/jquery.timepicker.css' %}">
<link rel="stylesheet" href="{% static 'css/magnific-popup.css' %}">
<link rel="stylesheet" href="{% static 'fonts/ionicons/css/ionicons.min.css' %}">
<link rel="stylesheet" href="{% static 'fonts/fontawesome/css/font-awesome.min.css' %}">
<!-- Theme Style -->
<link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>
<header class="site-header">
<div class="container-fluid">
<div class="row">
<div class="col-4 site-logo" data-aos="fade"><a href="index.html"><em>Myrel Hotel Reservation</em></a></div>
<div class="col-8">
<div class="site-menu-toggle js-site-menu-toggle" data-aos="fade">
<span></span>
<span></span>
<span></span>
</div>
<!-- END menu-toggle -->
<div class="site-navbar js-site-navbar">
<nav role="navigation">
<div class="container">
<div class="row full-height align-items-center">
<div class="col-md-6 mx-auto text-center">
<ul class="list-unstyled menu">
<li><a href="../">Home</a></li>
<li class="active"><a href="rooms/allRooms">Rooms</a></li>
<li><a href="/About">About</a></li>
<li><a href="/Blog">Events</a></li>
<li><a href="/Contact">Contact</a></li>
<li><a href="/Reservation">Reservation Form</a></li>
</ul>
</div>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
</header>
<!-- END head -->
<section class="site-hero inner-page overlay" style="background-image: url({% static 'img/room3.jpg' %})" data-stellar-background-ratio="0.5">
<div class="container">
<div class="row site-hero-inner justify-content-center align-items-center text-center">
<div class="col-md-10 text-center" data-aos="fade-up">
<h1 class="heading">Our Rooms</h1>
</div>
</div>
</div>
<a class="mouse smoothscroll" href="#next">
<div class="mouse-icon">
<span class="mouse-wheel"></span>
</div>
</a>
</section>
<!-- END section -->
<section class="section bg-light" id="next">
<div class="container">
{% for chambre in chambres %}
<div class="site-block-half d-flex bg-white" data-aos="fade-up" data-aos-delay="100">
<a href="#" class="image d-block bg-image" style="background-image: url({% static 'img/room5.jpg' %});"></a>
<div class="text">
<span class="d-block"><span class="display-4 text-primary">₱{{ chambre.prix }}</span> / per night </span>
<h2>Superior Room</h2>
<p class="lead">A superior room is a room in a hotel that is more comfortable or has better amenities than other rooms. It is ₱5000 for a standard room and ₱10000 for a superior room. Superior rooms have a beautiful view over the hills. The superior rooms are larger than the standard rooms.</p>
<p><a href="#" class="btn btn-success text-white">Book Now</a></p>
</div>
</div>
{% endfor %}
</section>- Create template for the contact us in Online Hotel Reservation System Project in Django.
In this section, we will learn on how create a templates for the contact us.
To start with, add the following code in your contact.html under the folder of /templates/.
{% load static %}
{% static 'img' as baseUrl %}
<!doctype html>
<html lang="en">
<head>
<title>Myrel Hotel Reservation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Mukta+Mahee:200,300,400|Playfair+Display:400,700" rel="stylesheet">
<link rel="stylesheet" href="{% static 'css/bootstrap.css' %}">
<link rel="stylesheet" href="{% static 'css/animate.css' %}">
<link rel="stylesheet" href="{% static 'css/owl.carousel.min.css' %}">
<link rel="stylesheet" href="{% static 'css/aos.css' %}">
<link rel="stylesheet" href="{% static 'css/bootstrap-datepicker.css' %}">
<link rel="stylesheet" href="{% static 'css/jquery.timepicker.css' %}">
<link rel="stylesheet" href="{% static 'css/magnific-popup.css' %}">
<link rel="stylesheet" href="{% static 'fonts/ionicons/css/ionicons.min.css' %}">
<link rel="stylesheet" href="{% static 'fonts/fontawesome/css/font-awesome.min.css' %}">
<!-- Theme Style -->
<link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>
<header class="site-header">
<div class="container-fluid">
<div class="row">
<div class="col-4 site-logo" data-aos="fade"><a href="index.html"><em>Myrel Hotel Reservation</em></a></div>
<div class="col-8">
<div class="site-menu-toggle js-site-menu-toggle" data-aos="fade">
<span></span>
<span></span>
<span></span>
</div>
<!-- END menu-toggle -->
<div class="site-navbar js-site-navbar">
<nav role="navigation">
<div class="container">
<div class="row full-height align-items-center">
<div class="col-md-6 mx-auto text-center">
<ul class="list-unstyled menu">
<li><a href="/">Home</a></li>
<li><a href="rooms/allRooms">Rooms</a></li>
<li><a href="/About">About</a></li>
<li><a href="/Blog">Events</a></li>
<li class="active"><a href="/Contact">Contact</a></li>
<li><a href="/Reservation">Reservation Form</a></li>
</ul>
</div>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
</header>
<!-- END head -->
<section class="site-hero inner-page overlay" style="background-image: url({% static 'img/room5.jpg' %})"data-stellar-background-ratio="0.5">
<div class="container">
<div class="row site-hero-inner justify-content-center align-items-center text-center">
<div class="col-md-10 text-center" data-aos="fade-up">
<h1 class="heading">Contact Us</h1>
</div>
</div>
</div>
<a class="mouse smoothscroll" href="#next">
<div class="mouse-icon">
<span class="mouse-wheel"></span>
</div>
</a>
</section>
<!-- END section -->
<section class="section contact-section" id="next">
<div class="container">
<div class="row">
<div class="col-md-7" data-aos="fade-up" data-aos-delay="100">
<form action="#" method="post" class="bg-white p-md-5 p-4 mb-5 border">
<div class="row">
<div class="col-md-6 form-group">
<label for="name">Name</label>
<input type="text" id="name" class="form-control ">
</div>
<div class="col-md-6 form-group">
<label for="phone">Phone</label>
<input type="text" id="phone" class="form-control ">
</div>
</div>
<div class="row">
<div class="col-md-12 form-group">
<label for="email">Email</label>
<input type="email" id="email" class="form-control ">
</div>
</div>
<div class="row">
<div class="col-md-12 form-group">
<label for="message">Write Message</label>
<textarea name="message" id="message" class="form-control " cols="30" rows="8"></textarea>
</div>
</div>
<div class="row">
<div class="col-md-6 form-group">
<input type="submit" value="Send Message" class="btn btn-success">
</div>
</div>
</form>
</div>
<div class="col-md-5" data-aos="fade-up" data-aos-delay="200">
<div class="row">
<div class="col-md-10 ml-auto contact-info">
<p><span class="d-block">Address:</span> <span>Brgy. Enclaro, Binalbagan, Negros Occidental</span></p>
<p><span class="d-block">Phone:</span> <span>09123456789</span></p>
<p><span class="d-block">Email:</span> <span>myrel@gmail.com</span></p>
</div>
</div>
</div>
</div>
</div>
</section>📌 Download the Complete Source Code for Online Hotel Reservation System Project in Django here: ⬇️⬇️⬇️
In addition, you can check out the Hotel Reservation in Laravel with source code:
Related Article
- Online Hotel Booking System Project in Laravel
Other Articles
1. Hostel Management System Project in PHP with Source Code
2. Hotel Management System Project in C with Source Code
3. Hotel Management System Project using VB.Net with Source Code
4. Hotel Management System Java Projects with Source Code
Hotel Management System Project | UML Diagrams
- **Hotel Reservation System DFD | Data Flow Diagrams**
- **Hotel Reservation System Use Case Diagram**
- **Hotel Management System Class Diagram**
- **Hotel Management System Sequence Diagram**
- **Hotel Management System Activity Diagram**
- **Hotel Management System ER Diagram | Database Design**
Conclusion
The Online Hotel Reservation System Project in Django is highly customizable and adaptable to meet specific requirements.
For further insights, I have included the UML diagrams and other articles for the Online Hotel Reservation System.
If you find this article valuable, please consider leaving a comment below and share your thoughts.
Your feedback will not only helps us to improve our content but also benefits others in the community by providing diverse insights and experiences.
Itsourcecode.com🚀
Thank you for being a part of the Itsourcecode community!
Before you leave, please consider the following:
I would appreciate it if you could show your support by clapping 50 times and following the author.
Follow us on [**Pinterest**]
Follow us on [KO-FI]
Follow us on [**Facebook**]
메타데이터
- post_id
- bdf596b67ebf
- slug
- online-hotel-reservation-system-project-in-django-with-source-code-bdf596b67ebf
- url
- https://medium.com/@pies052022/online-hotel-reservation-system-project-in-django-with-source-code-bdf596b67ebf
- canonical_url
- https://medium.com/@pies052022/online-hotel-reservation-system-project-in-django-with-source-code-bdf596b67ebf
- author_url
- https://medium.com/@pies052022
- status
- ok
- fetched_at
- 2026-07-09 13:13:48
