서평 작성 (3) - 서평 상세보기

지금까지 서평 목록들을 리스트로 전체 조회하는 페이지와 글쓰기 페이지를 구현했다.

이번에는 서평 목록에서 하나를 선택했을 때 해당하는 서평의 상세 페이지를 구현하려고 한다.

 

 

 

(1) list 파일 보기

파일 > templates/review/list.html

<li><a href="/review/detail/{{ review.reviewId }}/">
    <div>
        ... <!--서평 목록 조회-->
    </div>
</a></li>

DB에서 서평 목록을 받아와서 페이지에 띄우는 list.html 코드 중 일부이다.

각각의 서평을 <a> 태그로 감싸 해당 내용을 선택하면 서평의 상세 페이지로 이동하도록 구현하려고 한다.

해당 상세페이지의 url 은 "http://기본주소/review/detail/서평Id" 로 설정했다.

 

 

 

(2) urls.py 파일 수정

파일 > review/urls.py

urlpatterns = [
    ...
    path('detail/<int:reviewId>/', views.detail, name='detail'),
    ...
]

url 파일에 상세페이지 url 을 추가해주었다. detail/ 다음 부분이 서평Id 이므로 <int:reviewId> 라고 표기했다.

(* reviewId 의 자료형은 int형이다. 이전 글-모델 생성 부분- 참고)

 

 

 

(3) views.py 파일 수정 - 함수 작성

파일 > review/views.py

def detail(request, reviewId):
    # 선택한 리뷰 출력
    review = Review.objects.get(reviewId=reviewId)
    user = User.objects.get(userId=review.userId)
    context = {'review': review, 'user': user}
    return render(request, 'review/detail.html', context)

urls.py 에서 reviewId 를 변수로 받았기 때문에 기존과 다르게 views.py 의 함수에 reviewId 매개변수가 추가되었다.

함수로 받은 reviewId 를 통해 서평 테이블에서 해당 서평을 가져와 새로운 변수에 넣고,

서평 DB에서 유저 DB의 userId를 외래키(FK)로 사용하므로 유저 DB에서도 해당 유저의 정보를 가져온다.

그런 다음 context 에 서평과 (서평을 작성한) 유저 데이터를 넣고 서평 상세페이지를 구현할 html 파일에 넘겨준다.

 

 

 

(4) detail.html 작성

파일 > templates/review/detail.html

{% if review %}
    <h4>책 ISBN: {{ review.bookId }}</h4>
    <h4>작성자: {{ user.userName }}</h4>
    <h4>서평Id: {{ review.reviewId }}</h4>
    <div>
        {{ review.reviewTxt }}
    </div>
{% else %}
    <p>서평이 없습니다.</p>
{% endif %}

넘겨받은 데이터를 통해 html 에서 서평 내용을 띄운다.

혹시 넘겨받은 데이터(서평)가 없을 경우를 대비해 조건문을 추가하고,

데이터가 있다면 해당 내용들을 페이지에 띄우도록 한다.

 

 

 

(5) 결과화면

서평 상세페이지

위의 과정을 거치면 다음의 결과 페이지를 얻을 수 있다.

 

 

 

지금까지 서평 목록 조회, 글쓰기 후 서평 DB에 데이터 추가하기, 서평 상세보기 의 기능들을 구현해보았다.

세 기능이 모두 공통적으로 urls.py, views.py, (이름).html 의 파일을 수정하고 생성하면서 구현되는 것을 알 수 있었다.

장고의 장점이 간편하게 페이지를 구현하도록 하는 것이라고 했는데 정말로 간단하게 여러 기능을 구현할 수 있었다.

다만 우리 프로젝트는 프론트엔드와 백엔드가 나눠져있고, 프론트는 리액트(React)로 구현하기 때문에

다음 단계로는 장고로 구현한 이 기능들과 리액트를 연결할 예정이다.

 

장고를 이번 프로젝트로 처음 접했는데 좋은 자료들이 많아서 참고하면서 잘 사용해본 것 같다.

앞으로 계속 프로젝트를 진행하면서 더 다양하게 접해볼 수 있으면 좋겠다.