22. 태그 선택란 추가

● 태그 선택란 추가

  PostCreate 클래스의 fields 리스트에 'tags'를 추가하면 post create 페이지에 tags 와 관련된 공간이 생긴다. django 에서 지원하기 때문에 이렇게 tags란 단어만 입력해도 바로 생성할 수 있다. 

 

템플릿 파일에 input 추가

  post_form.html의 {{ form }} 밑에 tags 필드를 추가한다. <table>은 태그를 만들고 <th>는 표의 제목을 뜻하고 <tr>은 가로줄을 만든다. <td>는 셀을 만드는걸 뜻한다. <tr> 태그로 한 줄 추가 후 그 안에 label, input 요소를 넣는다. input 요소에는 문자를 입력 받도록 type="text" name="tags_str"  id="id_tags_str"로 속성을 추가한다.

 

  그 후 새로 추가한 Tags 입력칸만 쓰이도록 기존에 있던 Tags 입력칸을 views.py의 PostCreate 클래스에서 없애도록 한다. 

 

포스트 작성 페이지에 태그 입력란 추가

  태그를 텍스트로 작성해 추가 할 수 있는 기능을 추가하도록 한다. 

 

테스트 코드 작성

  tag_str에 담을 내용을 처리하기 위해 views.py 파일을 수정한다. 

 

views.py 파일 수정

 

# 1 :  장고가 자동으로 작성한 post_form.html의 form을 보면 method="post"로 설정되어 있다. 방금전에 form 안에 name='tags_str'인 input 을 추가하였다. 따라서 submit 버튼을 누루면 POST 방식으로 PostCreate 까지 전달된다. 

이 값을 self.request.POST.get('tags_str')로 받을 수 있다. 이 코드는  POST 방식으로 전달된 정보 중 name='tags_str'인 input의 값을 가져오라는 뜻이다. 

 

# 2 : tag_str이 존재하면 여러 개의 태그를 처리하고 쉼표(,) 와 세미콜론(;)을 구분자로 처리한다. 이러한 구분자들을 split한 후 리스트 형태로 tags_list에 담는다.

 

# 3 : tags_list 의 값은 문자열 형태이므로 Tag 모델의 인스턴스로 변환하는 과정이 필요하다 따라서 문자열 앞뒤의 공백을 strip()로 앞뒤의 공백을 제거한다. 

 

# 4 : 값을 name으로 갖는 태그가 있다면 가져오고 없으면 새로 만든다. get_or_create()는 두 가지 값을 동시에 return 하는 편리한 기능을 제공한다.  무엇을 return 하냐면 Tag 모델의 인스턴스와 이 인스턴스가 생성되었지를 나타내는 bool 형태의 값이다.

 

# 5 : 같은 name을 같는 태그가 없어서 새로 생성되었다면 slug값은 없는 상태이므로 새로 생성시키기 위하여 slugify함수를 사용한다. 한글 태그를 위하여 unicode=True로 설정해 준다. 이렇게 하면 name과 slug 필드가 채워진 상태로 저장된다.

 

# 6 : self.object는 새로 만든 포스트를 의미하고 뒤의 tags.add 는 포스트에 tags 필드에 추가하는 것이다.

 

# 7 : response 변수에 담아놓았던 CreateView의 form_valid() 결과값을 return한다. 

 

  이제 직접 포스트에 태그까지 입력하고 생성하면 되는데 뭔가 문제가 생겼다.. 

 

 

  어째서 이런 에러가... 

 

  blog_tag.slug 즉 태그와 slug와 관련해서 오류가 난 모양이다. 조만간 UNIQUE constraint 오류에 대해서 따로 다뤄야 겠다. 

 

  그런데 오류를 내뱉으면서도 막상 아래와 같이 blog 페이지에서는 잘만 보인다. 

 

  한참을 생각하고.. 한참을 찾아보고.. 한참을 탄식하다가.. 오타가 아닌 UNIQUE constraint에 집중했다.. 뭔가 중복된 pk값이 있기 때문에 출력되는 오류인데 무엇이 중복 되었을까? tag의 slug 값들을 보니 Django 와 django의 slug 값이 중복되었다.

 

  slug는 대문자를 소문자로 바꿔주는데 이때문에 중복이 발생하였고 UNIQUE constraint와 같은 무결성 오류가 발생한 것이다. 관리자 페이지에서 태그들을 다 지우고 다시 포스트 목록에서 포스트를 생성할때 태그를 붙여보기로 하였다.

 

  아무런 오류 없이 매끄럽게 아주 잘 실행되었다. 오류 트레이스를 잘 읽고 이에 대처하는 능력을 길러야 겠다. 

 

포스트 수정 페이지에 태그 입력란 추가

 

테스트 코드 작성

  테스트 코드의 목적은 main 영역에 id가 id_tags_str인 input이 있는지, 블로그 개발 과 python 태그가 있는지 확인한다. 

그 후 폼에 tags_str을 추가하고 python 태그는 없애고 블로그 개발, 파이썬, test tag로 수정한다. 

 

  수정된 포스트에 블로그 개발, 파이썬, test tag 태그가 있는지 확인하고 python 태그가 제거되어 있는지 확인한다.

 

  id가 tag_str인 input을 찾을 수 없다고 하니 관련 템플릿을 수정한다. 

 

템플릿 수정

  post_update_form.html 파일을 수정하며 tags_str을 담는다. 

  이번에는  tag_str input에 value속성이 없다고 하니 관련된 view 를 수정한다.

 

뷰 수정

  post_update_form.html과 views.py을 수정하여 수정 페이지에 자동으로 해당 태그가 입력되어 있도록 한다

post_update_form.html에서의 value="{{ tags_str default }}"는 views.py의 PostUpdate에서 값을 넘겨받아 자동으로 태그를 띄운다.

 

  CBV로 뷰를 만들시 템플릿으로 인자를 넘기기 위해서는 get_context_data()를 이용한다. self.object로 가져온 post 레코드에 tags가 있다면 name을 리스트 형태로 담고 세미콜론 ; 으로 값들을 결합 후 하나의 문자열로 만들고 context['tags_str_default']에 담아 return 하면 해당 템플릿에 값들을 채우게 된다. 

  PostCreate에 사용했던 form_valid()를 이용해 tags_str로 들어온 값을 이용하여 처리한 것을 PostUpdate에서도 이용하여 해당 오류를 처리하도록 한다. 

 

웹 브라우저 확인

  기존에 작성된 포스트의 수정 페이지를 보면 자동으로 해당 태그가 입력되어 있는것을 확인 할 수 있으나 포스트 작성 때와는 달리 포스트 수정 페이지에 Tags: 가 2개나 있어 보기에 불편하다 views.py의 PostUpdate클래스의 fields에 tags를 삭제한다.