[Django web app 생성] 4. django로 web application 생성 기능(form) 구현

✅ 목표
1. 파이썬을 활용해 사용자의 요청이 들어올 때마다  웹페이지를 찍어내는 공장을 만들자
2. 사용자로부터 투고를 받아 페이지를 생성하거나, 사용자마다 다른 페이지를 보여주는 개인화

 

* windows conda 가상환경에서 cmd와 vsc로 실행

4. Web Application form 기능 구현

1) 글쓰기(create) 기능 구현

(1) 글쓰기 페이지 링크 추가

HTMLTemplate의 html 코드에 <ul> 태그 아래 <li> 태그 아래 <a href> 태그를 넣어 create 페이지 링크 삽입

 

(2) 글 작성 양식 생성

create 클릭시 글을 작성하는 양식 페이지를 만들어보자.

<p> : 단락 생성

<input> : 사용자 입력 상자,
               - type="text" : 텍스트 입력 / "submit" : 제출 버튼 생성

               - name="title" : 여기서 입력한 내용을 title이라는 변수로 저장

               - placeholder="title" : 텍스트 입력란에 title이라는 회색 글씨 출력, 사용자 입력시 사라짐

<textarea> : 텍스트 입력 상자

<form> : 제출 버튼 클릭시 title과 body의 데이터를 원하는 경로로 전달

              - action : form 박스 내의 데이터를 보내는 경로

 

title란에는 CRUD를, body란에는 CRUD is ..라는 내용을 입력하고 submit 버튼을 클릭 시에는
경로가 [http://127.0.0.1:8000/create/?title=CRUD&body=CRUD+is+..]로 변경이 된다.

form 기능을 통해 title=CRUD, body = CRUD is.. 라는 내용이 잘 전달된 것으로 보인다.

network 확인 시 request method가 get 방식으로 되어있다.

2. request method란?

URL의 서로 다른 용도

 

위에 있는 URL은 브라우저가 서버로부터 데이터를 읽기 위한 (get하기 위한) URL이고

밑에 있는 URL은 브라우저가 서버에 있는 데이터를 변경하기 위한 URL이다.

그런데 밑에 있는 URL처럼 사용자가 접속하는 URL에 입력값이 노출된다면, 다른 사용자들이 방문할 때 마다 해당 웹페이지가 변경되게 된다.

따라서 이를 해결하기 위해 request method를 post 방식으로 사용해야한다.

 

3. request method에 따른 정보 공개

브라우저가 get 방식으로 접근을 한다면 django WAS에서 get 방식으로 업로드해놓은 것들만 보여줘야한다.

따라서 일반적인 방식으로는 get 방식으로 접근할 때 post 방식으로 업로드한 것은 보여주지 않는다.

위에서 작성한 코드는 사용자 입력란을 통해 받은 데이터를 form 기능을 통해 /create/로 전달할 때,

get method를 사용하기에 url에 입력값이 모두 드러나있다.(default가 get이다.)

 

따라서 입력 양식 링크 접근까지는 get 방식으로도 접근할 수 있게 만들어놓고,

해당 입력 제출 버튼 클릭 시 post 방식으로 업로드 되게 한다면 이런 노출을 막을 수 있다.

 

- post 방식으로의 접근했을 경우 django의 csrf라는 보안 체계에 걸려서 접속이 불가능하다.

  따라서 csrf_exempt라는 클래스에 create를 상속시켜 우회하게 한다.

- create에 접속하는 방식은 두가지다.

   첫째. index 페이지에서 create를 클릭하는 경우 : 이 경우의 접근 방식은 get이기에 입력 양식을 html 코드로 return

   둘째. submit 제출 클릭하는 경우 : form의 action에 의해 post 형태로 create에 접속한다. 이 때 csrf_exempt로 인해

   접속이 가능해진다.

- 이후 사용자가 입력한 title과 body를 request['POST']에서 받아와 변수에 저장하고 newTopic을 만들고 topic에 추가하여

  HTMLTemplate을 적용시키면 새로운 페이지를 만들 수 있다. 하지만 기존의 3번까지 존재하던 id와 똑같은 url로 새로운 

  페이지가 생성된다. 이를 방지하기 위해 topic의 id 처럼 newTopic에도 id값을 만들어 넣어주고, 한번 만들때마다 새로운

  id 값을 만들도록 nextID += 1을 넣어주자.

- 마지막으로 페이지를 만들고 submit 클릭 시 바로 상세 페이지로 이동하도록 redirect로 return 해주자.

  이렇게 완성한 create 기능을 사용해본다면, 한 페이지를 새로 만들 때마다 ~~/create/id/ 형태의 url로 잘 만들어진다.