[Django] 점프 투 장고 튜토리얼 - 3-8. 글쓴이 표시

Django 점프 투 장고 정리

작성일 : 2021-11-24

문서버전 : 1.0 

개요

이 문서는 점프 투 장고 사이트의 장고 튜토리얼 학습 내용을 정리한 내용입니다.

레퍼런스

점프 투 장고 https://wikidocs.net/72242

 

3.08 글쓴이 표시

Question 모델과 Answer 모델에 author 속성 추가완료 했다. 게시판 게시물에 ‘글쓴이’ 표시하는 것이 일반적이다. 질문 목록, 질문 상세 화면에 author 속성을 이용해 글쓴이를 표시해보자.

 

질문 목록

질문 목록 템플릿에 글쓴이 표시하자. 이를 위해 우선 테이블 헤더에 글쓴이 항목을 추가해야 한다.

> ../templates/pybo/question_list.html

 

(... 생략 ...)
<tr class="text-center thead-dark">
    <th>번호</th>
    <th style="width:50%">제목</th>
    <th>글쓴이</th>
    <th>작성일시</th>
</tr>
(... 생략 ...)

 

글쓴이 관련 table header를 추가했다. Th 엘리먼트들을 중간 정렬하기 위해 tr 엘리먼트에 text-center 클래스를 추가했고, 제목의 너비가 전체에서 50% 차지하도록 style=”width:50%”를 지정해주었다. 

> ../templates/pybo/question_list.html

 

(... 생략 ...)
{% for question in question_list %}
<tr class="text-center">
    <td>
        <!-- 번호 = 전체건수 - 시작인덱스 - 현재인덱스 + 1 -->
        {{ question_list.paginator.count|sub:question_list.start_index|sub:forloop.counter0|add:1 }}
    </td>
    <td class="text-left">
        <a href="{% url 'pybo:detail' question.id %}">{{ question.subject }}</a>
        {% if question.answer_set.count > 0 %}
        <span class="text-danger small ml-2">{{ question.answer_set.count }}</span>
        {% endif %}
    </td>
    <td>{{ question.author.username }}</td>  <!-- 글쓴이 추가 -->
    <td>{{ question.create_date }}</td>
</tr>
{% endfor %}
(... 생략 ...)

 

Tr 엘리먼트에 text-center 클래스 추가하여 테이블 내용을 가운데 정렬시켰고, td 엘리먼트에 text-left 클래스를 적용하여 제목을 왼쪽에 정렬하도록 했다. 

<td>{{ question.author.username }}</td> 는 질문의 글쓴이를 표시하는 코드다.

 

실제로 잘 적용되었는지 확인해보자. 글쓴이 ‘admin’이 column으로 잘 추가된 것을 확인할 수 있다.

 

질문 상세

질문 상세 템플릿에도 글쓴이를 표시해주자.

> ../templates/pybo/question_detail.html

 

(... 생략 ...)
<div class="card-body">
    <div class="card-text" style="white-space: pre-line;">{{ question.content }}</div>
    <div class="d-flex justify-content-end">
        <div class="badge badge-light p-2 text-left">
            <div class="mb-2">{{ question.author.username }}</div>
            <div>{{ question.create_date }}</div>
        </div>
    </div>
</div>
(... 생략 ...)

이제 글쓴이와 작성일시가 함께 표시된다. 부트스트랩으로 여백과 정렬 디자인을 조금 수정했다.

 

답변 부분도 글쓴이를 표시해주자.

 

(... 생략 ...)
<div class="card-body">
    <div class="card-text" style="white-space: pre-line;">{{ answer.content }}</div>
    <div class="d-flex justify-content-end">
        <div class="badge badge-light p-2 text-left">
            <div class="mb-2">{{ answer.author.username }}</div>
            <div>{{ answer.create_date }}</div>
        </div>
    </div>
</div>
(... 생략 ...)

 

놀랍다. 답변마다 작성자와 작성 날짜가 표시되었다.