폼을 통해 데이터 입력받고 View에서 처리하기

폼을 만드는 과정을 생각해보자

1. 웹사이트에서 사용자를 통해 어떤 데이터를 입력 받을지 고민

나의 목표는 블로그 방문자의 댓글을 입력 받고 이를 데이터베이스에 보관하는 것이다.

댓글의 기록은 모델에서 Comment 클래스 형태로 username 필드와 content 필드를 가지고 있다.

데이터베이스는 만들어졌으니 입력 받을 수 있는 폼(form)을 만들어야한다. *폼은 일종의 양식이라 보면 된다.

폼을 통해 입력 받을 데이터는 username과 content이다. 댓글을 남기는 사람과 댓글 내용을 말한다.

2. 템플릿에서 앞서 고민한 내용을 담은 폼을 만든다.

<form method="post" action="">
    {% csrf_token %}
    <input name="username" />
    <input name="content" />
    <button type="submit">댓글달기</button>    
</form>

*폼에서는 CSRF 공격을 방지하기 위해 {% csrf_token %} 작성한다. 폼을 통해 악의적인 스크립트 문장이 들어올 수 있다.

폼 태그를 사용하려면 method 지정과 action 지정이 필요하다.

method는 get과 post 중에 하나인데, 폼은 데이터를 불러오는게 아니라 저장하는 역할을 하므로 post를 사용해야한다.

action은 입력할 데이터를 받을 웹페이지를 지정하는데 현재페이지인 경우 공백을 둔다.

input은 사용자가 데이터를 입력하는 공간을 만들어준다. 

name은 어떤 데이터인지 명시하고, view에서 데이터를 전달하는 매개변수로도 쓰인다.

button은 말그대로 입력을 완료하고 제출할 수 있도록 버튼을 만들어준다.

submit은 버튼을 제출 형태로 사용하도록 하기 위함이다.

if request.method == "POST":

    username = request.POST.get("username")
    content = request.POST.get("content")
    Comment.objects.create(
        article=article_id,
        username=username,
        content=content,
    )
 
    return HttpResponseRedirect("/{}/".format(article_id))

GET 방식은 비어있는 폼 양식을 불러오는 역할을 하는데, 아직은 쓰이지 않으므로 생략했다.

view에서는 템플릿을 통해 입력받은 데이터를 데이터베이스에 저장하는 역할을 하므로 POST 방식 사용한다.

request.POST는 웹사이트에서 사용자가 입력하고 제출된 데이터를 갖고 있다.

request.POST.get는 조건에 맞는 값을 하나 가져오는 쿼리로서 username과 content 값을 호출한다. 

이를 각각 username과 content 변수에 담는다.

Comment.objects.create는 Comment 클래스에 새로운 인스턴스를 추가하는 것이다.

Comment 클래스에는 3개의 필드(article, username, content)가 포함되어 있으므로 순서대로 값을 지정한다.

article의 경우에는 url을 통해서 받은 게시글의 id 값이 입력된다. 

HttpResponseRedirect 메소드는 화면을 자동으로 새로고침 해주어 데이터베이스의 변화를 즉각 반영한다. 

*Comment 클래스의 인스턴스를 만들 때 주의할 점 - 모든 필드에 데이터 값들이 들어가야한다.