I am currently creating a Django app that is a rental apartments homepage. It is supposed to have a booking form connected to a database. However I can’t get the form from forms.py to be displayed on my bookings.html page. I’d appreciate help tons as I have no idea which detail I am missing.
This is my code:
models.py
from django.db import models
from django.contrib.auth.models import User
# Create your models here.
class Booking(models.Model):
user = models.ForeignKey(User, on_delete=models.CASCADE, related_name="user_name")
booking_date = models.DateField(auto_now=True)
status = (
('Requested', 'Requested'),
('Confirmed', 'Confirmed'),
('Cancelled', 'Cancelled'),
)
booking_status = models.CharField(choices=status, blank=True, null=True, default='Requested')
first_name = models.CharField(max_length=100, unique=True)
last_name = models.CharField(max_length=100, unique=True)
birth_date = models.DateField()
email = models.EmailField(max_length=100, unique=True)
phone_number = models.BigIntegerField()
address = models.CharField(max_length=200)
zip_code = models.CharField(max_length=100)
city = models.CharField(max_length=100)
country = models.CharField(max_length=100)
booking_object = (
('Upper Apartment', 'Upper Apartment'),
('Lower Apartment', 'Lower Apartment'),
('Whole House', 'Whole House'),
)
booking_item = models.CharField(choices=booking_object)
arrival_date = models.DateField()
departure_date = models.DateField()
guest_nationality = (
('German', 'German'),
('Other', 'Other'),
)
nationality = models.CharField(choices=guest_nationality)
passport_number = models.CharField(max_length=100, blank=True, null=True)
animals = models.BooleanField(blank=True, null=True)
message = models.TextField(max_length=1000)
class Meta:
ordering=['last_name','first_name']
def __str__(self):
return f'Booking: {self.last_name}, {self.first_name}'
forms.py
from django.forms import forms, ModelForm
from .models import Booking
class BookingForm(ModelForm):
class Meta:
model = Booking
fields = ('first_name', 'last_name', 'birth_date', 'email', 'phone_number', 'address', 'zip_code', 'city', 'country', 'booking_item', 'arrival_date', 'departure_date', 'nationality', 'passport_number', 'animals', 'message')
views.py
from django.contrib import messages
from django.http import HttpResponse, HttpRequest, HttpResponseRedirect
from django.shortcuts import render, get_object_or_404, redirect, reverse
from .models import Booking
from .forms import BookingForm
# Booking Form
def book_apartment(request):
if request.method == "POST":
form = BookingForm(request.POST)
if form.is_valid():
form.save()
messages.add_message(request, messages.SUCCESS, "Thank you for booking with us. We will be in touch with you soon.")
return redirect(main_page)
else:
messages.add_message(request, messages.ERROR, "Please fill out all form fields.")
form = BookingForm()
return render(
request,
"{% url 'main-page' %}",
)
booking.html
{% extends "base.html" %}
{% load static %}
{% load crispy_forms_tags %}
{% block content %}
<h1>Booking</h1>
<form id="bookingForm" method="post">
{{ form | crispy }}
{% csrf_token %}
<button id="submitButton" type="submit">Submit</button>
</form>
{% endblock %}
Before this I was trying to connect a custom html form to the database but this did not work either. I would fill out the form, submit, the page would reload but no entered data showed up in the database.
<h1>Booking</h1>
<form method="post" action="{{ DATABASE_URL }}" id="makeBooking">
<div class="row">
<div class="col-4">
<label for="inputFirstName">First Name</label>
<input type="text" placeholder="First Name" class="form-control" id="inputFirstName" name="inputFirstName" maxlength="200"
required>
</div>
<div class="col-4">
<label for="inputLastName">Last Name</label>
<input type="text" placeholder="Last Name" class="form-control" id="inputLastName" name="inputLastName" maxlength="200" required>
</div>
<div class="col-4">
<label for="inputBirthdate">Birth Date</label>
<input type="date" class="form-control" id="inputBirthdate" name="inputBirthdate" required>
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="inputEmail">E-Mail</label>
<input type="email" placeholder="E-Mail Address" class="form-control" id="inputEmail" name="inputEmail" maxlength="200"
required>
</div>
<div class="form-group col-md-6">
<label for="inputPhoneNumber">Telephone Number</label>
<input type="tel" placeholder="Telephone Number" class="form-control" id="inputPhoneNumber" name="inputPhoneNumber" maxlength="200"
required>
</div>
</div>
<div class="row">
<div class="form-group col">
<label for="inputAddress">Address</label>
<input type="text" placeholder="Address" class="form-control" id="inputAddress" name="inputAddress" maxlength="200" required>
</div>
</div>
<div class="row">
<div class="form-group col-md-2">
<label for="inputZip">ZIP Code</label>
<input type="text" placeholder="ZIP Code" class="form-control" id="inputZip" name="inputZip" maxlength="200" required>
</div>
<div class="form-group col-md-6">
<label for="inputCity">City</label>
<input type="text" placeholder="City" class="form-control" id="inputCity" name="inputCity" maxlength="200" required>
</div>
<div class="form-group col-md-4">
<label for="inputCountry">Country</label>
<input type="text" placeholder="Country" id="inputCountry" name="inputCountry" class="form-control" maxlength="200" required>
</div>
</div>
<div class="row justify-content-center">
<div class="form-group col-8">
<label for="inputBookingItem">You would like to book...</label>
<select class="form-select" id="inputBookingItem" name="inputBookingItem" aria-label="Default select example" required>
<option value="Deutsch" selected>Upper Apartment</option>
<option value="Andere">Lower Apartment</option>
<option value="Andere">Whole House</option>
</select>
</div>
<div class="col-sm-2">
<label for="startDate">Arrival Date</label>
<input id="startDate" name="startDate" class="form-control" type="date">
<span id="startDateSelected"></span>
</div>
<div class="col-sm-2">
<label for="endDate">Departure Date</label>
<input id="endDate" name="endDate" class="form-control" type="date">
<span id="endDateSelected"></span>
</div>
</div>
<div class="container">
<div class="d-flex align-items-center row">
<div class="form-group px-5 col">
<label for="inputNationality">Your Nationality</label>
<select class="form-select" id="inputNationality" name="inputNationality" aria-label="Default select example" required>
<option value="Deutsch" selected>German</option>
<option value="Andere">Other</option>
</select>
</div>
<div class="form-group px-5 col">
<label for="inputPassportNumber">Passport Number</label>
<input type="text" placeholder="Passport Number" class="form-control" id="inputPassportNumber" name="inputPassportNumber"
maxlength="200">
</select>
</div>
<div class="form-check mt-3 ml-3 px-5 col">
<input type="checkbox" id="checkPet" name="checkPet" class="custom-control-input">
<label for="checkPet" class="custom-control-label">
Pets?
</label>
</div>
</div>
</div>
<br>
<div class="row">
<div class="form-group col">
<label for="inputTextarea" class="form-label">Your Message</label>
<textarea class="form-control resize-none" placeholder="Your Message" id="inputTextarea" name="inputTextarea" rows="5"
maxlength="4000" required></textarea>
</div>
</div>
<br>
<button type="submit" value="submit" formaction="{{ DATABASE_URL }}" formmethod="post" form="makeBooking" class="btn btn-purple border-dark">Send</button>
</form>
My first approach was to connect the custom html form to the database. I would fill out the form, submit, the page would reload but no entered data showed up in the database.
My other approach was to create a form through forms.py but nothing shows up on the booking.html page either.