커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
나만의 웹사이트를 만드는 중에 클릭하면 해당하는 데이터베이스의 정보를 가져오는 방법
undefined주차
이*환
댓글
7
・
추천
0
・
조회수
21
조회수
21
답변 완료
* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
맥주 이미지를 클릭하면 beerinfo라는 html이 보여지게 만들었습니다. 여기서 데이터베이스에 있는 맥주의 도수와 원산지를 사진과 함께 보여주고 댓글 기능까지 넣어보려고 합니다. 근데 그럴려면 이미지를 클릭할 때 마다 그 이미지에 맞는 맥주의 정보를 데이터베이스에서 가져와줘야 하는데 그 방법을 모르겠습니다. 한 개의 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 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>
<title>document</title>
</head>
<body>
</body>
</html>
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
from pymongo import MongoClient
import certifi
ca= certifi.where()
client = MongoClient('mongodb+srv://sparta:test@hwan.xow02ql.mongodb.net/?retryWrites=true&w=majority',tlsCAFile=ca)
db = client.dbsparta
@app.route('/')
def home():
return render_template('index.html')
@app.route("/beer", methods=["POST"])
def beer_post():
url_receive = request.form['url_give']
comment_receive = request.form['comment_give']
origin_receive = request.form['origin_give']
strength_receive = request.form['strength_give']
doc = {
'image':url_receive,
'comment':comment_receive,
'origin':origin_receive,
'strengh':strength_receive
}
db.beers.insert_one(doc)
return jsonify()
@app.route("/beer", methods=["GET"])
def beer_get():
all_beers = list(db.beers.find({},{'_id':False}))
return jsonify({'result':all_beers})
@app.route('/beerinfo')
def beer_info():
return render_template('beerinfo.html')
if __name__ == '__main__':
app.run('0.0.0.0', port=5000, debug=True)
Tip 2) Ctrl+A(맥의 경우 Command+A) 단축키로 코드를 한 번에 선택할 수 있어요!
<!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 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>
<title>이정환</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');
* {
font-family: 'Gowun Dodum', sans-serif;
}
.title {
width: 1000px;
height: 250px;
text-align: center;
padding: 50px 0px 0px 0px;
background-image: url('data:image/jpeg;base64,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');
background-size: 500px 300px;
}
.title>h1 {
background-color: transparent;
width: 170px;
color: black;
margin: 0px auto 0px auto;
}
.post {
width: 1000px;
margin: 20px auto 0px auto;
}
.warningbox {
margin: 10px auto 0px auto;
width: 1000px;
height: 70px;
border-radius: 50px;
border: 1px solid red;
}
.warning {
text-align: center;
}
.mycards {
margin: 10px auto 0px auto;
max-width: 1300px;
text-align: center;
}
</style>
<script>
$(document).ready(function () {
listing();
});
function listing() {
fetch('/beer').then((res) => res.json()).then((data) => {
let rows = data['result']
$('#cards-box').empty()
rows.forEach((a) => {
let comment = a['comment']
let image = a['image']
let temp_html = `<div class="col">
<div class="card h-100">
<a href="/beerinfo">
<img id= "image" src="${image}" class="card-img-top" alt="...">
</a>
<div class="card-body">
<h5 class="card-title">${comment}</h5>
</div>
</div>
</div>`
$('#cards-box').append(temp_html)
})
})
}
function posting() {
let url = $('#url').val()
let comment = $('#comment').val()
let origin = $('#origin').val()
let strength = $('#strength').val()
let formData = new FormData();
formData.append("url_give", url)
formData.append("comment_give", comment)
formData.append("origin_give", origin)
formData.append("strength_give", strength)
fetch('/beer', { method: "POST", body: formData }).then((res) => res.json()).then((data) => {
window.location.reload()
})
}
</script>
</head>
<body>
<div class="post">
<div class="title">
<h1>세계 맥주</h1>
</div>
<h5 class="warningbox">
<p class="warning">경고: 지나친 음주는 뇌졸증,기억력 손상이나 치매를 유발합니다. </p>
<p class="warning">임신 중 음주는 기형아 출생 위험을 높입니다.</p>
</h5>
</div>
<div class="mypost" id="post-box">
<div class="form-floating mb-3">
<input id="url" type="email" class="form-control" placeholder="name@example.com">
<label>맥주URL</label>
</div>
<div class="form-floating">
<textarea id="comment" class="form-control" placeholder="Leave a comment here"></textarea>
<label for="floatingTextarea2">이름</label>
</div>
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="origin"></textarea>
<label for="floatingTextarea">국가</label>
</div>
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="strength"></textarea>
<label for="floatingTextarea">도수</label>
</div>
<div class="mybtns">
<button onclick="posting()" type="button" class="btn btn-dark">기록하기</button>
</div>
</div>
<div class="mycards">
<div class="row row-cols-1 row-cols-md-4 g-4" id="cards-box">
<div class="col">
<div class="card h-100">
<a href="/mylink">
<img id= "image" src="..." class="card-img-top" alt="...">
</a>
<div class="card-body">
<h5 class="card-title">Card title</h5>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
댓글 알림
