-
21.09.18. 스파르타 내배단 4주차 개발일지개발일지 2021. 9. 18. 23:32
[Week I Learned]
*Notion
https://www.notion.so/4-682b2d244357441f8469b861562781fc
[스파르타코딩클럽] 웹개발 종합반 - 4주차
매 주차 강의노트 시작에 PDF파일을 올려두었어요!
www.notion.so
*Diary
https://heily-coding.tistory.com/17
21.09.17. 4-1~5강 (Flask 서버 만들기)
[폴더 만들기] - 통상적으로 flask 서버를 돌리는 파일 이름은 app.py라고 많이 지으니 웬만하면 통일 [Flask 프레임워크] - 프레임워크 안 쓰면 태양초 빻아서 고추장 만드는 격 *flask 시작 코드 from fl
heily-coding.tistory.com
https://heily-coding.tistory.com/18
21.09.17. 4-6~9강 (프로젝트1. 모두의 책 리뷰)
[기본 셋팅] File -> New Project -> \projects\bookreview -> OK Location에 \venv 잘 붙어있나 확인, 없으면 써주기 Base interpreter에 Python38 잘 들어왔나 확인 Create a main.py welcome script 체크 박스..
heily-coding.tistory.com
https://heily-coding.tistory.com/19
21.09.17. 4-10~15강 (프로젝트2. 나홀로 메모장)
[API 설계하기] - 모든 프로젝트를 하기 전에 해야할 일! - 어떤 기능이 필요하고, 그 기능들을 어떤 순서로 구현할 것인가 이미지 제목 링크 요약 코멘트 [meta 태그] og:something *크롤링 기본 코드 imp
heily-coding.tistory.com
[숙제]
*Bootstrap (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
*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_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.orders.insert_one(doc)
return jsonify({'msg': '주문이 완료되었습니다!'})
# 주문 목록보기(Read) API
@app.route('/order', methods=['GET'])
def view_orders():
orders = list(db.orders.find({}, {'_id': False}))
return jsonify({'result': 'success', 'orders': orders})
if __name__ == '__main__':
app.run('0.0.0.0', port=5000, debug=True)*index.html
<!doctype html>
<html lang="ko">
<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=Do+Hyeon&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Do Hyeon', sans-serif;
}
.myitem {
width: 500px;
height: 300px;
background-image: url("https://t1.daumcdn.net/liveboard/nts/5bcccfbd33da4865817b9c606b6b852e.JPG");
background-position: center;
background-size: cover;
}
.price {
font-size: 16px;
}
.desc {
width: 500px;
margin-top: 20px;
margin-bottom: 20px;
}
.order-box {
width: 500px;
margin-bottom: 40px;
}
.mybtn {
width: 100px;
margin: auto;
display: block;
}
.wrap {
margin: auto;
width: 500px;
}
.rate {
color: blue;
}
</style>
<script>
$(document).ready(function () {
$.ajax({
type: "GET",
url: "https://api.manana.kr/exchange/rate.json",
data: {},
success: function (response) {
let nowRate = response[1]['rate'];
$('#rate-box').text(nowRate);
}
})
order_listing();
});
function order_listing() {
// 주문목록 보기 API 연결
$.ajax({
type: "GET",
url: "/order",
data: {},
success: function (response) {
if (response["result"] == "success") {
let orders = response['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-box').append(temp_html)
}
};
}
})
}
function order() {
let name = $('#order-name').val();
let count = $('#order-count').val();
let address = $('#order-address').val();
let phone = $('#order-phone').val();
// 주문하기 API 연결
$.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();
}
})
}
</script>
</head>
<body>
<div class="wrap">
<div class="myitem"></div>
<div class="desc">
<h1>양초를 팝니다 <span class="price">가격:3,000원/개</span></h1>
<p>이 양초는 특별한 힘을 가지고 있습니다. 하나 두 개 켜 놓으면 또 다른 촛불을 찾을 수 있죠!</p>
<p class="rate">달러-원 환율: <span id="rate-box">1,000</span></p>
</div>
<div class="order-box">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-default">주문자이름</span>
</div>
<input id="order-name" 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 id="order-count" class="custom-select">
<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="inputGroup-sizing-default">주소</span>
</div>
<input id="order-address" 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" id="inputGroup-sizing-default">전화번호</span>
</div>
<input id="order-phone" type="text" class="form-control" aria-label="Default"
aria-describedby="inputGroup-sizing-default">
</div>
<button onclick="order()" type="button" class="btn btn-primary 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="orders-box">
</tbody>
</table>
</div>
</body>
</html>[평가]
*Keep
1. 복습, 복습!
2. 공부, 공부!
*Problem:
1. 코드 상으로 틀린 부분이 없어 보였는데도 구동이 되지 않았다.
2. index.html이 불러와지지 않았다.
3. consol.log(); .....라고 쓴다.
*Try:
1. 브라우저 새로고침, 파이참 재실행 등을 우선적으로 해보자.
2. index.html 파일은 templates 폴더 내에 만들어야 한다.
3. consol'e'.log(); 오타 주의!
4. temp_html 붙여줄 때 해당 태그에 id 값 주기
'개발일지' 카테고리의 다른 글
스파르타 힙한 취미 코딩 - 파이썬 혼자놀기 패키지 1일차 개발일지 (0) 2021.09.22 21.09.19. 스파르타 내배단 5주차 개발일지 (0) 2021.09.19 21.09.15. 스파르타 내배단 3주차 개발일지 (0) 2021.09.16 21.09.14. 스파르타 내배단 2주차 개발일지 (0) 2021.09.14 21.09.09. 스파르타 내배단 1주차 개발일지 (0) 2021.09.09
