Integrate Django Jazzmin theme to Django Admin | AdminLTE Dashboard
Tags: django, adminlte, jazzmin, dashboard
Published: 2020-11-13 20:15:58

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](#introduction)
- [Instructions](#instructions)
  * [Setup Virtual Environment (Optional)](#setup-virtual-environment--optional-)
  * [Installing libraries](#installing-libraries)
  * [Create Django Project](#create-django-project)
  * [Register Apps](#register-apps)
  * [Create Model and ModelAdmin](#create-model-and-modeladmin)
  * [Make Migrations and Migrate Models](#make-migrations-and-migrate-models)
  * [Enjoy the output](#enjoy-the-output)

## Introduction
In this blog, I am guiding to integrate `django-jazzmin` theme to the Django project.
According to their [documentation](https://django-jazzmin.readthedocs.io/) :


> 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 :
![question.png](https://i.imgur.com/pRGyc5T.png) 

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:

![list_view.png](https://i.imgur.com/gP87rSk.png)

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.

```python 
# 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.

```python
# 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`.

```python
# 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.

![Screenshot from 2020-11-14 01-35-56.png](https://i.imgur.com/vUauSfL.png) 

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

![Screenshot from 2020-11-14 01-39-00.png](https://i.imgur.com/HFqmUxu.png)

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

1. Add Post UI
    ![Screenshot from 2020-11-14 01-45-27.png](https://i.imgur.com/VlLp9qK.png) 


2. List Display UI
    ![Screenshot from 2020-11-14 01-45-46.png](https://i.imgur.com/WTzBoAL.png) 


3. Delete Post UI
    ![Screenshot from 2020-11-14 01-45-56.png](https://i.imgur.com/Mb1cp6C.png) 


4. Filtering through fields
    ![Screenshot from 2020-11-14 01-46-13.png](https://i.imgur.com/E8ZQbyz.png)

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.