[항해99:사전교육]<소스코드>화성땅구매

worldint 2022. 11. 18. 21:19

app.py(서버)

from flask import Flask, render_template, jsonify, request
from pymongo import MongoClient #패키지 임포트

client = MongoClient("mongodb+srv://test:sparta@cluster0.jmcjmfs.mongodb.net/?retryWrites=true&w=majority")
db = client.dbsparta.mars

app = Flask(__name__)

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

@app.route('/mars', methods=['POST'])
def web_mars_post():
    name_receive = request.form['name_give']
    addr_receive = request.form['addr_give']
    size_receive = request.form['size_give']
    print(name_receive,addr_receive,size_receive)

    doc = {
        'name':name_receive,
        'addr':addr_receive,
        'size':size_receive
    }
    db.insert_one(doc)
    return jsonify({'msg':'post연결완료'})

@app.route('/mars',methods=['GET'])
def web_mars_get():
    buyer_list = list(db.find({},{'_id':False}))

    return jsonify({'msg':'get연결완료!','buyer_list':buyer_list})





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

index.html(클라이언트)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatibla" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi"
          crossorigin="anonymous">
    <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-color:black;
      background-image:linear-gradient(0deg,rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),url('https://cdn.aitimes.com/news/photo/202010/132592_129694_3139.jpg');
      background-size:cover;
      background-position:center;

    }
    .order{
      width:500px;
      margin:20px auto 0 auto;
    }
    .mybtn {
      width:500px;
    }
    h1 {
      font-weight:bold;
    }
    option {
      color:black;
    }
  </style>
  <script>
    $(document).ready(function(){
        listing()
    })
    function save_order(){
      let name = $('#name').val()
      let addr = $('#address').val()
      let size = $('#size').val()
      $.ajax({
        type:'POST',
        url:'/mars',
        data:{'name_give':name,'addr_give':addr,'size_give':size},
        success:function(response){
          alert(response['msg'])
        }
      })
      window.location.reload()
    }
    function listing(){
      $('#list').empty()
      $.ajax({
        type:'GET',
        url:'/mars',
        data:{},
        success:function(response){
          let rows = response['buyer_list']
          for(let i = 0;i < rows.length;++i){
            let name = rows[i]['name']
            let addr = rows[i]['addr']
            let size = rows[i]['size']
            let temp_html = `<tr>
                              <td>${name}</td>
                              <td>${addr}</td>
                              <td>${size}</td>
                            </tr>`
            $('#list').append(temp_html)
          }
        }
      })
    }
  </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="list">
      <tr>
        <td>홍길동</td>
        <td>서울시</td>
        <td>20평</td>
      </tr>
      <tr>
        <td>홍길동</td>
        <td>서울시</td>
        <td>20평</td>
      </tr>
      <tr>
        <td>홍길동</td>
        <td>서울시</td>
        <td>20평</td>
      </tr>
      </tbody>

    </table>
  </div>

</body>
</html>