Category Archives: Bootstrap

Bootstrap Django templates and admin: A complete step by step

Bootstrap has made the life of back-end developers a little easier. With the ability to make almost all the apps look cleaner then how they would originally appear, it has indeed been a great tool. However, despite the helpful tutorials and examples out there, as is the case with many, they all suffer from the same three flaws:

  1. No tutorial can be a “one size fits all” solution, and that is a reality. Which is why there are many tutorials out there and the reason why I am writing one as well.
  2. Deprecation with time. All tutorials suffer the same time deprecation, where packages are updated, deprecated or removed, configurations altered etc. Unfortunately, the tutorials mostly stay static and eventually end up being a good start guide but no longer step by step instructions. Though I would like to avoid this eventuality, I do not guarantee it.
  3. Assumption of knowledge. Every tutorial assumes a certain degree of know-how of the technologies involved, which sometimes, is just asking too much but is rarely avoidable, otherwise, a post as simple as this would have to be a book.

Since I am a novice at bootstrap (if it works its beautiful),  I decided, that I would go through the motions of bootstrapping a simple Django application, both the front-end template, as well as, the admin section. Depending on how long it would take to get this functional, this post may take more than a few days for me to publish and recognizing the fact that people rarely give details of what OS and what versions of the packages are involved, I will try to be more succinct in my explanation.

Knowledge assumptions:

  • python and Python-Django Framework
  • virtualenv and pip

Operating System and Python:

I am developing on Ubuntu, using Python 2.7.6 . Here are the particulars:

#command to find the release
cat /etc/lsb-release

#Result
DISTRIB_ID=Ubuntu
DISTRIB_RELEASE=14.04
DISTRIB_CODENAME=trusty
DISTRIB_DESCRIPTION="Ubuntu 14.04.1 LTS"

Setup:

Setup a virtual environment and a basic Django project, with a dummy app. The following snippet shows all the steps I followed to achieve this.

#command to create virtual env using virtualenvironment wrapper
mkvirtualenv bootstrap_test
#output
'''
New python executable in bootstrap_test/bin/python
Installing setuptools, pip...done.
'''

#activate venv
workon bootstrap_test

#install django
pip install django
#output
'''
Downloading/unpacking django
  Downloading Django-1.7-py2.py3-none-any.whl (7.4MB): 7.4MB downloaded
Installing collected packages: django
Successfully installed django
Cleaning up...
'''

#checking all packages
pip freeze
#output
'''
Django==1.7
argparse==1.2.1
wsgiref==0.1.2
'''

#create django project
django-admin.py startproject bstrap

#create dummy app inside project
django-admin.py startapp dummy

#checking bstrap project directory structure using tree
tree bstrap
#output
'''
bstrap
├── bstrap
│   ├── __init__.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── dummy
│   ├── admin.py
│   ├── __init__.py
│   ├── migrations
│   │   └── __init__.py
│   ├── models.py
│   ├── tests.py
│   └── views.py
└── manage.py
'''

The above steps are pretty simplistic and if you are confused at this point, continuing might be a little hard. Before continuing to the next phase, go to ‘bstrap/bstrap/settings.py‘ and add dummy to the installed apps, so it looks something like:

# Application definition
INSTALLED_APPS = (
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'dummy',
)

Now before we delve into bootstrapping, lets just check that the admin section of the app is working, obviously, first we run migrate, and set the admin user and password. Then do a runserver, and assuming that you did not specify an ip, the server will be launched at http://127.0.0.1:8000/.

Since we haven’t configured any views, only the admin site will be working at the moment, and that is all we need.

Navigate to http://127.0.0.1:8000/admin/ and you will see the standard django admin template after you login with the superuser you created during migration.

After ensuring that the app works; we begin with the simple bootstrap objective first…bootstrap django admin.

Django Admin Bootstrap:

The major reference for this particular section comes from Riccardo Forina Blog , who designed and implemented the pip package we will be using. For all the details as to how to achieve this, please visit the original blog post. Here I will be repeating what he did and showing the output of the work.  As per his instructions:

  1. install the pip package django-admin-bootstrapped in your virtual environment by running “pip install django-admin-bootstrapped”
  2. Add ‘django_admin_bootstrapped.bootstrap3‘, into the INSTALLED_APPS before 'django.contrib.admin'.

I followed the above two steps, re-ran my runserver, navigated to http://127.0.0.1:8000/admin/ and voilla!!!  the admin was bootstrapped….

 

 Django Templates Bootstrap:

So first, lets add the static configuration to the setting file. I have a configuration that I use in most of my application, which is as follows:

#BASE_DIR = os.path.dirname(os.path.dirname(__file__))
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.6/howto/static-files/

STATIC_URL = '/static/'
# STATIC_PATH = os.path.join(BASE_DIR,'static')
# STATIC_ROOT_URL = ''
STATIC_ROOT = os.path.join(BASE_DIR,'static_media')

STATICFILES_DIRS = (
  os.path.join(BASE_DIR, 'static/'),
)

#templates
TEMPLATE_PATH = os.path.join(BASE_DIR, 'templates')

TEMPLATE_DIRS = (
    # Put strings here, like "/home/html/django_templates" or "C:/www/django/templates".
    # Always use forward slashes, even on Windows.
    # Don't forget to use absolute paths, not relative paths.
    TEMPLATE_PATH,
)

Next, create a folder in your main project directory called “static”, download Bootstrap and add the unzipped files to the “static” folder you created, so that your project folder structure now looks something like this:

bstrap/
├── bstrap
│   ├── __init__.py
│   ├── __init__.pyc
│   ├── settings.py
│   ├── settings.pyc
│   ├── urls.py
│   ├── urls.pyc
│   ├── wsgi.py
│   └── wsgi.pyc
├── db.sqlite3
├── dummy
│   ├── admin.py
│   ├── admin.pyc
│   ├── __init__.py
│   ├── __init__.pyc
│   ├── migrations
│   │   ├── __init__.py
│   │   └── __init__.pyc
│   ├── models.py
│   ├── models.pyc
│   ├── tests.py
│   └── views.py
├── manage.py
└── static
    └── bootstrap
        ├── css
        │   ├── bootstrap.css
        │   ├── bootstrap.css.map
        │   ├── bootstrap.min.css
        │   ├── bootstrap-theme.css
        │   ├── bootstrap-theme.css.map
        │   └── bootstrap-theme.min.css
        ├── fonts
        │   ├── glyphicons-halflings-regular.eot
        │   ├── glyphicons-halflings-regular.svg
        │   ├── glyphicons-halflings-regular.ttf
        │   └── glyphicons-halflings-regular.woff
        └── js
            ├── bootstrap.js
            └── bootstrap.min.js

Now you have setup the basis for bootstrapping your templates. I created a templates folder and added an example template I copied from the bootstrap website.(Starter Template). I called it base.html.

Now in order to actually render and view the bootstrap result, I changed two files. The urls in the bstrap app to look like…

from django.conf.urls import patterns, include, url
from django.contrib import admin

urlpatterns = patterns('',
    # Examples:
     url(r'^$', 'dummy.views.home', name='home'),
    # url(r'^blog/', include('blog.urls')),

    url(r'^admin/', include(admin.site.urls)),
)

and the views in the dummy app to look like…

from django.shortcuts import render
from django.shortcuts import render_to_response

def home(request):
    return render_to_response('base.html')

And you are done! Running the runserver now, and navigating to http://127.0.0.1:8000/ should show you the “Starter Bootstrap template”…

 

Source Code:

https://bitbucket.org/ssaqibyawargmailcom/bstrap/

 

P.S if you are looking for an easy way to boostrap your forms in django, I recommend you navigate to django-bootstrap-form app and use that.

 

Hope this helps!!!