A Developing Developer

웹개발 종합반 (프로그래밍 실무, 풀스택) 39회차 - 화성땅 공동구매 (POST, GET) 본문

내일배움캠프 4기/[왕초보] 비개발자를 위한, 웹개발 종합반 (프로그래밍 실무, 풀스택)

웹개발 종합반 (프로그래밍 실무, 풀스택) 39회차 - 화성땅 공동구매 (POST, GET)

H-JJOO 2022. 10. 21. 15:56

화성땅 공동구매 완성 페이지

Python 언어로 Flask 프레임워크를 사용해서 mongoDB를 활용해 주문을 입력하고(DB저장), 입력한 값을 화면에 불러오는 웹페이지를 만들어 보겠다.

 

웹페이지를 만들때 핵심은 서버[flask](app.py), 클라이언트[ajax](index.html)를 구성을 하는 것이다.

 

- 서버 (app.py)

from pymongo import MongoClient

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

from flask import Flask, render_template, request, jsonify

app = Flask(__name__)

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

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

    doc = {
        'name':name_receive,
        'address':address_receive,
        'size':size_receive
    }
    db.mars.insert_one(doc) #db 에 저장

    return jsonify({'msg': '주문 완료'})

@app.route("/mars", methods = ["GET"])
def web_mars_get():
    order_list = list(db.mars.find({}, {'_id': False})) #db 에서 꺼내오기
    return jsonify({'orders': order_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-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;
            text-align: center;
        }

        .mybtn {
            width: 100%;
        }

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

        option {
            color: black;
        }
    </style>
    <script>
        $(document).ready(function () {
            show_order();
        });
        function show_order() {
            $.ajax({
                type: 'GET',
                url: '/mars',
                data: {},
                success: function (response) {
                    let rows = response['orders']
                    for (let i = 0; i < rows.length; i++) {
                        let name = rows[i]['name']
                        let address = rows[i]['address']
                        let size = rows[i]['size']

                        let price = size.split('평')[0] * 500
                        // split() -> size 문자열을 () 안의 문자열로 나눈다

                        let temp_html = `<tr>
                                            <td>${name}</td>
                                            <td>${address}</td>
                                            <td>${size}</td>
                                            <td>${price} 원</td>
                                        </tr>`

                        $('#order_box').append(temp_html)



                    }
                }
            });
        }

        function save_order() {
            let name = $('#name').val()
            let address = $('#address').val()
            let size = $('#size').val()

            $.ajax({
                type: 'POST',
                url: '/mars',
                data: { name_give: name, address_give: address, size_give: size},
                success: function (response) {
                    alert(response['msg'])
                    window.location.reload()
                }
            });
        }
    </script>
</head>
<body>
<div class="mask"></div>
<div class="order">
    <h1>화성에 땅 사놓기!</h1>
    <h3>가격: 평 당 500원</h3>
    <p>
        <br>화성에 땅을 사둘 수 있다고?<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>
            <th scope="col">금액</th>
        </tr>
        </thead>
        <tbody id="order_box">
        </tbody>
    </table>
</div>
</body>
</html>

 

=================================================================================

스파르타코딩클럽_웹개발_종합반(강의자료)

=================================================================================

 

10월 15일 카카오 데이터센터(?)에 화재가 발생해서 카카오톡은 당연하고 카카오관련 서비스가 먹통이 되어버렸다.

 

뭐,,, 카카오톡이야 메세지 대체하면 되고, 카카오맵 안보면 되는데, 티스토리... 개발일지 써야하는 블로그가 맛이 가버렸다...

 

카카오톡이나 다른 서비스는 나름 하루 이틀 뒤에 정상작동 되었는데, 티스토리는 웹부분이 모바일로 넘어가게 세팅해둔거 같았다.

 

덕분에 개발일지를 못썼고(핑계~) 늦었지만 오늘부터 다시 시작하고 있다.

 

아직 사전캠프가 다음주까지 시간있으니까, 차근차근 복습하면서 개발일지를 작성해야겠다.

 

+ 화재가 잘 발생하는 계절이 왔다. 집도 건조해서 정전기가 일어나고 아주 스트레스다.

'내일배움캠프 4기 > [왕초보] 비개발자를 위한, 웹개발 종합반 (프로그래밍 실무, 풀스택)' 카테고리의 다른 글

웹개발 종합반 (프로그래밍 실무, 풀스택) 39회차 - 버킷리스트  (0) 2022.10.25
웹개발 종합반 (프로그래밍 실무, 풀스택) 39회차 - 스파르타피디아(내 생의 최고의 영화들)  (0) 2022.10.24
웹개발 종합반 (프로그래밍 실무, 풀스택) 39회차 - Flask  (0) 2022.10.14
웹개발 종합반 (프로그래밍 실무, 풀스택) 39회차 - DB(mongoDB)  (0) 2022.10.14
웹개발 종합반 (프로그래밍 실무, 풀스택) 39회차 - Pythom 패키지  (0) 2022.10.12
'내일배움캠프 4기/[왕초보] 비개발자를 위한, 웹개발 종합반 (프로그래밍 실무, 풀스택)' Related Articles more