django photo list by FBV

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.photoList, name="photo-list")]

FBV(Function Based View)

rooms/views.py

# rooms/views.py

from django.shortcuts import render, redirect, reverse
from django.contrib import messages
from django.contrib.auth.decorators import login_required
from django.core.paginator import Paginator
from django.http import Http404

from . import models as room_models
from users.exception import HostOnly

@login_required
def photoList(request, pk):
    try:
        if not request.session.get("is_hosting"):
            raise HostOnly("Change host mode")

        page = request.GET.get("page", 1)

        if page == "":
            page = 1
        else:
            page = int(page)

        page_sector = ((page - 1) // 5) * 5

        room = room_models.Room.objects.get(pk=pk)
        if room is None:
            messages.error(request, "Room does not exsit")
            return redirect(reverse("rooms:room-detail", kwargs={"pk": room.pk}))

        qs = room.photos.all()
        paginator = Paginator(qs, 10, orphans=5)
        photos = paginator.get_page(page)

        if request.user.pk != room.host.pk:
            raise Http404("Page Not Found")

        return render(
            request,
            "pages/rooms/photos/photo_list.html",
            context={
                "photos": photos,
                "page_sector": page_sector,
                "room": room,
            },
        )
    except HostOnly as error:
        messages.error(request, error)
        return redirect(reverse("core:home"))

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/61e476f9d5f77e08cd1736b0944d71bf09e54faf