커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
이미지를 눌렀을 때 다음 페이지로 넘어갈 수 있도록 설계하고 싶습니다..!
undefined주차
김*형
댓글
5
・
추천
0
・
조회수
9
조회수
9
답변 완료
* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
이미지를 눌렀을 때 다른 페이지로 넘어갈 수 있도록 html 파일을 하나 더 만들어 보았는데요,
flask로 서버를 구축하는 방법에서 이해가 잘 되지 않아서 질문을 남겨봅니다..ㅜㅜ
image grid에서 가장 큰 이미지를 누르면 index1.html로 넘어가게끔 html은 구축을 해놓았는데
app.py에서 무엇을 바꿔줘야 좋을지 모르겠습니다.. ㅜ
구글링했을때는
@app.route('/')
def home1():
return render_template('index1.html')
if __name__ == '__main__' :
app.degug = True
app.run()
위와 같이 작성해야하는 것으로 확인했는데, 무언가 부족한 것 같습니다..ㅜ
작성한 코드 및 에러 메세지
index.html
<!DOCTYPE html>
<html>
<head>
<title>W3.CSS Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
body {
font-family: "Times New Roman", Georgia, Serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Playfair Display";
letter-spacing: 5px;
}
.mycards {
margin: 20px auto 0px auto;
width: 95%;
max-width: 1200px;
}
body {
margin: 0;
}
.image-grid {
--gap: 16px;
--num-cols: 4;
--row-height: 300px;
box-sizing: border-box;
padding: var(--gap);
display: grid;
grid-template-columns: repeat(var(--num-cols), 1fr);
grid-auto-rows: var(--row-height);
gap: var(--gap);
}
.image-grid img {
width: 100%;
height: 100%;
object-fit: cover;
}
.image-grid-col-2 {
grid-column: span 2;
}
.image-grid-row-2 {
grid-row: span 2;
}
/* Anything udner 1024px */
@media screen and (max-width: 1024px) {
.image-grid {
--num-cols: 2;
--row-height: 200px;
}
}
.weekly {
margin-left: 12px;
}
ul {
list-style: none;
}
.myInput {
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;}
</style>
<script>
$(document).ready(function () {
food_get();
});
function food_get() {
$.ajax({
type: 'GET',
url: '/food',
data: {},
success: function (response) {
let rows = response['foods']
for (let i = 0; i < rows.length; i++) {
let name = rows[i]['name']
let url = rows[i]['url']
let star = rows[i]['star']
let comment = rows[i]['comment']
let num = rows[i]['num']
let star_img = '⭐'.repeat(star)
let temp_html = `
<li>
<a href="#">
<div class="col">
<div class="card h-100">
<img src="${url}"
class="card-img-top">
<div class="card-body">
<h5 class="card-title">${name}</h5>
<p>${star_img}</p>
<p class="mycomment">${comment}</p>
</div>
</div>
</div></a>
</li>`
$('#cards-box').append(temp_html)
}
}
})
}
function food_post() {
let name = $('#name').val()
let url = $('#url').val()
let star = $('#star').val()
let comment = $('#comment').val()
$.ajax({
type: 'POST',
url: '/food',
data: {name_give: name, url_give: url, star_give:star, comment_give:comment},
success: function (response) {
alert(response['msg'])
window.location.reload()
}
});
}
function close_box() {
$('#contact').hide()
}
function open_box() {
$('#contact').show()
}
function myFunction() {
// Declare variables
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById('myInput');
filter = input.value.toUpperCase();
ul = document.getElementById("cards-box");
li = ul.getElementsByTagName('li');
// Loop through all list items, and hide those who don't match the search query
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
</script>
</head>
<body>
<!-- Navbar (sit on top) -->
<div class="w3-top">
<div class="w3-bar w3-white w3-padding w3-card" style="letter-spacing:4px;">
<a href="#home" class="w3-bar-item w3-button">Gourmet au Catering</a>
<!-- Right-sided navbar links. Hide them on small screens -->
<div class="w3-right w3-hide-small">
<a href="#about" class="w3-bar-item w3-button">About</a>
<a href="#menu" class="w3-bar-item w3-button">Menu</a>
<a href="#contact" onclick="open_box()" class="w3-bar-item w3-button" id="contact_button">Contact</a>
</div>
</div>
</div>
<!-- Header -->
<header class="w3-display-container w3-content w3-wide" style="max-width:1600px;min-width:500px" id="home">
<img class="w3-image" src="/w3images/hamburger.jpg" alt="Hamburger Catering" width="1600" height="800">
<div class="w3-display-bottomleft w3-padding-large w3-opacity">
<h1 class="w3-xxlarge">Le Catering</h1>
</div>
</header>
<!-- Page content -->
<div class="w3-content" style="max-width:1100px">
<!-- About Section -->
<div class="w3-row w3-padding-64" id="about">
<div class="w3-col m6 w3-padding-large w3-hide-small">
<img src="/w3images/tablesetting2.jpg" class="w3-round w3-image w3-opacity-min" alt="Table Setting"
width="600" height="750">
</div>
<div class="w3-col m6 w3-padding-large">
<h1 class="w3-center">About Catering</h1><br>
<h5 class="w3-center">Tradition since 1889</h5>
<p class="w3-large">The Catering was founded in blabla by Mr. Smith in lorem ipsum dolor sit amet,
consectetur adipiscing elit consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute iruredolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur.We only use <span class="w3-tag w3-light-grey">seasonal</span> ingredients.</p>
<p class="w3-large w3-text-grey w3-hide-medium">Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod
temporincididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<h1 class="weekly">이번 주, 뭐 먹지?🍴😋</h1>
<div class="image-grid">
<a img class="image-grid-col-2 image-grid-row-2" href ="index1.html"><img src="https://img.siksinhot.com/place/1388034044161113.jpg"></a>
<a href = "https://www.naver.com"><img src="https://mblogthumb-phinf.pstatic.net/MjAyMTA4MTZfMTUy/MDAxNjI5MDQwMDI2NzU3.sGwS2MsbNYYToo8Lk1J-f9Fsyr7pjN23xpIsRiXMivIg.pbSXBBMeE513nkUmh0AZ3012GZYLJ-MqB_80H7w-4DAg.JPEG.gina171/1629039860219.jpg?type=w800"></a>
<a href = "https://www.naver.com"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSnnRPIbZdgX9bkmztnRCkWjMPBF2S6ti7f6A&usqp=CAU"></a>
<a href = "https://www.naver.com"><img src="https://mblogthumb-phinf.pstatic.net/MjAyMTA0MDRfMTY2/MDAxNjE3NDY1NDU2NTg4.hCWD6f7I7p4RKn1N6V-8g39p2M2SpWPNBo2V17vstIIg.ayE_Giwylj6gs_Ixem_JzepYB9ydmwO1tIGzlihKLBMg.JPEG.wldbs925/IMG_1911.jpg?type=w800"></a>
<a href = "https://www.naver.com"><img src="https://mblogthumb-phinf.pstatic.net/MjAyMDAzMjZfMjQz/MDAxNTg1MTg5NDcyNDEz.prgFzFo3fKU9Z_C6_OjfjuT6fo9OO3I1OwMbuKBsRawg.ZnfwSJ5U1cRVHn363yq8Wr2J7Jm7TLaFx1kC3wEDah8g.JPEG.kimi_95/SE-a5ba94d6-3091-4794-b47a-24cb579a2797.jpg?type=w800"></a>
</div>
<hr>
<!-- Menu Section -->
<div>
<input type="text" id="myInput" class="myInput" onkeyup="myFunction()" placeholder="Search for names..">
</div>
<div class="mycards">
<ul>
<div class="row row-cols-1 row-cols-md-4 g-4" id="cards-box">
</div>
</ul>
</div>
</div>
<hr>
<!-- Contact Section -->
<div class="w3-container w3-padding-64" id="contact">
<h1>맛집 등록</h1><br>
<p>여러분의 최애 맛집을 공유해주세요!!</p>
<p class="w3-text-blue-grey w3-large"><b>맛집 이름, 이미지, 별점, 한줄평을 남겨주세요!</b></p>
<p>맛집 음식 사진 공유를 위해 이미지 url 남기기는 필수!!❤</p>
<form action="/action_page.php" target="_blank">
<p><input id="name" class="w3-input w3-padding-16" type="text" placeholder="맛집 이름" required name="Name"></p>
<p><input id="url" class="w3-input w3-padding-16" type="text" placeholder="이미지 URL" required name="Image Url">
</p>
<div class="input-group mb-3">
<label class="input-group-text">별점</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">
<p><input class="w3-input w3-padding-16" type="text" placeholder="한줄평" required
name="Comment" id="comment"></p>
<p>
</div>
<div class="mybtns">
<button onclick="food_post()" type="button" class="btn btn-dark">Save</button>
<button onclick="close_box()" type="button" class="btn btn-outline-dark">Close</button>
</div>
</p>
</form>
</div>
<!-- End page content -->
</div>
<!-- Footer -->
<footer class="w3-center w3-light-grey w3-padding-32">
<p>Powered by <a href="https://www.w3schools.com/w3css/default.asp" title="W3.CSS" target="_blank"
class="w3-hover-text-green">w3.css</a></p>
</footer>
</body>
</html>
index1.html
<!DOCTYPE html>
<html>
<head>
<title>W3.CSS Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
body {
font-family: "Times New Roman", Georgia, Serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Playfair Display";
letter-spacing: 5px;
}
.w3-col {
margin-top: 30px;
}
.w3-round {
margin-top : 120px;
}
</style>
</head>
<body>
<!-- Navbar (sit on top) -->
<div class="w3-top">
<div class="w3-bar w3-white w3-padding w3-card" style="letter-spacing:3px;">
<a href="#home" class="w3-bar-item w3-button">이번 주, 뭐 먹지?</a>
<!-- Right-sided navbar links. Hide them on small screens -->
<div class="w3-right w3-hide-small">
<a href="#contact" class="w3-bar-item w3-button">Back to main</a>
</div>
</div>
</div>
<!-- Page content -->
<div class="w3-content" style="max-width:1100px">
<hr>
<!-- Menu Section -->
<div class="w3-row w3-padding-64" id="menu">
<div class="w3-col l6 w3-padding-large">
<h1 class="w3-center">홍대 닭날다</h1><br>
<h4>주소</h4>
<p class="w3-text-grey">서울 마포구 월드컵로 45-1</p><br>
<h4>추천 메뉴</h4>
<p class="w3-text-grey">오리지날 철판 26.5</p><br>
<p class="w3-text-grey">뉴우 철판 29.0</p><br>
<p class="w3-text-grey">닭꼬치 구이 9.0</p><br>
<h4>별점</h4>
<p class="w3-text-grey">⭐⭐⭐⭐</p><br>
<h4>한줄평</h4>
<p class="w3-text-grey">특별한 치킨이 맛보고 싶다면 이곳으로!!</p><br>
</div>
<div class="w3-col l6">
<img src="https://img.siksinhot.com/place/1388034044161113.jpg" class="w3-round w3-image w3-opacity-min" alt="Menu"
style="width:100%">
</div>
</div>
<hr>
</body>
</html>
app.py
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
# import requests
# from bs4 import BeautifulSoup
from pymongo import MongoClient
client = MongoClient('mongodb+srv://test:sparta@cluster0.8y9lufi.mongodb.net/Cluster0?retryWrites=true&w=majority')
db = client.dbsparta
@app.route('/')
def home():
return render_template('index.html')
@app.route('/')
def home1():
return render_template('index1.html')
if __name__ == '__main__' :
app.degug = True
app.run()
@app.route("/food", methods=["POST"])
def food_post():
name_receive = request.form['name_give']
url_receive = request.form['url_give']
star_receive = request.form['star_give']
comment_receive = request.form['comment_give']
food_list = list(db.foodie.find({}, {'_id': False}))
count = len(food_list) + 1
doc = {
'num': count,
'name': name_receive,
'url': url_receive,
'star': star_receive,
'comment': comment_receive
}
db.foodie.insert_one(doc)
return jsonify({'msg':'저장 완료!'})
# @app.route("/movie/delete", methods=["POST"])
# def movie_delete():
# num_receive = request.form['num_give']
# db.movies.delete_one({'num': int(num_receive)})
# return jsonify({'msg': '삭제 완료!'})
@app.route("/food", methods=["GET"])
def food_get():
food_list = list(db.foodie.find({}, {'_id': False}))
food_list.reverse()
return jsonify({'foods': food_list})
if __name__ == '__main__':
app.run('0.0.0.0', port=5000, debug=True)
댓글 알림
