영화 추천 공유사이트의 등록 페이지를 만들었다.
아래는 완성코드
<!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>비전5 영화</title>
<style>
.popup_content{
background-color: transparent;
border-radius: 8px;
border: solid;
width: 450px;
height: 600px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
text-align: center;
}
.textbox{
width: 90%;
padding-left: 10px;
font-size: 20px;
border: 2px solid #bbb;
border-radius: 8px;
margin-top: 40px;
resize: none;
}
.btn-option{
width: 150px;
height: 50px;
border: 2px solid #ddd;
background-color: transparent;
border-radius: 8px;
}
.btn-option:hover{
background-color: #bbb;
}
</style>
<script>
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('/movie',{method: "POST", body: formData}).then((res) => res.json()).then((data) => {
alert(data['msg'])
// window.location.reload(); 다시 메인화면으로 돌아가기
})
onCancelBtn();
}
function onCancelBtn(){
alert("취소하고 팝업닫기");
//메인페이지로 돌아가기
}
</script>
</head>
<body>
<div class="wrap">
<button style="font-size: 35px;margin-top: 10px;margin-left: 10px;">비전5 영화.</button>
<div class="popup_content">
<h1>영화 등록하기</h1>
<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>
</div>
</body>
</html>오브젝트 가운데정렬을 할 시
<style>
.object{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
</style>위와 같이 position: absolute를 이용해 가운데정렬할 수 있는 방법이 있었다.
그리고 textarea를 사용하니 textarea를 사용자가 직접 크기를 조절할 수 있는 기능이 있었는데, 이 기능을 사용하니 모든 오브젝트가 따라 아래로 내려가버려서 resize: none;을 이용해 사이즈 조절기능을 막았다.
그리고 app.py서버와 연결완료!
app.py서버 코드
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
import certifi
ca = certifi.where()
from pymongo import MongoClient
client = MongoClient('mongodb+srv://sparta:test@cluster0.oid4wb8.mongodb.net/?retryWrites=true&w=majority', tlsCAFile=ca)
db = client.dbsparta
# mongodb연결 및 dbspata라는 데이터베이스 지정
import requests
from bs4 import BeautifulSoup
@app.route('/')
def home():
return render_template('index.html')
@app.route("/movie", methods=["POST"]) # 등록 페이지에서 url, comment, 별점 입력시 상세페이지 및 메인 페이지에서 출력할 정보들 저장하는 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에서 제목, 이미지, 간단 설명 스크랩하는 코드
derector = 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' : desc,
'image' : ogimage,
'comment' : comment_receive,
'star' : star_receive,
'derector' : derector,
'character1' : character,
'character2' : character_2,
'character3' : character_3
}
db.main.insert_one(doc)
# main이라는 콜렉션 생성, 데이터들 가져와서 저장하기
return jsonify({'msg':'등록 완료!'}) # 위 코드가 정상 작동 시 등록 완료라는 메시지 반환
@app.route("/movie_list", methods=["GET"]) # 메인화면에서 목록을 불러오기 위한 get
def movie_list():
all_movies = list(db.main.find({},{'_id':False},{'character1':False},{'character2':False},{'character3':False},{'comment':False})) # 코멘트, 등장인물은 메인화면에서 표시하지 않을 것이기 때문에 제외
# db에서 main 콜렉션에 있는 데이터들을 리스트화 해서 저장
return jsonify({'result': all_movies}) # 저장한 값 반환
@app.route("/movie_desc", methods=["GET"]) # 상세 페이지에서 정보를 불러오기 위한 get
def movie_desc():
specific_movie = list(db.main.find({},{'_id':False})) # 데이터 베이스의 모든 정보를 가져올 것
return jsonify({'result':specific_movie})
if __name__ == '__main__':
app.run('0.0.0.0', port=5001, debug=True)
맥을 이용중이어서 기본 코드와는 다르게 certifi를 import하고 사용하고 있다. 아래 port도 5000번이 아닌 5001번이다.
그 뒤로 웹의 디자인을 통일할 의견과 코드를 합쳤는데, 오류가 생겨서 진행하지 못 하고 있는 상황이다...
