Integrate bootstrap template in Django 2

This article explains how to integrate a bootstrap  template in Django. I am using renowned bootstrap admin template SBAdmin in this tutorial.This tutorial is written in Ubuntu 16.04.

Watch the demo here:- (Click the gear icon and select video quality to 1080p HD, then click the full screen button for good quality)

Go to this link to subscribe to my YouTube channel to stay updated:- https://www.youtube.com/channel/UCxTp2yDew9m48Ch_hArOoYw



A bootstrap theme may have many dependencies like bootstrap library, jquery and other javascript plugins and css files.
So integrate these all to a Django project is something tricky.

We need to load the dependent libraries as static files. Then create parent templates for admin pages and normal pages. Copy body sections of each page in the template, then paste it into equivalent pages in our project. Then set view functions and urls correctly. I am explaining all these steps in this tutorial.
To download the full source file go to end of the tutorial.

First, create a directory named admin_proj somewhere in your home directory. Open that folder, then open a terminal window in that location. Then run these commands to install Django.

virtualenv -p python3 env
source env/bin/activate
pip install Django

Then create a project named admin_proj and app named admin_app by run following commands

django-admin startproject admin_proj .
django-admin startapp admin_app

For detailed tutorial about installing Django locally, then create a project go to this link:- http://newprograminglogics.blogspot.com/2018/02/install-python-3-and-set-up-local.html

Open admin_proj/admin_proj/settings.py then add  'admin_app' to the INSTALLED_APPS section.

Next open admin_proj/admin_proj/urls.py.
Add an include keyword in the line from django.urls import path

Now it will look like

from django.urls import path,include

Add this line in the urlpatterns section

path('admin_app/', include('admin_app.urls'))

Now download SBAdmin 2 template files from this link, https://github.com/BlackrockDigital/startbootstrap-sb-admin-2/archive/gh-pages.zip
Then extract the zip file.

It is the time to load these template files to our Django project as static files.
For this check following line is included in the INSTALLED_APPS section of admin_proj/admin_proj/settings.py
'django.contrib.staticfiles'

Then check this line is exist in the same settings.py file
STATIC_URL = '/static/'

Go to this link, for the detailed tutorial about load static files: -  http://newprograminglogics.blogspot.com/2018/03/load-static-files-in-django-20.html

Then create a folder named static in admin_app folder.
Create a folder named admin_app inside it. Then copy vendor,dist,data directories from the extracted SBAdmin directory to admin_proj/admin_app/static/admin_app directory.
Now the static directory will look like this
├── migrations
├── static
│   └── admin_app
│       ├── data
│       ├── dist
│       └── vendor

All js and css files are now in correct location. Now we can create some templates to display.

In the admin_app folder, create a folder named templates Create another folder named admin_app in it. I am going to create two base templates. One for admin pages with sidebar and header and another for login and regular pages without sidebar and header. Create a file named admin.html

Now the templates directory will look like this

├── migrations
├── static
├── templates
│   └── admin_app
│       ├── admin.html


Open index.html in pages directory of downloaded SBAdmin theme. Copy and paste the contents to admin.html. Delete the content inside the div with id "page-wrapper".

Now add the code inside "page-wrapper" div.

{% block content %}{% endblock %}

Our admin template is ready now. Now we can create a child html file to consume  this template.
Create a file named dashboard.html in the same location of admin.html. Once again open index.html in pages directory of downloaded SBAdmin theme. Copy the content inside "page-wrapper" div and paste to dashboard.html

Then add these line in top of the same file.

{% extends "admin_app/admin.html" %}
{% block content %}

Add this code at the bottom of the file

{% endblock %}

Now we are going to change the source url of script files.
../vendor/jquery/jquery.min.js should change to

{% static 'admin_app/vendor/jquery/jquery.min.js' %}

Similarly ../data/morris-data.js should change to

{% static 'admin_app/data/morris-data.js' %}

Do this for all js files and css files. You should add this line in the top of the file

{% load static %}

Copy all scripts into <head> section. Keep only common scripts and css like jquery.js and bootstrap.js in admin.html. Move other scripts like morris-data.js into dashboard.html. Because it is only needed on the dashboard page.

Add the same code at the top of dashboard.html also

{% load static %}

Then change the sidebar menu urls like this {% url 'admin_app:index' %} in admin.html.
This will create a url to localhost:8000/admin_app .We hadn't created any urls yet, but we will create it later.


Now we have created an admin.html template and a file named dashboard.html which consume the admin.html.
In the same way you can create equivalent pages for every page in the downloaded theme like buttons.html,forms.html, flot.html, gridhtml,icons.html etc.

In the same manner create another template named front_end.html and page named login.html from login.html page of downloaded theme.


Open admin_proj/admin_app/views.py. Then add this code

def index(request):
    return render(request, 'admin_app/dashboard.html')

This means the view function named index return the contents of dashboard.html. Similarly create functions for all other pages we created earlier.

Now create a file named urls.py in the same location of views.py, then add these code

from django.urls import path

from . import views

app_name = 'admin_app'
urlpatterns = [
    path('', views.index, name='index')
]

In this code path('', views.index, name='index') means that call to root url should call the index function in views.py.
Similarly, connect all views functions to equivalent urls.

Done we have successfully integrated a bootstrap template to Django. Now run python manage.py runserver, the open http:localhost:8000/admin_app in any browser.

If you don't have time to execute all the steps mentioned  above you can buy the example source  code from here:-  https://payhip.com/b/I3sTL

After download completed, extract the folder to somewhere on your computer, then open a terminal window inside the extracted project directory. Then run the following commands

virtualenv -p python3 env

source env/bin/activate

pip install django

python manage.py runserver

Then open http://127.0.0.1:8000/admin_app in any browser.