47. (app3) main view 에서 이미지 보여주기

1. kilogram/urls.py에서 IndexView클래스를 login_required로 감싸준다.

- 로그인을 했을 때만 사진이 보여지도록 함.

- 아래의 방법은 여러가지 방법중 하나일 뿐.

from django.contrib.auth.decorators import login_required

urlpatterns = [
    url(r'^$', login_required(views.IndexView.as_view()), name='index'),
    url(r'^upload$', views.upload, name='upload'),
]

2. mysite/urls.py에서도 1번과 같이 해준다.

from django.contrib.auth.decorators import login_required

urlpatterns = [
    url(r'^$', login_required(kilogram_views.IndexView.as_view()), name='root'),
]

3. views.py에서 IndexView클래스를 TemplateView가 아닌 ListView를 상속받도록 수정한다.

from django.views.generic.list import ListView

class IndexView(TemplateView):     # 제네릭의 TemplateView는 아무기능 없이 템플릿만 표시해 주는 뷰에서 사용
    template_name = 'kilogram/index.html'

class IndexView(ListView):
    # model = Photo 이렇게 해주면 사용자를 안가리고 모든 photo객체가 넘어가게 되므로 아래와 같이 쿼리를 지정해줌.
    context_object_name = 'user_photo_list' # 템플릿에 전달되는 이름

    def get_queryset(self):
        user = self.request.user    # 로그인되어있는 사용자
        return user.photo_set.all().order_by('-pub_date')

4. localhost:8000/kilogram 에 접속해봄

- 사진을 보여주기 위해 kilogram/photo_list.html을 찾고있음을 알 수 있음.

5. kilogram/index.html의 이름을 photo_list.html로 변경해줌

6. photo_list.html을 사진이 보여지도록 수정해줌

{% extends 'kilogram/base.html' %}
{% block content %}

<h1>Kilogram Main Page</h1>

{% endblock %}

{% extends 'kilogram/base.html' %}
{% block content %}

<p> <a class="btn btn-primary" href="{% url 'kilogram:upload'%}">업로드</a></p>

  {% if user_photo_list %}
  {% for photo in user_photo_list %}
  <div class="panel panel-default" align="center">
    <div class="panel-heading"><h4>{{photo.owner.username}}</h4></div>
    <div class="panel-body">
      {% if photo.image.width > 800 %}
      <p><img src = '{{photo.image.url}}' width='600' /> <br>
        {% else %}
        <p><img src = '{{photo.image.url}}' /> <br>
          {% endif %}
          {{photo.comment}}</p>
      </div>
    </div>
      {% endfor %}
      {% else %}
      <h4>아직 사진이 없네요. 첫번째 사진을 업로드하세요!</h4>
      {% endif %}

{% endblock %}

<사진이 있는경우>

<사진이 없는경우>

7. 페이지 네이션을 구현.

- DB의 입장에서는 페이징 쿼리를 구현한다라고 함.

- 웹 서버의 입장에서는 페이지 네이션을 구현한다고 함.

- 1) views.py의 IndexView클래스에서 paginate_by 를 추가해줌

- 2) photo_list.html에 아래의 코드를 삽입

paginate_by = 2 # 사진을 몇개씩 보여줄 것인지 지정.

<!-- pagenation nav -->
{% if is_paginated %}
<nav aria-label="...">
    <ul class="pager">
        {% if page_obj.has_previous %}
        <li><a href="{%url 'kilogram:index'%}?page={{ page_obj.previous_page_number }}">이전</a></li>
        {% endif %}
        <li> <a href="#">페이지 {{ page_obj.number }} / {{ page_obj.paginator.num_pages }} </a></li>
        {% if page_obj.has_next %}
        <li>
            <a href="{%url 'kilogram:index'%}?page={{ page_obj.next_page_number }}">다음</a>
        </li>
        {% endif %}
    </ul>
</nav>
{% endif %}