Jquery Datepicker

For using jquery datepicker in a django form, I included four external files:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>

<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">

in the base.html and then added a script

$(function() {
$( "#id_date" ).datepicker();
$(function() {
$( "#id_hall" ).selectmenu()
.selectmenu( "menuWidget" )
.addClass( "overflow" );

So on viewing the book.html page (that contains the form), I viewed its source and found id of the date input field(#id_date) and then assigned it accordingly in the script above. In the script, I also added input id of hall(#id_hall) to show it as a nice looking dropdown list.

Also added some styles:

fieldset {
border: 0;
label, label#id_start_time{
display: block;
margin: 10px 0 0 0;
select {
width: 200px;

.overflow {
height: auto;

The commit can be seen @ https://github.com/rvirdiz/booking_system/commit/c9e65898170af181915f1e53952c5a1037ca01cf
I’d also downloaded the jquery files and css in the static folder but it didn’t work may be because of some path error.


Booking Restriction and datepicker

As in the last post I specified the booking was working but if we book the same hall for start and end time then it successfully added to the database as a booking, which should not be there. Hence to restrict them I found a solution of unique_together.

To use this we need to specify which fields we need to be unique together means we don’t need any entry(booking) to be there with the same hall, start time, end time. Hence to accomplish this, I added in the models.py under the Booking model:

class Meta:
     unique_together = (‘hall’, ‘start_time’, ‘end_time’,)

Previously we have to input date in a character field, but now I used a widget.  Using this there are drop downs for selecting date, month and year.

In forms.py,
from .models import Booking
from django.contrib.admin import widgets
from django.forms.extras.widgets import SelectDateWidget
a = (‘2015’, ‘2016’, ‘2017’)

class BookingForm(forms.ModelForm):
    date = forms.DateField(widget=SelectDateWidget(years=a))

I imported the SelectDateWidget from Django widgets and then used it in the date field as shown in the last line above. There I passed a list ‘a’ as the years. This results into only 3 entries(2015,2016,2017) in the year choice field when we view the html(book.html).

Working Booking

As Raman started working on User Authentication, I decided to work on the Bookings. In home/forms.py I created a BookingForm class which was linked to the ‘Booking’ model using model = Booking

As you can see in the commit: https://github.com/rvirdiz/booking_system/commit/fc48cd1cc9b41ff953bd265236a040f4cfc3f848

In the class meta: , there are fields specified which will be shown on the html for the input. This input will then be stored in the database. So we call this form in the book.html page using {{ form.as_p }} and then in the views.py, I called the template book.html which contains the form (BookingForm). There is a validation applied that if form is valid only then save it to the database else show the errors.

Admin Panel List Display

This is some of part of admin.py file:

class BookingAdmin(admin.ModelAdmin):
list_display = [‘hall’, ‘event_name’, ‘name’, ‘date’, ‘start_time’, ‘end_time’, ’email’, ‘status’ ]
class Meta:
model = Booking
admin.site.register(Booking, BookingAdmin)

In this file, there is a new ModelAdmin class named “BookingAdmin”. It is connected to the model “Booking” that we created in the models.py file. Hence it did show the name of the hall only previously in the admin panel.

But we need all the details of the booking like name of event, time, date, which hall, organizer details etc. Then it will be easy for the admin to decide which booking to select. So the meaning of second line is this: it displays the fields accordingly as listed in the single quotes.

It will only take effect after we register by writing the last line. It registers the model Booking and module BookingAdmin together so that we can view model’s information in the admin panel UI.

Similarly I used the list_display method for Hall model to show the name of the hall and no. of seats when overviewing the list.



Basic Template and Views

Now we had our models ready and we need to add we could only add new hall and booking from the default ‘admin panel’ that comes with Django. But if we want that to be done on the user side then we must use html pages. So in Django, we use a proper way to show html pages. The system is called Template system. Templates are generally html files.

Django is based on DRY principle which means Don’t Repeat Yourself. In the template system django follows the same. If we create a base html that can be used as a base for all other html pages, and we can use {% extends “base.html” %} in other html files. And we use {% block content %} {% endblock %} in the base.html for the variable parts of the pages. In other pages we just use {% extends “base.html %} {% block content %}<h3>Bookings</h3> {% endblock %}  Hence we don’t have to repeat the base.html again and we have to write only one new line <h3>Bookings</h3> for a completely new page. The major advantage is that we don’t have to use all the necessary html tags like <html>, <head>, <body> and their closing tags again and again into all the template files. For this we just extend the base page and use all the tags defined in it. I tried my hands on bootstrap and used some of its classes, but it is not properly implemented yet.

Hence till now there is a views.py is created in which 4 functions(home, view, book, cancel) are defined that call the templates (html) to be rendered when a particular URL(urls.py) is visited in the browser. urls.py is a file for defining the regular expressions that can be used to call the views that further call the html to be rendered. Quite confusing!!!

Added Models

After watching the animation a few times and discussing about it with others, we started created project named “bookingsystem” and then an app named “home”.

In home, there is a models.py file, in which we created two models: Booking and Hall.

The model ‘Booking’ is having these fields:

  • hall (a foreign key to ‘Hall’ model)- This field is for the location where event is to be held.
  • date – It is for the date on which the booking is to be done.
  • start_time – The start time for the event to be held at the hall.
  • end_time – The end time of the event.
  • name – Name of the organizer
  • email – Email id of organizer
  • event_name – Name of the event to be held.
  • status – Status of the booking(To be decided by the admin).

The ‘Hall’ model has two fields (as of now):

  • hall – name of the hall
  • seats – number of seats available in the hall