[DOCKER] Django Tutorial (Blog App Creation) ③ --Article List Display

Last time, in Django tutorial (blog application creation) ② --model creation, management site preparation, I was able to confirm up to the point of creating an article on the management site.

This time, we will be able to display a list of articles created on the management site.

template preparation (file creation)

Let's create a template first. Create post_list.html under templates / blog.

└── templates
    └── blog
        ├── index.html
        └── post_list.html

view preparation

Here's a little important explanation.

In Django, you can use a mechanism called ** class-based general-purpose view ** to easily pull a model to display an article. Templates can be displayed, and application creation can be done efficiently. By the way, the last time I messed with views.py, there was a notation ** generic **, which is also a necessary declaration in preparation for using class-based generic views.

view.py

from django.views.generic import TemplateView

There are many types of generic class views, of which the one used just to display the template. This is the ** TemplateView ** used to display index.html. In order to display index.html, the template to be called was specified in views.py.

view.py

class IndexView(TemplateView):
    template_name = 'blog/index.html'

Also, until now, for the sake of clarity, it was declared as genetic and then the class to be used was specified and imported. You can also call it in the form of generic.xxxView, so let's rewrite views.py a little.

views.py(After rewriting)

from django.views import generic

class IndexView(genetic.TemplateView):
    template_name = 'blog/index.html'

I'm going to call a lot of class-based generic views, so I've made the first declaration cleaner.

Now, this time, we need to not only display the template simply, but also call the information model of the article from the database. Therefore, I use another class-based generic view called ** ListView **, but the usage is similar to that of TemplateView.

All you have to do is declare the model you want to use first, write the class, and specify the model to call.

views.py(Add ListView)

from django.views import generic
from .models import Post #Import Post model

class IndexView(genetic.TemplateView):
    template_name = 'blog/index.html'

class PostListView(generic.ListView): #Inherit the generic ListView class
    model = Post #Call the model you want to list

By including the description model = Post, the article list can be passed to the template as a list type with a variable ** post_list **.

Those who remembered when using TemplateView and thought "Why don't you specify a template?" Are sharp.

Of course, you can specify it, but in fact, generic.ListView has a convenient function that calls it without specifying it by making the file name of template according to the rule. (However, since it is easier for a third party to clearly indicate it, I think that it may be intentionally described.)

The rule is to use a lowercase model name like "post_list.html" and a string that separates the string "list" with an underscore in ListView as the file name. (It depends on the class you use, so I will explain it later.)

Now you have a view ready to display the template post_list.html and at the same time pass the article list to the template.

Receive the article list on the template side

To receive the model passed to post_list.html, there is a Django-specific description method.

In Django's template, you can write Python code by enclosing it in ** {%%} **, and to display the value in the browser as html, you can use ** {{}} ** with curly braces. Describe.

This time, the article list is a list type called ** post_list **, and variables are passed as template, so expand it with a for loop and extract each article title and date. (The data of each column can be retrieved by specifying the column name with a dot in the variable name)

post_list.html

<h1>List of articles</h1>

<table class="table">
  <thead>
    <tr>
      <th>title</th>
      <th>date</th>
    </tr>
  </thead>
  <tbody>
    {% for post in post_list %}
    <tr>
      <td>{{ post.title }}</td>
      <td>{{ post.date }}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>

Routing settings

Edit blog / urls.py to call ListView when you finally access the URL to display the article list.

blog/urls.py

from django.urls import path
from . import views

app_name = 'blog'

urlpatterns = [
    path('', views.IndexView.as_view(), name='index'),
    path('list', views.PostListView.as_view(), name='list'), #Add here
]

Keep in mind that View, Template, and URL are involved when displaying something like this time.

Check the article list display

Now that the model is ready to be displayed, let's run runserver to access the url. Since I set the URL path list in the blog app earlier, You can view it at the URL ** 127.0.0.1:8000/blog/list**.

The table is not cool, but you can see that the articles registered from the management site are displayed.

• The appearance will be adjusted later using BootStrap, but first we will make only the base to understand the basics of Django.

It's hard to understand if there is only one, so let's add about two articles from the management site and check again.

You can see that the title and date can be retrieved respectively.

Next time, we'll create unit tests that automate the tests.

→ Next time Django Tutorial (Blog App Creation) ④ --Unit Test