[ Django ] SNS 서비스에 태그 기능을 추가해보자! | django taggit 설치/사용법 (2)

이전 포스팅에 이어서,

데이터베이스에 저장된 내용을 화면에 적용시켜 보도록 하겠다!

 

 

지금 내 화면은 아래와 같다.

 

 

 

이제 글을 작성할 때 태그를 작성할 수 있도록 html 파일과 view 파일을 변경시켜보자.

 

 

 

우선 tweet앱의 views.py 로 들어가보자.

 

 

 

글을 쓸 때 태그 기능이 들어가야하기때문에, 글이 save 되는 부분만 가지고 왔다.

POST 메소드에서 글이 저장된다. 따라서 elif문은 크게 신경쓰지 않아도 된다.

 

여기에 tags 변수를 하나 더 추가해주자.

 

 

id 랑 name이 tag 인 input 태그는 나중에 html 수정하면서 추가할 것이다.

 

 

 

이제 실제로 save 할 단계에서 for문을 통해 tag 하나하나의 공백을 없애준다.

 

for 안에서 tag.strip() 은 공백을 없애주는 용도이다.

만약 tag 가 비어있지 않다면 my_tweet 내의 tags 값 안에 tag 가 추가된다.

 

 

 

그 다음, 지금 건드리고 있는 view 파일의 상단에

아래 클래스를 import 해준다.

 

from django.views.generic import ListView, TemplateView

 

그 다음 뷰의 아래 부분에 밑의 코드를 작성한다.

 

class TagCloudTV(TemplateView):
    template_name = 'taggit/tag_cloud_view.html'


class TaggedObjectLV(ListView):
    template_name = 'taggit/tag_with_post.html'
    model = TweetModel

    def get_queryset(self):
        return TweetModel.objects.filter(tags__name=self.kwargs.get('tag'))

    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        context['tagname'] = self.kwargs['tag']
        return context

 

이 친구는 태그들을 모아놓는 태크 클라우드 기능과 태그를 모아 화면에 전달하는

기능을 맡아줄 것이다!

 

위 두 클래스들은 django-taggit 모듈의 공식 문서를 참조하여 작성한 것이니,

그걸 참고하면서 자기 프로젝트에 맞게 적용해나가면 된다.

 

 

 

태그 기능이 있는 html 을 따로 만들 예정이라, tweet/urls.py 에 위 두개의 경로를 추가해줬다.

 

 

 

그리고 이제 글을 작성하는 부분에 아래 html 코드를 집어넣어 tag를 입력할 수 있게 해주자.

 

<div class="mt-3 row">
<label for="tag"
class="col-sm-2 col-form-label">이 글의 태그</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="tag" id="tag"
placeholder="콤마(,)로 구분 해 주세요">
</div>
</div>

 

글을 보여주는 부분에도 아래 코드를 추가해 태그가 있다면 해당 태그를 출력하게 해보자.

 

 

{% if tw.tags.all %}
{% for tag in tw.tags.all %}
<a style="text-decoration: none"
href="{% url 'tagged_object_list' tag.name %}">
<span class="badge rounded-pill bg-success">
{{ tag.name }}
</span>
</a>
{% endfor %}
-<a style="text-decoration: none"
href="{% url 'tag_cloud' %}">TagCloud</a>
{% endif %}

 

 

이제 아까 url.py 에서 경로 추가한 부분인

 

tag_cloud_view.html 파일과

tag_with_post.html 파일을 작성해줄 것이다.

 

templates 폴더 아래 taggit 디렉토리를 만들고 그 안에 파일을 생성해준다.

 

 

 

이 내부의 html 파일들은 django-taggit 공식 문서를 찾아보면 나온다.

따라서 구체적으로 기술하지는 않겠다.

 

 

 

완성된 화면은 아래와 같다!

 

 

 

 

이렇게 태그가 정상적으로 생성되는 것을 알 수 있다.

 

만약 태그가 아래와 같이 되어 있다면?

 

 

현재 블로그와 정말, 얏호 라는 태그가 몇개의 트윗에 걸쳐 반복되어 있다.

 

정말이라는 태그를 클릭해본다면?

 

 

 

 

어떤 트윗이 정말이라는 태그를 사용했는지 알 수 있다!

 

 

 

트윗 아래의 TagCloud 를 누르면

 

 

 

어떤 태그가 얼만큼 쓰였는지도 확인 가능하다.

 

 

이렇게 태그 기능을 넣고 이것저것 만져보았다!

저 TagCloud 기능을 조금 더 손대면 많이 사용된 태그를 순위별로 구성하여

트위터 현재 이슈 줄세우기처럼 만들어볼 수도 있을 것 같다. 활용 열심히 해보자!