1.4주 차 진행을 하기 전에 원활한 진행을 위해 4개의 폴더를 만들어주었습니다.
bucket : "버킷리스트" 관련 코드를 작성
homework : "팬명록" 관련 코드를 작성
mars : "화성땅공동구매" 관련 코드를 작성
movie : "스파르피디아" 관련 코드를 작성
prac : "flask 연습 코드를 작성
2.Flask 시작하기 - 서버 만들기
prac 폴더에서 시작합니다. 가장 먼저 해야 할 것은 패키지를 설치하는 것인데요. 왼쪽 상단에 File - setting - Python interpreter 들어가서 +버튼을 클릭한 후 flask를 검색하여 패키지를 설치해 줍니다. Flask는 서버를 구동하는 데 편의를 제공해 주는 코드들의 모음이라고 합니다. 서버를 구동하는 데는 복잡한 과정이 있는데 Flask를 이용하면 어렵지 않게 서버를 구동할 수가 있습니다.
파일명 : app.ph 파일을 만들고 스파르타코딩클럽에서 제공해 주는 소스를 붙여 넣습니다.
관련 소스
from flask import Flask
app = Flask(__name__)
@app.route('/')
def home():
return 'This is Home!'
if __name__ == '__main__':
app.run('0.0.0.0',port=5000,debug=True)붙여 넣은 후 실행을 합니다. 그리고 브라우저를 실행한 뒤에 주소창에 localhost:5000을 입력하고 엔터키를 눌러줍니다. 그러면 화면에는 'This is my Home!'이라는 문구가 뜨는 것을 확인할 수가 있습니다.
실행 결과
스파르타 코딩클럽에서 제공해 주는 소스 내용 중에서 @app.route('/) 부분을 수정하면 URL을 나눌 수 있습니다.
관련 소스
from flask import Flask
app = Flask(__name__)
@app.route('/')
def home():
return 'This is home!'
@app.route('/mypage')
def mypage():
return 'This is mypage!'
if __name__ == '__main__':
app.run('0.0.0.0',port=5000,debug=True)실행 결과
3.Flask 시작하기 - HTML 파일 주기
폴더 내부에는 app.py뿐만 아니라 다른 파일들이 들어가야 하는 폴더를 만들어줘야 합니다. static 폴더와 templates 폴더인데요. static 폴더는 이미지나 css 파일을 넣어두는 폴더입니다. 그리고 templates 폴더는 html 파일을 넣어두는 곳입니다.
templates 폴더에 index.html 파일을 만들어줍니다. 그리고 스파르타코딩클럽에서 제공해 주는 소스를 붙여넣기합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>Document</title>
<script>
function hey(){
alert('안녕!')
}
</script>
</head>
<body>
<button onclick="hey()">나는 버튼!</button>
</body>
</html>그리고 app.py 파일에도 소스를 붙여 넣습니다.
from flask import Flask, render_template
app = Flask(__name__)
## URL 별로 함수명이 같거나,
## route('/') 등의 주소가 같으면 안됩니다.
@app.route('/')
def home():
return render_template('index.html')
if __name__ == '__main__':
app.run('0.0.0.0', port=5000, debug=True)실행 결과
4. GET, POST 요청 타입
GET → 통상적으로! 데이터 조회(Read)를 요청할 때
통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청할 때
스파르타코딩클럽에서 제공해 주는 Jquery 임포트 코드, GET 요청 API 코드를 html 파일에 <head>에 붙여넣기합니다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function hey() {
$.ajax({
type: "POST",
url: "/test",
data: {title_give: '봄날은간다'},
success: function (response) {
console.log(response['msg'])
}
})
}
</script>그리고 app.py 파일에도 스파르타코딩클럽에서 제공해 주는 GET 요청 확인 Ajax 코드를 붙여넣기 합니다.
$.ajax({
type: "GET",
url: "/test?title_give=봄날은간다",
data: {},
success: function(response){
console.log(response)
}
})실행 결과
post 방식도 같은 방식으로 붙여넣기해서 결과를 확인합니다.
app.py에 붙여넣기
@app.route('/test', methods=['POST'])
def test_post():
title_receive = request.form['title_give']
print(title_receive)
return jsonify({'result':'success', 'msg': '이 요청은 POST!'})index.html에 붙여넣기
$.ajax({
type: "POST",
url: "/test",
data: { title_give:'봄날은간다' },
success: function(response){
console.log(response)
}
})실행 결과
5. 예제를 통해 학습하기(화성 땅 공동구매 프로젝트 세팅)
처음에 만들었던 여러 개의 폴더 중 mars라는 이름을 가진 폴더에서 예제를 진행합니다. 우선해야 할 것은 하위 폴더와 파일을 만들어 주는 것입니다. static 폴더와 templates을 만들어주고 mars 폴더 하위에 app.py 파일을 만들어주고 templates 폴더 안에 index.html 파일을 만들어줍니다.
그리고 해야 할 것은 프로젝트에 패키지를 설치하는 것입니다. 패키지는 flask, pymongo, dnspython 3가지의 패키지를 설치해 줍니다.
그리고 app.py 와에 스파르타코딩클럽에서 제공해 주는 코드를 붙여넣기합니다.
app.py
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():
sample_receive = request.form['sample_give']
print(sample_receive)
return jsonify({'msg': 'POST 연결 완료!'})
@app.route("/mars", methods=["GET"])
def web_mars_get():
return jsonify({'msg': 'GET 연결 완료!'})
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;
}
.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) {
alert(response['msg'])
}
});
}
function save_order() {
$.ajax({
type: 'POST',
url: '/mars',
data: { sample_give:'데이터전송' },
success: function (response) {
alert(response['msg'])
}
});
}
</script>
</head>
<body>
<div class="mask"></div>
<div class="order">
<h1>화성에 땅 사놓기!</h1>
<h3>가격: 평 당 500원</h3>
<p>
화성에 땅을 사둘 수 있다고?<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>
</tr>
</thead>
<tbody>
<tr>
<td>홍길동</td>
<td>서울시 용산구</td>
<td>20평</td>
</tr>
<tr>
<td>임꺽정</td>
<td>부산시 동구</td>
<td>10평</td>
</tr>
<tr>
<td>세종대왕</td>
<td>세종시 대왕구</td>
<td>30평</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>실행 결과
기본 세팅이 마련되었습니다.
후기. 시간상의 문제인지 난이도의 문제인지는 모르겠지만 뼈대 코드를 너무 많이 제공해 주는 것이 아쉽습니다. 간단한 코드라도 반복해서 연습할 수 있으면 좋을 텐데 너무 쉽게 제공을 받아서 반복연습이 되지 않습니다.
'스파르타코딩클럽' 카테고리의 다른 글
| [스파르타코딩클럽] 비개발자를 위한, 웹개발 종합반 4주차 마무리 & 숙제 (0) | 2023.01.04 |
|---|---|
| [스파르타코딩클럽] 비개발자를 위한, 웹개발 종합반 4주 2일차 후기 (0) | 2023.01.04 |
| [스파르타코딩클럽] 비개발자를 위한, 웹개발 종합반 3주차 마무리 & 숙제 후기 (0) | 2023.01.03 |
| [스파르타코딩클럽] 비개발자를 위한, 웹개발 종합반 3주차 1일 후기 (0) | 2023.01.03 |
| [스파르타코딩클럽] 비개발자를 위한, 웹개발 종합반 2주차 마무리 & 숙제 (0) | 2023.01.02 |
댓글