Arjun Adhikari

Posted on Nov 13, 2020 • Updated on May 23, 2022

Integrate Django Jazzmin theme to Django Admin | AdminLTE Dashboard

#django #adminlte #jazzmin #dashboard

Hello Geeks,
First of all, I would like to thank you for reaching here. No doubt you're gonna be a successful Django developer ahead.

Introduction
Instructions

Introduction

In this blog, I am guiding to integrate django-jazzmin theme to the Django project.
According to their documentation :

Django Jazzmin is intended as a drop-in app to jazz up your Django admin site, with plenty of things you can easily customise, including a built-in UI customizer.

The default admin dashboard provided by Django isn't best fitted for our need every time and we need to customize a lot to match the theme with our need. And some of us may not prefer to go with the default theme which looks like this :

For the developers who want to get the customized and better-looking admin dashboard for Django, django-jazzmin is the one which has better UI components with features like :

Drop-in admin skin, all configuration optional
Select2 drop-downs
Bootstrap 4 & AdminLTE UI components
Search bar for any given model admin
Modal windows instead of popups
Customisable side menu
Customisable top menu
Customisable user menu
Responsive
Customisable UI (via Live UI changes, or custom CSS/JS)
Based on the latest adminlte + bootstrap

which looks like this:

To achieve a good looking AdminLTE dashboard on our Django project, we need to follow a sequence of instructions.

Instructions

Navigate to your workspace:

# Terminal
# =========

$ mkdir - ~/workspace/integrate-django-jazzmin
$ cd ~/workspace/integrate-django-jazzmin

Setup Virtual Environment (Optional)

# Terminal
# =========

$ python -m virtualenv venv

created virtual environment CPython3.8.6.final.0-64 in 116ms
  creator CPython3Posix(dest=/home/ubuntu/workspace/integrate-django-jazzmin/venv, clear=False, global=False)
  seeder FromAppData(download=False, pip=bundle, setuptools=bundle, wheel=bundle, via=copy, app_data_dir=/home/ubuntu/.local/share/virtualenv)
    added seed packages: pip==20.2.4, setuptools==50.3.2, wheel==0.35.1
  activators BashActivator,CShellActivator,FishActivator,PowerShellActivator,PythonActivator,XonshActivator

This will set up a virtualenv named venv which isolates libraries and dependencies from the global installation.
Now, activate the virtual environment.

$ source venv/bin/activate

Installing libraries

Now, we are good to install the libraries we need to set up the Django project.

$ pip install django django-jazzmin

This will install the django and django-jazzmin library.

Create Django Project

It's time to create a Django project.

$ django-admin startproject dj_jazzmin_demo .

For a better demonstration of the theme, I'm going to create a Django app named blog.

$ python manage.py startapp blog

which created directory structure like this:

# Directory Structure
# ====================
.
├── blog
│   ├── admin.py
│   ├── apps.py
│   ├── __init__.py
│   ├── migrations
│   │   └── __init__.py
│   ├── models.py
│   ├── tests.py
│   └── views.py
├── dj_jazzmin_demo
│   ├── asgi.py
│   ├── __init__.py
│   ├── __pycache__
│   │   ├── __init__.cpython-36.pyc
│   │   └── settings.cpython-36.pyc
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
└── manage.py

Register Apps

Now, let's register the blog app inside INSTALLED_APPS in settings.py.
Add blog.apps.BlogConfig after the pre-registered django apps.
Also, we are good to add our theme to the django project. For that, register jazzmin theme to INSTALLED_APPS.
But, we're registering jazzmin on the top of other pre-registered apps because we want the theme to load earlier than other apps.

# dj_jazzmin_demo/settings.py
# =============================

INSTALLED_APPS = [
    # Pre-loading Third Party apps
    'jazzmin', 

    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    # Local Apps
    'blog.apps.BlogConfig',

]

Create Model and ModelAdmin

Now, we have our app and theme registered in our project. Then, we can write models for the app blog.
Let's write a model named Post in models.py inside blog app.

# blog/models.py
# ================

from django.db import models
from django.utils.translation import ugettext_lazy as _

class Post(models.Model):
    '''Model definition for Post.'''

    title = models.CharField(_('Post'), max_length=50)
    content = models.TextField(_('Content'))
    is_publishable = models.BooleanField(_('Is Publishable ?'), default=False)
    created_at = models.DateTimeField(_('Created at '),auto_now_add=True)
    updated_at = models.DateTimeField(_('Updated at '),auto_now=True)

    class Meta:
        '''Meta definition for Post.'''

        verbose_name = 'Post'
        verbose_name_plural = 'Posts'

    def __str__(self):
        '''Unicode representation of Post.'''
        return self.title

For making our app accessible via the admin dashboard, we're going to register the model Post in admin.py.

# blog/admin.py
# ==============

from django.contrib import admin
from .models import Post


@admin.register(Post)
class PostAdmin(admin.ModelAdmin):
    '''Admin View for Post'''

    list_display = (
        'title',
        'is_publishable',
        'created_at',
        'updated_at',
    )
    list_filter = (
        'is_publishable',
        'created_at',
        'updated_at',
    )

Make Migrations and Migrate Models

Now, we're good to make migrations and migrate the model we created.

# Terminal
# =========

$ python manage.py makemigrations blog
Migrations for 'blog':
  blog/migrations/0001_initial.py
    - Create model Post

# Terminal
# =========

$ python manage.py migrate
Operations to perform:
  Apply all migrations: admin, auth, blog, contenttypes, sessions
Running migrations:
  Applying contenttypes.0001_initial... OK
  Applying auth.0001_initial... OK
  Applying admin.0001_initial... OK
  Applying admin.0002_logentry_remove_auto_add... OK
  Applying admin.0003_logentry_add_action_flag_choices... OK
  Applying contenttypes.0002_remove_content_type_name... OK
  Applying auth.0002_alter_permission_name_max_length... OK
  Applying auth.0003_alter_user_email_max_length... OK
  Applying auth.0004_alter_user_username_opts... OK
  Applying auth.0005_alter_user_last_login_null... OK
  Applying auth.0006_require_contenttypes_0002... OK
  Applying auth.0007_alter_validators_add_error_messages... OK
  Applying auth.0008_alter_user_username_max_length... OK
  Applying auth.0009_alter_user_last_name_max_length... OK
  Applying auth.0010_alter_group_name_max_length... OK
  Applying auth.0011_update_proxy_permissions... OK
  Applying auth.0012_alter_user_first_name_max_length... OK
  Applying blog.0001_initial... OK
  Applying sessions.0001_initial... OK

For accessing the admin panel, we need to create a superuser which has the privilege to access the admin dashboard and perform operations over there.

# Terminal
# =========

$ python manage.py createsuperuser
Username (leave blank to use 'ubuntu'): ubuntu
Email address: 
Password: 
Password (again): 
Superuser created successfully.

Enjoy the output

Finally, we've completed the procedure to create a basic Django project and integrate django-jazzmin theme.
Now, we can run our django project.

# Terminal
# =========

$ python manage.py runserver

Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).
November 13, 2020 - 19:46:51
Django version 3.1.3, using settings 'dj_jazzmin_demo.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C

We have our Django project running. To access it through a web browser, visit the URL http://127.0.0.1:8000/admin/ on a web browser. It loads to a different login interface than default login UI provided by Django.

After entering credentials, we're navigated to a jazzy looking admin interface provided by django-jazzmin.

Let's surf through beautiful interfaces provided by django-jazzmin.

Add Post UI
List Display UI
Delete Post UI
Filtering through fields

For now, we've successfully integrated django-jazzmin theme to our django_project. In the next part of the blog, we will be customizing admin dashboard through API provided by django-jazzmin.

Thanks for reading.