2019.05.07 인스타그램 클론 코딩하기(회원가입 기능 구현하기1)

인스타그램 만들기(17)

회원가입 기능 구현하기(5~6)

모델 폼을 통해 회원가입 기능 구현하기

  1. views를 통해 로직 구현하기
    1. POST형태로 받을 때와 처음 실행할 때 화면 구현
    2. render의 특징
    3. POST형태의 데이터 저장하기
  2. 템플릿 만들기
  3. url 연결하기
  4. 비밀번호 암호화하기
  5. forms.py를 구현하여 views.py를 간락햐게 만들기
    1. forms.py 오버라이딩하기
    2. views.py 간략히 수정하기
    3. 중복 입력 받기(commit=False)
    4. signup_complete에 회원가입한 사람 이름 띄어주기
    5. form을 통해 받은 자료 암호화하기
      1. set_password
  6. 비밀번호 재입력창 만들기
    1. 비밀번호 중복 확인하기
  7. 해로쿠를 통해 서버 배포하기

5. forms.py를 구현하여 views.py 간략하게 만들기

  1. forms.py 구현하기
E405F6FA-56D6-42DA-AC56-1E6EA71807CF
  • forms.py 생성
  • class Meta를 활용해 입력 받을 필드들을 나열한다.
  • password에 대해서는 입력시 ****가 나오도록 하기 위해 커스터마이징 한다.

모델폼 일반 보기

  • class Meta 활용
  • 다 가지고 오려면 "_all_"
  • 우리가 views.py에 만든 것은 signup.html에 추가되는 것이다.
  • 따라서 우리가 만들어 준 것은 지워주면 된다.
  • fields에는 해당 모델에 대해 입력 받을 필드들을 나열한다.
    • 추가필드도 포함될 수 있다.
      • 필드 목록과 추가 필드가 겹치면 오버라이드 한다.(password)
  • fields에 써진 순서대로 출력된다.
  • 이후에 해야 하는 것들
    • 필드의 기본값 설정하기(상품 장바구니 기본값 1로 셋팅)
    • placeholder 설정법
    • css class 설정법
    • Validator 설정법
    • 커스텀 필드 만드는 법
    • 헬프 텍스트 설정법 ( 이거는 나도 꼭 필요하다!! )
  1. views.py 간략하게 만들기(중복 저장 피하기)
CE37BDBF-0AFA-4707-9D4A-EED2900D6C1D
  • from .forms import SignUpForm을 가지고 온다.
  • POST일 때 SignUpForm(request.POST)인 객체를 생성하고
  • 그것이 유효하다면 user_instance에 signup_form을 저장한다.
  • 하지만 아래에서 또 한번 저장이 있으므로 중복 저장을 피하기 위해 commit=False를 입력한다.
  • set_password 및 cleaned_data를 통해 유효한 문자만 남긴 상태를 저장한다. 또한 암호화한다.
  • render 뒤쪽에 {'username':user_instance.username'}을 넣어서 username이 나오도록 구현해준다.

6. 비밀번호 재입력창 만들기

  1. form 커스터마이징
ADE345FE-75B8-4AF8-AE36-A6C017B28C4A
  • Repeat_password를 fields에 추가해 준뒤에 폼에 없는 field 이므로 커스터마이징해준다.
  • clean_[필드명]을 통해 cleaned_data를 받아오고 이 받아온 데이터들 중 'password'와 'Repeat_password'를 확인하여서 일치 하지 않으면 에러 메시지를 전송한다.
  • 일치하면 일반적으로 'Repeat_password'를 반환한다.

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

인스타그램 만들기(15)

구현 로직

  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 만들기

스크린샷 2019-05-06 오후 1 06 22
  • templates을 mylist로 연결시켜준다.
  • dispatch를 통해 로그인을 했는지 확인해준다.

url 연동시켜주기

스크린샷 2019-05-06 오후 1 07 44
  • url로 이동하여 mylist의 path를 추가해준다.

templates 만들기

photo_mylist 템플릿 만들기

  1. Bootstrap Gallery - examples & tutorial. Basic & advanced usage - Material Design for Bootstrap
  2. 위의 자료를 참고하여 mylist를 구현
스크린샷 2019-05-06 오후 1 10 41
  • object의 list를 돌면서 작성자와 요청자가 같은 것만 보여준다.
  • figure class를 통해서
    , figure class="col-md-4"> 두개를 나눈 값 만큼 1줄에 card를 넣는다. 12/4 = 3개씩
  • 이미지 url을 넣어준다.

photo_list.html 수정하기

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

확인

D35E174D-C704-49FF-9545-AC76A7C8F33C
  • 회원님의 스토리 이동 클릭
4613BA28-58A1-4848-825E-AF7F1B323CB1
  • 아래와 같이 잘 구현된 것을 볼 수 있다.

+ Recent posts