Displaying dynamic data in Django views

In the previous lessons, we have looked at how to create models to represent data, how to set up views and routes, and use templates and base templates to display content to the user. In this lesson, we will look at how to display dynamic data (eg. data from the database) in a Django function view.

Step 1 - Create a destinations view

To get started, open the views.py file (in your app folder) and add the following code so you can work with data from the database:

from . import models

Now add a new function-based view that will display a list of destinations on a page to the user. This function will fetch all destinations from the database and store them in a list. It will then render an HTML template (called destinations.html - it doesn’t exist yet but we will make it shortly) and pass through the list of destinations to be displayed on that page. Add the following code to the bottom of the views.py file:

def destinations(request):
all_destinations = models.Destination.objects.all()
return(render(request, 'destinations.html', {
'destinations': all_destinations
}))

Note that we are using the models.Destination.objects.all() query to get all records that exist in the destinations table. If you’d like to try other queries (eg. search for a destination with a specific name), you can refer back to the examples of queries here).

Here is the full code for the views.py file:

Step 2 - Create the destinations template

The next step is to create the template for the destinations page. To do this, create a new file called destinations.html inside your app’s templates folder. This template will inherit the structure from our base template created earlier. A for loop will be used to iterate through each destination in the destinations list and display the name of each destination inside a ‘card’ layout.

Add the following code to the newly created destinations.html template file (inside your app’s templates folder):

Step 3 - Set up the destinations route

Now we need to set up the route for the destinations view. Open the urls.py file - the one inside your app folder (eg. myapp/urls.py), not the global urls.py file in the project folder! You will need to add a route for the destinations view to your urlpatterns list, like this:

path('destinations', views.destinations, name='destinations')

The code in the urls.py file (in your app folder) should now look like this:

Step 4 - Test the view

To test your destinations view, run the server (using the command python3 manage.py runserver on Mac, or python manage.py runserver on Windows). Once you’re server is running, enter your server’s address in your browser with /destinations at the end of the URL eg. http://127.0.0.1:8000/destinations

The Destinations page should load showing a list of destinations in the database, displayed as cards.

Step 5 - Update the navbar

Now that we have a page showing a list of destinations in the database, we could make it easier for viewers to get to the page. To do this, we can edit the base template to add Destinations to the navbar menu at the top of each page.

Go back to the base.html file in your app’s templates folder. Add the following line of code to the navbar div (between the Home and About links).

<a href="{% url 'destinations' %}">Destinations</a>

Here is the full code for the base.html file:

Refresh the webpage in your browser and you should now notice the Destinations link added to the navigation menu at the top of each web page on the site (if you don’t see it, make sure you have saved your code and that the server has restarted).

In the next lesson, we will look at how to create generic views so that we can have separate pages displaying more information about each of the destinations that exist in the database.

Next lesson: Displaying data in generic views with Django