django photo list by CBV

url 설정

config/urls.py

urlpatterns = [
    path("rooms/", include("rooms.urls", namespace="room"))
]

rooms/urls.py

from django.urls import path
from . import views

app_name = "rooms"

urlpatterns = [path("<int:pk>/photos/", views.PhotoListView.as_view(), name="photo-list")]

 

CBV(Class Based View)

rooms/views.py

  CBV는 django에서 정의한 여러가지 View들을 이용한다. 그 중 DetailView를 이용해서 photo list page를 작성한다. Photo list인데 왜 ListView가 아닌 DetailView를 했냐면, 특정 방의 photos이기 때문이다. photos는 get_context_data method를 이용해서 전달했다.

# rooms/views.py

from django.views.generic import DetailView
from users import mixins
from . import models as room_models

class PhotoListView(mixins.LoggedInOnlyView, DetailView):

    """ Photo List View Definition """

    model = room_models.Room
    template_name = "pages/rooms/photos/photo_list.html"

    def get_context_data(self, **kwargs):
        context = super().get_context_data()

        page = int(self.request.GET.get("page", 1))
        page_sector = (page - 1) // 5
        page_sector = page_sector * 5
        context["page_sector"] = page_sector

        room = context["room"]
        qs = room.photos.all()
        paginator = Paginator(qs, 10, orphans=5)
        photos = paginator.get_page(page)
        context["photos"] = photos
        return context

templates

pages/rooms/photos/photo_list.html

{% extends 'base.html' %}

{% block page_title %}
  Photos Settings
{% endblock page_title %}

{% block content %}

<div class="flex flex-col items-center justify-items-center">
  <div class="w-10/12">
    <div class="flex justify-between mb-8 mx-4">
      <h1 class="font-bold text-4xl ">{{room.name}}</h1>
      <button class="button mt-0 w-1/6">
        <a href="#">Create Photo</a>
      </button>
    </div>
    <ul class="grid grid-cols-2 auto-rows-200px gap-4">
      {% for photo in photos %}
        <li class="flex justify-between items-center border border-gray-500 rounded-lg p-3">
          {% if photo.file %}
            <img src="{{photo.file.url}}" alt="Photo" class="w-5/12 h-44 rounded-lg">
          {% endif %}
          <div>
            <h2 class="text-bse font-bold w-56 mb-4 line-clamp-2">{{photo}}</h2>
            <button class="button mt-0 mb-4">
              <a href="#">Edit Photo</a>
            </button>
            <button class="button mt-0 bg-red-500">
              <a href="#">Delete Photo</a>
            </button>
          </div>
        </li>
      {% endfor %}
    </ul>
    <div class="flex justify-center mt-6 itmes-center">
      <button class="button bg-gray-700 w-1/6">
        <a href="{% url 'rooms:edit-room' room.pk %}">Back</a>
      </button>
    </div>
    <div class="flex justify-center mt-20 itmes-center">
      {% include 'mixins/page_number.html' with page=photos %}
    </div>
  </div>
</div>
{% endblock content %}

참고 자료

• 노마드 코더의 Airbnb 클론 강의

소스 코드

github.com/zpskek/airbnb-clone-v3/commit/1f587208273d02fb09265c522caea263005893c1