Category detail page - 30 days of Django

Category detail view

I want to make it possible to go into the detail view of a category. Let's just begin with the template. Create a new folder called templates inside the category app, and a folder called templates inside that. In that folder, create a new file called "detail.html". It should look like this:

{% extends 'task/base.html' %}

{% block content %}
    <div class="frontpage">
        <h1>{{ category.title }}</h1>

        <div class="columns">
            <div class="column is-8">
                <h2>Tasks</h2>

                {% for task in category.tasks.all %}
                    <div>
                        <p>{{ task.title }}</p>
                    </div>
                {% endfor %}
            </div>

            <div class="column is-4">
                <h2>Categories</h2>

                {% for category in categories %}
                    <div>
                        <p>{{ category.title }}</p>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
{% endblock %}

As you can see, it's almost identical to the frontpage.html file. The only difference is the title, here we want to show the category title instead.

Next, open up "category/views.py" so we can create the view.

from django.shortcuts import render

from .models import Category

def category_detail(request, pk):
    category = Category.objects.get(pk=pk)
    categories = Category.objects.all()

    return render(request, 'category/detail.html', {'categories': categories, 'category': category})

This is also a little bit similar to the front page view. But there is one important difference. We have a new parameter in the function called "pk". This is short for primary key. This is an ID that we get from the URL, so we know which category to get from the database.

And when we get the category, we set "pk=pk". The first pk is the field in the database, and the second pk is the name in the parameter.

Okay, let's add this url to the urlpatterns.

Open up "toodoo/urls.py". First we need to import the category detail view. So above the "urlpatterns" list, add this:

from category.views import category_detail

Next, we need to add it to the list of urls. So inside the urlpatterns list, add this (below the front page url):

path('<int:pk>/', category_detail, name='category_detail'),

1. Here we add a dynamic value to the path. We say that we expect an integer (int) and give it the name of "pk" (the same name as in the view).
2. Then we pass in the view we want to use and set the name.

Last step before we can test now is to modify the frontpage template.

{% extends 'task/base.html' %}

{% block content %}
    <div class="frontpage">
        <h1>{{ title }}</h1>

        <div class="columns">
            <div class="column is-8">
                <h2>Tasks</h2>

                {% for task in category.tasks.all %}
                    <div>
                        <p>{{ task.title }}</p>
                    </div>
                {% endfor %}
            </div>

            <div class="column is-4">
                <h2>Categories</h2>

                {% for category in categories %}
                    <div>
                        <p>
                            <a href="{% url 'category_detail' category.id %}">{{ category.title }}</a>
                        </p>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
{% endblock %}

There isn't too many changes, we just added a link to the category detail page around the category title.

We use a template function called "url" which comes from django. Here we use the name of the path (which we defined in urls.py). And we pass in the category id. Based on this, Django will return the correct url to the category page.

You can now go to the browser and test this out :-)

Table of contents

• 1. Introduction
• 2. Installation and setup
• 3. How things work
• 4. The first Django app
• 5. Your first view
• 6. Your first template
• 7. Testing our site
• 8. Extending templates
• 9. Your first model
• 10. The admin interface
• 11. Showing contents from the model
• 12. Another app (category)
• 13. Connecting two models
• 14. Show list of categories
• 15. Category detail page