How to Install and configure Django to render HTML Template in 3 steps (Video)

Read Time: 4 mins

Let me get you through steps to install and configure Django server to render a HTML template. As you already know Django is a popular High-level Python Web framework using which you can build heavy User Interface/ Web application/Rest API. In this article, I will explain relevant configuration which required for you to get your web application working on Django.

 

Introduction:

Django is a high-level Python Web framework which follows model-view-template (MVT) architectural pattern. The framework is developed by web programmers Adrian Holovaty and Simon Willison and It was named after guitarist Django Reinhardt. You can develop powerful User Interface with robust design with Django. Django is based on high-level programming language Python which encourage a lot of Python developers to explore in Web development. It is a free and open-source Web framework and it is ridiculously fast, Reassuringly secure and exceedingly scalable. Django has largely adopted by Developers and DevOps to built various internal complex automation tools.

Explore the official documentation from here >>

Video tutorial:

Please LIKE , COMMENT  and SUBSCRIBE .


Subscribe EasyAsLinux channel  

Some stuffs from my personal experience. I have used Django in a lot of situations at my workplace. It was a special experience that I integrated Django with ReactJS and built beautiful and powerful user interface. Once you get used to Django, you will never let go off it.

 

Step1:  Install Django:

Let’s install and configure django for our WebApp. Install Django 1.9.3  as a python module using PIP  package manager.

[email protected]:~$ pip install Django==1.9.3

Note: We are using Python 2.7  here.

 

If you are getting any error saying ‘python is not installed’ or ‘pip is not installed’. Just try to run commands given below and try to fix the issue.

[email protected]:~$ sudo apt-get update              #update APT repository
[email protected]:~$ sudo apt-get install python      #Install Python
[email protected]:~$ sudo apt-get install python-pip  #Install PIP

If you are using CentOS and RHEL, please try with YUM  instead of APT .

[email protected]:~$ sudo yum update              #update YUM repository 
[email protected]:~$ sudo yum install python      #Install Python 
[email protected]:~$ sudo yum install epel-release 
[email protected]:~$ sudo yum install python-pip  #Install PIP

 

Step2: Create a Project and start the Django server:

Once you have django installed, let’s create an project named easyaslinux  with it.

[email protected]:~$ django-admin startproject easyaslinux

You will see a directory easyaslinux  is created. So change to the same directory and you should see again a directory easyaslinux  and manage.py  script.

[email protected]:~$ cd easyaslinux/
[email protected]:~/easyaslinux$ ls db.sqlite3 easyaslinux manage.py

 

At this point, you can start/run the Django server by running command given below.

[email protected]:~/easyaslinux$ ./manage.py runserver 0.0.0.0:8000
Performing system checks...

System check identified no issues (0 silenced).

You have unapplied migrations; your app may not work properly until they are applied.
Run 'python manage.py migrate' to apply them.

November 06, 2018 - 09:33:49
Django version 1.9.3, using settings 'easyaslinux.settings'
Starting development server at http://0.0.0.0:8000/
Quit the server with CONTROL-C.

 

This means, the Django server is running is listening on port 8000 for incoming request. Let’s check it in the browser and you should get below page.

 

Step3: Configure Django to render Templates:

Create Templates:

It worked! You got Django working. But we are not done yet. Instead of “It worked” page, we need to show something our own in the browser. For that, we need to create templates which will get rendered to show what we want. Let’s create a directory called templates   and add two templates there.

[email protected]:~/easyaslinux$ cd easyaslinux/
[email protected]:~/easyaslinux/easyaslinux$ mkdir templates

 

In the ‘template’ directory create base.html  with following content.

<!doctype html>
<html  lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


    <title>ReactApp</title>
  </head>
  <body>
    {% block main %}{% endblock %}
  </body>
</html>

 

and sample_app.html  with following content

{% extends "base.html" %}

{% block main %}
<div class="container">
  <h1>Hello from easyaslinux.com</h1>
</div>
{% endblock %}

 

Basically, base.html is acting as a foundation for sample_app.html . Suppose you want something to be shown on every page (eg: head tag,website menus, frames, sidebars), you can add it in base.html  file.

I will tell you how this template stuff works. You can see that sample_app.html  extends content of base.html by mentioning {% extends “base.html” %}  . {% block main %}{% endblock %}  tag in base.html  says  that  content of this part is variable and we can easily assign content to it by adding the same inbetween {% block main %} and {% endblock %}  in sample_app.html .

 

Configure Django to render Templates:

We have our templates ready for our website. Now we should tell Django the directory location from where you load the templates. We can do this by modifying variable ‘TEMPLATES ‘ in settings.py . Just for your information, settings.py  is the heart of Django configuration. This is the place where you make Django level configuration changes.

TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'easyaslinux/templates')],    #added
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',],
},  },
]

 

We should also tell Django that for which URL this template should be rendered. And that we can do by adding two lines in urls.py  file.

from django.conf.urls import url
from django.contrib import admin
from django.views import generic    #added

urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^$',generic.TemplateView.as_view(template_name='sample_app.html'))        #added
]

 

Just for your information, Files and directories structure of the project should look like this.

[email protected]:~/easyaslinux$ tree 
/home/vagrant/easyaslinux/
├── db.sqlite3
├── easyaslinux
│   ├── __init__.py
│   ├── __init__.pyc
│   ├── settings.py
│   ├── settings.pyc
│   ├── templates
│   │   ├── base.html
│   │   └── sample_app.html
│   ├── urls.py
│   ├── urls.pyc
│   ├── wsgi.py
│   └── wsgi.pyc
└── manage.py

2 directories, 12 files

 

Now go to your browser and you should see something like this. Don’t forget to start/run your Django server.

Congrats! You just configured Django to render a HTML template. You can start tweaking the template to give more style and content to your website. I have committed all files and directories to bring up this Django server to my Git repo. Please find it here >> https://gitlab.com/nijilraj/install-and-configure-django-to-render-a-html-template.git

I will come back with a tutorial on “How to run Python, Perl, Ruby, Bash – any script with Django Views”. Please Subscribe  to this blog so that you don’t miss out anything useful (Checkout Right Sidebar for the Subscription Form) . Also put your thought on this article as a comment .

 

A Site Reliability Engineer and an automation enthusiast.
Posts created 37

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top
x