In this article we’re going to complete the first version of the movie website by adding list and detail pages.

Movie list page

The movielist page will display a list of all the available movie records in the page with the title being a hyperlink to the associated movie detail page.

URL mapping

Open /catalog/urls.py and copy in the line shown in bold below. As for the index page, this path() function defines a pattern to match against the URL (‘movies/’), a view function that will be called if the URL matches (views.MovieListView.as_view()), and a name for this particular mapping.

1
2
3
4
urlpatterns = [
    path('', views.index, name='index'),
    path('movies/', views.MovieListView.as_view(), name='movies'),
]

For Django class-based views we access an appropriate view function by calling the class method as_view(). This does all the work of creating an instance of the class, and making sure that the right handler methods are called for incoming HTTP requests.

View (CBV)

Now, Let Us Use generic views: Less code is better.

We could quite easily write the movie list view as a regular function, which would query the database for all movies, and then call render() to pass the list to a specified template. Instead, however, we’re going to use a class-based generic list view (ListView) — a class that display a list of objects.

Because the generic view already implements most of the functionality we need and follows Django best-practice, we will be able to create a more robust list view with less code, less repetition, and ultimately less maintenance.

Open movie/views.py, and copy the following code into the bottom of the file:

1
2
3
4
5
6
7
8
9
10
11
12
13
from django.views import generic

class MovieListView(generic.ListView):
    # queryset = Movie.objects.all()
    model = Movie
    # context_object_name = 'movie_list'

    def get_queryset(self):
        return Movie.objects.order_by('movie_title')[:20]

from django.views.generic import ListView
class MovieListView(ListView):
    pass

That’s it! The generic view will query the database to get all records for the specified model (Movie) ,within the template you can access the list of movies with the template variable named object_list OR movie_list (i.e. generically “*the_model_name*_list”).

The view passes the context (list of movies) by default as object_list and book_listaliases; either will work.

Note: This awkward path for the template location isn’t a misprint — the generic views look for templates in /*application_name*/*the_model_name*_list.htmlinside the application’s /*application_name*/templates/ directory (/movie/templates/).

You can add attributes to change the default behaviour above. For example, you can specify another template file Possibly the most useful variation is to change/filter the subset of results that are returned — so instead of listing all movies you might list top 5 movies that were read by other users.

1
2
3
4
5
6
from django.views.generic import View
class MovieListView(generic.ListView):
    model = Movie  #== queryset = Movie.objects.all() 
    context_object_name = 'my_movie_list'   # your own name for the list as a template variable, default is movie_list
    queryset = Movie.objects.filter(movie_title__icontains='star')[:5] # Get 5 movies containing the title war
    template_name = 'movie/my_arbitrary_template_name_list.html'  # Specify your own template name/location

While we don’t need to do so here, you can also override some of the class methods.

For example, we can override the get_queryset() method to change the list of records returned. This is more flexible than just setting the queryset attribute as we did in the preceding code fragment (though there is no real benefit in this case):

1
2
3
4
5
class MovieListView(generic.ListView):
    model = Book

    def get_queryset(self):
        return queryset = Movie.objects.filter(movie_title__icontains='star')[:5]

We might also override get_context_data() in order to pass additional context variables to the template (e.g. the list of movies is passed by default). The fragment below shows how to add a variable named “some_data” to the context (it would then be available as a template variable).

1
2
3
4
5
6
7
8
9
class MovieListView(generic.ListView):
    model = Book

    def get_context_data(self, **kwargs):
        # Call the base implementation first to get the context
        context = super(MovieListView, self).get_context_data(**kwargs)
        # Create any data and add it to the context
        context['some_data'] = 'This is just some data'
        return context

When doing this it is important to follow the pattern used above:

  • First get the existing context from our superclass.
  • Then add your new context information.
  • Then return the new (updated) context.

Movie detail page

The movie detail page will display information about a specific movie, , we’ll also list the ratings of the the related movies including the watching status.

URL mapping

In this case we use '<int:pk>' to capture the movieid, which must be a specially formatted string and pass it to the view as a parameter named pk (short for primary key). This is the id that is being used to store the movieuniquely in the database, as defined in the movieModel.

Important: The generic class-based detail view expects to be passed a parameter named pk. If you’re writing your own function view you can use whatever parameter name you like, or indeed pass the information in an unnamed argument.

1
2
3
4
5
urlpatterns = [
    path('', views.index, name='index'),
    path('movies/', views.MovieListView.as_view(), name='movies'),
    path('movie/<int:pk>', views.MovieDetailView.as_view(), name='movie-detail'),
]

Note that the The DetailView generic view expects the primary key value captured from the URL to be called "pk", so the name patterns has changed from <movie_id> to <pk>.

The pattern matching provided by path() is simple and useful for the (very common) cases where you just want to capture any string or integer. If you need more refined filtering (for example, to filter only strings that have a certain number of characters) then you can use the re_path() method.

This method is used just like path() except that it allows you to specify a pattern using a Regular expression. For example, the previous path could have been written as shown below:

1
re_path(r'^movie/(?P<pk>\d+)$', views.BookDetailView.as_view(), name='book-detail'),

(?P<name>…) - Capture the pattern (indicated by …) as a named variable (in this case “name”). The captured values are passed to the view with the name specified. Your view must therefore declare an argument with the same name!

Let’s consider a few real examples of patterns:

Pattern Description
r’^movie/(?P\d+)$' This is the RE used in our URL mapper. It captures all the digits (?P\d+) and passes them to the view in a parameter named ‘pk’. The captured values are always passed as a string! For example, this would match movie/1234 , and send a variable pk='1234' to the view.
r’^movie/(\d+)$' This matches the same URLs as the preceding case.
r’^movie/(?P[-\w]+)$' This matches a string that has book/ at the start of the line (^movie/), then has one or more characters that are either a ‘-’ or a word character ([-\w]+), and then ends.

One feature that we haven’t used here, but which you may find valuable, is that you can declare and pass additional options to the view.

1
2
path('url/', views.my_reused_view, {'my_template_name': 'some_path'}, name='aurl'),
path('anotherurl/', views.my_reused_view, {'my_template_name': 'another_path'}, name='anotherurl'),

Slug

A “slug” is a way of generating a valid URL, generally using data already obtained. For instance, a slug uses the title of an article to generate a URL.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# models.py
class Movie(models.Model):
    t_create = models.DateTimeField(auto_now_add=True)
    slug = models.SlugField(max_length=250, unique_for_date='t_create') 
    # ......
    def get_absolute_url(self):
        return reverse('movie:movie_detail', args=[self.t_create.year, self.t_create.month, self.t_create.day, self.slug])
# admin.py
prepopulated_fields = {'slug': ('movie_title',)}
# views.py
def movie_detail(request, year, month, day, movie):
    m = get_object_or_404(Movie, slug=movie, t_create__year=year, t_create__month=month,t_create__day=day)
     return render(request, 'movie/movie_detail.html', context={'movie': movie})
# urls.py
path('<int:year>/<int:month>/<int:day>/<slug:movie>/', views.movie_detail, name='movie_detail'),

View (CBV)

Open catalog/views.py, and copy the following code into the bottom of the file:

1
2
class MovieDetailView(generic.DetailView):
    model = Movie

That’s it! All you need to do now is create a template called movie_detail.html, and the view will pass it the database information for the specific Movie record extracted by the URL mapper. Within the template you can access the list of movies with the template variable named object OR movie(i.e. generically “*the_model_name*”).

If a requested record does not exist then the generic class-based detail view will raise an Http404 exception for you automatically — in production, this will automatically display an appropriate “resource not found” page, which you can customise if desired.

Just to give you some idea of how this works, the code fragment below demonstrates how you would implement the class-based view as a function if you were not using the generic class-based detail view.

1
2
3
4
5
6
7
def movie_detail_view(request, primary_key):
    try:
        movie= Movie.objects.get(pk=primary_key)
    except Movie.DoesNotExist:
        raise Http404('movie does not exist')
    
    return render(request, 'movie/movie_detail.html', context={'movie': movie})

Alternatively, we can use the get_object_or_404() function as a shortcut to to raise an Http404 exception if the record is not found.

1
2
3
4
5
from django.shortcuts import get_object_or_404

def movie_detail_view(request, primary_key):
    movie = get_object_or_404(Movie, pk=primary_key)
    return render(request, 'movie/movie_detail.html', context={'movie': movie})

Pagination

If you’ve just got a few records, our movie list page will look fine. However, as you get into the tens or hundreds of records the page will take progressively longer to load (and have far too much content to browse sensibly). The solution to this problem is to add pagination to your list views, reducing the number of items displayed on each page.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
from django.core.paginator import Paginator
all_movies = Movie.objects.all()
paginator = Paginator(all_movies, 10)  # 10 movies in each page
# <django.core.paginator.Paginator at 0x551ffd0>
paginator.count
# 37
paginator.num_pages
# 4
type(paginator.page_range)
# range
paginator.page_range
# range(1, 5)

page1 = paginator.page(1)
page1
# <Page 1 of 4>
page1.object_list
# <QuerySet [<Movie: Avatar: The Way of Water(2022-12-16)>,...]>

page2 = paginator.page(2)
page2.has_next()
# True
page2.has_previous()
# True
page2.has_other_pages()
# True
page2.next_page_number()
# 3
page2.previous_page_number()
# 1
page2.start_index() # The 1-based index of the first item on this page
# 11
page2.end_index() # The 1-based index of the last item on this page
# 19

paginator.page(0)
# Traceback (most recent call last):
# ...
# EmptyPage: That page number is less than 1
paginator.page(5)
# Traceback (most recent call last):
# ...
# EmptyPage: That page contains no results

Django has excellent inbuilt support for pagination. Even better, this is built into the generic class-based list views so you don’t have to do very much to enable it!

Views(CBV)

Open movie/views.py, and add the paginate_by line shown in bold below.

1
2
3
4
from django.views.generic import ListView
class MovieListView(generic.ListView):
    model = Movie
    paginate_by = 10

With this addition, as soon as you have more than 10 records the view will start paginating the data it sends to the template.

Templates

Now that the data is paginated, we need to add support to the template to scroll through the results set. Because we might want to do this in all list views, we’ll do this in a way that can be added to the base template.

1
2
{% include 'pagination.html' with page=page_obj %}
{% comment %} {% if is_paginated %} {% endcomment %}

Open /templates/pagination.html and copy in the following pagination code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{% block pagination %}
    {% if is_paginated %}
        <div class="pagination">
            <span class="page-links">
                {% if page_obj.has_previous %}
                <a href="{{ request.path }}?page={{ page_obj.previous_page_number }}">previous</a>
                {% endif %}
                <span class="page-current">
                    Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.
                </span>
                {% if page_obj.has_next %}
                <a href="{{ request.path }}?page={{ page_obj.next_page_number }}">next</a>
                {% endif %}
            </span>
        </div>
    {% endif %}
{% endblock %}

The page_obj is a Paginator object that will exist if pagination is being used on the current page. It allows you to get all the information about the current page, previous pages, how many pages there are, etc.

We use {{ request.path }} to get the current page URL for creating the pagination links. This is useful because it is independent of the object that we’re paginating.

But since you can’t use sort_by() and pass a parameter (the same with filter() described above) you will have to choose between three choices:

  1. Add a ordering inside a class Meta declaration on your model.
  2. Add a queryset attribute in your custom class-based view, specifying a order_by().
  3. Adding a get_queryset method to your custom class-based view and also specify the order_by().

REFERENCES