커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
4주차 숙제중 질문입니다!
undefined주차
장*윤
댓글
4
・
추천
0
・
조회수
20
조회수
20
답변 완료
안녕하세요!
이렇게 방명록에 한번 작성하면 2번 붙게 됩니다. 이게 왜 그러는지 모르겠습니다 ㅠㅠ
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="{{ url_for('static', filename='sy_style.css') }}">
<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>
<link
href="https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&display=swap"
rel="stylesheet"
/>
<title>스파르타템플릿+부트스트랩</title>
<script src="../static/sy_guestbook.js"></script>
</head>
<body>
<!-- navbar -->
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link active" style="color: gray" href="#">팀소개</a>
</li>
<li class="nav-item">
<a class="nav-link" style="color: gray" href="#">우리팀</a>
</li>
<li class="nav-item">
<a class="nav-link" style="color: gray" href="#">잘한다</a>
</li>
</ul>
<!--<script>-->
<!-- $('#navbar-toggler').on('click', function (){-->
<!-- $('#nav-list').toggle('show')-->
<!-- })-->
<!--</script>-->
<!-- 배너 이미지 -->
<div class="mypic">
<h1 style="color: white">Could you please open the door?</h1>
<!-- <img class="banner-image" src="sy_myimage.png"> -->
</div>
<!-- 탭 부트스트랩 시작 -->
<div class="container mt-5">
<ul class="list">
<li class="tab-button">ABOUT ME</li>
<li class="tab-button orange">TODO LIST</li>
<li class="tab-button">GUEST BOOK</li>
</ul>
<!-- ABOUT ME 시작 -->
<div class="tab-content">
<div class="container white-box" style="margin-top: 10px">
<div class="row">
<div class="col-md-12" style="margin-top: 10px">
<h1>LIKE A ...</h1>
</div>
</div>
</div>
<div class="row" style="margin-top: 10px">
<div class="col-md-4 col-lg-4" style="margin-top: 10px">
<div class="white-box">
<div class="card" style="max-width: 100%">
<img src="{{url_for('static', filename='sy_myimage.png')}}" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text"> 안녕하십니까? 내이름은 </p>
<p>내 이야기 한번 들어볼래요?</p>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4" style="margin-top: 10px">
<div class="white-box">
<p> 나는 누구인가? </p>
<p> 누구인가? 누가 </p>
</div>
</div>
<div class="col-md-2 col-lg-4" style="margin-top: 10px">
<div class="white-box">
<i class="bi bi-envelope-at"></i>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-envelope-at" viewBox="0 0 16 16">
<path d="M2 2a2 2 0 0 0-2 2v8.01A2 2 0 0 0 2 14h5.5a.5.5 0 0 0 0-1H2a1 1 0 0 1-.966-.741l5.64-3.471L8 9.583l7-4.2V8.5a.5.5 0 0 0 1 0V4a2 2 0 0 0-2-2H2Zm3.708 6.208L1 11.105V5.383l4.708 2.825ZM1 4.217V4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v.217l-7 4.2-7-4.2Z"/>
<path d="M14.247 14.269c1.01 0 1.587-.857 1.587-2.025v-.21C15.834 10.43 14.64 9 12.52 9h-.035C10.42 9 9 10.36 9 12.432v.214C9 14.82 10.438 16 12.358 16h.044c.594 0 1.018-.074 1.237-.175v-.73c-.245.11-.673.18-1.18.18h-.044c-1.334 0-2.571-.788-2.571-2.655v-.157c0-1.657 1.058-2.724 2.64-2.724h.04c1.535 0 2.484 1.05 2.484 2.326v.118c0 .975-.324 1.39-.639 1.39-.232 0-.41-.148-.41-.42v-2.19h-.906v.569h-.03c-.084-.298-.368-.63-.954-.63-.778 0-1.259.555-1.259 1.4v.528c0 .892.49 1.434 1.26 1.434.471 0 .896-.227 1.014-.643h.043c.118.42.617.648 1.12.648Zm-2.453-1.588v-.227c0-.546.227-.791.573-.791.297 0 .572.192.572.708v.367c0 .573-.253.744-.564.744-.354 0-.581-.215-.581-.8Z"/>
</svg>
<i class="bi bi-instagram"></i>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-instagram" viewBox="0 0 16 16">
<path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"/>
</svg>
<i class="bi bi-messenger"></i>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-messenger" viewBox="0 0 16 16">
<path d="M0 7.76C0 3.301 3.493 0 8 0s8 3.301 8 7.76-3.493 7.76-8 7.76c-.81 0-1.586-.107-2.316-.307a.639.639 0 0 0-.427.03l-1.588.702a.64.64 0 0 1-.898-.566l-.044-1.423a.639.639 0 0 0-.215-.456C.956 12.108 0 10.092 0 7.76zm5.546-1.459-2.35 3.728c-.225.358.214.761.551.506l2.525-1.916a.48.48 0 0 1 .578-.002l1.869 1.402a1.2 1.2 0 0 0 1.735-.32l2.35-3.728c.226-.358-.214-.761-.551-.506L9.728 7.381a.48.48 0 0 1-.578.002L7.281 5.98a1.2 1.2 0 0 0-1.735.32z"/>
</svg>
<i class="bi bi-github"></i>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-github" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
</svg>
<button type="button" class="btn btn-secondary">Let's talk</button>
</div>
</div>
</div>
</div>
<!-- TODOLIST 시작 -->
<div class="tab-content show">
<body>
<div class="mybox">
<div class="mybucket">
<input id="bucket" class="form-control" type="text" placeholder="나의 목표는 이것입니다.">
<button onclick="save_bucket()" type="button" class="btn btn-outline-secondary">기록하기</button>
</div>
</div>
<div class="mybox" id="bucket-list">
</div>
</body>
</div>
<!-- 방명록 시작 -->
<div class="tab-content">
<div class="mypost">
<div class="form-floating mb-3">
<input type="text" class="form-control" id="name" placeholder="url">
<label for="floatingInput">닉네임</label>
</div>
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="comment"
style="height: 100px"></textarea>
<label for="floatingTextarea2">응원댓글</label>
</div>
<button onclick="save_comment()" type="button" class="btn btn-secondary">응원 남기기</button>
</div>
<!-- 응원댓글 시작 -->
<div class="mycards" id="comment-list">
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="{{url_for('static', filename='sy_tab.js')}}"></script>
<script type="text/javascript" src="{{url_for('static', filename='sy_todo.js')}}"></script>
<script type="text/javascript" src="{{url_for('static', filename='sy_guestbook.js')}}"></script>
</body>
</html>
보고 계신 화면 전체를 캡처해 주시면, 튜터님들이 빠르게 상황을 이해할 수 있어요.
guestbook.js
$(document).ready(function(){
show_comment()
});
// function set_temp(){// $.ajax({// type: "GET",// url: "http://spartacodingclub.shop/sparta_api/weather/seoul",// data: {},// success: function (response) {// $('#temp').text(response['temp'])// }// })// }function save_comment(){
let name = $('#name').val()
let comment = $('#comment').val()
$.ajax({
type: 'POST',
url: '/sy_guestbook',
data: { name_give:name, comment_give: comment},
success: function (response) {
alert(response['msg'])
window.location.reload()
}
})
}
function delete_comment ( name) {
if(confirm("정말 삭제하시겠습니까?") == true){
$.ajax({
type: 'POST',
url: '/syguestbook/delete',
data: {name_give: name},
success: function (response) {
alert(response['msg']);
window.location.reload()
}
});
}else {
return false
}
}
function show_comment( ){
$.ajax({
type: "GET",
url: "/sy_guestbook",
data: {},
success: function (response) {
let rows = response['guestbooks']
for (let i=0; i<rows.length; i++){
let name = rows[i]['name']
let comment = rows[i]['comment']
let temp_html = `<div class="card border mb-3" style=" margin : 20px 20px">
<div class="card-body">
<button onclick="delete_comment('${name}')" type="button" class="btn btn-outline-dark" style="float:right">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash3" viewBox="0 0 16 16">
<path d="M6.5 1h3a.5.5 0 0 1 .5.5v1H6v-1a.5.5 0 0 1 .5-.5ZM11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3A1.5 1.5 0 0 0 5 1.5v1H2.506a.58.58 0 0 0-.01 0H1.5a.5.5 0 0 0 0 1h.538l.853 10.66A2 2 0 0 0 4.885 16h6.23a2 2 0 0 0 1.994-1.84l.853-10.66h.538a.5.5 0 0 0 0-1h-.995a.59.59 0 0 0-.01 0H11Zm1.958 1-.846 10.58a1 1 0 0 1-.997.92h-6.23a1 1 0 0 1-.997-.92L3.042 3.5h9.916Zm-7.487 1a.5.5 0 0 1 .528.47l.5 8.5a.5.5 0 0 1-.998.06L5 5.03a.5.5 0 0 1 .47-.53Zm5.058 0a.5.5 0 0 1 .47.53l-.5 8.5a.5.5 0 1 1-.998-.06l.5-8.5a.5.5 0 0 1 .528-.47ZM8 4.5a.5.5 0 0 1 .5.5v8.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5Z"/>
</svg>
</button>
<h5 class="card-title">${name}</h5>
<p class="card-text">${comment}</p>
</div>
</div> `
$('#comment-list').append(temp_html)
}
}
});
}
app.py
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
from pymongo import MongoClient
client = MongoClient('mongodb+srv://test:sparta@cluster0.bv2hvyf.mongodb.net/cluster0?retryWrites=true&w=majority')
db = client.dbsparta
@app.route('/')
def home():
return render_template('sy_index.html')
@app.route("/sy_guestbook", methods=["POST"])
def sy_guestbook_post():
name_receive = request.form['name_give']
comment_receive = request.form['comment_give']
doc = {'name': name_receive, 'comment': comment_receive}
db.sy_guestbooks.insert_one(doc)
return jsonify({'msg':'이름,응원댓글 저장완료!'})
@app.route('/syguestbook/delete', methods=['POST'])
def sy_guestbook_delete():
name_receive = request.form['name_give']
db.sy_guestbooks.delete_one({'name': name_receive})
return jsonify({'msg': '삭제 완료!'})
@app.route("/sy_guestbook", methods=["GET"])
def sy_guestbook_get():
sy_guestbooks_list = list(db.sy_guestbooks.find({}, {'_id': False}))
return jsonify({'guestbooks': sy_guestbooks_list})
# 여기서부터 버킷리스트
# 여기서부터 버킷리스트
# 여기서부터 버킷리스트
# 여기서부터 버킷리스트
# @app.route("/bucket", methods=["POST"])
# def bucket_post():
# bucket_list = list(db.buckets.find({}, {'_id': False}))
# count = len(bucket_list) + 1
#
# bucket_receive = request.form['bucket_give']
#
# doc = {'bucket': bucket_receive, 'num': count, 'done':0}
# db.buckets.insert_one(doc)
# return jsonify({'msg': '버킷리스트가 저장완료 되었습니다!'})
#
#
# @app.route("/bucket/done", methods=["POST"])
# def bucket_done():
# num_receive = request.form['num_give']
# db.buckets.update_one({'num': int(num_receive)}, {'$set': {'done': 1}})
#
# return jsonify({'msg': 'Thank you my god!'})
#
#
# # @app.route("/bucket/undone", methods=["POST"])
# # def bucket_done():
# # num_receive = request.form['num_give']
# # db.buckets.update_one({'num': int(num_receive)}, {'$set': {'done': 1}})
# #
# # return jsonify({'msg': 'Thank you my god!'})
# #
#
#
# @app.route("/bucket", methods=["GET"])
# def bucket_get():
# bucket_list = list(db.buckets.find({}, {'_id': False}))
#
# return jsonify({'buckets': bucket_list})
#
if __name__ == '__main__':
app.run('0.0.0.0', port=5000, debug=True)
작성한 코드 및 에러 메세지
오류 발생 시, 작성한 코드 전체와 에러 메시지를 첨부해 주세요.
Tip 1) </> 아이콘을 눌러 코드박스를 만들어 보세요.
Tip 2) Ctrl+A(맥의 경우 Command+A) 단축키로 코드를 한 번에 선택할 수 있어요!
댓글 알림
