[Django] Instagram 클론 코딩(5)

• 권한 문제 해결하기
  • 다른 사람으로 로그인 시, 삭제 및 수정 하지 못하게 함 
  • html기준
  • views 조정으로 해결하기
• 댓글 기능 구현하기
  • disqus를 활용한 댓글 구현

 

 <권한문제 해결하기>

• 분기를 통해 간단하게 화면에서 나오지 않도록 만들기
• 단, 새로운 유저 생성 이후 /delete/2 이런식으로 주소접근 해보면 새로운 유저가 기존 유저의 사진을 수정, 삭제가 가능 
    -> views.py로 해결 가능
• user와 작성자가 같으면 수정하기와 삭제하기를 보여주도록 설정
• 새로운 유저 생성 이후에 다시 로그인을 해보면,  다른 유저가 올린 사진에 수정하기와 삭제하기가 사라짐

- photo/templates/photo/photo_list.html

                <div class="card-body">
                    <a href="{% url 'photo:detail' object.id %}" class="card-link">댓글달기</a>
                    {% if user == object.author %}
                    <a href="{% url 'photo:update' object.id %}" class="card-link">수정하기</a>
                    <a href="{% url 'photo:delete' object.id %}" class="card-link">삭제하기</a>
                    {% endif%}
                </div>

 

 

views로 해결 ( /photo/views.py)

- def dispatch를 활용하여 get형태 및 post형태 2가지 모두 커버하기

 

1. PhotoUpdate class 수정 

• 사용자 접속 시,  get이냐, post이냐를 결정하고 분기를 자동으로 해줌
• 만약에 작성자와 요청자가 다르면 수정할 권한이 없다는 메시지를 주고 메인페이지로 이동
• 그렇지 않으면 super을 써줘서 원래 Updateview가 실행되도록 해주며 super을 쓰게 되면 실행시 absolute_url로 자동적으로 이동한다. (단 success url이 설정되어 있으면 우선시 된다.)

from django.http import HttpResponseRedirect
from django.contrib import messages 

class PhotoUpdate(UpdateView):
    model = Photo
    fields = ['text', 'image']
    template_name_suffix = '_update'
    success_url = '/'

    def dispatch(self, request, *args, **kwargs):
        object = self.get_object()

        if object.author != request.user:
            messages.warning(request, '수정할 권한이 없습니다.')

            return HttpResponseRedirect('/')
            #삭제페이지에 권한이 없다고 띄우거나
            #detail 페이지 들어가서 삭제에 실패했다고 띄우거나

        else:
            return super(PhotoUpdate, self).dispatch(request, *args, **kwargs)

 

 

2. PhotoDelete class 수정

class PhotoDelete(DeleteView):
    model = Photo
    template_name_suffix = '_delete'
    success_url = '/'

    def dispatch(self, request, *args, **kwargs):
        object = self.get_object()

        if object.author != request.user:
            messages.warning(request, '삭제할 권한이 없습니다.')
            return HttpResponseRedirect('/')

        return super(PhotoDelete, self).dispatch(request, *args, **kwargs)

 

 

3. layout/base.html

• {if message}를 통해 만약에 message가 있으면 message를 띄우도록 구현
• 위치 : {block content}위에 위치하여 화면의 가장 위에 구현

  <div class ="container">
    {% if messages %}
    <div class = "row">
      <div class = "col"></div>
      <div class = "col-6">
        {% for message in messages%}
          <div class = "alert alert-{{message.tag}}">{{message}}</div>
        {% endfor %}
      </div>
      <div class = "col"></div>
    </div>
  </div>
    {% endif %}

  {% block content %}
  {% endblock %}

 

<확인하기>

• 새로운 유저 생성 이후 다시 delete/2로 접속
• 메인페이지에서 삭제할 권한이 없습니다 .확인

 

 

 <댓글 구현하기 - 소셜로그인>

- disqus 가입 후 -> create a new site -> Basic -> universal code -> configure -> complete setup

 

- 프로젝트로 돌아와 터미널에 

$pip install django.disqus #물론, 가상환경이 켜져 있는 상태에서 진행
$pip freeze > requirements.txt #환경업그레이드 되었으니, 다시한번 요구 사항에 적어줌 

 

- config/settings.py -> installed app 에 django.contrib.sites . disqus 추가

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'photo.apps.PhotoConfig',
    'accounts.apps.AccountsConfig',
    'django.contrib.sites',
    'disqus',
]


#맨 밑에 추가
DISQUS_WEBSITE_SHORTNAME = 'expinstagram'
SITE_ID = 1

 

$python manage.py migrate 는 필수!

 

---

잠깐, 여기서 

from six.moves.urllib_parse import urlencode ModuleNotFoundError: No module named 'six'

에러가 발생했다. 확인해보니 내가 낮은 버전의 장고와 pip를 사용하고 있었기 때문에 에러가 난 것 같은데, 

 

터미널에 

$pip install six

를 입력해주면 해결 가능 하다..

 

그리고 오류가 난 저부분 경로를 타고 들어가서 disqus/__init__.py를 살펴보고

urlopen과 urlencode 부분을 저렇게 바꿔주면 오류가 발생하지 않는다.

from six.moves.urllib_parse import urlencode
from six.moves.urllib_request import urlopen

---

<화면에 보이는 위치 설정해주기>

- photo/templates/photo/photo_detail.html

1. 수정일 =>  { load disqus_tags }
2. 보일 위치에 { disqus_show_comments } 

        <div class="card" >
            <img src=" {{ object.image.url }}" class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title">{{ object.author }}</h5>
                <p class="card-text"> {{ object.text }} </p>
            </div>
            <ul class = "list-group list-group-flush">
                <li class = "list-group-item">생성일 : {{ object.created }}</li>
                <li class = "list-group-item">
                    {% load disqus_tags %}
                    <div class = "card-body">
                        {% disqus_show_comments %}
                    </div>

                </li>
            </ul>

 

 

<확인해보기>

- python manage.py runserver 후 

- 게시글 detail 에 들어가서 댓글달기를 아래와 같이 성공하면 완성!

 

 

---

기다리시는 분들이 있으시네요 ㅜㅜ 하지만... 회사 업무에 치여.. 장고관련 프로젝트는 중단된 상태입니다 ㅜㅜ