Displaying Tasks with ListView

From Creation to Display: Introducing ListView

Just as CreateView is Django's shortcut for building creation forms, ListView is a generic Class-Based View (CBV) designed to display a list of objects from a model. It handles the boilerplate of querying the database and passing the list of objects to a template for rendering.

Conceptually, the process looks like this:

Using ListView saves you from writing repetitive code to fetch and display data, which is why it's a fundamental tool in Django development.

To get a better sense of how ListView works and what it's used for, let's start with a brief overview.

Step 1: Implementing the TaskList View

Let's start by creating the view. Open your app's views.py file. We will define a new class that inherits from ListView.

A naive implementation might look like this:

# In your_app/views.py
from django.views.generic.list import ListView
from .models import Task
# ... other imports and views ...

class TaskList(ListView):
    model = Task

However, this has a critical flaw: it would fetch all Task objects from the database and display them to any user. This is a major data privacy issue. We need to ensure that users can only see their own tasks.

To fix this, we'll do two things, just as we did with CreateView:

1. Require login: Use LoginRequiredMixin to ensure only authenticated users can access the page.
2. Filter data: Override a method in ListView to filter the tasks based on the current user.

The correct method to override for filtering the main list of objects is get_queryset(). This method is responsible for determining the list of objects that the view will display.

Now, let's write the correct and secure view in views.py.

# your_app/views.py
from django.views.generic.list import ListView
from django.contrib.auth.mixins import LoginRequiredMixin

from .models import Task
# ... other views ...

class TaskList(LoginRequiredMixin, ListView):
    model = Task
    context_object_name = 'tasks' # Custom name for the list of objects in the template

    def get_queryset(self):
        """
        Return the list of items for this view.
        The list is filtered to only include tasks owned by the current user.
        """
        return Task.objects.filter(user=self.request.user)

Let's break this down:

• LoginRequiredMixin: As before, this protects the view. If a non-logged-in user tries to access it, they'll be redirected to the login page.
• context_object_name = 'tasks': By default, ListView passes the list of objects to the template under the variable name object_list. This isn't very descriptive. By setting context_object_name, we can give it a more intuitive name, 'tasks', which we will use in our template.
• def get_queryset(self): We override this method. Instead of letting the default implementation return Task.objects.all(), we explicitly return Task.objects.filter(user=self.request.user). This queries the database for Task objects where the user field matches the currently logged-in user (self.request.user).

Step 2: Creating the URL Pattern

Now we need to connect our TaskList view to a URL. This is the 'tasks' URL we've been waiting to create. We'll make it the root URL of our app, so visiting http://127.0.0.1:8000/ will show the task list.

Open your app's urls.py and add the new pattern:

# In your_app/urls.py
from django.urls import path
from .views import TaskList, TaskCreate # Import TaskList

urlpatterns = [
    path('', TaskList.as_view(), name='tasks'), # The root URL now points to our list view
    path('task-create/', TaskCreate.as_view(), name='task-create'),
    # ... any other URLs you might add ...
]

Make sure you import TaskList at the top of the file. By giving this path the name='tasks', the success_url from our TaskCreate view will now work correctly.

Step 3: Building the HTML Template

ListView automatically looks for a template named <model_name>_list.html (so, task_list.html in our case). Let's create this file in your app's templates directory (your_app/templates/your_app/).

This template will receive the context from our view, which includes the list of tasks under the name tasks. We can loop through this list to display each one.

<!-- your_app/templates/your_app/task_list.html -->

<h1>My Tasks</h1>

<a href="{% url 'task-create' %}">Add New Task</a>

<hr>

{% if tasks %}
    <ul>
    {% for task in tasks %}
        <li>
            <strong>{{ task.title }}</strong>
            <p>{{ task.description|truncatewords:20 }}</p>
        </li>
    {% endfor %}
    </ul>
{% else %}
    <p>You have no tasks yet. Get started by adding one!</p>
{% endif %}

Key Template Features:

• <a href="{% url 'task-create' %}">: This provides a convenient link for the user to navigate to the creation page we built in the last lesson. The {% url %} tag looks up the URL by its name.
• {% if tasks %} ... {% else %} ... {% endif %}: This is a powerful feature of the Django Template Language. It checks if the tasks list is empty. If it's not, it proceeds to the {% for %} loop. If it is empty, it displays the message in the {% else %} block.
• {% for task in tasks %} ... {% endfor %}: This loop iterates over every task object in our tasks list and renders the HTML inside the loop for each one.
• {{ task.title }}: We can access the attributes of each task object using dot notation.
• |truncatewords:20: This is a template filter. It truncates the description to the first 20 words, which is useful for keeping the list view clean.

The following article provides another great, fully-styled example of a task list template, which you may find useful for inspiration.

Now, run your server (python manage.py runserver), log in, and navigate to http://127.0.0.1:8000/. You should see a list of all the tasks you created in the last lesson!

Conclusion

Excellent work today! You have successfully implemented the "Read" functionality for your task manager. Users can now see a list of their own tasks, and you've connected the create and read views into a cohesive user experience.

Key Takeaways:

• ListView is the generic CBV for displaying lists of objects.
• It's critical to filter data for the current user to ensure privacy.
• Overriding the get_queryset() method is the standard and recommended way to filter the objects displayed by a ListView.
• Using LoginRequiredMixin protects your views from unauthorized access.
• You can customize the context variable name with context_object_name to make your templates more readable.

Preview of the Next Lesson:

Now that users can create and read tasks, the next logical step is to allow them to modify existing tasks. In the next lesson, you will build the 'Update' functionality to edit an existing task using UpdateView. This will bring us one step closer to a fully-featured CRUD application.