sparta coding club .kr

코딩 스파랜드 2021년8월6일

김영수 2021. 8. 6. 11:15

1주차 숙제완성

홈쇼핑 완성하기

app.py-python file

 

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():
sample_receive = request.form['sample_give']
print(sample_receive)
return jsonify({'msg': '이 요청은 POST!'})


# 주문 목록보기(Read) API
@app.route('/order', methods=['GET'])
def view_orders():
sample_receive = request.args.get('sample_give')
print(sample_receive)
return jsonify({'msg': '이 요청은 GET!'})


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

 

index.html 파일은 2주차 숙제내용 그대로 사용한다.

index.html

<!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/css?family=Nanum+Gothic:400" rel="stylesheet">

 <style>
 * {
@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic:400');
 }

.item-img {
width: 600px;
 height: 300px;

 background-image: url("https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2F1KBMh%2FbtrapFe4799%2FAAAAAAAAAAAAAAAAAAAAAMmeJ8FOjM9aKH2vEDRBCMd_xXjAWQ8hJVPoPty-A1z3%2Fimg.jpg%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3DJSc6oHeKVkZPHsQPvOrh4yp2ZIc%253D");
 background-position: center;
 background-size: cover;
 }

.price {
font-size: 20px;
 }

.item-desc {
width: 600px;
 margin-top: 20px;
 margin-bottom: 20px;
 }

.item-order {
width: 600px;
 }

.btn-order {
margin: auto;
 width: 100px;

 display: block;
 }

.wrap {
width: 600px;
 margin: auto;
 }

.rate {
color: blue;
 }
</style>

 <script>
 $(document).ready(function () {
get_rate();
 });

 function get_rate(){
$.ajax({
type: "GET",
 url: "http://spartacodingclub.shop/sparta_api/rate",
 data: {},
 success: function (response) {
let now_rate = response['rate'];
 $('#now-rate').text(now_rate);
 }
})
}

function order() {
alert('주문이 완료되었습니다!');
 }
</script>
</head>

<body>
<div class="wrap">
 <div class="item-img"></div>
 <div class="item-desc">
 <h3>블루투스 스포츠형 방수 이어폰 <span class="price">가격:50,000원/개</span></h3>
 <p>수영하면서도 음악을 즐길 수 있는 방수 이어폰입니다!</p>
 <P>기종:SPA-EX100</P>
 <P>방수등급:IPX7</P>
 <a href="http://siarrays.com/"><h4><u>SIARRAYS</u></h4></a>
 <P>제조국:CHINA</P>
 <P>비디에쓰하이텍 기술제휴 합작품</P>
 <a href="https://blog.naver.com/bdshi-tec/222132631044"><h5><u>비디에쓰 하이텍</u></h5></a>
 <p class="rate">달러-원 환율: <span id="now-rate">1219.15</span></p>
 </div>
 <div class="item-order">
 <div class="input-group mb-3">
 <div class="input-group-prepend">
 <span class="input-group-text">주문자이름</span>
 </div>
 <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
 </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">주소</span>
 </div>
 <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
 </div>
 <div class="input-group mb-3">
 <div class="input-group-prepend">
 <span class="input-group-text">전화번호</span>
 </div>
 <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
 </div>
 <button type="button" onclick="order()" class="btn btn-primary btn-order">주문하기</button>
 </div>
</div>
</body>

</html>

 

2주차 숙제내용에 근거하여 입력한 데이터를 mongo db에 넣고 주문한 데이터들을 클라이언트에 갖다 붙인다.

먼서 서버부터 시작해본다.

클라이언트 html 파일중 주문하기 버튼에는 order라는 함수가 들어있다.

<button type="button" onclick="order()" class="btn btn-primary btn-order">주문하기</button>클라이언트 html 파일중 주문하기 버튼에는 order라는 함수가 들어있다.

 

부트스트랩 Table(링크)를 이용하기 

https://getbootstrap.com/docs/4.4/content/tables/

 

Tables

Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap.

getbootstrap.com

example:

<table class="table">

   <thead>

      <tr>

         <th scope="col">#</th>

         <th scope="col">First</th>

         <th scope="col">Last</th>

         <th scope="col">Handle</th>

     </tr>

    </thead>

    <tbody>

      <tr>

        <th scope="row">1</th>

        <td>Mark</td>

        <td>Otto</td>

        <td>@mdo</td>

     </tr>

    <tr>

    <th scope="row">2</th>

      <td>Jacob</td>

      <td>Thornton</td>

      <td>@fat</td>

    </tr>

    <tr>

       <th scope="row">3</th>

       <td>Larry</td>

       <td>the Bird</td>

       <td>@twitter</td>

     </tr>

   </tbody>

</table>