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 - Jinja Template - Sources
• (Free) AdminLTE Flask - version with database, ORM and deployment scripts
• (Free) AdminLTE Django - open-source Django version of AdminLTE

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, Login page

AdminLTE - Jinja2, Calendar page

AdminLTE - Jinja2, Register page

Thanks for reading! For more resource please access:

• Read more about Jinja2
• Read more about Flask