종우의 삶 (전체 공개)
23.05.09 내일배움캠프 A03조 미니프로젝트 01 본문
2023년 5월 8일 부터 새로운 팀과 함께 미니 프로젝트를 시작하였다.
5월 8일 S.A를 작성하여 제출하고 오늘부터 본격적인 프로젝트 진행을 하게되었다.
팀원소개는 개인정보라 생략
프로젝트는 '영화 좋아하세요..?' 로 슬램덩크의 대사를 차용했다.
단순한 영화 소개가 아닌 나만 알고 있는 인생영화를 소개하는 페이지를 만들고자 한다.
주요한 메서드들은
| 기능 | Method | URL | Request | Response |
| 게시글 목록 불러오기 | GET | /post-list | - | 게시글 목록 |
| 영화 포스터 가져오기(URL) | GET | |||
| 게시글 저장하기 | POST | /post | 포스터, 이름, 설명, 추천 사유 | - |
| 게시글 불러오기 | GET | /post | 게시글 ID |
이정도가 있으며
팀원들이 역할을 나누어
먼저 html로 보여지는 페이지 만들기 (프론트엔드)
팝업을 띄워 게시물을 작성할 수 있는 창 만들기,
작성된 데이터를 DB에 저장하고 불러올 수 있는 작업등 을 맡게 되었다.
나는 그 중 완성된 홈페이지에 데이터를 저장하고 불러오는 역할을 맡았다.
백엔드 쪽이라 도움이 될 듯하지만 이번이 아니면 프론트엔드를 만질일이 별로 없을것 같아 아쉽기도 했다.
(내것이 잘 마무리되면 다른 팀원들을 도와줄 생각이다)
우선 코드들을 살펴보자
서버 / 백엔드 파이썬 코드
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://sparta:test@cluster0.q7dgkca.mongodb.net/?retryWrites=true&w=majority')
db = client.dbsparta
#대문 페이지
@app.route('/')
def home():
return render_template('index.html')
# index.html line 90에서 /movie로 보낸것을 받음
@app.route("/movie", methods=["POST"]) #/movie로 받음
def movie_post():
url_receive = request.form['url_give']
comment_receive = request.form['comment_give']
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']
ogdesc = soup.select_one('meta[property="og:description"]')['content']
ogimage = soup.select_one('meta[property="og:image"]')['content']
doc = {
'title' : ogtitle,
'desc' : ogdesc,
'image' : ogimage,
'comment' : comment_receive,
'star' : star_receive
}
db.movies.insert_one(doc)
return jsonify({'msg':'저장완료!'})
#글보기(메인) 페이지
@app.route('/main')
def movies():
return render_template('main.html')
@app.route("/movie", methods=["GET"])
def movie_get():
all_movies = list(db.movies.find({},{'_id':False}))
return jsonify({'result':all_movies})
if __name__ == '__main__':
app.run('0.0.0.0', port=5002, debug=True)
html 페이지 2개 (대문 화면, 영화 소개 페이지)
1. 대문 화면
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<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>영화 좋아하세요..?/page1</title>
<link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Gowun Dodum', sans-serif;
}
.mytitle {
width: 100%;
height: 1000px;
color: black;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.centerbutton {
display: inline-block;
width: 100px;
height: 100px;
background-color: transparent;
color: black;
/* border-radius: 50px; */
border: 1px solid green;
margin-top: 10px;
}
.mytitle>button:hover {
border: 2px grey;
}
.popup {
display: none;
position: fixed;
left: 30%;
top: 50%;
width: 60%;
margin-left: -10%;
height: 300px;
margin-top: -200px;
z-index: 1000;
padding: 20px;
background: white;
border: 1px solid #d1d8dd;
box-shadow: 0 0 6px 1px rgb(0 0 0 / 30%);
}
.mycomment {
color: red;
}
.mybtns {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-top: 20px;
}
.mybtns>button {
margin-right: 10px;
}
</style>
<script>
//기록하기 button
//data를 실어서 post -> '/movie'로 보냄(fetch) -> app.py line 17
function posting() {
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) => {
//data ='msg': '저장완료'
alert(data['msg'])
window.location.reload()
})
}
function open_box() {
$('#post-box').show()
}
function close_box() {
$('#post-box').hide()
}
function toggleBtn() {
const popup = document.getElementById('post-box');
if (popup.style.display !== 'none') {
popup.style.display = 'none'
}
else {
popup.style.display = 'block'
}
}
</script>
</head>
<body>
<div class="mytitle">
<h1>영화 좋아하세요..?</h1>
<div>
<button type="button" class="centerbutton" id="writebtn" onclick="toggleBtn()">글 쓰기</button>
<button type="button" class="centerbutton" onClick="location.href='main'">글 보기</button>
<!-- 팝업 -->
<div class="popup" 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="input-group mb-3">
<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 class="form-floating">
<textarea id="comment" class="form-control" placeholder="Leave a comment here"></textarea>
<label for="floatingTextarea2">코멘트</label>
</div>
<div class="mybtns">
<button onclick="posting()" type="button" class="btn btn-dark">기록하기</button>
<button onclick="close_box()" type="button" class="btn btn-outline-dark">닫기</button>
</div>
</div>
</div>
</div>
</body>
</html>2. 영화 소개 페이지
<!DOCTYPE html>
<html lang="en">
<head>
<!-- JQuery 소스 추가했습니다. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>영화 좋아하세요..?/page2</title>
<link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Gowun Dodum', sans-serif;
}
.mytitle {
background-color: rgb(54, 135, 157);
color: white;
height: 300px;
width: 700px;
background-image: url('https://i.namu.wiki/i/q3vrJ-b-BJ2XsQkqJ4-MgEAAiJpd4vpGij24aQ5HyKRpN85gUCFCOGbRcOhEd3L2NSZ-2KPVxfxOBPvbvfQtko4JCnxAwafZfUL3LMm9k-iCAFc21nxiHHUjjQycHQuZS-gyZO6_g3iEM972_BfDiA.webp');
background-position: center;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
margin: 0px auto 0px auto;
}
.myposters {
width: 1360px;
margin: 50px auto 20px auto;
align-items: center;
}
.myposter-box {
background-color: rgba(218, 229, 188, 0.759);
width: 250px;
height: 350px;
border: 2px solid #00000060;
border-radius: 15px;
display: inline-block;
overflow: hidden;
margin: 5px 7px 5px 7px
}
.myposter-image {
width: 100%;
height: 100%;
}
.mybtn {
height: 100%;
width: 100%;
font-size: 30px;
border-radius: 12px;
border: #00000060;
}
</style>
<!-- 최종우 ; 스크립트 추가 작성 -->
<script>
$(document).ready(function () {
listing();
});
function listing() {
fetch('/movie').then((res) => res.json()).then((data) => {
let rows = data['result']
$('#myposter').empty()
// 표시할 것만 뽑아서 정리 하면 될듯
rows.forEach((a) => {
let comment = a['comment']
let title = a['title']
let desc = a['desc']
let image = a['image']
let star = a['star']
let star_repeat = '⭐'.repeat(star)
let temp_html = `<div class="myposter-box">
<img src="${image}"
class="myposter-image" alt="영화 포스터 - 이미지">
</div>`
$('#myposter').append(temp_html)
})
})
}
</script>
<!-- 스크립트 끝 -->
</head>
<body>
<div class="mytitle"> </div>
<!--영화 추가 버튼-->
<div class="myposter-box">
<button type="button" class="mybtn">+영화 </br>추가하기</button>
</div>
<!-- 여기에 팝업창 그거 넣어야 할듯 -->
<div class="myposters" id="myposter"> <!--id넣었습니다-->
<!-- 영화 포스터 -->
<div class="myposter-box">
<img src="https://img1.daumcdn.net/thumb/C408x596/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fmovie%2F8876ecefc861afc397a9943ab781bdf0316c4983"
class="myposter-image" alt="영화 포스터 - 이미지">
</div>
<div class="myposter-box">
<img src="https://img1.daumcdn.net/thumb/C408x596/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fmovie%2Fbf08f2c383803951f7960602d81f4eced74ab43d"
class="myposter-image" alt="영화 포스터 - 이미지">
</div>
<div class="myposter-box">
<img src="https://img1.daumcdn.net/thumb/C408x596/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fmovie%2F5605612b56736f1b4dedc8953b29b5d04c32c053"
class="myposter-image" alt="영화 포스터 - 이미지">
</div>
<div class="myposter-box">
<img src="https://img1.daumcdn.net/thumb/C408x596/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fmovie%2Feb514ac276500897a26a8e979b130571586021b5"
class="myposter-image" alt="영화 포스터 - 이미지">
</div>
<div class="myposter-box">
<img src="https://img1.daumcdn.net/thumb/C408x596/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fmovie%2F3a684ccaeb7aeac8e3f060ffe7249f7fe039443a"
class="myposter-image" alt="영화 포스터 - 이미지">
</div>
<div class="myposter-box">
<img src="https://img1.daumcdn.net/thumb/C408x596/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fmovie%2Feb514ac276500897a26a8e979b130571586021b5"
class="myposter-image" alt="영화 포스터 - 이미지">
</div>
<div class="myposter-box">
<img src="https://img1.daumcdn.net/thumb/C408x596/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fmovie%2Feb514ac276500897a26a8e979b130571586021b5"
class="myposter-image" alt="영화 포스터 - 이미지">
</div>
<div class="myposter-box"></div>
<div class="myposter-box"></div>
<div class="myposter-box"></div>
<div class="myposter-box"></div>
</div>
</body>
</html>
우선 아직 정리되지 않아 길고복잡할 수 있다.
하지만 열심히 첫 페이지를 만들어준 팀원들에게 감사의 말씀을 전한다.
내가 하고 싶은 것은, 웹개발 종합반에서 배웠던 POST와 GET을 활용한 데이터의 표현이다.
영화의 URL을 (다음 영화 사이트) 입력하면 영화의 포스터 이미지를 크롤링 하여
목록에 붙이게 된다.
오늘의 결과 프론트와 백에서 어떤 상호작용이 일어나는지 잘 알 수 있었다.
백엔드 쪽에서 서버를 열었을때 페이지를 어떻게 이동하는지 배웠던
무척이나 많은 것들을 얻을 수 있었다.
@app.route('/')
def home():
return render_template('index.html')
@app.route("/movie", methods=["POST"]) #/movie로 받음
def movie_post():
url_receive = request.form['url_give']
comment_receive = request.form['comment_give']
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']
ogdesc = soup.select_one('meta[property="og:description"]')['content']
ogimage = soup.select_one('meta[property="og:image"]')['content']
doc = {
'title' : ogtitle,
'desc' : ogdesc,
'image' : ogimage,
'comment' : comment_receive,
'star' : star_receive
}
db.movies.insert_one(doc)
return jsonify({'msg':'저장완료!'})
fetch를 이용해 /movie로 날릴 수 있는 것을 정확히 이해하게 된 것 같다.
뭔가 해메고 있었는데 강의도 다시 듣고, 정보를 찾아서 이해하였다 ㅠㅠ
//기록하기 button
//data를 실어서 post -> '/movie'로 보냄(fetch) -> app.py line 17
function posting() {
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) => {
//data ='msg': '저장완료'
alert(data['msg'])
window.location.reload()
팀원의 주석이 도움이 되었다.
우선 데이터의 list를 만들어 append로붙이는 것은 여러번 해본 것이기에 어렵지 않았다.
적어놓은 코드를 잘 참고하여 다음에도 비슷한 것은 잘 해낼 수 있을듯 하다.
아직 머리로 정리가 잘 되지않는데, 다음 개발 일지에서는 좀더 정제된 글을 작성해보자.
-
다음 목표는 html로 태그를 만들어 검색? 하거나 태그를 붙일 수 있는 공부를 해보자.
'일지' 카테고리의 다른 글
| 23.05.11 내일배움캠프 A03조 미니프로젝트 03 (0) | 2023.05.11 |
|---|---|
| 23.05.10 내일배움캠프 A03조 미니프로젝트 02 (0) | 2023.05.10 |
| 웹개발 종합반 3주차 (0) | 2023.04.28 |
| SQL 3-4주차 문법 정리 (0) | 2023.04.27 |
| SQL 2주차 (0) | 2023.04.26 |
'일지' Related Articles
more
Comments