[Django App 3-10] 인스타그램 클론 코딩_좋아요 뷰/좋아요 취소 뷰&북마크 뷰/북마크 취소 뷰

<Complete List>

1. 데이터베이스 및 UI 설계하기

• 인스타그램 UI 구성
• 데이터베이스 테이블 설계 및 구현

2. 앱 만들기

• instagram, accounts 앱 만들기
• views.py 분리하기

3. 회원가입 페이지

• 비밀번호 암호화 함수 구현 - 해시 함수

4. 로그인 페이지

• 세션에 사용자 ID 저장하기

5. 로그아웃 뷰

6. 메인 페이지

7. 포스트 리스트 페이지

• 7-1. 팔로우 뷰 / 언팔로우 뷰

8. 포스트 상세 페이지

9. 포스트 업로드 페이지

10. 회원 정보 수정 페이지

11. 비밀번호 수정 페이지

12. 포스트 수정 페이지

13. 포스트 삭제 뷰

 

<To Do List>

6-1. 메인 페이지

• 좋아요 뷰 / 좋아요 취소 뷰

6-2. 메인 페이지

• 북마크 뷰 / 북마크 취소 뷰

 

---

6-1 메인 페이지(좋아요 뷰 / 좋아요 취소 뷰)

• pystagram에서 작업
• 메인 페이지의 좋아요 버튼

6-1.1 url

urlpatterns = [
    ...
    re_path(r'^like/(?P<post_id>[0-9]+)/$', LikePostView, name='pn_like_post'),
    re_path(r'^unlike/(?P<post_id>[0-9]+)/$', UnlikePostView, name='pn_unlike_post'),
]

urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

 

6-1.2 LikePostView / UnlikePostView

• splitviews 디렉토리에 LikePostView.py / UnlikePostView.py 생성
• splitviews 의 __init.py__에 LikePostView / UnlikePostView 를 import
• 모두 Ajax로 통신

 

• 좋아요 뷰 로직(전체코드 - github)

1. 현재 로그인된 유저가 좋아요를 누른 포스트의 post_id와 현재 유저의 아이디로 like_post에 데이터 INSERT
2. 선택된 포스트의 변경된 좋아요 개수를 SELECT
3. 좋아요 개수를 return

 

• 좋아요 취소 뷰 로직(전체코드 - github)

1. 현재 로그인된 유저가 좋아요를 누른 포스트의 post_id와 현재 유저의 아이디로 like_post에 데이터 DELETE
2. 선택된 포스트의 변경된 좋아요 개수를 SELECT
3. 좋아요 개수를 return

 

6-1.3 main.html

• 전체코드 - github
• javascript 함수 로직(200310 수정)
  • likePost() 로직
    1. 클릭된 좋아요 버튼이 어떤 포스트에 대한 좋아요 버튼인지 알기 위해 클릭된 element와 클릭된 포스트 ID를 인자로 받는다.
    2. Ajax로 통신
    3. 성공적으로 통신했다면 LikePostView 로부터 변경된 좋아요 개수를 받아온다.
    4. 좋아요 버튼을 채우고, 변경된 좋아요 개수를 반영
  • unlikePost() 로직
    1. 클릭된 좋아요 버튼이 어떤 포스트에 대한 좋아요 버튼인지 알기 위해 클릭된 element와 클릭된 포스트 ID를 인자로 받는다.
    2. Ajax로 통신
    3. UnlikePostView 로부터 변경된 좋아요 개수를 받아온다.
    4. 좋아요 버튼을 비우고 html 에 변경된 좋아요 개수를 반영

...
<div class="info_left">
    {% if post.like == 0 %}
    <i class="far fa-heart" onclick="likePost(this, {{ post.post_id }})"></i>
    {% else %}
    <i class="fas fa-heart" onclick="unlikePost(this, {{ post.post_id }})"></i>
    {% endif %}
    <i class="far fa-comment"></i>
</div>
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
    function likePost(elm, n) {
        $.ajax({
            url: "{% url 'pystagram:pn_like_post' 1 %}".replace('1', n),
            data: {'csrfmiddlewaretoken': '{{ csrf_token }}'},
            dataType: "json",
            type: "POST",
            success: function(response) {
                $(elm).attr("class", "fas fa-heart");
                $(elm).attr("onclick", "unlikePost(this, " + n + ")");
                $("#likeCount").text(response.likeCount);
            },
            error: function(xhr, status) {
                alert(status + "!!!");
                alert("좋아요를 반영하는 과정에서 에러가 발생했습니다.");
            }
        });
    }


    function unlikePost(elm, n) {
        $.ajax({
            url: "{% url 'pystagram:pn_unlike_post' 1 %}".replace('1', n),
            data: {'csrfmiddlewaretoken': '{{ csrf_token }}'},
            dataType: "json",
            type: "POST",
            success: function(response) {
                $(elm).attr("class", "far fa-heart");
                $(elm).attr("onclick", "likePost(this, " + n + ")");
                $("#likeCount").text(response.likeCount);
            },
            error: function(xhr, status) {
                alert(status + "!!!");
                alert("좋아요 취소를 반영하는 과정에서 에러가 발생했습니다.");
            }
        });
    }

 

6-2 메인 페이지(북마크 뷰 / 북마크 취소 뷰)

• pystagram에서 작업
• 메인 페이지의 컬렉션 버튼

6-2.1 url

urlpatterns = [
    ...
    re_path(r'^bookmark/(?P<post_id>[0-9]+)/$', BookmarkView, name='pn_bookmark'),
    re_path(r'^unbookmark/(?P<post_id>[0-9]+)/$', UnbookmarkView, name='pn_unbookmark'),
]

urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

 

6-2.2 BookmarkView / UnbookmarkView

• splitviews 디렉토리에 BookmarkView.py / UnbookmarkView.py 생성
• splitviews 의 __init.py__에 BookmarkView / UnbookmarkView 를 import
• 모두 Ajax로 통신

 

• 북마크 뷰 로직(전체코드 - github)

1. 현재 로그인된 유저가 컬렉션을 누른 포스트의 post_id와 현재 유저의 아이디로 bookmark에 데이터 INSERT
2. 성공 여부를 return

 

• 북마크 취소 뷰 로직(전체코드 - github)

1. 현재 로그인된 유저가 컬렉션을 누른 포스트의 post_id와 현재 유저의 아이디로 bookmark에 데이터 DELETE
2. 성공 여부를 return

 

6-2.3 main.html

• 전체코드 - github
• javascript 함수 로직(200310 수정)
  • bookmark() 로직
    1. 클릭된 컬렉션 버튼이 어떤 포스트에 대한 컬렉션 버튼인지 알기 위해 클릭된 element와 클릭된 포스트 ID를 인자로 받는다.
    2. Ajax로 통신
    3. 성공적으로 통신했다면 컬렉션 버튼을 채움
  • unbookmark() 로직
    1. 클릭된 컬렉션 버튼이 어떤 포스트에 대한 컬렉션 버튼인지 알기 위해 클릭된 element와 클릭된 포스트 ID를 인자로 받는다.
    2. Ajax로 통신
    3. 성공적으로 통신했다면 컬렉션 버튼을 비움

...
<div class="info_right">
    {% if post.bookmark == 0 %}
    <i class="far fa-bookmark" onclick="bookmark(this, {{ post.post_id }})"></i>
    {% else %}
    <i class="fas fa-bookmark" onclick="unbookmark(this, {{ post.post_id }})"></i>
    {% endif %}
</div>
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
    function bookmark(elm, n) {
        $.ajax({
            url: "{% url 'pystagram:pn_bookmark' 1 %}".replace('1', n),
            data: {'csrfmiddlewaretoken': '{{ csrf_token }}'},
            dataType: "json",
            type: "POST",
            success: function(response) {
                $(elm).attr("class", "fas fa-bookmark");
                $(elm).attr("onclick", "unbookmark(this, " + n + ")");
            },
            error: function(xhr, status) {
                alert(status + "!!!");
                alert("컬렉션을 저장하는 과정에서 에러가 발생했습니다.");
            }
        });
    }


    function unbookmark(elm, n) {
        $.ajax({
            url: "{% url 'pystagram:pn_unbookmark' 1 %}".replace('1', n),
            data: {'csrfmiddlewaretoken': '{{ csrf_token }}'},
            dataType: "json",
            type: "POST",
            success: function(response) {
                $(elm).attr("class", "far fa-bookmark");
                $(elm).attr("onclick", "bookmark(this, " + n + ")");
            },
            error: function(xhr, status) {
                alert(status + "!!!");
                alert("컬렉션을 삭제하는 과정에서 에러가 발생했습니다.");
            }
        });
    }

 

포스트 상세 페이지에도 좋아요 버튼과 컬렉션 버튼이 있으므로 위와 똑같이 반영한다.