웹개발 종합반 7주차 (3.7)

신예진·2022년 2월 28일
0

(앞으로 해야할 것)
1. select에 따라 해당하는 오름 카드들만 나오게
2. 코멘트 달기
3. 웹페이지 배포
4. 지도 만들기
5. 코멘트 꾸며주기
6. 카드 리스트 이름 순으로 정렬해주기

1) app.py

from flask import Flask, render_template, request, jsonify
import requests
app = Flask(__name__)

from pymongo import MongoClient
import certifi
ca = certifi.where()
client = MongoClient('mongodb+srv://test:sparta@cluster0.4n13d.mongodb.net/Cluster0?retryWrites=true&w=majority', tlsCAFile=ca)
db = client.dbsparta

headers = {'User-Agent' : 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'}
data = requests.get('https://gis.jeju.go.kr/rest/JejuOleumVRImg/getOleumRDetailList',headers=headers)

d = data.json()
oleums = d["resultSummary"]

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

@app.route("/oleums", methods=["POST"])
def jejuoleum_post():
    for oleum in oleums:
        name = oleum['oleumKname']
        address = oleum['oleumAddr']
        altitude = oleum['oleumAltitu']
        x = oleum['x']
        y = oleum['y']
        explan = oleum['explan']
        img = oleum['imgPath']
        doc = {
            'name': name,
            'address': address,
            'altitude': altitude,
            'x': x,
            'y': y,
            'explan': explan,
            'img': img
        }
        db.oleums.insert_one(doc)

@app.route("/oleums", methods=["GET"])
def jejuoleum_get():
    oleum_list = list(db.oleums.find({}, {'_id': False}))
    print(oleum_list[0])
    return jsonify({'oleums': oleum_list})

@app.route("/comment", methods=["POST"])
def comment_post():
    comname_receive = request.form['comname_give']
    star_receive = request.form['star_give']
    comment_receive = request.form['comment_give']

    doc = {
        'comname' : comname_receive,
        'star' : star_receive,
        'comment' : comment_receive
    }

    db.comment.insert_one(doc)
    return jsonify({'msg': '저장 완료!'})
@app.route("/commentlist", methods=["POST"])
def comment_get():
    comname_receive = request.form['comname_give']
    comment_list = list(db.comment.find({'comname':comname_receive}, {'_id': False}))
    print(comment_list)
    return jsonify({'comments': comment_list})

if __name__ == '__main__':
    app.run('0.0.0.0', port=5000, debug=True)
  1. index.html

    <meta property="og:title" content="제주 오름 지도🏔"/>
    <meta property="og:description" content="제주의 오름들을 구경하세요"/>
    <meta property="og:image" content="http://www.ibulgyo.com/news/photo/201506/141816_88579_3155.jpg"/>
    
    <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>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css"/>
    
    <link href="https://fonts.googleapis.com/css2?family=Gowun+Batang&display=swap" rel="stylesheet">
    
    <title>제주 오름 지도</title>
    
    <style>
    * {
        font-family: 'Gowun Batang', serif;
    }
    
    .mytitle {
        width: 100%;
        height: 250px;
    
        background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('data:image/jpeg;base64,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');
        background-position: center;
        background-size: cover;
    
        color: white;
    
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .myselect {
        margin : 30px;
    
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    
        border : 1px solid white;
        box-shadow : 0px 0px 2px 0px darkgray;
    }
    .mycomment {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .mycomment > .btn {
        margin: 20px 10px 10px 10px;
    }
    .mybtns {
        margin : 10px 10px 10px 160px;
        }
    
    </style>
    <script>
        $(document).ready(function () {
            set_temp()
            save_oleum()
            show_oleum()
            close_box()
        });
    
        function set_temp() {
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/weather/jeju",
                data: {},
                success: function (response) {
                    $('#temp').text(response['temp'])
                }
            })
        }
    
        function save_oleum(){
            $.ajax({
                type : 'POST',
                url: '/oluems',
                data: {},
                success: function (response) {
                    window.location.reload()
                }
            })
        }
    
        function show_oleum(){
            $.ajax({
                type : 'GET',
                url : '/oleums',
                data : {},
                success : function (response) {
                    let rows = response['oleums']
                    for (let i = 0; i < rows.length; i++) {
                        let name = rows[i]['name']
                        let address = rows[i]['address']
                        let altitude = rows[i]['altitude']
                        let x = rows[i]['x']
                        let y = rows[i]['y']
                        let explan = rows[i]['explan']
                        let img = rows[i]['img']
    
                        let temp_html = `<div class="card" style="width: 18rem;">
                                            <img src="${img}" class="card-img-top" alt="...">
                                            <div class="card-body">
                                                <h5 class="card-title">${name}</h5>
                                                <p class="card-text">${address}</p>
                                                <p class="card-text">${explan}</p>
                                            </div>
                                        </div>
                                        `
                        $.ajax({
                            type: 'POST',
                            url: '/commentlist',
                            data: {comname_give: name},
                            success: function (response) {
                                let rows = response['comments']
                                for (let i = 0; i < rows.length; i++) {
                                    let comname = rows[i]['comname']
                                    let star = rows[i]['star']
                                    let comment = rows[i]['comment']
                                    let star_image = '⭐'.repeat(star)
                                    temp_html = temp_html + `<div class="card" style="width: 18rem;">
                                                            <div class="card-body">
                                                            <p class="card-text">${star_image}</p>
                                                            <p class="card-text">${comment}</p></div>`
                                }
    
                                if (x < 126.431492) {
                                    $('#west-box').append(temp_html)
                                    $('#west-box').hide()
                                } else if (x > 126.672505) {
                                    $('#east-box').append(temp_html)
                                    $('#east-box').hide()
                                } else {
                                    $('#middle-box').append(temp_html)
                                    $('#middle-box').hide()
                                }
                            }
                        })
    
                    }
                }
            })
        }
    
        function OnSelect(){
            var gubun = document.getElementById("floatingSelect").options[document.getElementById("floatingSelect").selectedIndex].value;
    
            if (gubun ==1){
                $('#east-box').hide()
                $('#middle-box').hide()
                $('#west-box').show();
            }else if (gubun ==2){
                $('#east-box').hide()
                $('#west-box').hide()
                $('#middle-box').show();
            }else if (gubun ==3){
                $('#west-box').hide()
                $('#middle-box').hide()
                $('#east-box').show()
            }else{
                $('#west-box').hide()
                $('#middle-box').hide()
                $('#east-box').hide()
            }
        }
    
        function open_box() {
            $('#comment-box').show()
        }
        function close_box() {
            $('#comment-box').hide()
        }
    
        function posting() {
            let comname = $('#comname').val()
            let star = $('#star').val()
            let comment = $('#comment').val()
    
            $.ajax({
                type: 'POST',
                url: '/comment',
                data: {comname_give: comname, star_give: star, comment_give: comment},
                success: function (response) {
                    alert(response['msg'])
                    window.location.reload()
                }
            })
        }
    </script>
</head>

<body>
<div class="mytitle">
    <h1>제주 오름 지도</h1>
    <p>제주의 기온 : <span id="temp">00.0</span></p>
</div>
<div class="mycomment">
    <a href="#" class="btn btn-success" onclick="open_box()">당신의 경험을 공유하세요</a>

    <div id="comment-box">
        <div class="form-floating mb-3">
            <input id="comname" type="email" class="form-control" placeholder="name@example.com">
            <label>오름 이름</label>
        </div>
        <div class="input-group mb-3">
            <label class="input-group-text" for="inputGroupSelect01">난이도</label>
            <select class="form-select" id="star">
                <option selected>-- 선택하기 --</option>
                <option value="1"></option>
                <option value="2">⭐⭐</option>
                <option value="3">⭐⭐⭐</option>
                <option value="4">⭐⭐⭐⭐</option>
                <option value="5">⭐⭐⭐⭐⭐</option>
            </select>
        </div>
        <div class="form-floating">
            <textarea id="comment" class="form-control" placeholder="Leave a comment here"></textarea>
            <label for="floatingTextarea2">코멘트</label>
        </div>
        <div class="mybtns">
            <button onclick="posting()" type="button" class="btn btn-outline-success">완료</button>
            <button onclick="close_box()" type="button" class="btn btn-outline-secondary">닫기</button>
        </div>
    </div>
</div>
<div class="myselect">
    <select class="form-select" id="floatingSelect" aria-label="Floating label select example" onchange="OnSelect();">
        <option selected>-- 원하는 지역을 선택하세요 --</option>
        <option value="1">서부</option>
        <option value="2">중부</option>
        <option value="3">동부</option>
    </select>
</div>
<div class="mycards">
    <div class="row row-cols-1 row-cols-md-4 g-4" id="west-box">
    </div>
    <div class="row row-cols-1 row-cols-md-4 g-4" id="middle-box">
    </div>
    <div class="row row-cols-1 row-cols-md-4 g-4" id="east-box">
    </div>
</div>
</body>
</html>

3) 현재 페이지 상태

0개의 댓글