티스토리 뷰
◎ 영화 포스팅 페이지 만들기
http://spartacodingclub.shop/web/movie
스파르타 피디아
더 수어사이드 스쿼드 살고 싶다면 무조건 성공시켜라!최강 우주 빌런에 맞선, 자살특공대에게 맡겨진 ‘더’ 대책 없는 작전.... ⭐⭐⭐
spartacodingclub.shop
영화 포스팅 페이지를 만들어보자.
기본 폴더를 만들고 패키지 설치를 하자.
여기서는 requests와 bs4도 설치해준다.
왜?
영화 기록하기를 보면 url, 별점, 코멘트를 입력을 하게되면
포스팅박스에는 영화 이미지, 제목, 줄거리가 추가되어 나온다.
어디서 가져온걸까?
입력된 url에 저장되어있는 정보를 가져온것이다.
url을 크롤링해서 db에 저장해야하기 때문에 두 패키지를 추가로 설치한것!
● 조각 기능 구현하기
- meta태그 : 웹페이지 자체의 정보를 명시하기 위한 목적으로,
<head></head> 부분에 들어가는 사이트의 속성을 설명해주는 태그들이다.
이번 프로젝트에서는 meta태그의 이미지, 제목, 줄거리 부분을 크롤링하여 사용할것이다.
▶ meta태그 크롤링하기
파일을 만들어 연습한 후 출력이 잘 되면 가져다쓰자.
크롤링 기본 코드를 넣어보자. (코드스니펫)
import requests
from bs4 import BeautifulSoup
url = 'https://movie.naver.com/movie/bi/mi/basic.naver?code=191597'
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,headers=headers)
soup = BeautifulSoup(data.text, 'html.parser')
잘 나오는지 확인 후에 url에 들어가보자.
개발자 도구에 들어가 <head>를 보면 meta태그가 들어있는게 보인다.
여기서 필요한 데이터가 들어있는 곳을 찾아 넣어주면 된다.
먼저 제목부터 가져와보자.
meta태그를 크롤링할 때는 방식이 조금 다르다.
title = soup.select_one('meta[property="og:title"]')
# meta의 property가 og:title인 것을 가져온다출력하면
여기서 원하는 제목이 들어있는 곳은 content이므로 이 부분만 가져온다.
같은 방식으로 이미지, 줄거리도 가져오자.
title = soup.select_one('meta[property="og:title"]')['content']
image = soup.select_one('meta[property="og:image"]')['content']
desc = soup.select_one('meta[property="og:description"]')['content']
● 뼈대 준비하기
뼈대 코드를 app.py와 index.html폴더에 넣자. (코드스니펫)
영화기록하기 버튼을 누르면 포스팅박스가 나온다.
이 박스에 영화에 대한 정보를 입력한 후 기록하기 버튼을 누르면 포스팅카드가 나오도록하자.
● 포스팅하기 - POST
1. 요청 정보 : URL= /movie , 요청 방식 : POST
2. 클라(ajax) → 서버(flask) : url, star, comment 전송
3. 서버(flask) → 클라(ajax) : 메세지 보내기 (포스팅 완료!)
1) 클라이언트 서버 연결 확인하기
기록하기 버튼에 동작이 걸려있다.
동작에 대한 함수를 보면 버튼을 누르면 메세지창이 뜨도록 되어있다.
function posting() {
$.ajax({
type: 'POST',
url: '/movie',
data: {sample_give: '데이터전송'},
success: function (response) {
alert(response['msg'])
}
});
}서버에 가서 코드를 확인해보자.
@app.route("/movie", methods=["POST"])
def movie_post():
sample_receive = request.form['sample_give']
print(sample_receive)
return jsonify({'msg':'POST 연결 완료!'})페이지에 가서 보면?
연결이 되어있다.
2) 서버 만들기
서버가 받아오는 정보는 url, star, comment이다.
이에 대한 변수를 선언하자.
url_receive = request.form['url_give']
star_receive = request.form['star_give']
comment_receive = request.form['comment_give']여기서 받아오는 url을 가지고 title, image, description을 가져와 나중에 보내주어야한다.
→ 위에서 한 크롤링 사용하기
그런데 크롤링은 특정 url주소를 이용했기 때문에 data의 url을 url_receive로 바꾸어야한다.
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')
title = soup.select_one('meta[property="og:title"]')['content']
image = soup.select_one('meta[property="og:image"]')['content']
desc = soup.select_one('meta[property="og:description"]')['content']
이제 이 정보를 DB에 저장해보자.
doc = {
'title' : title,
'image' : image,
'desc' : desc,
'star' : star_receive,
'comment' : comment_receive
}
db.movies.insert_one(doc)
return jsonify({'msg':'포스팅 완료!'})
3) 클라이언트 만들기
클라이언트에서 입력된 url, star, comment값을 보내주어야한다.
먼저 각각 변수를 선언하자.
let url = $('#url').val()
let star = $('#star').val()
let comment = $('#comment').val()이제 이 데이터값을 서버로 보내주자.
data: {url_give: url, star_give: star, comment_give: comment}
이제 잘 되었는지 확인해보자.
영화url을 하나 가져와 기록해보자.
'리틀 포레스트'를 기록해보았다.
기록하기 버튼을 누른 후 mongodb에 가서 확인해보자.
● 보여주기 - GET
1. 요청 정보 : URL= /movie , 요청 방식 : GET
2. 클라(ajax) → 서버(flask) : 없음
3. 서버(flask) → 클라(ajax) : 전체 영화 보내주기
1) 클라이언트 서버 연결 확인하기
클라이언트를 보면 페이지 로딩 후 동작이 걸려있다.
$(document).ready(function(){
listing();
});
function listing() {
$.ajax({
type: 'GET',
url: '/movie',
data: {},
success: function (response) {
alert(response['msg'])
}
})
}서버를 확인해보자.
@app.route("/movie", methods=["GET"])
def movie_get():
return jsonify({'msg':'GET 연결 완료!'})페이지 로딩이 완료되면 메세지창이 뜨는지 확인해보자.
2) 서버 만들기
서버는 모든 데이터를 가져와서 보내주어야한다.
우선 모든 데이터를 가져오자.
movie_list = list(db.movies.find({}, {'_id': False}))클라이언트에 보내주자.
return jsonify({'movies':movie_list})
3) 클라이언트 만들기
클라이언트는 서버로부터 데이터를 받아와 페이지에 붙여주어야한다.
먼저 서버가 보낸 데이터가 어떤 형식으로 찍히는지 콘솔창에서 확인해보자.
'movies'안에 리스트형식으로 들어가있다.
영화에 대한 데이터를 하나씩 찍어주기위해 하나씩 돌려 데이터를 가져오자.
let rows = response['movies']
for (let i = 0; i < rows.length; i++) {
let title = rows[i]['title']
let image = rows[i]['image']
let desc = rows[i]['desc']
let star = rows[i]['star']
let comment = rows[i]['comment']
}그런데 별점은 문자가 아닌 이모티콘으로 찍혀야한다.
let star_image = '⭐'.repeat(star)
이제 페이지에 찍어보자.
let temp_html = `<div class="col">
<div class="card h-100">
<img src="${image}"
class="card-img-top">
<div class="card-body">
<h5 class="card-title">${title}</h5>
<p class="card-text">${desc}</p>
<p>${star_image}</p>
<p class="mycomment">${comment}</p>
</div>
</div>
</div>`
$('#cards-box').append(temp_html)각 자리에 해당하는 데이터값을 넣고 페이지에 붙이면 완료!
페이지에서 확인해보자.
'코딩 > 스파르타코딩-웹개발' 카테고리의 다른 글
| 웹개발 5주차 개발일지 (1) - 프로젝트 [버킷리스트] (0) | 2022.10.27 |
|---|---|
| 웹개발 4주차 개발일지(2) - 프로젝트 [화성땅 공동구매] (0) | 2022.10.25 |
| 웹개발 4주차 개발일지(1) - flask (0) | 2022.10.24 |
| 웹개발 3주차 개발일지(4) - DB연습하기, 크롤링 연습하기 (0) | 2022.10.23 |
| 웹개발 3주차 개발일지(3) - 데이터베이스 (0) | 2022.10.20 |