AI웹 개발자 과정 공부 (팀스파르타)/Django (장고)

24.04.18_TIL (2) (Django HTTP form)

티아(tia) 2024. 4. 18. 19:57
728x90

 

 

++ 장고 공식 문서는 항상 확인하기 

https://docs.djangoproject.com/

 

 

++ 파이썬 가상환경 실행 끄려면 ctrl + c 누르면 꺼지고 터미널 화면이 돌아옴

 

 

1. Html Form - data throw

 

  • 웹에서 유저에게 데이터를 입력받는 여러가지 형식을 제공 - 버튼, 텍스트, 드랍다운, 선택 등
  • action 과 method 방식이 있다.
  • data_throw 파일을 만들어준다. - urls.py 에서 path경로 만들고, views.py에서 def 함수 만들고 html을 articles-templates에 만들어서 data throw 파일을 만들어줌

 

 

 

  •  form 안에 input을 넣으면 글자를 쓸 수 있는 칸이 나온다.

 

 

 

  •  라벨로 이름을 넣어주고, 버튼으로 전송버튼을 만들어준다.
  • input 의 타입을 text를 아니고 password로 하면 마스킹이 되어 보이지 않는다. (모든 것은 공식문서에!!)

 

 

 

 

 

  • 데이터를 입력하면 자꾸 submit 으로 가서 왜이런가 했더니... form 의 action을 정해줘버렸네... 빈칸으로 하면 데이터입력값이 보인다.

 

  •  데이터가 어디로 가는지 모르기 때문에 데이터의 action 값과 method 값을 주어야 데이터가 저장될 수 있다.

 

 

 

 

 

 

2. Html methods - GET

 

  • GET
    • 특정한 자원을 조회하는데 사용
    • 데이터를 서버로 전송할 때 **쿼리스트링 (Query String Parameters)**를 사용해서 전송 ⇒ URL에 데이터가 포함되어 전송된다.
  • 쿼리스트링(Query String Parameter)

 

  •  catch 파일을 만들어 준다. - throw의 파일을 받을 수 있게
{% extends 'base.html' %} 

{% block content %}
  <h1> data catch </h1>
  
  <div>
    <h2>Current Data</h2>
    <p>Current data is: ???</p>
</div>

{% endblock content %}

 

 

 

  •  throw의 form 코드를 수정해준다.
  • throw 에서 데이터를 전송을 누르면 catch로 잘 가는 것을 볼 수 있다.
{% extends 'base.html' %} 

{% block content %}
  <h1> data throw </h1>
    <form action="/data_catch/" method="GET">
      
      <label for = 'message'> 데이터 입력 </label>
      <input type = 'text' id = 'message' name='message'>

      <button type = "submit"> 전송 </button>
    
    </form>
{% endblock content %}

 

 

 

  •  throw에서 받은 데이터를 catch 에 보여주고 싶다!
  • views.py를 수정하여 context로 데이터를 넘겨서 보여주자
def data_catch(request):
  message = request.GET.get("message")
  context = {
      "message" : message,
		}
  return render(request, "data_catch.html", context)

 

  •  data_catch.html도 수정해준다.
{% extends 'base.html' %} 

{% block content %}
  <h1> data catch </h1>
  
  <div>
    <h2>Current Data</h2>
    <p>Current data is: {{ message }}</p>
</div>

{% endblock content %}

 

 

 

 

 

 

 

 

 

 

3. URL 의 <a> 태그, 페이지 끼리 연결하자.

 

  • 무한 굴레 가능
{% extends 'base.html' %} 

{% block content %}
  <h1> data catch </h1>
  
  <div>
    <h2>Current Data</h2>
    <p>Current data is: {{ message }}</p>
  </div>

  <a href = '/data_throw/'> 데이터 던지러 가기 </a> 

{% endblock content %}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

반응형