Django - HTTP Form

 

Form과 Input을 활용하여 데이터 송수신하기

 

Django에서는 클라이언트가 입력한 데이터를 서버에 전송하고, 이를 처리하여 다시 클라이언트에 보여줄 수 있음

 

 

 

Form과 Input 요소를 활용해 데이터를 송수신하는 방법

 

urls.py에 URL경로 추가

urls.py

 

views.py에 View 함수 추가

views.py

 

templates/data_throw.html 생성

templates/data_throw.html

 

 

 

Form 태그 속성

• action: 데이터를 보낼 URL 경로 설정
• method: 데이터를 전송할 HTTP 메서드
  여기서는 GET 방식 사용

 

templates/data_catch.html 생성

templages/data_catch.html

 

• {{ data }}
  서버에서 전달된 데이터를 템플릿에 표시

 

/data-throw/

 

데이터 입력 후 전송

 

/data-catch/

하이퍼링크 참조를 통해 이동한 /data-throw/

 

 

요청이 들어오면 Django는 HttpRequest객체 생성 →  

urls에서 지정한 view 함수의 첫번째 인자로 전달 → 

view는 처리 후, HttpResponse 전달

 

 

HTML Form과 Input의 핵심 속성

 

input 태그

사용자의 입력을 받는 요소

• type : 입력 방식 설정(text, email, password 등 - 기본 text)
• name : 서버로 전송할 데이터의 key를 정의 (핵심 속성 ! 서버는 name을 보고 데이터를 판단)
  name 속성의 값 : key, 사용자가 입력한 값 : value

 

form 태그

데이터를 입력받고 전송하는 역할

• action : 데이터를 전송할 URL (지정하지 않을 경우 현재 페이지의 URL로 데이터를 전송)
• method: 데이터를 전송하는 방식(HTTP request mothod)를 지정
  →HTML Form은 GET방식 또는 POST방식으로만 전송 가능

 

label 태그

특성 input 요소와 연결되어 입력 필드의 설명 역할

• 독립적인 태그 : 특정 Input 태그를 설명하지만, <input> 태그나 <form> 태그 안에 있어야 하는 것은 아님
• 역할 :  사용자가 입력해야 할 정보에 대한 설명을 제공
• for 속성 : 특정 input 태그와 연결하기 위해 사용
  → label의 for 속성과 input의 id 속성을 동일하게 설정하면, label 클릭 시 input이 선택됨

 

 

HTTP Methods

HTTP에서 수행할 작업

 

 

GET

• 데이터를 URL의 쿼리스트링(Query String) 형태로 전송 (Query String Parameters 사용)

• ?key=value 구조로 전송되며, 브라우저 주소창에 노출됨

• 데이터 조회 시 주로 사용

• method를 명시하지 않거나 존재하지 않는 method의 경우 기본적으로 GET으로 처리

POST

• 데이터를 HTTP 본문에 담아 전송

• 주소창에 노출되지 않으며, 주로 보안이 중요한 데이터 전송에 사용

 

HTTP

하이퍼텍스트 전송 프로토콜(Hyper Text Transfer Protocol)

여러가지 리소스를 보내고 받을 때 사용하는 프로토콜(통신규약)중 하나

request ↔ response 통신

 

 

 

쿼리스트링(Query String)

 

GET 방식으로 데이터를 전송하면, URL에 데이터가 포함

http://127.0.0.1:8000/data-catch/?message=Hello&user=SUBIN&age=26

 

• ?: 쿼리스트링의 시작

• key=value: 데이터의 쌍

• &: 여러 데이터 쌍 연결

 

 

 

request / QueryDict

request 객체

Django에서 클라이언트의 HTTP 요청 정보를 담고 있는 객체 (WSGIRequest클래스의 인스턴스)

request.GET

QueryDict 객체, 쿼리스트링 데이터를 포함

QueryDict

딕셔너리와 비슷하지만(Dict 상속 클래스), 동일한 키에 여러 값을 지원

request.GET, request.POST 속성 모두 QueryDict의 인스턴스

 

 

---

 

 

- Django에서는 Form과 Input 태그를 활용해 데이터를 클라이언트에서 서버로 전송 가능

- URL 경로와 View 함수를 통해 데이터를 처리하고, 템플릿에 결과를 표시

- GET 방식에서는 데이터를 쿼리스트링으로 전송, 서버는 request.GET을 통해 이를 처리함

- 페이지 간 연결은 <a> 태그로 구현 가능