Building a Django Booking Management App with a Theme Wagon Template

I recently built a booking management system using Django for the backend and two different dashboard templates for the frontend:

• Kopee Dashboard → Used for the booking form page.
• Venus Dashboard → Used as inspiration for the table page that displays booking records.

This project allows users to:

• Submit bookings with Name, Email, Date, Time, Person
• Store bookings in a Django database
• View, edit, and delete bookings from a clean dashboard table
• Use custom HTML/CSS dashboards to save frontend development time

---

Purpose of the Project

The goal was to create a professional booking management system that:

• Lets users submit booking details easily
• Stores all bookings in a structured database model
• Displays them in a styled and organized table
• Uses existing dashboard themes to make the UI look polished without starting from scratch

---

Frontend Templates

1. Kopee Dashboard (Booking Form Page)

The booking form in my project comes directly from the Kopee Dashboard template. I customized it slightly to match the project’s colors and form structure.

2. Venus Dashboard Inspiration (Table View Page)

For the table that lists all bookings, I took inspiration from the Venus Dashboard by ThemeWagon. I kept only the sidebar and table layout, removed other widgets, and gave the table space, borders, and a readable font.

---

Project Structure

booking_project/
│── booking_app/
│   ├── templates/
│   │   ├── index.html        # Kopee-based booking form
│   │   ├── showdb.html       # Venus-inspired booking table
│   │   ├── booking_success.html
│   │   ├── correction.html
│   │   ├── delete_confirmation.html
│   ├── models.py
│   ├── views.py
│   ├── urls.py
│── booking_project/
│   ├── settings.py
│   ├── urls.py
│── manage.py

---

Database Model

booking_app/models.py

from django.db import models

class Booking(models.Model):
    PERSON_CHOICES = [
        ('1', 'Person 1'),
        ('2', 'Person 2'),
        ('3', 'Person 3'),
        ('4', 'Person 4'),
    ]
    name = models.CharField(max_length=100)
    email = models.EmailField()
    date = models.DateField()
    time = models.TimeField()
    person = models.CharField(max_length=1, choices=PERSON_CHOICES)

    def __str__(self):
        return f"Booking by {self.name} on {self.date} at {self.time}"

---

Views (Core Logic)

booking_app/views.py

from django.shortcuts import render, redirect, get_object_or_404
from .models import Booking

def index(request):
    if request.method == 'POST':
        Booking.objects.create(
            name=request.POST.get('name'),
            email=request.POST.get('email'),
            date=request.POST.get('Date'),
            time=request.POST.get('Time'),
            person=request.POST.get('person')
        )
        return redirect('success')
    return render(request, 'index.html')

def booking_success(request):
    return render(request, 'booking_success.html')

def showdb(request):
    individualbooking = Booking.objects.all()
    return render(request, 'showdb.html', {'individualbooking': individualbooking})

def update(request, id):
    updateInfo = get_object_or_404(Booking, id=id)
    if request.method == 'POST':
        updateInfo.name = request.POST.get('name')
        updateInfo.email = request.POST.get('email')
        updateInfo.date = request.POST.get('date')
        updateInfo.time = request.POST.get('time')
        updateInfo.person = request.POST.get('person')
        updateInfo.save()
        return redirect('showdb')
    return render(request, 'correction.html', {'updateInfo': updateInfo})

def delete_contact(request, id):
    booking = get_object_or_404(Booking, id=id)
    if request.method == 'POST':
        booking.delete()
        return redirect('showdb')
    return render(request, 'delete_confirmation.html', {'booking': booking})

---

URLs

booking_app/urls.py

from django.urls import path
from . import views

urlpatterns = [
    path('', views.index, name='index'),
    path('success/', views.booking_success, name='success'),
    path('showdb', views.showdb, name='showdb'),
    path('update/<int:id>', views.update, name='update'),
    path('delete_contact/<int:id>', views.delete_contact, name='delete_contact'),
]

---

Booking Table Template

showdb.html

{% raw %}
<tbody>
{% for booking in individualbooking %}
<tr>
    <td>{{ booking.name }}</td>
    <td>{{ booking.email }}</td>
    <td>{{ booking.date }}</td>
    <td>{{ booking.time }}</td>
    <td>{{ booking.person }}</td>
    <td>
        <a href="{% url 'update' booking.id %}">
            <i class="fa-regular fa-pen-to-square"></i>
        </a>
    </td>
    <td>
        <a href="{% url 'delete_contact' booking.id %}">
            <i class="fa-regular fa-trash-can"></i>
        </a>
    </td>
</tr>
{% empty %}
<tr>
    <td colspan="7" style="text-align:center;">No bookings yet</td>
</tr>
{% endfor %}
{% endraw %}

---

How to Run

1. Install Django:

pip install django

1. Create and configure your Django project and app.
2. Run migrations:

python manage.py makemigrations
python manage.py migrate

1. Start the server:

python manage.py runserver

1. Visit http://127.0.0.1:8000/

---

Final Thoughts

By combining the Kopee Dashboard for the form and a Venus Dashboard-inspired layout for the table, I built a booking management system that looks professional and works efficiently—without reinventing the wheel for UI design. Django handled the backend logic perfectly, while these templates gave the project a polished frontend.

Full Source Code: https://github.com/Fikalz/A-functioning-booking-form-with-django/tree/main

---

Here are some of the images of the site