Creating Trending Snippet Page

Our next task is to display a list of snippets page based on the number of hits a snippet has received. We want to display a list of trending snippets across all languages at URL path /trending/ and snippets from a particular language at URL path /trending/<language_slug>/.

Let’s start by modifying trending_snippets view function in views.py file as follows:

djangobin/django_project/djangobin/views.py

Create trending.html template in djangobin app’s templates directory with the following code:

djangobin/django_project/djangobin/templates/djangobin/trending.html

Here are few things to notice:

In lines 27-46, we use a {% for %} tag to loop over the snippet list.

In lines 29-34, we display snippet title, creation time, hits and language name.

In lines 35-39, we check whether the snippet creator profile is private or not. If the profile is not private, we display the username and along with a link to the user profile page. On the other hand, if the profile is private we display a - (dash) in the User column.

Next, update djangobin app’s base.html template to include a link to trending snippet page:

djangobin/django_project/djangobin/templates/djangobin/base.html

Likewise, to display trending snippets from a particular language add a link to snippet_detail.html template as follows:

djangobin/django_project/djangobin/templates/djangobin/snippet_detail.html

Navigate your browser to http://127.0.0.1:8000/trending/. You will see a list of trending snippets across all the languages.

To view trending snippets from a particular language click on the language name in the Language column.

Another way to view trending snippets from a particular language is to click on the language name in the snippet detail page.

Either way, you will end up with a list of snippets from a particular language like this:

Pagination Basics

Let’s assume for the moment that our site became very popular and started receiving millions of visits every day.

Suddenly we will have a problem!

As things stand, we are displaying all snippets at once in trending snippets page. This will not only increase the page size but will also degrade the user experience. The user will have to wade through the snippet list to find out what they are looking for.

The solution is to use pagination and break a long list into multiple pages.

Django provides a class named Paginator which allows us to create paginated records. To use it, import it from django.core.paginator module.

To use pagination we, have to create a Paginator object first. The Paginator constructor has the following syntax:

The object_list can be a tuple, list, queryset etc. The records_per_page is a number of records you want to show on each page.

Here is the code to create a Paginator object to show 5 snippets per page:

The Paginator object has the following attributes and methods, which are frequently used while creating paginated records.

Attribute/Method Description
count The count attribute returns the total number of records, across all the pages.
num_pages The num_pages attribute returns total number of pages.
page(number) The page() method accepts a page number and returns a Page instance for that page. We use Page instance to access records in a page. If the argument is not a number, then it throws PageNotAnInteger exception. If the page specified doesn't exist it throws an EmptyPage exception.

The Page object also provides some useful attributes and methods.

Attribute/Method Description
object_list a list of objects in this page.
number 1 based numeric count of the current page.
has_next() returns True if there is next page. Otherwise False.
has_previous() returns True if there is previous page. Otherwise False.
next_page_number() returns next page number. If next page doesn't exists it throws a django.core.paginator.InvalidPage exception
previous_page_number() returns previous page number. If previous page doesn't exists it throws a django.core.paginator.InvalidPage exception
paginator This attribute returns the Paginated object attached to the Page object.

Open Django shell and let’s try some of the things we have learned so far:

Get the records for the first page:

To access the Paginator object use the paginator attribute:

The page1.paginator and p point to the same object:

Once we have access to Paginator object we can access it’s attributes and methods too.

Similarly, we can access the records for the second page:

I hope you get the idea here.

Once we have access to the Page object, we can use it in our template to loop over each item in the page. Consider the following code:

So all we need to do to use pagination is to pass the Page object as context variable to the template. That’s it. We don’t need to modify our {% for %} tag to use the Page object in anyway.

Adding Pagination to Trending Snippet Page

Our goal here is to paginate snippet list using the following URL pattern:

Similarly, to paginate snippet list for a particular language we will use the following URL pattern.

Open views.py and modify trending_snippets() view function as follows:

djangobin/django_project/djangobin/views.py

The code for creating paginated records (from line 16 to 30) will be same all across the views. Rather than copying and pasting the same code over and over again, we can assign the task to a function.

In the utils.py file add paginate_records() function towards the end of the file as follows:

djangobin/django_project/djangobin/utils.py

Then, update trending_snippets() view in views.py to use paginate_result() function as follows:

djangobin/django_project/djangobin/views.py

Next, add pagination links to trending_snippets.html by adding the following code just after the closing <table> tag.

djangobin/django_project/djangobin/templates/djangobin/trending.html

Open your browser and visit http://127.0.0.1:8000/trending/. You will see pagination links below the table as follows:

Creating Tag Page

The goal of this section is to create a Tag page which allows users to browse snippets from a particular tag.

Open views.py and modify tag_list view as follows:

djangobin/django_project/djangobin/views.py

Create a template named tag_list.html in the djangobin app and add the following code to it:

djangobin/django_project/djangobin/templates/djangobin/tag_list.html

Nothing new here, this template is almost similar to the trending snippets page.

Update snippet_detail.html template to display links to tag list page as follows:

djangobin/django_project/djangobin/templates/djangobin/snippet_detail.html

Open your browser and click on any tag in the snippet detail page. You should see tag list page like this:

Leave a Comment