{"id":5956,"date":"2022-12-01T03:10:21","date_gmt":"2022-12-01T03:10:21","guid":{"rendered":"https:\/\/www.pythontutorial.net\/?page_id=5956"},"modified":"2023-08-21T06:53:47","modified_gmt":"2023-08-21T06:53:47","slug":"django-listview","status":"publish","type":"page","link":"https:\/\/www.pythontutorial.net\/django-tutorial\/django-listview\/","title":{"rendered":"Django ListView"},"content":{"rendered":"\n<p><strong>Summary<\/strong>: in this tutorial, you&#8217;ll learn how to use the Django <code>ListView<\/code> to display a list of tasks for the Todo list application.<\/p>\n\n\n\n<p class=\"note\">This tutorial begins where&nbsp;the&nbsp;<a href=\"https:\/\/www.pythontutorial.net\/django-tutorial\/django-todo-app\/\">Django Todo App tutorial<\/a> left off.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id='introduction-to-the-class-based-views'>Introduction to the class-based views <a href=\"#introduction-to-the-class-based-views\" class=\"anchor\" id=\"introduction-to-the-class-based-views\" title=\"Anchor for Introduction to the class-based views\">#<\/a><\/h2>\n\n\n\n<p>In the previous tutorials, you have learned how to build a blog application using function-based views. <\/p>\n\n\n\n<p>The function-based views are simple but flexible. In the earlier versions, Django only supported function-based views. Later, Django added support for class-based views that allow you to define views using classes.<\/p>\n\n\n\n<p>Class-based views are an alternative way to implement views. They <strong>do not replace<\/strong> the function-based views. However, they have some advantages in comparison with the function-based views:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Organize code related to HTTP methods like <code>GET<\/code> and <code>POST<\/code> using separate methods, instead of conditional branching in the same function.<\/li>\n\n\n\n<li>Leverage <a href=\"https:\/\/www.pythontutorial.net\/python-oop\/python-inheritance\/\">multiple inheritances<\/a> to create reusable view classes.<\/li>\n<\/ul>\n\n\n\n<p>We&#8217;ll use the class-based views to build the <a href=\"https:\/\/www.pythontutorial.net\/django-tutorial\/django-todo-app\/\">Todo application<\/a>.<\/p>\n\n\n\n<p class=\"note\">You can download the final code for this <a href=\"https:\/\/www.pythontutorial.net\/wp-content\/uploads\/2022\/12\/todo_list_2_list_view.zip\">Django ListView tutorial<\/a> here.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id='defining-a-class-based-view'>Defining a class-based view <a href=\"#defining-a-class-based-view\" class=\"anchor\" id=\"defining-a-class-based-view\" title=\"Anchor for Defining a class-based view\">#<\/a><\/h2>\n\n\n\n<p>To display a list of objects, you define a class that inherits from the <code>ListView<\/code> class. For example, the following defines the <code>TaskList<\/code> class in the <code>views.py<\/code> of the <code>todo<\/code> application:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"Python\" data-shcb-language-slug=\"python\"><span><code class=\"hljs language-python shcb-code-table\"><span class='shcb-loc'><span><span class=\"hljs-keyword\">from<\/span> django.shortcuts <span class=\"hljs-keyword\">import<\/span> render\n<\/span><\/span><mark class='shcb-loc'><span><span class=\"hljs-keyword\">from<\/span> django.views.generic.list <span class=\"hljs-keyword\">import<\/span> ListView\n<\/span><\/mark><span class='shcb-loc'><span><span class=\"hljs-keyword\">from<\/span> .models <span class=\"hljs-keyword\">import<\/span> Task\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><mark class='shcb-loc'><span><span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">TaskList<\/span><span class=\"hljs-params\">(ListView)<\/span>:<\/span>\n<\/span><\/mark><span class='shcb-loc'><span>    model = Task\n<\/span><\/span><span class='shcb-loc'><span>    context_object_name = <span class=\"hljs-string\">'tasks'<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"># ...<\/span>\n<\/span><\/span><span class='shcb-loc'><span>   \n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">Python<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">python<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The <code>TaskList<\/code> is a class based-view that inherits from the <code>ListView<\/code> class. In the <code>TaskList<\/code> class, we define the following attributes:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>model<\/code> specifies the objects from which model you want to display. In this example, we use the <code>Task<\/code> model. Internally, Django will query all objects from the <code>Task<\/code> model (<code>Task.objects.all()<\/code>) and pass it to a template.<\/li>\n\n\n\n<li><code>context_object_name<\/code> specifies the variable name of the model list in the template. By default, Django uses <code>object_list<\/code>. However, the name <code>object_list<\/code> is quite generic. Therefore, we override the <code>context_object_name<\/code> by setting its value to <code>tasks<\/code>.<\/li>\n<\/ul>\n\n\n\n<p>By convention, the <code>TaskList<\/code> class will load the <code>todo\/task_list.html<\/code> template. The template name follows this convention:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"Python\" data-shcb-language-slug=\"python\"><span><code class=\"hljs language-python\">app\/model_list.html<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">Python<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">python<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>If you want to set a different name, you can use the <code>template_name<\/code> attribute. In this tutorial, we&#8217;ll use the default template name, which is <code>task_list.html<\/code>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id='define-a-route'>Define a route <a href=\"#define-a-route\" class=\"anchor\" id=\"define-a-route\" title=\"Anchor for Define a route\">#<\/a><\/h2>\n\n\n\n<p>Change the <code>urls.py<\/code> of the <code>todo<\/code> application to the following:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"Python\" data-shcb-language-slug=\"python\"><span><code class=\"hljs language-python shcb-code-table\"><span class='shcb-loc'><span><span class=\"hljs-keyword\">from<\/span> django.urls <span class=\"hljs-keyword\">import<\/span> path\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-keyword\">from<\/span> .views <span class=\"hljs-keyword\">import<\/span> home, TaskList\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>urlpatterns = &#91;\n<\/span><\/span><span class='shcb-loc'><span>    path(<span class=\"hljs-string\">''<\/span>, home, name=<span class=\"hljs-string\">'home'<\/span>),\n<\/span><\/span><mark class='shcb-loc'><span>    path(<span class=\"hljs-string\">'tasks\/'<\/span>, TaskList.as_view(),name=<span class=\"hljs-string\">'tasks'<\/span>),\n<\/span><\/mark><span class='shcb-loc'><span>]\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">Python<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">python<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>How it works.<\/p>\n\n\n\n<p>First, import the <code>TaskList<\/code> class from the <code>views.py<\/code> module.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"Python\" data-shcb-language-slug=\"python\"><span><code class=\"hljs language-python\"><span class=\"hljs-keyword\">from<\/span> .views <span class=\"hljs-keyword\">import<\/span> home, TaskList<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">Python<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">python<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Second, define <code>tasks\/<\/code> URL that displays the task list:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"Python\" data-shcb-language-slug=\"python\"><span><code class=\"hljs language-python\">path(<span class=\"hljs-string\">'tasks\/'<\/span>, TaskList.as_view(),name=<span class=\"hljs-string\">'tasks'<\/span>),<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">Python<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">python<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>In this code, we map the URL <code>tasks\/<\/code> to the result of the <code>as_view()<\/code> method of the <code>TaskList<\/code> class. <\/p>\n\n\n\n<p>Note that you can specify the attributes of the <code>TaskList<\/code> class in the <code>as_view()<\/code> method. For example, you can pass a template name to the <code>as_view()<\/code> method as follows:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"Python\" data-shcb-language-slug=\"python\"><span><code class=\"hljs language-python\">path(<span class=\"hljs-string\">'tasks\/'<\/span>, TaskList.as_view(template_name=<span class=\"hljs-string\">'mytodo.html'<\/span>),name=<span class=\"hljs-string\">'tasks'<\/span>),<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">Python<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">python<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The <code>as_view()<\/code> method has arguments which are corresponding to the attributes of the <code>TaskList<\/code> class.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id='creating-a-django-listview-template'>Creating a Django ListView template <a href=\"#creating-a-django-listview-template\" class=\"anchor\" id=\"creating-a-django-listview-template\" title=\"Anchor for Creating a Django ListView template\">#<\/a><\/h2>\n\n\n\n<p>Define the <code>task_list.html<\/code> in the <code>templates\/todo<\/code> directory of the <code>Todo<\/code> app:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\">{%extends 'base.html'%}\n\n{%block content%}\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"center\"<\/span>&gt;<\/span>\n\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h2<\/span>&gt;<\/span>My Todo List<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/span>&gt;<\/span>\n\t{% if tasks %}\n\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ul<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"tasks\"<\/span>&gt;<\/span>\n\t\t{% for task in tasks %}\n\t\t\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"#\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"{% if task.completed%}completed{%endif%}\"<\/span>&gt;<\/span>{{ task.title }}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span> \n\t\t\t\t <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>  <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"task-controls\"<\/span>&gt;<\/span>\n\t\t\t\t \t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"#\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">i<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"bi bi-trash\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">i<\/span>&gt;<\/span> <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n\t\t\t\t\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"#\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">i<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"bi bi-pencil-square\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">i<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n\t\t         <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\t\t    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n\t\t{% endfor %}\n\t{% else %}\n\t\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>? Yay, you have no pending tasks!<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n\t{% endif %}\n\t<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n{%endblock content%}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The <code>task_list.html<\/code> template extends the <code>base.html<\/code> template of the project. In the <code>task_list.html<\/code> template, we iterate over the <code>tasks<\/code> <code>QuerySet<\/code> and display each of them as an item on a list. <\/p>\n\n\n\n<p>Also, we add the <code>completed<\/code> CSS class to the <code>a<\/code> tag if the task is completed. This CSS class will add a <s>line-through to the item<\/s>.<\/p>\n\n\n\n<p>If the <code>tasks<\/code> <code>QuerySet<\/code> is empty, we display a message saying that there are no pending tasks.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id='including-listview-link-in-the-base-template'>Including ListView link in the base template <a href=\"#including-listview-link-in-the-base-template\" class=\"anchor\" id=\"including-listview-link-in-the-base-template\" title=\"Anchor for Including ListView link in the base template\">#<\/a><\/h2>\n\n\n\n<p>Modify the <code>base.html<\/code> template to include the <code>My Tasks<\/code> link in the navigation:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-code-table\"><span class='shcb-loc'><span>{%load static %}\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-meta\">&lt;!DOCTYPE <span class=\"hljs-meta-keyword\">html<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\">\"en\"<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">charset<\/span>=<span class=\"hljs-string\">\"UTF-8\"<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"viewport\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"width=device-width, initial-scale=1.0\"<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">\"stylesheet\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"{% static 'css\/style.css' %}\"<\/span> \/&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>Todo List<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">header<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"header\"<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"container\"<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>            \t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"{%url 'home'%}\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"logo\"<\/span>&gt;<\/span>Todo<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">nav<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"nav\"<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>                \t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"{%url 'home'%}\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">i<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"bi bi-house-fill\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">i<\/span>&gt;<\/span> Home<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n<\/span><\/span><mark class='shcb-loc'><span>                \t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"{% url 'tasks' %}\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">i<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"bi bi-list-task\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">i<\/span>&gt;<\/span> My Tasks<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n<\/span><\/mark><span class='shcb-loc'><span>                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">nav<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">header<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">main<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"container\"<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>             {%block content %}\n<\/span><\/span><span class='shcb-loc'><span>             {%endblock content%}\n<\/span><\/span><span class='shcb-loc'><span>            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">main<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">footer<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"footer\"<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"container\"<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>               <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>\u00a9 Copyright {% now \"Y\" %} by <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"https:\/\/www.pythontutorial.net\"<\/span>&gt;<\/span>Python Tutorial<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">footer<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span>\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>If you open the URL:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"Python\" data-shcb-language-slug=\"python\"><span><code class=\"hljs language-python\">http:\/\/<span class=\"hljs-number\">128.0<\/span><span class=\"hljs-number\">.0<\/span><span class=\"hljs-number\">.1<\/span>:<span class=\"hljs-number\">8000<\/span>\/tasks\/<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">Python<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">python<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>you&#8217;ll see the task list as follows:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full border\"><img loading=\"lazy\" decoding=\"async\" width=\"705\" height=\"264\" src=\"https:\/\/www.pythontutorial.net\/wp-content\/uploads\/2022\/11\/django-todo-list-ListView-Example.png\" alt=\"\" class=\"wp-image-5973\" srcset=\"https:\/\/www.pythontutorial.net\/wp-content\/uploads\/2022\/11\/django-todo-list-ListView-Example.png 705w, https:\/\/www.pythontutorial.net\/wp-content\/uploads\/2022\/11\/django-todo-list-ListView-Example-300x112.png 300w\" sizes=\"auto, (max-width: 705px) 100vw, 705px\" \/><\/figure>\n\n\n\n<p class=\"note\">You can download the final code for this <a href=\"https:\/\/www.pythontutorial.net\/wp-content\/uploads\/2022\/12\/todo_list_2_list_view.zip\">Django ListView tutorial<\/a> here.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id='summary'>Summary <a href=\"#summary\" class=\"anchor\" id=\"summary\" title=\"Anchor for Summary\">#<\/a><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Create a class-based view that displays a list of objects by inheriting from the <code>ListView<\/code> class.<\/li>\n<\/ul>\n<div class=\"helpful-block-content\" data-title=\"\">\n\t<header>\n\t\t<div class=\"wth-question\">Was this tutorial helpful ?<\/div>\n\t\t<div class=\"wth-thumbs\">\n\t\t\t<button\n\t\t\t\tdata-post=\"5956\"\n\t\t\t\tdata-post-url=\"https:\/\/www.pythontutorial.net\/django-tutorial\/django-listview\/\"\n\t\t\t\tdata-post-title=\"Django ListView\"\n\t\t\t\tdata-response=\"1\"\n\t\t\t\tclass=\"wth-btn-rounded wth-yes-btn\"\n\t\t\t>\n\t\t\t\t<svg\n\t\t\t\t\txmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\tstroke-width=\"2\"\n\t\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\t\tstroke-linejoin=\"round\"\n\t\t\t\t\tclass=\"feather feather-thumbs-up block w-full h-full\"\n\t\t\t\t>\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3\"\n\t\t\t\t\t><\/path>\n\t\t\t\t<\/svg>\n\t\t\t\t<span class=\"sr-only\"> Yes <\/span>\n\t\t\t<\/button>\n\n\t\t\t<button\n\t\t\t\tdata-response=\"0\"\n\t\t\t\tdata-post=\"5956\"\n\t\t\t\tdata-post-url=\"https:\/\/www.pythontutorial.net\/django-tutorial\/django-listview\/\"\n\t\t\t\tdata-post-title=\"Django ListView\"\n\t\t\t\tclass=\"wth-btn-rounded wth-no-btn\"\n\t\t\t>\n\t\t\t\t<svg\n\t\t\t\t\txmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\tstroke-width=\"2\"\n\t\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\t\tstroke-linejoin=\"round\"\n\t\t\t\t>\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17\"\n\t\t\t\t\t><\/path>\n\t\t\t\t<\/svg>\n\t\t\t\t<span class=\"sr-only\"> No <\/span>\n\t\t\t<\/button>\n\t\t<\/div>\n\t<\/header>\n\n\t<div class=\"wth-form hidden\">\n\t\t<div class=\"wth-form-wrapper\">\n\t\t\t<div class=\"wth-title\"><\/div>\n\t\t\t<textarea class=\"wth-message\"><\/textarea>\n\t\t\t<input type=\"button\" name=\"wth-submit\" class=\"wth-btn wth-btn-submit\" id=\"wth-submit\" \/>\n\t\t\t<input type=\"button\" class=\"wth-btn wth-btn-cancel\" value=\"Cancel\" \/>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>In this tutorial, you&#8217;ll learn how to use the Django ListView to display a list of tasks for the todo list application.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":5531,"menu_order":13,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-5956","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.pythontutorial.net\/wp-json\/wp\/v2\/pages\/5956","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.pythontutorial.net\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.pythontutorial.net\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.pythontutorial.net\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pythontutorial.net\/wp-json\/wp\/v2\/comments?post=5956"}],"version-history":[{"count":0,"href":"https:\/\/www.pythontutorial.net\/wp-json\/wp\/v2\/pages\/5956\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/www.pythontutorial.net\/wp-json\/wp\/v2\/pages\/5531"}],"wp:attachment":[{"href":"https:\/\/www.pythontutorial.net\/wp-json\/wp\/v2\/media?parent=5956"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}