웹개발 5주차 개발일지 (1) - 프로젝트 [버킷리스트]

◎ 버킷리스트 페이지 만들기

버킷리스트 페이지를 만들어보자.

뼈대코드는 코드스니펫을 이용한다.

 

---

● 기록하기 - POST

1. 요청 정보 : URL= /bucket        , 요청 방식 = POST

2. 클라(ajax) → 서버(flask) : bucket

3. 서버(flack) → 클라(ajax) : 메세지 보내기(기록 완료!)

 

+ 서버에서는 버킷을 저장 할 때 번호를 만들어 넣어주어야한다

▶ 업데이트시 완료된 것을 구분하기 위함

 

 

1) 클라이언트 서버 연결 확인하기

버튼에 동작이 걸려있다.

        function save_bucket(){
            $.ajax({
                type: "POST",
                url: "/bucket",
                data: {sample_give:'데이터전송'},
                success: function (response) {
                    alert(response["msg"])
                }
            });
        }

서버를 확인해보자.

@app.route("/bucket", methods=["POST"])
def bucket_post():
    sample_receive = request.form['sample_give']
    print(sample_receive)
    return jsonify({'msg': 'POST(기록) 연결 완료!'})

페이지에서 확인하자.

기록하기 버튼을 누르면 메세지창이 뜬다.

 

 

 

2) 서버 만들기

서버는 버킷을 받아와 번호, 버킷, 완료를 저장해야한다.

    bucket_receive = request.form['bucket_give']
    doc = {
        'num':0,
        'bucket' : bucket_receive,
        'done' :0
    }
    db.bucket.insert_one(doc)

여기서 번호를 어떻게 넣어야할까?

구글링을 해보자.

https://www.google.com/search?q=%ED%8C%8C%EC%9D%B4%EC%8D%AC+%EB%A6%AC%EC%8A%A4%ED%8A%B8+%EA%B0%9C%EC%88%98+%EC%84%B8%EA%B8%B0&rlz=1C1ZKTG_koKR932KR932&oq=%ED%8C%8C%EC%9D%B4%EC%8D%AC+%EB%A6%AC%EC%8A%A4%ED%8A%B8+%EA%B0%9C%EC%88%98+%EC%84%B8%EA%B8%B0&aqs=chrome..69i57j0i8i30l6.13601j0j15&sourceid=chrome&ie=UTF-8 

파이썬 리스트 개수 세기 - Google 검색

db에 저장되있는 모든 데이터를 가지고와서 번호를 설정해주자.

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

 

 

 

 

 

3) 클라이언트 만들기

클라이언트는 기록된 버킷만 서버에게 주면 된다.

기록된 값을 넣어주자.

        function save_bucket(){
            let bucket = $('#bucket').val()
            $.ajax({
                type: "POST",
                url: "/bucket",
                data: {bucket_give:bucket},
                success: function (response) {
                    alert(response["msg"])
                    window.location.reload()
                }
            });
        }

 

이제 페이지에서 확인해보자.

데이터가 저장이 잘 되었는지 확인해보자.

번호도 잘 들어갔다.

 

 

---

● 보여주기 - GET

1. 요청 정보 : URL= /bucket        , 요청 방식 = GET

2. 클라(ajax) → 서버(flask) : 없음

3. 서버(flack) → 클라(ajax) : 전체 버킷리스트를 보여주기

 

 

1) 클라이언트 서버 연결 확인하기

클라이언트의 ajax코드를 보면 로딩 후에 동작이 걸려있다.

        $(document).ready(function () {
            show_bucket();
        });
        function show_bucket(){
            $.ajax({
                type: "GET",
                url: "/bucket",
                data: {},
                success: function (response) {
                    alert(response["msg"])
                }
            });
        }

서버를 확인해보자.

@app.route("/bucket", methods=["GET"])
def bucket_get():
    return jsonify({'msg': 'GET 연결 완료!'})

페이지에서 확인하자.

페이지 로딩이 완료되면 메세지창이 뜬다.

 

 

 

2) 서버 만들기

서버에서는 저장된 모든 버킷을 가져와야한다.

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

 

 

 

3) 클라이언트 만들기

클라이언트는 서버에서 받아온 데이터를 페이지에 붙인다.

먼저 콘솔창에 받아온 데이터를 찍어보자.

console.log(response["buckets"])

이제 페이지에 붙여보자.

하나씩 돌려준 후에 필요한 데이터를 넣어준다.

                    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)

페이지에서 확인하자.

 

 

 

---

● 완료하기 - POST

완료버튼을 누르면 업데이트가 되면서 해당 버킷이 완료가 된다.

완료가 된다는건?

해당 버킷의 done이 1로 바뀌어 다르게 표시되는 것.

 

1. 요청 정보 : URL= /bucket /done       , 요청 방식 = POST

2. 클라(ajax) → 서버(flask) : num(어떤 버킷인지 알기 위함)

3. 서버(flack) → 클라(ajax) : 메세지 보내기(버킷 완료!)

 

 

 

1) 연결 확인하기

완료버튼을 눌러 연결이 잘 되었는지 확인해보자.

 

 

 

 

 

 

2) 서버 만들기

서버에서는 num을 받아와 해당 num의 done을 1로 바꾸어야한다.

    num_receive = request.form['num_give']
    db.bucket.update_one({'num': num_receive}, {'$set': {'done': 1}})

 

그런데 여기서 서버는 클라이언트에서 숫자를 받아와 문자로 받게된다.

그렇게된다면 다시 클라이언트로 보낼때 문제가 발생할 수 있다.

→ 문자를 숫자로 바꾸어 넣어주자.

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

 

 

 

 

 

3) 클라이언트 만들기

클라이언트에서는 해당 버킷의 num을 보내주어야한다.

어디에 동작이 걸려있는지 확인해보자.

각 완료 버튼을 누르면 해당 버킷이 업데이트가 되면서 완료 상태가 된다.

이 버튼의 num은 언제 생기는 걸까?

이 num은 위에서 기록하기를 설정할 때 미리 만들어두었다.

개발자도구에 들어가서 보면

각 줄마다의 num이 붙어있다.

 

그러면 클라이언트는 num만 넘겨주면 된다. + 새로고침하기

                data: {num_give:num},
                success: function (response) {
                    alert(response["msg"])
                    window.location.reload()
                }

 

 

페이지에 가서 확인해보자.

완료버튼을 누르면 페이지가 새로고침되면서 가로줄이 생긴다.