Todo 앱 상세보기 만들기

오늘은 detailiew를 이용해서 Todo앱의 상세보기를 만들것이다.

상세보기에서는 카드보기,목록보기와는 다르게 사진이나 첨부파일이 표시되어야 한다.

작업 순서는 view -> url -> temlate 순이다.

views.py

class TodoDetailView(DetailView):
    model = TodoList
    context_object_name = 'todo'
    template_name = 'todo/todo_detail.html'

간단하게 detailview를 이용해서 모델, context, 사용할 템플릿을 지정해준다.
특정 글의 pk를 받아와야하는데, 장고 제네릭뷰에서는 pk=id로 인식한다고 한다.

#urls.py

path('detail/<int:pk>/', TodoDetailView.as_view(), name='detail'),

를 지정하면, detail/pk/ 로 접속했을때, 해당 pk를 가진 객체를 표시하게 된다.

#todo_detail.html

<div class="card text-center" style="width: 105rem;">
    <div class="card-header">
      <p class='text-primary'> 제목 : {{ todo.name }}</p>
    </div>
    <ul class="list-group list-group-flush">
      <li class="list-group-item">내용 : {{todo.description }}</li>
      <li class="list-group-item">마감일 : {{todo.date_deadline}}</li>
      <li class="list-group-item"><p class="text-danger">마감 {{ todo.remaining_days}}</p></li>
    </ul>
       {% if todo.image %}
       <hr>
       [이미지] 
       <a href="{{ todo.image.url }}">
       <img src="{{ todo.image.url }}" style="max-width: 50%; height: auto;"  alt="reference_image"></a>
       클릭하시면 원본크기로 볼수 있습니다.
       </hr>
       {% endif %}
      
       {% if todo.file %}
       <hr>
       [첨부파일]
       <a href="{{ todo.file.url }}">{{todo.file.name}}</a>
       클릭해서 다운로드
      </hr>
       {% endif %}
  </div>
  <a class="btn btn-secondary" href="{% url 'todo:list' %}" role="button">목록으로 보기</a>
  <a class="btn btn-danger" href="{% url 'todo:delete' object.id %}" role="button">삭제</a>

{% if todo.image %}, {% if todo.file %}
을 이용해서, 이미지나 첨부파일이 있을때만 상세보기에서 표시되게 만들어주자.
{{ todo.image.url }} 은 해당 글에있는 이미지나 파일의 상대url을 가져와서 표시해준다.
file에서도 동일하게 적용되는 편리한 기능이니까 사용해주자.

역시나 허접하지만 잘 표시된다.