Django 인스타그램 클론코딩(5~6) - template설계 및 사진업로드하기

2019.05.04 인스타그램 클론 코딩하기(Template 및 url 연결하기)

인스타그램 만들기(5~6)

• 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. 로그아웃 되었을 때는 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. 레퍼러를 활용하여 해당 주소가 어디서부터 시작됬는지 확인한다.
12. 좋아요한 포스팅만 보기 기능 구현하기
13. 포스팅 저장하기 기능 구현하기
14. 저장한 포스팅 리스트 페이지 구현하기
15. 좋아요한 포스팅 및 저장한 포스팅 리스트 보기는 로그인한 사람만 보여주기
    1. view단에서 시행
       1. dispatch 활용
       2. LoginRequiredmixin
    2. html 활용
16. my page에 내가 올린 사진들만 나오도록 구현한다.
17. my page에 팔로우 기능 추가하기

이번 시간에 할 것(5~6)

• Template 만들기
• 사진이 화면에 업로드 할 수 있도록 만들기

Template 만들기

1. 템플릿 만들기

• photo 아래에 templates 폴더 만들기
• templates 아래에 photo 폴더 만들기
• 그 아래에 html 파일들 생성해주기
• 이후 많은 앱들이 생기는 경우 서로 겹치는 문제를 해결하기 위해 templates 아래에 photo폴더를 다시 만들고 html파일 생성

2. base.html에 연결하기

• photo 아래에 layout 만들고 base.html 생성해주기
• layout 경로를 찾을 수 있도록 setting에 templates 경로를 지정
• os.path.join(BASE_DIR, 'layout')

3. Bootstrap 적용하기

1. 부트스트랩을 적용하면 누구나 손쉽게 웹사이트 디자인을 할 수 있습니다.
2. Bootstrap · The most popular HTML, CSS, and JS library in the world. 에 접속합니다.
3. base.html 파일에 부트스트랩을 사용하기 위해 필요한 css 및 javascript 링크를 넣습니다.
   1. css 파일은 head의 마지막에 위치
   2. javascript 파일은 body의 마지막에 위치

#css 
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 

#javascript

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

1. 부트스트랩에서 마음에 드는 navbar를 가지고 옵니다.
   1. Navbar · Bootstrap

1. 마음에 드는 포맷을 찾으면 해당 포맷을 적용할 html에 넣어줍니다.
   1. 지금은 base.html에 넣어줍니다.(body tag내 위치)
   2. 파일들을 적절하게 수정하고 클릭시 연결할 링크를 연결해줍니다.
      1. <a href = " " > 내 위치
      2. { url 'bookmark:index' } 등과 같이 연결
   3. block content를 만들어서 다른 템플릿에서 추가할 수 있도록 구성합니다.

• 상단 링크 구성을 Home과 사진올리기로 구성
• 아래쪽에 { block content } { endblock } 을 구성
• Dstagram 제목 설정 및 Home, 사진 올리기 url 연결하기

photo 템플릿 수정하기

photo_list

• for문으로 models를 통해 생성된 object의 list를 하나씩 가지고 온다.
• img의 경로는 image.url 을 통해 연결

photo_create

• form을 활용하여 입력창 생성
• post형식으로 전송
• { csrf_token }을 작성하여 보안문제 해결
• {{ form.as_p }} 를 적어줌으로서 한줄씩 띄우면서 create의 field에 등록된 것을 가지고 옴

photo_detail

• 해당 컨텐츠의 작성자 / text를 보여준다.
• 수정과 삭제를 할 수 있도록 링크 연결

photo_delete

• form 형식으로 구현
• 한번 더 실제로 지울지를 확인하는 페이지로 구성

photo_update

• create와 비슷하게 구현
• 폼 형태로 입력할 수 있도록 구현

2. 화면에 사진 업로드 할 수 있도록 만들기

1. 현재는 사진을 업로드 하려고 하면 선택된 파일이 없다고 나옴
2. 메인 화면에 사진이 오류가 뜸

해결방안

1. html의 폼형태에서 입력할 때는 모두 text 파일로 인지 따라서 form 옆에 이게 image 파일이라는 것을 알려줄 수 있도록 해야함

• enctype을 추가하여 데이터형식을 입력한다고 알려줌

2. 또한 photo을 생성하는데 user_id가 확인되어야 하므로 views.py 수정

• 입력받는 폼이 유효한지 확인하고 작성자 id 확인

2. 메인 화면에 사진이 오류가 뜸
   1. 이미지 url을 확실하게 설정해줘야 한다.
   2. urls.py 수정

• 이미지의 url 설정