Codementor Events

AdminLTE Jinja Template

Published Aug 03, 2020Last updated Oct 14, 2021
AdminLTE Jinja Template

Hello Coder,

This article is a short introduction in Jinja Template, a modern language used by Python programmers in frameworks like Flask, Bottle, optionally in Django from 1.8 version. The article also provides a free asset - AdminLTE - Jinja Template dashboard design, released under the MIT license. The codebase is actively supported via Github (issues tracker) and Discord - 24/7 LIVE service. Thanks for reading! Let me know your thoughts in the comments!



AdminLTE - Jinja2 Template, Charts page.


AdminLTE Design

AdminLTE is an iconic dashboard design crafted by ColorLib and actively supported by 150+ open-source enthusiasts. The project has 35k Github stars and 15k forks and can be downloaded directly from Github, under the MIT License.

Vendor Notes (ColorLib) - AdminLTE is a fully responsive administration template. Based on Bootstrap 4.4 framework and also the JS/jQuery plugin. Highly customizable and easy to use. Fits many screen resolutions from small mobile devices to large desktops.


What is Jinja

Jinja2 is a Python template engine used to generate HTML or XML returned to the user via an HTTP response.

For those who have not been exposed to a templating language before, such languages essentially contain variables as well as some programming logic, which when evaluated (or rendered into HTML) are replaced with actual values.


Why do we need Jinja?

Sandboxed Execution - It provides a protected framework for automation of testing programs, whose behavior is unknown and must be investigated.


HTML Escaping - Jinja 2 has a powerful automatic HTML Escaping, which helps to prevent Cross-site Scripting (XSS Attack). There are special characters like >,<,&, etc. which carry special meanings in the templates. So, if you want to use them as regular text in your documents then, replace them with entities. Not doing so might lead to XSS-Attack.


Template Inheritance - This feature helps us to generate new pages starting from a base template that we inherit a common structure.


How to get Jinja2

To start playing with it, just open a terminal and type:

$ pip install jinja2

Jinja in action

For a simple, runtime replace we can use the following code snippet:

>>> from jinja2 import Template
>>> t = Template("Hello {{ token }}!")
>>> t.render(token="Jinja2")
u'Hello Jinja2!'

AdminLTE - Jinja2 template

In case this project sounds like something useful for your future projects, we can try to build the project using a console and a few commands.


$ # Clone the sources
$ git clone https://github.com/app-generator/jinja-adminlte.git
$ cd jinja-adminlte
$
$ # Virtualenv set up (Unix based systems)
$ virtualenv env
$ source env/bin/activate
$
$ # Install requirements
$ pip3 install -r requirements.txt
$
$ # Set the FLASK_APP environment variable
$ (Unix/Mac) export FLASK_APP=run.py
$ (Windows) set FLASK_APP=run.py
$ (Powershell) $env:FLASK_APP = ".\run.py"
$
$
$ # Run the Jinja Template
$ flask run
$
$ # Access the UI in browser: http://127.0.0.1:5000/

If all goes well, we should see the project running in the browser, just like the LIVE demo - AdminLTE - Jinja2 Demo


AdminLTE - Jinja2, widgets page

AdminLTE - Jinja2, widgets page


AdminLTE - Jinja2, Login page

AdminLTE - Jinja2, widgets page


AdminLTE - Jinja2, Calendar page

AdminLTE - Jinja2, Calendar page


AdminLTE - Jinja2, Register page

AdminLTE - Jinja2, register page


Thanks for reading! For more resource please access:

Discover and read more posts from Adi Chirilov - Sm0ke
get started
post comments2Replies
Casa Davis
a year ago

AdminLTE Jinja Template is a powerful tool for web developers, providing a user-friendly and customizable interface for building responsive admin panels. With its extensive library of pre-designed components, such as tables, charts, and forms, developers can easily create professional-looking dashboards. Check https://magicalkatrina.com/magiciansblog/labqch122fxyhjhtatf1xiivaxa19d and get learn about magic easily. The template offers seamless integration with the Jinja templating engine, allowing for dynamic content generation and easy data manipulation. Whether you’re a beginner or an experienced developer, AdminLTE Jinja Template is definitely worth checking out for your next web development project.

Blade Nelson
4 years ago

Wow this is very cool. Thank you for sharing! I have been interested in the finer details about Jinja and this tutorial shed some light on it for me.

If anyone needs to host their websites, use https://TreeHost.io/ and use code BLADE at checkout for 40% off!