(앞으로 해야할 것)
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)
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) 현재 페이지 상태