[웹개발 종합반 5주차] 프로젝트, 버킷리스트

🔖오늘 배울 것

모든 사람들이 볼 수 있도록 배포하는 일

 

🔎Filezilla 설치

클라우드 환경에 무언가를 올리려면 파일을 옮겨야한다.

그러므로 파일을 보낼 수 있는 프로그램 필요!

https://filezilla-project.org/download.php

 

🔎도메인 구매하기

https://www.gabia.com

웹을 넘어 클라우드로. 가비아

---

🔖POST연습하기(input값 db Create)

1. 요청 정보 : URL= /bucket, 요청 방식 = POST
2. 클라(ajax) → 서버(flask) : bucket
3. 서버(flask) → 클라(ajax) : 메시지를 보냄 (기록 완료!)

단! 서버에서 한 가지 일을 더 해야 함 → 번호를 만들어 함께 넣어주는 것. 그래야 업데이트 가능하도록!!

 

🔎index.html

function save_bucket() {
    let bucket = $('#bucket').val()

    $.ajax({
        type: "POST",
        url: "/bucket",
        data: {bucket_give: bucket},
        success: function (response) {
            alert(response["msg"])
        }
    });
}

 

🔎app.py

버킷리스트 numbering : count

버킷리스트 완료 1, 미완료 0 : done

@app.route("/bucket", methods=["POST"])
def bucket_post():
    bucket_receive = request.form['bucket_give']

    bucket_list = list(db.bucket.find({}, {'_id': False}))
    count = len(bucket_list) + 1

    doc = {
        'num':count,
        'bucket':bucket_receive,
        'done':0
    }
    db.bucket.insert_one(doc)
    
    return jsonify({'msg': 'POST(기록) 연결 완료!'})

 

---

🔖GET 연습하기(db 값 Read해서 html에 보여주기)

1. 요청 정보 : URL= /bucket, 요청 방식 = GET
2. 클라(ajax) → 서버(flask) : (없음)
3. 서버(flask) → 클라(ajax) : 전체 버킷리스트를 보여주기

 

🔎app.py

@app.route("/bucket", methods=["GET"])
def bucket_get():
    bucket_list = list(db.bucket.find({}, {'_id': False}))

    return jsonify({'buckets': bucket_list})

 

🔎index.html

		$(document).ready(function () {
            show_bucket();
        });

        function show_bucket() {
            $.ajax({
                type: "GET",
                url: "/bucket",
                data: {},
                success: function (response) {
                    let rows = response['buckets']

                    for(let i = 0; i < rows.length; i++){
                        let bucket = rows[i]['bucket']
                        let num = rows[i]['num']
                        let done = rows[i]['done']

                        let temp_html = ``
                        if(done == 0){
                            temp_html = `<li>
                                            <h2>✅ ${bucket}</h2>
                                            <button onclick="done_bucket(${num})" type="button" class="btn btn-outline-primary">완료!</button>
                                        </li>`
                        }
                        else {
                            temp_html = `<li>
                                            <h2 class="done">✅ ${bucket}</h2>
                                        </li>`
                        }

                        $('#bucket-list').append(temp_html)
                    }

                    alert(response["msg"])
                }
            });
        }

 

---

🔖POST연습하기(input값 db Create)

1. 요청 정보 : URL= /bucket/done, 요청 방식 = POST
2. 클라(ajax) → 서버(flask) : num (버킷 넘버)
3. 서버(flask) → 클라(ajax) : 메시지를 보냄 (버킷 완료!)

 

🔎index.html

num값을 줘야 서버에서 어떤 값의 done값을 1로 변경할지 알 수 있음!

function done_bucket(num) {
    $.ajax({
        type: "POST",
        url: "/bucket/done",
        data: {num_give: num},
        success: function (response) {
            alert(response["msg"])
            window.location.reload()
        }
    });
}

 

🔎DB로 데이터 업데이트 할 때  주의사항

db값의 num은 Integer(정수)이지만 서버가 클라이언트에서 받아올 때는 String(문자)로 인식함!

그래서 형변환을 해줘야 함. 이점을 유의 해야함!!

db.bucket.update_one({'num':int(num_receive)},{'$set':{'done':1}})

 

🔎app.py

@app.route("/bucket/done", methods=["POST"])
def bucket_done():
    num_receive = request.form['num_give']
    db.bucket.update_one({'num':int(num_receive)},{'$set':{'done':1}})

    return jsonify({'msg': '버킷 완료!'})

---

☀️ 느낀점

무언가를 구현할 때, 무슨 값을 주고 받아야 할지가 중요한 것 같다.

또한 주고받을때 그 값의 형태(문자인지, 정수인지) 등의 차이로 오류가 발생할 수 있다는 걸 깨달았다. 오늘 배운 내용을 바탕으로 팬명록에도 삭제하면 팬명록이 없어지도록 구현하는 걸 시도해 봐야 겠다!