Online Hotel Reservation System Project in Django with Source Code

Online Hotel Reservation System Project in Django with Source Code

This Online Hotel Reservation System Project in Django 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.

A 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.

To start creating a Online Hotel Reservation System Project in Python Django, makes sure that you have PyCharm Professional IDE Installed in your computer.

This Online Hotel Reservation System in Django Framework, Also includes a Download Source Code for free, just find the downloadable source code below and click download now.

About ProjectProject DetailsDefinition
Project Name Online Hotel Reservation System Project in DjangoThe Online Hotel Reservation System in Django is an easy project for beginners to learn how to build a web-based python Django project. We will provide you with the complete source code and database for the python project so that you can easily install it on your machine and learn how to program in Python Django.
Python version (Recommended)3.8 VersionPython 3.8 introduces some new syntax to the language, as well as a few small modifications to existing behavior and, most importantly, a slew of performance improvements, following in the footsteps of the previous 3.7 version.
Programming Language UsedPython Django LanguageDjango is a high-level Python web framework for building safe and maintainable websites quickly. Django is a web framework built by experienced developers that takes care of a lot of the heavy lifting so you can focus on developing your app instead of reinventing the wheel.
Developer Name itsourcecode.comFree projects containing source code in Java, PHP, Python, Django, VB.Net, Visual Basic, C, C++, C#, Javascript, and other languages are available on this website.
IDE Tool (Recommended)Sublime, Visual Studio, PyCharmSublime Text is a source code editor that is available for purchase. It comes with built-in support for a variety of programming and markup languages. Plugins, which are often community-built and maintained under free-software licenses, allow users to extend the functionality of the system. Sublime Text has a Python API to help with plugins.
Project Type Web ApplicationA web application, unlike computer-based software programs that operate locally on the device’s operating system, is application software that runs on a web server. The user uses a web browser with an active network connection to access web apps.
DatabaseSQLiteSQLite is a programming language that is used to create embedded software for devices such as televisions, cell phones, and cameras. It can handle HTTP requests with low to medium traffic. SQLite has the ability to compress files into smaller bundles with less metadata. SQLite is a temporary dataset that is used within an application to process data.
Online Hotel Reservation System Project in Django Overview

Customer Features of Online Hotel Reservation System Project in Django

  • Login and Logout Page
  • Register Page
  • Home Page
  • About Us
  • Contact Us
  • Room and Rates
  • Guest Profile
  • Manage Booking Cart
  • Reservation Details
  • Submit Reservation

Online Hotel Reservation System Project in Django Steps on How to Create a Project

Time needed: 5 minutes

Here’s the step’s on how to create a Online Hotel Reservation System Project in Django with Source Code.

  • Step 1: Open file.

    First , open “pycharm professional” after that click “file” and click “new project“.
    Create new Project for Online Hotel Reservation System Project in Django with Source Code

  • Step 2: Choose Django.

    Next, after click “new project“, choose “Django” and click.
    choose django for Online Hotel Reservation System Project in Django with Source Code

  • Step 3: Select file location.

    Then, select a file location wherever you want.
    Create location name for Online Hotel Reservation System Project in Django with Source Code

  • Step 4: Create application name.

    After that, name your application.

  • Step 5: Click create.

    Lastly, finish creating project by clicking “create” button.
    Finish Creating project name for Online Hotel Reservation System Project in Django with Source Code

  • 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>[email protected]</span></p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

Downloadable Source Code Below.

Anyway, if you want to level up your programming knowledge, especially python, try this new article I’ve made for you Best Python Projects with source code for Beginners.

But If you’re going to focus on web development using Django, you can download here from our list of Best Django Projects with source code based on real-world projects.

How To Run The Online Hotel Reservation System Project in Django?

  • Step 1: Extract/unzip the file
  • Step 2: Go inside the project folder, open cmd and type the following commands to install Django Framework and run the webserver:
  • python manage.py migrate
  • python manage.py runserver
  • Step 3: Finally, open the browser and go to http://127.0.0.1:8000/

Summary

In summary, this 2022 Online Hotel Reservation System Project in Django with Source Code can be useful to students or professional who wants to learn python programming language. This project can also be modified to fit your personal requirements. Hope this project will help you to improve your skills. Happy Coding!

Inquiries

If you have any questions or suggestions about Online Hotel Reservation System Project in Django with Source Code, please feel free to leave a comment below.

Leave a Comment