장고(Django) 템플릿에서 상세(detail) 페이지 만들기

 

만들 상세 페이지의 예시

 

 

 

프로그래머스 질문 페이지와 같이 제목들을 클릭하면

 

 

 

 

 

첫번째, 상세 내용이 나오도록

두번째, ID 번호를 URL에 입력시 그 ID에 해당하는 question의 상세 내용을 볼 수 있도록 하고자 합니다.

 

 

 

 

 

 

 

URL에 입력되는 ID번호에 따라 다른 페이지 보여주기

 

URL에 관한 업무이니 먼저 polls/urls.py를 손봅니다.

 

 

'polls/' 뒤에 숫자(ID)가 들어온다면 뷰(views)의 디테일(detail) 메서드에서 처리한다는 path를 urlpatterns에 추가합니다.

그런데 여기서 <int:question_id>를 잘 기억해주세요.

 

 

 

 

 

 

뷰의 detail 메서드에서는 urls.py에서 넘겨준 question_id를 인자(파라미터)로 받아 HttpResponse로 출력하도록 합니다.

 

 

 

 

 

이제 브라우저에서 실행결과를 살펴보면

 

polls/ 뒤에 1001이라는 숫자를 붙이자 브라우저에 1001이 표시됩니다.

2000을 ID로 URL에 넣어주면 2000이 표시됩니다.

어떤 숫자를 넣든 urls.py에서 <int:question_id> 라고 정의했듯이 숫자이기만 브라우저에서 출력해줍니다.

 

우리는 URL에 입력되는 값에 따라 브라우저에서 다른 화면을 표현하는 방법의 기본을 익힌 것입니다.

 

 

 

 

 

ID에 해당되는 실제 Question을 페이지에 보여주기

 

 

polls/views.py

 

 

1. URL에서 ~polls/숫자(question_id) 형식으로 인자 question_id를 전달 받습니다.

2. question_id를 이용해 기본키(pk)가 question_id인 Question 객체를 question 변수에 담습니다.

3. detail.html 이라는 템플릿에 question 키에 값을 question으로 하는 context를 전달합니다.

 

 

당연히 detail.html이라는 템플릿을 새로 만들어줘야 합니다.

 

 

빨간색 박스로 표시된 경로에 detail.html 템플릿을 새로 만들고

question이라는 이름으로 전달 받은 context를 이용해 h1 태그로 표현되도록 코드를 작성했습니다.

 

 

 

 

 

브라우저에서 새로고침을 하면

 

 

에러가 뜹니다. 왜냐하면 1001을 기본키로 갖는 Question객체가 아직 없기 때문입니다.

 

1001대신 1을 넣어주면

 

 

 

정상적으로 h1 태그에 감싸져 의도한대로 출력되었습니다.

 

 

 

 

 

 

 

 

 

Question뿐만 아니라 Question에 연관된 Choice 데이터들까지 출력하기

 

choice는 여러개이므로 반복문을 사용해야할 것입니다.

 

detail.html

 

 

question.choice_set.all을 이용해 ID에 해당하는 question에 대한 choice들까지 불러왔습니다.

 

한가지 주의할 점은 템플릿에서는 all()과 같이 괄호를 여닫지 않고 all만 쓴다는 것입니다.

우리가 템플릿 제어문 시간에서 배웠듯이 인덱싱할때는 [0]이 아닌 .0이었던 것과 같죠?

 

 

 

 

브라우저에서도 의도한대로 잘 출력되었습니다.