Django: Jinja template

3 min readApr 22, 2020

code: https://github.com/wasit7/2020/tree/master/cs459_2/week12_jinja/myproject

Start Project and App

django-admin startproject myproject
cd myproject/
python manage.py startapp myapp
code .

install app in settings.py

INSTALLED_APPS = [
    ... ,
    'myapp'
]

create database model in models.py

from django.db import modelsclass Customer(models.Model):
    name=models.CharField(max_length=50)
    dob=models.DateField(null=True, blank=True)def __str__(self):
        return "%s"%(self.name)

admin.py

from django.contrib import admin
from myapp.models import Customerclass CustomerAdmin(admin.ModelAdmin):
    pass
admin.site.register(Customer, CustomerAdmin)

create a fucntion based view in views.py

from django.shortcuts import render
from myapp.models import Customerdef index(request):
    context={
        'products':[
            {
                'name':'product_a',
                'price':100,
                'weight': 1.5
            },
            {
                'name':'product_b',
                'price':150,
                'weight': 0.8
            }
        ],
        'customers': Customer.objects.all()
    }
    return render(
        request,
        template_name='index.html',
        context=context
    )

Render variables to temple /template/index.htnl

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>{% for i in products %}
  <li> name:{{i.name}}, wieght:{{i.weight}}, price:{{i.price}}</li>
{% endfor %}----------------{% for i in customers %}
  <li> name:{{i.name}}, dob:{{i.dob}}, born_in_month:{{i.dob.month}}</li>
{% endfor %}</body>
</html>

urls.py

from django.contrib import admin
from django.urls import path
from myapp import viewsurlpatterns = [
    path('admin/', admin.site.urls),
    path('', views.index, name='index')
]

Result

Template inheritance

reference

Create base tempalte

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <title>{% block title %}My amazing site{% endblock %}</title>
</head><body>
    <div class="w3-sidebar w3-light-grey w3-bar-block" style="width:25%">
        {% block sidebar %}
        <ul>
            <li><a href="/customer_list">Customers</a></li>
            <li><a href="/product_list">Products</a></li>
        </ul>
        {% endblock %}
    </div><div style="margin-left:25%"><div class="w3-container w3-teal">
        <h1>My Page</h1>
    </div>
    <div class="w3-container">
        {% block content %}{% endblock %}
    </div>
</body>
</html>

Inherite template

views.py

def customer_list(request):
    context={'customers': Customer.objects.all()}
    return render(
        request,
        template_name='customer_list.html',
        context=context
    )def product_list(request):
    context={
        'products':[
            {
                'name':'product_a',
                'price':100,
                'weight': 1.5
            },
            {
                'name':'product_b',
                'price':150,
                'weight': 0.8
            }
        ]
    }
    return render(
        request,
        template_name='product_list.html',
        context=context
    )

customer_list.html

{% extends "base.html" %}
<title>{% block title %}Customers{% endblock %}</title>
{% block content %}
    {% for i in customers %}
        <li> name:{{i.name}}, dob:{{i.dob}}, born_in_month:{{i.dob.month}}</li>
    {% endfor %}
{% endblock %}

Result customer_list

product_list,html

{% extends "base.html" %}
<title>{% block title %}Products{% endblock %}</title>
{% block content %}
    {% for i in products %}
        <li> name:{{i.name}}, wieght:{{i.weight}}, price:{{i.price}}</li>
    {% endfor %}
{% endblock %}

Result product_list