Django – Getting Data from PostgreSQL and Showing it to Template

In this Django tutorial, we’ll see how we can get the data stored in the database and display it to the template.

Prerequisites

Have a look on the previous article, in which we’ve seen how to create an app, model and create a super user to work with admin interface.

http://thecrazyprogrammer.com/2019/01/django-models.html

So let’s start.

Getting Data from PostgreSQL and Showing it to Template

1. Upload Data First

We’ve already created a model Job inside jobs app, which is having two fields ImageField and CharField, ImageField for storing a picture for a particular job and TextField to store the summary about that job.

Screenshot of Model Job:

Getting Data from PostgreSQL and Showing it to Template 1

Screenshot of Admin Panel:

Getting Data from PostgreSQL and Showing it to Template 1

Getting Data from PostgreSQL and Showing it to Template 3

Currently we have no data inside our database. So let’s upload some data using the admin panel. (we’ll also see how to upload data using templates in later articles). So click on ADD JOB button and upload some pics and text.

Getting Data from PostgreSQL and Showing it to Template 4

So I’ve added two Job objects. Now let’s see how to get them and print them on the template.

Getting Data from PostgreSQL and Showing it to Template 52. Create a Template

Now I am going to create a template inside the jobs App. You can also create outside the App as we have created in the previous article. But as we’re going to show jobs on that template so its a good idea to create the templates related to the jobs App inside the App.

So to create a template inside app, first create a directory named as templates inside the jobs app, then create a directory with the same name as app inside templates. So our directory structure will look like this:

Getting Data from PostgreSQL and Showing it to Template 6

Inside this jobs folder we’ll create a HTML file named as myjobs.html.

Getting Data from PostgreSQL and Showing it to Template 7

3. Create a URL Path for Template

To create a url path, open your urls.py file and add a path for our newly created template myjobs.html.

Currently we’ve only one path in our urls.py, which we have also used to open admin panel.

Getting Data from PostgreSQL and Showing it to Template 8

And now add this line to load images from MEDIA_ROOT:

+ static(settings.MEDIA_URL, document_root = settings.MEDIA_ROOT)

To use static and settings in above line we’ve to import:

from django.conf.urls.static import static

from django.conf import settings

So finally our urls.py will look like:

from django.contrib import admin
from django.urls import path
from jobs import views
from django.conf.urls.static import static
from django.conf import settings
urlpatterns = [
    path('admin/', admin.site.urls),
    path('myjobs/', views.showjobs),
 ] + static(settings.MEDIA_URL, document_root = settings.MEDIA_ROOT)

Now we’ll add one more path to navigate to myjobs template.

urls.py:

from django.contrib import admin
from django.urls import path
from jobs import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('myjobs/', views.showjobs),
]

So I’ve added a new path for my jobs have two parameters, first is the URL to navigate to myjobs.html and second one is a functions name which will describe what to do when someone open the URL ‘domain-name.com/myjobs’, in our case it is https://localhost:8000/myjobs.

So now we’ve to create a function named as showjobs inside the views.py of jobs app. If you’re wondering that how we can access views.py file of jobs app in urls.py, then take a look on the third line in above code where I had imported views of jobs app.

4. Create a Function to Return the Template

Open views.py file and add a function named as showjobs.

views.py:

from django.shortcuts import render
from .models import Job

def showjobs(request):
    jobs = Job.objects
    return render(request, 'jobs/myjobs.html', { 'jobs':jobs } )

Getting Data from PostgreSQL and Showing it to Template 9

In the second line we’ve imported our model Job to get access to all the Job objects stored in our database. In Line 5, we’re getting all the objects from database and store it into the new variable called jobs. At last we’re passing that jobs variable with the same key name to the template.

5. Edit Template File to Show Jobs

myjobs.html:

{% for job in jobs.all %}
          
              <img src="{{ job.image.url }}">
           	<br>
                <p > {{ job.summary }}</p>

	<hr>
           
  {% endfor %}

Now run the server and open the link below:

 http://localhost:8000/myjobs/

Getting Data from PostgreSQL and Showing it to Template 10

So that’s all. Finally we got our data from database and displayed it on the template.

How it is Working

Let’s say, a user want to access a web-page on our website, his/her request will be redirected to the urls.py. For example – user tries to access domain-name.com/myjobs/ (https://localhost:8000/myjobs) so his request will be redirected to urls.py looking for a path having ‘myjobs/’ after domain name.

  • In urls.py, we have a path for myjobs (line 10)

  path(‘myjobs/’, views.showjobs),

After requested URL found, the request will be redirected to the function written along with the path. In our case it is views.showjobs.

  • In views, we have a functions called showjobs

Getting Data from PostgreSQL and Showing it to Template 11

which is receiving the request and return a HTML template myjobs.html to the user along with the all the objects stored in the database.

So now myjobs.html will be displayed to the user.

  • On myjobs.html page:

on template we’ve all the objects of model Job sent from the showjobs function. So we’ll loop through all the objects using for loop and display it.

Getting Data from PostgreSQL and Showing it to Template 12

To display the image we’ve used <img> tag and to print the summary, the <p> is used.

So that’s all for this tutorial.

If you’ve any confusion related with this topic, let us know in the comment box.

1 thought on “Django – Getting Data from PostgreSQL and Showing it to Template”

Leave a Comment

Your email address will not be published. Required fields are marked *