본문 바로가기
[스파르타 코딩클럽]/비개발자를 위한, 웹개발 종합반

화성땅 공동구매 -POST-

by 수민띠 2023. 2. 26.

주문 기록 API 만들기(POST)

※) 저장하기 기능과 불러오기 기능을 만들 때는 저장하기를 먼저 만들자

데이터가 없는 상태에서 불러오기를 하면 잘 구현됐는지 알 수 없기 때문

 

데이터 명세

요청 정보: URL = /mars, 요청방식 = POST

클라(fetch) -> 서버(flask) : name(이름), address(주소), size(평수)

서버(flask) -> 클라(fetch) : 메시지 ex) 저장 완료

 

클라이언트와 서버 연결확인하기

버튼을 눌러 서버에 요청을 보내고, 응답이 오면 연결 완료

 

서버만들기

step1. name, address, size 정보를 받았다고 가정하고 코드 짜기

step2. 딕셔너리 형태로 DB에 저장

step3.클라이언트에게 보낼 메시지 작성

더보기

 

from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
from pymongo import MongoClient
client = MongoClient('몽고DB주소')
db = client.dbsparta

@app.route('/')
def home():
    return render_template('index.html')

@app.route("/mars", methods=["POST"])
def mars_post():
    name_receive = request.form['name_give']
    address_receive = request.form['address_give']
    size_receive = request.form['size_give']

    doc = {
           'name': name_receive,
           'addres': address_receive,
           'size':size_receive
           }
    db.mars.insert_one(doc)
    return jsonify({'msg':'저장 완료!'})

@app.route("/mars", methods=["GET"])
def mars_get():
    return jsonify({'msg':'GET 연결 완료!'})

if __name__ == '__main__':
    app.run('0.0.0.0', port=5000, debug=True)

 

클라이언트 만들기

step1. 서버에 요청하는 버튼 찾기 

step2. 서버로 보낼 데이터(name, address, size) 준비해서 formData에 넣기

더보기

유저가 입력한 값 가져와서 변수에 담기  ( input태그 포인트 아웃)

ex) let name = $('#name').val();

step3. 자연스러움을 위한 새로고침 코드 넣기

window.location.reload();
더보기 
 function save_order() {
      let name = $('#name').val();
      let address = $('#address').val();
      let size = $('#size').val();


      let formData = new FormData();
      formData.append("name_give", name);   
      formData.append("address_give", address);
      formData.append("size_give", size);

      fetch('/mars', { method: "POST", body: formData }).then((res) => res.json()).then((data) => {
        alert(data["msg"]);
        window.location.reload();
      });
    }

 

전체코드 (index.html)

더보기 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
    crossorigin="anonymous"></script>

  <link href="https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&display=swap" rel="stylesheet" />

  <title>선착순 공동구매</title>
  <style>
    * {
      font-family: "Gowun Batang", serif;
      color: white;
    }

    body {
      background-image: linear-gradient(0deg,
          rgba(0, 0, 0, 0.5),
          rgba(0, 0, 0, 0.5)),
        url("https://cdn.aitimes.com/news/photo/202010/132592_129694_3139.jpg");
      background-position: center;
      background-size: cover;
    }

    h1 {
      font-weight: bold;
    }

    .order {
      width: 500px;
      margin: 60px auto 0px auto;
      padding-bottom: 60px;
    }

    .mybtn {
      width: 100%;
    }

    .order>table {
      margin: 40px 0;
      font-size: 18px;
    }

    option {
      color: black;
    }
  </style>
  <script>
    $(document).ready(function () {
      show_order();
    });
    function show_order() {
      fetch('/mars').then((res) => res.json()).then((data) => {
        console.log(data)
        alert(data['msg'])
      })
    }
    function save_order() {
      let name = $('#name').val();
      let address = $('#address').val();
      let size = $('#size').val();


      let formData = new FormData();
      formData.append("name_give", name);   
      formData.append("address_give", address);
      formData.append("size_give", size);

      fetch('/mars', { method: "POST", body: formData }).then((res) => res.json()).then((data) => {
        alert(data["msg"]);
        window.location.reload();
      });
    }
  </script>
</head>

<body>
  <div class="mask"></div>
  <div class="order">
    <h1>화성에 땅 사놓기!</h1>
    <h3>가격: 평 당 500원</h3>
    <p>
      화성에 땅을 사둘 수 있다고?<br />
      앞으로 백년 간 오지 않을 기회. 화성에서 즐기는 노후!
    </p>
    <div class="order-info">
      <div class="input-group mb-3">
        <span class="input-group-text">이름</span>
        <input id="name" type="text" class="form-control" />
      </div>
      <div class="input-group mb-3">
        <span class="input-group-text">주소</span>
        <input id="address" type="text" class="form-control" />
      </div>
      <div class="input-group mb-3">
        <label class="input-group-text" for="size">평수</label>
        <select class="form-select" id="size">
          <option selected>-- 주문 평수 --</option>
          <option value="10평">10평</option>
          <option value="20평">20평</option>
          <option value="30평">30평</option>
          <option value="40평">40평</option>
          <option value="50평">50평</option>
        </select>
      </div>
      <button onclick="save_order()" type="button" class="btn btn-warning mybtn">
        주문하기
      </button>
    </div>
    <table class="table">
      <thead>
        <tr>
          <th scope="col">이름</th>
          <th scope="col">주소</th>
          <th scope="col">평수</th>
        </tr>
      </thead>
      <tbody id="order-box">
        <tr>
          <td>홍길동</td>
          <td>서울시 용산구</td>
          <td>20평</td>
        </tr>
        <tr>
          <td>임꺽정</td>
          <td>부산시 동구</td>
          <td>10평</td>
        </tr>
        <tr>
          <td>세종대왕</td>
          <td>세종시 대왕구</td>
          <td>30평</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>

동작 확인

form에 입력한 데이터가 DB에 잘 들어갔는지 확인

'[스파르타 코딩클럽] > 비개발자를 위한, 웹개발 종합반' 카테고리의 다른 글

스파르타피디아 - meta크롤링/조각 기능/세팅 -  (0) 2023.02.26
화성땅 공동구매 -GET-  (0) 2023.02.26
화성땅 공동구매 -세팅/뼈대 준비-  (1) 2023.02.26
서버 만들기/Flask/GET/POST  (0) 2023.02.26
파이썬 내장 함수 strip  (0) 2023.02.26

관련글

티스토리툴바