전날 받은 상세 페이지 수정 코드를 토대로 sub1 ~ sub4의 코드를 수정했다.
받은 그대로에서 몇몇 변경사항이 있다.
1. mypost클래스를 담을 div가 없어 부모 div와 id='test1'을 부여했다.
2. 상세 설명과 감독/출연진 정보가 박스를 벗어나는 경우가 생겨 h1에서 각각 h4, h5로 사이즈를 줄였다. 하지만 상세설명이 너무 긴 경우 아직도 박스를 벗어나는 경우가 있어 제목, 상세설명, 감독/출연진에 각각 div를 부여해 길이에 따라 글씨 크기가 조정되도록 건의할 생각이다.
3. 등록자 comment도 너무 크고 누가 적은 것인지 제대로 표기되어있지 않아 텍스트와 사이즈에 수정을 했다.(h1 -> h3)
추가 수정 필요 사항
1. 상세 설명 페이지에서 로고 클릭 시 메인페이지로 넘어가지 않는 문제 수정
2. 앞서 말했던 제목, 상세 설명, 감독/출연진 각각 자동 사이즈 조절 기능 추가 혹은 각 영화에 맞게 사이즈 조정
3. 개인 관람평이 등록되지 않는 문제 수정
수정된 코드
index.html => 서지인 님
<!doctype html>
<html lang="ko-kr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- jQuary -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- bootstrap -->
<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://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<title>비전5 영화 (마우스 오버)</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&family=Nanum+Myeongjo&display=swap');
* {
font-family: 'Gowun Dodum', sans-serif;
font-family: 'Nanum Myeongjo', serif;
}
.mytitle {
position: fixed;
color: black;
background-color: #fff;
width: 100%;
height: 150px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
z-index: 3;
}
.main {
padding: 200px 0 100px 0;
height: 2500px;
}
.mytitle>h1 {
font-size: 50px;
position: relative;
left: 50px;
}
.mytitle > h1 > a {
color: black;
}
.mytitle>button {
width: 200px;
height: 50px;
border-radius: 50px;
margin: 30px 20px 20px auto;
}
.mycards {
width: 80%;
margin: 0 auto;
}
.card-body {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.card-title {
margin: 10px auto 10px 10px;
text-size-adjust: auto;
}
.screen {
position: relative;
overflow: hidden;
}
.card-img-top {
filter: brightness(1);
}
.card-img-top:hover {
filter: brightness(0.3);
}
.top {
pointer-events: none;
position: absolute;
bottom: 100%;
left: 10px;
z-index: 2;
color: white;
text-size-adjust: auto;
font-weight: 500;
}
.screen:hover .top {
top: 5%;
}
.btn>a {
text-decoration: none;
/* 링크의 밑줄 제거 */
color: inherit;
/* 링크의 색상 제거 */
}
a {
text-decoration: none;
}
</style>
<script>
//DB에서 영화 정보를 가져 온 후 출력
$(document).ready(function () {
show_order1();
});
function show_order1() {
fetch("/movies").then(res => res.json()).then(data => {
let rows = data['result']
rows.forEach((a) => {
let title = a['title']
let desc = a['desc']
let image = a['image']
let comment = a['comment']
let star = a['star']
let director = a['director']
let character1 = a['character1']
let character2 = a['character2']
let character3 = a['character3']
let stars = ('⭐').repeat(star)
let temp_html = `<div class="col">
<div class="card">
<a href="{{url_for('input')}}">
<div class="screen">
<div class="top">${desc}</div>
<img src="${image}"
class="card-img-top" alt="...">
</div>
</a>
<div class="card-body">
<h5 class="card-title">${title}</h5>
<p>${stars}</p>
</div>
</div>
</div>`
$('#cards').append(temp_html)
})
})
}
</script>
</head>
<body>
<div class="mytitle">
<h1><a href={{url_for('home')}}>비전5 영화</a></h1>
<!-- 영화 기록 버튼 -->
<button type="button" class="btn btn-outline-dark"><a href="{{url_for('input')}}">영화 기록</a></button>
</div>
<div class="main">
<h2 style="width: 80%; margin: 50px auto 30px auto; font-weight: 900;">비전5가 추천하는 영화 best4</h2>
<!-- 기본 추천 카드 출력 -->
<div class="mycards">
<div id="cards" class="row row-cols-1 row-cols-md-4 g-3">
<div class="col">
<div class="card">
<a href={{url_for('sub1')}}>
<div class="screen">
<div class="top">‘가모라’를 잃고 슬픔에 빠져 있던 ‘피터 퀼’이 위기에 처한 은하계와 동료를 지키기 위해 다시 한번 가디언즈 팀과 힘을 모으고,
성공하지 못할 경우 그들의 마지막이 될지도 모르는 미션에 나서는 이야기</div>
<img src="https://img.cgv.co.kr/Movie/Thumbnail/Poster/000086/86883/86883_185.jpg"
class="card-img-top" alt="...">
</div>
</a>
<div class="card-body">
<h5 class="card-title">가디언즈 오브 갤럭시-Volume 3</h5>
<p>⭐⭐⭐⭐⭐</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<a href={{url_for('sub2')}}>
<div class="screen">
<div class="top">아무리 빨리 달려도 과거를 앞지를 순 없다 돔(빈 디젤)과 그의 패밀리 앞에 나타난 운명의 적 단테(제이슨 모모아). 과거의 그림자는 돔의 모든 것을 파괴하기 위해 달려온다. 단테에 의해 산산히 흩어진 패밀리들은 모두 목숨을 걸고 맞서야 하는 함정에 빠지고 마는데.. 달리거나 죽거나, 그들의 마지막 질주가 시작된다!</div>
<img src="https://img.cgv.co.kr/Movie/Thumbnail/Poster/000086/86996/86996_185.jpg"
class="card-img-top" alt="...">
</div>
</a>
<div class="card-body">
<h5 class="card-title">분노의 질주-라이드 오어 다이</h5>
<p>⭐⭐⭐⭐⭐</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<a href={{url_for('sub3')}}>
<div class="screen">
<div class="top">사회초년생 ‘도하’와 인디 뮤지션 ‘태인’이 장거리 연애를 시작하면서 벌이는 언택트 러브 스토리</div>
<img src="https://img.cgv.co.kr/Movie/Thumbnail/Poster/000086/86912/86912_185.jpg"
class="card-img-top" alt="...">
</div>
</a>
<div class="card-body">
<h5 class="card-title">롱디</h5>
<p>⭐⭐⭐⭐⭐</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<a href={{url_for('sub4')}}>
<div class="screen">
<div class="top">'붉은 봉투를 줍는 자, 운명을 거스를 수 없다!' 혈기왕성한 형사 우밍한은 중요한 사건 현장에서 도로에 흩어진 증거물을 수집하던 중 의문의 붉은 봉투를 발견하고 무심코 줍는다. 그때부터 밍한에게 벌어지는 불길한 사건들! 자신에게 다가온 '운명'을 한사코 거부하던 밍한은 거듭되는 생명의 위협에 마지못해 인생 최대의 결심을 하는데... 얼결에 '부부'가 된 귀신과 최악의 빌런을 잡기 위해 인간+귀신 콤비가 벌이는 극강의 공조 수사! 코믹과 액션을 버무리고 감동과 반전까지 가미한, 풀옵션 오감으로 즐기는 블록버스터. 인류애 넘치는 콤비의 격정적인 공조가 마침내 시작된다! 이 콤비도, 두 사람의 공조 수사도 완전히 다 미쳤다!!!</div>
<img src="https://img.cgv.co.kr/Movie/Thumbnail/Poster/000087/87003/87003_185.jpg"
class="card-img-top" alt="...">
</div>
</a>
<div class="card-body">
<h5 class="card-title">메리 마이 데드 바디</h5>
<p>⭐⭐⭐⭐⭐</p>
</div>
</div>
</div>
<h2 style="width: 80%; margin: 80px auto 30px 0px; font-weight: 900;">유저가 추천하는 영화</h2>
</div>
<!-- 현재 위치에 스크립트 내용 출력 -->
</div>
</div>
</div>
</body>
</html>
input.html => 강정훈 님
<!doctype html>
<html lang="ko-kr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- jQuary -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- bootstrap -->
<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://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<title>비전5 영화 (마우스 오버)</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&family=Nanum+Myeongjo&display=swap');
* {
font-family: 'Gowun Dodum', sans-serif;
font-family: 'Nanum Myeongjo', serif;
}
.mytitle {
position: fixed;
color: black;
background-color: #fff;
width: 100%;
height: 150px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
z-index: 3;
}
.main {
padding: 200px 0 100px 0;
height: 2500px;
}
.mytitle>h1 {
font-size: 50px;
position: relative;
left: 50px;
}
.mytitle>button {
width: 200px;
height: 50px;
border-radius: 50px;
margin: 30px 20px 20px auto;
}
.mycards {
width: 80%;
margin: 0 auto;
}
.card-body {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.card-title {
margin: 10px auto 10px 10px;
text-size-adjust: auto;
}
.screen {
position: relative;
overflow: hidden;
}
.card-img-top {
filter: brightness(1);
}
.card-img-top:hover {
filter: brightness(0.3);
}
.top {
pointer-events: none;
position: absolute;
bottom: 100%;
left: 10px;
z-index: 2;
color: white;
text-size-adjust: auto;
font-weight: 500;
}
.screen:hover .top {
top: 5%;
}
.btn>a {
text-decoration: none;
/* 링크의 밑줄 제거 */
color: inherit;
/* 링크의 색상 제거 */
}
/* 여기부터 */
/* 등록팝업 */
.popup_content{
visibility: hidden;
background-color: white;
border-radius: 8px;
border: solid;
width: 450px;
height: 550px;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
margin-bottom: 40px;
text-align: center;
z-index: 100;
transition:all .35s;
}
/* 등록팝업 안 텍스트박스들 */
.textbox{
width: 90%;
padding-left: 10px;
font-size: 20px;
border: 2px solid #bbb;
border-radius: 8px;
margin-top: 20px;
resize: none;
}
/* 등록 취소 버튼 */
.btn-option{
width: 150px;
height: 50px;
border: 2px solid #ddd;
background-color: white;
border-radius: 8px;
cursor: pointer;
}
.btn-option:hover{
background-color: #bbb;
}
</style>
<script>
//DB에서 영화 정보를 가져 온 후 출력
$(document).ready(function () {
show_order1();
});
function show_order1() {
fetch("/movies").then(res => res.json()).then(data => {
let rows = data['result']
$('#cards').empty()
rows.forEach((a) => {
let title = a['title']
let desc = a['desc']
let image = a['image']
let comment = a['comment']
let star = a['star']
let director = a['director']
let character1 = a['character1']
let character2 = a['character2']
let character3 = a['character3']
let stars = ('⭐').repeat(star)
let temp_html = `<div class="col">
<div class="card">
<div class="screen">
<div class="top">${desc}</div>
<img src="${image}"
class="card-img-top" alt="...">
</div>
<div class="card-body">
<h5 class="card-title">${title}</h5>
<p>${stars}</p>
</div>
</div>
</div>`
$('#cards').append(temp_html)
})
})
}
// 여기부터 영화등록
function popupOpen(){
// document.getElementById('popup').style.display= 'inline';
document.getElementById('popup').style.visibility='visible';
}
// 등록함수
function onResgistBtn(){
let url = $('#url').val();
let comment = $('#comment').val();
let star = $('#star').val();
let formData = new FormData();
formData.append("url_give", url);
formData.append("comment_give", comment);
formData.append("star_give", star);
fetch('/input',{method: "POST", body: formData}).then((res) => res.json()).then((data) => {
alert(data['msg'])
window.location.reload();
// window.location.reload(); 다시 메인화면으로 돌아가기
})
}
function onCancelBtn(){
// document.getElementById('popup').style.display = 'none';
document.getElementById('popup').style.visibility = 'hidden';
//메인페이지로 돌아가기
}
</script>
</head>
<body>
<div class="mytitle">
<h1>비전5 영화</h1>
<!-- 영화 기록 버튼 -->
<button onclick="popupOpen()" type="button" class="btn btn-outline-dark">영화 기록</button>
</div>
<div class="main">
<div id="popup" class="popup_content">
<h1>영화 등록하기</h1>
<!-- url입력 텍스트박스 -->
<input id="url" class="textbox" placeholder="url입력" type="text" style="height: 40px;">
<!-- 코멘트 텍스트박스 -->
<textarea id="comment" class="textbox" placeholder="코멘트를 입력해주세요." rows="8" cols="30" name="coments"></textarea>
<!-- 별점부분 -->
<div class="input-group mb-3" style="width: 90%; margin-left: 5%;">
<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 style="margin-top: 50px; background-color: transparent; display: block;">
<button onclick="onResgistBtn()" class="btn-option">등록</button>
<button onclick="onCancelBtn()" class="btn-option">취소</button>
</div>
</div>
<h2 style="width: 80%; margin: 50px auto 30px auto; font-weight: 900;">비전5가 추천하는 영화 best4</h2>
<!-- 기본 추천 카드 출력 -->
<div class="mycards">
<div id="card" class="row row-cols-1 row-cols-md-4 g-3">
<div class="col">
<div class="card">
<a href={{url_for('sub1')}}>
<div class="screen">
<div class="top">‘가모라’를 잃고 슬픔에 빠져 있던 ‘피터 퀼’이 위기에 처한 은하계와 동료를 지키기 위해 다시 한번 가디언즈 팀과 힘을 모으고,
성공하지 못할 경우 그들의 마지막이 될지도 모르는 미션에 나서는 이야기</div>
<img src="https://img.cgv.co.kr/Movie/Thumbnail/Poster/000086/86883/86883_185.jpg"
class="card-img-top" alt="...">
</div>
</a>
<div class="card-body">
<h5 class="card-title">가디언즈 오브 갤럭시-Volume 3</h5>
<p>⭐⭐⭐⭐⭐</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<a href={{url_for('sub2')}}>
<div class="screen">
<div class="top">아무리 빨리 달려도 과거를 앞지를 순 없다 돔(빈 디젤)과 그의 패밀리 앞에 나타난 운명의 적 단테(제이슨 모모아). 과거의 그림자는 돔의 모든 것을 파괴하기 위해 달려온다. 단테에 의해 산산히 흩어진 패밀리들은 모두 목숨을 걸고 맞서야 하는 함정에 빠지고 마는데.. 달리거나 죽거나, 그들의 마지막 질주가 시작된다!</div>
<img src="https://img.cgv.co.kr/Movie/Thumbnail/Poster/000086/86996/86996_185.jpg"
class="card-img-top" alt="...">
</div>
</a>
<div class="card-body">
<h5 class="card-title">분노의 질주-라이드 오어 다이</h5>
<p>⭐⭐⭐⭐⭐</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<a href={{url_for('sub3')}}>
<div class="screen">
<div class="top">사회초년생 ‘도하’와 인디 뮤지션 ‘태인’이 장거리 연애를 시작하면서 벌이는 언택트 러브 스토리</div>
<img src="https://img.cgv.co.kr/Movie/Thumbnail/Poster/000086/86912/86912_185.jpg"
class="card-img-top" alt="...">
</div>
</a>
<div class="card-body">
<h5 class="card-title">롱디</h5>
<p>⭐⭐⭐⭐⭐</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<a href={{url_for('sub4')}}>
<div class="screen">
<div class="top">'붉은 봉투를 줍는 자, 운명을 거스를 수 없다!' 혈기왕성한 형사 우밍한은 중요한 사건 현장에서 도로에 흩어진 증거물을 수집하던 중 의문의 붉은 봉투를 발견하고 무심코 줍는다. 그때부터 밍한에게 벌어지는 불길한 사건들! 자신에게 다가온 '운명'을 한사코 거부하던 밍한은 거듭되는 생명의 위협에 마지못해 인생 최대의 결심을 하는데... 얼결에 '부부'가 된 귀신과 최악의 빌런을 잡기 위해 인간+귀신 콤비가 벌이는 극강의 공조 수사! 코믹과 액션을 버무리고 감동과 반전까지 가미한, 풀옵션 오감으로 즐기는 블록버스터. 인류애 넘치는 콤비의 격정적인 공조가 마침내 시작된다! 이 콤비도, 두 사람의 공조 수사도 완전히 다 미쳤다!!!</div>
<img src="https://img.cgv.co.kr/Movie/Thumbnail/Poster/000087/87003/87003_185.jpg"
class="card-img-top" alt="...">
</div>
</a>
<div class="card-body">
<h5 class="card-title">메리 마이 데드 바디</h5>
<p>⭐⭐⭐⭐⭐</p>
</div>
</div>
</div>
</div>
</div>
<h2 style="width: 80%; margin: 80px auto 30px auto; font-weight: 900;">유저가 추천하는 영화</h2>
<!-- 현재 위치에 스크립트 내용 출력 -->
<div class="mycards">
<div id="cards" class="row row-cols-1 row-cols-md-4 g-3">
<div class="col">
<div class="card">
<a href="">
<div class="screen">
<div class="top">영화 설명</div>
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
</div>
</a>
<div class="card-body">
<h5 class="card-title">영화 제목이 들어갑니다.</h5>
<p>⭐⭐⭐</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
sub1.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>
<style>
@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&family=Nanum+Myeongjo&display=swap');
* {
font-family: 'Gowun Dodum', sans-serif;
font-family: 'Nanum Myeongjo', serif;
}
.mylogo {
text-indent: 25px;
position: fixed;
color: black;
background-color: #fff;
width: 100%;
height: 150px;
top: 0%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
z-index: 3;
}
.mypost {
width: 1000px;
margin: 20px auto 20px auto;
padding: 20px 20px 20px 20px;
box-shadow: 0px 0px 3px 0px gray;
}
.mytitle {
margin: 20px auto 20px auto;
padding: 20px 20px 20px 20px;
border: solid 2px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.mytxt {
text-align: center;
margin: 20px auto 20px auto;
padding: 20px 20px 20px 20px;
border: solid 2px;
}
.mybtn>button:hover {
border: 2px solid black;
}
.mybtn {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.mybtn>button {
width: 200px;
height: 50px;
background-color: transparent;
border: 1px solid black;
color: black;
border-radius: 50px;
margin-top: 20px;
margin-right: 30px;
}
.mytitle2 {
width: 500px;
height: 400px;
margin: 20px 0px 20px 20px;
padding: 20px 20px 20px 20px;
border: 1px solid black;
}
.myposter {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-right: 30px;
}
</style>
<script>
// //DB에서 영화 정보를 가져 온 후 출력
$(document).ready(function () {
show_order2();
});
function show_order2() {
fetch("/movies1").then(res => res.json()).then(data => {
let rows = data['result1']
$('#test1').empty()
rows.forEach((a) => {
let title = a['title']
let desc = a['desc']
let image = a['image']
let comment = a['comment']
let star = a['star']
let director = a['director']
let character1 = a['character1']
let character2 = a['character2']
let character3 = a['character3']
let stars = ('⭐').repeat(star)
let temp_html1 = `<div class="mypost">
<div class="mytitle">
<br>
<div class="myposter">
<br>
<div><img src="${image}"
style="width:300px; height:400px;" /> </div>
<div> <h1> ${stars} </h1> </div>
</div>
<div class="mytitle2">
<div> <h1> ${title} </h1> </div>
<br>
<div> <h4> ${desc} </h4> </div>
<br>
<div> <h5> 감독 : ${director} / 출연진 : ${character1}, ${character2}, ${character3} </h5> </div>
</div>
</div>
<div class="mytxt">
<h3> 등록자 관람평 : ${comment} </h3>
</div>
<div class="mytxt">
<h1> 개인 관람평 </h1>
<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>
<div class="mybtn">
<button type="button" class="btn btn-outline-dark">등록하기</button>
</div>
<br>
<table class="table">
<thead>
<tr>
<th scope="col">닉네임</th>
<th scope="col">관람평</th>
<th scope="col">삭제</th>
</tr>
</thead>
</div>`
$('#test1').append(temp_html1)
})
})
}
// --------------관람평 등록, 삭제----------------------
// B : 데이터 받기
$(document).ready(function () {
show_order();
});
function show_order() {
fetch("/subB1").then(res => res.json()).then(data => {
let rows = data['result']
rows.forEach((a) => {
let id = a['id']
let comment = a['comment']
// 데이터 입력
let temp_html = `<tr>
<td>${id}</td>
<td> ${comment} </td>
<td> <button onclick ="del('${id}'+'${comment}')">삭제</button></td>
</tr>`
$('#a11').append(temp_html)
})
})
}
// A : 데이터 보내기
function save() {
let id = $('#name').val()
let comment = $('#comment').val()
let formData = new FormData()
formData.append("id_give", id)
formData.append("comment_give", comment)
fetch("/subA1", { method: "post", body: formData }).then(res => res.json()).then(data => {
alert(data['msg'])
window.location.reload()
})
}
// 데이터 삭제 기능
function del(a) {
let formData = new FormData()
let id = a
formData.append("id_del", id)
fetch("/subC1", { method: "post", body: formData }).then(res => res.json()).then(data => {
alert(data['del'])
window.location.reload()
})
}
</script>
</head>
<body>
<div class=mylogo>
<br>
<p style="font-size:50px;"> 비전5 영화 </p>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="test1">
<div class="mypost">
<div class="mytitle">
<br>
<div class="myposter">
<br>
<div><img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
style="width:300px; height:400px;" /> </div>
<div>
<h1> ⭐⭐⭐ </h1>
</div>
</div>
<div class="mytitle2">
<div>
<h1> 제목 </h1>
</div>
<br>
<div>
<h4> 상세설명 </h4>
</div>
<br>
<div>
<h5> 감독 : 감독이름 / 출연진 : 출연자1, 출연자2, 출연자3 </h5>
</div>
</div>
</div>
<div class="mytxt">
<h1> 코멘트 </h1>
</div>
<div class="mytxt">
<h1> 개인 관람평 </h1>
<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>
<div class="mybtn">
<button type="button" class="btn btn-outline-dark">등록하기</button>
</div>
<br>
<table class="table">
<thead>
<tr>
<th scope="col">닉네임</th>
<th scope="col">관람평</th>
<th scope="col">삭제</th>
</tr>
</thead>
</div>
</div>
</body>
sub2.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>
<style>
@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&family=Nanum+Myeongjo&display=swap');
* {
font-family: 'Gowun Dodum', sans-serif;
font-family: 'Nanum Myeongjo', serif;
}
.mylogo {
text-indent: 25px;
position: fixed;
color: black;
background-color: #fff;
width: 100%;
height: 150px;
top: 0%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
z-index: 3;
}
.mypost {
width: 1000px;
margin: 20px auto 20px auto;
padding: 20px 20px 20px 20px;
box-shadow: 0px 0px 3px 0px gray;
}
.mytitle {
margin: 20px auto 20px auto;
padding: 20px 20px 20px 20px;
border: solid 2px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.mytxt {
text-align: center;
margin: 20px auto 20px auto;
padding: 20px 20px 20px 20px;
border: solid 2px;
}
.mybtn>button:hover {
border: 2px solid black;
}
.mybtn {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.mybtn>button {
width: 200px;
height: 50px;
background-color: transparent;
border: 1px solid black;
color: black;
border-radius: 50px;
margin-top: 20px;
margin-right: 30px;
}
.mytitle2 {
width: 500px;
height: 400px;
margin: 20px 0px 20px 20px;
padding: 20px 20px 20px 20px;
border: 1px solid black;
}
.myposter {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-right: 30px;
}
</style>
<script>
// //DB에서 영화 정보를 가져 온 후 출력
$(document).ready(function () {
show_order2();
});
function show_order2() {
fetch("/movies2").then(res => res.json()).then(data => {
let rows = data['result2']
$('#test1').empty()
rows.forEach((a) => {
let title = a['title']
let desc = a['desc']
let image = a['image']
let comment = a['comment']
let star = a['star']
let director = a['director']
let character1 = a['character1']
let character2 = a['character2']
let character3 = a['character3']
let stars = ('⭐').repeat(star)
let temp_html1 = `<div class="mypost">
<div class="mytitle">
<br>
<div class="myposter">
<br>
<div><img src="${image}"
style="width:300px; height:400px;" /> </div>
<div> <h1> ${stars} </h1> </div>
</div>
<div class="mytitle2">
<div> <h1> ${title} </h1> </div>
<br>
<div> <h4> ${desc} </h4> </div>
<br>
<div> <h5> 감독 : ${director} / 출연진 : ${character1}, ${character2}, ${character3} </h5> </div>
</div>
</div>
<div class="mytxt">
<h3> 등록자 관람평 : ${comment} </h3>
</div>
<div class="mytxt">
<h1> 개인 관람평 </h1>
<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>
<div class="mybtn">
<button type="button" class="btn btn-outline-dark">등록하기</button>
</div>
<br>
<table class="table">
<thead>
<tr>
<th scope="col">닉네임</th>
<th scope="col">관람평</th>
<th scope="col">삭제</th>
</tr>
</thead>
</div>`
$('#test1').append(temp_html1)
})
})
}
// --------------관람평 등록, 삭제----------------------
// B : 데이터 받기
$(document).ready(function () {
show_order();
});
function show_order() {
fetch("/subB2").then(res => res.json()).then(data => {
let rows = data['result']
rows.forEach((a) => {
let id = a['id']
let comment = a['comment']
// 데이터 입력
let temp_html = `<tr>
<td>${id}</td>
<td> ${comment} </td>
<td> <button onclick ="del('${id}'+'${comment}')">삭제</button></td>
</tr>`
$('#a11').append(temp_html)
})
})
}
// A : 데이터 보내기
function save() {
let id = $('#name').val()
let comment = $('#comment').val()
let formData = new FormData()
formData.append("id_give", id)
formData.append("comment_give", comment)
fetch("/subA2", { method: "post", body: formData }).then(res => res.json()).then(data => {
alert(data['msg'])
window.location.reload()
})
}
// 데이터 삭제 기능
function del(a) {
let formData = new FormData()
let id = a
formData.append("id_del", id)
fetch("/subC2", { method: "post", body: formData }).then(res => res.json()).then(data => {
alert(data['del'])
window.location.reload()
})
}
</script>
</head>
<body>
<div class=mylogo>
<br>
<p style="font-size:50px;"> 비전5 영화 </p>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="test1">
<div class="mypost">
<div class="mytitle">
<br>
<div class="myposter">
<br>
<div><img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
style="width:300px; height:400px;" /> </div>
<div>
<h1> ⭐⭐⭐ </h1>
</div>
</div>
<div class="mytitle2">
<div>
<h1> 제목 </h1>
</div>
<br>
<div>
<h4> 상세설명 </h4>
</div>
<br>
<div>
<h5> 감독 : 감독이름 / 출연진 : 출연자1, 출연자2, 출연자3 </h5>
</div>
</div>
</div>
<div class="mytxt">
<h1> 코멘트 </h1>
</div>
<div class="mytxt">
<h1> 개인 관람평 </h1>
<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>
<div class="mybtn">
<button type="button" class="btn btn-outline-dark">등록하기</button>
</div>
<br>
<table class="table">
<thead>
<tr>
<th scope="col">닉네임</th>
<th scope="col">관람평</th>
<th scope="col">삭제</th>
</tr>
</thead>
</div>
</div>
</body>
sub3.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>
<style>
@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&family=Nanum+Myeongjo&display=swap');
* {
font-family: 'Gowun Dodum', sans-serif;
font-family: 'Nanum Myeongjo', serif;
}
.mylogo {
text-indent: 25px;
position: fixed;
color: black;
background-color: #fff;
width: 100%;
height: 150px;
top: 0%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
z-index: 3;
}
.mypost {
width: 1000px;
margin: 20px auto 20px auto;
padding: 20px 20px 20px 20px;
box-shadow: 0px 0px 3px 0px gray;
}
.mytitle {
margin: 20px auto 20px auto;
padding: 20px 20px 20px 20px;
border: solid 2px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.mytxt {
text-align: center;
margin: 20px auto 20px auto;
padding: 20px 20px 20px 20px;
border: solid 2px;
}
.mybtn>button:hover {
border: 2px solid black;
}
.mybtn {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.mybtn>button {
width: 200px;
height: 50px;
background-color: transparent;
border: 1px solid black;
color: black;
border-radius: 50px;
margin-top: 20px;
margin-right: 30px;
}
.mytitle2 {
width: 500px;
height: 400px;
margin: 20px 0px 20px 20px;
padding: 20px 20px 20px 20px;
border: 1px solid black;
}
.myposter {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-right: 30px;
}
</style>
<script>
// //DB에서 영화 정보를 가져 온 후 출력
$(document).ready(function () {
show_order2();
});
function show_order2() {
fetch("/movies3").then(res => res.json()).then(data => {
let rows = data['result3']
$('#test1').empty()
rows.forEach((a) => {
let title = a['title']
let desc = a['desc']
let image = a['image']
let comment = a['comment']
let star = a['star']
let director = a['director']
let character1 = a['character1']
let character2 = a['character2']
let character3 = a['character3']
let stars = ('⭐').repeat(star)
let temp_html1 = `<div class="mypost">
<div class="mytitle">
<br>
<div class="myposter">
<br>
<div><img src="${image}"
style="width:300px; height:400px;" /> </div>
<div> <h1> ${stars} </h1> </div>
</div>
<div class="mytitle2">
<div> <h1> ${title} </h1> </div>
<br>
<div> <h4> ${desc} </h4> </div>
<br>
<div> <h5> 감독 : ${director} / 출연진 : ${character1}, ${character2}, ${character3} </h5> </div>
</div>
</div>
<div class="mytxt">
<h3> 등록자 관람평 : ${comment} </h3>
</div>
<div class="mytxt">
<h1> 개인 관람평 </h1>
<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>
<div class="mybtn">
<button type="button" class="btn btn-outline-dark">등록하기</button>
</div>
<br>
<table class="table">
<thead>
<tr>
<th scope="col">닉네임</th>
<th scope="col">관람평</th>
<th scope="col">삭제</th>
</tr>
</thead>
</div>`
$('#test1').append(temp_html1)
})
})
}
// --------------관람평 등록, 삭제----------------------
// B : 데이터 받기
$(document).ready(function () {
show_order();
});
function show_order() {
fetch("/subB3").then(res => res.json()).then(data => {
let rows = data['result']
rows.forEach((a) => {
let id = a['id']
let comment = a['comment']
// 데이터 입력
let temp_html = `<tr>
<td>${id}</td>
<td> ${comment} </td>
<td> <button onclick ="del('${id}'+'${comment}')">삭제</button></td>
</tr>`
$('#a11').append(temp_html)
})
})
}
// A : 데이터 보내기
function save() {
let id = $('#name').val()
let comment = $('#comment').val()
let formData = new FormData()
formData.append("id_give", id)
formData.append("comment_give", comment)
fetch("/subA3", { method: "post", body: formData }).then(res => res.json()).then(data => {
alert(data['msg'])
window.location.reload()
})
}
// 데이터 삭제 기능
function del(a) {
let formData = new FormData()
let id = a
formData.append("id_del", id)
fetch("/subC3", { method: "post", body: formData }).then(res => res.json()).then(data => {
alert(data['del'])
window.location.reload()
})
}
</script>
</head>
<body>
<div class=mylogo>
<br>
<p style="font-size:50px;"> 비전5 영화 </p>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="test1">
<div class="mypost">
<div class="mytitle">
<br>
<div class="myposter">
<br>
<div><img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
style="width:300px; height:400px;" /> </div>
<div>
<h1> ⭐⭐⭐ </h1>
</div>
</div>
<div class="mytitle2">
<div>
<h1> 제목 </h1>
</div>
<br>
<div>
<h4> 상세설명 </h4>
</div>
<br>
<div>
<h5> 감독 : 감독이름 / 출연진 : 출연자1, 출연자2, 출연자3 </h5>
</div>
</div>
</div>
<div class="mytxt">
<h1> 코멘트 </h1>
</div>
<div class="mytxt">
<h1> 개인 관람평 </h1>
<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>
<div class="mybtn">
<button type="button" class="btn btn-outline-dark">등록하기</button>
</div>
<br>
<table class="table">
<thead>
<tr>
<th scope="col">닉네임</th>
<th scope="col">관람평</th>
<th scope="col">삭제</th>
</tr>
</thead>
</div>
</div>
</body>
sub4.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>
<style>
@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&family=Nanum+Myeongjo&display=swap');
* {
font-family: 'Gowun Dodum', sans-serif;
font-family: 'Nanum Myeongjo', serif;
}
.mylogo {
text-indent: 25px;
position: fixed;
color: black;
background-color: #fff;
width: 100%;
height: 150px;
top: 0%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
z-index: 3;
}
.mypost {
width: 1000px;
margin: 20px auto 20px auto;
padding: 20px 20px 20px 20px;
box-shadow: 0px 0px 3px 0px gray;
}
.mytitle {
margin: 20px auto 20px auto;
padding: 20px 20px 20px 20px;
border: solid 2px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.mytxt {
text-align: center;
margin: 20px auto 20px auto;
padding: 20px 20px 20px 20px;
border: solid 2px;
}
.mybtn>button:hover {
border: 2px solid black;
}
.mybtn {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.mybtn>button {
width: 200px;
height: 50px;
background-color: transparent;
border: 1px solid black;
color: black;
border-radius: 50px;
margin-top: 20px;
margin-right: 30px;
}
.mytitle2 {
width: 500px;
height: 400px;
margin: 20px 0px 20px 20px;
padding: 20px 20px 20px 20px;
border: 1px solid black;
}
.myposter {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-right: 30px;
}
</style>
<script>
// //DB에서 영화 정보를 가져 온 후 출력
$(document).ready(function () {
show_order2();
});
function show_order2() {
fetch("/movies4").then(res => res.json()).then(data => {
let rows = data['result4']
$('#test1').empty()
rows.forEach((a) => {
let title = a['title']
let desc = a['desc']
let image = a['image']
let comment = a['comment']
let star = a['star']
let director = a['director']
let character1 = a['character1']
let character2 = a['character2']
let character3 = a['character3']
let stars = ('⭐').repeat(star)
let temp_html1 = `<div class="mypost">
<div class="mytitle">
<br>
<div class="myposter">
<br>
<div><img src="${image}"
style="width:300px; height:400px;" /> </div>
<div> <h1> ${stars} </h1> </div>
</div>
<div class="mytitle2">
<div> <h1> ${title} </h1> </div>
<br>
<div> <h4> ${desc} </h4> </div>
<br>
<div> <h5> 감독 : ${director} / 출연진 : ${character1}, ${character2}, ${character3} </h5> </div>
</div>
</div>
<div class="mytxt">
<h3> 등록자 관람평 : ${comment} </h3>
</div>
<div class="mytxt">
<h1> 개인 관람평 </h1>
<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>
<div class="mybtn">
<button type="button" class="btn btn-outline-dark">등록하기</button>
</div>
<br>
<table class="table">
<thead>
<tr>
<th scope="col">닉네임</th>
<th scope="col">관람평</th>
<th scope="col">삭제</th>
</tr>
</thead>
</div>`
$('#test1').append(temp_html1)
})
})
}
// --------------관람평 등록, 삭제----------------------
// B : 데이터 받기
$(document).ready(function () {
show_order();
});
function show_order() {
fetch("/subB4").then(res => res.json()).then(data => {
let rows = data['result']
rows.forEach((a) => {
let id = a['id']
let comment = a['comment']
// 데이터 입력
let temp_html = `<tr>
<td>${id}</td>
<td> ${comment} </td>
<td> <button onclick ="del('${id}'+'${comment}')">삭제</button></td>
</tr>`
$('#a11').append(temp_html)
})
})
}
// A : 데이터 보내기
function save() {
let id = $('#name').val()
let comment = $('#comment').val()
let formData = new FormData()
formData.append("id_give", id)
formData.append("comment_give", comment)
fetch("/subA4", { method: "post", body: formData }).then(res => res.json()).then(data => {
alert(data['msg'])
window.location.reload()
})
}
// 데이터 삭제 기능
function del(a) {
let formData = new FormData()
let id = a
formData.append("id_del", id)
fetch("/subC4", { method: "post", body: formData }).then(res => res.json()).then(data => {
alert(data['del'])
window.location.reload()
})
}
</script>
</head>
<body>
<div class=mylogo>
<br>
<p style="font-size:50px;"> 비전5 영화 </p>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="test1">
<div class="mypost">
<div class="mytitle">
<br>
<div class="myposter">
<br>
<div><img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
style="width:300px; height:400px;" /> </div>
<div>
<h1> ⭐⭐⭐ </h1>
</div>
</div>
<div class="mytitle2">
<div>
<h1> 제목 </h1>
</div>
<br>
<div>
<h4> 상세설명 </h4>
</div>
<br>
<div>
<h5> 감독 : 감독이름 / 출연진 : 출연자1, 출연자2, 출연자3 </h5>
</div>
</div>
</div>
<div class="mytxt">
<h1> 코멘트 </h1>
</div>
<div class="mytxt">
<h1> 개인 관람평 </h1>
<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>
<div class="mybtn">
<button type="button" class="btn btn-outline-dark">등록하기</button>
</div>
<br>
<table class="table">
<thead>
<tr>
<th scope="col">닉네임</th>
<th scope="col">관람평</th>
<th scope="col">삭제</th>
</tr>
</thead>
</div>
</div>
</body>
app.py => 김장원 님, 한지훈(본인)
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
from pymongo import MongoClient
client = MongoClient('mongodb+srv://sparta:test@cluster0.rsr8xyc.mongodb.net/?retryWrites=true&w=majority')
db = client.dbsparta
# 개별 페이지 출력
@app.route('/')
def home():
return render_template('index.html')
@app.route('/sub1')
def sub1():
return render_template('sub1.html')
@app.route('/sub2')
def sub2():
return render_template('sub2.html')
@app.route('/sub3')
def sub3():
return render_template('sub3.html')
@app.route('/sub4')
def sub4():
return render_template('sub4.html')
@app.route('/input')
def input():
return render_template('input.html')
# 관람평 데이터1 -----------------------------
# A : 데이터 받기
@app.route("/subA1", methods=["post"])
def subA1():
id_receive = request.form['id_give']
comment_receive = request.form['comment_give']
sum = id_receive + comment_receive
doc = {
'id': id_receive,
'comment' : comment_receive,
'sum' : sum
}
db.vision5_comment1.insert_one(doc)
return jsonify({'msg': '저장완료'})
# B : 데이터 보내기
@app.route("/subB1", methods=["GET"])
def subB1():
comment_data = list(db.vision5_comment1.find({},{'_id':False}))
return jsonify({'result': comment_data})
#삭제기능
@app.route("/subC1", methods=["post"])
def subC1():
id_receive = request.form['id_del']
db.vision5_comment1.delete_one({'sum':id_receive})
return jsonify({'del': '삭제 성공'})
# 관람평 데이터2 -----------------------------
# A : 데이터 받기
@app.route("/subA2", methods=["post"])
def subA2():
id_receive = request.form['id_give']
comment_receive = request.form['comment_give']
sum = id_receive + comment_receive
doc = {
'id': id_receive,
'comment' : comment_receive,
'sum' : sum
}
db.vision5_comment2.insert_one(doc)
return jsonify({'msg': '저장완료'})
# B : 데이터 보내기
@app.route("/subB2", methods=["GET"])
def subB2():
comment_data = list(db.vision5_comment2.find({},{'_id':False}))
return jsonify({'result': comment_data})
#삭제기능
@app.route("/subC2", methods=["post"])
def subC2():
id_receive = request.form['id_del']
db.vision5_comment2.delete_one({'sum':id_receive})
return jsonify({'del': '삭제 성공'})
# 관람평 데이터3 -----------------------------
# A : 데이터 받기
@app.route("/subA3", methods=["post"])
def subA3():
id_receive = request.form['id_give']
comment_receive = request.form['comment_give']
sum = id_receive + comment_receive
doc = {
'id': id_receive,
'comment' : comment_receive,
'sum' : sum
}
db.vision5_comment3.insert_one(doc)
return jsonify({'msg': '저장완료'})
# B : 데이터 보내기
@app.route("/subB3", methods=["GET"])
def subB3():
comment_data = list(db.vision5_comment3.find({},{'_id':False}))
return jsonify({'result': comment_data})
#삭제기능
@app.route("/subC3", methods=["post"])
def subC3():
id_receive = request.form['id_del']
db.vision5_comment3.delete_one({'sum':id_receive})
return jsonify({'del': '삭제 성공'})
# 관람평 데이터4 -----------------------------
# A : 데이터 받기
@app.route("/subA4", methods=["post"])
def subA4():
id_receive = request.form['id_give']
comment_receive = request.form['comment_give']
sum = id_receive + comment_receive
doc = {
'id': id_receive,
'comment' : comment_receive,
'sum' : sum
}
db.vision5_comment4.insert_one(doc)
return jsonify({'msg': '저장완료'})
# B : 데이터 보내기
@app.route("/subB4", methods=["GET"])
def subB4():
comment_data = list(db.vision5_comment4.find({},{'_id':False}))
return jsonify({'result': comment_data})
#삭제기능
@app.route("/subC4", methods=["post"])
def subC4():
id_receive = request.form['id_del']
db.vision5_comment4.delete_one({'sum':id_receive})
return jsonify({'del': '삭제 성공'})
# 웹 스크롤링 --------------------------------------------
# 웹 스크롤링 데이터 mongoDB에 저장
import requests
from bs4 import BeautifulSoup
@app.route('/input', methods=["POST"])
def movie_post():
url_receive = request.form['url_give']
# 입력한 url 저장
comment_receive = request.form['comment_give']
# 입력한 comment 저장
star_receive = request.form['star_give']
# 입력한 별점 저장
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(url_receive,headers=headers)
soup = BeautifulSoup(data.text, 'html.parser')
ogtitle = soup.select_one('meta[property="og:title"]')['content']
ogimage = soup.select_one('meta[property="og:image"]')['content']
# ogdesc = soup.select_one('meta[property="og:description"]')['content'] # cgv에는 og:description 태그 부분이 없기에 주석처리
# meta tag에서 제목, 이미지, 간단 설명 스크랩하는 코드
director = soup.select_one('#select_main > div.sect-base-movie > div.box-contents > div.spec > dl > dd:nth-child(2) > a').text
# 감독 정보 selector 복사
character = soup.select_one('#select_main > div.sect-base-movie > div.box-contents > div.spec > dl > dd:nth-child(5) > a:nth-child(1)').text
# 출연진 정보 selector 복사
character_2 = soup.select_one('#select_main > div.sect-base-movie > div.box-contents > div.spec > dl > dd:nth-child(5) > a:nth-child(2)').text
# 출연진이 따로 따로 저장되어 있어 두번째 등장인물 저장
character_3 = soup.select_one('#select_main > div.sect-base-movie > div.box-contents > div.spec > dl > dd:nth-child(5) > a:nth-child(3)').text
# 세 명까지 저장
desc = soup.select_one('#menu > div.col-detail > div.sect-story-movie').text.strip()
# meta tag에 없던 세부 설명을 가져오기 위해 selector 따로 복사
doc = {
'title' : ogtitle.replace(' | 영화 그 이상의 감동. CGV',''),
# 'desc' : ogdesc,
'desc' : desc,
'image' : ogimage,
'comment' : comment_receive,
'star' : star_receive,
'director' : director,
'character1' : character,
'character2' : character_2,
'character3' : character_3
}
db.movies.insert_one(doc)
# main이라는 콜렉션 생성, 데이터들 가져와서 저장하기
return jsonify({'msg':'등록 완료!'}) # 위 코드가 정상 작동 시 등록 완료라는 메시지 반환
# DB 데이터 -> 메인에 출력--------------------------------------------------------------------------
@app.route("/movies", methods=["GET"]) # 메인화면에서 목록을 불러오기 위한 get
def movies():
all_movies = list(db.movies.find({},{'_id':False}))
# 코멘트, 감독, 등장인물은 메인화면에서 표시하지 않을 것이기 때문에 제외
# db에서 main 콜렉션에 있는 데이터들을 리스트화 해서 저장
return jsonify({'result': all_movies}) # 저장한 값 반환
# DB 데이터 -> 상세 페이지에 출력*****************************************************************************
# DB 데이터 -> 가디언즈 오브 갤럭시-Volume 3의 상세 페이지에 출력-----------------------------------------------
@app.route("/movies1", methods=["GET"]) # 메인화면에서 목록을 불러오기 위한 get
def movies1():
all_movies1 = list(db.movies.find({'title':"가디언즈 오브 갤럭시-Volume 3"},{'_id':False}))
# 코멘트, 감독, 등장인물은 메인화면에서 표시하지 않을 것이기 때문에 제외
# db에서 main 콜렉션에 있는 데이터들을 리스트화 해서 저장
return jsonify({'result1': all_movies1}) # 저장한 값 반환
# DB 데이터 -> 분노의 질주-라이드 오어 다이의 상세 페이지에 출력-------------------------------------------------
@app.route("/movies2", methods=["GET"]) # 메인화면에서 목록을 불러오기 위한 get
def movies2():
all_movies2 = list(db.movies.find({'title':"분노의 질주-라이드 오어 다이"},{'_id':False}))
# 코멘트, 감독, 등장인물은 메인화면에서 표시하지 않을 것이기 때문에 제외
# db에서 main 콜렉션에 있는 데이터들을 리스트화 해서 저장
return jsonify({'result2': all_movies2}) # 저장한 값 반환
# DB 데이터 -> 롱디의 상세 페이지에 출력------------------------------------------------------------------------
@app.route("/movies3", methods=["GET"]) # 메인화면에서 목록을 불러오기 위한 get
def movies3():
all_movies3 = list(db.movies.find({'title':"롱디"},{'_id':False}))
# 코멘트, 감독, 등장인물은 메인화면에서 표시하지 않을 것이기 때문에 제외
# db에서 main 콜렉션에 있는 데이터들을 리스트화 해서 저장
return jsonify({'result3': all_movies3}) # 저장한 값 반환
# DB 데이터 -> 메리 마이 데드 바디------------------------------------------------------------------------------
@app.route("/movies4", methods=["GET"]) # 메인화면에서 목록을 불러오기 위한 get
def movies4():
all_movies4 = list(db.movies.find({'title':"메리 마이 데드 바디"},{'_id':False}))
# 코멘트, 감독, 등장인물은 메인화면에서 표시하지 않을 것이기 때문에 제외
# db에서 main 콜렉션에 있는 데이터들을 리스트화 해서 저장
return jsonify({'result4': all_movies4}) # 저장한 값 반환
if __name__ == '__main__':
app.run('0.0.0.0',port=5000,debug=True)
크게 위와 같이 만들어졌고 그 외에도 각자 여력이 있을 때 자신의 파트가 아니더라도 서로 도움을 주신 덕분에 거의 3일만에 그럴듯한 페이지가 완성되었습니다.