항해99/사전 스터디
웹개발 종합반 - 5주차 - 01~06 [버킷리스트] 프로젝트 만들기
루딘
2022. 10. 13. 17:11
이번 주차는 지금까지 배운 내용에 대한 복습과 실제 서비스 배포를 진행해볼 것이다.
이번에 복습하면서 만들어갈 프로젝트는 바로 [버킷리스트 웹페이지] 이다
위 화면처럼 Todo 리스트들을 기록할 수 있고 완료버튼을 누르면 저렇게 양식이 바뀐다.
자 먼저 간단하게 프로젝트 세팅부터 해보자
저번 프로젝트와 동일하게 폴더와 파일을 구성해주고
flask, pymongo, dnspython << 이 세 개의 패키지를 설치해주자
그 다음은 기본 파일을 세팅해주자
아래 코드를 복사해주자!
app.py
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
@app.route('/')
def home():
return render_template('index.html')
@app.route("/bucket", methods=["POST"])
def bucket_post():
sample_receive = request.form['sample_give']
print(sample_receive)
return jsonify({'msg': 'POST(기록) 연결 완료!'})
@app.route("/bucket/done", methods=["POST"])
def bucket_done():
sample_receive = request.form['sample_give']
print(sample_receive)
return jsonify({'msg': 'POST(완료) 연결 완료!'})
@app.route("/bucket", methods=["GET"])
def bucket_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+Dodum&display=swap" rel="stylesheet">
<title>인생 버킷리스트</title>
<style>
* {
font-family: 'Gowun Dodum', sans-serif;
}
.mypic {
width: 100%;
height: 200px;
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1601024445121-e5b82f020549?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1189&q=80');
background-position: center;
background-size: cover;
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.mypic > h1 {
font-size: 30px;
}
.mybox {
width: 95%;
max-width: 700px;
padding: 20px;
box-shadow: 0px 0px 10px 0px lightblue;
margin: 20px auto;
}
.mybucket {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.mybucket > input {
width: 70%;
}
.mybox > li {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-bottom: 10px;
min-height: 48px;
}
.mybox > li > h2 {
max-width: 75%;
font-size: 20px;
font-weight: 500;
margin-right: auto;
margin-bottom: 0px;
}
.mybox > li > h2.done {
text-decoration:line-through
}
</style>
<script>
$(document).ready(function () {
show_bucket();
});
function show_bucket(){
$.ajax({
type: "GET",
url: "/bucket",
data: {},
success: function (response) {
alert(response["msg"])
}
});
}
function save_bucket(){
$.ajax({
type: "POST",
url: "/bucket",
data: {sample_give:'데이터전송'},
success: function (response) {
alert(response["msg"])
}
});
}
function done_bucket(num){
$.ajax({
type: "POST",
url: "/bucket/done",
data: {sample_give:'데이터전송'},
success: function (response) {
alert(response["msg"])
}
});
}
</script>
</head>
<body>
<div class="mypic">
<h1>나의 버킷리스트</h1>
</div>
<div class="mybox">
<div class="mybucket">
<input id="bucket" class="form-control" type="text" placeholder="이루고 싶은 것을 입력하세요">
<button onclick="save_bucket()" type="button" class="btn btn-outline-primary">기록하기</button>
</div>
</div>
<div class="mybox" id="bucket-list">
<li>
<h2>✅ 호주에서 스카이다이빙 하기</h2>
<button onclick="done_bucket(5)" type="button" class="btn btn-outline-primary">완료!</button>
</li>
<li>
<h2 class="done">✅ 호주에서 스카이다이빙 하기</h2>
</li>
<li>
<h2>✅ 호주에서 스카이다이빙 하기</h2>
<button type="button" class="btn btn-outline-primary">완료!</button>
</li>
</div>
</body>
</html>다음으로 기록하기 기능을 먼저 구현해보자!
app.py
from pymongo import MongoClient
client = MongoClient('mongodb+srv://test:sparta@cluster0.cctcpnr.mongodb.net/?retryWrites=true&w=majority')
db = client.dbsparta
@app.route("/bucket", methods=["POST"])
def bucket_post():
bucket_receive = request.form['bucket_give'] #클라이언트가 보낸 데이터
bucket_list = list(db.bucket.find({},{'_id':False})) #id만 제거하고 list화해서 저장
count = len(bucket_list)+1 #len()함수는 해당 리스트의 길이를 측정해줌
doc ={
'num':count,
'bucket':bucket_receive,
'done':0
}
db.bucket.insert_one(doc)
return jsonify({'msg': '등록 완료!'})index.html
function save_bucket(){
let bucket = $('#bucket').val(); //bucket의 value값 저장
$.ajax({
type: "POST",
url: "/bucket",
data: {bucket_give:bucket}, // bucket값 보내기
success: function (response) {
alert(response["msg"])
window.location.reload() // 새로고침
}
});
}
이렇게 된다면 간단하게 DB에 저장된다!
이번엔 DB에 저장된 데이터를 클라이언트 화면에 보여주자!
app.py
@app.route("/bucket", methods=["GET"])
def bucket_get():
bucket_list = list(db.bucket.find({},{'_id':False})) #서버의 데이터들을 id만 제거해서 저장
return jsonify({'buckets': bucket_list})index.html
function show_bucket(){
$('#bucket-list').empty(); //맨 처음 있던 리스트들 지우기
$.ajax({
type: "GET",
url: "/bucket",
data: {},
success: function (response) {
rows = response['buckets'] //받은 데이터들 중 buckets 만 저장 (까보면 오브젝트도 있어서 그럼)
for(i=0;i<rows.length;i++){
let bucket =rows[i]['bucket'];
let num = rows[i]['num'];
let done = rows[i]['done']
let tempHtml =''
if(done == 0){ //완료가 안되어있다면?
tempHtml = ` <li><h2>${bucket}</h2><button onclick="done_bucket(${num})" type="button" class="btn btn-outline-primary">완료!</button></li>`
}else{ //완료가 되어있다면?
tempHtml = `<li><h2 class="done">✅ ${bucket}</h2></li>`
}
$('#bucket-list').append(tempHtml); //버킷리스트 칸에 삽입!
}
}
});
}이런 식으로 하면 나의 DB에 있던 데이터들이 보여진다!
마지막으로
완료버튼 기능이다!
app.py
@app.route("/bucket/done", methods=["POST"])
def bucket_done():
num_receive = request.form['num_give'] //num_give를 받아서!
db.bucket.update_one({'num': int(num_receive)}, {'$set': {'done': 1}})
//받은 데이터가 string 형태이므로 int로바꿔준다! 그리고 num가 받아온 데이터와 일치하는 녀석의 done을 1로 바꾼다!
return jsonify({'msg': 'POST(완료) 연결 완료!'})index.html
function done_bucket(num){ //onclick(${num}) <<여기서 받아온 넘버를 넣는다
$.ajax({
type: "POST",
url: "/bucket/done",
data: {'num_give':num}, //버튼에 달린 넘버를 보낸다
success: function (response) {
alert(response["msg"])
window.location.reload()
}
});
}이렇게 한다면?
이렇게 완성된다
이제 실제로 내 웹페이지를 배포해보자!
배포를 하기에 앞서
필요한 준비를 먼저 하자!
1.filezilla 설치하기
https://filezilla-project.org/
2. 가비아(도메인 호스팅 업체) 가입하고 도메인사기
가비아에 가입 후
도메인 -> 도메인 검색 -> 원하는 도메인 검색 후 선택(.shop 추천 젤쌈...) ->신청하기 후 결제
My 가비아에 보면 내가 산 도메인이 등록된 것을 확인할 수 있다.
