2019.05.05 인스타그램 클론 코딩하기(좋아요 버튼 구현하기)

인스타그램 만들기(15)

• dstagram 소스코드

구현 로직

1. photo 앱 만들기
2. 모델 설계하기
3. views 설계하기
   1. list페이지
   2. 상세페이지
   3. 삭제하기
   4. 수정하기
   5. 생성페이지
4. url 연결시켜주기
5. template 만들기
   1. create/list/update/delete/detail
6. 사진 화면에 업로드 할 수 있도록 만들기
7. success url을 get_absolute_url로 연동시켜보기
8. account 앱 만들기
   1. 로그인/로그아웃 기능 구현하기
   2. 템플릿에 로그인/로그아웃 보이도록 하기
   3. 로그아웃 되었을 때는 create 및 sign out가 안 보이도록 구현하기(분기)
9. 권한 문제 해결하기
   1. html 기준에서 해결하기
   2. 링크로 들어와도 안 되도록 해결해보기
      1. view를 조정하기
10. 댓글 기능 구현하기
    1. 댓글은 상세페이지에서 가능하도록 하기
    2. 소셜 댓글기능으로 구현하기
11. 좋아요/저장하기 버튼 만들기
    1. 스프라이트 이미지 기법 활용하기
    2. 클릭하면 색깔 바뀌도록 구현하기
    3. 로그인을 해야지 버튼 클릭이 되도록 하고 클릭을 하면 like count 올라가기
    4. like에 대한 정보를 저장하기
    5. 좋아요 counting 표시해주기
    6. 디테일 페이지에서 좋아요를 누르면 디테일 페이지에서 그대로 유지하도록 하기
       1. view와 like에서의 분기
       2. 레퍼러를 활용하여 해당 주소가 어디서부터 시작됬는지 확인한다.
    7. 저장하기 기능 추가하기
12. 좋아요한 포스팅만 보기 기능 구현하기
13. 저장한 포스팅 리스트 페이지 구현하기
14. 좋아요한 포스팅 및 저장한 포스팅 리스트 보기는 로그인한 사람만 보여주기
    1. view단에서 시행
       1. dispatch 활용
       2. LoginRequiredmixin
    2. html 활용
15. my page에 내가 올린 사진들만 나오도록 구현한다.
16. my page에 팔로우 기능 추가하기

이번 시간에 할 것(15)

• user_list를 만들어서 사용자가 올린 사진들만 모아보기 기능 추가
  • user_list라는 views.py에 추가해준다.
  • url을 연결하여 준다.
• user_list를 볼 수 있는 템플릿을 만든다.
• base.html을 통해 새로운 카드를 만든다.
  • 해당 링크를 user_list로 연결해준다.

유저 리스트 만들기

1. views.py를 통해 PhotoMyList를 만든다.
2. url을 연동시켜준다.
3. templates를 만든다.
   1. mylist 템플릿을 구현한다.
   2. photo_list 템플릿을 수정하여 mylist 템플릿으로 갈 수 있도록 url을 연결해준다.

views.py 만들기

• templates을 mylist로 연결시켜준다.
• dispatch를 통해 로그인을 했는지 확인해준다.

url 연동시켜주기

• url로 이동하여 mylist의 path를 추가해준다.

templates 만들기

photo_mylist 템플릿 만들기

1. Bootstrap Gallery - examples & tutorial. Basic & advanced usage - Material Design for Bootstrap
2. 위의 자료를 참고하여 mylist를 구현

• object의 list를 돌면서 작성자와 요청자가 같은 것만 보여준다.
• figure class를 통해서 <div class="col-md-12">, figure class=”col-md-4”> 두개를 나눈 값 만큼 1줄에 card를 넣는다. 12/4 = 3개씩
• 이미지 url을 넣어준다.

photo_list.html 수정하기

• 그냥 있었던 마지막 div class col에 새로운 내용을 추가해준다.
• bootstrap 카드를 참조해서 가지고 온다.
• url을 연결하여 mylist로 이동하도록 해준다.’
• title은 접속한 로그인 유저가 나오도록 해줘야 하는데 어떻게 구현해야할지 잘 모르겠다. ㅠㅠ

확인

• 회원님의 스토리 이동 클릭

• 아래와 같이 잘 구현된 것을 볼 수 있다.