[4-14]주차 | 스파르타 커뮤니티

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

[4-14]주차

undefined주차

・

추천

・

조회수

답변 완료

* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.

* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.

전 Daum 영화에서 자세한 내용을 확인하세요!라고 나오는데 왜 강사님은 다르게 나올까요..

app.py

from flask import Flask, render_template, request, jsonify

app = Flask(__name__)

from pymongo import MongoClient

import certifi

ca=certifi.where()

client=MongoClient('mongodb+srv://sparta:test@cluster0.mzxpeul.mongodb.net/?retryWrites=true&w=majority',tlsCAFile=ca)

db = client.dbsparta

import requests

from bs4 import BeautifulSoup

@app.route('/')

def home():

return render_template('index.html')

@app.route("/movie", methods=["POST"])

def movie_post():

url_receive = request.form['url_give']

comment_receive = request.form['comment_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']

doc = {

'title':ogtitle,

'desc':ogdesc,

'image':ogimage,

'comment':comment_receive

}

db.movies.insert_one(doc)

return jsonify({'msg':'저장 완료!'})

@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=5001, debug=True)

index.html

<!DOCTYPE html>

<head>

<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://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"

integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"

crossorigin="anonymous"

></script>

<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: 250px;

background-image: linear-gradient(

0deg,

rgba(0, 0, 0, 0.5),

rgba(0, 0, 0, 0.5)

url("https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg");

background-position: center;

background-size: cover;

color: white;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

}

.mytitle > button {

width: 200px;

height: 50px;

background-color: transparent;

color: white;

border-radius: 50px;

border: 1px solid white;

margin-top: 10px;

}

.mytitle > button:hover {

border: 2px solid white;

}

.mycomment {

color: gray;

}

.mycards {

margin: 20px auto 0px auto;

width: 95%;

max-width: 1200px;

}

.mypost {

width: 95%;

max-width: 500px;

margin: 20px auto 0px auto;

padding: 20px;

box-shadow: 0px 0px 3px 0px gray;

display: none;

}

.mybtns {

display: flex;

flex-direction: row;

align-items: center;

justify-content: center;

margin-top: 20px;

}

.mybtns > button {

margin-right: 10px;

}

</style>

$(document).ready(function () {

listing();

});

function listing() {

fetch("/movie")

.then((res) => res.json())

.then((data) => {

let rows = data["result"];

$("#cards-box").empty();

rows.forEach((a) => {

let comment = a["comment"];

let title = a["title"];

let desc = a["desc"];

let image = a["image"];

let temo_html = `<div class="col">

<img

src="${image}"

class="card-img-top"

<h5 class="card-title">${title}</h5>

<p class="mycomment">${comment}</p>

</div>

</div>`;

$("#cards-box").append(temo_html);

});

console.log(rows);

});

}

function posting() {

let url = $("#url").val();

let comment = $("#comment").val();

let formData = new FormData();

formData.append("url_give", url);

formData.append("comment_give", comment);

fetch("/movie", { method: "POST", body: formData })

.then((res) => res.json())

.then((data) => {

alert(data["msg"]);

window.location.reload();

});

}

function open_box() {

$("#post-box").show();

}

function close_box() {

$("#post-box").hide();

}

</script>

</head>

<body>

</div>

<input

id="url"

type="email"

class="form-control"

placeholder="name@example.com"

<label>영화URL</label>

</div>

<textarea

id="comment"

class="form-control"

placeholder="Leave a comment here"

></textarea>

</div>

기록하기

</button>

<button

onclick="close_box()"

type="button"

class="btn btn-outline-dark"

닫기

</button>

</div>

<img

src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"

class="card-img-top"

<h5 class="card-title">영화 제목이 들어갑니다</h5>

<p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>

</div>

<img

src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"

class="card-img-top"

<h5 class="card-title">영화 제목이 들어갑니다</h5>

<p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>

</div>

<img

src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"

class="card-img-top"

<h5 class="card-title">영화 제목이 들어갑니다</h5>

<p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>

</div>

<img

src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"

class="card-img-top"

<h5 class="card-title">영화 제목이 들어갑니다</h5>

<p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>

</div>

</body>

</html>

댓글 알림