Hello Geeks, First of all, I would like to thank you for reaching here. You will undoubtedly be a successful Django developer in the future.
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 a customized and better-looking admin dashboard for Django, django-jazzmin is the one with 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.
For now, we’ve successfully integrated django-jazzmin theme to our django_project.
Thanks for reading.