Django - Form 커스터마이징(CreateView, UpdateView)

Create

 

form 을 커스터마이징 해야겠다는 생각은 항상 갖고 있었지만 어디서부터 건드려야될지 몰라서 미루고만 있었던 form 을 오늘 커스터마이징 해보기로 하였다.

 

먼저 나는 웹퍼블리셔가 아니기 때문에 잘 만들어져 있는 form 이 필요해 구글링을 하였고, 아래와 같은 곳에서 내가 사용 할 코드를 복사했다.

 

https://mdbootstrap.com/docs/jquery/forms/basic/

<!-- Default form login -->
<form class="text-center border border-light p-5" action="#!">

    <p class="h4 mb-4">Sign in</p>

    <!-- Email -->
    <input type="email" id="defaultLoginFormEmail" class="form-control mb-4" placeholder="E-mail">

    <!-- Password -->
    <input type="password" id="defaultLoginFormPassword" class="form-control mb-4" placeholder="Password">

    <div class="d-flex justify-content-around">
        <div>
            <!-- Remember me -->
            <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" id="defaultLoginFormRemember">
                <label class="custom-control-label" for="defaultLoginFormRemember">Remember me</label>
            </div>
        </div>
        <div>
            <!-- Forgot password -->
            <a href="">Forgot password?</a>
        </div>
    </div>

    <!-- Sign in button -->
    <button class="btn btn-info btn-block my-4" type="submit">Sign in</button>

    <!-- Register -->
    <p>Not a member?
        <a href="">Register</a>
    </p>

    <!-- Social login -->
    <p>or sign in with:</p>

    <a type="button" class="light-blue-text mx-2">
        <i class="fab fa-facebook-f"></i>
    </a>
    <a type="button" class="light-blue-text mx-2">
        <i class="fab fa-twitter"></i>
    </a>
    <a type="button" class="light-blue-text mx-2">
        <i class="fab fa-linkedin-in"></i>
    </a>
    <a type="button" class="light-blue-text mx-2">
        <i class="fab fa-github"></i>
    </a>

</form>
<!-- Default form login -->

제일 위에 있는 Login Form 을 적용해보도록 하겠다.

 

처음에 무작정 복사 붙여넣기를 했는데 submit 을 눌렀을 때 POST 로 값은 보내지만 게시물이 작성되지 않아서 애를 먹었다. 보니 아래와 같은 문제 때문에 전송이 제대로 이뤄지지 않았던 것이다.

 

먼저 Django 에서 {{ form|crispy }} 로 돌아가던 form 들을 살펴보도록 하자.

 

title을 먼저 살펴보면 name 과 required_id 가 model 에 생성했던 title로 생성되어 있는 걸 확인할 수 있다.

이와 같이 내가 복사해온 코드에 위 내용을 추가시켜줘보자.

{#title #}
<input type="text" class="form-control mb-4" name="title"
placeholder="Please enter the subject." required_id="id_title">

그렇다, 어렵게 생각할 필요 없이 간단하게 해결할 수 있다.

이렇게 모든 코드들에 name과 required_id 값을 추가시켜주고(image, file upload의 경우 추가로 더 적어줘야한다.)

 

테스트를 해보면 잘 작동되는 것을 확인할 수 있다.

 

 

Update

다 만든 줄 알고 홈페이지를 테스트해보다가 아래 사진과 같이 Modify를 눌렀더니 값이 비어있었다.

수정 버튼을 눌렀더니 안에 값이 비어있었다. 위의 html 을 보면 알겠지만 input 안에 값은 value="" 로 결정된다.

이 부분을 잘 기억하고 Views.py 로 이동해보자.

# views.py

class BookCreateView(CreateView):
    model = Book
    success_url = reverse_lazy('list')
    template_name = 'books/book_create.html'
    form_class = BookForm

class BookUpdateView(UpdateView):
    model = Book
    fields = ['title','author','text','publisher','bookimage']
    # form_class = BookForm fields를 사용하거나 form_class를 사용하거나 둘 중 하나를 사용할 수 있다.
    success_url = '/list'
    # 자동으로 _form.html 을 불러온다

BookCreateView 는 template_name 으로 book_create.html 을 가르키게하고,

BookUpdateView는 주석을 보면 알겠지만 자동으로 _form.html 로 작성 된 문서를 가져온다.

 

그럼 우리가 필요한 것은 Create에 input 에는 value 값이 들어가면 안된다. 왜냐하면 안내를 하는

placeholder="" 가 있기 때문이다.

 

book_form.html 을 열어서 value 부분에 {{ form.[field name].value }} 를 입력해주자!!

 

<form action="" class="text-center border border-light p-5" method="post"
      enctype="multipart/form-data">
    <p class="h4 mb-4">Modify BookList</p>
    {% csrf_token %}
    {#                                    title #}
    <input type="text" class="form-control mb-4" name="title"
           placeholder="Please enter the subject." required_id="id_title" value="{{ form.title.value }}">
    {#                                                                        author #}
    <input type="text" class="form-control mb-4" name="author"
           placeholder="Please enter an author." required_id="id_author" value="{{ form.author.value }}">
    {#                                                                        text #}
    <textarea rows=5 type="text" class="form-control mb-4" name="text"
              placeholder="Please enter your details." required_id="id_text">{{ form.text.value }}</textarea>
    {#                                                                        publisher #}
    <input type="text" class="form-control mb-4" name="publisher"
           placeholder="Please enter a publisher." required_id="id_publisher" value="{{ form.publisher.value }}">
    {#                                                                        image upload #}
    <div class="input-group">
        <div class="input-group-prepend">
            <span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
        </div>
        <div class="custom-file">
            <input type="file" class="custom-file-input" id="id_bookimage" name="bookimage"
                   aria-describedby="inputGroupFileAddon01" accept="image/*">
            <label class="custom-file-label" for="inputGroupFile01">{{ form.bookimage.value }}</label>
        </div>
    </div>
    {#                                                                        submit #}
    <input type="submit" class="btn btn-info btn-block my-4" value="Save" name="_save">
</form>

input 태그 안에는 value 를 추가해준 것을 확인할 수 있고, textarea와 img 를 표시하는 것은 그 밖에서 적어준 것을 확인할 수 있다.

 

결과

 

Create

modify