< django - 19 >

19. 글쓴이 표시와 질문 목록 + 질문 상세 + 글, 질문의 수정 및 삭제 + 글, 질문 수정 일시 표시 + 오류 표시 + 자바스크립트 블록

 

 

# 글쓴이 표시와 질문 목록

1. projects\mysite\templates\pybo\question_list.html 파일을 열고 테이블 헤더에 글쓴이 항목 추가

+ Line 10에 <th> 글쓴이 </th> 항목 추가

+ Line 7에  tr 엘리먼트에 text-center 클래스를 추가  -->  th 엘리먼트가 가운데에 위치하게 하기 위함

+ Line 9 에 제목 넓이가 전체의 50%가 되도록 지정

 

 

 

2. projects\mysite\templates\pybo\question_list.html 파일을 열어 for 문에도 글쓴이 적용

+ << Line 27 >>

: <td>{{ question.user.username }}</td> 을 넣어 질문의 글쓴이 표시

 

+ << Line 17 >>

: tr 엘리먼트에 text-center 클래스 추가  -->  테이블 내용이 가운데 정렬하도록

 

+ << Line 21 >>

: 제목이 왼쪽 정렬이 되게 text-start 클래스 추가

 

+ << Line 33 >>

: 테이블 항목 수가 3 -> 4 가 되어 colspan 또한 3 -> 4로 바꿈

 

 

 

3. http://localhost:8000/pybo/ 페이지 호출  -->  질문 목록 화면에 글쓴이 추가됨

 

 

 

 

# 질문 상세와 글쓴이

1. projects\mysite\templates\pybo\question_detail.html 파일을 열어 질문 상세 템플릿에 글쓴이 추가

+ 글쓴이와 작성 일시가 함께 보이도록 수정함

 

 

 

2. http://localhost:8000/pybo/ 페이지 호출  --> 질문 상세 화면에 작성 일시와 글쓴이가 함께 표시된다.

 

 

 

 

# 수정 일시

- 질문 및 답변의 수정 시간을 확인할 수 있게 하기 위해 projects\mysite\pybo\models.py 파일을 열어 Question, Answer 모델에 수정 일시 속성인 modify_date 속성을 추가

Line 10, 21추가

 

+ << Line 10, 21 >>

-->  수정을 진행한 경우에만 수정일시 데이터가 생성되므로 아래와 같이 지정하고, 어떤 조건이로든 간에 값을 비워둘 수 있도록 함

: null=True  -->  데이터베이스에서 modify_date 칼럼에 null 허용

: blank=True  -->  form.is_valid()를 통한 입력 데이터 검증 시 값이 없어도 된다는 의미

 

 

+ 주의!

이번에도 모델이 변경되었으므로 명령 프롬포트에서 makemigrations, migrate 명령을 수행해야 함

 

 

 

 

# 질문 수정

1.  projects\mysite\templates\pybo\question_detail.html 파일을 열어 질문 수정 버튼 추가

Line 14 ~ 19 추가

+ << Line 15 >>

: {% if request.user == question.author %}  -->  현재 로그인한 사용자와 글쓴이가 동일한 사람일 경우에만 수정 버튼이 보이게 설정

 

 

 

2. 위 사진의 Line 16에서 {% url 'pybo:question_modify' question.id %} URL이 추가되었으니 projects\mysite\pybo\urls.py 파일을 열어 아래와 같이 URL 매핑 규칙 추가

Line 12 추가

 

 

 

3. projects\mysite\pybo\views.py 파일을 열어 views.question_modify 함수를 아래처럼 작성

Line 8 추가

사진 속 모든 내용 추가

+ Line 59의 queston_modify 함수

: 로그인 상태인 사용자(request.user)와 질문 작성자(question.author)가 다른 경우  -->  "수정권한이 없습니다." 오류 출력

 

+ Line 60의 messages 모듈

: 넌필드 오류(non-field error)를 발생시킬 경우 사용하는 모듈로, 위 코드에서는 "수정권한이 없습니다." 오류를 발생시키기 위해 사용

 

+ Line 70 GET 요청의 경우

: 질문 수정 화면에 조회된 질문의 제목, 내용을 반영하기 위한 폼. instance 값을 question으로 지정하였기에 폼의 속성 값이 instance값으로 채워짐

 

+ Line 63 POST 요청의 경우

: 수정된 내용을 반영해야 하는 경우를 고려하여 생성한 폼. instance를 기준으로 QuestionForm을 생성하지만 request.POST의 값으로 덮어쓰라는 의미로, 질문 수정화면에서 제목, 내용을 변경하여 POST 요청을 하게 되면 변경된 내용이 QuestionForm에 저장된다.

 

+ Line 66 의 질문 수정일시 저장

: "질문 수정일시 = 현재 일시" 로 설정

 

 

 

4. messages 모듈에 의한 오류 메세지를 표시하기 위해 projects\mysite\templates\pybo\question_detail.html 파일을 열어 질문 상세 화면 위쪽 부분에 오류 영역 추가

Line 4 ~ 12 추가

 

 

 

5. http://localhost:8000/pybo/ 페이지를 호출  -->  수정 버튼이 잘 생성됨을 확인 가능

 

 

 

 

# 질문 삭제

1. projects\mysite\templates\pybo\question_detail.html 파일을 열어 질문 삭제 버튼 추가

Line 26, 27 추가

+ << Line 26 >>

: <삭제> 버튼은 <수정> 버튼과 달리 href 속성값을 javascript:void(0)로 설정

 

+ << Line 27 >>

: data-uri 속성 추가  -->  삭제를 실행할 URL 을 얻기 위함

: <삭제> 버튼이 눌리는 이벤트를 확인할 수 있게 class 속성에 "delete" 항목 추가

 

 

 

2. projects\mysite\templates\base.html 파일을 열어 자바스크립트를 </body> 태그 위에 삽입

Line 23 ~ 26 추가

+ base.html 을 상속하는 템플릿들에서 content 블록을 구현하게 했던 것처럼 script 블록을 구현할 수 있게 설정

--> 이제  base.html을 상속하는 템플릿은 자바스크립트의 삽입 위치를 신경쓸 필요X, 스크립트 블록을 사용하여 곧바로 자바스크립트 작성이 가능함

 

 

 

3. projects\mysite\templates\pybo\question_detail.html 파일을 열고 question_detail.html 하단에 {% block script %}{% endblock %} 블록 추가

Line 70 ~ 81 추가

+ {% block script %}과 {% endblock %} 사이에 질문을 삭제할 수 있는 자바스크립트 작성

 

 

 

4. projects\mysite\pybo\urls.py 파일을 열어 아래처럼 URL 매핑 규칙 추가  -->  위에서 data-uri에 {% url 'pybo:question_delete' question.id %} URL이 추가되었기 때문

Line 13 추가

 

 

 

5. projects\mysite\pybo\views.py 파일을 열고 위에서 정의했던 views.question_delete 함수를 작성

사진 내용 모두 추가

+ << Line 74 >>

: question_delete 함수는 로그인을 필요로 하므로 @login_required 애너테이션 적용  -->  "로그인 상태인 사용자 = 글쓴이"인 경우에만 삭제가 가능하도록 함

 

 

 

6. http://localhost:8000/pybo/ 페이지를 호출 --> 삭제 버튼이 보이는 것을 확인

 

 

 

 

# 답변 수정

1. projects\mysite\templates\pybo\question_detail.html 파일을 열고 답변 목록이 출력되는 부분에 답변 수정 버튼을 추가

사진 속 부분 추가

 

 

 

2. 위 사진의 Line 45 에 {% url 'pybo:answer_modify' answer.id %}가 추가되었으니 projects\mysite\pybo\urls.py 파일을 열어 URL 매핑 규칙 추가

Line 14 추가

 

 

 

3. projects\mysite\pybo\views.py 파일을 열고 위에서 정의한 views.answer_modify 함수를 아래와 같이 작성

Line 3에 Answer 추가

사진 내용 모두 추가

 

 

 

4. 답변 내용을 확인하고 수정할 수 있게 하는 템플릿 answer_form.html 파일을 새로 작성한다.

파일명은&nbsp;projects\mysite\templates\pybo\answer_form.html

 

 

 

5. http://localhost:8000/pybo/ 페이지를 호출 --> 답변 수정 버튼이 생긴 것을 확인 가능

 

 

 

 

# 답변 삭제

1. projects\mysite\templates\pybo\question_detail.html 파일을 열고 질문 상세 화면에서 답변을 삭제할 수 있는 버튼을 추가

Line 47, 48 추가

+ << Line 47 >>

: <삭제> 버튼에 delete 클래스를 적용  -->  <삭제> 버튼 클릭 시 data-uri 속성에 설정한 url 실행

 

 

 

2. 위 사진의 Line 48에서 {% url 'pybo:answer_delete' answer.id %}이 추가되었으니 projects\mysite\pybo\urls.py 파일을 열어 URL 매핑 규칙 추가

Line 15 추가

 

 

 

3. projects\mysite\pybo\views.py 파일을 열어 위에서 정의한 views.answer_delete 함수를 아래와 같이 작성

사진 전문 추가

 

 

 

4. http://localhost:8000/pybo/ 페이지를 호출 --> 답변 작성자와 로그인 상태인 사용자가 동일하다면 <삭제> 버튼이 나타남을 확인 가능

'로그인한 사용자 = 답변 작성자' 인 경우

 

'로그인한 사용자 != 답변 작성자' 인 경우

 

 

 

 

# 수정일시 표시

1. projects\mysite\templates\pybo\question_detail.html 파일을 열어 질문 상세 화면에서도 수정 일시를 확인할 수 있게 설정

Line 17 ~ 22 추가

 

Line 44 ~ 49 추가

 

 

 

2.  http://localhost:8000/pybo/ 페이지를 호출 --> 수정된 시간이 표시되는 것을 확인 가능