[Django] 3 - 8. 글쓴이 표시

이전포스트

 

[Django] 1. 개발 환경 설정 https://wroni.tistory.com/4

[Django] 2 - 1. URL과 View https://wroni.tistory.com/5

[Django] 2 - 2. 모델 https://wroni.tistory.com/6

[Django] 2 - 3. 장고 관리자 https://wroni.tistory.com/7

[Django] 2 - 4. 조회와 템플릿 https://wroni.tistory.com/8

[Django] 2 - 5. URL과 네임스페이스, 2 - 6. 데이터 저장 https://wroni.tistory.com/9

[Django] 2 - 7. 스태틱 https://wroni.tistory.com/10

[Django] 2 - 8. 부트스트랩 https://wroni.tistory.com/11

[Django] 2 - 9. 템플릿 상속 https://wroni.tistory.com/12

[Django] 2 - 10. 폼 https://wroni.tistory.com/13

[Django] 3 - 1. 네비게이션바 https://wroni.tistory.com/14

[Django] 3 - 2. 페이징 https://wroni.tistory.com/15

[Django] 3 - 3. 템플릿 필터, 3 - 4. 답변 개수 표시 https://wroni.tistory.com/16

[Django] 3 - 5. 로그인과 로그아웃 https://wroni.tistory.com/18

[Django] 3 - 6. 계정생성 https://wroni.tistory.com/19

[Django] 3 - 7. 모델 변경 https://wroni.tistory.com/20

---

3 - 8. 글쓴이 표시

 

Question 모델과 Answer 모델에 author 속성을 추가하였다. 게시판의 게시물에는 '글쓴이'를 표시하는 것이 일반적이다.

질문 목록, 질문 상세 화면에 author 속성을 이용하여 글쓴이를 표시할 것이다.

 

 

1. 질문 목록

 

질문 목록 템플릿에 글쓴이를 표시하도록 할 것이다. 테이블 헤더에 글쓴이 항목을 추가하자.

 

파일 : C:\projects\mysite\templates\pybo\question_list.html

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

 

<th>글쓴이</th> 항목을 추가하였다. 그리고 th 엘리먼트 가운데 정렬하도록 tr 엘리먼트에 text-center 클래스를 추가하고, 제목의 너비가 전체에서 50%를 차지하도록 style="width:50%"도 지정해주었다.

 

이제 for 문에도 글쓴이를 적용해보자.

 

파일 : C:\projects\mysite\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 %}
...생략...

 

<td>{{ question.user.username }}</td>를 삽입해서 질문의 글쓴이를 표시하였다. 그리고 테이블 내용을 가운데 정렬하도록 tr 엘리먼트에 text-center 클래스를 추가하고, 제목을 왼쪽 정렬하도록 text-left 클래스를 추가하였다.

 

질문 목록 화면에 글쓴이가 추가되면, 다음과 같이 뜬다.

 

 

 

2. 질문 상세

 

질문 상세 템플릿에도 이전과 같이 글쓴이를 추가할 것이다.

 

파일 : C:projects\mysite\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>
...생략...

 

글쓴이와 작성일시가 함께 보이도록 수정했다. 그리고 여백과 정렬 등의 디자인도 살짝 변경하였다.

 

이제 답변 부분도 글쓴이를 다음처럼 추가하자.

 

파일 : C:\projects\mysite\templates\pybo\question_detail.html

...생략...
<div class="card-body">
    <div class="card-text" style="white-space: pre-line;">{{ answer.content }}</div>
    <div class="d-flex justify-content-end">
        {% if answer.modify_date %}
        <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>
...생략...

 

앞과 같이 글쓴이와 작성일시가 함께 보이도록 수정하였다.

 

최종적으로 변경된 질문 상세 화면은 이와 같다.

 

 

---

※ 본 내용은 django 공부 기록이며, 점프 투 장고를 참고하였습니다.

https://wikidocs.net/book/4223

점프 투 장고