본문 바로가기
개발일지

나홀로 쇼핑몰(스파르타)

by crescent88 2022. 5. 14.

4주차 과제를 제출했다. 

뭔가 다른 점이 있는데 왜 다른건지 어떤부분이 다른건지 잘 모르겠다

하지만 일단 입력까지는 문제가 없다. 

 

거의 베끼는 식이었지만 많이 만들고 더 연습하다 보면 익숙해지고 이해 할 수 있지 않을까 기대해본다. 

 

조금 어려웠지만 그만큼 성취감이 느껴진다. 

수료하고나서 이제는 정말 무엇을 만들 수 있을지 기대된다. 

 

 

from flask import Flask, render_template, jsonify, request

app = Flask(__name__)

from pymongo import MongoClient
client = MongoClient('localhost', 27017)
db = client.dbhomework


## HTML 화면 보여주기
@app.route('/')
def homework():
    return render_template('index.html')


# 주문하기(POST) API
@app.route('/order', methods=['POST'])
def save_order():
    name_receive = request.form['name_give']
    count_receive = request.form['count_give']
    address_receive = request.form['address_give']
    phone_receive = request.form['phone_give']

    doc = {
        'name': name_receive,
        'count': count_receive,
        'address': address_receive,
        'phone': phone_receive
    }
    db.aloneshoping.insert_one(doc)

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


# 주문 목록보기(Read) API
@app.route('/order', methods=['GET'])
def view_orders():
    orders = list(db.aloneshoping.find({}, {'_id': False}))
    return jsonify({'all_orders':orders})


if __name__ == '__main__':
    app.run('0.0.0.0', port=5000, debug=True)
<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
            integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
            crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
            crossorigin="anonymous"></script>

    <title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
    <link href="https://fonts.googleapis.com/css2?family=Jua&family=Nanum+Pen+Script&family=Noto+Serif+KR:wght@200&display=swap" rel="stylesheet">
    <style>
        * {
            font-family: 'Jua', sans-serif;
        }
        .image {
            width: 400px;
            height: 250px;

            background-image: url("data:image/jpeg;base64,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");
            background-size: cover;
            background-position: center;

            margin: auto;
        }

        .wrap {
            margin: 10px auto;
            width: 400px;
            height: 800px;
        }

        .btn-primary {
            margin: auto;
            display: block;

        }

        .title {
            font-size: 25px;
            margin-top: 14px;
            font-weight: bold;

        }

        .comment {
            font-size: 14px;
        }

        .rate {
            color: blue;
        }

        .table {
            width: 400px;
            margin : auto;
        }
    </style>
    <script>
        $(document).ready(function () {
            q1()
            showorder()
        });

        function makeorder() {
            let name = $('#name').val()
            let count = $('#inputGroupSelect01').val()
            let address = $('#address').val()
            let phone = $('#phone').val()

            $.ajax({
                type: "POST",
                url: "/order",
                data: {name_give:name, count_give:count, address_give:address, phone_give:phone},
                success: function (response) {
                    alert(response["msg"]);
                    window.location.reload();
                }
            })
        }

            function showorder() {
                $.ajax({
                    type: "GET",
                    url: "/order",
                    data: {},
                    success: function (response) {
                        let orders = response['all_orders']
                        for (let i = 0; i < orders.length; i++) {
                            let name = orders[i]['name']
                            let count = orders[i]['count']
                            let address = orders[i]['address']
                            let phone = orders[i]['phone']

                            let temp_html = `
                                            <tr>
                                              <th scope="row">${name}</th>
                                              <td>${count}</td>
                                              <td>${address}</td>
                                              <td>${phone}</td>
                                            </tr>`
                            $('#orders').append(temp_html)
                        }
                    }
                })
            }


        function q1() {
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/rate",
                data: {},
                success: function (response) {
                    let rate = response['rate']
                    let temp_html = `<p>달러-원 환율: ${rate}</p>`
                    $('#rate').append(temp_html)

                }
            })
        }
    </script>

</head>

<body>
    <div class="wrap">
        <div class="image"></div>
        <p class="title">치실을 팝니다<span style="font-size:10px;">가격: 3,000원/개</span></p>
        <p class="comment">이 치실은 사실 특별한 힘을 가지고 있어요. 치실을 들고 이 사이에 끼우기만 성공하면 마치 스케일링을 받은것과 같은 효과가 일어납니다. 딸기향도 나요</p>
        <div onclick="q1()" class="rate" id="rate"></div>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text" id="basic-addon1">주문자 이름</span>
            </div>
            <input type="text" class="form-control" id="name" aria-describedby="basic-addon1">
        </div>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <label class="input-group-text" for="inputGroupSelect01">수량</label>
            </div>
            <select class="custom-select" id="inputGroupSelect01">
                <option selected>-- 수량을 선택하세요 --</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
        </div>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text" id="basic-addon1">주소</span>
            </div>
            <input type="text" class="form-control" id="address" aria-describedby="basic-addon1">
        </div>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text" id="basic-addon1">전화번호</span>
            </div>
            <input type="text" class="form-control" id="phone" aria-describedby="basic-addon1">
        </div>
        <button onclick="makeorder()" type="button" class="btn btn-primary">주문하기</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="orders">
      </tbody>
    </table>
</body>

</html>
저작자표시

'개발일지' 카테고리의 다른 글

앱개발 종합반 1주차 과제(자바스크립트)(스파르타)  (0) 2022.05.17
첫 웹서비스 개시!!!(스파르타)  (0) 2022.05.17
지니뮤직 크롤링  (0) 2022.05.11
실시간 환율(스파르타)  (0) 2022.05.09
단일품 판매 웹페이지(스파르타)  (0) 2022.05.05

관련글

티스토리툴바