Django Templates Tutorial – Creating A Simple Template

Welcome to Django Templates Tutorial. In this tutorial, we will create a very simple Django Template. I already posted a couple of tutorials for getting started with Python Django Framework. In this Django Templates Tutorial, we will see how to create a simple template.

If you haven’t read the previous post, then It would be good if you go through the last post first. You can visit the earlier tutorials from the given links.

And after reading the posts mentioned above, come back to this Django Template Tutorial to know how the template works in Django.

What is a Template?

I am pretty sure that you know it already, but still, for those who don’t, a template is just an HTML file that contains the HTML design of our website.

Templates in Django

If I tell you what are Templates in Django, then the answer is “A Django Template is a sequence of Text that helps in separation of the presentation layer of a document from its data.”

Why Templates?

You may think that why use templates? In the last tutorial where we learned about creating a view. The code we used there in our view is

As you can see we have hardcoded the HTML inside HttpResponse and, it is not a convenient way to design the page. It will take more effort. And also when we need to change the design of the page, we need to shift python code. That is why we separate the presentation layer from the python code. And we will learn HOW TO do this, in this Django Templates Tutorial.

Django Templates Tutorial

Now let’s begin our Django Templates Tutorial, as we know now why we need it. I am using PyCharm (But as the Community Edition don’t support Django you need to use PowerShell to command prompt to create the project, then you can open the project in PyCharm or any other source code editor like Sublime, etc.c.

Creating a new Django Project

  • Run this command to create a new project.

  • Now open the created project with PyCharm. (You can use Sublime Notepad++ as well).

Creating views.py

To define our views inside the project we will create a new file named views.py.

  • So inside your project create a new python file and name it views.

creating views.py

Defining a URL

Now to see our template we will define a URL pattern.

  • Come inside the urls.py file of your project and modify it as follows.

What we did?

The above code is very simple and we already did it in the last tutorial about creating a simple view in django.

Creating a Template

First we need a directory to store all the templates, this will help us in separating the design in a particular location. So create a new directory in you project and name it templates.

creating templates folder

So as I already said template is nothing but an HTML file containing the presentation of our page. So lets create a template.

  • Right click on templates folder that we created and go to new->html file, put a file name and click on create. I have created index.html. 

  •  Above you can see a very simple html file. And it is actually our template.

Defining Template Directory in Settings

  • Only creating the folder is not enough, we need to define the folder in settings.py. See the image below.

templates directory

  • This step is very important, or else you will get TemplateNotFoundException.

Rendering Template

Template will be rendered via view. But this time we do not need to hardcode the html inside our python code. As we already separated the html and now it is an individual file.

To render the template we created follow these steps.

  • Come inside views.py file that we created. And write the following code.

What we did?

In the above code first we imported loader. We need to it load the template.

Then we have our function named index, and it is actually our view that is taking the request.

Inside the function we created our template from loader.

And finally we are rendering the template in HttpResponse.

Running Your Project

  • Now lets try running our project. So again run the command python manage.py runserver in the terminal inside PyCharm.
  • http://127.0.0.1:8000/firsttemplate/
  • Go to the above URL and you will see the template we created.

django forms tutorial

  • BINGO! our template is rendered successfully.

Passing Values to Template

  • We can also pass values to our template. This is needed when we are making a dynamic web app. So lets see how we can do this. Its pretty easy. Just follow these steps.
  • Go to your template file index.html and change it as follow

What we did?

In the above html file we just created a simple table. And where we want to pass the variable value we have written a variable instead of writing a static html. Just remember wherever we need to put a variable in html page we need to write it between {{ }} .

  •  Now while rendering the template we will pass the values needed. So come inside views.py file and modify it as follows.

What we did?

We have created a variable named context containing the values to pass. It is very much similar to JSON object. And then we are passing the context with request, while rendering our template.

Now refresh your page and you will see the following.

django templates tutorial

As you can see the values passed are showing up on the page. Bingo! Its working fine.

Next Post: Django Forms Tutorial – Working with Forms in Django

So thats all for this Django Templates Tutorial. Feel free to leave your comments if having any ideas or feedback regarding this Django Templates Tutorial. We will do some more cool stuffs in upcoming tutorials. Thank You 🙂

2 thoughts on “Django Templates Tutorial – Creating A Simple Template”

  1. In django version 1.11.4 there is no to “return HttpResponse(template.render(context, request))”, by using this it throws an error, instead use “return HttpResponse(template.render(context))”

    Reply

Leave a Comment