멋쟁이 사자처럼 at 한국교통대학교 7기

2019 KNUT X LIKE LION #7

코스 전체목록

닫기

글쓰기 페이지 꾸미기

현재 글쓰기 페이지

  • 이전 토픽에서 CKEditor를 활용하여 이미지 파일 업로딩 기능까지 구현해 보았습니다.
  • admin 페이지에서는 파일 업로딩 기능이 구현이 되었으나, 아직 글쓰기 페이지에서는 적용이 안되어 있습니다.
  • 이제부터 본격적으로 글쓰기 페이지를 예쁘게 꾸며보도록 합시다.

 

 

 

 

forms.py 수정

  • 화면에 보이는 폼을 수정하기 위해 [forms.py]를 다음과 같이 추가하여 작성합니다.
from ckeditor_uploader.widgets import CKEditorUploadingWidget

widgets = {
            'title': forms.TextInput(
                attrs={'class': 'form-control', 'style': 'width: 100%', 'placeholder': '제목을 입력하세요.'}
            ),
            'author': forms.Select(
                attrs={'class': 'custom-select'},
            ),
            'body': forms.CharField(widget=CKEditorUploadingWidget()),
        }

 

  • 'widgets'을 지정하면, 장고에서 자체적으로 제공하는 폼의 형태를 빌려올 수 있습니다.
    'title'  TextInput가 형태가 맞는 형태이고, 'author'는 'Select'가  맞는 형태이므로 이를 적용하였습니다.
    'body'는 CKEditor 자체만의 위젯이 제공을 하므로 [CKEditorUploadingWidget]을 import하여 적용시켜주었습니다.
     
  • 그 안의 속성('attrs=')으로 폼에 적용되는 css의 class를 지정해 주었습니다.
    이는 제가 나름대로 [getbootstrap documentation]에서 각각 html에 맞는 class를 찾아서 적용한 것이므로 다르게 적용시켜도 됩니다.
    https://getbootstrap.com/

 

 

 

 

createBlog.html 수정

  • 이제 [createBlog.html]을 수정하여 봅니다.
  • css를 적용해서 본인이 원하는대로 꾸며봅시다.
     
  • 여기에서 중요한 부분은 form 태그의 'enctype'과 {{ form.media }}입니다.
  • enctype="multipart/form-data"를 설정해주어야 문자 이외의 이미지 파일 같은 것들도 같이 묶여서 전송이 됩니다.
  • 또한 {{ form.media }}를 넣어 주어야 CKEditor의 폼이 적용이 됩니다.
{% extends 'base.html' %}

{% block content %}

    <br>
    <div class="container">
        <h1>글쓰기</h1>
        <hr>
        <br><br>
        <form method="POST" enctype="multipart/form-data">
            {% csrf_token %}
            {{ form.media }}
            {{ form.as_p }}
            <input type="submit" class="btn btn-dark" value="저장"/>
        </form>
    </div>

{% endblock %}

 

 

 

 

적용 확인

  • 서버를 구동시키고, 적용이 되었는지 확인해봅시다.

 

  • 저장 후, admin에서 확인해봅시다.

 

  • 또한, 서버에도 정상적으로 파일이 업로드가 되었는지도 확인해봅시다.

 

 

 

 

 

댓글

댓글 본문
버전 관리
KNUT X LIKE LION
현재 버전
선택 버전
graphittie 자세히 보기