2020-04-03

Django 19. 게시글 상세보기 구현

FBV로 글보기를 구현하고, 템플릿에서 각 글 리스트에 ID를 매겨 이동할수 있도록 구현합니다.

1. views.py 작성

글 리스트에서 게시글을 선택할시 정해진 ID값으로 글 상세보기 창으로 이동되는 view를 작성하기 위해 notice앱의 views.py에 아래의 소스를 입력합니다.

1
2
3
4
5
6
7
8
9
10
11
12
# notice/views.py

from users.decorators import login_message_required
from django.shortcuts import get_object_or_404

@login_message_required
def notice_detail_view(request, pk):
    notice = get_object_or_404(Notice, pk=pk)
    context = {
        'notice': notice,
    }
    return render(request, 'notice/notice_detail.html', context)

로그인한 사용자만 접근을 허용하기 위해 decorator를 추가합니다. 그 후 템플릿에 설정한 게시글의 pk값인 id를 인자로 받아 단일 객체를 반환하는 get_object_or_404를 import하여 사용합니다. get_object_or_404는 해당 모델에서 지정된 값을 찾아 있으면 반환하고 없으면 404에러를 발생시킵니다. 그 후 반환된 context를 담아 게시글 상세보기 창으로 render합니다.

2. urls.py 작성

게시글 상세보기의 url경로를 선택한 글의 ID로 표시하기 위해 urls.py의 urlpatterns에 아래의 path를 추가합니다.

1
2
3
# notice/urls.py

path('<int:pk>/', views.notice_detail_view, name='notice_detail'),

3. templates 작성

templates의 notice폴더에 notice_detail.html을 생성하고 get_object_or_404으로 반환된 context를 전달받는 소스를 입력합니다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!-- templates/notice/notice_detail.html -->

<div class="card">
    <!--제목,분류,작성일-->
    <div class="card-header">
        <strong>{{ notice.title }}</strong><span>[공지사항]</span>
        <span>{{ notice.registered_date|date:'Y.m.d. H:i' }}</span>
    </div>
    <div class="card-body">
        <!--작성자, 조회수-->
        <div>
            <span>작성자 : {{ notice.writer }}</span>
            <span>조회수 : {{ notice.hits }}</span>
        </div>
        <!--내용-->
        <div>
            {{ notice.content }}
        </div>
    </div>
</div>

<div>
    <button onclick="location.href='/notice/'">목록으로</button>
</div>

이전에 구현해둔 글 리스트보기 템플릿인 notice_list.html에 각 게시글을 클릭할시 지정된 path 경로로 이동할 수 있도록 onclick속성에 각 게시글의 pk값인 id경로를 추가합니다.

1
2
3
4
5
6
7
8
9
<!-- templates/notice/notice_list.html -->

<tr class="text-center" style="cursor:pointer;" onclick="location.href='/notice/{{ notice.id }}/'">
    <td>{{ notice.id }}</td>
    <td>{{ notice.title|truncatechars:30 }}</td>
    <td>{{ notice.writer }}</td>
    <td>{{ notice.registered_date|date:'Y. m. d' }}</td>
    <td>{{ notice.hits }}</td>
</tr>

4. 결과

django-project-19

*전체 html, css 등은 자세하게 포스팅하지 않습니다. 제 Github에서 소스를 확인하실 수 있습니다.

Django Python