[Django] #9 HTTP Form

클라이언트가 서버에게 데이터를 보내는 방법

 

HTML form

웹은 유저에게 데이터를 입력받는 여러가지 형식을 제공 

 

 

우리가 지금 집중할 것

form 의 속성 중 action 과 method 

 

유저가 입력한 데이터를 어디로(action) 어떤방식(method)으로 보낼지 결정하는 속성

 

 

action

- 데이터가 전송될 URL을 지정함

- 지정하지 않을 경우 현재 페이지의 URL로 데이터를 다시 전송

 

method

- 데이터를 전송하는 방식(HTTP

- HTML Form 은 Get 방식 또는 POST 방식으로만 전송가능

 

 

 

form 만들어주기

여기까지하면 변한게 아무것도 없다.

    <form action="#" method="#">
    </form>

아무것도 안줄때 빈칸으로 둬도 되고 # 적어도 됨

 

 

 

1 인풋 만들어주기

    <form action="" method="">
        <input type="text">
    </form>

 

 

2 레이블 만들어주기

    <form action="" method="">
        <label for="my-data">데이터 입력 : </label>
        <input type="text" id="my-data">
    </form>

input 의 id 를 label 과 일치시켜주는 이유는

핸드폰처럼 작은 화면일때는 저 네모박스 클릭하기 어려울 수도 잇으니깐

레이블만 클릭해도 커서가 네모박스 안으로 들어가도록 해주는 거다.

 

3. 전송 버튼 만들기

    <form action="" method="">

        <label for="my-data">데이터 입력 : </label>
        <input type="text" id="my-data">

        <button type="submit">전송</button>

    </form>

type ="submit" 이라는 건

form 안의 내용이 데이터를 전송하게 하는 html 기초문법이다.

그냥 외우자

 

전송버튼 누르면 데이터 사라지고 ? 링크로 들가게 된다

 

 

2-1?

type 속성에 따라 입력 동작 방식이 달라짐.

만약 속성을 지정하지 않으면 type=text가 기본으로 들어간다?

        <input type="date" id="my-data">

        <input type="password" id="my-data">

 

 

 

데이터 전송에서 핵심 속성은 name이다

name으로 서버에 데이터를 전달한다는 것!

서버는 name을 보고 데이터를 판단한다

 

input 의 name 속성

서버에서는 name 속성을 사용해서 값에 접근이 가능하다

name  속성이 key 값이 되고, 

 

 

        <label for="message">데이터 입력 : </label>
        <input type="text" id="message" name="message">

        <button type="submit">전송</button>

name 지정해준 다음에 label 이름과 input의 id 이름을 name과 일치시켜주기

데이터 입력한 다음에 전송 눌러보면

 

주소창에 message=킹갓디노 가 뜬다.

즉

name 속성이 있어야 데이터가 전송되는 것!!

name 해줘라

 

근데 화면상에서는 달라지는게 없지?

그 이유가 머냐면

form 은 데이터를 어디로, 어떤방식으로 전송할건지 명시를 해줘야 되는데

내가 지금 action 과 method 를 빈칸으로 남겨놨기 때문.

만약 빈칸일 경우는

내가 지금 들어왔던 URL로 데이터를 담아서 다시 보내기 때문이다

ㅇㅎ

 

---

http methods

 

종류 : get, post, put, delete...

이 중에서 form 은 get 과 post 만 사용한다.

메소드는 소문자로 적어도 되는데 그냥 대문자로 적는것을 권장. 명시적으로 보이기 위해서.

 

GET

- 특정한 자원을 조회하는데 사용함.

- 우리가 사용하는 대부분의 방식이다.

 

    <form action="" method="GET">

        <label for="message">데이터 입력 : </label>
        <input type="text" id="message" name="message">

        <button type="submit">전송</button>

    </form>

method 에 GET 입력

 

아까랑 똑같네

 

?message=킹갓디노

이러한 형식을 쿼리스트링(Query String Paramethers) 라고 한다.

 

아까랑 똑같은 이유는

원래 method 에 아무것도 없거나 알아볼 수 없다면 기본적으로 GET 방식이기 때문이다

 

? 뒤에 데이터가 위치하고, 이걸 쿼리스트링이라고 함.

key = value 형식이고 그 다음에 & 또 그다음 key=value 형식 이어서 데이터가 연결됨

 

---

이번엔 A 페이지에서 보낸 데이터를 서버가 받아서 B 페이지로 응답해주게 만들어보자

 

B페이지. data_catch 페이지 만들어주기

 

그러고나서 A 페이지에서 action 설정

action에 경로를 적어준다

 

throw 페이지에서 데이터를 입력한 다음에 전송을 누르면

 

catch 페이지로 이동하게 된다! 와웅

 

흐름 다시 체크

req - urls - view - template - view - response

 

데이터를 보여줄려면??

view 에서 데이터를 받아서 template 에서 보여주면 되겠지?

 

view 파일에서 catch 함수를 수정해준다.

def data_catch(request):
    message = request.GET.get("message")
    context = {"message": message}
    return render(request, 'data_catch.html', context)

뭔의미냐면

request.GET은 장고 문법 : GET 방식으로 요청이 들어온거를

my_dict["a"]
my_dict.get("a", default)

.get("message")는 파이썬 문법 :

a라는 키에 접근해서 value 를 가져와라는 뜻.

근데 왜 2번을 쓰냐면, key 가 없을 경우 디폴트 값을 설정할 수 있기 때문!

1번에서 key 가 없으면 에러발생함.

 

암튼 이렇게 input 받은 message 를 context에 담아서 전송해주고

 

다시 catch 파일에서 message 변수로 받아주기

    <h1>Data Catch</h1>
    <h3>Current Data</h3>
    <p>Current Data is: {{ message }} </p>

 

와웅! 받은 데이터가 표시된다

 

 

이렇게 html form 을 이용해서 클라이언트에서 데이터를 서버로 전송하고, 

서버에서 해당 데이터를 이용해서 template 을 만들 다음에 다시

클라이언트로 응답해주는 과정 완료!

 

---

재입력하고 싶을수도 있으니까 하이퍼링크 걸어주기

 

 catch 파일에다가 코드 추가

    <a href="/data-throw/">데이터 또 입력하러 가기!!!</a>

저 링크를 누르면 다시 데이터를 입력하는 throw 페이지로 넘어갈 수 있다.

 

---

요청이 처리되는 과정

 

1. 장고 내에서 request 가 들어옴

2. 장고는 이 요청을 http request 라는 클래스의 인스턴스로 만들음.

3. 이 인스턴스의 urls를 보고 어디 view 로 보낼까 선택

4. 특정한 view 를 찾았다면

5. 인스턴스를 view 함수의 첫번째 인자로 전달함. 그게 request 인자

6. 그걸 view가 처리한 다음에

7. HttpResponse 객체를 클라이언트에게 전달