[TIL] 2022.04.21 (팀 소개 웹 페이지 - 미니 프로젝트2)

[TIL] 2022.04.21 (팀 소개 웹 페이지 - 미니 프로젝트 1) 보러 가기

https://sdrtst.tistory.com/20

[TIL] 2022.04.20 (팀 소개 웹 페이지 - 미니 프로젝트1)

 

어제는 메인 페이지를 만들어 보았다.

오늘은 메인 페이지에서 멤버 개개인의 TMI를 보기 위해 개인 웹 페이지와 일부 기능들을 추가하였다.

그중 오늘은 JQuery와 Ajax 기능 파트를 맡아 이것들을 사용하여 MongoDB에 데이터를 넣어주는 기능을 만들어 보았다.

 

링크에 잘 연결되어 있는 모습

 

우선 각 프로필 사진에 마우스를 올리면 "TMI 보기" 텍스트가 나온다.

그 텍스트에 하이퍼링크를 연결해주는 <a> 태그를 사용해 개인 웹 페이지와 연결되게끔 설정해주었다.

 

개인 웹 페이지 같은 경우에는 개인 웹 페이지 프론트엔드를 맡아주신 팀원 중 한 분이 개인 웹 페이지 틀을 만들어 주셨다.

 

웹 페이지 최종 화면, 연결된 하이퍼링크(/m1)를 따라 잘 연결되는 모습

칭찬 한번! 이라는 버튼을 누르면 열리고, 다시 누르면 닫히는 모습

 

'칭찬 한번!'이라는 버튼을 클릭하면 .hide와 .show를 통해 열고 닫을 수 있도록 설정되어 있다.

이제 추가로 생성되는 박스에서 이름과 칭찬을 적고 등록하기를 누르면 바로 밑에 생성될 수 있도록 설정해보도록 하자.

 

app.py

# HTML 화면 보여주기
@app.route('/m1')
def member_1():
    return render_template('member1.html')

# 칭찬 등록(POST) API
@app.route('/member1', methods=['POST'])
def member1_post():
    name_receive = request.form['name_give']
    praise_receive = request.form['praise_give']

    doc = {
        'name': name_receive,
        'praise': praise_receive,
    }
    db.member1.insert_one(doc)
    return jsonify({'msg': '칭찬 고마워요!'})

# 등록된 칭찬 목록 읽어오기(Read) API
@app.route('/member1', methods=['GET'])
def member1_get():
    praise_list = list(db.member1.find({}, {'_id': False}))
    return jsonify({'praises': praise_list})

 

우선 .py 파일을 만들어서 GET방식과 POST방식으로 API를 만들어 주었다.

 

해당 페이지에서 이름(name)과 칭찬(praise)의 내용을 적는다면 MongoDB 내로 들어갈 수 있도록 딕셔너리 형태로 저장(POST : Create) 될 수 있게끔 설정하고 마지막엔 '칭찬 고마워요!'라는 메시지를 넣어주었다. (POST방식)

그리고 저장된 목록들을 조회(Read) 해주고 찾아 준 값을 praise_list에 _id 값을 제외하고 담아준다.

 

member1.html

// 웹 페이지 시작 시 띄워 줄 것
$(document).ready(function () {
    show_praise();
});

// 이름과 칭찬에 들어간 데이터를 생성(POST)
function save_praise() {
    let name = $('#name').val()
    let praise = $('#praise').val()

    $.ajax({
        type: "POST",
        url: "/member1",
        data: {'name_give': name, 'praise_give': praise},
        success: function (response) {
            alert(response["msg"])
            window.location.reload()
        }
    });
}

// 칭찬하기 버튼을 누르면 칭찬이 추가되는 칸 (GET 방식으로 생성된 데이터 값 표시)
function show_praise() {
    $('#praise-list').empty()
    $.ajax({
        type: "GET",
        url: "/member1",
        data: {},
        success: function (response) {
            let rows = response['praises']
            for (let i = 0; i < rows.length; i++) {
                let name = rows[i]['name']
                let praise = rows[i]['praise']

                let temp_html = `<div class="card praises_title">
                                    <h5 class="praises_name">[ 이름 : ${name} ]</h5>
                                    <p class="praises_text"> : ${praise}</p>
                                </div>`

                $('#praise-list').append(temp_html)
            }
        }
    });
}

 

show_praise()에는 GET 방식으로 해당 MongoDB 폴더에 있는 데이터를 모두 출력하게끔 해준다.

 

그리고 save_praise()에는 POST 방식을 사용하여 JQuery 형태로 해당 ID에 생성하려는 데이터를 넣어주고 그 데이터들을 최종적으로 MongoDB 폴더 내로 저장해주었다.

저장해줌과 동시에 window.location.reload()를 통해 웹 페이지를 새로고침 시켜주었다.

 

마지막으로는 해당 폴더 내로 들어간 데이터들이 웹 페이지 시작 시 show_praise()에 담긴 값을 보여준다.

 

데이터 값이 잘 들어가는 모습

 

이제 마지막으로 남은 <a> 태그로 하이퍼링크 적용만 해주면 끝이 나게 된다.

 

개인 웹 페이지의 하이퍼링크 적용도 잘 되어있는 모습, (2)가장 우측 아이콘

 

이렇게 미니 프로젝트를 완성하게 되었습니다.

 

-

 

누군가와 함께 협업하여 만드는 프로젝트였지만, 팀원들과 마지막까지 힘을 내어 프로젝트를 완성하였다.

다 만들고 난 뒤 팀원분들과 함께 완성본을 확인하였는데, 이때의 기분은 말로 표현할 수 없었다.

서로가 고생했다며 잘했다고 칭찬과 격려를 해주었고 서로 간의 유대감에 한 발자국 더 다가간 느낌이었다.

 

앞으로 남은 기간에 남은 프로젝트는 많지만 앞으로 만들 프로젝트도 해낼 수 있을 것이란 생각이 들었다.

 

어제, 오늘 이틀간 모두 고생 많으셨습니다!

 

:O