템플릿 - DB 연동 - 멋쟁이 사자처럼 at 한국교통대학교 7기

템플릿 - DB 연동

지금까지 한 작업들을 데이터베이스 모델 생성 이후부터 정리하여봅시다.
1) 데이터베이스 모델을 생성
2) 그 모델을 기반으로 하여 폼을 생성
3) 뷰에서 위의 폼을 불러 들이고 템플릿에 전달
4) 템플릿에서 화면에 출력

이제부터 해야되는 작업은 템플릿에서 데이터를 입력했을 때, 이 데이터들이 실제 데이터베이스에 저장이 되어야하는 작업입니다.
관리자 페이지에서는 단지 [Save] 버튼만 누르면 저장이 되었지만, 지금하고 있는 작업들은 관리자 페이지가 아니기 때문에 직접 설정해주어야 합니다.

createBlog.html 수정

현재 [createBlog.html] 문서에는 단지 폼을 출력하는 코드만이 있을 뿐입니다.
물론 지금도 폼을 그대로 가져왔기 때문에 데이터를 입력할 수는 있습니다만 이 데이터를 전달할 수 있는 방법이 없습니다.
html에서는 사용자들이 데이터를 입력하고 그 데이터를 전송하기 위해 <form> 태그를 이용하기 때문에 우리도 이를 활용하여 데이터 전달 폼을 구축해보도록 합시다.

다음과 같이 코드를 수정해보도록 합시다.
먼저 폼 안의 데이터가 전달되는 방식은 'POST'입니다.
폼 안의 데이터가 제출이 되기 위해 'submit' 타입을 사용합니다.

<form method="POST">
    {{ form.as_p }}
    <input type="submit" value="저장"/>
</form>

POST vs GET

<form method="POST">

여기서 잠깐 POST와 GET의 간단한 차이점에 대해서 간단히 살펴보도록 합니다.
method는 폼 안에서 입력한 데이터가 전달되는 방식입니다. 크게 POST와 GET 방식이 있습니다.
먼저, 웹 상에서 데이터가 전달될 때에는 HTTP 프로토콜을 사용하여 전달이 됩니다. 전달 방식에는 여러가지가 있으며 그 대표적인 것이 POST와 GET입니다.
참고) https://ko.wikipedia.org/wiki/HTTP
POST는 데이터의 길이, 형식에 제약이 없으며(있긴 하지만 GET보다는), 데이터를 감싸서 보내기 때문에 전달되는 데이터가 보이지 않습니다.
참고) https://ko.wikipedia.org/wiki/POST_(HTTP)
반면에, GET은 [http://aasdfsdafasfsa.com?id=2382&page=123]와 같이 전달되는 데이터가 url 상에 보이게 됩니다. 또한 이렇게 주소에 보여지기 때문에 길이에 제약이 있습니다.(256글자)
참고)하지만 256글자는 사실 예전의 장비에서 지원을 하지 않는 경우가 있어서 주의해야 된다라고 적혀있다고 합니다. 사실상 제약은 없다고 합니다.
출처 - https://tibang.tistory.com/entry/Get방식의-길이-제한에-대한-이야기

여기서는 POST와 GET 방식에 대한 자세한 개념보다는 간단히 어떠한 차이점이 있으며, 어떠한 상황에서 사용하는지 정도만 파악하면 됩니다.
[글쓰기]에서 POST 방식을 사용한 이유는 뒤에서 다루게 될 내용이지만 파일 업로드를 할 것이기 때문입니다. 이는 GET 방식에서 지원하지 않습니다.

createBlog() 수정

이제 템플릿에서의 작업이 끝났습니다.
그렇다면 [blogapp]-[views.py]로 돌아와서 createBlog() 함수를 수정하여 제대로 DB에 저장하도록 합시다.
일단 다음과 같이 수정하도록 합니다.

from django.shortcuts import render, redirect

def createBlog(request):

    if request.method == 'POST':
        form = CreateBlog(request.POST)

        if form.is_valid():
            form.save()
            return redirect('blogMain')
        else:
            return redirect('index')
    else:
        form = CreateBlog()
        return render(request, 'createBlog.html', {'form': form})


    # form = CreateBlog()
    #
    # return render(request, 'createBlog.html', {'form': form})

26~28라인은 원래 있었던 내용이라 주석 처리 하였습니다.
redirect() 함수를 추가로 import 해줍니다.
이는 render() 함수와 비슷하지만 템플릿에 값을 전달하는 목적이 아닌 단순히 특정 url 혹은 프로젝트 내의 문서로 이동시키고자 할 때 사용합니다.
[createBlog.html]에서 [저장]을 누르면 데이터들이 POST 방식으로 넘어옵니다.
만약 POST 방식으로 넘어오지 않았으면, 그냥 단순히 [글쓰기] 버튼을 눌러서 들어온 것이 됩니다.
POST 방식으로 넘어오면 CreateBlog() 폼에 값을 전달한 상태로 [form] 객체를 만듭니다.
그 폼 데이터들이 올바른 형식이면(form.is_valid()) 데이터베이스에 저장을 합니다.(form.save())
그 후에 블로그 메인 화면으로 이동시킵니다.(redirect('blogMain'))

csrf_token

마지막으로 한가지를 더 처리를 해주어야 합니다.
원래는 지금의 과정대로 진행하면 되지만, 장고에서는 POST 데이터 전달 과정에서 보안을 위해 [csrf_token]을 반드시 사용해야 합니다.
참고)CSRF(Cross-Site Request Forgery)란? https://ko.wikipedia.org/wiki/사이트_간_요청_위조

따라서 [createBlog.html]을 다시 열어서 다음 한 줄을 추가해줍니다.

{% csrf_token %}

서버 구동 후 동작 확인

이제 서버를 구동하여 데이터베이스에 제대로 저장이 되는지 확인을 해보도록 합시다.

admin 페이지에 들어가서 내용이 제대로 저장되어 있는지 확인해보도록 합니다.

템플릿 - DB 연동

댓글