Templates in Django
For our current project, we will create a single template directory that will be spread over the entire project for simplicity. App-level templates are generally used in big projects or in case we want to provide a different layout to each component of our webpage.
Configuration
settings.py: Django Templates can be configured in app_name/settings.py,
We will create our Templates folder in “BASE_DIR/’templates’ “.
TEMPLATES = [
{
# Template backend to be used, For example Jinja
'BACKEND': 'django.template.backends.django.DjangoTemplates',
## Path definition of templates folder .
'DIRS': [BASE_DIR/'templates'],
'APP_DIRS': True,
# options to configure
'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',
],
},
},
]
Using Django Templates
Illustration of How to use templates in Django using an Example Project. Templates not only show static data but also the data from different databases connected to the application through a context dictionary. Consider a project named w3wiki having an app named geeks.
Refer to the following articles to check how to create a project and an app in Django.
views.py: To render a template one needs a view and a URL mapped to that view. Let’s begin by creating a view in geeks/views.py,
simple_view: Renders the “geeks.html” template with the data “Gfg is the best.”check_age: Handles a form submission, checking the user’s age and rendering the “check_age.html” template with the age.loop: Sends a list of numbers and the string “Gfg is the best” to the “loop.html” template.
from django.shortcuts import render
from .forms import AgeForm
# create a function
def simple_view(request):
data = {"content": "Gfg is the best"}
return render(request, "geeks.html", data)
def check_age(request):
if request.method == 'POST':
# Get the age from the form
age = int(request.POST.get('age', 0))
return render(request, 'check_age.html', {'age': age})
return render(request, 'check_age.html')
def loop(request):
data = "Gfg is the best"
number_list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
context = {
"data": data,
"list": number_list}
return render(request, "loop.html", context)
urls.py: Here we are defining all the URL path for the different views.
from django.urls import path
# importing views from views..py
from mini import views
urlpatterns = [
path('simple',views.simple_view),
path('condition', views.check_age),
path('loop', views.loop),
]
geeks.html: Here we are printing the data which Is being passed by view function.
Created this on the path: app_name/templates/geeks.html .
<!-- app_name/templates/geeks.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Homepage</title>
</head>
<body>
<h1>Welcome to w3wiki.</h1>
<p> {{ data }}</p>
<ul>
</body>
</html>
check_age.html: Here first we are accepting age from the user and then checking it with the jinja if it is greater than certain age or not.
Created this on the path: app_name/templates/check_age.html .
<!-- app_name/templates/check_age.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Age Checker</title>
</head>
<body>
<h1>Welcome to the Age Checker</h1>
<form method="post">
{% csrf_token %}
<label for="age">Enter your age:</label>
<input type="number" id="age" name="age">
<button type="submit">Check Age</button>
</form>
{% if age %}
<p>Your age is: {{ age }}</p>
{% if age >= 20 %}
<p>You are an adult.</p>
{% else %}
<p>You are not an adult.</p>
{% endif %}
{% endif %}
</body>
</html>
loop.html: Here we are printing the even numbers of the list with the help of loop and condition in Jinja.
Created this on the path: app_name/templates/loop.html .
<!-- app_name/templates/loop.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Even Numbers</title>
</head>
<body>
<h1>{{ data }}</h1>
Even Numbers
<ul>
{% for number in list %}
{% if number|divisibleby:2 %}
<li>{{ number }}</li>
{% endif %}
{% endfor %}
</ul>
</body>
</html>
Output:
You can also keep the path as app_name/templates/app_name/html_file.html, in this case you will have to define the path in app_name/views.py as: “app_name/html_file.html” this is the traditional and conventional way to do it. The former method is mostly used.
Django Templates
Templates are the third and most important part of Django’s MVT Structure. A template in Django is basically written in HTML, CSS, and Javascript in a .html file. Django framework efficiently handles and generates dynamic HTML web pages that are visible to the end-user. Django mainly functions with a backend so, in order to provide a frontend and provide a layout to our website, we use templates. There are two methods of adding the template to our website depending on our needs.
We can use a single template directory which will be spread over the entire project. For each app of our project, we can create a different template directory.