https://getbootstrap.com/docs/4.1/getting-started/introduction/
위 사이트와 친해져야 한다. 별 것 아닌 스타일 문제로 씨름함.
app.py
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 = request.form['name']
amount = request.form['amount']
address = request.form['address']
phone_number = request.form['phone_number']
doc = {
'name': name,
'amount': amount,
'address': address,
'phone_number': phone_number
}
print(doc)
db.order.insert_one(doc)
return jsonify({'msg': '주문 완료'})
# 주문 목록보기(Read) API
@app.route('/order', methods=['GET'])
def view_orders():
orders = list(db.order.find({},{'_id':False}))
return jsonify({'orders': orders})
if __name__ == '__main__':
app.run('0.0.0.0', port=5000, debug=True)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">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">
<!-- 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>
<style>
* {
font-family: 'Gowun Dodum', sans-serif;
}
.item-area {
width: 700px;
margin: auto;
}
.item-image {
width: 600px;
margin: 30px auto 30px auto;
}
.item-info {
margin: 0 50px 15px 50px;
}
.item-headline {
font-size: 28px;
font-weight: bold;
margin-bottom: 20px;
}
.item-description {
font-size: 18px;
font-weight: normal;
margin-bottom: 30px;
}
.order-info {
height: 50px;
}
.input-box {
font-size: 15px;
width: 80%;
height: 40px;
float: right;
}
.order-button {
width: 100px;
margin: 0 auto 0 auto;
display: block;
}
.orders {
margin-top: 20px;
width: 600px;
}
</style>
<script>
$(document).ready(function () {
get_currency();
get_orders();
});
function get_currency() {
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/rate",
data: {},
success: function (response) {
let currency_info = '<p style="color: blue">달러-원 환율:' + response['rate'] + '원</p>';
$("#currency").append(currency_info);
}
})
}
function get_orders() {
$.ajax({
type: "GET",
url: "/order",
data: {},
success: function (response) {
let orders = response['orders']
console.log(orders.length)
for (let i = 0; i < orders.length; i++) {
let buyer_name = orders[i]['name']
let amount = orders[i]['amount']
let address = orders[i]['address']
let phone_number = orders[i]['phone_number']
temp_html = `<tr>
<td scope="row">${buyer_name}</td>
<td scope="row">${amount}</td>
<td scope="row">${address}</td>
<td scope="row">${phone_number}</td>
</tr>`
$('#order-list').append(temp_html)
}
}
})
}
function save_order() {
let buyer_name = $('#buyer-name').val()
let amount = $('#amount').val()
let address = $('#address').val()
let phone_number = $('#phone_number').val()
$.ajax({
type: "POST",
url: "/order",
data: {
'name': buyer_name,
'amount': amount,
'address': address,
'phone_number': phone_number
},
success: function (response) {
alert(response['msg']);
window.location.reload()
}
})
}
</script>
</head>
<body>
<div class="card mb-3 item-area">
<img class="card-img-top item-image"
src="https://www.seriouseats.com/thmb/EZaQnk1yjGYVIkASseEWqtFRHyc=/960x0/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/__opt__aboutcom__coeus__resources__content_migration__serious_eats__seriouseats.com__recipes__images__2015__05__Anova-Steak-Guide-Sous-Vide-Photos15-beauty-159b7038c56a4e7685b57f478ca3e4c8.jpg"
alt="Card image cap">
<div class="item-info">
<p class="item-headline">등심 스테이크 <text class="item-description">가격: 30,000원 / 200g</text></p>
<p class="item-description">육즙이 가득한 호주산 소고기를 정성껏 양념하여 오븐에 구워낸 등심 스테이크입니다. 올리브유와 후추, 마늘로 마리네이드하여 풍미를 더욱
살렸습니다.</p>
<div id="currency"></div>
<p class="item-headline">주문하기</p>
<p class="order-info">주문자 성함:
<input type="text" class="form-control input-box" id="buyer-name">
</p>
<p class="order-info">수량:
<select class="custom-select custom-select-lg mb-3 input-box" id="amount">
<option selected>수량을 선택하세요</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</p>
<p class="order-info">주소:
<input type="text" class="form-control input-box" id="address">
</p>
<p class="order-info">전화번호:
<input type="text" class="form-control input-box" id="phone_number">
</p>
<button type="button" class="btn btn-primary order-button" onclick="save_order()">주문하기</button>
<div class="orders">
<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-list">
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>