장고(Django) 좋아요/공유하기 기능만들기

좋아요 기능

좋아요 기능을 만들어주기위해 models.py의 게시물(Bucket)에 한 컬럼을 더 추가해 줄것이다.

Many to Many 로 값을 줘서 데이터베이스에 새로운 테이블이 생성되도록 할 것이다.

class Bucket(models.Model):

    # 좋아요 추가

    like_users = models.ManyToManyField(

        settings.AUTH_USER_MODEL, related_name='like_buckets', blank=True)

migarete를 해주면, db에 like_users table이 생기고, AUTH_USER_MODEL의 pk(id) 와 bucket의pk(id) 가 들어왔다.

urls.py와 views.py에서 만들어보자.

path('likes/<int:bucket_id>/', views.likes, name='likes'),

urls.py에서 경로는 이렇게 지정해줬으니, views.py에서 likes 함수를 만들면 되겠다.

# 좋아요

@login_required(login_url='/users/login/')

def likes(request, bucket_id):

    print(request.method)

    bucket = Bucket.objects.get(id=bucket_id)

    if request.method == "POST":

        if request.user in bucket.like_users.all():

            bucket.like_users.remove(request.user)

        else:

            bucket.like_users.add(request.user)

        return redirect(f'/bucket/{bucket_id}/')

    else:

        return HttpResponse('Invalid request method', status=405)

POST 받았을때,

접속한 user가 like_users의 table에 있을 때, html의 버튼을 누르면 좋아요를 취소해주고,

반대로, 접속한 user가 like_users의 table에 없을 때, html의 버튼을 누르면 좋아요를 하게 해줬다.

 

이제 html도 수정해주자.

       <form action="/bucket/likes/{{bucket.id}}/" method="post">

        {% csrf_token %}

        <button class="like-button" type="submit">❤️</button>

        <span class="small">

          {{ bucket.like_users.count }} 명이 이 글을 좋아합니다.

        </span>

      </form>

form 태그에 button을 submit 해주면 post하도록 html에 만들어줬다.

좋아요버튼은 하트를 넣었는데, 사실 처음에는 빈 하트를 받고, 자신이 좋아요를 누르면 하트가 채워지도록 하고싶었는데, 그게 잘 안됐다.

{{ bucket.like_users.count }}를 넣어서 좋아요를 몇명이 했는지 볼 수 있게 했다.

완성본!! 댓글쪽은 기능구현도 다 되어있고, 꾸미기도 잘 꾸민 것 같아서 기분이 좋다!!!!

---

공유하기 기능

위 사진을 보면 알겠지만, 공유하기 기능도 만들었다.

공유하기는 장고를 쓴다면 날로 먹을 수 있다ㅋㅋㅋ

 

1. pip install django-social-share 를 터미널에 입력해줘서 install해준다.

2. 까먹지 말고 pip freeze > requirements.txt

3. 까먹지 말고 언제나 그렇듯 settings.py에 추가해준다.

INSTALLED_APPS = [

    'django_social_share',

]

3. 원하는 html 파일에서 {% load social_share %} 입력하면 사용 가능!

4. 원하는 공유하기 기능을 넣어주자! 나는 이렇게 넣었음. 결과물은 위 사진처럼 나옴!!!

      <button class="like-button">

        {% post_to_facebook post.get_absolute_url "Facebook" %}

      </button>

      <button class="like-button">

        {% post_to_twitter "Twitter" post.get_absolute_url "Twitter" %}

      </button>

style에서 class like-button css좀 만져주면 완성!

저 버튼을 누르면 페이스북(트위터)로 이동해서 바로 공유하는 글을 작성할 수 있다. (공유하고싶은 페이지 자동 생성)

바로 이 화면 뜸!!

장고는 신이다..