장고:사진 올리기: 두 판 사이의 차이

학교의 모든 지식. SMwiki
둘러보기로 이동 검색으로 이동
시각위키텍스트
20번째 줄: 20번째 줄:
</syntaxhighlight>upload_to는 저장할 경로를 정하는 것, default는 이미지 업로드가 되어있지 않을 때 사용할 것을 의미한다.
</syntaxhighlight>upload_to는 저장할 경로를 정하는 것, default는 이미지 업로드가 되어있지 않을 때 사용할 것을 의미한다.


=== pillow 설치 ===
===pillow 설치===
모델을 반영하기 위해 makemigrations를 실행하면 에러가 뜬다. HINT로 pillow를 설치하라는 메시지가 뜬다. 메시지 그대로 <code>python -m pip install Pillow</code>를 입력하자.
모델을 반영하기 위해 makemigrations를 실행하면 에러가 뜬다. HINT로 pillow를 설치하라는 메시지가 뜬다. 메시지 그대로 <code>python -m pip install Pillow</code>를 입력하자.


== 각종 사전설정 ==
==각종 사전설정==


=== 업로드 폴더 설정 ===
===업로드 폴더 설정===
settings.py에 MEDIA_ROOT를 다음과 같이 설정한다.(기본설정이 없기 때문에 새로 써주어야 한다.)<syntaxhighlight lang="python">
settings.py에 MEDIA_ROOT를 다음과 같이 설정한다.(기본설정이 없기 때문에 새로 써주어야 한다.)<syntaxhighlight lang="python">
MEDIA_URL='/media/' #미디어 파일을 불러올 때 사용할 가상 url을 설정한다.
MEDIA_URL='/media/' #미디어 파일을 불러올 때 사용할 가상 url을 설정한다.
32번째 줄: 32번째 줄:
#media 하위에 앱이름으로 디렉터리를 만들고 파일을 업로드하게 된다.
#media 하위에 앱이름으로 디렉터리를 만들고 파일을 업로드하게 된다.
</syntaxhighlight>유저가 업로드한 파일이 모두 여기에서 관리된다.
</syntaxhighlight>유저가 업로드한 파일이 모두 여기에서 관리된다.
<br />


== 탬플릿 변경 ==
== 탬플릿 변경 ==


=== 등록 만들기 ===
===등록 만들기===
이미지를 등록하기 위해 create.html을 수정한다.<syntaxhighlight lang="html+django">
이미지를 등록하기 위해 create.html을 수정한다.<syntaxhighlight lang="html+django">
<form action="", method="post" enctype="multipart/form-data">
<form action="", method="post" enctype="multipart/form-data">
42번째 줄: 41번째 줄:
     <input type="file" name="image" id="image" accept="image/*" value="{{ form.image.value|default_if_none:''}}">
     <input type="file" name="image" id="image" accept="image/*" value="{{ form.image.value|default_if_none:''}}">
</form>
</form>
</syntaxhighlight>
</syntaxhighlight>수정페이지의 탬플릿도 그대로 사용하면 되는데, 필요에 따라 '등록하기'를 '수정하기'로 바꾼다든가 간단한 조작만 하면 된다.
 
<br />
=== 상세 페이지 변경 ===
===상세 페이지 변경===
이미지가 보이는 곳은 상세화면이므로 detatil.html을 수정한다. 적당한 자리에 다음과 같은 형태로 끼워넣는다. image 속성 하위엔 url 속성이 있어 이를 통해 이미지를 가져온다.<syntaxhighlight lang="html+django">
이미지가 보이는 곳은 상세화면이므로 detatil.html을 수정한다. 적당한 자리에 다음과 같은 형태로 끼워넣는다. image 속성 하위엔 url 속성이 있어 이를 통해 이미지를 가져온다.<syntaxhighlight lang="html+django">
   {% if question.image %}<!--이미지 속성이 있을 때에만 부른다. 없으면 에러;;-->
   {% if question.image %}<!--이미지 속성이 있을 때에만 부른다. 없으면 에러;;-->
52번째 줄: 51번째 줄:
   {% endif %}
   {% endif %}
</syntaxhighlight>
</syntaxhighlight>
==== urls.py 수정 ====
보통 여기까지 하면 관리자페이지에서 사진을 올려 확인하는 과정을 거친다. 그런데, 위처럼 해서 이미지를 등록해도 이미지가 보이지 않는데, 이는 urls.py에 미디어 경로가 등록되지 않았기 때문이다.
때문에 이를 위해 최상단의 urls.py에 다음과 같은 내용을 추가해준다.(기존 urlpatterns의 하단에)<syntaxhighlight lang="python">
from django.conf.urls.static import static
from django.conf import settings
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
</syntaxhighlight>그런데, 이건 디버그모드가 True일 때에만 작동한다.[아닐 땐 어떻게 해? 서비스 모드에선?]

2020년 11월 11일 (수) 07:34 판

장고! 웹 프레임워크! 틀:장고

  1. 장고:개요
  2. 장고:웹페이지설계
    1. 장고:앱
    2. 장고:url
    3. 장고:model
      1. 장고:DB
      2. 장고:모델 필드
      3. 장고:모델의 변경
    4. 장고:view
      1. 장고:클래스형 뷰, 제네릭 뷰
      2. 장고:view 각종 기능
    5. 장고:template
    6. 장고:static. 정적파일 사용하기
      1. 장고:CSS 사용하기
      2. 장고:JS 사용하기
      3. 장고:글꼴 사용
      4. 장고:부트스트랩
    7. 장고:media. 미디어 파일 사용하기
  3. 장고:관리자페이지
  4. 장고:settings.py
  5. 장고:기능구현
    1. 장고:회원관리
    2. 장고:유저
    3. 장고:커스텀 유저
    4. 장고:소셜로그인
    5. 장고:입력받기
    6. 장고:저장된 내용 활용하기
    7. 장고:변수 내보내기
    8. 장고:글쓰기
    9. 장고:페이징(페이지나누기)
    10. 장고:답변쓰기(댓글쓰기)
    11. 장고:추천,즐겨찾기
    12. 장고:새글(최신글) 나타내기
    13. 장고:썸머노트 설치
    14. 장고:네비게이션 바 만들기
    15. 장고:검색기능
    16. 장고:카테고리 만들기
    17. 장고:사진 올리기
    18. 장고:파일 업로드
    19. 장고:이메일app 만들기
    20. 장고:매직 그리드
  6. 장고:웹서비스
    1. 장고:Git
    2. 장고:리눅스에 올리기
    3. 장고:우분투에 올리기(nginx 사용)
    4. 장고:도커로 올리기
  7. 장고:팁

개요

사진을 올리고 관리하기 위해선 모델을 하나 만들어 개별적인 관리가 필요하다.



모델 작성

글쓰기를 구현했다면 글쓰기 모델에 약간의 변형을 주어보자. 아래의 image필드를 추가한다.

/앱/models.py 안에 작성한다.

from django.contrib.auth.models import User
from django.db import models

class Question(models.Model):#세부내용은 필요에 따라..

    image=models.ImageField(upload_to='images/%Y/%m/%d', default='images/no_image.png')
#setting 값에 지정된 상대경로를 사용하기 위해 경로 처음엔 /를 두지 않는다.

upload_to는 저장할 경로를 정하는 것, default는 이미지 업로드가 되어있지 않을 때 사용할 것을 의미한다.

pillow 설치

모델을 반영하기 위해 makemigrations를 실행하면 에러가 뜬다. HINT로 pillow를 설치하라는 메시지가 뜬다. 메시지 그대로 python -m pip install Pillow를 입력하자.

각종 사전설정

업로드 폴더 설정

settings.py에 MEDIA_ROOT를 다음과 같이 설정한다.(기본설정이 없기 때문에 새로 써주어야 한다.)

MEDIA_URL='/media/' #미디어 파일을 불러올 때 사용할 가상 url을 설정한다.

MEDIA_ROOT=BASE_DIR / 'media' #기본프로젝트 하위의 media에서 모든 업로드 매체를 관리한다.
#media 하위에 앱이름으로 디렉터리를 만들고 파일을 업로드하게 된다.

유저가 업로드한 파일이 모두 여기에서 관리된다.

탬플릿 변경

등록 만들기

이미지를 등록하기 위해 create.html을 수정한다.

<form action="", method="post" enctype="multipart/form-data">
<!--enctype="multipart/form-data"를 추가한다. 이는 파일 업로드 때 사용하는 옵션으로, 데이터를 문자열로 인코딩하지 않는다.-->    
    <input type="file" name="image" id="image" accept="image/*" value="{{ form.image.value|default_if_none:''}}">
</form>

수정페이지의 탬플릿도 그대로 사용하면 되는데, 필요에 따라 '등록하기'를 '수정하기'로 바꾼다든가 간단한 조작만 하면 된다.


상세 페이지 변경

이미지가 보이는 곳은 상세화면이므로 detatil.html을 수정한다. 적당한 자리에 다음과 같은 형태로 끼워넣는다. image 속성 하위엔 url 속성이 있어 이를 통해 이미지를 가져온다.

  {% if question.image %}<!--이미지 속성이 있을 때에만 부른다. 없으면 에러;;-->
    <div>
        <p><img src="{{question.image.url}}" style="width:90%"></p>
    </div>
  {% endif %}

urls.py 수정

보통 여기까지 하면 관리자페이지에서 사진을 올려 확인하는 과정을 거친다. 그런데, 위처럼 해서 이미지를 등록해도 이미지가 보이지 않는데, 이는 urls.py에 미디어 경로가 등록되지 않았기 때문이다.

때문에 이를 위해 최상단의 urls.py에 다음과 같은 내용을 추가해준다.(기존 urlpatterns의 하단에)

from django.conf.urls.static import static
from django.conf import settings

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

그런데, 이건 디버그모드가 True일 때에만 작동한다.[아닐 땐 어떻게 해? 서비스 모드에선?]

원본 주소 "https://smwiki.info/index.php?title=장고:사진_올리기&oldid=2119"