🗂️ Day64 프로젝트: 베스트 10 영화 웹사이트

역대 최고의 영화 10편을 꼽는 웹사이트

1. 영화 목록 항목 만들기

🔍 유의 사항

• 홈페이지에서 탑 10 영화 목록을 카드 형식으로 볼 수 있게 만들기
• SQL 알케미를 사용하여 SQ 라이트 데이터베이스 생성 (표 이름: Movie)
• 데이터베이스에 하드코딩으로 새 항목 추가 (코드를 한 번 실행 후에는 삭제해야 오류 발생 안 함)
• 카드 앞면은 영화 포스터 이미지, 뒷면은 영화 제목(연도), 별점, 리뷰, 설명

2. 영화 등급 및 리뷰 수정 기능 넣기

🔍 유의 사항

• 영화 카드 뒷면의 업데이트 버튼을 눌러 평점과 리뷰를 변경하도록 하기
• WTForms로 edit.html에서 렌더링할 Quick Form을 생성
• 폼을 제출하고 유효성을 검사한 다음 데이터베이스의 해당 영화 항목에 업데이트 사항을 추가

3. 데이터베이스에서 영화 삭제

🔍 유의 사항

• 영화 카드 뒷면의 삭제 버튼을 클릭하면 데이터베이스에서 영화 항목을 삭제

4. 새 영화를 새 페이지에 추가

🔍 유의 사항

• Add Movie 버튼을 클릭하면 추가 페이지가 렌더링되도록 수정
  (영화 제목 필드만 포함된 WTF quick form이 표시되어야 한다)
• 영화 제목 입력 후 버튼을 누르면 플라크스 서버가 해당 영화 제목을 수신하도록 변경
• requests로 해당 제목과 일치하는 모든 영화에 대해 The Movie Database API를 요청 및 검색
  • 무료 가입 후 설정 → API 키 요청 → Developer → 양식 기입 후 생성
  • 참고: 애플리케이션 설명란에 너무 짧게 적으면 오류가 발생하는 것 같음
  • 참고: API_KEY 대신 ACCESS_TOKEN 만 되는 것 같음
• 검색 쿼리를 만들어 API로 영화 데이터를 요청
• 검색된 영화 리스트 중 하나를 선택하면
  • 해당 영화 ID를 사용하여 영화 데이터베이스 API의 다른 경로가 요청되어야 한다
  • 해당 영화에 대한 제목, 이미지url, 개봉연도, 설명 가져오기
  • edit.html 페이지로 리디렉션해서 평점과 한 줄 리뷰를 추가하기

5. 영화를 등급별로 정리하고 순위 매기기

🔍 유의 사항

• 추가한 영화들의 평점에 따라 자동으로 등급을 매기도록 변경하기
• 별점이 가장 낮은 순으로 위에서부터 정렬

⌨️ main.py

from flask import Flask, render_template, redirect, url_for, request
from flask_sqlalchemy import SQLAlchemy
from sqlalchemy.orm import DeclarativeBase, Mapped, mapped_column
from sqlalchemy import String
from flask_bootstrap import Bootstrap
from flask_wtf import FlaskForm
from wtforms import StringField, SubmitField
from wtforms.validators import DataRequired
import requests

TMDB_SEARCH_URL = "https://api.themoviedb.org/3/search/movie"
TMDB_DETAILS_URL = "https://api.themoviedb.org/3/movie/"
TMDB_IMAGE_BASE_URL = "https://image.tmdb.org/t/p/original"
TMDB_API_ACCESS_TOKEN = "개인 토큰"
headers = {
    "accept": "application/json",
    "Authorization": f"Bearer {TMDB_API_ACCESS_TOKEN}"
}

app = Flask(__name__)
app.config['SECRET_KEY'] = '8BYkEfBA6O6donzWlSihBXox7C0sKR6b'
Bootstrap(app)

class RateMovieForm(FlaskForm):
    rating = StringField("Your Rating Out of 10", validators=[DataRequired()])
    review = StringField("Your Review", validators=[DataRequired()])
    submit = SubmitField("Done")

class FindMovieForm(FlaskForm):
    title = StringField("Movie Title", validators=[DataRequired()])
    submit = SubmitField("Add Movie")

# CREATE DB
class Base(DeclarativeBase):
  pass
db = SQLAlchemy(model_class=Base)
app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///movie.db"
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
db.init_app(app)

# CREATE TABLE
class Movie(db.Model):
    id: Mapped[int] = mapped_column(primary_key=True)
    title: Mapped[str] = mapped_column(String(250), unique=True, nullable=False)
    year: Mapped[int] = mapped_column(nullable=False)
    description: Mapped[str] = mapped_column(String(500), nullable=False)
    rating: Mapped[float] = mapped_column(nullable=True)
    review: Mapped[str] = mapped_column(String(250), nullable=True)
    ranking: Mapped[int] = mapped_column(nullable=True)
    img_url: Mapped[str] = mapped_column(nullable=False)

with app.app_context():
    db.create_all()
    # # 하드코딩으로 영화 추가 (한 번 추가한 데이터는 코드에서 삭제하기)
    # new_movie = Movie(
    #     title="Phone Booth",
    #     year=2002,
    #     description="Publicist Stuart Shepard finds himself trapped in a phone booth, pinned down by an extortionist's sniper rifle. Unable to leave or receive outside help, Stuart's negotiation with the caller leads to a jaw-dropping climax.",
    #     rating=7.3,
    #     ranking=10,
    #     review="My favourite character was the caller.",
    #     img_url="https://image.tmdb.org/t/p/w500/tjrX2oWRCM3Tvarz38zlZM7Uc10.jpg"
    # )
    # db.session.add(new_movie)
    # db.session.commit()

@app.route("/")
def home():
    # Movie 테이블의 데이터를 rating 기준으로 정렬한 후 db.session.execute()로 쿼리 실행
    result = db.session.execute(db.select(Movie).order_by(Movie.rating))
    # result.scalars()로 ScalarResult 객체에서 실제 데이터를 추출한 후 파이썬 리스트로 변환
    all_movies = result.scalars().all()

    for i in range(len(all_movies)):
        all_movies[i].ranking = len(all_movies) - i
    db.session.commit()
    return render_template("index.html", movies=all_movies)


@app.route("/edit", methods=["GET", "POST"])
def rate_movie():
    form = RateMovieForm()
    movie_id = request.args.get("id")
    movie = Movie.query.get(movie_id)
    if form.validate_on_submit():
        # .data 속성으로 입력값을 추출
        movie.rating = float(form.rating.data)
        movie.review = form.review.data
        db.session.commit()
        return redirect(url_for('home'))
    return render_template("edit.html", movie=movie, form=form)


@app.route("/delete")
def delete():
    movie_id = request.args.get("id")
    movie_to_delete = db.get_or_404(Movie, movie_id)
    db.session.delete(movie_to_delete)
    db.session.commit()
    return redirect(url_for('home'))


@app.route("/add", methods=["GET", "POST"])
def add():
    form = FindMovieForm()
    if form.validate_on_submit():
        movie_title = form.title.data
        params = {
            "query": movie_title,
            "include_adult": "false",
            "language": "en-US",
        }
        response = requests.get(TMDB_SEARCH_URL, params=params, headers=headers)
        data = response.json()["results"]
        return render_template("select.html", options=data)
    return render_template("add.html", form=form)


@app.route("/find")
def find():
    movie_api_id = request.args.get("id")
    if movie_api_id:
        params = {"language": "en-US"}
        response = requests.get(TMDB_DETAILS_URL + f"{movie_api_id}",  params=params, headers=headers)
        data = response.json()
        new_movie = Movie(
            title= data["title"],
            year=data["release_date"].split("-")[0],
            img_url=f"{TMDB_IMAGE_BASE_URL}{data['poster_path']}",
            description=data["overview"]
        )
        db.session.add(new_movie)
        db.session.commit()
        return redirect(url_for('rate_movie', id=new_movie.id))


if __name__ == '__main__':
    app.run(debug=True)

🏗️ base.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta
    name="viewport"
    content="width=device-width, initial-scale=1, shrink-to-fit=no"
  />
  {% block styles %}
    <!-- Load Bootstrap-Flask CSS here -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <!-- Link to the styles.css here to apply styling to all the child templates.-->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/cfaaaf681d.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}"/>
  {% endblock %}
  <title>{% block title %}{% endblock %}</title>
</head>
<body>
  {% block content %}{% endblock %}
</body>
</html>

🏗️ index.html

{% extends 'base.html' %}
{% block title %}My Top 10 Movies{% endblock %}

{% block content %}
  <div class="container">
    <h1 class="heading">My Top 10 Movies</h1>
    <p class="description">These are my all-time favourite movies.</p>

    {% for movie in movies %}
      <div class="card" >
        <div class="front" style="background-image: url('{{ movie.img_url }}');">
          <p class="large">{{ movie.ranking }}</p>
        </div>

        <div class="back">
          <div>
            <div class="title">{{ movie.title }} <span class="release_date">({{ movie.year }})</span></div>
              <div class="rating">
                <label>{{ movie.rating }}</label>
                <i class="fas fa-star star"></i>
              </div>
                <p class="review">"{{ movie.review }}"</p>
              <p class="overview">{{ movie.description }}</p>
              <a href="{{ url_for('rate_movie', id=movie.id) }}" class="button">Update</a>
              <a href="{{ url_for('delete', id=movie.id) }}" class="button delete-button">Delete</a>
          </div>
        </div>
      </div>
    {% endfor %}
  </div>
  <div class="container text-center add">
  <a href="{{ url_for('add') }}" class="button">Add Movie</a>
  </div>
{% endblock %}

🏗️ edit.html

{% extends 'base.html' %}
{% import "bootstrap/wtf.html" as wtf %}
{% block title %}Edit Movies{% endblock %}

{% block content %}
<div class="content">
  <h1 class="heading">{{ movie.title }}</h1>
  <p class="description">Edit Movie Rating</p>
  {{ wtf.quick_form(form, novalidate=True) }}
  </div>
{% endblock %}

🏗️ add.html

{% extends 'base.html' %}
{% import "bootstrap/wtf.html" as wtf %}

{% block title %}Add Movie{% endblock %}

{% block content %}
<div class="content">
    <h1 class="heading">Add a Movie</h1>
    {{ wtf.quick_form(form, novalidate=True) }}
</div>
{% endblock %}

🏗️ select.html

{% extends 'base.html' %}
{% import "bootstrap/wtf.html" as wtf %}
{% block title %}Select Movie{% endblock %}

{% block content %}
<div class="container">
    <h1 class="heading">Select Movie</h1>

    {% for movie in options %}
      <p>
        <a href="{{ url_for('find', id=movie.id) }}">
            {{ movie.title }} - {{ movie.release_date }}
        </a>
      </p>
    {% endfor %}
</div>
{% endblock %}

▷ Angela Yu, [Python 부트캠프 : 100개의 프로젝트로 Python 개발 완전 정복], Udemy, https://www.udemy.com/course/best-100-days-python/?couponCode=ST3MT72524