맛집 소개 서비스 1

사슐랭

맛집 소개 사이트를 만들기로 하였다.
가봤었던 맛집을 리뷰하는 방식으로 사진, 가게 이름, 카테고리, 메뉴, 가격대, 별점, 한줄평 정도를 입력해주는 방식으로 하기로 했다.

우선은 웹개발 캠프에서 만들었던 코드를 바탕으로 진행하였고, 데이터베이스는 mongDB를 사용하였다.

아래 코드들은 flask를 사용하여서 back-end를 관리하는 코드들이다.

@app.route('/')
def home():
    return render_template('index.html')

위의 코드는 메인 페이지인 index.html로 렌더링해주는 기본코드로 route를 '/' 로 설정해두어서 가장 기본 값인 localhost:5000으로 들어가면 위 함수가 실행된다.

@app.route("/menu", methods=["POST"])
def menu_post():

    cate_receive = request.form['cate_give']
    image_receive = request.form['image_give']
    comment_receive = request.form['comment_give']
    size_receive = request.form['size_give']
    cost_receive = request.form['cost_give']
    star_receive = request.form['star_give']
    name_receive = request.form['name_give']
    address_receive = request.form['address_give']
    menu_receive = request.form['menu_give']
        
    doc = {
        'cate' : cate_receive,
        'image' : image_receive,
        'name' : name_receive,
        'address' : address_receive,
        'comment' : comment_receive,
        'star' : star_receive,
        'menu' : menu_receive,
        'size' : size_receive,
        'cost' : cost_receive,
    }

    db.delicious.insert_one(doc)
    
    return jsonify({'msg':'저장 완료!'})

이 코드는 html에서 받은 데이터들을 실제 mongoDB에 보내주는 역할을 한다.
db.delicious.insert_one(doc)
db는 mongoDB를 연결한 client에서 제가 설정한 데이터베이스 이름이다.
delicious는 그 db에 있는 collection의 이름을 설정한 것이며
insert_one을 통해서 doc이라는 json으로 만들어놓은 데이터를 db에 저장하였다.

@app.route("/menu", methods=["GET"])
def menu_get():
    
    all_menus = list(db.delicious.find({},{'_id':False}))

    return jsonify({'result': all_menus})

위 코드는 mongoDB에 저장되어 있는 데이터들을 가져와서 html에 리스트 형태로 보내주는 코드다. 보내주는 데이터들은 json 형태로 보내주도록 하였다.

@app.route('/menu/input')
def menuInput():
    return render_template('popup.html')

위 함수는 popup 페이지로 이동시키기 위해서 만들어 놓은 함수이다.

html은 기본적으로 모든 후기들을 카드 형태로 만들어 놓은 index.html과 기본 페이지에서 버튼을 눌러서 입력칸이 있는 popup.html로 나누어서 만들었다.

우선 index.html부터 말하자면

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

위 함수를 통하여서 페이지가 실행되었을 경우 listing()함수를 자동으로 실행하도록 하였다.

function listing() {
            fetch('/menu').then((res) => res.json()).then((data) => {
                let rows = data['result'];
                $('#cards-box').empty();
                
                rows.forEach((a) => {
                    let cate = a['cate'];
                    let size = a['size'];
                    let cost = a['cost'];
                    let comment = a['comment'];
                    let name = a['name'];
                    let image = a['image'];
                    let star = a['star'];
                    let menu = a['menu'];
                    let address = a['address'];

                    let star_repeat = '⭐'.repeat(star);

                    let temp_html = `<div class="col">
                                        <div class="card h-100">
                                            <img src="${image}">
                                            <div class="card-body">
                                                <h5 class="card-title">${name}</h5>
                                                <p class="card-text">${cate}</p>
                                                <p class="card-text">${address}</p>
                                                <p class="card-text">${cost}</p>
                                                <p class="card-text">${menu}</p>                        
                                                <p>${star_repeat}</p>
                                                <p class="mycomment">${comment}</p>
                                            </div>
                                        </div>
                                    </div>`;

                    $('#cards-box').append(temp_html);
                });
            });
        }

listing 함수는 다음과 같다. 기본적으로 배웠던 코드들인데 가게 이름, 카테고리, 주소, 가격, 메뉴, 코멘트 등을 보여주도록 하였다.

function open_box(){
            let url = "http://127.0.0.1:5000/menu/input";
            let title = "popup test";
            let option = "width = 430, height = 500"
            window.open(url, title, option);
        }   

위 함수는 이번에 구현한 함수인데, 버튼을 클릭하면 입력되어 있는 url을 가진 팝업창이 나타나도록 하였다. 별다른 옵션은 주지 않고 넓이와 높이만 주었다.

다음은 popup.html에서 사용된 함수들이다.

function posting() {
            
            let cate = $('#cate').val();
            let size = $('#size').val();
            let cost = $('#cost').val();
            let image = $('#image').val();
            let name = $('#name').val();
            let address = $('#address').val();
            let comment = $('#comment').val();
            let star = $('#star').val();            
            let menu = $('#menu').val();            

            let formData = new FormData();
            formData.append("cate_give", cate);
            formData.append("image_give", image);
            formData.append("size_give", size);            
            formData.append("cost_give", cost);
            formData.append("name_give", name);
            formData.append("address_give", address);
            formData.append("comment_give", comment);
            formData.append("star_give", star);            
            formData.append("menu_give", menu);

            fetch('/menu', { method: "POST", body: formData }).then((res) => res.json()).then((data) => {           
                opener.parent.location="http://127.0.0.1:5000/";
                window.close();   
            });
        }

posting 함수는 입력된 데이터 값들을 fetch를 통하여서 전달하도록 하였다. 또한 팝업창에서 제출을 클릭하면 팝업창은 window.close() 함수로 인해 닫히게 되고 기존에 parent 창은 새로고침을 하게 된다.

우선은 오늘 맡았던 부분이 데이터리스트들을 보여주는 것이었는데 그러기 위해서 입력된 데이터가 필요할 거 같아서 일단 간단하게 구현을 하였다.

다만 이미지를 mongDB에 저장할 때, 기존에는 url을 통해서 인터넷에서 가져오는 것이였는데 그것보다는 데스크탑에 존재하는 이미지를 가져와야 할 거 같다.
mongDB에 이미지를 저장하기 위해서는 gridFS를 사용해야 할 거 같은데 이를 위해서 조금 더 공부를 해야할 거 같다.