django 24. ListView, Pagination 소개 및 적용

List View 

• 여러개의 객체(게시물)를 다루는 view

https://developer.mozilla.org/ko/docs/Learn/Server-side/Django/Generic_views

Django Tutorial Part 6: Generic list and detail views - Web 개발 학습하기 | MDN

 

views.py

class ArticleListView(ListView):
    model = Article
    context_object_name = 'article_list'
    template_name = 'articleapp/list.html'
    paginate_by = 5

• list.html을 ListView로 지정
• pagination 개수 지정 (paginate_by)

 

pagination

• 한 페이지에 몇 개의 페이지를 보여줄껀지 설정
• get 방식으로  ?page=페이지수 추가

 

list.html

{% extends 'base.html' %}
{% load static %}

{% block content %}

<style>

.container div{
  width: 250px;
  background-color: antiquewhite;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 1rem;
}

.container img{
  width: 100%;
  border-radius: 1rem;

}


</style>

<!-- article 글 있으면 보여주기-->
{% if article_list %}
<div class="container">
    {% for article in article_list %}
    <a href="{% url 'articleapp:detail' pk=article.pk %}">
        <div>
            <!-- for문의 article이 card.html 의 article과 같다  -->
            {% include 'snippets/card.html' with article=article %}
        </div>
    </a>
    {% endfor %}
</div>
<script src="{% static 'js/magicgrid.js' %}"></script>
{% else %}
<div style="text-align: center">
    <h1>No Articles YET!</h1>
</div>
{% endif %}

<!--페이지네이션 버튼 추가-->
{% include 'snippets/pagination.html' with page_obj=page_obj %}

<div style="text-align:center">
    <a href="{% url 'articleapp:create' %}" class="btn btn-dark rounded-pill col-3 mt-3 mb-3">
      Create Article
    </a>

</div>


{% endblock %}

• article 게시물 있으면 게시글 list로 보여주고, 없으면 없다는 메시지 띄움
• 게시물의 이미지 설정 파일 추가(  /snippets/card.html )
• 페이지네이션 버튼 추가 ( /snippets/pagination.html )

 

card.html

<div>
    <img src="{{ article.image.url }}" alt="">
</div>

• 이미지 url 추가

 

pagination.html

<div style="text-align: center; margin: 1rem 8;">
<!-- 이전 페이지-->
    {% if page_obj.has_previous %}
    <a href="{% url 'articleapp:list'%}?page={{ page_obj.previous_page_number }}"
       class="btn btn-secondary rounded-pill">
        {{ page_obj.previous_page_number }}
    </a>
    {% endif%}
<!-- 현재 페이지-->
     <a href="{% url 'articleapp:list'%}?page={{ page_obj.number }}"
       class="btn btn-secondary rounded-pill active">
        {{ page_obj.number }}
    </a>
<!-- 다음 페이지-->
    {% if page_obj.has_next %}
    <a href="{% url 'articleapp:list'%}?page={{ page_obj.next_page_number }}"
       class="btn btn-secondary rounded-pill">
        {{ page_obj.next_page_number }}
    </a>
    {% endif%}
</div>

• 이전페이지, 현재 페이지, 다음 페이지 pagination 작성

 

• 페이지네이션 추가
• views.py에서 page 5개로 지정

 

detail.html

{% extends 'base.html' %}
{% load bootstrap4 %}

{% block content %}

<div>
    <div style="text-align: center; max-width: 700px; margin: 4rem auto;">
        <h1>{{ target_article.title }}</h1>
        <h5>{{ target_article.writer.profile.nickname }} </h5>
        <hr>

        <img style="width: 100%; border-radius: 1rem; margin: 2rem 0;" src="{{ target_article.image.url }}" alt="">

        <p>
            {{ target_article.content }}
        </p>

        {% if target_article.writer == user %}
        <a href="{% url 'articleapp:update' pk=target_article.pk %}"
        class="btn btn-primary rounded-pill col-3">
            Update
        </a>

         <a href="{% url 'articleapp:delete' pk=target_article.pk %}"
         class="btn btn-danger rounded-pill col-3">
            Delete
        </a>
        {% endif %}
        <hr>

       
    </div>

</div>

{% endblock %}

• 게시물 detail 페이지 작성자와 로그인한 user가 같을 경우만 수정, 삭제버튼 보이게 if구문 추가
• style css 변경

• 게시물 detail 페이지