How to use AdminLTE in Django

In this tutorial, we will learn how to use AdminLTE in Django, which is an Opensource Bootstrap library.

AdminLTE

After setting up your django, (creating and registering the app) let’s begin modifying the files.

In views.py

from django.shortcuts import render

# Create your views here.

from django.http import HttpResponse

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

In app/urls.py

Create the urls.py file in your app directory for easy handling of urls.

from django.urls import path
from . import views
urlpatterns = [
    path('', views.index, name='index'),
]

In project/urls.py

from django.contrib import admin
from django.urls import include, path
urlpatterns = [
    path('polls/', include('adminlte.urls')),
    path('admin/', admin.site.urls),
]

My app name is adminlte.

In settings.py

Include this code at the bottom of the file.

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"), 
]

Templates

Now create the templates directory in your app directory and create the index.html file in it.

Download the AdminLTE source code from the link : Source code

Unzip the file, and copy the code of starter.html and paste it in your index.html

Static folder

From the html file you have seen that we have to modify the css, JavaScript and images as they are not rendering on html web page. Create the static folder at the same level as that of your app. In it, copy and paste the dist folder and plugins folder from the AdminLTE folder.

Afterwards, modify the css, image and js links with {% static}. Also, include {% load static %} in your index.html file at the top. Below is the sample code in which you have to modify the code.

• For css:

   <link rel="stylesheet" href="{% static 'plugins/fontawesome-free/css/all.min.css' %}">

• For js:

   <script src="{% static 'plugins/jquery/jquery.min.js' %}"></script>

• For image:

   <img src="{% static 'dist/img/user2-160x160.jpg' %}" class="img-circle elevation-2" alt="User Image">

After all the modifications in your html file, your web page will look like this. Congrats, on learning how to use AdminLTE.