[Django App 3-9] 인스타그램 클론 코딩_포스트 수정 페이지&포스트 삭제 뷰

<Complete List>

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

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

2. 앱 만들기

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

3. 회원가입 페이지

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

4. 로그인 페이지

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

5. 로그아웃 뷰

6. 메인 페이지

7. 포스트 리스트 페이지

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

8. 포스트 상세 페이지

9. 포스트 업로드 페이지

10. 회원 정보 수정 페이지

11. 비밀번호 수정 페이지

 

<To Do List>

12. 포스트 수정 페이지

13. 포스트 삭제 뷰

 

---

포스트 수정 페이지와 포스트 삭제 뷰는 포스트 상세 페이지에 있는 모달의 <포스트 수정>, <포스트 삭제> 버튼과

 

연결되어 있다. 모달에 관한 html 코드는 아래와 같다.

<!--post_detail.html-->
<div class="modal fade" id="postEditModal" tabindex="-1" role="dialog" aria-labelledby="postEditModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-body">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            <button type="button" class="btn btn-secondary" onclick="location.href='{% url 'pystagram:pn_post_modify' post.post_id %}'">포스트 수정</button>
            <button type="button" class="btn btn-secondary" id="deleteBtn" onclick="deleteConfirm({{ post.post_id }})">포스트 삭제</button>
        </div>
    </div>
</div>
</div>

...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
    // 포스트 삭제 전 확인 질문
    function deleteConfirm(n) {
        if (confirm("이 포스트를 삭제하시겠습니까?")) {
            window.location.href = "/p/delete/" + n;
        } else {
            return false;
        }
    }
</script>

 

12. 포스트 수정 페이지

• pystagram에서 작업

12.1 url

urlpatterns = [
    re_path(r'^$', MainView, name='pn_main'),
    re_path(r'^(?P<user_id>[a-zA-Z0-9-_.]*)/$', PostListView, name='pn_post_list'),
    re_path(r'^p/(?P<post_id>[0-9]+)/$', PostDetailView, name='pn_post_detail'),
    re_path(r'^p/upload/$', PostUploadView, name='pn_post_upload'),
    re_path(r'^p/modify/(?P<post_id>[0-9]+)/$', PostModifyView, name='pn_post_modify'),
    re_path(r'^follow/(?P<following_id>[a-zA-Z0-9-_.]*)/$', FollowView, name='pn_follow'),
    re_path(r'^unfollow/(?P<following_id>[a-zA-Z0-9-_.]*)/$', UnfollowView, name='pn_unfollow'),
]

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

 

12.2 PostModifyView

• splitviews 디렉토리에 PostModifyView.py 생성

• splitviews 의 __init.py__에 PostModifyView 를 import

 

• 로직(전체코드 - github)

1. request.method == GET
   : post_modify.html rendering

2. request.method == POST
   : post_modify.html 의 form 데이터를 받아와 post 테이블에 사용자가 선택한 포스트를 UPDATE
   2.1 post_modify.html 의 form 데이터를 받아온다.
   2.2 parameter로 받은 post_id를 조건하여 post 테이블에서 데이터 UPDATE

 

12.3 post_modify.html

• 전체코드 - github

 

13. 포스트 삭제 뷰

• pystagram에서 작업

13.1 url

urlpatterns = [
    re_path(r'^$', MainView, name='pn_main'),
    re_path(r'^(?P<user_id>[a-zA-Z0-9-_.]*)/$', PostListView, name='pn_post_list'),
    re_path(r'^p/(?P<post_id>[0-9]+)/$', PostDetailView, name='pn_post_detail'),
    re_path(r'^p/upload/$', PostUploadView, name='pn_post_upload'),
    re_path(r'^p/modify/(?P<post_id>[0-9]+)/$', PostModifyView, name='pn_post_modify'),
    re_path(r'^p/delete/(?P<post_id>[0-9]+)/$', PostDeleteView, name='pn_post_delete'),
    re_path(r'^follow/(?P<following_id>[a-zA-Z0-9-_.]*)/$', FollowView, name='pn_follow'),
    re_path(r'^unfollow/(?P<following_id>[a-zA-Z0-9-_.]*)/$', UnfollowView, name='pn_unfollow'),
]

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

 

13.2 PostDeleteView

• splitviews 디렉토리에 PostDeleteView.py 생성

• splitviews 의 __init.py__에 PostDeleteView 를 import

 

• 로직(전체코드 - github)

1. URL의 parameter 값으로 사용자가 클릭한 포스트의 post_id 값을 받는다.
2. 받아온 post_id를 조건하여 post 테이블에서 데이터 DELETE