Rendering Database Data in Django Templates

Django Tutorial

About Lesson

In this article i want to show you Rendering Database Data in Django Templates, so as you know we are using SQLite database and we have inserted some data in to our database, now we want to render that data in to our html template, also we will learn that how you can use for loop for iterating over the data.

Now open your views.py file, if you remember we have a Polls view function, so we want to retrieve our data in this view function and after that we want to render this data in to our polls_list.html.

def Polls(request):

    polls = Question.objects.all()
    context = {'polls':polls}
    
    return render(request, 'polls_list.html', context)

def Polls(request):

polls = Question.objects.all()

context = {'polls':polls}

return render(request, 'polls_list.html', context)

In the above view function first we have retrieved our data from Question model, we are using all() method because i want to get all the data and after that i want to send the data through context variable to our html file.

So now this is our complete views.py file.

from django.shortcuts import render
from .models import Question

# Create your views here.

def Index(request):
    context = {}

    return render(request, 'index.html', context)
    


def Polls(request):

    polls = Question.objects.all()
    context = {'polls':polls}

    return render(request, 'polls_list.html', context)

from django.shortcuts import render

from .models import Question

# Create your views here.

def Index(request):

context = {}

return render(request, 'index.html', context)

def Polls(request):

polls = Question.objects.all()

context = {'polls':polls}

return render(request, 'polls_list.html', context)

Now open your polls_list.html file, because we want to retrieve the data in this file, so add this code. in here we are using for loop to iterate over the data in our database and render that data in to a list.

 {% for poll in polls %}
    <ul class="list-group">
        <li class="list-group-item">
            {{poll}}
        </li>
    </ul>
    {% endfor %}

{% for poll in polls %}

</li>

</ul>

{% endfor %}

This is our complete code for polls_list.html.

{% extends 'base.html' %}


{% block title %} Polls List {% endblock %}


{% block body %}

<div class="container">

    <h1>Polls List Page</h1>

    {% for poll in polls %}
    <ul class="list-group">
        <li class="list-group-item">
            {{poll}}
        </li>
    </ul>
    {% endfor %}
</div>


{% endblock %}

{% extends 'base.html' %}

{% block title %} Polls List {% endblock %}

{% block body %}

<h1>Polls List Page</h1>

{% for poll in polls %}

</li>

</ul>

{% endfor %}

</div>

{% endblock %}

Now run the code and this is the result.

Rendering Database Data in Django Templates

Rest of the file for the tutorial.

mysite/templates/base.html

<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock %}</title>

    <!-- CSS -->
<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" >

    <link rel="stylesheet" href="{% static 'css/style.css' %}">

</head>
<body>
{% include 'navbar.html' %}

{% block body %}

{% endblock %}

<!-- jQuery and JS bundle w/ Popper.js -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" >

</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/
bootstrap.bundle.min.js" ></script>


</body>
</html>

<!DOCTYPE html>

{% load static %}

<head>

<title>{% block title %}{% endblock %}</title>

href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" >

</head>

<body>

{% include 'navbar.html' %}

{% block body %}

{% endblock %}

</script>

bootstrap.bundle.min.js" ></script>

</body>

</html>

mysite/templates/navbar.html

<nav class="navbar navbar-expand-lg navbar navbar-dark bg-dark">
  <a class="navbar-brand" href="{% url 'index' %}">GeeksCoders</a>
  <button class="navbar-toggler" type="button"
          data-toggle="collapse" data-target="#navbarNavAltMarkup"
          aria-controls="navbarNavAltMarkup" aria-expanded="false"
          aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-link active" href="{% url 'index' %}">Home
          <span class="sr-only">(current)</span></a>
      <a class="nav-link" href="{% url 'polls_list' %}">Polls</a>

    </div>
  </div>
</nav>

<a class="navbar-brand" href="{% url 'index' %}">GeeksCoders</a>

<button class="navbar-toggler" type="button"

data-toggle="collapse" data-target="#navbarNavAltMarkup"

aria-controls="navbarNavAltMarkup" aria-expanded="false"

aria-label="Toggle navigation">

</button>

<a class="nav-link active" href="{% url 'index' %}">Home

<span class="sr-only">(current)</span></a>

<a class="nav-link" href="{% url 'polls_list' %}">Polls</a>

</div>

</nav>

mysite/templates/index.html

{% extends 'base.html' %}


{% block title %} Home {% endblock %}


{% block body %}

<div class="container">

    <h1>Welcome to GeeksCoders.com</h1>
<p>Tutorial Number 12 - Render Database Data</p>

</div>


{% endblock %}

{% extends 'base.html' %}

{% block title %} Home {% endblock %}

{% block body %}

<h1>Welcome to GeeksCoders.com</h1>

<p>Tutorial Number 12 - Render Database Data</p>

</div>

{% endblock %}

mysite/polls/models.py

from django.db import models

# Create your models here.

class Question(models.Model):
    text = models.CharField(max_length=100)
    pub_date = models.DateTimeField('date published')


    def __str__(self):
        return self.text

from django.db import models

# Create your models here.

class Question(models.Model):

text = models.CharField(max_length=100)

pub_date = models.DateTimeField('date published')

def __str__(self):

return self.text

mysite/polls/admin.py

from django.contrib import admin
from .models import Question

# Register your models here.

#first way
#admin.site.register(Question)


#second way
@admin.register(Question)
class QuestionModel(admin.ModelAdmin):
    list_filter = ('text', 'pub_date')
    list_display = ('text', 'pub_date')
    date_hierarchy = ('pub_date')
    ordering = ('pub_date', 'text')

from django.contrib import admin

from .models import Question

# Register your models here.

#first way

#admin.site.register(Question)

#second way

@admin.register(Question)

class QuestionModel(admin.ModelAdmin):

list_filter = ('text', 'pub_date')

list_display = ('text', 'pub_date')

date_hierarchy = ('pub_date')

ordering = ('pub_date', 'text')

mysite/polls/urls.py

from django.urls import path
from .views import Index, Polls
urlpatterns = [
    path('', Index, name = 'index'),
    path('polls/', Polls, name = 'polls_list')
]

from django.urls import path

from .views import Index, Polls

urlpatterns = [

path('', Index, name = 'index'),

path('polls/', Polls, name = 'polls_list')

]

mysite/urls.py

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('polls.urls'))
]

from django.contrib import admin

from django.urls import path, include

urlpatterns = [

path('admin/', admin.site.urls),

path('', include('polls.urls'))

]