42일차 - 장고 프로젝트(6)

폼으로 댓글 기능 구현하기

먼저 댓글 기능을 추가하기 위해 Comment 모델을 만든다.

 

Comment  모델에는 어떤 포스트에 대한 댓글인지를 저장하기 위해 post 필드가 필요하다.

그리고 작성자를 저장할 author 필드와 댓글 내용을 담을 content 필드가 있어야한다.

마지막으로 작성일지와 수정일시를 담은  create_at 필드와 modified_at 필드를 만든다.

 

blog/models.py를 다음과 같이 수정한다.

여러 댓글이 한 포스트의 댓글이 되기 때문에 post필드에는 ForeignKey를 사용한다.

create_at 필드에는 처음 생성될 때 시간을 저장하도록 auto_now_add=True로 설정한다.

modified_at에는 저장될 때 시간을 저장하도록 auto_now=True로 설정한다.

 

 

models.py를 수정했으니 마이그레이션을 한번 진행한다.

 

 

댓글 작성 페이지를 확인하기 위해서 blog/admin.py를 다음과 같이 수정하고 관리자 페이지에 들어가 확인해보면 [BLOG] 메뉴에 [Comments]가 추가되어 있다.

 

 

관리자 페이지에서 댓글을 추가한다고 해서 포스트에 댓글이 출력되는 것은 아니다.

포스트 상세 페이지에 댓글 기능을 반영해야 비로소 댓글이 출력된다.

 

 

 

 

포스트 상세 페이지에 댓글 기능 반영하기

 

 

현재 댓글과 관련이 있는 부분은 post_detail.html에서 <div class="comment-area">안에 구현 되어 있다.

class가 같은 요소는 한 HTML문서에 여러 개 존재할 수 있기 때문에 id="comment-area"를 추가한다.

또한 댓글은 각각 <div>태그로 구분되어 있지만 id는 부여되지 않았다.

이 댓글은 comment-뒤에 해당 댓글의 pk값을 붙이는 방식으로 id를 부여한다.

 

 

먼저 tests.py를 다음과 같이 수정한다. setUp함수에 테스트용 댓글을 만들고, 포스트상세페이지에 이 댓글이 존재하는지 확인한다.

 

 

아직 포스트 상세 페이지를 수정하지 않았기 때문에 테스트 결과는 당연히 Fail이다.

 

post_detail.html을 다음과 같이 수정한다.

 

 

 

이제 기존에 있던 댓글 대신 내가 포스트에 작성한 댓글만이 표시된다.

 

 

댓글 작성 폼 구현하기

 

 

 

 

테스트 결과는 Fail.  'Log in and leave a comment'라는 문구를 찾을 수 없다고 한다.

 

 

post_detail.html에 로그인 상태에 따라 댓글 입력란 또는 로그인 버튼을 나타나게 만들어야 한다.

 

 

테스트 결과는 Fail.   id="id_content"인 textarea가 없다고 한다.

 

 

 

실제로 작동하는 폼을 만들어야 하기 때문에 blog앱 폴더에 forms.py 파일을 만들고 다음과 같이 작성한다.

이때 사용할 필드를 fields = ('content',)이 아니라 exclude를 쓸 수 있다.

여러 개의 필드 중에 몇 개만 빼고 싶을 때 사용한다.

 

 

 

 

이렇게 만든 폼을 views.py의 PostDetail 클래스에 넘겨줘야 한다.

방금 만든 폼을 import하고, get_context_data 함수에 추가한다.

 

 

이제 이 폼을 사용하도록 post_detail.html을 수정한다. 깔끔하게 보이기 위해 crispy도 적용한다.

 

 

 

 

 

 

 

 

 

 

 

 

 

이제 테스트는 OK이다.

 

하지만 <Submit>버튼을 누르면 CSRF가 없다는 이유로 403에러가 발생한다.

 

post_detail.html에 {% csrf_token %}을 추가한다.

 

 

다시 확인해보면 성공적으로 댓글이 추가된다.

 

 

 

댓글 수정 기능 구현하기

 

tests.py를 다음과 같이 수정한다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

테스트 결과는 Fail. Update: 라는 문구가 없다고 뜬다.

 

 

post_detail.html을 다음과 같이 수정한다.

 

테스트 결과는 OK.

웹 브라우저를 열고 확인해보니 업데이트시간까지 잘 표시된다.

 

 

댓글 삭제 기능 구현하기

 

 

 

 

 

urls.py를 다음과 같이 수정한다.

 

 

views.py를 열고 delete_comment() 함수를 다음과 같이 FBV스타일로 만든다.

 

테스트 결과는 OK. 웹 브라우저에서 확인해보고 커밋을 한다.

 

 

 

포스트를 여러 페이지에 나누어 보여주기

이번에는 장고에서 기본적으로 제공하는 pagination을 사용하여 구현한다.

포스트 목록 페이지를 보면 이미 부트스트랩의 pagination을 이용하기 위한 버튼이 만들어져 있다.

 

 

먼저 관리자 페이지에서 포스트가 11개가 될 때 까지 추가한다.

그리고 views.py에서 다음과 같이 한 줄만 추가하면 된다.

 

 

현재 pagination은 이렇게 구성되어 있는데, 최근포스트5개를 볼 때는 <Newer>버튼이 비활성화 되어있고 

다음 목록으로 넘어가면 모두 활성화가 되고, 마지막 페이지에서는 <Older>버튼이 비활성화 되어야 한다.

 

post_list.html을 다음과 같이 수정한다.

 

 

 

웹 브라우저를 확인해 보면 이러한 모양이 되었고, 성공적으로 페이지에 따라 활성화 비활성화가 된다.

 

 

 

검색 기능 구현하기

지금까지 장고로 만든 웹 사이트는 대부분 방문자가 버튼을 눌렀을 때 웹 사이트의 특정 URL로 접근하여 서버에 요청하고 응답받는 방식이였다.

 

검색 창에서 사용자가 키보드로 입력하는 것을 기다렸다가 버튼을 눌렀을 때 동작하게 하려면 자바스크립트를 이용해야 한다.

 

base.html을 다음과 같이 수정한다.

 

검색어 길이 검사 기능은 정상적으로 작동한다.

 

한 글자 이상 검색 하면 404오류가 발생하는데, blog앱의 urls.py와 views.py를 수정하면 해결할 수 있다.

 

 

먼저 테스트 코드를 작성한다.

 

 

urls.py는 다음과 같이 수정한다.

 

 

 

 

views.py는 다음과 같이 수정한다.

 

 

 

 

마지막으로 post_list.html 템플릿 파일에 { search_info }를 추가한다.

 

 

 

 

 

 

사용자에게 아바타 보여주기

구글로 로그인한 사람들은 구글의 아바타가 나오도록 설정한다.

 

다음과 같이 models.py의 Comment 클래스를 수정한다.

 

 

 

그리고 post_detail.html의 comment <img>태그를 수정한다.

 

 

 

이메일로 가입한 회원 아바타 설정하기

먼저 웹 브라우저 주소 창에 https://doitdjango.com/avatar/ 를 입력한다.

접속한다면 구글또는 Username으로 로그인한다.

<Learn more> 버튼을 클릭하고 <Create a project> 버튼을 클릭한다.

 

 

Website에는 앞으로 사용할 도메인을 입력하고 프로젝트를 생성한다.

 

URL에 해당하는 부분에서 guest@email.com부분의 텍스트를 바꾸면 그에 해당하는 랜덤 아바가 생성된다.

이 부분을 Comment 모델의 get_avatar_url() 함수에 응용한다.

 

 

로그인 했을 때 내비게이션 바에도 아바타가 보이도록 설정한다.

 

 

 

 

 

대문 페이지와 자기소개 페이지 완성하기

이제 웹 사이트를 처음 방문했을 때 보이는 대문 페이지를 완성한다.

먼저 부트스트랩과 자바스크립트를 사용해 landing.html을 꾸민다.

 

 

single_pages폴더에 static폴더를 만들고 single_pages폴더를 만들고 css폴더와 images폴더를 만든다.

images폴더에 배경으로 사용할 이미지를 넣고,

css폴더에 landing.css를 생성하고 모양을 다듬는다.

 

 

 

css파일을 사용하기 위해 landing.html에 링크한다.

 

 

 

이제 대문 페이지의 오른쪽에 최근 포스트를 나타낸다.

landing.html을 다음과 같이 수정한다.

 

대문 페이지 오른쪽에 이러한 카드가 추가되었다.

 

위의 카드에 포스트가 나타나도록 몇가지 파일을 수정한다.

 

먼저 single_pages앱의 views.py를 다음과 같이 수정한다.

최근 포스트3개를 보여주기 위해서 pk값의 역순으로 불러온 다음 3개만 선택해서 템플릿으로 넘긴다.

 

템플릿에서는 for문으로 포스트 3개를 출력하면 된다.

 

이렇게 최신 포스트3개와 작성자, 작성시간이 나타나는 카드가 완성된다.

 

여기에 작성자의 아바타를 추가하고 배경색을 흐리게 만든다.

blog앱의 models.py의 Post모델에 get_avatar_url()함수를 추가한다.

 

 

이제 landing.html에 아바타가 나타날 수 있도록 <img>태그를 활용하여 수정한다.

 

 

이제 이 카드들의 배경색을 반 투명하게 만들기 위해 css파일도 수정한다.

 

 

성공적으로 수정되었다.

 

 

 

자기소개 페이지 완성하기

먼저 대문 페이지를 완성할 때 처럼 자기소개 페이지도 레이아웃을 구성한다.

 

 

landing.css처럼 about_me.css파일을 생성하고 다음과 같이 작성한다.

class가 margin-for-footer인 요소는 아래 마진을 130px갖는다.

 

 

웹 브라우저의 높이가 낮으면 푸터가 내용을 가리게 된다. 이를 막기위해 푸터가 내용을 가리지 못하게 아래마진 130px을 준것이다.

 

 

 

이제 자기소개 섹션에 내용을 추가한다.

 

 

브라우저에서 열어보면 저장한 내용이 잘 정리되어 나타난다.

 

 

두 번째 섹션에는 부트스트랩의 카드 3개를 가로로 배치한다.

이미지폴더에 보여줄 이미지파일 3개를 추가하고 about_me의 두번째 섹션을 꾸민다.